You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
2.7 KiB
136 lines
2.7 KiB
<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>
|
|
|