peiwan-uniapp/pages/clerk/detail/components/orderPopup.vue

<template>
	<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
		<view class="order-box">
			<view class="avatar-box">
				<u-image width="140" height="140" border-radius="20" :src="clerk.avatar"></u-image>
				<view class="close-span" @click="hiddenPopup">
					<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
				</view>
			</view>
			<scroll-view style="height: 700rpx;" scroll-y>
				<view class="page-box">
					
					<game-box v-model="game" :optionList="clerk.goodsList"></game-box>
					
					<view class="form-box">
						<!-- <view class="input-box">
							<view class="tag-box">
								<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
								<view class="name">你的微信号</view>
							</view>
							<view class="input-span">
								<u-input placeholder="请输入正确的微信号~"></u-input>
							</view>
						</view>
						
						<view class="input-box">
							<view class="textarea-box">
								<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
								<view class="name">其它备注</view>
							</view>
							<view class="textarea-span">
								<u-input type="textarea" placeholder="请输入备注内容"></u-input>
							</view>
						</view> -->
						
						<view class="input-box">
							<view class="tag-box">
								<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
								<view class="name">购买数量</view>
							</view>
							<view class="step-span">
								<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="order.num" @change="change"></tui-numberbox>
							</view>
						</view>
						
						<!-- <view class="input-box">
							<radio-box style="width: 100%;" v-model="payMethod" :optionList="optionList"></radio-box>
						</view> -->
						
					</view>
					
				</view>
			</scroll-view>
			<view class="bottom-box">
				<view class="price-box">
					<text>总价：</text>
					<text class="price">{{ fen2yuan(game.price*order.num) }}</text>
					<text>钻石</text>
				</view>
				<view class="btn-box">
					<view class="pay-btn" @click="confirm">立即下单</view>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
</template>

<script>
	import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
	import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
	import RadioBox from '@/pages/clerk/detail/components/radioBox.vue';
	import GameBox from '@/pages/clerk/detail/components/gameBox.vue';
	import sheep from '@/sheep';
	export default {
		components: {
			tuiBottomPopup,
			tuiNumberbox,
			RadioBox,
			GameBox,
		},
		props: {
			
		},
		data() {
			return { 
				popupShow: false,
				optionList: [
					{
						name: '余额支付',
						value: '0',
						type: 'number',
						number: '1000',
					},
					{
						name: '微信支付',
						value: '1',
						type: 'icon',
					},
				],
				payMethod: '0',
				
				game: {
					goodsId: -1,
					price: 0,
				},
				order: {
					num: 1,
					goodsId: -1,
					price: 0,
				},
				
	
			}
		},
		computed: {
			clerk() {
				return sheep.$store('sys').clerk;
			},
		},
		methods: {
			//调用此方法显示弹层
			showPopup() {
				this.popupShow = true
			},
			hiddenPopup() {
				this.popupShow = false
			},
			change(e) {
				this.order.num = e.value
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			fen2yuan(price) {
			  return (price / 100.0).toFixed(0)
			},
			confirm() {
				this.order.goodsId = this.game.goodsId,
				this.order.price = this.game.price*this.order.num
				if(this.order.goodsId < 0) {
					sheep.$helper.toast('请选择商品');
					return;
				}
				var data = {
					"clerkId": this.clerk.id,
					'items' : [{"skuId": this.order.goodsId, "count": this.order.num}]
				}
				this.$u.route({
					url: 'pages/order/worker/confirm',
					params: {
						data: JSON.stringify(data),
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-box {
		padding: 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.close-span {
			position: absolute;
			right: 5px;
			top: 5px;
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.page-box {
		padding: 15px;
		padding-bottom: 10px;
		
		.form-box {
			margin-bottom: 10px;
			
			.tag-box {
				display: flex;
				align-items: center;
				width: 200rpx;
				
				.name {
					font-size: 28rpx;
					color: #333;
					margin-left: 5px;
				}
			}
			
			.textarea-box {
				height: 20px;
				display: flex;
				width: 200rpx;
				
				.name {
					font-size: 28rpx;
					color: #333;
					margin-left: 5px;
				}
			}
			
			.input-box {
				display: flex;
				margin-bottom: 20px;
				
				.input-span {
					background-color: #f6f6f6;
					margin-left: 15px;
					display: flex;
					flex: 1;
					padding: 0 12px;
					border-radius: 40px;
				}
				
				.textarea-span {
					background-color: #f6f6f6;
					margin-left: 15px;
					flex: 1;
					padding: 2px 12px;
					border-radius: 10px;
				}
				
				.step-span {
					display: flex;
					justify-content: flex-end;
					flex: 1;
					align-items: center;
				}
			}
		}
	}

	.bottom-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		box-shadow: 0 0 6px 0 #ccc;
		
		.price-box {
			color: #fb932c;
			font-size: 28rpx;
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.price {
				margin-right: 5px;
			}
		}
		
		.btn-box {
			width: 50%;
			padding-left: 15px;
			
			.pay-btn {
				background-color: var(--ui-BG-Main);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				font-size: 28rpx;
				height: 70rpx;
			}
		}
		
	}
</style>