qzw_xcx/pages/myOrder/order.vue

<template>
	<van-skeleton :loading="loading">
		<view class="cart-list">
			<view style="padding: 0 36upx;line-height: 70upx; border-bottom: 14upx solid #F5F5F5; border-top: 1px solid #F5F5F5;">
				<span>{{ detail.status }}</span>
			</view>
			<view class="adress">
				<view class="adressDetail">{{ detail.reciver_info.mob_phone }}</view>
				<view>{{ detail.reciver_info.address }}</view>
			</view>
			<view @click="goStore" style="padding: 30upx 36upx 15upx 36upx;border-bottom: 1px solid #F5F5F5;">
				<image
					:src="pictureUrl + '/uploads/home/store/' + detail.store_id + '/' + detail.store_avatar"
					style="border-radius: 50%; width: 50upx;height: 50upx;vertical-align: middle;"
				></image>
				<span style="padding-left: 16upx;">{{ detail.store_name }}</span>
			</view>

			<view class="shoplist" v-for="(items, index) in detail.goods" :key="index">
				<view @click="goDetail(items)">
					<van-card
						title-class="changewidth"
						price-class="priceClass"
						:price="items.goods_price"
						:desc="items.descire"
						:title="items.desarray"
						:thumb="pictureUrl + '/uploads/home/store/goods/' + items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
					></van-card>
				</view>
				<view style="clear:both;width: 100%;overflow: hidden;padding: 20rpx 0;">
					<view class="retungood" v-if="detail.status == '已收货' && items.status == 2" @click="goreturngood(items)">退货退款</view>
					<view class="retungood" v-if="detail.status == '已收货' && items.status == 4" @click="goreturndetail(items.or_id)">退款成功</view>
					<view class="retungood" v-if="detail.status == '已收货' && items.status == 3" @click="goreturndetail(items.or_id)">退款申请中</view>
				</view>
			</view>
			<view class="topTip">
				<view style="padding-right: 20upx;">运费: {{ detail.shipping_fee }}</view>
				<view style="font-size: 28upx;">合计：{{ detail.order_amount }}</view>
			</view>
			<view style="padding: 18upx 36upx;">
				订单编号:
				<text class="orderCode">{{ detail.order_sn }}</text>
			</view>

			<view
				v-if="detail.shipping_code != ''"
				style="margin: 20upx 0;
				  padding: 10upx 0 0upx 32upx;
	              border-top: 16upx solid #F5F5F5;
				  border-top: 16upx solid #F5F5F5;"
			>
				<view>
					快递单号:
					<text style="font-weight: 500;padding-left:16upx;" class="time">{{ detail.shipping_code }} ({{ detail.express_name }})</text>
				</view>
			</view>

			<view class="adressbottom">
				<view>
					下单时间:
					<text style="font-weight: 500;" class="time">{{ detail.add_time }}</text>
				</view>
				<view>
					支付订单:
					<text class="time" v-if="detail.order_state == 10 || detail.order_state == 0">未支付</text>
					<text class="time" v-else>{{ detail.payment_time }}</text>
				</view>
				<view>
					商家发货:
					<text class="time" v-if="detail.order_state == 10 || detail.order_state == 0 || detail.order_state == 20 || detail.order_state == 60">未发货</text>
					<text class="time" v-else>{{ happenTimeFun(detail.shipping_time) }}</text>
				</view>
				<view>
					确认收货:
					<text
						class="time"
						v-if="detail.order_state == 10 || detail.order_state == 0 || detail.order_state == 20 || detail.order_state == 30 || detail.order_state == 60"
					>
						未确认
					</text>
					<text class="time" v-else>{{ detail.finnshed_time }}</text>
				</view>
			</view>

			<view class="adressbutton">
				<view class="buttonStatus">
					<view @click="returnmoney()" v-if="detail.order_state == 20" class="deleteOrder">退款</view>
					<view @click="reminder(1)" v-if="detail.order_state == 20 && detail.shipping_type == 0" class="deleteOrder">催单</view>
					<view @click="reminder(2)" v-if="detail.order_state == 20 && detail.shipping_type == 1" class="deleteOrder">联系酒店</view>

					<view @click="cancelOrder(1)" v-if="detail.order_state == 10" class="deleteOrder">取消订单</view>
					<view class="payOrder" v-if="detail.order_state == 10" @click="goPay(detail)">去付款</view>
					<view v-if="detail.status == '已发货'" @click="cancelOrder(3)" class="deleteOrder">确认收货</view>
					<view
						v-if="(detail.status == '已收货' && detail.evaluation_state == 0) || (detail.status == '已完成' && detail.evaluation_state == 0)"
						@click="estimate"
						class="deleteOrder"
					>
						去评价
					</view>
					<view
						v-if="(detail.order_state == 40 && detail.evaluation_state == 1) || detail.status == '已取消' || detail.status == '退款关闭'"
						@click="cancelOrder(2)"
						class="deleteOrder"
					>
						删除订单
					</view>
				</view>
			</view>
			<Dialog :orderCancel="orderCancel" :titles="titles" @colseDialog="cancelDialog" @confirmPay="confirmOrder" />

			<view class="openSelect" v-if="radioShow">
				<view class="openSelectTitle">请选择退款的理由</view>
				<van-radio-group :value="radio" @change="onChange">
					<van-cell-group>
						<van-cell :title="item.name" clickable :data-name="item.value" @click="onClick" v-for="(item, index) in radioItems" :key="index">
							<van-radio checked-color="#E72028" slot="right-icon" :name="item.value" />
						</van-cell>
					</van-cell-group>
				</van-radio-group>
				<van-field :value="textarea" @change="changatextarea" type="textarea" placeholder="请输入退款理由" v-if="radio == 5" />
				<view class="flex-box btns">
					<view class="flex-1" @click="cancelDialog2()">取消</view>
					<view class="flex-1" @click="confirmOrder2()">确定</view>
				</view>
			</view>
		</view>
		<view class="weui-mask" v-if="radioShow"></view>
	</van-skeleton>
</template>

<script>
import Dialog from '@/component/Dialog.vue';
export default {
	components: {
		Dialog
	},
	data() {
		return {
			firstloading: 0,
			loading: true,
			isreturn: false,
			isCancel: false,
			isDelete: false,
			isGet: false,
			titles: '',
			pictureUrl: this.pictureUrl,
			orderCancel: false,
			detail: {},
			id: '', // 订单id
			radioShow: false,
			radio: 1,
			radioItems: [
				{ name: '拍错/多拍/不想要', value: 1 },
				{ name: '协商一致退货', value: 2 },
				{ name: '缺货', value: 3 },
				{ name: '未按约定时间发货', value: 4 },
				{ name: '其他', value: 5 }
			],
			textarea: ''
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.getDetail();
		// 刷新订单详情
		uni.$on('refshlist', e => {
			this.getDetail();
		});
	},
	methods: {
		changatextarea(e) {
			this.textarea = e.detail;
		},
		onChange(event) {
			this.radio = event.detail;
		},
		onClick(event) {
			const { name } = event.currentTarget.dataset;
			this.radio = name;
		},
		goStore() {
			let id = this.detail.store_id;
			uni.navigateTo({
				url: `/pages/index/hotel?id=${id}`
			});
		},
		happenTimeFun(num) {
			//时间戳数据处理
			let date = new Date(num * 1000);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? '0' + MM : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? '0' + d : d; //天补0
			let h = date.getHours();
			h = h < 10 ? '0' + h : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? '0' + m : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? '0' + s : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日
			//return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
		},

		goDetail(e) {
			let id = e.goods_commonid;
			let store_id = e.store_id;
			uni.navigateTo({
				url: `/pages/index/shop?id=${id}&store_id=${store_id}`
			});
		},
		// 退货退款
		goreturngood(item) {
			item.statusremak = this.detail.status;
			item.order_id = this.id;
			item.store_avatar = this.detail.store_avatar;
			item.store_name = this.detail.store_name;
			item.order_sn = this.detail.order_sn;
			let id = JSON.stringify(item);
			uni.navigateTo({
				url: `/pages/myOrder/returngood?id=${id}` // 退货页面
			});
		},
		// 退款详情
		goreturndetail(e) {
			let id = e;
			uni.navigateTo({
				url: `/pages/myOrder/returndetail?id=${id}` // 退货详情页面
			});
		},
		getDetail() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.request({
				url: '/v2/order/info',
				method: 'post',
				data: {
					order_id: this.id
				},
				success: res => {
					let { data } = res.data;
					data.goods.forEach((items, index) => {
						let arr = items.goods_name.split(' ');
						items.desarray = arr[0];
						items.descire = items.goods_name.replace(arr[0], '');
					});
					this.detail = data;
					uni.hideLoading();
					if (this.firstloading == 0) {
						this.loading = false;
					}
					this.firstloading = 1;
				}
			});
		},

		// 退款
		returnmoney() {
			this.isreturn = true;
			this.radioShow = true;
		},
		// 取消订单
		cancelOrder(e) {
			if (e == 1) {
				this.titles = '确认取消订单？';
				this.isCancel = true;
			} else if (e == 3) {
				this.titles = '确认收货？';
				this.isGet = true;
			} else if (e == 4) {
				this.titles = '确定退款?';
				this.isreturn = true;
			} else {
				this.titles = '确认删除订单？';
				this.isDelete = true;
			}
			this.orderCancel = true;
		},
		cancelDialog() {
			this.orderCancel = false;
			this.isreturn = false;
			this.isCancel = false;
			this.isDelete = false;
			this.isGet = false;
		},

		cancelDialog2() {
			this.radioShow = false;
			this.isreturn = false;
			this.textarea = '';
			this.radio = 1;
		},
		confirmOrder2() {
			var str = this.radioItems[this.radio - 1].name;
			var data = { order_id: this.id };
			data.remark = str;
			if (this.radio == 5) {
				console.log(this.textarea);
				if (!this.textarea) {
					this.$msg('请输入退款理由');
					return false;
				} else {
					data.remark = this.textarea;
				}
			}
			this.request({
				url: '/v3/Order/refund_direct',
				method: 'post',
				data: data,
				success: res => {
					if (res.data.code == 1000) {
						uni.$emit('refehlist');
						if (this.isreturn) {
							this.cancelDialog2();
							this.getDetail();
						}
					} else {
						this.$msg(res.data.msg);
						this.cancelDialog2();
					}
				}
			});
		},

		confirmOrder() {
			let url = '';
			var data = { order_id: this.id };
			this.orderCancel = false;
			// 取消
			if (this.isCancel) {
				url = '/v2/order/cancel';
			} else if (this.isDelete) {
				// 删除
				url = '/v2/order/drop';
			} else if (this.isGet) {
				// 收货
				url = '/v2/order/confirm';
			}
			this.request({
				url: url,
				method: 'post',
				data: data,
				success: res => {
					if (res.data.code == 1000) {
						if (this.isDelete) {
							this.$msg('删除成功');
						} else if (this.isGet) {
							this.$msg('收货成功');
						} else if (this.isCancel) {
							this.$msg('取消成功');
						}
						uni.$emit('refehlist');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						this.$msg(res.data.msg);
					}
				}
			});
		},
		goPay(e) {
			let prices = this.detail.order_amount;
			let order_id = this.id;
			let store_id = e.store_id;
			let isform = 1;
			uni.navigateTo({
				url: `/pages/myOrder/paymoment?order_id=${order_id}
					&prices=${prices}&isform=${isform}&store_id=${store_id}`
			});
		},

		// 催单
		reminder(e) {
			let a = e;
			let order_id = this.id;
			uni.navigateTo({
				url: `/pages/myOrder/reminder?order_id=${order_id}&a=${a}`
			});
		},

		// 评价晒单
		estimate() {
			let order_id = this.id;
			uni.navigateTo({
				url: `/pages/myOrder/estimate?order_id=${order_id}`
			});
		}
	}
};
</script>

<style lang="scss">
.openSelectTitle {
	padding: 30upx;
	color: #999;
}
.weui-mask {
	position: fixed;
	z-index: 998;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	// display: none;
}
.openSelect {
	position: absolute;
	position: fixed;
	left: 10%;
	right: 10%;
	background-color: #fff;
	border-radius: 10px;
	z-index: 999;
	top: 20%;
	// display: none;
}
.btns view {
	text-align: center;
	padding: 30upx;
	color: #222;
}
.btns view:nth-child(2) {
	border-left: 1px solid #f1f1f1;
	color: #d60e15;
}
.tkText {
	padding: 0 20upx 20upx 20upx;
	color: #ccc;
}
page {
	background-color: #f5f5f5;
}
.cart-list {
	background-color: #fff;
}

.topTip {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20upx 36upx;
}
.changewidth {
	color: #303133;
	font-size: 32upx;
	font-weight: 100 !important;
}
.priceClass {
	color: #303133 !important;
	font-weight: normal !important;
	font-size: 36upx;
}
.van-card {
	background-color: #fff !important;
}
.shoplist {
	padding: 10upx 32upx;
	border-bottom: 1px solid #f5f5f5;
	// display: flex;
	// justify-content: space-between;
	// align-items: center;
}
.retungood {
	text-align: right;
	padding: 0upx 32upx;
	float: right;
	border: 1px solid #666;
	//margin-right: 32upx;
}
.adress {
	padding: 35upx 36upx;
	border-bottom: 14upx solid #f5f5f5;
}
.adressDetail {
	padding: 15upx 0;
}
.orderCode {
	padding-left: 15upx;
	font-weight: 500;
}
.adressbottom {
	padding: 0 36upx;
	color: #606266;
	border-top: 16upx solid #f5f5f5;
	padding-bottom: 32upx;
	margin-bottom: 100upx;
	view {
		padding: 32upx 0 0 0;
	}

	.time {
		padding-left: 16upx;
	}
}
.adressbutton {
	position: fixed;
	bottom: 0;
	width: 100%;
	.buttonStatus {
		display: flex;
		text-align: center;
		.deleteOrder {
			flex: 1;
			color: #303133;
			font-size: 32upx;
			background-color: #fff;
			padding: 25upx 0;
		}
		.payOrder {
			flex: 1;
			font-size: 32upx;
			color: #fff;
			background-color: #d9332e;
			padding: 10px 0;
		}
	}
}
</style>