面对面扫码

This commit is contained in:
DESKTOP-GMUNQ1B\k 2024-02-29 20:35:06 +08:00
parent 15cceb57e2
commit 435626d00a
6 changed files with 2348 additions and 10 deletions

45
api/payment.js Normal file
View File

@ -0,0 +1,45 @@
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import request from "@/utils/request.js";
/**
* 添加购物车
*/
export function addCart(data) {
return request.post(`user/cart/create`, data);
}
/**
* 根据店铺id 获取店铺信息
*/
export function getProductInfo(data) {
return request.get(`scanPay/product`, data);
}
/**
* 订单校验
*/
export function orderCheck(data) {
return request.post(`v2/order/check`, data);
}
/**
* 生成订单
*/
export function orderPay(data) {
return request.post(`v2/order/create`, data);
}
/**
* 生成二维码
*/
export function qrcode(data) {
return request.get(`scanPay/qrcode`, data);
}

View File

@ -290,6 +290,17 @@
"navigationBarTitleText": "面对面收款",
"navigationStyle": "custom"
}
}, {
"path": "get_payment",
"style": {
"navigationBarTitleText": "面对面收款",
"navigationStyle": "custom"
}
}, {
"path": "settlement",
"style": {
"navigationBarTitleText": "支付"
}
}]
}, {
"root": "pages/goods_cate",

View File

@ -0,0 +1,347 @@
<template>
<view class="container" v-if="merchantInfo">
<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">{{merchantInfo.merchant.mer_name}}</view>
</view>
<!-- 店铺图片 -->
<view class="v-shop-img">
<u-image :showLoading="true" :src="merchantInfo.merchant.mer_avatar" width="182rpx" height="182rpx"
:radius="10" />
</view>
<!-- 付款金额 -->
<view class="v-con">
<view class="v-con-text">付款金额</view>
<view class="v-con-input">
<u--input type="number" maxlength="5" fontSize="23" v-model="cartForm.total_amount" placeholder="请输入金额"
border="none" placeholderStyle="color:#999;font-size:30rpx">
<u--text size="23" color="#303133" text="¥" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
</u-input>
</u--input>
</view>
<view class="v-wrap" v-if="cartForm.total_amount">
<view class="v-wrap-money">
<text class="icon"></text>
<text class="num">{{cartForm.total_amount}}</text>
</view>
<view class="v-wrap-desc">
<view class="v-wrap-desc-main">实物提货券</view>
<view class="v-wrap-desc-sub">即买即用</view>
</view>
</view>
<view class="v-btn" @click="submitOrder">提交订单</view>
</view>
</view>
</template>
<script>
import {
getProductInfo,
addCart,
orderCheck
} from "@/api/payment.js";
export default {
data() {
return {
cartForm: {
product_id: '',
product_attr_unique: '',
cart_num: 1,
is_new: 1,
product_type: 0,
source: 999,
total_amount: ''
},
merchantInfo: '',
checkForm: {
address_id: '',
cart_id: [],
consumption_id: '',
product_type: 0,
source: 999,
takes: [],
use_coupon: {},
use_integral: false
}
}
},
created() {
// mer_id
this.getProductInfoByMerid();
},
methods: {
//
submitOrder() {
if (!this.cartForm.total_amount) {
return this.$util.Tips({
title: "请输入付款金额!"
})
}
//
this.cartForm.product_id = this.merchantInfo.product_id;
this.cartForm.product_type = this.merchantInfo.product_type;
this.cartForm.product_attr_unique = this.merchantInfo.sku[''].unique;
let that = this;
addCart(this.cartForm).then(res => {
// ID
this.checkForm.cart_id.push(res.data.cart_id);
this.$util.Tips({
title: "添加购物车成功!"
}, () => {
orderCheck(that.checkForm).then(res => {
uni.navigateTo({
url: "/pages/payment/settlement?cartId=" + this.checkForm
.cart_id + "&money=" + this.cartForm.total_amount +
"&merName=" + this.merchantInfo.merchant.mer_name
})
});
});
}).catch(() => {
this.$util.Tips({
title: "添加购物车失败!"
})
})
},
getProductInfoByMerid() {
let that = this;
getProductInfo({
mer_id: 31
}).then(res => {
this.merchantInfo = res.data;
}).catch((err) => {
that.$util.Tips({
title: err.message
});
})
},
handleSavePic() {
// URL
let imageUrl = this.qrcodeUrl; // 使
// #ifdef H5
var a = document.createElement("a");
a.download = imageUrl;
a.href = imageUrl;
document.body.appendChild(a);
a.click();
a.remove();
// #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>
<style lang="scss" scoped>
page {
background-color: #FCE9B2;
}
.container {
position: relative;
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c582c202402291601584806.webp");
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 88rpx;
margin-bottom: 20rpx;
.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;
}
}
.v-shop-img {
position: absolute;
top: 196rpx;
right: 40rpx;
}
.v-con {
position: relative;
width: 710rpx;
height: 1166rpx;
background: linear-gradient(180deg, #FEB992 0%, #FFFFFF 31%, #FFFFFF 100%);
border-radius: 20rpx 20rpx 0rpx 0rpx;
margin: 0 auto;
box-shadow: 0 -4rpx 0px 0px #fff;
padding: 53rpx 30rpx 0 30rpx;
box-sizing: border-box;
.v-con-text {
margin-bottom: 60rpx;
font-weight: 400;
font-size: 32rpx;
color: #2E2E2E;
line-height: 16rpx;
}
/deep/.u-text__value--tips {
color: #2E2E2E;
}
.v-con-input {
margin-bottom: 83rpx;
padding: 0 0 40rpx 12rpx;
border-bottom: 1rpx solid #D6D6D6;
}
.v-wrap {
position: relative;
width: 666rpx;
height: 210rpx;
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/2f9c2202402291652415355.webp");
background-size: 100% 100%;
background-repeat: no-repeat;
.v-wrap-money {
position: absolute;
top: 70rpx;
left: 36rpx;
color: #FF5E0C;
.icon {
font-size: 28rpx;
}
.num {
font-size: 46rpx;
}
}
.v-wrap-desc {
position: absolute;
top: 67rpx;
left: 230rpx;
.v-wrap-desc-main {
margin-bottom: 16rpx;
font-weight: 600;
font-size: 32rpx;
color: #2E2E2E;
}
.v-wrap-desc-sub {
font-weight: 400;
font-size: 24rpx;
color: #2E2E2E;
}
}
}
.v-btn {
position: absolute;
bottom: 96rpx;
width: 650rpx;
height: 100rpx;
line-height: 100rpx;
background: #FF8056;
box-shadow: 0rpx 3rpx 3rpx 1rpx rgba(255, 94, 12, 0.4);
border-radius: 55rpx 55rpx 55rpx 55rpx;
border: 1rpx solid #FF8056;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
&:active {
opacity: .8;
}
}
}
}
</style>

View File

@ -1,8 +0,0 @@
<template>
</template>
<script>
</script>
<style>
</style>

View File

@ -70,6 +70,7 @@
</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'}">
@ -82,7 +83,7 @@
</view>
<view class="v-qrcode">
<u-image width="540rpx" height="540rpx" :showLoading="true" src="" class="v-qrcode-img"></u-image>
<u-image width="540rpx" height="540rpx" :showLoading="true" :src="img" class="v-qrcode-img"></u-image>
</view>
<view class="v-btn" @click="handleSavePic">
@ -93,11 +94,31 @@
</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.qrcodeUrl; // 使
let imageUrl = this.img; // 使
// #ifdef H5
var a = document.createElement("a");
@ -106,6 +127,9 @@
document.body.appendChild(a);
a.click();
a.remove();
this.$util.Tips({
title: '二维码保存成功!'
})
// #endif
// #ifndef H5

1919
pages/payment/settlement.vue Normal file

File diff suppressed because it is too large Load Diff