扫码,二维码

This commit is contained in:
faiz 2024-03-26 14:47:50 +08:00
parent eaa4621fe4
commit 708e3db0b0
6 changed files with 388 additions and 6 deletions

View File

@ -7,6 +7,18 @@ import request from "@/utils/request.js";
export function getStatisticsInfo() { export function getStatisticsInfo() {
return request.get("admin/order/statistics", {}, { login: true }); return request.get("admin/order/statistics", {}, { login: true });
} }
/**
* 设置金额获取二维码
*/
export function setOrderCreate(merId,data) {
return request.post(`admin/${merId}/order_create`, data, { login: true });
}
/**
* 设置金额获取二维码
*/
export function getOrderOfflinePay(merId) {
return request.get(`order/offline_pay/${merId}`, {}, { login: true });
}
/** /**
* 订单月统计 * 订单月统计
*/ */

View File

@ -637,6 +637,12 @@
"navigationBarTitleText": "订单列表" "navigationBarTitleText": "订单列表"
} }
}, },
{
"path": "qrcode/index",
"style": {
"navigationBarTitleText": "我要收款"
}
},
{ {
"path": "orderRefund/index", "path": "orderRefund/index",
"style": { "style": {

View File

@ -67,7 +67,7 @@
if(this.service.is_goods){ if(this.service.is_goods){
list.push({ list.push({
title: '我要收款', title: '我要收款',
url: '/pages/product/list/index?mer_id=' + merId, url: '/pages/admin/qrcode/index?mer_id=' + merId,
icon: 'haiyuefont haiyue-shoukuang' icon: 'haiyuefont haiyue-shoukuang'
}); });
} }

View File

@ -0,0 +1,295 @@
<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>

View File

@ -15,7 +15,7 @@
<text class="iconfont icon-shitixing"></text> <text class="iconfont icon-shitixing"></text>
<text>评分4.5</text> <text>评分4.5</text>
</view> </view>
<view class="desc">位置好找菜味道不错价格实惠</view> <view class="desc">商家承诺:</view>
<view class="site" @tap="openMap"> <view class="site" @tap="openMap">
<view> <view>
<text class="iconfont icon-dingwei"></text> <text class="iconfont icon-dingwei"></text>
@ -31,7 +31,14 @@
<text>周一到周日</text> <text>周一到周日</text>
<text>0900 - 2200</text> <text>0900 - 2200</text>
</view> </view>
<view>可提供:</view> <!-- <view class="iconfont icon-dianhua"></view> -->
<view class="business_one">
<view>
商家电话15834567081
</view>
<text class="copy" @tap="setCopy(15834567081)">复制</text>
</view>
<view class="business_list">可提供</view>
<view class="business_list"> <view class="business_list">
<text>WiFi</text> <text>WiFi</text>
<text>充电宝</text> <text>充电宝</text>
@ -86,6 +93,39 @@
handleTab(i){ handleTab(i){
this.actIndex = i this.actIndex = i
}, },
setCopy(content) {
// h5
//#ifndef APP-PLUS
uni.setClipboardData({
data: String(content), //
success: function() {
console.log('success');
}
});
//#endif
// h5使
// #ifdef H5
if (!document.queryCommandSupported('copy')) { //
console.log('该浏览器不支持')
}
let textarea = document.createElement("textarea")
textarea.value = content
textarea.readOnly = "readOnly"
document.body.appendChild(textarea)
textarea.select() //
textarea.setSelectionRange(0, content.length) //
let result = document.execCommand("copy") //
if (result) {
uni.showToast({
title: '复制成功',
duration: 2000,
icon:'none'
});
}
textarea.remove()
// #endif
},
handlePay(){ handlePay(){
// //
// #ifdef APP-PLUS // #ifdef APP-PLUS
@ -120,6 +160,11 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.over {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.shop_details{ .shop_details{
font-family: PingFang SC; font-family: PingFang SC;
.head{ .head{
@ -195,7 +240,8 @@
} }
.business{ .business{
margin-top: 40rpx; margin-top: 40rpx;
background-color: rgba(236, 239, 244, 0.84); background-color: color-mix(in oklch, var(--view-theme), transparent 90%);
// opacity: 0.8;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 24rpx;
&_one{ &_one{
@ -207,6 +253,15 @@
margin-top: 12rpx; margin-top: 12rpx;
color: #999; color: #999;
} }
&:nth-child(3){
margin-top: 12rpx;
color: #333;
display: flex;
justify-content: space-between;
.copy{
color: var(--view-theme);
}
}
} }
&_list{ &_list{
margin-top: 12rpx; margin-top: 12rpx;

View File

@ -209,6 +209,7 @@
import { getMenuList, getUserInfo, setVisit } from '@/api/user.js'; import { getMenuList, getUserInfo, setVisit } from '@/api/user.js';
import { getVersion, getNavigation } from "@/api/public"; import { getVersion, getNavigation } from "@/api/public";
import { orderData } from '@/api/order.js' import { orderData } from '@/api/order.js'
import {getOrderOfflinePay} from '@/api/admin.js'
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import dayjs from '@/plugin/dayjs/dayjs.min.js'; import dayjs from '@/plugin/dayjs/dayjs.min.js';
import Cache from '@/utils/cache'; import Cache from '@/utils/cache';
@ -220,6 +221,7 @@
import Auth from '../../libs/wechat'; import Auth from '../../libs/wechat';
import { HTTP_REQUEST_URL } from '@/config/app'; import { HTTP_REQUEST_URL } from '@/config/app';
import { toLogin } from '@/libs/login.js'; import { toLogin } from '@/libs/login.js';
import { setTimeout } from 'timers';
const app = getApp(); const app = getApp();
export default { export default {
components: { components: {
@ -353,8 +355,20 @@
// #ifdef APP-PLUS // #ifdef APP-PLUS
uni.scanCode({ uni.scanCode({
scanType:['qrCode'], scanType:['qrCode'],
success: function (res) { success: async (res)=> {
console.log('二维码信息:' + res); let result = JSON.parse(res.result)
let val = await getOrderOfflinePay(result.sn)
if(val.status == 200){
this.$util.Tips({
title: '支付成功',
icon: 'success'
});
setTimeout(()=>{
uni.navigateTo({
url:'/pages/users/order_list/index?status=-1'
})
},1000)
}
} }
}); });
// #endif // #endif