扫码,二维码
This commit is contained in:
parent
eaa4621fe4
commit
708e3db0b0
12
api/admin.js
12
api/admin.js
|
|
@ -7,6 +7,18 @@ import request from "@/utils/request.js";
|
|||
export function getStatisticsInfo() {
|
||||
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 });
|
||||
}
|
||||
/**
|
||||
* 订单月统计
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -637,6 +637,12 @@
|
|||
"navigationBarTitleText": "订单列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "qrcode/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我要收款"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "orderRefund/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
if(this.service.is_goods){
|
||||
list.push({
|
||||
title: '我要收款',
|
||||
url: '/pages/product/list/index?mer_id=' + merId,
|
||||
url: '/pages/admin/qrcode/index?mer_id=' + merId,
|
||||
icon: 'haiyuefont haiyue-shoukuang'
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<text class="iconfont icon-shitixing"></text>
|
||||
<text>评分4.5分</text>
|
||||
</view>
|
||||
<view class="desc">位置好找，菜味道不错，价格实惠</view>
|
||||
<view class="desc">商家承诺:</view>
|
||||
<view class="site" @tap="openMap">
|
||||
<view>
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
|
|
@ -31,7 +31,14 @@
|
|||
<text>周一到周日</text>
|
||||
<text>09：00 - 22：00</text>
|
||||
</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">
|
||||
<text>WiFi</text>
|
||||
<text>充电宝</text>
|
||||
|
|
@ -86,6 +93,39 @@
|
|||
handleTab(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(){
|
||||
// 从相机和相册扫码
|
||||
// #ifdef APP-PLUS
|
||||
|
|
@ -120,6 +160,11 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.over {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.shop_details{
|
||||
font-family: PingFang SC;
|
||||
.head{
|
||||
|
|
@ -195,7 +240,8 @@
|
|||
}
|
||||
.business{
|
||||
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;
|
||||
padding: 24rpx;
|
||||
&_one{
|
||||
|
|
@ -207,6 +253,15 @@
|
|||
margin-top: 12rpx;
|
||||
color: #999;
|
||||
}
|
||||
&:nth-child(3){
|
||||
margin-top: 12rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.copy{
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
&_list{
|
||||
margin-top: 12rpx;
|
||||
|
|
|
|||
|
|
@ -209,6 +209,7 @@
|
|||
import { getMenuList, getUserInfo, setVisit } from '@/api/user.js';
|
||||
import { getVersion, getNavigation } from "@/api/public";
|
||||
import { orderData } from '@/api/order.js'
|
||||
import {getOrderOfflinePay} from '@/api/admin.js'
|
||||
import { mapGetters } from "vuex";
|
||||
import dayjs from '@/plugin/dayjs/dayjs.min.js';
|
||||
import Cache from '@/utils/cache';
|
||||
|
|
@ -220,6 +221,7 @@
|
|||
import Auth from '../../libs/wechat';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
import { setTimeout } from 'timers';
|
||||
const app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -353,8 +355,20 @@
|
|||
// #ifdef APP-PLUS
|
||||
uni.scanCode({
|
||||
scanType:['qrCode'],
|
||||
success: function (res) {
|
||||
console.log('二维码信息：' + res);
|
||||
success: async (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
|
||||
|
|
|
|||
Loading…
Reference in New Issue