zhengbasai/pages/gift/record_detail.vue

<template>
	<div class="order_detail">
		<div class="address_card">
			<div class="top">
				<image src="@/static/images/gift/local.png" mode="" class="icon"></image>
				<div>下单地址</div>
			</div>
			<div class="address">
				{{detail.sjr_name}}，{{detail.sjr_mobile}}，{{detail.sjr_address_province}}{{detail.sjr_address_city}}{{detail.sjr_address_area}}{{detail.sjr_address}}
			</div>
		</div>
		<div class="order">
			<div class="btn" v-if="detail.status==1">
				<div class="btn_item change_address" @click="changeAddress">更改地址</div>
				<div class="btn_item zuofei" @click="handleZF">作废</div>
			</div>
			<div class="order_detail">
				<div class="tag zuofei" v-if="detail.status==0">已作废</div>
				<div class="tag wait" v-if="detail.status==1">待审核</div>
				<div class="tag wait_fh" v-if="detail.status==2">待发货</div>
				<div class="tag all_fh" v-if="detail.status==3">待收货</div>
				<div class="tag complate" v-if="detail.status==4">已完成</div>
				<div class="time">下单时间：{{detail.order_time}}</div>
				<div class="time">订单编号：{{detail.order_no}}</div>
				<div class="goods" v-for="item in detail.goods" :key="item.id">
					<div class="icon">
						<image :src="item.good ? item.good.cover :'--'" mode="" class="icon"></image>
					</div>
					<div class="right">
						<div class="name">{{item.good ? item.good.name :'--'}}</div>
						<div class="btn">
							<div class="num">数量：{{item.nums}}</div>
							<div class="jifen">-{{item.jifen}}<span style="font-size: 12px;">积分</span></div>
						</div>
					</div>
				</div>
				<div class="zongji">
					<div>商品种类：<span>{{detail.goods ? detail.goods.length :0}}</span></div>
					<div>商品数量：<span>{{detail.nums}}</span></div>
					<div>商品总额：<span class="num">{{detail.jifen}}</span><span class="num"
							style="font-size: 12px;">积分</span></div>
				</div>
			</div>
		</div>
		<div class="wuliu" v-if="detail.status==3 || detail.status==4">
			<div class="top">
				<image src="@/static/images/gift/wuliu.png" mode="" class="icon"></image>
				<div>物流信息</div>
			</div>
			<div class="step" style="margin-top: 10px;">
				<div class="step_item grey " v-if="detail.wuliu_no || detail.wuliu_type">
					<div class="wuliu_no">【快递编号】<span class="email_mobile">{{detail.wuliu_no || '--'}}</span></div>
					<div class="wuliu_no" style="margin-top: 10px;">【物流公司】{{detail.wuliu_type || '--'}}</div>
				</div>
			</div>
			<div class="step" v-if="expressList.length>0">
				<div class="step_list">
					<div class="step_item grey" v-for="(item,index) in expressList">
						<div class="location">{{item.AcceptStation}}</div>
						<div class="update_time">{{getTime(item.AcceptTime)}}</div>
						<!-- <image src="@/static/images/gift/step_2.png" mode="" class="now"></image> -->
						<image src="@/static/images/gift/step_1.png" mode="" class="no_arrive"></image>
					</div>
				</div>
			</div>
		</div>
		<!-- 订单作废弹窗 -->
		<u-popup v-model="zfPopup" mode="bottom" border-radius="16">
			<div class="pop_title">作废订单原因</div>
			<div class="reason">
				<div class="item" v-for="(item,index) in reasonList" :key="index" @click="selectReason(item,index)">
					<div class="text">{{item}}</div>
					<image v-if="index == curReason" src="@/static/images/login/agree.png" mode="" class="option_image">
					</image>
					<div v-else class="option"></div>
				</div>

				<div class="item" style="border:none" @click="otherMethReason(4)">
					<div class="text">其他原因</div>
					<image v-if="curReason==4" src="@/static/images/login/agree.png" mode="" class="option_image">
					</image>
					<div v-else class="option"></div>
				</div>
				<div class="text-area" v-if="curReason==4">
					<u-input v-model="otherReason" type="textarea" :border="false" :height="200"
						:custom-style="{'background-color': '#F8F8F8','padding':'12px','border-radius': '8px'}" />
				</div>

			</div>
			<div class="button">
				<div class="btn cancel" @click="handleCancel">取消作废</div>
				<div class="btn btn_zf" @click="sureZf">确定作废</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				zfPopup: false,
				detail: {},
				reasonList: ['收货信息错了', '数量错了', '订单下多了'],
				close_order_reson: '',
				curReason: 0,
				otherReason: '',
				id: '',
				expressList: [], //快递列表
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderDetail(option.id)
			this.close_order_reson = this.reasonList[this.curReason]
		},
		created() {
			uni.$on('CHOOSEADDRESS', (item) => {
				console.log('地址')
				this.changeAddressApi(item)
			});
		},
		methods: {
			getTime(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedDate
			},
			//取消作废
			handleCancel() {
				this.zfPopup = false
			},
			//更改地址
			changeAddress() {
				uni.navigateTo({
					url: '/pages/address/list?page=record'
				})
			},
			//
			changeAddressApi(item) {
				this.$u.post('/dwbs/shop/order/update-address', {
					id: this.id,
					address_id: item.id
				}).then(res => {
					this.$u.toast('地址修改成功！')
					// uni.$off('CHOOSEADDRESS')
					this.getOrderDetail()

				})
			},
			//作废
			handleZF() {
				this.zfPopup = true
			},
			//确定作废
			sureZf() {
				if (this.curReason == 4 && !this.otherReason) {
					this.$u.toast('请输入作废原因')
					return
				}
				if (this.curReason == 4 && this.otherReason) {
					this.close_order_reson = this.otherReason
				}
				console.log(this.close_order_reson)
				this.$u.post('/dwbs/shop/order/close', {
					id: this.detail.id,
					close_order_reason: this.close_order_reson
				}).then(res => {
					this.$u.toast('作废成功')
					this.zfPopup = false
					setTimeout(() => {
						this.getOrderDetail()
						this.getUserInfo()
					}, 1500)

				})
			},
			//获取当前用户的信息
			getUserInfo() {
				this.$u.get('/base/auth/me').then(res => {

					this.$u.vuex('vuex_user', res.data)

				})
			},
			//选择作废原因
			selectReason(item, index) {
				this.curReason = index
				this.close_order_reson = item
				this.otherReason = ''
			},
			//其他作废原因
			otherMethReason(index) {
				this.curReason = index
			},
			//兑换订单详情
			getOrderDetail() {
				this.$u.get('/dwbs/shop/order', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.searchFastMail()
				})
			},
			// 查询快递
			searchFastMail() {
				this.$u.get('/dwbs/shop/order/express', {
					id: this.id
				}).then(res => {
					console.log(res)
					let data = res.data
					this.express = data
					if (data.State !== false) this.expressList = data.Traces.length > 0 ? data.Traces : []

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		padding-top: 14px;

		.top {
			display: flex;
			align-items: center;
			font-size: 18px;

			.icon {
				width: 27px;
				height: 27px;
				margin-right: 7px;
			}

		}

		.address_card {
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;


			.address {
				margin-top: 22px;
				color: #707070;
				font-size: 17px;
			}
		}

		.order {
			background-color: #fff;
			padding: 16px 12px;
			border-radius: 10px;
			margin-top: 10px;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;

				.btn_item {
					width: 130px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					color: #fff;
					border-radius: 30px;
				}

				.change_address {
					background: linear-gradient(180deg, #FFA700 0%, #FFBA00 100%);
					margin-right: 30px;
				}

				.zuofei {
					/* 按钮渐变 */
					background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
				}
			}

			.order_detail {
				padding: 14px;
				border-radius: 10px;
				background: #F9F9F9;
				margin-top: 14px;
				position: relative;

				.time {
					color: #3E3E3E;
					font-size: 14px;
					margin-bottom: 5px;
				}

				.goods {
					display: flex;
					margin-top: 19px;

					.icon {
						background-color: #fff;
						width: 80px;
						height: 64px;
						margin-right: 12px;
						border: solid 1px #fff;
						border-radius: 10px;
						overflow: hidden;

					}

					.right {
						flex: 1;
						align-items: center;

						.name {
							font-size: 18px;
							color: #333333;
						}

						.btn {
							margin-top: 22px;
							display: flex;

							.num {
								flex: 1;
								font-size: 16px;
								color: #6F6F6F;
							}

							.jifen {
								font-size: 20px;
								color: #FF0000;
							}
						}
					}
				}

				.zongji {
					padding: 27px 0;
					font-size: 18px;
					color: #333333;

					span {
						font-size: 20px;
					}

					div {
						margin-bottom: 14px;
					}

					.num {
						color: #FF1438;
					}
				}

				.tag {
					position: absolute;
					width: 53px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					top: 0;
					right: 0;
					border-radius: 0px 10px 0px 10px;
					opacity: 1;

					color: #FFFFFF;
					font-size: 12px;
				}

				.wait {
					background: #FAC858;
				}

				.zuofei {
					background: #A458FA;
				}

				.wait_fh {
					background: #FA9B58;
				}

				.all_fh {
					background: #586EFA;
				}

				.complate {
					background: #FF0000;
				}
			}
		}

		.pop_title {
			color: #333333;
			font-size: 18px;
			padding: 19px 0;
			text-align: center;
		}

		.reason {
			padding: 0 12px;

			.item {
				padding: 16px 0;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EEEEEE;

				.text {
					color: #333333;
					font-size: 17px;
					flex: 1;
				}

				.option {
					width: 20px;
					height: 20px;
				}

				.option_image {
					width: 24px;
					height: 24px;
				}

				.option {
					border: solid 1px #999999;
					border-radius: 50%;
				}
			}

			.text-area {
				// margin-top: 20px;
			}
		}

		.button {
			padding: 10px 0;
			border-top: solid 1px #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 154px;
				height: 44px;
				text-align: center;
				line-height: 44px;
				border-radius: 22px;
			}

			.cancel {
				background: #FFF4F3;
				border: 1px solid #FB231F;
				color: #FB231F;
				margin-right: 15px;
			}

			.btn_zf {
				color: #FFFFFF;
				background: linear-gradient(91deg, #F30000 1%, #FE4815 99%);
			}
		}

		.wuliu {
			padding: 22px;
			margin-top: 16px;
			background-color: #fff;

			.wuliu_no {
				font-size: 16px;
			}

			.step_list {
				margin-top: 20px;

				.step_item {
					border-left: solid 1px #EEEEEE;
					padding-bottom: 30px;
					padding-left: 18px;
					color: #FF0000;
					font-size: 14px;
					position: relative;

					.email_mobile {
						color: #3366FF
					}

					.now {
						position: absolute;
						height: 16px;
						width: 16px;
						top: 0;
						left: -8px;
					}

					.no_arrive {
						position: absolute;
						height: 10px;
						width: 10px;
						top: 0;
						left: -5px;
					}

					.location {}

					.update_time {
						margin-top: 5px;
					}
				}



				.grey {
					color: #999999;
				}
			}


		}
	}
</style>