338 lines
7.6 KiB
Vue
338 lines
7.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="vipGrade">
|
|||
|
|
<view class="headerBg">
|
|||
|
|
<view class="header" v-if="info.user">
|
|||
|
|
<view class="top acea-row row-middle">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image :src="info.user.avatar"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<view class="name acea-row row-middle">
|
|||
|
|
<view class="nameCon line1">{{info.user.nickname}}</view>
|
|||
|
|
<view v-if="info.level_info.grade" class="num">lv.{{info.level_info.grade}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="idNum">ID：{{info.user.uid}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list acea-row row-around row-middle">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="num">{{info.user.now_money}}</view>
|
|||
|
|
<view>余额</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="num">{{info.user.integral}}</view>
|
|||
|
|
<view>积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="num">{{ info.level_info.discount ? parseFloat(info.level_info.discount)/10 : '0'}}</view>
|
|||
|
|
<view>折扣</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="qrCode">
|
|||
|
|
<view class="header acea-row row-between-wrapper">
|
|||
|
|
<view class="title" :class="{'on': codeIndex == index,'onLeft':codeIndex == 1}"
|
|||
|
|
v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">{{item.name}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="acea-row row-center-wrapper" style="margin-top: 35rpx;">
|
|||
|
|
<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="store acea-row row-between-wrapper" v-if="storeList.length">
|
|||
|
|
<view class="title">
|
|||
|
|
<text class="iconfont icon-mendian1"></text>
|
|||
|
|
附近门店
|
|||
|
|
</view>
|
|||
|
|
<view class="acea-row" @click="goMap">
|
|||
|
|
距 <view class="storeName line1">{{storeList[0].name}}</view> {{storeList[0].range}}km<text class="iconfont icon-gengduo3"></text></view>
|
|||
|
|
</view>
|
|||
|
|
<home v-if="navigation"></home>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import home from '@/components/home/index.vue'
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
getlevelInfo,
|
|||
|
|
getRandCode
|
|||
|
|
} from '@/api/user.js';
|
|||
|
|
import {
|
|||
|
|
storeListApi
|
|||
|
|
} from "@/api/store";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
home
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
info:{},
|
|||
|
|
codeList: [{
|
|||
|
|
name: '付款码'
|
|||
|
|
}, {
|
|||
|
|
name: '核销码'
|
|||
|
|
}],
|
|||
|
|
codeIndex:0,
|
|||
|
|
config: {
|
|||
|
|
qrc: {
|
|||
|
|
code: '',
|
|||
|
|
size: 380, // 二维码大小
|
|||
|
|
level: 3, //等级 0～4
|
|||
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
|||
|
|
border: {
|
|||
|
|
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
|||
|
|
lineWidth: 1, //边框宽度
|
|||
|
|
},
|
|||
|
|
color: ['#333', '#333'], //边框颜色支持渐变色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
user_latitude: 0,
|
|||
|
|
user_longitude: 0,
|
|||
|
|
storeList: []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.levelInfo();
|
|||
|
|
this.getCode();
|
|||
|
|
try {
|
|||
|
|
this.user_latitude = uni.getStorageSync('user_latitude');
|
|||
|
|
this.user_longitude = uni.getStorageSync('user_longitude');
|
|||
|
|
} catch (e) {}
|
|||
|
|
},
|
|||
|
|
onReady() {},
|
|||
|
|
onShow() {
|
|||
|
|
uni.removeStorageSync('form_type_cart');
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (this.user_latitude && this.user_longitude) {
|
|||
|
|
this.getList();
|
|||
|
|
} else {
|
|||
|
|
this.selfLocation();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goMap(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/store/map/index'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selfLocation() {
|
|||
|
|
let self = this
|
|||
|
|
// #ifdef H5
|
|||
|
|
if (self.$wechat.isWeixin()) {
|
|||
|
|
self.$wechat.location().then(res => {
|
|||
|
|
this.user_latitude = res.latitude;
|
|||
|
|
this.user_longitude = res.longitude;
|
|||
|
|
uni.setStorageSync('user_latitude', res.latitude);
|
|||
|
|
uni.setStorageSync('user_longitude', res.longitude);
|
|||
|
|
self.getList();
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// #endif
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'wgs84',
|
|||
|
|
success: (res) => {
|
|||
|
|
try {
|
|||
|
|
this.user_latitude = res.latitude;
|
|||
|
|
this.user_longitude = res.longitude;
|
|||
|
|
uni.setStorageSync('user_latitude', res.latitude);
|
|||
|
|
uni.setStorageSync('user_longitude', res.longitude);
|
|||
|
|
} catch {}
|
|||
|
|
self.getList();
|
|||
|
|
},
|
|||
|
|
complete: function() {
|
|||
|
|
self.getList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// #ifdef H5
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 获取门店列表数据
|
|||
|
|
getList: function() {
|
|||
|
|
let data = {
|
|||
|
|
latitude: this.user_latitude || "", //纬度
|
|||
|
|
longitude: this.user_longitude || "", //经度
|
|||
|
|
page: 1,
|
|||
|
|
limit: 1
|
|||
|
|
};
|
|||
|
|
storeListApi(data)
|
|||
|
|
.then(res => {
|
|||
|
|
this.storeList = res.data.list.list;
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getCode() {
|
|||
|
|
getRandCode().then(res => {
|
|||
|
|
let code = res.data.code;
|
|||
|
|
this.config.qrc.code = code;
|
|||
|
|
}).catch(err => {
|
|||
|
|
return this.$util.Tips(err);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
levelInfo(){
|
|||
|
|
getlevelInfo().then(res=>{
|
|||
|
|
this.info = res.data;
|
|||
|
|
}).catch(err=>{
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tapCode(index) {
|
|||
|
|
this.codeIndex = index;
|
|||
|
|
if (index == 0) {
|
|||
|
|
this.getCode();
|
|||
|
|
} else {
|
|||
|
|
let code = this.info.user.bar_code;
|
|||
|
|
this.config.qrc.code = code;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hello(res) {
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page{
|
|||
|
|
background: linear-gradient(121deg, #F5EBE1 0%, #FFDFBE 100%);
|
|||
|
|
}
|
|||
|
|
.vipGrade{
|
|||
|
|
.headerBg{
|
|||
|
|
background: url('../static/big-bg.png') no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 476rpx;
|
|||
|
|
padding-top: 1rpx;
|
|||
|
|
.header{
|
|||
|
|
background: url('../static/grade-bg.png') no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 690rpx;
|
|||
|
|
height: 286rpx;
|
|||
|
|
margin: 26rpx auto;
|
|||
|
|
padding: 28rpx 28rpx 0 28rpx;
|
|||
|
|
.top{
|
|||
|
|
.pictrue{
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border: 1px solid #FFFFFF;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
image{
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width:100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text{
|
|||
|
|
width: 400rpx;
|
|||
|
|
.name{
|
|||
|
|
.nameCon{
|
|||
|
|
color: #EDCAAC;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
max-width: 332rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
.num{
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #EDCAAC;
|
|||
|
|
background: rgba(215,177,144,0.2);
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #EDCAAC;
|
|||
|
|
padding: 0 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.idNum{
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #EDCAAC;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list{
|
|||
|
|
margin-top: 46rpx;
|
|||
|
|
.item{
|
|||
|
|
color: #EDCAAC;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
.num{
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.qrCode{
|
|||
|
|
width: 690rpx;
|
|||
|
|
height: 700rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
margin: -134rpx auto 0 auto;
|
|||
|
|
padding-top: 60rpx;
|
|||
|
|
.header{
|
|||
|
|
width: 330rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: #EEEEEE;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
.title {
|
|||
|
|
width: 146rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
|
|||
|
|
&.onLeft {
|
|||
|
|
padding-left: 34rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.on {
|
|||
|
|
width: 170rpx;
|
|||
|
|
background-color: #333 !important;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.store{
|
|||
|
|
width: 690rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
background: linear-gradient(90deg, #FFAE49 0%, #FCC887 100%);
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
margin: 26rpx auto;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
.iconfont{
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
}
|
|||
|
|
.icon-gengduo3{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
margin-right: 0;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
}
|
|||
|
|
.storeName{
|
|||
|
|
display: inline-block;
|
|||
|
|
max-width: 284rpx;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|