165 lines
3.4 KiB
Vue
165 lines
3.4 KiB
Vue
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #FCE9B2;
|
|
}
|
|
|
|
.container {
|
|
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: 88rpx;
|
|
|
|
.v-navbar {
|
|
margin-bottom: 54rpx;
|
|
}
|
|
|
|
.v-desc {
|
|
margin-left: 30rpx;
|
|
margin-bottom: 124rpx;
|
|
|
|
.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 {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 158rpx;
|
|
}
|
|
|
|
.v-btn {
|
|
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>
|
|
<view class="container">
|
|
<view style="height: var(--status-bar-height);"></view>
|
|
<view class="v-navbar">
|
|
<u-navbar title="面对面收款" @rightClick="rightClick" :autoBack="true" :fixed="false" bgColor="transparent"
|
|
leftIconColor="#fff" :titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'32rpx'}">
|
|
</u-navbar>
|
|
</view>
|
|
|
|
<view class="v-desc">
|
|
<view class="v-desc-main">扫描二维码</view>
|
|
<view class="v-desc-sub">即可进入面对面付款</view>
|
|
</view>
|
|
|
|
<view class="v-qrcode">
|
|
<u-image width="540rpx" height="540rpx" :showLoading="true" :src="img" class="v-qrcode-img"></u-image>
|
|
</view>
|
|
|
|
<view class="v-btn" @click="handleSavePic">
|
|
<image src="../../static/images/download_yellow.webp" />
|
|
<text>保存二维码</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
qrcode
|
|
} from "@/api/payment.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
img: ''
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.getQrcode(opt.mer_id)
|
|
},
|
|
methods: {
|
|
// 获取二维码
|
|
getQrcode(merid) {
|
|
qrcode({
|
|
mer_id: merid || 7
|
|
}).then(res => {
|
|
this.img = res.data.url;
|
|
})
|
|
},
|
|
|
|
handleSavePic() {
|
|
// 获取要保存的图片路径或URL
|
|
let imageUrl = this.img; // 这里使用了网络上的图片作为示例
|
|
|
|
// #ifdef H5
|
|
var a = document.createElement("a");
|
|
a.download = imageUrl;
|
|
a.href = imageUrl;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
this.$util.Tips({
|
|
title: '二维码保存成功！'
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
let that = this;
|
|
uni.downloadFile({
|
|
url: imageUrl,
|
|
success(res) {
|
|
if (res.statusCode === 200) {
|
|
let tempFilePath = res.tempFilePath; // 临时文件路径
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success() {
|
|
return that.$util.Tips({
|
|
title: '图片已保存至相册!'
|
|
});
|
|
},
|
|
fail(err) {
|
|
console.error('保存失败', err);
|
|
}
|
|
});
|
|
} else {
|
|
console.error('下载失败', res.statusCode);
|
|
}
|
|
},
|
|
fail(err) {
|
|
console.error('下载失败', err);
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script> |