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> |