cashier_admin_app/pagesCreateOrder/pay-order/pay-order.vue

<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>