high-mini/qianzhu-KFC/order-details/order-details.vue

<template>
	<view>
		<view class="width100 height220 headsbg backcorfff fotct">
			<view class="height20"></view>
			<view class="headstu"></view>
			<view class="width100  font18 colorc72 mart5">待支付</view>
			<view class="width100  font14 fcor666 mart5">若超时未支付,订单将自动取消</view>
			<view class="stubtn mart15">立即支付</view>
		</view>
		<!-- <view class="width96 mart20 colorc3 font12 fotct">
			注:约5分钟后取餐,请尽快到餐厅取餐哦
		</view> -->

		<view class="concont width94 mart10 backcorfff">
			<view class="width94 paddtop10 font14">
				餐品明细
			</view>
			<view class="width100 bor-botm1 mart10 marb10"></view>
			<view class="width100">
				<view class="width100 alijusstart mart10 bor-botm1" v-for="(item,index) in orderList" :key="index">
					<view class="width30">
						<image src="../static/imgs/kfc2.png" mode="widthFix" class="width100"></image>
					</view>
					<view class="width40 font13 fcor666">香辣鸡腿堡</view>
					<view class="width10 font12 fcor999">x1</view>
					<view class="width20">
						<view class="width100 fcor333 font12">¥<text class="fontwig6 font16">16.8</text></view>
						<view class="width100 fcor999 font12" style="text-decoration: line-through;">¥17.8</view>
					</view>
				</view>
				<view class="width90 fotrt height50 font13 fcor999">
					共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> 1 </text> 件 小计: <text
						class="font16 colorc3 fontwig6 margle"> ¥16.8</text>
				</view>
			</view>
		</view>

		<view class="concont width94 mart10 backcorfff marb30">
			<view class="width94 alijusstart paddtop10 font14 fcor666">
				订单信息
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">取餐门店</view>
				<view class="width70 fotrt">时代天街时代天街时代天街时代天街</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">订单号</view>
				<view class="width70 fotrt">2901012002828228288482828</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">就餐方式</view>
				<view class="width70 fotrt">店内就餐</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">支付方式</view>
				<view class="width70 fotrt">未支付</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">联系方式</view>
				<view class="width70 fotrt">15583253627</view>
			</view>

			<view class="width94 alijusend mart20 font14 fcor666 paddbotm20">
				<view class="canbtn height30 marRight20">取消订单</view>
				<view class="canbtn height30">联系客服</view>
			</view>
		</view>
		<view class="width90 mart10 font13 fcor666">友情提示</view>
		<view class="width90 mart10 font12 fcor999">1、如遇到商品售罄，将导致您无法取到所定食物，系统将自动为您安排退款，1个工作日内到账；</view>
		<view class="width90 mart5 font12 fcor999 marb40">2、如遇更多问题，请及时联系在线客服处理。</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [1],
				sttypeid: 1
			}
		},
		methods: {
			//选择方式
			changedissr(item) {
				this.sttypeid = item;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headstu {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #faf1f1;
		color: #c72a20;
		margin-left: 40%;
		border: 1px solid #c72a20;
	}

	.stubtn {
		background-color: #c72a20;
		width: 30%;
		height: 35px;
		line-height: 35px;
		border-radius: 25px;
		color: #ffffff;
		margin-left: 35%;
	}

	.colorc72 {
		color: #c72a20;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.concont {
		border-radius: 12px;
	}

	.footbtn {
		bottom: 0px;
		position: fixed;
	}

	.btnpay {
		width: 90px;
		background-color: #c72a20;
		border-radius: 22px;
		height: 36px;
		line-height: 36px;
	}

	.takemode {
		width: 48%;
		border-radius: 5px;
		border: 1px solid #999999;
	}

	.aftermode {
		background-color: #faf1f1;
		color: #c72a20;
	}

	.canbtn {
		border: 1px solid #313131;
		color: #333333;
		width: 80px;
		border-radius: 25px;
		text-align: center;
	}
</style>