update

mobile-code/src/pages/home/components/login-popup - 副本.vue

@@ -0,0 +1,224 @@
+<template>
+	<bottom-popup class="popup-wrap" :show="show" @close="hidePopup">
+		<app-close @close="hidePopup" />
+		<div class="popup-content">
+			<!-- #ifdef MP-WEIXIN -->
+			<div class="step-wrap">
+				<app-step :index="stepIndex" />
+			</div>
+			<!-- #endif -->
+			<!-- 获取手机号 -->
+			<template v-if="stepIndex == 0">
+				<div class="popup-attr-wrap">
+					<img :src="info.smallAvatarUrl" mode="widthFix" alt />
+				</div>
+				<!-- #ifdef H5 -->
+				<div class="creat-account-btn">
+					<button class="button-com red big" @click="registerFn">点击授权登录</button>
+				</div>
+				<!-- #endif -->
+				<!-- #ifdef MP-WEIXIN -->
+				<div class="creat-account-btn">
+					<button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button>
+				</div>
+				<!-- #endif -->
+			</template>
+			<!-- 注册完成 -->
+			<template v-if="stepIndex == 1">
+				<div class="popup-phone-wrap">
+					<div class="phone-icon">
+						<i class="iconfont iconshoujihao"></i>
+					</div>
+					<div class="phone-num font-bold">{{ wxPhoneInfo }}</div>
+				</div>
+				<div class="creat-account-btn">
+					<button class="button-com red big" @click="attentionPublish">点击生成手机号</button>
+					<!-- <button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button> -->
+				</div>
+			</template>
+			<!-- 关注公众号 -->
+			<template v-if="stepIndex == 2">
+				<div class="wx-public-wrap">
+					<!-- #ifdef MP-WEIXIN -->
+					<block v-if="true">
+						<official-account @binderror="officialErr"></official-account>
+					</block>
+					<block v-else>
+						<button class="button-com red big">完成</button>
+					</block>
+					<!-- #endif -->
+					<!-- <div class="app-color-3">国兰华尚关联的公众号</div>
+					<div class="flex-center-between">
+						<div class="wx-public-left">
+							<div class="wx-public-img">
+								<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" mode="widthFix" alt />
+							</div>
+							<div class="wx-public-det">
+								<div class="wx-public-tit">国兰华尚</div>
+								<div>花艺.品味.生活</div>
+							</div>
+						</div>
+						<button class="button-com wx-public-btn">查看</button>
+					</div> -->
+				</div>
+			</template>
+		</div>
+	</bottom-popup>
+</template>
+
+<script>
+import AppStep from '@/components/app-step'
+import BottomPopup from '@/components/plugin/bottom-popup'
+import AppClose from '@/components/module/app-close'
+// api
+import { getUser, wxLoginFn } from '@/utils/auth'
+import { getWxPhone } from '@/api/mini'
+export default {
+	name: 'login-popup-module',
+	components: {
+		AppStep,
+		BottomPopup,
+		AppClose
+	},
+	props: {
+		// stepIndex: {
+		// 	type: Number,
+		// 	default: 0
+		// },
+		show: {
+			type: Boolean,
+			default: false
+		},
+		info: {
+			type: Object,
+			default: () => {}
+		}
+	},
+	data() {
+		return {
+			constant: this.$constant,
+			stepIndex: 0,
+			wxPhoneInfo: ''
+		}
+	},
+	methods: {
+		hidePopup() {
+			this.$emit('hide')
+			this.stepIndex = 0
+		},
+		registerFn() {
+			this.$util.getCheckLogin()
+		},
+		getWxMobile(e) {
+			console.log(e)
+			if (e.detail.errMsg === 'getPhoneNumber:ok') {
+				getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData }).then(res => {
+					console.log('用户信息', res)
+					this.wxPhoneInfo = res.data.mobile
+					this.stepIndex = 1
+					wxLoginFn(true)
+				})
+			} else {
+				this.$msg('获取信息失败！')
+			}
+		},
+		// 关注公众号
+		attentionPublish() {
+			this.stepIndex = 2
+		},
+		officialErr(e) {
+			console.log('关注公众号组件', e)
+		}
+	}
+}
+</script>
+
+<style lang='scss' scoped>
+	// 弹窗
+	.popup-wrap {
+		.mini-btn {
+			border: none !important;
+		}
+		/deep/.tui-popup-class {
+			border-top-left-radius: 20px;
+			border-top-right-radius: 20px;
+			// 适配iphoneX
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+		.popup-content {
+			padding-top: 60px;
+			.step-wrap {
+				width: 80%;
+				margin: 0 auto;
+			}
+			// 第一步
+			.popup-attr-wrap {
+				width: 160px;
+				height: 160px;
+				margin: 80px auto 60px;
+			}
+			.creat-account-btn {
+				width: 600px;
+				padding-bottom: 80px;
+				margin: 0 auto;
+				.button-com {
+					width: 100%;
+					text-align: center;
+					font-size: 32px;
+				}
+			}
+			// 第二步
+			.popup-phone-wrap {
+				@include disFlex(center, flex-start);
+				width: 600px;
+				// height: 94px;
+				margin: 142px auto 62px;
+				padding-left: 40px;
+				padding-bottom: 40px;
+				border-bottom: 1px solid $borderColor;
+				.phone-icon {
+					i {
+						font-size: 44px;
+					}
+				}
+				.phone-num {
+					font-size: 60px;
+					margin-left: 42px;
+					letter-spacing: 3px;
+				}
+			}
+			// 第三步
+			.wx-public-wrap {
+				width: 90%;
+				padding: 10px 16px 28px;
+				box-shadow: 2px 2px 10px #eee;
+				margin: 118px auto 194px;
+				border-radius: 10px;
+				.flex-center-between {
+					margin-top: 22px;
+					.wx-public-left {
+						@include disFlex(center, flex-start);
+						.wx-public-img {
+							width: 78px;
+							height: 78px;
+						}
+						.wx-public-det {
+							color: #7c7e7d;
+							margin-left: 20px;
+							.wx-public-tit {
+								color: #333;
+								font-size: 32px;
+								margin-bottom: 6px;
+							}
+						}
+					}
+					.wx-public-btn {
+						color: $mainColor1;
+						border-color: $borderColor1;
+						border-radius: 10px;
+					}
+				}
+			}
+		}
+	}
+</style>

mobile-code/src/pages/home/components/login-popup.vue

@@ -10,7 +10,7 @@
 			<!-- 获取手机号 -->
 			<template v-if="stepIndex == 0">
 				<div class="popup-attr-wrap">
-					<img :src="info.smallAvatarUrl" mode="widthFix" alt />
+					<img :src="info.smallAvatarUrl | default_avatar" mode="widthFix" alt />
 				</div>
 				<!-- #ifdef H5 -->
 				<div class="creat-account-btn">
@@ -19,7 +19,7 @@
 				<!-- #endif -->
 				<!-- #ifdef MP-WEIXIN -->
 				<div class="creat-account-btn">
-					<button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button>
+					<button class="button-com mini-btn" open-type="getUserInfo" @getuserinfo="getWxAvatar">点击创建头像</button>
 				</div>
 				<!-- #endif -->
 			</template>
@@ -32,7 +32,8 @@
 					<div class="phone-num font-bold">{{ wxPhoneInfo }}</div>
 				</div>
 				<div class="creat-account-btn">
-					<button class="button-com red big" @click="attentionPublish">点击生成手机号</button>
+					<button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击生成手机号</button>
+					<!-- <button class="button-com red big" @click="attentionPublish">点击生成手机号</button> -->
 					<!-- <button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button> -->
 				</div>
 			</template>
@@ -40,7 +41,12 @@
 			<template v-if="stepIndex == 2">
 				<div class="wx-public-wrap">
 					<!-- #ifdef MP-WEIXIN -->
-					<official-account @binderror="officialErr"></official-account>
+					<block v-if="true">
+						<official-account @binderror="officialErr"></official-account>
+					</block>
+					<block v-else>
+						<button class="button-com red big">完成</button>
+					</block>
 					<!-- #endif -->
 					<!-- <div class="app-color-3">国兰华尚关联的公众号</div>
 					<div class="flex-center-between">
@@ -67,7 +73,7 @@ import BottomPopup from '@/components/plugin/bottom-popup'
 import AppClose from '@/components/module/app-close'
 // api
 import { getUser, wxLoginFn } from '@/utils/auth'
-import { getWxPhone } from '@/api/mini'
+import { getWxInfo, getWxPhone } from '@/api/mini'
 export default {
 	name: 'login-popup-module',
 	components: {
@@ -104,13 +110,33 @@ export default {
 		registerFn() {
 			this.$util.getCheckLogin()
 		},
+		// 获取微信信息
+		getWxAvatar() {
+			uni.getUserInfo({
+				provider: 'weixin',
+				success: res => {
+					console.log('res', res)
+					// this.popupShow = true
+					getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
+						console.log('用户信息', subRes)
+						this.stepIndex = 1
+						this.wxInfo = subRes.data
+						this.popupShow = true
+					})
+				},
+				fail: () => {
+					// this.loading = false
+				}
+			})
+		},
+		// 获取微信手机号
 		getWxMobile(e) {
 			console.log(e)
 			if (e.detail.errMsg === 'getPhoneNumber:ok') {
 				getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData }).then(res => {
 					console.log('用户信息', res)
 					this.wxPhoneInfo = res.data.mobile
-					this.stepIndex = 1
+					this.stepIndex = 2
 					wxLoginFn(true)
 				})
 			} else {

mobile-code/src/pages/home/user - 副本.vue

@@ -0,0 +1,314 @@
+<template>
+	<div class="app-main app-content">
+		<div class="user-wrap">
+			<!-- 未登录 -->
+			<template v-if="$util.isEmpty(shopUser)">
+				<div class="no-login-attr login-attr-wrap">
+					<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt mode="widthFix" />
+				</div>
+				<div class="button-wrap">
+					<!-- #ifdef H5 -->
+					<button class="button-com" @click="showPopup">申请会员</button>
+					<!-- #endif -->
+					<!-- #ifdef MP-WEIXIN -->
+					<button class="button-com mini-btn" open-type="getUserInfo" @getuserinfo="getWxAvatar">申请会员</button>
+					<!-- #endif -->
+				</div>
+			</template>
+			<!-- 已登录 -->
+			<template v-else>
+				<div class="is-login-attr">
+					<div class="user-wrap-top">
+						<div class="user-blo-left">
+							<div class="user-name">{{ shopUser.userName }}</div>
+							<div class="user-level">
+								<!-- <div class="user-level-icon">
+									<img src="" alt />
+								</div>-->
+								<div>成长值 {{ shopUser.userAsset.growth }}/{{ shopUser.userAsset.nextLevelGrowth }}</div>
+							</div>
+						</div>
+						<div class="user-blo-right login-attr-wrap">
+							<img :src="smallAvatarUrl | default_avatar" alt="头像" mode="widthFix" />
+						</div>
+					</div>
+					<div class="user-wrap-bottom">
+						<div class="level-lint"></div>
+						<div>ID {{ shopUser.id }}</div>
+					</div>
+				</div>
+			</template>
+		</div>
+		<template v-if="!$util.isEmpty(shopUser)">
+			<div class="surplus-wrap">
+				<div class="surplus-left">
+					<div>我的余额(¥)</div>
+					<div class="my-surplus">{{ shopUser.userAsset.balance || 0.00 }}</div>
+				</div>
+				<div class="surplus-right">
+					<!-- #ifdef H5 -->
+					<button class="button-com" v-if="shopUser.isFull != 1" @click="showPopup">申请会员</button>
+					<!-- #endif -->
+					<!-- #ifdef MP-WEIXIN -->
+					<button class="button-com mini-btn" open-type="getUserInfo" v-if="loginInfo.isFull != 1" @getuserinfo="getWxAvatar">申请会员</button>
+					<!-- #endif -->
+					<button class="button-com" @click="pageToFn({
+					url: '/pages/pay/index',
+					query: {
+						pageStatus: 'recharge'
+					}
+				})">充值</button>
+					<button class="button-com red" @click="pageToFn({
+					url: '/pages/pay/index',
+					query: {
+						pageStatus: 'payment'
+					}
+				})">付款</button>
+				</div>
+			</div>
+		</template>
+		<div class="list-content">
+			<tui-list-view class="tui-list-view">
+				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/order/list')">
+					<div class="list-wrap">
+						<div class="list-label">我的订单</div>
+						<!-- <div class="list-text">{{ shopUser.userAsset.totalBuyNum }}</div> -->
+					</div>
+				</tui-list-cell>
+				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/invite')">
+					<div class="list-wrap">
+						<div class="list-label">我的邀请</div>
+						<div class="list-text">领金币奖励</div>
+					</div>
+				</tui-list-cell>
+				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/coupon/list')">
+					<div class="list-wrap">
+						<div class="list-label">我的优惠券</div>
+					</div>
+				</tui-list-cell>
+				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/user/password')">
+					<div class="list-wrap">
+						<div class="list-label">支付密码设置</div>
+					</div>
+				</tui-list-cell>
+				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/level')">
+					<div class="list-wrap">
+						<div class="list-label">会员权益</div>
+					</div>
+				</tui-list-cell>
+			</tui-list-view>
+		</div>
+		<div class="list-content">
+			<tui-list-view class="tui-list-view">
+				<tui-list-cell class="tui-list" :last="true" @click="logoutFn()">
+					<div class="list-wrap">
+						<div class="list-label">退出登录</div>
+					</div>
+				</tui-list-cell>
+			</tui-list-view>
+		</div>
+		<!-- 登录弹窗 -->
+		<login-popup :show="popupShow" :info="wxInfo" @hide="hidePopup" />
+		<!-- 登录弹窗 -->
+		<app-trademark />
+		<!-- <app-footer :activeIndex="3" /> -->
+		<!-- login -->
+		<go-login :show.sync="loginShow" />
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+// import AppFooter from '@/components/app-footer'
+import TuiListView from '@/components/plugin/list-view'
+import TuiListCell from '@/components/plugin/list-cell'
+import LoginPopup from '@/pages/home/components/login-popup'
+import AppTrademark from '@/components/module/app-trademark'
+import GoLogin from '@/pages/home/components/go-login.vue'
+// api
+import { getShopUser } from '@/utils/auth'
+import { getWxInfo, getWxPhone } from '@/api/mini'
+export default {
+	name: 'user',
+	components: {
+		// AppFooter
+		TuiListView,
+		TuiListCell,
+		LoginPopup,
+		AppTrademark,
+		GoLogin
+	},
+	data() {
+		return {
+			constant: this.$constant,
+			popupShow: false,
+			stepIndex: 0,
+			wxInfo: {},
+			loginShow: false
+		}
+	},
+	computed: {
+		...mapGetters({ shopUser: 'getShopUser' }),
+		// #ifdef MP-WEIXIN
+		...mapGetters({ loginInfo: 'getLoginInfo' }),
+		// #endif
+		smallAvatarUrl() {
+			return this.shopUser.smallAvatarUrl || ''
+		}
+	},
+	onLoad(option) {
+		// this.init()
+	},
+	methods: {
+		init() {
+			getShopUser()
+		},
+		// pageTo
+		pageToFn(item) {
+			if (this.$util.isLogin()) {
+				this.$util.pageTo(item)
+			} else {
+				this.loginShow = true
+			}
+		},
+		showPopup() {
+			// this.popupShow = true
+			this.$util.getCheckLogin()
+		},
+		hidePopup() {
+			this.popupShow = false
+		},
+		logoutFn() {
+			uni.clearStorageSync()
+			// #ifdef H5
+			location.reload()
+			// #endif
+			// #ifndef H5
+			this.$util.pageTo({
+				url: '/pages/home/index',
+				type: 4
+			})
+			// #endif
+		},
+		// 获取微信信息
+		getWxAvatar() {
+			uni.getUserInfo({
+				provider: 'weixin',
+				success: res => {
+					console.log('res', res)
+					this.popupShow = true
+					getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
+						console.log('用户信息', subRes)
+						this.wxInfo = subRes.data
+						this.popupShow = true
+					})
+				},
+				fail: () => {
+					// this.loading = false
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.user-wrap {
+		height: 220px;
+		background-image: url('../../static/images/user/bg.png');
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		padding-top: 42px;
+		color: #f5e5e5;
+		.login-attr-wrap {
+			width: 90px;
+			height: 90px;
+		}
+		.no-login-attr {
+			margin: 0 auto;
+			margin-bottom: 12px;
+		}
+		.is-login-attr {
+			padding: 0 20px 0 48px;
+			.user-wrap-top {
+				@include disFlex(center, space-between);
+				.user-name {
+					font-size: 36px;
+					font-weight: 500;
+					margin-bottom: 16px;
+					color: #fff;
+				}
+				.user-level {
+					@include disFlex(center, center);
+				}
+				.user-blo-right {
+					margin-right: 30px;
+				}
+			}
+			.user-wrap-bottom {
+				.level-lint {
+					border-bottom: 4px solid $mainColor;
+					border-radius: 4px;
+					margin-top: 20px;
+					margin-bottom: 10px;
+					position: relative;
+					&::before {
+						position: absolute;
+						top: 0;
+						left: 0;
+						display: inline-block;
+						content: '';
+						background-color: #ffe4bd;
+						width: 200px;
+						height: 4px;
+						border-radius: 4px;
+					}
+				}
+			}
+		}
+		.button-wrap {
+			@include disFlex(center, center);
+
+			.mini-btn {
+				border: none !important;
+			}
+		}
+	}
+	.surplus-wrap {
+		@include disFlex(flex-end, space-between);
+		padding: 10px 50px 34px;
+		background-color: #fff;
+		.surplus-left {
+			color: $fontColor3;
+			.my-surplus {
+				font-size: 46px;
+				margin-top: 14px;
+				color: #333;
+				font-weight: bold;
+			}
+		}
+		.surplus-right {
+			margin-bottom: 10px;
+			.button-com {
+				margin-left: 20px;
+			}
+		}
+	}
+	.list-content {
+		margin-bottom: 20px;
+		// padding: 0 20px;
+		background-color: #fff;
+		.tui-list-cell {
+			padding-left: 50px;
+			padding-right: 50px;
+		}
+		.list-wrap {
+			@include disFlex(center, space-between);
+			width: calc(100% - 30px);
+			padding-right: 30px;
+			.list-text {
+				color: $fontColor3;
+			}
+		}
+	}
+</style>

mobile-code/src/pages/home/user.vue

@@ -46,12 +46,9 @@
 					<div class="my-surplus">{{ shopUser.userAsset.balance || 0.00 }}</div>
 				</div>
 				<div class="surplus-right">
-					<!-- #ifdef H5 -->
-					<button class="button-com" v-if="shopUser.isFull != 1" @click="showPopup">申请会员</button>
-					<!-- #endif -->
-					<!-- #ifdef MP-WEIXIN -->
-					<button class="button-com mini-btn" open-type="getUserInfo" v-if="loginInfo.isFull != 1" @getuserinfo="getWxAvatar">申请会员</button>
-					<!-- #endif -->
+					<button class="button-com" @click="showPopup">申请会员</button>
+					<!-- <button class="button-com" v-if="shopUser.isFull != 1" @click="showPopup">申请会员</button> -->
+					<!-- <button class="button-com mini-btn" open-type="getUserInfo" v-if="loginInfo.isFull != 1" @getuserinfo="getWxAvatar">申请会员</button> -->
 					<button class="button-com" @click="pageToFn({
 					url: '/pages/pay/index',
 					query: {
@@ -127,7 +124,7 @@ import AppTrademark from '@/components/module/app-trademark'
 import GoLogin from '@/pages/home/components/go-login.vue'
 // api
 import { getShopUser } from '@/utils/auth'
-import { getWxInfo, getWxPhone } from '@/api/mini'
+// import { getWxInfo, getWxPhone } from '@/api/mini'
 export default {
 	name: 'user',
 	components: {
@@ -173,7 +170,12 @@ export default {
 		},
 		showPopup() {
 			// this.popupShow = true
+			// #ifdef H5
 			this.$util.getCheckLogin()
+			// #endif
+			// #ifdef MP-WEIXIN
+			this.popupShow = true
+			// #endif
 		},
 		hidePopup() {
 			this.popupShow = false
@@ -191,23 +193,23 @@ export default {
 			// #endif
 		},
 		// 获取微信信息
-		getWxAvatar() {
-			uni.getUserInfo({
-				provider: 'weixin',
-				success: res => {
-					console.log('res', res)
-					this.popupShow = true
-					getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
-						console.log('用户信息', subRes)
-						this.wxInfo = subRes.data
-						this.popupShow = true
-					})
-				},
-				fail: () => {
-					// this.loading = false
-				}
-			})
-		}
+		// getWxAvatar() {
+		// 	uni.getUserInfo({
+		// 		provider: 'weixin',
+		// 		success: res => {
+		// 			console.log('res', res)
+		// 			// this.popupShow = true
+		// 			getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
+		// 				console.log('用户信息', subRes)
+		// 				this.wxInfo = subRes.data
+		// 				this.popupShow = true
+		// 			})
+		// 		},
+		// 		fail: () => {
+		// 			// this.loading = false
+		// 		}
+		// 	})
+		// }
 	}
 }
 </script>