367 lines
8.7 KiB
Vue
367 lines
8.7 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";
|
||
import spread from "../../../libs/spread";
|
||
import { mapGetters } from "vuex";
|
||
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: []
|
||
};
|
||
},
|
||
computed: mapGetters(['isLogin','uid']),
|
||
onLoad(options) {
|
||
this.levelInfo();
|
||
this.getCode();
|
||
try {
|
||
this.user_latitude = uni.getStorageSync('user_latitude');
|
||
this.user_longitude = uni.getStorageSync('user_longitude');
|
||
} catch (e) {}
|
||
|
||
// 关系处理
|
||
if(options.spread) spread(options.spread, this.isLogin)
|
||
},
|
||
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() {
|
||
},
|
||
|
||
// #ifdef MP
|
||
// 分享给好友
|
||
onShareAppMessage () {
|
||
let pages = getCurrentPages();
|
||
let page = pages[pages.length - 1]
|
||
let shareData = {
|
||
title: '会员卡',
|
||
path: page.$page.fullPath || '/' + page.route,
|
||
};
|
||
// 判断：用户是否登录 已经登录则添加分享人信息，未登录则正常分享
|
||
if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
|
||
// 返回最终的分享配置信息
|
||
return shareData
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline() {
|
||
let shareData = {
|
||
title: '会员卡',
|
||
query: {},
|
||
};
|
||
// 判断：用户是否登录 已经登录则添加分享人信息，未登录则正常分享
|
||
if (this.isLogin) shareData.query.spread = this.uid;
|
||
// 返回最终的分享配置信息
|
||
return shareData
|
||
},
|
||
// #endif
|
||
|
||
}
|
||
</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> |