fangliaoxiaochengxv/subPages/orderDetail/orderDetail.vue

<template>
	<view class="common-page">
		<view class="header-box" :style="{
			background: `url(${bgImg}) no-repeat 100% 100%`,
				paddingBottom: '30rpx'
		  }" id="headerBox" ref="headerBox">
			<view class="navbar-box display-flex-content-center" :style="{
					height: `${topData.height}px`,
					paddingTop: `${topData.top}px`,
					paddingBottom: '40rpx',
					color: '#fff',
					fontSize: '34rpx',
					fontWeight: 'bold'
				}">
				<view style="position: absolute;left:30rpx" @click="toBack">
					<u-icon size="20" name="arrow-left" color="#000"></u-icon>
				</view>
				<text class="color-black">订单详情</text>
			</view>
			<view class="success-con display-flex-between fs16">
				<view>
					<view class="color-black fs16 fw700 mb5">{{statusDisplay.title}}</view>
					<view class="color-orange fs14">{{statusDisplay.tips}}</view>
				</view>
				<image v-if="statusDisplay.icon" style="width: 92rpx; height: 118rpx; flex-shrink: 0;"
					:src="`https://work.hkmop.com/static/imgs/${statusDisplay.icon}`" mode="aspectFill">
				</image>
			</view>
		</view>
		<view class="content-box mt10">
			<!-- 地址信息 -->
			<view class="common-card display-flex-center" v-if="truckData">
				<image style="width: 64rpx; height: 64rpx; margin-right: 10rpx;flex-shrink: 0;"
					src="/static//location-icon.png" mode="aspectFill">
				</image>
				<view>
					<view class="color-23">
						<text class="fs15 fw600 mr10">{{truckData.address_name}}</text>
						<text class="fs13">{{truckData.address_phone}}</text>
					</view>
					<view class="fs12 color-5f">
						{{`${truckData.address_province}${truckData.address_city}${truckData.address_area}${truckData.address_content}`}}
					</view>
				</view>
			</view>
			<!-- 已选商品 -->
			<view class="common-card-box">
				<view class="goods-list display-flex-center" v-for="(item, index) in goodsList" :key="index">
					<image
						style="width: 155rpx; height: 155rpx; border-radius: 10rpx;margin-right: 10rpx;flex-shrink: 0;"
						:src="item.goods_cover" mode="aspectFill">
					</image>
					<view>
						<view class="display-flex-between goods-name">
							<text>{{item.goods_name}}</text>
							<text>￥{{item.price_selling}}</text>
						</view>
						<view class="display-flex-between goods-number">
							<text class="gray-tag">{{item.goods_spec}}</text>
							<text>×{{item.stock_sales}}</text>
						</view>
					</view>
				</view>
				<view class="goods-total display-flex-center">
					<text class="fs13 color-4a mr10">共{{data.number_goods}}件商品</text>
					<!-- 	<view class="fs14 color-23 fw500">
						实付:<text class="fs16 fw600 color-red">￥{{realPay}}</text>
					</view> -->
				</view>
			</view>
			<!-- 运费信息 -->
			<view class="common-card ">
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">商品总价：</text>
					<text class="fw600 text-overflow-single color-red">￥{{ data.amount_total}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">运费：</text>
					<text class="fw600 text-overflow-single">￥{{ data.amount_express}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">优惠券：</text>
					<text class="fw600 text-overflow-single">￥{{ data.coupon_price}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">使用积分：</text>
					<text class="fw600 text-overflow-single">{{data.integral_price}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">{{[1, 2].includes(data.status) ? '需付款' : '实付'}}：</text>
					<text class="fw600 text-overflow-single color-red">￥{{data.amount_real}}</text>
				</view>
				<view class="display-flex-between" v-if="!([1, 2].includes(data.status))">
					<text class="color-71 flex-shrink">支付方式：</text>
					<text class="fw600 text-overflow-single">微信</text>
				</view>
			</view>
			<!-- 售后信息 -->
			<view class="common-card" v-if="isRefund">
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">退款原因：</text>
					<text class="fw600 text-overflow-single">{{refundData.refund_reason}}</text>
				</view>
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">退款金额：</text>
					<text class="fw600 text-overflow-single color-red">￥{{refundData.refund_price}}</text>
				</view>
				<view class="display-flex-between">
					<text class="color-71 flex-shrink">申请说明：</text>
					<text class="fw600 text-overflow-single">{{refundData.refund_explain}}</text>
				</view>
			</view>
			<view class="common-card" v-if="isRefund">
				<view class="display-flex-between mb15">
					<text class="color-71 flex-shrink">上传凭证</text>
				</view>
				<u-album :urls="refundData.refund_img"></u-album>
			</view>
			<view class="common-card color-71" v-if="isRefund">
				<view class="mb15">
					提交时间：{{data.created_at}}
				</view>
				<view>处理时间：{{data.refunded_at || '--'}}</view>
			</view>
			<template v-if="!isRefund">
				<!-- 留言 -->
				<view class="common-card">
					<view class="color-71 mb10">留言</view>
					<view class="fs13">{{data.order_remark}}</view>
				</view>
				<!-- 下单信息 -->
				<view class="common-card color-71">
					<view class="mb15">
						订单编号：{{data.order_no}}
					</view>
					<view>下单时间：{{data.created_at}}</view>
				</view>
			</template>
		</view>
		<view class="bottom-box display-flex-end"
			v-if="[1,2,3,4].includes(data.status) || (isRefund && [1,2].includes(data.refund_status)) || [6, 9].includes(data.status) && !isRefund">
			<text class="btn-gray-border" @click="cancelOrder"
				v-if="[1, 2, 3].includes(data.status) && !isRefund">取消订单</text>
			<text class="common-btn ml10" @click="toPay" v-if="[1, 2].includes(data.status)">立即付款</text>
			<text class="common-btn ml10" @click="confirm" v-if="[4].includes(data.status)">确认收货</text>
			<text class="common-btn ml10" v-if="[6, 9].includes(data.status) && !isRefund"
				@click.stop="toAfterSales">申请售后</text>
			<template v-if="isRefund">
				<text class="common-btn ml10" @click="cancelAfter" v-if="[1,2].includes(data.refund_status)">取消申请</text>
				<!-- <text class="common-btn ml10" @click="editAfter" v-if="[1,2].includes(data.refund_status)">修改申请</text> -->
				<!-- 	<text class="common-btn ml10" @click="toDetail"
					v-if="[4].includes(data.refund_status)">查看详情</text> -->
			</template>
			<!-- <text class="common-btn ml10" v-if="[5].includes(data.status)">查看详情</text> -->
		</view>
		<!-- 取消订单原因 -->
		<AfterReson v-model="showReson" @confirm="cancelConfirm"></AfterReson>
		<!-- 确认框 -->
		<u-modal :show="confirmShow" :showCancelButton="true" @cancel="confirmShow = false"
			:content='confirmData.content' @confirm="confirmHandler"></u-modal>
	</view>
</template>

<script>
	import AfterReson from '@/components/AfterReson.vue'
	export default {
		components: { AfterReson },
		data() {
			return {
				data: { status: 1 },
				mAddress: {},
        bgImg:'',
				usePoints: [],
				value1: '',
				goodsList: [],
				truckData: {},
				topData: {
					top: 0,
					height: 0
				},
				orderNo: '',
				pageOptions: {},
				showReson: false,
				refundData: { refund_img: [] },
				confirmShow: false,
				confirmData: {
					title: '',
					content: ''
				},
				confirmType: ''
			}
		},
		computed: {
			isRefund() {
				return this.data.refund_status != 0
			},
			statusDisplay() {
				let result = {}
				if (this.isRefund) {
					return {
						title: this.data.refund_status_name,
						tips: this.data.refund_status_name,
					}
				}
				switch (this.data.status) {
					case 1:
					case 2:
						result = {
							title: '等待买家付款',
							tips: '逾期未付款,订单将自动取消',
							icon: 'order-icon1.png'
						}
						break;
					case 3:
						result = {
							title: '等待卖家发货',
							tips: '预计支付成功后48小时内发货',
							icon: 'order-icon2.png'
						}
						break;
					case 4:
						result = {
							title: '卖家已发货',
							tips: this.data.status_name,
							icon: 'order-icon3.png'
						}
						break;
					case 6:
					case 9:
						result = {
							title: '买家已确认收货',
							tips: `确认时间：${this.data.receive_at}`,
							icon: 'order-icon3.png'
						}
						break;
				}
				return result
			}
		},
		onLoad(options) {
			this.pageOptions = options
			this.orderNo = options.orderNo
      let configs = uni.getStorageSync('configs') || {}
      this.bgImg = configs.shop_bgimg
			this.getDetail()
		},
		onShow() {
			const topData = uni.getMenuButtonBoundingClientRect()
			this.topData.top = topData.top
			this.topData.height = topData.height

		},
		methods: {
			confirmHandler() {
				// 确认弹框
				if (this.confirmType == 'cancelOrder') {
					// 取消订单
					this.$api.cancelOrder({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.getDetail()
					}).catch(() => {
						this.confirmShow = false
					})
				} else if (this.confirmType == 'confirm') {
					this.$api.confirmOrder({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.getDetail()
					}).catch(() => {
						this.confirmShow = false
					})
				} else if (this.confirmType == 'cancelAfter') {
					this.$api.cancelAfterSales({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.getDetail()
					}).catch(() => {
						this.confirmShow = false
					})
				}
			},
			toAfterSales() {
				uni.navigateTo({
					url: `/subPages/afterSales/afterSales?orderNo=${this.data.order_no}`
				})
			},
			toPay() {
				// 立即付款
				this.$toWechatPay(this.data.order_no)
			},
			cancelOrder() {
				if (this.data.status == 3) {
					uni.navigateTo({
						url: `/subPages/cancelOrder/cancelOrder?orderNo=${this.data.order_no}`
					})
				} else {
					this.showReson = true
				}
			},
			cancelAfter() {
				this.confirmShow = true
				this.confirmType = 'cancelAfter'
				this.confirmData = {
					title: '取消申请',
					content: '确认取消申请吗?'
				}
			},
			cancelConfirm(data) {
				console.log(7999, data)
				this.confirmShow = true
				this.confirmType = 'cancelOrder'
				this.confirmData = {
					title: '取消订单',
					content: '确认取消订单吗?'
				}
			},
			confirm() {
				this.confirmShow = true
				this.confirmType = 'confirm'
				this.confirmData = {
					title: '确认收货',
					content: '确认收货码?'
				}
			},
			getDetail() {
				this.$api.orderDetail({ order_no: this.orderNo }).then(res => {
					this.data = res.data
					this.goodsList = res.data.items || []
					this.truckData = res.data.truck
					this.refundData = res.data.refund || {}
					if (this.refundData.refund_img) {
						this.refundData.refund_img = JSON.parse(this.refundData.refund_img)
					}
				})
			},
			toBack() {
        uni.navigateBack({
          delta: 1 // 返回上一级页面
        });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common-page {
		height: 100vh;
		overflow-y: auto;
		// padding: 20rpx;
		color: #2C2C2C;
		padding-bottom: 188rpx;
		box-sizing: border-box;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.success-con {
		padding: 0 50rpx 0 40rpx;
	}

	.content-box {
		padding: 20rpx;
	}

	.navbar-box {
		position: relative;
	}

	.good-card {
		padding: 38rpx 22rpx;
		color: #7A7A7A;

		::v-deep {
			.u-textarea {
				background: #F6F6F6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: none;
				padding: 18rpx;

				.u-textarea__count {
					background-color: transparent !important;
				}
			}
		}
	}

	.goods-list {
		margin: 0 30rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.goods-total {
		justify-content: flex-end;
		margin: 27rpx 20rpx;
	}
</style>