Delivery-merchant/pages/Storesdetails.vue

<template>
	<view>
		<view class="titlenav">
			<!-- <titlenav :flag="true"></titlenav> -->
			<view class="top">
				<view class="title1">{{ !Show ? '等待骑手取餐' : '待接单' }}</view>
				<view class="title2">{{ !Show ? '备餐完成，等待骑手取餐···' : '请您尽快接单，为用户备餐···' }}</view>
			</view>
		</view>
		<view class="borderTop"></view>
		<view class="conBox">
			<!-- 判断外卖方式 -->
			<template v-if="!Show">
				<view class="address rider" @click="show2 = true">
					<view class="name">骑手</view>
					<view class="choice">
						<view class="text1">{{ name }}</view>
						<image class="right" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-28-15-55-07FUuECyGb.png" mode=""></image>
					</view>
				</view>
				<view class="Line"></view>
			</template>
			<view class="address address3">
				<view class="name">{{ !Show ? '配送地址' : '用户信息' }}</view>
				<view>
					<view class="text1" v-if="!Show">南京**江宁校区-4号宿舍楼</view>
					<view class="text1">奶盖 18789898888</view>
				</view>
			</view>
			<view class="address">
				<view class="name">{{ !Show ? '期望时间' : '自取时间' }}</view>
				<view class="text1 text2">{{ !Show ? '08:50送达' : '今天08:50' }}</view>
			</view>
			<view class="address address2">
				<view class="name">备注</view>
				<view class="text1 text2">{{ list.remark }}</view>
			</view>
			<view class="border2"></view>
			<view v-for="(item, index) in takeout" :key="index">
				<view class="store">
					<view class="title">
						<image class="imgBox1" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-03-15-53-18gjxoMYNY.png" mode=""></image>
						<view class="canteen">益禾堂(一食堂)</view>
					</view>
					<view class="store1">共{{ takeout.length }}件商品</view>
				</view>
				<view class="border"></view>
				<view class="content">
					<view class="ImgBox">
						<image class="ImgBox2" :src="item.image" mode=""></image>
						<view>
							<view class="name">{{ item.name }}</view>
							<view class="name1">共{{ item.num }}件</view>
						</view>
					</view>
					<view class="money">¥{{ item.price }}</view>
				</view>
			</view>
			<view class="order">
				<view class="text1">打包费</view>
				<view class="text2">¥{{ list.packPrice }}</view>
			</view>
			<view class="order order2">
				<view class="text1">配送费</view>
				<view class="text2">¥{{ list.distributionPrice }}</view>
			</view>
			<view class="text">
				<view class="text1">合计：</view>
				<view class="text2">¥{{ list.total }}</view>
			</view>
			<view class="border2"></view>
			<view class="box">
				<view class="box-con">
					<p>支付方式</p>
					<view class="text2">微信支付</view>
				</view>
			</view>
			<view class="box">
				<view class="box-con">
					<p>订单编号</p>
					<view class="text1">
						<span @click="orderCopy">复制</span>
						<view class="text2">{{ list.transactionId }}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-con">
					<p>下单时间</p>
					<view class="text2">{{ list.createdAt }}</view>
				</view>
			</view>
			<view class="box">
				<view class="box-con">
					<p>付款时间</p>
					<view class="text2">2021-05-20 07:52:36</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button block class="btn2" @click="submit">联系买家</u-button>
			<u-button block type="primary" @click="submit2">{{ !Show ? '联系骑手' : '接单' }}</u-button>
		</view>
		<u-popup v-model="show2" mode="bottom" border-radius="12">
			<view class="distribution">选择配送骑手</view>
			<u-cell-group>
				<view v-for="(item, index) in riderList" :key="index">
					<view class="conPup" @click="Addrider(item)">
						<view class="add">{{ item.name }} {{ item.phone }}</view>
					<!-- 	<image
							class="imgBox"
							:src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${item.rider ? '2021-09-29-15-24-20LcnkHdXx.png' : '2021-09-02-14-49-00OrkCuHPB.png'}`"
							mode=""
						></image> -->
					</view>
				</view>
			</u-cell-group>
			<view class="popupBor"></view>
			<view class="distribution text2" @click="show2 = false">取消</view>
		</u-popup>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: { Titlenav },
	data() {
		return {
			takeout: [],
			name: '郝贞伟',
			show: false,
			show2: false,
			riderList: [
				{
					name: '郝贞伟',
					phone: '18789898888',
					id: 1
				},
				{
					name: '张三',
					phone: '110',
					id: 2
				},
				{
					name: '李四',
					phone: '120',
					id: 3
				}
			],
			list: {
				transactionId: '2019052035464',
				createdAt: '2021-09-03 14:18:26',
				remark: '麻烦送到宿舍楼下的桌子上',
				packPrice: '2',
				distributionPrice: '2',
				total: '15',
				lists: [
					{
						price: '11',
						name: '寿司',
						id: 2,
						num: '1',
						image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.show = option.status;
	},
	computed: {
		...mapState(['systemInfo']),
		Show() {
			if (this.show == 'false') {
				return false;
			} else {
				return true;
			}
		}
	},
	methods: {
		Addrider(item) {
			this.name = item.name;
			this.show2 = false;
		},
		orderCopy() {
			uni.setClipboardData({
				data: this.list.transactionId + '',
				success(res) {
					uni.getClipboardData({
						success(res) {
							uni.showToast({
								title: '复制成功'
							});
						}
					});
				}
			});
		}
	},
	created() {
		this.takeout = this.list.lists;
	}
};
</script>
<style lang="scss" scoped>
.titlenav {
	background: #214bbe;
	height: 102px;
	.top {
		text-align: center;
		.title1 {
			font-size: 24px;
			font-weight: bold;
			color: #ffffff;
			line-height: 34px;
			padding: 10px 0 8px;
		}
		.title2 {
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			line-height: 24px;
		}
	}
}
.borderTop {
	height: 5px;
	background: #f5f7fa;
}
/deep/ .u-btn {
	width: 162px;
	height: 48px;
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	border-radius: 4px;
}
/deep/ .uni-scroll-view {
	min-height: 200px;
	border-radius: 12px 12px 10px 10px;
	.distribution {
		margin: 20px 0;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		color: #c9c9c9;
		line-height: 24px;
		&.text2{
			font-size: 17px;
			color: #000000;
		}
	}
	.popupBor{
		height: 8px;
		background: #F2F2F2;
	}
	.conPup {
		height: 56px;
		line-height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		border-bottom: 1px solid #f5f7fa;
		.add {
			font-size: 16px;
			font-weight: 400;
			color: #000000;
			line-height: 22px;
			margin-left: 6px;
		}
		.imgBox {
			width: 24px;
			height: 24px;
		}
	}
}
.btn {
	display: flex;
	align-items: center;
	position: fixed;
	justify-content: space-between;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 6px 20px;
	padding-bottom: 34px;
	padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
	padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
	background-color: #ffffff;
	.btn2 {
		color: #214bbe;
	}
}
.conBox {
	// padding-top: 50px;
	padding-bottom: 150px;
	.store {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		.title {
			display: flex;
			align-items: center;
			.imgBox1 {
				width: 18px;
				height: 18px;
			}
			.canteen {
				font-size: 14px;
				color: #000000;
				line-height: 24px;
				font-weight: 400;
				padding-left: 6px;
			}
		}
		.store1 {
			font-size: 14px;
			font-weight: 400;

			color: #ff6c00;
			line-height: 24px;
		}
	}
	.border {
		padding: 0 16px;
		border-bottom: 1px solid #f5f7fa;
		margin: 10px 16px 16px;
	}
	.content {
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
		margin-bottom: 16px;
		.ImgBox {
			display: flex;
			.ImgBox2 {
				width: 80px;
				height: 80px;
				border-radius: 8px;
				margin-right: 18px;
			}
			.name {
				font-size: 14px;
				font-weight: bold;
				line-height: 24px;
				color: #1c1c1c;
			}
			.name1 {
				font-size: 14px;
				font-weight: 400;
				color: #c8c9cc;
				line-height: 24px;
			}
		}
		.money {
			font-size: 16px;
			font-weight: bold;
			color: #1c1c1c;
			line-height: 26px;
		}
	}
	.order {
		margin-bottom: 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		.text1 {
			font-size: 13px;
			font-weight: 400;
			color: #939599;
			line-height: 24px;
		}
		.text2 {
			font-size: 13px;
			font-weight: 400;
			line-height: 22px;
			color: #1c1c1c;
		}
		&.order2 {
			margin-bottom: 14px;
		}
	}
	.text {
		display: flex;
		align-items: center;
		padding-right: 16px;
		place-content: flex-end;
		font-weight: bold;
		.text1 {
			font-size: 14px;
			color: #c8c9cc;
			line-height: 24px;
		}
		.text2 {
			font-size: 16px;
			color: #000000;
			line-height: 26px;
		}
	}
	.border2 {
		height: 5px;
		margin: 18px 0 20px;
		background: #f5f7fa;
	}
	.Line {
		height: 5px;
		margin-top: 18px;
		background: #f5f7fa;
	}
	.address {
		display: flex;
		justify-content: space-between;
		margin-bottom: 35px;
		padding: 0 16px;
		.choice {
			display: flex;
			align-items: center;
			.text1 {
				font-size: 16px;
				font-weight: 400;
				color: #214bbe;
				line-height: 24px;
			}
			.right {
				width: 12px;
				height: 24px;
				margin-left: 6px;
			}
		}
		.name {
			font-size: 14px;
			font-weight: bold;
			color: #000000;
			line-height: 20px;
		}
		.text1 {
			text-align: right;
			font-size: 16px;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			&.text2 {
				color: #ff7f1f;
			}
		}
		&.address2 {
			margin-bottom: 0;
		}
		&.rider {
			margin-bottom: 0;
			margin-top: 18px;
		}
		&.address3 {
			margin-top: 15px;
		}
	}
	.box {
		margin-bottom: 16px;
		padding: 0 16px;
		.box-con {
			align-items: center;
			display: flex;
			justify-content: space-between;
			.text1 {
				display: flex;
				span {
					width: 38px;
					height: 18px;
					border-radius: 2px;
					border: 1px solid #c8c9cc;
					font-size: 12px;
					font-weight: 400;
					color: #c8c9cc;
					line-height: 18px;
					text-align: center;
					margin-right: 3px;
				}
			}
			p {
				font-size: 13px;
				font-weight: 400;
				color: #939599;
				line-height: 24px;
			}
			.text2 {
				height: 22px;
				font-size: 13px;
				font-weight: 400;
				color: #000000;
				line-height: 22px;
			}
		}
	}
}
</style>