mall-laonong/pages/my/my.vue

346 lines
11 KiB
Vue

<template>
<view class="pad-x170" v-if="isLoading">
<view class="my-top">
<view class="my-bg">
<image src="/static/img/my-bg.jpg" mode="widthFix"></image>
</view>
<!-- 头部 -->
<view class="my-herder pad-zy20 border-box">
<view class="my-message color-ff flex">
<!-- 头像 -->
<view class="my-portrait radius100">
<image :src="headPortrait" mode="widthFix"></image>
</view>
<!-- 用户名 -->
<view class="my-txt flex">
<view class="my-nickname font36 flex">
<text>{{nickName}}</text>
<image :src="vip_info.ico" mode="widthFix" v-if="vip_info.ico!==''"></image>
</view>
<view class="my-vip-txt font24 background-orange radius25 pad-zy40 mar-s20 flex">{{vip_info.name}}</view>
</view>
</view>
<view class="my-money color-ff flex">
<view class="item" @tap="goPage('/pagesA/integral/integral')">
<view class="font48">{{userInfo.score}}</view>
<text class="font24">我的积分</text>
</view>
<view class="item" @tap="goPage('/pagesA/coupon/coupon')">
<view class="font48">{{userInfo.coupon_count}}</view>
<text class="font24">我的优惠券</text>
</view>
<view class="item" @tap="goPage('/pagesA/recharge/recharge')">
<view class="font48">{{parseFloat(userInfo.balance)>0?userInfo.balance:0}}</view>
<text class="font24">我的余额</text>
</view>
</view>
<!-- 订单量 -->
<view class="my-order background-grey border-box flex">
<view class="item" v-for="(item,index) in myOrder" :key="index" @tap="changeOrder(index)">
<view class="img flex">
<image :src="item.imgSrc" mode="widthFix" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
<view class="point radius100" v-if="orderObj.indexOf(index.toString())!=-1 && myOrder[index].num>0"></view>
</view>
<view class="txt font24 color-ff">{{item.title}}</view>
</view>
</view>
</view>
</view>
<!-- 其他资料 -->
<view class="my-content pad-all40">
<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)" v-if="showObj.indexOf(index.toString())!=-1">
<view class="title 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 font28">{{item.titele}}</view>
</view>
<view class="more">
<image src="/static/icon/icon-join.png" mode="widthFix" style="width: 14rpx;height: 26rpx;"></image>
</view>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberA" v-if="index==0&&mobile==''"></button>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberB" v-if="index==1&&mobile==''"></button>
</view>
</view>
<!-- 会员注册 -->
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-if="isVip || isShow"></view>
<view class="vip-box-bg border-box" v-if="isVip">
<view class="vip-box radius20 background-white font30">
<view class="title">会员注册</view>
<view class="vip-list">
<view class="vip-item mar-s20">
<view class="tips color-99">姓名</view>
<input class="input" type="text" v-model="myName" placeholder="请输入姓名" placeholder-style="color:#000000">
</view>
<view class="vip-item mar-s40">
<view class="tips color-99">电话</view>
<input class="input" type="number" v-model="myPhone" placeholder="请输入电话" placeholder-style="color:#000000">
</view>
</view>
<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEv">注册会员</view>
<view class="close-btn" @tap="closeEv">
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 底部tab -->
<tabbar current="0" v-if="isLoading"></tabbar>
</view>
</template>
<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import {getCartInfo} from '@/jsFile/public-api.js';
import {mapState} from 'vuex'//引入mapState
export default {
components:{
tabbar,
},
data() {
return {
statusHeight:uni.getSystemInfoSync().statusBarHeight,
scroolTop:false, //是否显示顶部
headPortrait:'', //头像
nickName:'', //用户名
businessCode:'', //是否会员
customerSrc:'', //商家客服二维码
vip_info:{}, //会员信息
myOrder:[
{title:'全部',tag:'all',imgSrc:'/static/icon/icon-order-01.png',num:0,iconWidth:42,iconHeight:44},
{title:'待付款',tag:'waiting',imgSrc:'/static/icon/icon-order-02.png',num:0,iconWidth:46,iconHeight:40},
{title:'已下单',tag:'paid',imgSrc:'/static/icon/icon-order-03.png',num:0,iconWidth:50,iconHeight:44},
{title:'已发货',tag:'shipped',imgSrc:'/static/icon/icon-order-04.png',num:0,iconWidth:48,iconHeight:42},
{title:'已完成',tag:'completed',imgSrc:'/static/icon/icon-order-05.png',num:0,iconWidth:49,iconHeight:44}
],//订单
listData:[
{titele:'个人资料',imgSrc:'/static/icon/icon-my-01.png',iconWidth:35,iconHeight:36},
{titele:'注册会员',imgSrc:'/static/icon/icon-my-02.png',iconWidth:40,iconHeight:34},
{titele:'地址管理',imgSrc:'/static/icon/icon-my-03.png',iconWidth:32,iconHeight:40},
{titele:'余额充值',imgSrc:'/static/icon/icon-my-04.png',iconWidth:34,iconHeight:28},
{titele:'积分管理',imgSrc:'/static/icon/icon-my-05.png',iconWidth:32,iconHeight:30},
{titele:'分销管理',imgSrc:'/static/icon/icon-my-06.png',iconWidth:35,iconHeight:35},
{titele:'优惠券管理',imgSrc:'/static/icon/icon-my-07.png',iconWidth:38,iconHeight:27},
{titele:'免责声明',imgSrc:'/static/icon/icon-my-09.png',iconWidth:40,iconHeight:40}
],//列表数据
vip_level:0,// 是否会员
isVip:false, //会员申请弹窗
myName:'', //姓名
myPhone:'', //电话
flag:true,
vipCode:'', //会员码
showObj:'01234567', //显示列表
mobile:'', //联系方式
orderObj:'123', //订单显示
userInfo:'',//用户信息
isLoading:false,
shareFlag:true, //是否可分享
codeImg:'', //分销码
is_distributor:0, //是否经销商
}
},
onHide() {
},
onShow() {
// 获取用户信息
this.getUserInfo();
// 刷新购物车信息
getCartInfo();
},
methods: {
// 获取用户信息
getUserInfo(){
uni.showLoading({
title:'加载中'
});
this.$requst.get('/api/user/info').then(res=>{
console.log(res,'用户信息')
if(res.code==0) {
this.userInfo = res.data;
let newArr = res.data.order_count;
this.headPortrait = res.data.headimgurl;
this.nickName = res.data.nickname;
this.mobile = res.data.mobile,
this.myPhone = this.mobile,
this.businessCode = res.data.business_code;
this.vip_level = res.data.vip_level;
this.vip_info = res.data.vip_info;
this.is_distributor = res.data.is_distributor;
this.myOrder[0].num = newArr.all;
this.myOrder[1].num = newArr.waiting;
this.myOrder[2].num = newArr.paid;
this.myOrder[3].num = newArr.shipped;
this.myOrder[4].num = newArr.completed;
if(this.vip_level!==0 && this.is_distributor!==0){
this.showObj='0234567'
}
if(this.vip_level!==0 && this.is_distributor==0){
this.showObj='023467'
}
if(this.vip_level==0 && this.is_distributor!==0){
this.showObj='01234567'
}
if(this.vip_level==0 && this.is_distributor==0){
this.showObj='0123467'
}
// 获取分销码
this.getCodeEv();
}
uni.hideLoading();
this.isLoading = true;
})
},
// 获取分销码
getCodeEv(){
this.$requst.post('/api/user/my-distribution-code').then(res=>{
if(res.code == 0){
console.log(res,'分销码');
this.codeImg = this.$hostHttp + res.data.qr;
}
})
},
// 跳转方式
toMore(index){
if(index == 0){
if(this.mobile!==''){
uni.navigateTo({
url:`/pagesB/ucenter/ucenter`
})
}
}else if(index == 1){
if(this.vip_level == 0 && this.mobile!==''){
this.isVip = true;
}
}else if(index == 2){
uni.navigateTo({
url:`/pagesA/address/address`
})
}else if(index == 3){
uni.navigateTo({
url:`/pagesA/recharge/recharge`
})
}else if(index == 4){
uni.navigateTo({
url:`/pagesA/integral/integral`
})
}else if(index == 5){
uni.navigateTo({
url:`/pagesA/distribution/distribution`
})
}else if(index == 6){
uni.navigateTo({
url:`/pagesA/coupon/coupon`
})
}else if(index == 7){
uni.navigateTo({
url:`/pagesB/disclaimers/disclaimers`
})
}
},
// 获取授权信息
onGetPhoneNumberA(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
this.getUserInfo();
uni.navigateTo({
url:`/pagesB/ucenter/ucenter`
})
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
onGetPhoneNumberB(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
this.getUserInfo();
this.isVip =true;
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
// 提交会员申请
submitEv(){
if(this.checkEmpty() && this.flag){
this.flag = false;
let params = {
real_name:this.myName,
mobile:this.myPhone,
}
this.$requst.post('/api/user/register-vip',params).then(res=>{
if(res.code==0) {
this.closeEv(); //关闭会员申请
this.getUserInfo(); // 刷新信息
}else{
this.$toolAll.tools.showToast(res.msg);
}
setTimeout(()=>{
this.flag = true;
},2000)
})
}
},
// 验证表单
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;
},
// 去对应页面
goPage(url){
uni.navigateTo({
url:url
})
},
//关闭会员申请
closeEv(){
this.isVip = false;
this.myName = '';
this.flag = true;
},
// 跳转订单管理
changeOrder(index){
uni.navigateTo({
url:`/pagesA/order/order?tag=${this.myOrder[index].tag}&index=${index}`
})
},
}
}
</script>
<style>
</style>