yanzong_qianduan/pages/news/recycling/order.vue

<template>
	<view class="order">
		<view class="order-navbar">
			<u-navbar title="订单详情" :background="background1" :border-bottom="false"></u-navbar>
		</view>
		<view class="order-hd">
			<view class="l">
				<view class="a">
					<view class="name">
						<image class="user" :src="$picUrl+'/static/news/icon-recycling-order-01.png'"></image>
						{{infor.username}}
						<text>{{infor.mobile}}</text>
					</view>
					
					<view class="address" v-if="infor &&infor.shipping_address">{{infor.shipping_address+infor.house_number}}</view>
					<!-- <image @click="copyOrderNumber(infor.mobile)" class="copy"
						:src="$picUrl+'/static/news/icon-recycling-order-02.png'"></image> -->
				</view>
				<view class="b">
					<image class="pic" :src="$picUrl+'/static/home/phone.jpg'"></image>
					<view class="info">
						<view class="name">名称：{{infor.recovery_name}}</view>
						<view class="name">品牌：{{infor.brand}}</view>
						<view class="price">期望价：￥<text>{{infor.expect_price}}</text></view>
					</view>
					<view class="num">x1</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="a">
				<image :src="$picUrl+'/static/news/icon-recycling-order-03.png'"></image>
				回收方式：<text>{{infor.recovery_type==10?'上门回收':infor.recovery_type==20?'门店回收':'邮寄回收'}}</text>
			</view>
			<view class="b">
				<view class="item">
					<view class="l">回收时间：</view>
					<view class="r">{{infor.server_time}}</view>
				</view>
				<view class="items" v-if="infor &&infor.images_list.length>0">
					<view class="l">商品图片：</view>
					<view class="r">
						<view class="pic">
							<image :src="i.external_url" v-for="i in infor.images_list" :key="i"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-bd" v-if="infor.shop_info">
			<view class="b">
				<view class="item">
					<view class="l">店铺名称：</view>
					<view class="r">{{infor.shop_info.shop_name}}</view>
				</view>
				<view class="item">
					<view class="l">店铺电话：</view>
					<view class="r">{{infor.shop_info.phone}}</view>
				</view>
				<view class="item">
					<view class="l">店铺地址：</view>
					<view class="r">{{infor.shop_info.full_address}}</view>
					<view class="m">
						<view class="li" @click="openPage(1)">
							<image :src="$picUrl+'/static/news/tel.png'"></image>电话
						</view>
						<view class="li" @click="openPage(2)">
							<image :src="$picUrl+'/static/news/address.png'"></image>导航
						</view>
					</view>
				</view>
				<view class="item">
					<view class="l">营业时间：</view>
					<view class="r">{{infor.shop_info.shop_hours}}</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="b">
				<view class="item">
					<view class="l">订单编号：</view>
					<view class="r">{{infor.order_no}}</view>
					<view class="m red" @click="copyOrderNumber(infor.order_no)">复制</view>
				</view>
				<view class="item">
					<view class="l">下单时间：</view>
					<view class="r">{{infor.create_time}}</view>
				</view>
				<!-- <view class="item">
					<view class="l">营业时间：</view>
					<view class="r">10:00-18:00</view>
				</view> -->
			</view>
		</view>
		<!-- 邮寄展示 -->
		<view class="order-bd" v-if="infor.recovery_type==30">
			<view class="b" @click="getExpressList()">
				<view class="item">
					<view class="l">物流公司：</view>
					<view class="r">
						<input type="text" disabled v-model="express_name" :placeholder="userInfo.user_type==40?'暂无物流公司':'请选择物流公司'"/>
					</view>
					<view class="m red" v-if="infor.express_no==''">
						<picker @change="changeOption" mode="selector" range-key="express_name" :value="index"
							:range="expressList">
							<u-icon style="color:#999" name="arrow-right" v-if="infor.order_status == 10&&userInfo.user_type != 40"></u-icon>
						</picker>
					</view>

				</view>
				<view class="item" v-if="infor.recovery_type==30">
					<view class="l">快递单号：</view>
					<view class="r">
						<input type="text" :disabled='infor.express_no||(userInfo.user_type == 40)?true:false' v-model="express_no"
							:placeholder="userInfo.user_type==40?'暂无物流单号':'请输入物流单号'" />
					</view>
					<view class="m red" @click="onSend" v-if="infor.express_no=='' && infor.order_status == 10&&userInfo.user_type != 40">
						<view class="btn">确认发货</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-bd" v-if="infor.remake">
			<view class="b" style="margin-top: 0;">
				<view class="item">
					<view class="l">留言：</view>
					<view class="r">{{infor.remake}}</view>
				</view>
			</view>
		</view>
		<view class="order-fd" v-if="infor.order_status==10">
			<view class="a" @click="openPage(1)">
				联系商家
			</view>
			<view class="b" @click="reservation">
				修改预约
			</view>
		</view>
		<u-mask :show="isShow" @click="isShow = false">
			<view class="order-dialog">
				<image class="pic" :src="$picUrl+'/static/news/icon-recycling-order-04.png'"></image>
				<view class="a">回收订单提交成功</view>
				<view class="b">感谢您对低碳环保做出的努力！</view>
				<view class="c">查看订单</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				isScroll: true,
				isShow: false,
				currentIndex: 0,
				background1: {
					background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`,
					backgroundSize: '100%',
				},
				recovery_id: '',
				order_id: '',
				infor: '',
				expressList: [],
				optionindex: -1,
				express_name: '',
				express_no: '',
				express_id: '',
				userInfo:''
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.isScroll = true;
			} else {
				this.isScroll = false;
			}
		},
		onLoad(op) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.order_id = op.order_id
			this.recovery_id = op.recovery_id
			this.getDetail();
		},
		methods: {
			reservation() {
				uni.navigateTo({
					url: "/pages/news/recycling/timer?shop_id=" + this.infor.shop_id + "&infor=" +
						encodeURIComponent(JSON.stringify(
							this.infor))
				})
			},
			copyOrderNumber(orderNumber) {
				uni.setClipboardData({
					data: orderNumber,
					success(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					},
					fail(err) {
						console.error('复制失败', err);
					}
				});
			},
			openPage(i, msg) {
				if (i == 1) { //电话
					uni.makePhoneCall({
						phoneNumber: this.infor.shop_info.phone
					})
				}
				if (i == 2) { //导航
					uni.openLocation({
						latitude: Number(this.infor.shop_info.latitude),
						longitude: Number(this.infor.shop_info.longitude),
						complete: function(res) {}
					});
				}
			},
			getExpressList() {
				this.expresshow = true
			},
			changeOption(e) {
				this.optionindex = e.detail.value
				this.express_name = this.expressList[e.detail.value].express_name;
				this.express_id = this.expressList[e.detail.value].express_id
			},
			getName(arr, id, idName, lableName) { //通过id获取数组名称
				if (id || id == '0') {
					const index = arr.findIndex((role) => role[idName] === id)
					return index >= 0 ? arr[index][lableName] : undefined
				} else {
					return undefined
				}
			},
			/**
			 * 物流
			 */
			async getExpressAll() {
				let {
					status,
					message,
					data
				} = await newFunApi.expressAll();
				if (status == 200) {
					this.expressList = data.list;
					if (this.infor.express_id && this.infor.express_no) {
						this.express_name = this.infor.express_name;
						this.express_no = this.infor.express_no;
						this.express_name = this.getName(this.expressList, this.infor.express_id, 'express_id',
							'express_name')
					}
				}
			},
			async onSend() {
				this.infor.express_id = this.express_id
				this.infor.express_no = this.express_no
				let {
					status,
					message,
					data
				} = await newFunApi.updateOrder(this.infor);
				if (status == 200) {
					this.getDetail();
				}
			},
			/**
			 * 获取详情
			 */
			async getDetail() {
				let {
					status,
					message,
					data
				} = await newFunApi.orderDetail({
					recovery_id: this.recovery_id,
					order_id: this.order_id
				});
				if (status == 200) {
					this.infor = data.detail;
					if (this.infor.recovery_type == 30) {
						this.getExpressAll()
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		padding: 0 0 150rpx;
		box-sizing: border-box;
		background: url(https://www.royaum.com.cn/static/news/login-bg.png?t=2) center top no-repeat;
		background-size: 100% auto;

		&-hd {
			overflow: hidden;

			.l {
				width: 694rpx;
				min-height: 276rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 30rpx;

				.a {
					overflow: hidden;
					.address{
						margin-left: 40rpx;
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #666;
					}
					.name {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						text {
							margin-left: 10rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #838383;
						}

						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.copy {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.b {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.pic {
						width: 182rpx;
						height: 146rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					.info {
						overflow: hidden;

						.name {
							width: 360rpx;
							font-size: 28rpx;
							font-weight: 400;
							white-space: nowrap;
						}

						.price {
							font-size: 24rpx;
							font-weight: 600;
							color: #F21A1C;

							text {
								font-size: 36rpx;
							}

							margin-top: 20rpx;
						}
					}

					.num {
						flex: 1;
						font-size: 28rpx;
						font-weight: 500;
						color: #1E1E1E;
						text-align: right;
					}
				}
			}
		}

		&-bd {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.a {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #7E7E7E;

				text {
					color: #1E1E1E;
					margin-left: 10rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.b {
				margin-top: 20rpx;

				.item {
					display: flex;
					align-items: flex-start;
					padding: 10rpx 0;

					.l {
						width: 140rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7E7E7E;
					}

					.r {
						flex: 1;
						font-size: 24rpx;
						font-weight: 400;
						color: #1E1E1E;
						max-width: 380rpx;

						input {
							font-size: 24rpx;
							color: #1E1E1E;
						}
					}

					.m {
						width: 120rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #F63016;
						font-size: 24rpx;

						.btn {
							width: 118rpx;
							height: 48rpx;
							border-radius: 8rpx;
							border: 1px solid #F83A13;
							text-align: center;
							line-height: 48rpx;
						}

						.li {
							flex: 1;
							font-size: 20rpx;
							font-weight: 400;
							color: #989898;
							text-align: center;

							image {
								width: 30rpx;
								height: 30rpx;
								display: block;
								margin: 0 auto;
								margin-bottom: 20rpx;
							}
						}
					}
				}

				.items {
					padding: 10rpx 0;

					.l {
						width: 140rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7E7E7E;
					}

					.r {
						width: 100%;
						overflow: hidden;
						margin-top: 5rpx;

						.pic {
							width: 110%;

							image {
								width: 150rpx;
								height: 150rpx;
								border-radius: 10rpx;
								margin-right: 10rpx;
								margin-top: 20rpx;
								float: left;
							}
						}
					}
				}
			}
		}

		&-fd {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 18rpx -4rpx 23rpx 0px rgba(0, 0, 0, 0.03);
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 200;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.a {
				text-align: center;
				width: 146rpx;
				line-height: 68rpx;
				background: #FFFFFF;
				border-radius: 76rpx;
				opacity: 1;
				border: 1px solid #D9D9D9;
				font-size: 24rpx;
				font-weight: 500;
				color: #828282;
				margin-right: 24rpx;
			}

			.b {
				width: 528rpx;
				line-height: 78rpx;
				background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
				border-radius: 78px;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		&-dialog {
			width: 537rpx;
			height: 414rpx;
			background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
			border-radius: 12rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -268rpx;
			margin-top: -207rpx;
			z-index: 2;
			text-align: center;
			padding-top: 100rpx;
			box-sizing: border-box;

			.pic {
				width: 112rpx;
				height: 128rpx;
				position: absolute;
				left: 50%;
				margin-left: -56rpx;
				top: -60rpx;
				z-index: 2;
			}

			.a {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

			.b {
				font-size: 28rpx;
				font-weight: 400;
				color: #727272;
				margin-top: 30rpx;
			}

			.c {
				width: 412rpx;
				line-height: 72rpx;
				background: #F55349;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 60rpx;
			}
		}
	}
</style>