商户收款

This commit is contained in:
DESKTOP-GMUNQ1B\k 2024-03-18 16:36:42 +08:00
parent 069dba3a17
commit 4537bbaa0f
1 changed files with 69 additions and 92 deletions

View File

@ -1,80 +1,3 @@
<style lang="scss" scoped>
page {
background-color: #FCE9B2;
}
.container {
position: relative;
height: 100vh;
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/9cf05202402291000026355.webp");
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: var(--status-bar-height);
.v-navbar {
margin-bottom: 54rpx;
}
.v-desc {
position: absolute;
top: 230rpx;
left: 40rpx;
.v-desc-main {
margin-bottom: 30rpx;
font-weight: 600;
font-size: 42rpx;
color: #FFFFFF;
}
.v-desc-sub {
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
}
.v-qrcode {
position: absolute;
top: 475rpx;
left: 50%;
transform: translateX(-50%);
}
.v-btn {
position: absolute;
top: 1173rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 690rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(255, 94, 12, 0.32);
border-radius: 55rpx 55rpx 55rpx 55rpx;
margin: 0 auto;
image {
width: 32rpx;
height: 32rpx;
margin-right: 6rpx;
}
text {
font-weight: 600;
font-size: 32rpx;
color: #FF5E0C;
line-height: 16rpx;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 2rpx;
}
}
}
</style>
<template> <template>
<view class="container"> <view class="container">
<view class="v-navbar"> <view class="v-navbar">
@ -82,19 +5,17 @@
:titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'32rpx'}"> :titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'32rpx'}">
</u-navbar> </u-navbar>
</view> </view>
<view style="display:flex;justify-content:center;flex-direction:column;align-items:center;">
<!-- <view class="v-desc"> <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/82347202403181619505958.png"
<view class="v-desc-main">扫描二维码</view> style="width:350rpx;height:118rpx;" mode="widthFix" />
<view class="v-desc-sub">即可进入面对面付款</view> <text class="shop_name">店铺:{{userInfo.mer_info.mer_name || '-'}}</text>
</view> --> </view>
<view class="v-qrcode"> <view class="v-qrcode">
<u-image width="540rpx" height="540rpx" :showLoading="true" :src="img" class="v-qrcode-img"></u-image> <u-image width="490rpx" height="490rpx" :showLoading="true" :src="img" class="v-qrcode-img"></u-image>
<view style="color: #FF5E0C;text-align: center;" v-if="userInfo.mer_info">{{userInfo.mer_info.mer_name}}</view>
</view> </view>
<view class="v-btn" @click="handleSavePic"> <view class="v-btn" @click="handleSavePic">
<image src="../../static/images/download_yellow.webp" />
<text>保存二维码</text> <text>保存二维码</text>
</view> </view>
</view> </view>
@ -108,20 +29,21 @@
data() { data() {
return { return {
img: '', img: '',
userInfo: {} userInfo: {}
} }
}, },
onLoad(opt) { onLoad(opt) {
let user = this.$store.state.app.userInfo; console.log(123);
if(typeof user =='string') user = JSON.parse(user); let user = this.$store.state.app.userInfo;
this.userInfo = user; if (typeof user == 'string') user = JSON.parse(user);
this.getQrcode(user.service.mer_id) this.userInfo = user;
this.getQrcode(user.service.mer_id)
}, },
methods: { methods: {
// //
getQrcode(merid) { getQrcode(merid) {
qrcode({ qrcode({
mer_id: merid || 7 mer_id: merid
}).then(res => { }).then(res => {
this.img = res.data.url; this.img = res.data.url;
}) })
@ -173,4 +95,59 @@
} }
} }
} }
</script> </script>
<style lang="scss" scoped>
page {
background-color: #40AE36;
}
.container {
position: relative;
height: 100vh;
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: var(--status-bar-height);
.v-navbar {
margin-bottom: 54rpx;
}
.v-qrcode {
position: absolute;
top: 400rpx;
left: 50%;
transform: translateX(-50%);
width: 650rpx;
height: 650rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.shop_name {
margin-top: 30rpx;
font-size: 30rpx;
color: #FFFFFF;
}
.v-btn {
position: absolute;
top: 1080rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 690rpx;
height: 100rpx;
margin: 0 auto;
text {
font-weight: 400;
font-size: 32rpx;
color: #fff;
}
}
}
</style>