Huanyuyuehui/pages/admin/qrcode/index.vue

295 lines
6.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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