luban-mall/pages/tabbar/my/my.vue

<template>
	<view class="pad-b150">
		<status-nav :ifReturn="false" navBarTitle="我的" :marginBottom="0"></status-nav>
		<!-- 头部 -->
		<view class="my-herder">
			<!-- 头像 -->
			<view class="my-portrait">
				<view class="my-portrait-img">
					<image :src="headPortrait" mode="widthFix"></image>
				</view>
				<view class="my-vip flex" v-if="businessCode!==''"><image src="/static/public/icon-vip.png" mode="widthFix"></image></view>
			</view>
			<!-- 用户名 -->
			<view class="my-nick-name">{{nickName}}</view>
			<!-- 订单量 -->
			<view class="my-order flex">
				<view class="item" v-for="(item,index) in myOrder" :key="index" @tap="changeOrder(index)">
					<text v-if="item.num < 100">{{item.num}}</text>
					<text v-if="item.num >= 100">99+</text>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 其他资料 -->
		<view class="my-content">
			<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)" v-if="index<=5">
				<view class="left flex">
					<view class="flex">
						<view class="img flex">
							<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
						</view>
						<view class="title">{{item.titele}}</view>
					</view>
					<view class="tips" v-if="index==1">输入会员码成为会员</view>
					<view class="tips" v-if="index==2">申请成为会员可查看低价</view>
				</view>
				<view class="right">
					<view class="more">
						<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)" v-if="businessCode!=='' && index==6">
				<view class="left flex">
					<view class="flex">
						<view class="img flex">
							<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
						</view>
						<view class="title">{{item.titele}}</view>
					</view>
				</view>
				<view class="right">
					<view class="btn flex" :class="showVip=='true'?'show':''" v-if="index == 6" @tap.stop="changeShowVip">
						<view class="circular"></view>
					</view>
				</view>
			</view>
			<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)" v-if="index==7">
				<view class="left flex">
					<view class="flex">
						<view class="img flex">
							<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
						</view>
						<view class="title">{{item.titele}}</view>
					</view>
				</view>
				<view class="right">
					<view class="more">
						<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商家客服 -->
		<view class="customer-all-bg" :style="{'padding-top':newTop+'px'}" v-if="isCustomer" @tap.stop="closeCustomer">
			<view class="customer-txt">
				<image :src="customerSrc" mode="widthFix"></image>
				<text>请保存相册扫码添加客服</text>
				<view class="btn" @tap.stop="saveImg">保存二维码</view>
			</view>
		</view>
		<!-- 申请会员 -->
		<view class="pull-all-bg" v-show="isVip||isChecked"></view>
		<view class="vip-box-bg" v-if="isVip">
			<view class="vip-box">
				<view class="title">会员申请</view>
				<view class="vip-list">
					<view class="vip-item">
						<view class="tips">姓名<text>*</text></view>
						<input class="input" type="text" v-model="myName" placeholder="请输入姓名" placeholder-color="#c9c9c9">
					</view>
					<view class="vip-item">
						<view class="tips">电话<text>*</text></view>
						<input class="input" type="number" v-model="myPhone" placeholder="请输入电话" placeholder-color="#c9c9c9">
					</view>
					<view class="vip-item">
						<view class="tips">邀请人姓名</view>
						<input class="input" type="text" v-model="inviteeName" placeholder="请输入邀请人姓名" placeholder-color="#c9c9c9">
					</view>
					<view class="vip-item">
						<view class="tips">邀请人会员码</view>
						<input class="input" type="text" v-model="inviteeCode" placeholder="请输入邀请人会员码" placeholder-color="#c9c9c9">
					</view>
				</view>
				<view class="vip-btns">
					<view class="btn" @tap="closeEv">取消</view>
					<view class="btn" @tap="submitEv">提交</view>
				</view>
			</view>
		</view>
		<!-- 验证会员码 -->
		<view class="edit-box-bg" v-if="isChecked">
			<view class="edit-box">
				<view class="title">验证会员码</view>
				<view class="subtitle">会员码<text>*</text></view>
				<input class="input" type="text" v-model="vipCode" placeholder="请输入会员码" placeholder-color="#c9c9c9">
				<view class="edit-btns">
					<view class="btn" @tap="closeCheck">取消</view>
					<view class="btn" @tap="checkCode">确认</view>
				</view>
			</view>
		</view>
		<!-- 购物车btn -->
		<enter-cart :bottom="150"></enter-cart>
		<!-- 底部tab -->
		<foot-tab current="4"></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	import footTab from '@/components/foot-tab/foot-tab.vue';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			enterCart,
			footTab,
		},
		data() {
			return {
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				headPortrait:'', //头像
				nickName:'', //用户名
				businessCode:'', //是否会员
				customerSrc:'', //商家客服二维码
				myOrder:[
					{title:'全部订单',tag:'all',num:0},
					{title:'已下单',tag:'ordered',num:0},
					{title:'已完成',tag:'completed',num:0},
					{title:'已取消',tag:'closed',num:0},
				],//订单
				listData:[
					{titele:'个人资料',imgSrc:'/static/public/icon-my-01.png',iconWidth:43,iconHeight:43},
					{titele:'会员码输入',imgSrc:'/static/public/icon-my-02.png',iconWidth:41,iconHeight:35},
					{titele:'会员申请',imgSrc:'/static/public/icon-my-03.png',iconWidth:40,iconHeight:40},
					{titele:'我的收藏',imgSrc:'/static/public/icon-my-04.png',iconWidth:49,iconHeight:47},
					{titele:'关于我们',imgSrc:'/static/public/icon-my-05.png',iconWidth:33,iconHeight:31},
					{titele:'免责申明',imgSrc:'/static/public/icon-my-06.png',iconWidth:38,iconHeight:38},
					{titele:'是否显示会员价',imgSrc:'/static/public/icon-my-07.png',iconWidth:39,iconHeight:26},
					{titele:'商家客服',imgSrc:'/static/public/icon-my-08.png',iconWidth:35,iconHeight:37}
				],//列表数据
				showVip:'true', //是否显示会员价
				isCustomer:false, //商家客服
				isVip:false, //会员申请弹窗
				myName:'', //姓名
				myPhone:'', //电话
				inviteeName:'', //邀请人
				inviteeCode:'', //会员码
				flag:true,
				vipCode:'', //会员码
				isChecked:false, //验证会员码
			}
		},
		onReachBottom() {
			
		},
		onHide() {
			
		},
		onLoad(op) {
			if(op.business_id){
				this.$requst.post('/api/index/change-business',{business_id:op.business_id}).then(res=>{
					if(res.code == 0){
						this.getUserInfo();
						this.getCustomer();
						userInfoEv();
					}
				})
			}else{
				this.getUserInfo();
				this.getCustomer();
				userInfoEv();
			}
		},
		onShow() {
			if(uni.getStorageSync('showVip')){
				this.showVip = uni.getStorageSync('showVip');
			}else{
				uni.setStorageSync('showVip','true');
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				uni.showLoading();
				this.$requst.get('/api/user/info').then(res=>{
					console.log(res,'用户信息')
					if(res.code==0) {
						uni.setStorageSync('business_id',res.data.business_id);
						let newArr = res.data.order_count;
						this.headPortrait = res.data.headimgurl,
						this.nickName = res.data.nickname
						this.businessCode = res.data.business_code
						this.myOrder[0].num = newArr.all,
						this.myOrder[1].num = newArr.ordered,
						this.myOrder[2].num = newArr.completed,
						this.myOrder[3].num = newArr.closed
					}
					uni.hideLoading();
				})
			},
			
			// 获取商家客服
			getCustomer(){
				this.$requst.post('/api/user/business-qr').then(res=>{
					console.log(res,'商家客服')
					if(res.code==0) {
						this.customerSrc = res.data.qr;
					}
				})
			},
			// 是否显示会员价
			changeShowVip(){
				if(this.showVip=='true'){
					this.showVip='false';
				}else{
					this.showVip='true';
				}
				setTimeout(()=>{
					if(this.showVip=='true'){
						uni.setStorageSync('showVip','true');
					}else{
						uni.setStorageSync('showVip','false');
					}
				},200)
			},
			// 跳转方式
			toMore(index){
				if(index == 6){
					return false;
				}else{
					if(index == 0){
						uni.navigateTo({
							url:`/pagesB/ucenter/ucenter`
						})
					}
					if(index == 1){
						this.isChecked = true;
					}
					if(index == 2){
						this.isVip =true;
					}
					if(index == 3){
						uni.navigateTo({
							url:`/pages/tabbar/news/collection`
						})
					}
					if(index == 4){
						uni.navigateTo({
							url:`/pagesB/about/about`
						})
					}
					if(index == 5){
						uni.navigateTo({
							url:`/pagesB/disclaimers/disclaimers`
						})
					}
					if(index == 7){
						this.isCustomer = true;
					}
				}
			},
			// 提交会员申请
			submitEv(){
				if(this.checkEmpty() && this.flag){
					this.flag = false;
					let params = {
						name:this.myName,
						phone:this.myPhone,
						invite_name:this.inviteeName,
						invite_code:this.inviteeCode,
					}
					this.$requst.post('/api/user/vip',params).then(res=>{
						if(res.code==0) {
							this.closeEv(); //关闭会员申请
							this.getUserInfo(); // 刷新信息
						}else{
							this.$toolAll.tools.showToast(res.msg);
							this.flag = true;
						}
					})
				}
			},
			
			// 验证表单
			checkEmpty(){
				let result = false;
				if(!this.myName) {
					this.$toolAll.tools.showToast('请填写姓名');
				} else if(this.$toolAll.tools.isPhone(this.myPhone)) {
					this.$toolAll.tools.showToast('请正确填写联系电话');
				} else {
					result = true;
				}
				return result;
			},
			
			//关闭会员申请
			closeEv(){
				this.isVip = false;
				this.myName = '';
				this.myPhone = '';
				this.inviteeName = '';
				this.inviteeCode = '';
				this.flag = true;
			},
			
			// 验证会员码
			checkCode(){
				if(this.vipCode !== ''){
					this.$requst.post('/api/user/check-code',{code:this.vipCode}).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('验证成功');
							this.closeCheck(); //清除验证信息
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}else{
					this.$toolAll.tools.showToast('会员码不能为空');
				}
				
			},
			// 取消验证会员码
			closeCheck(){
				this.isChecked = false;
				this.vipCode = '';
			},
			
			// 跳转订单管理
			changeOrder(index){
				uni.navigateTo({
					url:`/pagesA/order/order?tag=${this.myOrder[index].tag}&index=${index}`
				})
			},
			// 选择
			chooseEv(obj) {
				if(obj.url) {
					uni.navigateTo({
						url:obj.url
					})
				} else {
					// 添加微信
					this.ifWx = true;
				}
			},
			// 我的订单点击事件
			chooseGe(obj){
				uni.navigateTo({
					url:`/pagesA/order-list/order-list?index=${[1,2,3,4][obj.index]}`
				})
			},
			// 关闭商家客服
			closeCustomer(){
				this.isCustomer = false;
			},
			// 保存二维码
			saveImg(){
				this.$toolAll.tools.saveImg(this.customerSrc);
			}
		}
	}
</script>

<style>
	
</style>