juliancheng/pages/index/index.vue

<template>
	<view class="main">
		<image class="topbg" :src="imgHost+'/static/index/top1.png'"></image>
		<view class="main-box">
			<swiper class="swipe" @change="swiperChange" :current="itemcurrent" :autoplay="true" :interval="5000"
				:duration="1500">
				<!-- <swiper-item v-for="(item,index) in bannerImg" :key="index">
					<navigator :url="item.url">
						<image :src="item.image" style="width: 100%;" mode="aspectFill" :title="item.title"></image>
					</navigator>
				</swiper-item> -->
				<swiper-item v-for="(item,index) in bannerImg" :key="index">
					<view class="cu-card case" style="width: 100%;height: 100%;" @click="gotoitem(item.jump_url)">
						<view class="cu-item shadow" style="width: 100%;height: 100%;margin: 0;">
							<view class="image">
								<image :src="item.image" style="height: 306rpx;" mode="aspectFill"></image>
								<!-- <view class="cu-tag bg-blue">史诗</view> -->
								<!-- <view class="cu-bar bg-shadeBottom">
										<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
									</view> -->
							</view>
							<view class="cu-list menu" style="height: 100rpx;display: flex;align-items: flex-end;">
								<view class="cu-item" style="width: 100%;">
									<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
									<view class="content flex-sub">
										<view class="text-grey">{{item.title}}</view>
										<view class="text-gray text-sm flex justify-end">
											<view class="text-gray text-sm">
												<text class="cuIcon-timefill margin-lr-xs"></text> {{item.created_at}}
												<!-- <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
													<text class="cuIcon-messagefill margin-lr-xs"></text> 30 -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view :class="index==itemcurrent?'dot active':'dot'" v-for="(item,index) in bannerImg" :key="index">
				</view>
			</view>
			<!-- <swiper class="swipe" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<navigator :url="item.url" v-for="(item, index) in bannerImg" :key="index">
					<swiper-item>
						<image :src="item.image" mode="aspectFill" :title="item.title"></image>
					</swiper-item>
				</navigator>
			</swiper> -->
			<!-- <view class="gonggao" @click="announcement" data-target="Modal">
				<image class="gimg" :src="imgHost+'/static/index/gonggao.png'"></image>
				<view class="gtxt">
					<text class="gtxt-title">公告：</text>
					{{ configDatas.notice_title }}
				</view>
			</view> -->
			<view v-if="unpaidCount" @click="toOrder()" class="round "
				style="margin-top: 40px;width:100%;height: 60rpx ;line-height: 60rpx;text-align: center;background-color: rgba(191,46,22,.5);color: #fff;">
				您有待支付订单，点击跳转到该订单详情
			</view>
			<!-- 加盟 -->
			<view class="imgs-box" v-if="configDatas.is_show == 1">
				<view class="left" @click="geren()">
					<!-- <image :src="imgHost+'/static/index/l.png'" @click="jiameng()"></image> -->
					<image src="/static/index/d559cef451313438cb1f78f7c2f5dbe.png" mode=""></image>
					<view class="text-black text-bold" style="margin-top: 27rpx;">
						个人征信异议申诉
					</view>
				</view>
				<view class="left" @click="qiye()">
					<image src="/static/index/8cb650aa313f95fb70ab8874b9f0be9.png" mode=""></image>
					<view class="text-black text-bold" style="margin-top: 27rpx;">
						企业信用问题咨询
					</view>
					<!-- <image :src="imgHost+'/static/index/l.png'" @click="jiameng()"></image> -->
				</view>
				<!-- <view class="right">
					<image :src="imgHost+'/static/index/r1.png'" @click="geren()"></image>
					<image :src="imgHost+'/static/index/r2.png'" @click="qiye()" style="margin-top:2vw;bottom:0;"></image>
				</view> -->
			</view>
			<!-- 常见问题 -->
			<view class="flex justify-center">
				<button class="cu-btn round lg" @click="qus(1)"
					style="width: 600rpx;background-color:rgb(191, 46, 22);box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);color: #fff;">
					<text class="cuIcon-questionfill text-white margin-right-xs"></text>
					<text>常见问题</text>
				</button>
			</view>
			<sin-barrage :list="list" background="#fab6b6" color="#fa3534"></sin-barrage>
			<!-- <view class="list-box">
				<view class="title">
					<view class="name">常见问题</view>
					<view class="more" @click="qus(1)">更多</view>
				</view>
				<view class="list">
					<view class="infobox" v-for="(item, index) in newList" :key="index" @click="articleDetails(item.id)">
						<view class="left">
							<view class="infoname">{{ item.title }}</view>
							<view class="infotxt">{{ item.gist == null ? '' : item.gist }}</view>
							<view class="infolook">
								<image :src="imgHost+'/static/index/look.png'" class="infolook-img" />
								<view>{{ item.virtual_view + item.view }}</view>
							</view>
						</view>
						<view class="right">
							<image :src="item.image" class="right-img-item" />
						</view>
					</view>
				</view>
			</view> -->
			<!-- 行业动态 -->
			<!-- <view class="list-box" style="padding-top: 30px;">
				<view class="title">
					<view class="name">行业动态</view>
					<view class="more" @click="dongtai(2)">更多</view>
				</view>
				<view class="list">
					<view class="infobox" v-for="(item, index) in DynamicList" :key="index" @click="articleDetails(item.id)">
						<view class="left">
							<view class="infoname">{{ item.title }}</view>
							<view class="infotxt">{{ item.gist == null ? '' : item.gist }}</view>
							<view class="infolook">
								<image :src="imgHost+'/static/index/look.png'" class="infolook-img"></image>
								<view>{{ item.virtual_view + item.view }}</view>
							</view>
						</view>
						<view class="right">
							<image :src="item.image" class="right-img-item" />
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 公告框 -->
		<!-- <view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
			<view class="cu-dialog top">
				<view class="cu-bar bg-white justify-end">
					<view class="content">公告</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close yellow" /></view>
				</view>
				<view class="padding-xl">{{ configDatas.notice_content}}</view>
			</view>
		</view> -->
		<!-- 获取微信信息弹窗框 -->
		<view class="cu-modal" :class="modalName == 'WxModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">您还未登录</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<view class="top-title">
						<text class="top-title1">请先登录再进行操作</text>
					</view>
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
						<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg"
							hover-class="btn-hover">立刻登录</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <follow-qrcode :show="showQrcode" @hide="hideQrcode"></follow-qrcode> -->
	</view>
</template>

<script>
	import {
		envHost
	} from '@/common/env';
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import sinBarrage from '@/components/sin-barrage/sin-barrage.vue'
	import followQrcode from '@/components/follow-qrcode/follow-qrcode.vue'
	export default {
		components: {
			sinBarrage,
			followQrcode
		},
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				mine_show:false,
				showQrcode: true, // 默认显示
				unpaidCount: 0,
				modalName: null, //公告框状态
				gonggao: false,
				canIUse: wx.canIUse('button.open-type.getUserInfo'),
				newList: [],
				DynamicList: [],
				bannerImg: [],
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				configDatas: {
					notice_content: '',
					notice_title: '',
					is_show: ''
				},
				toUrl: '',
				imgHost: '',
				itemcurrent: 0,
				callurl: "",
				list: [{
					id: 1,
					text: "刘**",
					phone: "189******28",
					time: "30分钟前"
				}, {
					id: 2,
					text: "李**",
					phone: "176******25",
					time: "10分钟前"
				}, {
					id: 3,
					text: "徐**",
					phone: "155******31",
					time: "15分钟前"
				}, {
					id: 4,
					text: "王**",
					phone: "135******69",
					time: "3分钟前"
				}, {
					id: 5,
					text: "郑**",
					phone: "188******36",
					time: "8分钟前"
				}]
			}
		},
		// 小程序分享
		onShareAppMessage(res) {
			return {
				title: '聚联诚集团小程序',
				path: '/pages/index/index'
			};
		},
		async onLoad(options) {
			if (options.up_id) {
				uni.setStorageSync('up_id', options.up_id);
			}
			if (options.articleId) {
				uni.navigateTo({
					url: './index/articleDetails?id=' + options.articleId
				});
			}

			//#ifdef H5
			if (window.location.href.split("?")[1] != undefined) {
				let id = window.location.href.split("?")[1].split("=")[1]
				uni.setStorageSync('up_id', id)
			}
			//#endif

			//#ifdef MP
			// 页面初始化 options为页面跳转所带来的参数
			if (options.scene) {
				//这个scene的值存在则证明首页的开启来源于朋友圈分享的图,同时可以通过获取到的goodId的值跳转导航到对应的详情页
				var scene = decodeURIComponent(options.scene);
				if (scene) {
					uni.setStorageSync('up_id', scene);
				}
			}
			//#endif
			this.callurl = this.$callurl
			this.imgHost = this.$imgHost

			if (this.hasLogin) {
				await this.getUser(true);
			}
			console.log(this.user.id)
		},
		onShow() {
			this.getUnpaidOrder()
			if (this.user.web_openid == "" && this.$util.is_weixin()) {
				window.location.href = envHost +
					"/api/common/wxAuthorize?callback=" + this.callurl + this.user.id
			}
			this.sharefun(this.user.id)
			this.checkWxSubscribe(this.user.id)
		},
		mounted() {
			this.getBannerImg();
			this.newsList(1);
			this.dynamicList(2);
			this.configData();
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations({
				setJwt: 'setJwt',
				login: 'login'
			}),
			hideQrcode() {
				this.showQrcode = false
			},
			async checkWxSubscribe(user_id) {
				if (!user_id) {
					return false;
				}
				let data = await this.$request.post('/api/common/checkWxSubscribe', {
					user_id: user_id
				}, false);
				console.log(data)
				if (data.code == 200) {
					console.log('ok Subscribe')
					this.showQrcode = data.data == 1 ? false : true;
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			async getUnpaidOrder() {
				let data = await this.$request.post('/api/order/orderCount', {
					order_status_new: 1
				}, false);
				console.log(data)
				if (data.code == 200) {
					this.unpaidCount = data.data;
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			toOrder(e) {
				if (this.mine_show) {
					return false
				}
				uni.navigateTo({
					url: '/pages/mine/order?index=0'
				});
			},
			getSystemInfo() {
				let num = 0
				uni.getSystemInfo({
					success(res) {
						num = res.screenWidth - 275
					}
				})
				return num
			},
			swiperChange(e) {
				this.itemcurrent = e.detail.current
			},
			gotoitem(url) {
				if (this.mine_show) {
					return false
				}
				window.location.href = url
			},
			configData: async function() {
				let res = await this.$request.post('/api/SystemConfig/getSysteConfig');
				console.log(res.data);
				if (res.code == 200) {
					this.configDatas = res.data;
					uni.setStorageSync("configDatas", this.configDatas)
				}
			},
			close() {
				this.gonggao = false;
			},
			sharefun(id) {
				if (!this.hasLogin) {
					return false;
				}
				if (this.$wechat.is_weixin()) {
					this.$wechat.share({
						title: '聚联诚集团信用评估系统V3.0评估入口',
						desc: '点击链接，开始您的个人信用评估',
						imgUrl: "https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/202012221445499.jpeg",
					}, window.location.href, id, true)
				}
			},
			announcement(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			hideModal(e) {
				this.modalName = null;
			},
			jiameng() {
				// 请求接口返回数据判断是否为推广人
				// 是推荐人直接跳转到pages/tuijian/tuijian 页面
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/index/joinInfo'
					});
				} else {
					this.toUrl = '/pages/index/joinInfo';
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			// 轮播图接口
			getBannerImg: async function() {
				let res = await this.$request.get('/api/Slide/slideList', {
					page: 1,
					size: 10
				});
				if (res.code == 200) {
					this.bannerImg = res.data;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			},
			newsList: async function(cate_id) {
				let res = await this.$request.get('/api/Article/articleList?page=1&size=2&cate_id=' + cate_id);
				console.log(res, '666');
				if (res.code == 200) {
					this.newList = res.data.data;
					console.log(this.newList);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			},
			dynamicList: async function(cate_id) {
				let res = await this.$request.get('/api/Article/articleList?page=1&size=2&cate_id=' + cate_id);
				console.log(res, '666');
				if (res.code == 200) {
					this.DynamicList = res.data.data;
					console.log(this.newList);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			},
			// wxLogin: async function(e) {
			// 	console.log(e);
			// 	if (e.detail.userInfo == undefined) {
			// 		uni.showToast({
			// 			title: '微信登录失败'
			// 		});
			// 		return;
			// 	}
			// 	this.modalName = '';
			// 	user.loginByWeixin(e.detail.userInfo)
			// 		.then(res => {
			// 			console.info(this.user);
			// 			if (this.toUrl) {
			// 				if (this.toUrl == '/pages/index/gerenxiufu' || this.toUrl == '/pages/index/qiyexiufu') {
			// 					if (this.$util.isEmpty(this.user.realname)) {
			// 						uni.navigateTo({
			// 							url: '../mine/info'
			// 						});
			// 					} else {
			// 						uni.navigateTo({
			// 							url: this.toUrl
			// 						});
			// 					}
			// 				} else {
			// 					uni.navigateTo({
			// 						url: this.toUrl
			// 					});
			// 				}
			// 			}
			// 		})
			// 		.catch(res => {
			// 			uni.showToast({
			// 				title: '微信登录失败'
			// 			});
			// 		});
			// },
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			},
			async geren() {
				if (this.mine_show) {
					return false
				}
				if (this.hasLogin) {
					let user = await this.getUser(true);
					if (this.$util.isEmpty(this.user.realname)) {
						uni.navigateTo({
							url: '../mine/info'
						});
					} else {
						uni.navigateTo({
							url: '/pages/index/gerenxiufu'
						});
					}
				} else {
					this.toUrl = '/pages/index/gerenxiufu';
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			async qiye() {
				if (this.mine_show) {
					return false
				}
				if (this.hasLogin) {
					let user = await this.getUser(true);
					if (this.$util.isEmpty(this.user.realname)) {
						uni.navigateTo({
							url: '../mine/info'
						});
					} else {
						uni.navigateTo({
							url: '/pages/index/qiyexiufu'
						});
					}
				} else {
					this.toUrl = '/pages/index/qiyexiufu';
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			qus(cate_id) {
				if (this.mine_show) {
					return false
				}
				uni.navigateTo({
					url: '/pages/index/qus?cate_id=' + cate_id
				});
			},
			dongtai(cate_id) {
				uni.navigateTo({
					url: '/pages/index/dongtai?cate_id=' + cate_id
				});
			},
			articleDetails(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/index/articleDetails?id=' + id
				});
			}
		}
	};
</script>

<style>
	/* 	page{
	  margin: 0;
	  padding: 0;
	  background: #f5f5f5;
	} */
	.main {
		width: 100%;
		height: auto;
		/* min-height: 100vh; */
		position: relative;
		/* margin-bottom: 55px; */
	}

	.main .topbg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 36vw;
		z-index: 0;
	}

	.main .main-box {
		width: 90vw;
		/* height: auto; */
		margin: 0 5vw;
		padding: 5vw 0;
		z-index: 1;
		position: relative;
	}

	.main-box .swipe {
		width: 100%;
		height: 400rpx;
		/* background: #eee; */
		border-radius: 10px;
		overflow: hidden;
		z-index: 1;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		/* bottom: 30rpx; */
		top: 464rpx;
		display: flex;
		justify-content: center;
	}

	.dots .dot {
		margin: 0 8rpx;
		width: 10rpx;
		height: 10rpx;
		background: rgb(221, 221, 221);
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dots .dot.active {
		width: 24rpx;
		height: 10rpx;
		background: rgb(251, 198, 0);
	}

	/* .swipe swiper-item navigator {
		width: 100%;
		height: 100%;
	}

	.swipe swiper-item image {
		width: 100%;
		height: 100%;
	} */

	.gonggao {
		width: 100%;
		height: 50px;
		display: flex;
		padding: 5px 0;
		line-height: 50px;
		font-size: 14px;
		color: #999;
		border-bottom: 1px solid #eee;
	}

	.gonggao .gimg {
		width: 30px;
		height: 30px;
		margin: 10px 5px;
	}

	.gonggao .gtxt {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gtxt .gtxt-title {
		color: #000;
		font-size: 16px;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.imgs-box {
		width: 100%;
		height: 45vw;
		display: flex;
		justify-content: space-between;
		margin: 25px 0;
	}

	.imgs-box .left,
	.imgs-box .right {
		width: 43.5vw;
		height: 45vw;
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.imgs-box .left image {
		width: 94px;
		height: 94px;
	}

	.imgs-box .right image {
		width: 100%;
		height: 21.5vw;
		position: absolute;
	}

	.list-box {
		width: 100%;
		height: auto;
	}

	.list-box .title {
		width: 100%;
		height: 10px;
		line-height: 10px;
		border-left: 2px solid #f5cc57;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(85, 88, 100, 1);
		font-size: 14px;
	}

	.list-box .title .name {
		font-size: 38rpx;
		font-weight: 400;
		text-indent: 7px;
		color: rgba(85, 88, 100, 1);
		font-family: PingFangSC-Regular, sans-serif;
	}

	.list-box .title .more {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(140, 142, 150, 1);
		font-family: PingFangSC-Regular, sans-serif;
	}

	.list {
		width: 100%;
		height: auto;
		margin-top: 20px;
	}

	.list .infobox {
		width: 100%;
		height: 180rpx;
		margin: 15px 0;
		display: flex;
		justify-content: space-between;
	}

	.infobox .left {
		width: 54vw;
	}

	.infobox .right {
		width: 34vw;
	}

	.infobox .right .right-img-item {
		border-radius: 12rpx;
	}

	.right image {
		width: 100%;
		height: 100%;
	}

	.left .infoname {
		/* width: 100%; */
		height: 85rpx;
		/* line-height: 80rpx; */
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(85, 88, 100, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.left .infotxt {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		color: #999;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, sans-serif;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.left .infolook {
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
	}

	.infolook .infolook-img {
		width: 34rpx;
		height: 34rpx;
		margin: 2px;
		border-radius: 12rpx;
	}

	.infolook view {
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 5px;
		color: #999;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
	}

	.bg .gonggaobox {
		width: calc(90vw - 30px);
		height: auto;
		padding: 15px;
		background: #fff;
		border-radius: 8px;
		margin: 20% 5vw;
	}

	.gonggaobox .title {
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.title .name1 {
		width: 60%;
		height: 50px;
		text-align: center;
		color: #555864;
	}

	.title .close {
		width: 20%;
		height: 50px;
		text-align: center;
		color: #f5cc57;
	}

	.gonggaobox .txt {
		padding: 15px;
		text-indent: 20px;
		color: #555864;
	}

	.yellow {
		color: #f5cc57;
	}

	.yellowBg {
		background: #f5cc57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	/* 弹出框样式 */
	.top {
		bottom: 200px;
	}

	.top-title {
		margin-bottom: 15px;
	}

	.top-title .top-title1 {
		font-size: 19px;
		color: #000000;
		margin-top: 10px;
	}

	.top-title .top-title2 {
		font-size: 13px;
		color: #999;
	}
</style>