front/pages/user/index.vue

<template>
	<view class="user-area" v-if="fetch">
		<use-tabbar></use-tabbar>
		<view class="header-area padding-lr-sm" style="padding-top: 12px;">
			<view class="dflex-b">
				<view class="member-area padding-top-sm margin-bottom dflex pos-r flex1" v-if="login && fetch.user"
					@click="Dever.location('user/setting/info')">
					<view>
						<image class="headimg border-radius-c" :src="fetch.user.avatar" mode="aspectFill"></image>
					</view>
					<view class="margin-left-sm">
						<view class="info-box">
							<text class="fs-lg line-height-1">{{fetch.user.name}}</text>
						</view>
						<view>
							<text class="fs-xxs">{{fetch.user.mobile}}</text>
						</view>
					</view>
				</view>

				<view class="member-area padding-top-sm margin-bottom dflex pos-r flex1" v-else>
					<view>
						<image class="headimg border-radius-c" :src="logo" mode="aspectFill"></image>
					</view>
					<view class="margin-left-sm" @click="goLogin">
						<view class="info-box">
							<text class="fs-lg">去登录</text>
						</view>
					</view>
				</view>
				<view class="border-radius-big bg-base dflex-c padding-lr margin-right"
					v-if="fetch.user && fetch.user.type == 2" @click="goBindMobile">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>绑定手机号</view>
				</view>

				<view class="border-radius-big bg-base dflex-c padding-lr margin-right"
					v-if="fetch.user && fetch.user.type == 1 && Dever.env == 5" @click="goBindInfo">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>修改资料</view>
				</view>

				<view class="border-radius-big bg-base dflex-c padding-lr margin-right"
					v-if="fetch.sales && fetch.sales.length > 0" @click="goSales">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>店铺管理</view>
				</view>

			</view>

			<view class="border-radius">
				<view class="vip-card-area pos-r padding-lr-lg use-hover" v-if="fetch.role_info && fetch.role_info.button"
					@click="goRole(fetch.role_info)">
					<view class="dflex-b">
						<view class="dflex">
							<text class="iconfont iconhuiyuan ft-base line-height-1 margin-right-xs"></text>
							<view class="animated uscroll">
								<text class="margin-left-xs">{{fetch.role_info.subname}}</text>
							</view>
						</view>
						<view>
							<text class="fs-xs border-radius-lg padding-tb-xs padding-lr-sm"
								style="color: rgb(182, 91, 93); border: 1px solid rgb(182, 91, 93);">{{fetch.role_info.button}}</text>
						</view>
					</view>
				</view>

				<u-grid :border="false" class="stats-area dflex-c bg-main" v-if="login && fetch.user">
					<u-grid-item v-if="fetch.score && fetch.score.length > 0" v-for="(item, index) in fetch.score"
						:key="index">
						<view class="item dflex dflex-flow-c" @click="goScore(item)">
							<text class="num">{{item.num}}</text>
							<text>{{item.name}}</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>
					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/coupon/list')">
							<text class="num">{{fetch.user.coupon}}</text>
							<text>优惠券</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>
					
					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/gift/list')">
							<text class="num">{{fetch.user.gift}}</text>
							<text>礼品卡</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>
					
					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/perk/list')">
							<text class="num">{{fetch.user.perk}}</text>
							<text>权益包</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>
				</u-grid>

				<!--
				<u-grid :border="false" class="stats-area dflex-c bg-main" v-if="login  && fetch.user">
					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/coupon/list')">
							<text class="num">{{fetch.user.coupon}}</text>
							<text>优惠券</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/gift/list')">
							<text class="num">{{fetch.user.gift}}</text>
							<text>礼品卡</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('user/perk/list')">
							<text class="num">{{fetch.user.perk}}</text>
							<text>权益包</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

				</u-grid>
				-->

			</view>
		</view>

		<view class="container-area padding-lr-sm padding-bottom-sm">

			<view class="border-radius margin-top-sm bg-main">
				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('order/list')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm icondingdan" style="color: rgb(255, 106, 108);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">我的订单</text>
					</view>
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs">查看全部订单</text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>

				<view class="order-area padding-bottom-sm padding-lr dflex-c">
					<view class="item dflex dflex-flow-c" @click="go('order/list?status=1')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_1 > 0">
								{{fetch.order_1}}
							</view>
						</view>
						<text>待付款</text>
					</view>

					<view class="item dflex dflex-flow-c" @click="go('order/list?status=2')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_2 > 0">
								{{fetch.order_2}}
							</view>
						</view>
						<text>待发货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="go('order/list?status=3')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_3 > 0">
								{{fetch.order_3}}
							</view>
						</view>
						<text>待收货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="go('order/list?status=4')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_4 > 0">
								{{fetch.order_4}}
							</view>
						</view>
						<text>待评价</text>
					</view>

				</view>
			</view>

			<view class="border-radius margin-top-sm bg-main">
				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="open('role')"
					v-if="fetch.role && fetch.role.length > 0">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm icongerenzhongxin-1"
							style="color: rgb(85, 170, 255);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">我的身份</text>
					</view>

					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs">
							升级身份，立享权益
						</text>
					</view>

					<!--
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs" v-if="fetch.role && fetch.role.length > 0" v-for="(v, k) in fetch.role" :key="k">
							{{v.name}}
						</text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>-->
				</view>

				<view class="header-area padding-lr-sm">
					<view class="border-radius">
						<u-grid :border="false" class="stats-area dflex-c bg-main" v-if="login  && fetch.user">
							<u-grid-item v-if="fetch.role && fetch.role.length > 0" v-for="(v, k) in fetch.role"
								:key="k" @click="go('role/info?id=' + v.id)">
								<view class="item dflex dflex-flow-c">
									<text class="num">{{v.name}}</text>
									<text>{{v.subname}}</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<!--
				<u-action-sheet v-if="fetch && fetch.role && fetch.role.length > 0" :actions="fetch.role" :closeOnClickAction="true" :closeOnClickOverlay="true" :show="show.role" @select="goRole" @close="close('role')" :round="14" title="我的身份"></u-action-sheet>-->

				<view class="use-list-title dflex-b padding-lr w-full bg-main">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm iconhaibao1" style="color: rgb(85, 170, 255);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">我的团队</text>
					</view>

					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs">
							建立团队，分享赚钱
						</text>
					</view>
				</view>

				<view class="header-area padding-lr-sm">
					<view class="border-radius">
						<u-grid :border="false" class="stats-area dflex-c bg-main" v-if="login  && fetch.user">
							<u-grid-item @click="openPoster">
								<view class="item dflex dflex-flow-c">
									<text class="num">邀请</text>
									<text>团队拉新</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>

							<u-grid-item @click="go('group/member')">
								<view class="item dflex dflex-flow-c">
									<text class="num">成员</text>
									<text>团队成员</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>

							<u-grid-item @click="go('group/order')">
								<view class="item dflex dflex-flow-c">
									<text class="num">账单</text>
									<text>团队账单</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>

				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('user/benefit/list')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm iconaixin-01" style="color: #6a92ff;">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">我的权益</text>
					</view>
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs"></text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>

			</view>

			<view class="border-radius margin-top-sm bg-main">
				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('user/act/collect')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm iconshoucang-" style="color: rgb(255, 106, 108);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">我的收藏</text>
					</view>
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs"></text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>
				<scroll-view scroll-x class="browsing-area padding-lr">
					<view class="dflex">
						<view v-for="(item, index) in fetch.list" :key="index">
							<image class="border-radius-sm margin-right-sm" :src="item.cover" mode="aspectFill"
								@click="Dever.location('source/info?id=' + item.id + '&title=' + item.name)"></image>
						</view>
					</view>
				</scroll-view>

				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('user/address/list')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm icondizhi-" style="color: rgb(170, 170, 255);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">收件人</text>
					</view>
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs"></text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>

				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('user/setting/setting')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm iconshezhi-" style="color: rgb(88, 188, 138);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">设置</text>
					</view>
					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs"></text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>

			</view>
			<view class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn" v-if="login"
				@click="goLogin">
				<view class="cell-tit">切换账号</view>
			</view>
			<view class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn" v-else @click="goLogin">
				<view class="cell-tit">去登录</view>
			</view>
		</view>
		<use-copyright :title="title" :desc="info"></use-copyright>
		<u-action-sheet v-if="fetch.user" :closeOnClickOverlay="true" @error="getMobileError"
			@getphonenumber="getMobile" :closeOnClickAction="false" @close="closeBindMobile" @select="selectMobile"
			:actions="bindMobile.list" :title="bindMobile.title" :show="bindMobile.show"></u-action-sheet>

		<u-wx-auth v-if="fetch.user" ref="wxAuthRef" :show="bindInfo.show" :logo="logo" :title="title"
			:tips="bindInfo.tips" :confirm-text="bindInfo.confirmText" @choose-avatar="onChooseAvatar"
			@confirm="onConfirm" @close="closeBindInfo"></u-wx-auth>

		<u-action-sheet v-if="fetch.sales && fetch.sales.length > 0" :closeOnClickOverlay="true" :height="300"
			:closeOnClickAction="false" @close="closeSales" @select="selectSales" :actions="fetch.sales"
			titleStyle="color:#bababa" :title="sales.title" :show="sales.show"></u-action-sheet>
			
		<use-poster ref="poster" @setShare="setShare"></use-poster>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
				login: false,
				logo: '',
				title: '',
				info: '',
				// 弹窗展示
				show: {
					role: false,
				},
				// 销售渠道
				sales: {
					show: false,
					title: '点击店铺名称进入管理',
				},
				// 绑定资料
				bindInfo: {
					show: false,
					tips: '以便为您提供更优质的服务',
				},
				// 绑定手机号
				bindMobile: {
					show: false,
					title: '请选择绑定方式',
					list: [{
							id: 1,
							name: '微信授权',
							subname: "授权手机号，一键快速绑定",
							color: '#ffaa7f',
							fontSize: '20',
							openType: 'getPhoneNumber',
							//openType: 'getUserInfo',
						},
						{
							id: 2,
							name: '验证码绑定',
							subname: "接收验证码，手动绑定",
						},
					],
				},
				share: {
					name: '',
					path: '',
					pic: '',
				}
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			wx.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},
		onShow() {
			this.load();
			this.loadData();
			this.loadCollect();
		},
		// 小程序分享
		onShareAppMessage(res) {
			if (res.from === 'button' && this.share && this.share.name && this.share.path) {
				return {
					title: this.share.name,
					path: this.share.path,
					imageUrl: this.share.pic || '',
				}
			}
			return null
		},
		methods: {
			setShare(value) {
				this.share = value;
			},
			load() {
				this.login = false;
				if (this.DeverApi.getToken()) {
					this.login = true;
				}
				this.Dever.config().then(config => {
					this.logo = config.l;
					this.title = config.n;
					this.info = config.i;
				});
			},
			loadData() {
				if (this.login) {
					this.DeverApi.get(this, 'user.info', {}, res => {
						this.login = true;
					});
				} else {
					this.DeverApi.get(this, 'main.getUserHome');
				}
			},
			loadCollect() {
				this.DeverApi.page([1, 'list'], this, 'collect.getUserList');
			},
			quit() {
				this.Dever.confirm('确认退出登录吗？', () => {
					this.DeverApi.setToken('');
					this.login = false;
				})
			},
			go(url) {
				if (this.login) {
					this.Dever.location(url)
				} else {
					this.Dever.confirm('您需要登录才能继续操作', () => {
						this.Dever.goLogin(url);
					})
				}
			},
			goLogin() {
				this.Dever.goLogin();
			},
			goRole(e) {
				this.go('role/info?id=' + e.id);
			},
			goScore(e) {
				this.go('score/info?id=' + e.id);
			},
			open(key) {
				this.show[key] = true;
			},
			close(key) {
				this.show[key] = false;
			},
			goSales() {
				this.sales.show = true;
			},
			closeSales() {
				this.sales.show = false;
			},
			selectSales(e) {
				this.Dever.location('sales/home?type=' + e.sales_type + '&id=' + e.id);
			},
			goBindMobile() {
				if (this.Dever.env === 5 && this.Dever.platform == 'weixin') {
					//打开授权
					this.bindMobile.show = true;
				} else {
					this.Dever.location('user/bind/mobile')
				}
			},
			selectMobile(e) {
				if (e.id == 1) {

				} else {
					this.Dever.location('user/bind/mobile')
				}
			},
			closeBindMobile() {
				this.bindMobile.show = false;
			},
			getMobile(e) {
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					uni.showToast({
						title: "用户拒绝授权",
						icon: "none"
					});
					return;
				}
				const code = e.detail.code;
				this.DeverApi.post('bind.getWexinMobile', {
					code: code
				}, res => {
					this.Dever.alert('绑定成功', 'success', () => {
						this.loadData()
					});
				});
			},
			getMobileError() {
				this.Dever.alert('授权失败，请重试');
			},
			goBindInfo() {
				this.bindInfo.show = true;
			},
			closeBindInfo() {
				this.bindInfo.show = false;
			},
			onChooseAvatar(url) {
				this.DeverApi.post('user.upload', {
					file: url
				}, res => {
					this.$refs.wxAuthRef.avatar = res.url;
				});
			},
			onConfirm(data) {
				// data.avatar - 用户头像路径，如果不调用onChooseAvatar中的方法1或者方法2，则avatar是临时文件的路径
				// data.nickname - 用户昵称
				this.DeverApi.post('user.update', {
					avatar: data.avatar,
					name: data.nickname
				}, res => {
					this.loadData()
				});
				this.closeBindInfo();
			},
			openPoster() {
				this.$refs.poster.open(this.fetch.user.name, this.title, this.info, this.logo, this.fetch.user.avatar, '', {})
			}
		}
	}
</script>

<style lang="scss">
	.member-area {
		image {
			width: 124rpx;
			height: 124rpx;
			border: 4rpx solid #fff;
		}
	}

	.vip-card-area {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		font-size: 22rpx;
		color: #c6b181;
		background-color: #000;
		background-image: linear-gradient(90deg, #3a3a3a, #000);

		.iconfont {
			font-size: 62rpx;
		}
	}

	.border-radius {
		border-radius: 18rpx;
	}


	.item {
		padding: 28rpx 0;
		position: relative;
		font-size: 22rpx;
		color: #75787d;
		flex: 1;
	}

	.num {
		font-size: 30rpx;
		color: #303133;
		margin-bottom: 4rpx;
	}

	.order-area {
		.item {
			position: relative;
			font-size: 22rpx;
			color: #75787d;
			flex: 1;
		}

		.num {
			font-size: 30rpx;
			color: #303133;
			margin-bottom: 4rpx;
		}
	}

	.browsing-area {
		image {
			width: 152rpx;
			height: 152rpx;
		}
	}

	.log-out-btn {
		color: #75787d;
	}

	.badge {
		margin-right: 20rpx;
	}
</style>