bc_wx_applet/pages/order/submitOrder/submitOrder.vue

<template>
	<view class="w-full">
		<send-type @sendTypeChange="sendTypeChange" />
		<view class="gap"></view>
		<!-- <view class="address">
			<u-cell-group>
				<u-cell title="添加收货地址" :border="false" url='' isLink>
					<u-icon slot="icon" size="24" name="plus"></u-icon>
				</u-cell>
			</u-cell-group>
		</view> -->
		<view class="padding-sm dflex-b bg-main" @click="show = true">
			<view class="dflex">
				<!-- <view class="addr-label">配送至</view> -->
				<view class="w-full dflex-wrap-w send-label">
					取餐时间
				</view>
			</view>
			<u-icon slot="icon" size="20" name="arrow-right" :label="value" labelPos="left"></u-icon>
			<!-- <view class="iconfont iconjiantou-01 fs-sm"></view> -->
		</view>
		<u-datetime-picker :show="show" v-model="value" mode="time" @confirm="onConfirm"
			@cancel="onCancel"></u-datetime-picker>
		<view class="gap"></view>
		<view class="padding-sm dflex-b bg-main">
			<view class="dflex">
				<!-- <view class="addr-label">配送至</view> -->
				<view class="w-full dflex-wrap-w send-label">
					取餐方式
				</view>
			</view>
			<view>
				<radio style="margin: 0 10px; transform: scale(0.85)" value="r1" :checked="true" color="#ff0000" class="radio">店内用餐
				</radio >
				<radio style="transform: scale(0.85)" value="r1" :checked="true" color="#ff0000" class="radio">打包带走
				</radio>
			</view>
			<!-- <view class="iconfont iconjiantou-01 fs-sm"></view> -->
		</view>
		<view class="gap"></view>
		<view class="goods-order-list w-full padding-lr-sm">
			<view class="shop dflex-b ">
				<view class="shop-check">
					<text class="shop-name">xxx学校xx年级xx班级</text>
				</view>
			</view>
			<view class="goods-cart w-full">
				<view class="goods-cont padding-tb" v-for="index in 1" :key="index">
					<my-goods :data="data">
						<view class="good-num">×1</view>
					</my-goods>
				</view>

			</view>
		</view>
		<!-- 金额明细 -->
		<view class="bg-main">
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1">总金额</view>
				<view class=""><text style="font-size: 24rpx;">￥</text>46.32</view>
			</view>
			<!-- <view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1">运费 (总重:4.960 kg )</view>
				<view class="ft-base">￥10.00</view>
			</view>
			
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="margin-right-xl">备注</view>
				<input class="flex1 padding-sm" type="text" v-model="order_desc" placeholder="请填写买家备注"
					placeholder-class="placeholder" />
			</view> -->
		</view>
		<view class="gap"></view>
		<my-gap :height="130" />
		<view class="submit-bar padding-sm dflex-b">
			<view class="submit-btn dflex-c background-gradient" @click="toBuy">立即下单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					src: '../../static/x0.jpg',
					title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
					spec: '180cm',
					price: '53.30'
				},
				show: false,
				value: '',
			}
		},
		methods: {
			sendTypeChange(v) {
				console.log(v)
			},
			onConfirm(v) {
				console.log('vvvvvvvvvvvvvvv', v)
				this.value = v.value
				this.show = false
			},
			onCancel() {
				this.show = false
			},
			toBuy() {
				uni.navigateTo({
					url: `/pages/order/orderPaid/orderPaid`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addr-label {
		padding: 6upx 0;
		border-radius: 3px;
		background-color: #F6390D;
		color: #fff;
		width: 120upx;
		text-align: center;
		flex-shrink: 0;
		margin-right: 14upx;
	}

	.order-spec {
		padding-bottom: 10upx;
	}

	.shop {
		padding-top: 20upx;
	}

	.goods-num {
		font-size: 16px;
		padding-left: 20upx;
	}

	.goods-cont {
		width: 100%;
		box-sizing: border-box;
	}

	.total-goods {
		font-size: 12px;
		color: #999;
	}

	.submit-bar {
		height: 130rpx;
		width: 100%;
		background-color: #FFF;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
		z-index: 10;

		.submit-btn {
			background-color: #0581FE;
			height: 100%;
			width: 100%;
			color: #FFF;
			font-size: 14px;
			// font-weight: 700;
			border-radius: 35upx;
		}
	}

	.good-num {
		font-size: 12px;
		padding-top: 40rpx;
	}
	.send-label{
		font-size: 14px;
		font-weight: 700;
	}
</style>