czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新订单列表详情，更新商品管理，更新代客下单

Browse Source
This commit is contained in:
YeMingfei666
2024-09-23 17:39:38 +08:00
parent 90e3866524
commit edcf844adb
36 changed files with 5301 additions and 949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
pagesOrder/pay-order/pay-order.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<view class="bg-gray min-page u-p-30 u-font-28">
<view class="u-p-t-60 u-p-b-60 u-text-center">
<view class="u-font-32 ">
<text class="price-fuhao">￥</text>
<text class="font-bold price">{{discount.currentPrice?discount.currentPrice:order.amount}}</text>
</view>
<view class="u-m-t-10 color-999 old-price">
<text class="">￥</text>
<text class=" ">{{order.amount}}</text>
</view>
<view class="u-m-t-10 u-flex u-row-center color-main">
<view @click="showModel('editMoney',true)">修改</view>
</view>
</view>
<view class="content bg-fff box-shadow border-r-12">
<view class=" u-p-t-30 u-p-l-26 u-p-r-26 card top u-m-t-30">
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom-dashed u-row-between u-p-b-30">
<view>优惠券</view>
<view class="color-999 u-flex u-col-center">
<text>选择优惠券</text>
<view class="u-flex u-col-center">
<uni-icons type="right" color="#999"></uni-icons>
</view>
</view>
</view>
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom u-row-between u-p-t-30 u-p-b-30"
v-if="discount.price&&discount.currentPrice!=order.amount">
<view>服务员改价</view>
<view class=" u-flex u-col-center">
<text style="color: rgb(255, 95, 46);">-￥{{order.amount- discount.currentPrice}}</text>
</view>
</view>
</view>
<view class="bg-fff border-r-12 ">
<view class="u-p-t-30 u-p-l-50 u-p-r-50 card bottom">
<my-tabs :list="pays.list" v-model="pays.selIndex"></my-tabs>
<template v-if="pays.selIndex==0">
<view class="list">
<view class="item" @click="changePayType(index)" v-for="(item,index) in pays.payTypes.list"
:key="index">
<view class="u-flex u-row-between u-p-t-30 u-p-b-30 border-bottom">
<view class="u-flex">
<image class="icon" :src="item.icon" mode=""></image>
<text class="u-m-l-10">{{item.payName}}</text>
</view>
<view class="u-flex color-999 u-font-24">
<!-- <view class="u-m-r-20">
<text>余额：</text>
<text>￥0.00</text>
</view> -->
<my-radio @click="changePayType(index)" :modelValue="index==pays.payTypes.selIndex">
</my-radio>
</view>
</view>
</view>
</view>
<view class="u-m-t-60 u-p-b-30">
<my-button @click="payOrder">确认付款</my-button>
</view>
</template>
<template v-else>
<view class="">
<view class="u-font-32 u-m-t-40 u-text-center">请让顾客使用微信扫码</view>
<view class="u-flex u-row-center u-m-t-40 ">
<up-qrcode :size="140" val="uview-plus"></up-qrcode>
</view>
</view>
</template>
</view>
<!-- 二维码支付扫码 -->
<template v-if="pays.selIndex==1">
<view class="card border-bottom top u-m-t-32">
</view>
<view class="bg-fff card bottom border-r-12 u-p-32">
<view class="font-bold u-font-32 u-text-center">
￥{{discount.currentPrice?discount.currentPrice: order.amount}}</view>
<view class="u-flex u-row-center u-m-t-24">
<up-loading-icon size="14" text="等待支付"></up-loading-icon>
<view class="u-flex pay-success">
<up-icon color="#5CBB6F" name="checkmark-circle-fill"></up-icon>
<view class="u-m-l-6">支付成功</view>
</view>
</view>
</view>
</template>
</view>
</view>
<edit-discount @confirm="editDiscountConfirm" title="优惠金额" :ref="setModel" name="editMoney"
:price="order.amount"></edit-discount>
</view>
</template>
<script setup>
import {
reactive,
onMounted,
watch,
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app'
import * as Api from '@/http/yskApi/Instead.js'
import * as orderApi from '@/http/yskApi/order.js'
import infoBox from '@/commons/utils/infoBox.js'
import editDiscount from '@/pagesCreateOrder/components/edit-discount.vue'
let payStatus = ref(null) //loading success
const pays = reactive({
list: ['扫码收款', '二维码收款'],
selIndex: 0,
payTypes: {
list: [],
selIndex: 0
}
})
const models = new Map();
function setModel(el) {
if (el && el.$attrs['name']) {
models.set(el.$attrs['name'], el);
}
}
function showModel(key) {
const model = models.get(key)
model && model.open()
}
//打折相关数据
const discount = reactive({
})
function editDiscountConfirm(form) {
console.log(form);
Object.assign(discount, form)
}
async function getPayType() {
const payTypeList = await Api.$getPayType()
pays.payTypes.list = payTypeList
}
function changePayType(i) {
pays.payTypes.selIndex = i
}
//支付成功回调
function paySuccess() {
infoBox.showToast('支付成功')
setTimeout(() => {
// uni.$emit('orderDetail:update')
uni.navigateBack({
delta: 2
})
}, 500)
}
async function payOrder() {
const payType = pays.payTypes.list[pays.payTypes.selIndex].payType
await Api.$payOrder({
tableId: order.tableId,
masterId: order.masterId,
orderId: order.id || order.orderId,
payType,
vipUserId: order.userId,
discount: 1,
code: ''
})
paySuccess()
}
onMounted(() => {
getPayType()
})
const order = reactive({
amount: 0
})
function saomaPay() {
const item = pays.payTypes.list[pays.payTypes.selIndex]
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
Api.$payOrder({
"orderId": order.orderId, // 订单id
"payType": item.payType, //
"discount": order.discount,
"code": res.result
}).then(res => {
console.log(res);
paySuccess()
})
}
});
}
watch(() => pays.payTypes.selIndex, (newval) => {
const item = pays.payTypes.list[newval]
if (item.payType == "vipPay") {
return
}
if (item.payType == "deposit") {
//储值卡支付
return saomaPay('deposit')
}
if (item.payType == "scanCode") {
//扫码支付
return saomaPay('scanCode')
}
})
async function init() {
const res = await orderApi.tbOrderInfoDetail(order.orderId)
Object.assign(order, res)
}
onLoad((opt) => {
Object.assign(order, opt)
init()
})
</script>
<style lang="scss" scoped>
.box-shadow {
box-shadow: 0 0 5px #E5E5E5;
}
.pay-success {
color: #5CBB6F;
}
.icon {
width: 40rpx;
height: 40rpx;
}
.border-bottom-dashed {
border-bottom: 1px dashed #bbb;
}
.border-bottom {
border-color: rgb(240, 240, 240);
}
.list {
.item:last-child {
.border-bottom {
border-bottom: none;
}
}
}
.old-price {
text-decoration: line-through;
}
.price-fuhao {
font-size: 24px;
}
.price {
font-size: 32px;
}
$dotSize: 20rpx;
$position: calc($dotSize / (-2));
.card {
position: relative;
&::after,
&:before {
content: '';
display: block;
position: absolute;
background-color: #F9F9F9;
width: $dotSize;
height: $dotSize;
border-radius: 50%;
}
&.top {
&::after {
right: $position;
bottom: $position;
}
&:before {
left: $position;
bottom: $position;
}
}
&.bottom {
&::after {
right: $position;
top: $position;
}
&:before {
left: $position;
top: $position;
}
}
}
</style>