gubersail-shop-app/pages/me/orderDetails.vue

<template>
	<view>
		<view class="contentBox" @click="expressageClick(form)">
			<view style="width: 100%;margin: 0 auto;">
				<u-cell-group :border="false">
					<u-cell :border="false" center title="快递信息" arrow-direction="down">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #E75F37;"></view>
					</u-cell>
				</u-cell-group>
				<!-- <view class="textBox">
					<view>快递公司:</view>
					<view>{{form.logisticsCorpName || ''}}</view>
				</view>
				<view class="textBox">
					<view>快递单号:</view>
					<view>{{form.expressNo || ''}}</view>
				</view> -->
				<view class="textBox">
					<view>收货人:</view>
					<view>{{form.contacts}}</view>
				</view>
				<view class="textBox">
					<view>收货地址:</view>
					<view>{{form.recAddress || ''}}</view>
				</view>
				<view class="textBox">
					<view>货运编号:</view>
					<view>{{form.expressNo || ''}}</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view style="width: 100%;margin: 0 auto;">
				<u-cell-group :border="false">
					<u-cell :border="false" center title="订单信息" arrow-direction="down">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #E75F37;"></view>
					</u-cell>
				</u-cell-group>
				<view class="textBox">
					<view>订单编号:</view>
					<view>{{form.srcOrdNo}}</view>
				</view>
				<view class="textBox">
					<view>下单时间:</view>
					<view>{{form.createTime}}</view>
				</view>
				<view class="textBox">
					<view>商品金额:</view>
					<view>{{form.salesAmount}}</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<u-cell-group :border="false">
				<u-cell :border="false" center title="商品信息" arrow-direction="down">
					<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #E75F37;"></view>
				</u-cell>
			</u-cell-group>
			<u-cell v-for="(item,index) in form.orderItemsList" :key="index"
				:border="form.orderItemsList.length == Number(index+1)?false:true">
				<view slot="label">
					<u-row>
						<u-col span="2.9">
							<u--image :showLoading="true" mode='aspectFit'
								:src="item.url"
								width="150rpx" height="150rpx" radius="10">
							</u--image>
						</u-col>
						<u-col span="9.1">
							<view
								style="font-size: 36rpx;width: 500rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
								{{item.goodsName}}
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="color: #707070;">单价:￥{{item.price}}</view>
								<view style="color: #707070;">
									数量:{{item.goodsNum?parseFloat(item.goodsNum):''}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="color: #707070;">金额:￥{{item.totalAmount}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-cell>
		</view>
		<view class="contentBox">
			<view style="width: 100%;margin: 0 auto;">
				<u-cell-group :border="false">
					<u-cell :border="false" center title="付款信息" arrow-direction="down">
						<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #E75F37;"></view>
					</u-cell>
				</u-cell-group>
				<view class="textBox">
					<view>本次付款:</view>
					<view>{{form.totalMoney}}</view>
				</view>
			</view>
		</view>
		<view style="display: flex;">
<!--			<debounce-button v-if="form.status=='已发货'" size="mini" style="width: 250rpx;" bgColor='#FFF1E6' color='#03803B'>确认收货</debounce-button>-->
			<debounce-button v-if="form.status=='已收货'||form.status=='已取消'||form.status=='申请退货'"  size="mini" style="width: 250rpx;" bgColor='#e43d33'>申请退货</debounce-button>
		</view>
	</view>
</template>

<script>
	import {
		appDetail,
		appShareDetail,
		checkOrder,
		appUpdate
	} from '@/api/me/myOrder.js'
	export default {
		data() {
			return {
				order: "",
				isDisabled: true,
				form: {
					orderItemsList: []
				},
				roleaName: '', // 用户权限
			}
		},
		onLoad(onLoad) {
			// 获取当前登录人的用户信息
			this.roleaName = uni.getStorageSync('userInfo').role_name
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			let _this = this
			if (uni.getStorageSync('whether_openShare') == 1) {
				appShareDetail({
					id: onLoad.id
				}).then(res => {
					this.form = res.data
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			} else {
				appDetail({
					id: onLoad.id
				}).then(res => {
					this.form = res.data
					this.form.orderItemsList.map(item => {
						item.totalAmount = item.price * item.goodsNum
					})

					if (this.form.status == '已发货') {
						_this.isDisabled = true;
						_this.order = "确认收货";
					} else if (this.form.status == '录入' || this.form.status == '退款中' || this.form.status ==
						'已取消' ||
						this.form.status == '退款请核' || this.form.status == '待发货' || this.form.status == '待确认') {
						_this.order = "申请退款";
						_this.isDisabled = true;
					} else {
						_this.isDisabled = false;
					}
					if (this.form.status == '退款请核') {
						_this.isDisabled = false
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			}
		},
		methods: {
			confirmReceipt() {
				console.log(1);
			},
			// 快递信息点击事件
			expressageClick(form) {
				if (form.shipType === '快递') {
					let reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
					let from = '';
					let to = '';
					// 出发城市
					if (form.shippingAddress != null) {
						let fromList = form.shippingAddress.match(reg);
						for (var i = 0; i < fromList.length; i++) {
							from += fromList[i]
							if (fromList.length - 1 > i) {
								from += '-'
							}
						}
					}
					// 目的城市
					if (form.recAddress != null) {
						let toList = form.recAddress.match(reg);
						for (var i = 0; i < toList.length; i++) {
							to += toList[i]
							if (toList.length - 1 > i) {
								to += '-'
							}
						}
					}
					// 地点
					let city = '';
					if (from != '') {
						city += '&from=' + from;
					}
					if (to != '') {
						city += '&to=' + to;
					}
					// com: '查询的快递公司的编码',
					// num: '查询的快递单号',
					// phone: '收件人或寄件人的手机号或固话',
					// from: '出发地城市，省-市-区',
					// to: '目的地城市，省-市-区'

					// url: './transportation?id=' + form.id +'&com=' + form.courierCorporation + '&num=' + form.courierNumber +
					// 	'&phone=' + form.corpTel + city
					// uni.navigateTo({
					// 	url: './transportation?id=' + form.id +
					// 		'&com=shentong&num=773236818683545&phone=15568850829&to=山东省-青岛市-李沧区'
					// });

					uni.navigateTo({
						url: './transportation?id=' + form.id + '&com=' + form.logisticsCorpId + '&num=' + form
							.expressNo +
							'&phone=' + form.phone + city
					});
				}
			},
			//申请退款按钮
			requestRefund() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: "确认退款?",
					success: function(rest) {
						if (rest.confirm) {
							uni.showLoading({
								title: '退款中',
								mask: true
							});

							checkOrder({
								id: _this.form.id,
								pageLabel: "销售订单",
								pageStatus: "this.$store.getters.domSaleStatus",
								url: "/tirePartsMall/salesManagement/saleOrder/index",
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: '提交申请成功',
									mask: true
								});
								setTimeout(function() {
									// appDetail({
									// 	id: res.data.id
									// }).then(res => {
									// 	this.form = res.data
									// 	console.log(this.form);
									// }).catch(err => {
									// 	uni.hideLoading();
									// })
									if (res.code == 200) {
										_this.isDisabled = false
									}
									uni.hideLoading();
								}, 1000);
							})
						}
					}
				})
			},
			orderClosing() {
				console.log(123);

				if (this.order == "申请退款") {
					this.requestRefund()
					// uni.showLoading({
					// 	title: '退款中',
					// 	mask: true
					// });
					// checkOrder({
					// 	id: this.form.id,
					// 	pageLabel: "销售订单",
					// 	pageStatus: "this.$store.getters.domSaleStatus",
					// 	url: "/tirePartsMall/salesManagement/saleOrder/index",
					// }).then(res => {
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: '提交申请成功',
					// 		mask: true
					// 	});
					// 	let _this = this
					// 	setTimeout(function() {
					// 		// appDetail({
					// 		// 	id: res.data.id
					// 		// }).then(res => {
					// 		// 	this.form = res.data
					// 		// 	console.log(this.form);
					// 		// }).catch(err => {
					// 		// 	uni.hideLoading();
					// 		// })
					// 		if (res.code == 200) {
					// 			_this.isDisabled = false
					// 		}
					// 		uni.hideLoading();
					// 	}, 1000);
					// })
				} else {
					//确认收货
					let this_ = this
					uni.showModal({
						title: '提示',
						content: "是否确认收货",
						success: function(rest) {
							if (rest.confirm) {
								// 用户点击了确认按钮
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								appUpdate({
									id: this_.form.id,
								}).then(res => {
									uni.showToast({
										icon: "none",
										title: '确认收货成功',
										mask: true
									});
									let _this = this
									setTimeout(function() {
										// appDetail({
										// 	id: res.data.id
										// }).then(res => {
										// 	this.form = res.data
										// 	console.log(this.form);
										// }).catch(err => {
										// 	uni.hideLoading();
										// })
										if (res.code == 200) {
											this_.isDisabled = false
										}
										uni.hideLoading();
									}, 1000);
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		width: 96%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		// box-shadow: 0 5rpx 14rpx 0 rgba(101, 176, 249, 0.42);
		// padding-top: 15rpx;
		padding-bottom: 10rpx;
	}

	.textBox {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		align-items: flex-end;
	}
</style>