393 lines
12 KiB
Vue
393 lines
12 KiB
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({
|
|
title: '加载中'
|
|
});
|
|
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>
|