137 lines
2.7 KiB
Vue
137 lines
2.7 KiB
Vue
<template>
|
||
<view>
|
||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||
<block slot="backText">返回</block>
|
||
</cu-custom>
|
||
<view class="oil-qrcode">
|
||
<view class="round first"></view>
|
||
<view class="card">
|
||
<view class="info">
|
||
<view>{{user.name || ''}}</view>
|
||
<view>{{phoneHandle}}</view>
|
||
</view>
|
||
<tki-qrcode ref="qrcode" cid="2" :val="qrcodeText" :size="400" :isHaveBg="false" pdground="#000"
|
||
foreground="#000" background="#fff" onval showLoading loadMake />
|
||
<view class="tip">扫一扫上面的二维码图案，给我赠油，可截图保存。</view>
|
||
<button class="button" @click="regeneration">重新生成</button>
|
||
</view>
|
||
<view class="tip-sec">注: 重新生成收油码后, 以前截图保存的收油码将作废!</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import serve from '@/api/account.js'
|
||
import tkiQrcode from '@/BagStation/pages/components/tki-qrcode/tki-qrcode.vue'
|
||
export default {
|
||
components: {
|
||
tkiQrcode
|
||
},
|
||
data() {
|
||
return {
|
||
qrcodeText: '',
|
||
user: uni.getStorageSync('user')
|
||
}
|
||
},
|
||
created() {
|
||
this.getQrStr()
|
||
},
|
||
computed: {
|
||
phoneHandle() {
|
||
let phone = this.user.userPhone
|
||
console.log('user',this.user)
|
||
if(!phone) return ''
|
||
return `${phone.substr(0,3)}****${phone.substr(-4)}`
|
||
}
|
||
},
|
||
methods: {
|
||
getQrStr(reset = 0) {
|
||
console.log('this.user', this.user)
|
||
if (this.user.id) {
|
||
serve.getQrStr(this.user.id, reset).then(res => {
|
||
if (!res.data) return
|
||
this.qrcodeText = JSON.stringify({
|
||
giveCustomerId: this.user.id,
|
||
qrcodeText: res.data
|
||
})
|
||
})
|
||
}
|
||
|
||
},
|
||
regeneration() {
|
||
this.getQrStr(1)
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.round {}
|
||
|
||
.oil-qrcode {
|
||
height: calc(100vh - 87px);
|
||
padding-top: 200rpx;
|
||
background: #FF6700;
|
||
|
||
.card {
|
||
margin: 0 auto;
|
||
padding-top: 70rpx;
|
||
padding-bottom: 50rpx;
|
||
width: 598rpx;
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
|
||
.info {
|
||
view {
|
||
text-align: center;
|
||
|
||
&:nth-of-type(1) {
|
||
color: #000;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
&:nth-of-type(2) {
|
||
margin-top: 10rpx;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
margin-top: 70rpx;
|
||
color: #9E9E9E;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.button {
|
||
margin-top: 50rpx;
|
||
margin-right: 53rpx;
|
||
width: 172rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
background: #409eff;
|
||
}
|
||
}
|
||
|
||
.tip-sec {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 70rpx;
|
||
width: 100%;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/deep/.tki-qrcode {
|
||
margin-top: 71rpx;
|
||
padding: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
</style>
|