dingdong-master/pages/index/my-home.vue

<template>
	<view>
		<view class="bg-gradual-color padding text-center"
			:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
			<view class="cu-avatar round"
				:style="'width: 150rpx; height: 150rpx; background-image:url(' + curUserInfo.workerLogoUrl + ');'">
			</view>
			<view class="text-xl margin-sm">{{curUserInfo.name}}</view>
			<view class="cu-list grid no-border col-2" style="background-color: inherit;">
				<!-- <view class="cu-item" @click="clickMenuItem({pageUrl: '/pages/my/my-money-bag'})"> -->
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">0</view>
					<view>我的钱包</view>
				</view>
				<view class="cu-item solid-left">
					<view class="margin-bottom-xs text-xxl">5.0</view>
					<view>服务评分</view>
				</view>
			</view>
		</view>
		<view class="paper-drawer-bar margin-bottom-with-bar">
			<view class="margin-lr-sm cu-list grid no-border col-4 shadow-warp">
				<view class="cu-item">
					<view class="cuIcon-remind margin-bottom-xs middle-icon"
						:class="myInfo.door24h ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.door24h ? '' : 'text-gray'">24小时上门</view>
				</view>
				<view class="cu-item solid-left">
					<view class="cuIcon-safe margin-bottom-xs middle-icon"
						:class="myInfo.warranty72h ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.warranty72h ? '' : 'text-gray'">72小时质保</view>
				</view>
				<view class="cu-item solid-left" @click="goToPage('/pages/my/certification')">
					<view class="cuIcon-profile margin-bottom-xs middle-icon"
						:class="curCertifyInfo && curCertifyInfo.status === 1 ? 'text-main-color' : 'text-gray'"></view>
					<view :class="curCertifyInfo && curCertifyInfo.status === 1 ? '' : 'text-gray'">实名认证</view>
				</view>
				<view class="cu-item solid-left">
					<view class="cuIcon-moneybag margin-bottom-xs middle-icon"
						:class="myInfo.deposit ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.deposit ? '' : 'text-gray'">保证金</view>
				</view>
			</view>
			<view class="bg-white">
				<view class="margin-top margin-lr-sm">
					<view class="flex justify-between align-center solid-bottom padding padding-lr-lg text-lg" 
						v-for="(item, index) in menuList" :key="index" @click="clickMenuItem(item)"
						v-if="item.show || (item.showByStatus ? curUserInfo.status != -1 : false)">
						<view class="flex justify-start align-center">
							<view class="margin-right-sm text-main-color text-xl"><view :class="'cuIcon-' + item.icon"></view></view>
							<view>{{item.name}}</view>
						</view>
						<view class="cuIcon-right"></view>
					</view>
				</view>
			</view>
		</view>
		
		<confirm-modal ref="focusModal" :showCancel="false" :isAutoClose="false"  confirmMsg="已关注" @confirm="checkIfFollow()">
			<template #contentView>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 30rpx;margin-bottom: 30rpx;font-weight: 500;">先关注公众号，绑定订单通知！</text>
					<image style="width: 400upx;height: 400upx;margin-bottom: 20upx;" :show-menu-by-longpress="true" src="http://gqz.opsoul.com/qrcode_for_gh_e1c9ac86741f_860.jpg" mode="aspectFill"></image>
					<text style="margin-bottom: 20upx;">操作方式</text>
					<text>长按二维码，前往公众号点关注</text>
				</view>
			</template>
		</confirm-modal>
	</view>
</template>

<script>
	export default {
		name: 'my-home',
		data() {
			return {
				pageContentTop: this.CustomBar,
				curUserInfo: {},
				curCertifyInfo: null,
				myInfo: {},
				menuList: [{
					name: '提现账户',
					icon: 'moneybag',
					pageUrl: '/pages/my/withdraw',
					// show: true,
					showByStatus: true
				}, {
					name: '交易明细',
					icon: 'form',
					pageUrl: '/pages/my/my-money-bag',
					show: true
				}, {
					name: '服务明细',
					icon: 'calendar'
				}, {
					name: '师傅入驻',
					icon: 'profile',
					pageUrl: '/pages/my/master-settled-info',
					show: true
				}, 
				{
					name: '订单通知绑定',
					icon: 'roundcheck',
					show: true,
					prefixFun: 'showFollowBox'
				},
				{
					name: '商家信息',
					icon: 'lock',
					pageUrl: '/pages/my/personal-info',
					show: true
				}, {
					name: '法律声明',
					icon: 'read'
				}, {
					name: '店铺认证',
					icon: 'taoxiaopu'
				}, {
					name: '签约协议',
					icon: 'punch'
				}, {
					name: '反馈到平台',
					icon: 'comment'
				}, {
					name: '开放平台',
					icon: 'community'
				}, {
					name: '师傅缴费',
					icon: 'sponsor',
					pageUrl: '/pages/my/pay-deposit'
				}, {
					name: '退出登录',
					icon: 'exit',
					pageUrl: '/pages/login/login',
					show: true
				}]
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				await this.$request.refreshCurUserCache();
				this.curUserInfo = this.$request.getCurUserInfo();
				let res = await this.$request.getWorkerCertify();
				this.curCertifyInfo = res.data;
				this.myInfo = await this.$api.data('myInfo');
			},
			clickMenuItem(menu) {
				if (menu.prefixFun) {
					this[menu.prefixFun]();
				}
				if (menu.pageUrl) {
					uni.navigateTo({
						url: menu.pageUrl
					})
				}
			},
			goToPage(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			},
			async showFollowBox() {
				const status = await this.checkBeforeFollow()
				if(!status) {
					this.$refs.focusModal.showModal();
				} else {
					uni.showToast({
						title: '您已绑定消息通知',
						icon: 'none'
					})
				}
			},
			async checkBeforeFollow() {
				const wxLoginRes = await wx.login();
				console.log(wxLoginRes);
				const wxAuthRes = await uni.request({
					url: '/wx/check',
					header: {
						code: wxLoginRes.code
					}
				})
				// const wxAuthRes = await uni.request({
				// 	url: '/wx/auth',
				// 	header: {
				// 		code: wxLoginRes.code
				// 	}
				// })
				return wxAuthRes[1].data.data
			},
			async checkIfFollow() {
				const status = await this.checkBeforeFollow()
				// const wxLoginRes = await wx.login();
				// const wxAuthRes = await uni.request({
				// 	url: '/wx/check',
				// 	header: {
				// 		code: wxLoginRes.code
				// 	}
				// })
				if(!status) {
					uni.showToast({
						title: '请完成公众号关注',
						icon: 'none'
					})
					return;
				} else {
					// uni.showToast({
					// 	title: '感谢您的关注！',
					// 	icon: 'success'
					// })
					this.$refs.focusModal.hideModal();
					return;
				}
			}
		},
	}
</script>

<style scoped>
	.cu-list.grid.no-border>.solid-left.cu-item:after {
		border-left: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.paper-drawer-bar {
		position: relative;
		top: -100rpx;
	}

	.paper-drawer-bar-back {
		z-index: -1;
		padding-top: 100rpx;
	}
</style>