first
This commit is contained in:
209
pagesCreateOrder/pay-order/pay-order.vue
Normal file
209
pagesCreateOrder/pay-order/pay-order.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<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">{{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="bg-fff box-shadow u-p-t-30 u-p-l-50 u-p-r-50 card top border-r-12 u-m-t-30">
|
||||
<view class="u-flex 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"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-fff box-shadow u-p-t-30 u-p-l-50 u-p-r-50 card bottom border-r-12 ">
|
||||
<my-tabs :list="pays.list"></my-tabs>
|
||||
<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>
|
||||
|
||||
|
||||
<view class="u-m-t-60 u-p-b-30">
|
||||
<my-button @click="payOrder">确认付款</my-button>
|
||||
</view>
|
||||
|
||||
<edit-discount title="优惠金额" :ref="setModel" name="editMoney" :price="order.amount"></edit-discount>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import * as Api from '@/http/yskApi/Instead.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import editDiscount from '@/pagesCreateOrder/components/edit-discount.vue'
|
||||
const pays = reactive({
|
||||
list: ['普通支付', '混合支付'],
|
||||
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()
|
||||
}
|
||||
|
||||
async function getPayType() {
|
||||
const payTypeList = await Api.$getPayType()
|
||||
pays.payTypes.list = payTypeList.filter(v=>v.payType!='scanCode')
|
||||
}
|
||||
|
||||
function changePayType(i) {
|
||||
pays.payTypes.selIndex = i
|
||||
}
|
||||
|
||||
async function payOrder() {
|
||||
const payType=pays.payTypes.list[pays.payTypes.selIndex].payType
|
||||
await Api.$payOrder({
|
||||
tableId: order.tableId,
|
||||
masterId: order.masterId,
|
||||
orderId: order.id,
|
||||
payType,
|
||||
vipUserId: order.userId,
|
||||
discount: 1,
|
||||
code: ''
|
||||
})
|
||||
infoBox.showToast('支付成功')
|
||||
setTimeout(()=>{
|
||||
uni.$emit('orderDetail:update')
|
||||
uni.navigateBack()
|
||||
},500)
|
||||
}
|
||||
onMounted(() => {
|
||||
getPayType()
|
||||
})
|
||||
const order = reactive({
|
||||
amount: 0
|
||||
})
|
||||
onLoad((opt) => {
|
||||
Object.assign(order, opt)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-shadow {
|
||||
box-shadow: 0 0 5px #eee;
|
||||
}
|
||||
|
||||
.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;
|
||||
box-shadow: 0 0 5px #eee;
|
||||
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>
|
||||
Reference in New Issue
Block a user