295 lines
6.9 KiB
Vue
295 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="qrcode-container" :style="viewColor">
|
|||
|
|
<view style="padding-top: var(--status-bar-height)"></view>
|
|||
|
|
<!-- <BackBar title="收款二维码" url="/pages/home/home"></BackBar> -->
|
|||
|
|
<view class="qrcode">
|
|||
|
|
<uni-popup ref="amountRef" type="center" round="10">
|
|||
|
|
<view class="qrcode-popup">
|
|||
|
|
<view class="qrcode-popup-title">设置金额</view>
|
|||
|
|
<view class="qrcode-popup-input-box">
|
|||
|
|
<input
|
|||
|
|
v-model="formData.amount"
|
|||
|
|
type="number"
|
|||
|
|
class="uni-input"
|
|||
|
|
placeholder="输入收款金额"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="qrcode-btn" @click="setAmountMethod">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<view class="qrcode-box">
|
|||
|
|
<view class="qrcode-line"></view>
|
|||
|
|
<view class="qrcode-title">扫一扫向我付款</view>
|
|||
|
|
<view class="qrcode-value">
|
|||
|
|
<view class="qrcode-value-bg">
|
|||
|
|
<view class="qrcode-value-box">
|
|||
|
|
<zb-code v-if="val" ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
|
|||
|
|
:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake"
|
|||
|
|
@result="qrR" />
|
|||
|
|
<view v-else class="qrcode-btn" @click="showAmountPopup">设置金额</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="itShow"
|
|||
|
|
class=""
|
|||
|
|
style="
|
|||
|
|
padding: 10rpx 5rpx 40rpx 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
text-align: center;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
已设置金额:<span style="color: red; font-size: 32rpx">{{formData.amount}}</span>
|
|||
|
|
<view style="margin-top: 20rpx;" class="qrcode-btn" @click="showAmountPopup">设置金额</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import zbCode from '@/components/zb-code/zb-code.vue'
|
|||
|
|
import {setOrderCreate} from '@/api/admin.js'
|
|||
|
|
import {mapGetters} from 'vuex'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
zbCode
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formData:{
|
|||
|
|
amount:''
|
|||
|
|
},
|
|||
|
|
amountUrl:'',
|
|||
|
|
amountInput:'',
|
|||
|
|
mer_id:'',
|
|||
|
|
itShow:false,
|
|||
|
|
//二维码参数
|
|||
|
|
codeShow: false,
|
|||
|
|
cid: '1',
|
|||
|
|
ifShow: true,
|
|||
|
|
val: "", // 要生成的二维码值
|
|||
|
|
size: 300, // 二维码大小
|
|||
|
|
unit: 'upx', // 单位
|
|||
|
|
background: '#FFF', // 背景色
|
|||
|
|
foreground: '#000', // 前景色
|
|||
|
|
pdground: '#32dbc6', // 角标色
|
|||
|
|
icon: '', // 二维码图标
|
|||
|
|
iconsize: 40, // 二维码图标大小
|
|||
|
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|||
|
|
onval: true, // val值变化时自动重新生成二维码
|
|||
|
|
loadMake: true, // 组件加载完成后自动生成二维码
|
|||
|
|
src: '', // 二维码生成后的图片地址或base64
|
|||
|
|
codeSrc: "",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(val) {
|
|||
|
|
this.mer_id = val.mer_id
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
...mapGetters(['viewColor'])
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
qrR(res) {
|
|||
|
|
this.codeSrc = res
|
|||
|
|
},
|
|||
|
|
async setAmountMethod(){
|
|||
|
|
let {data,status} = await setOrderCreate(this.mer_id,this.formData)
|
|||
|
|
if(status ==200){
|
|||
|
|
this.$refs.amountRef.close()
|
|||
|
|
this.itShow = true
|
|||
|
|
this.codeShow = true
|
|||
|
|
let params = {
|
|||
|
|
sn:data.order_no
|
|||
|
|
}
|
|||
|
|
this.val = JSON.stringify(params)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showAmountPopup(){
|
|||
|
|
this.$refs.amountRef.open('center')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.qrcode-container {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.bottom {
|
|||
|
|
width: 90%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: white;
|
|||
|
|
backdrop-filter: blur(40rpx);
|
|||
|
|
padding: 36rpx 36rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
top: -5%;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
&-remark {
|
|||
|
|
background: #f2f2f7;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding: 20rpx 8rpx;
|
|||
|
|
}
|
|||
|
|
&-title{
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.qrcode {
|
|||
|
|
background: linear-gradient(var(--view-bntColor11) 5%, var(--view-bntColor12) 80%, var(--view-bntColor21) 100%);
|
|||
|
|
height: calc(100vh - var(--status-bar-height));
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 36rpx;
|
|||
|
|
position: relative;
|
|||
|
|
flex-direction: column;
|
|||
|
|
&-box {
|
|||
|
|
width: 90%;
|
|||
|
|
backdrop-filter: blur(40rpx);
|
|||
|
|
padding: 60rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
top: -5%;
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
background: var(--view-bntColor11);
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: -20rpx;
|
|||
|
|
top: 240rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: "";
|
|||
|
|
background: var(--view-bntColor11);
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -20rpx;
|
|||
|
|
top: 240rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-avatar {
|
|||
|
|
width: 136rpx;
|
|||
|
|
height: 136rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: black;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
&-image {
|
|||
|
|
width: 136rpx;
|
|||
|
|
height: 136rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #888888;
|
|||
|
|
margin-bottom: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-line {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 1rpx;
|
|||
|
|
border: 2rpx dashed rgba(242, 242, 247, 1);
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #4e4e4e;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-value {
|
|||
|
|
width: 400rpx;
|
|||
|
|
height: 400rpx;
|
|||
|
|
background: #fafafc;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 14rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
&-bg {
|
|||
|
|
height: 100%;
|
|||
|
|
background: white;
|
|||
|
|
padding: 18rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
&-box {
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgb(242, 242, 247);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-amount {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #4e4e4e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-btn {
|
|||
|
|
width: 284rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
background: linear-gradient(180deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-popup {
|
|||
|
|
width: 660rpx;
|
|||
|
|
height: 408rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 36rpx 24rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
&-title {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-input-box {
|
|||
|
|
padding: 28rpx 40rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #f2f2f7;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
uni-input{
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|