overseas/pages/annex/vip_grade/index.vue

341 lines
8.2 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
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, //等级 04
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>