fangliaoxiaochengxv/subPages/myOrder/orderItem.vue

<template>
	<view class="order-item" @click.stop="toDetail">
		<view class="display-flex-between">
			<text class="fw400 fs12 lh18 color-666">订单号：{{data.order_no}}</text>
			<view class="color-556 fs12 lh18">{{statusDisplay}}</view>
		</view>
		<view class="display-flex-common goods-list" v-for="(item, index) in data.items" :key="index">
			<image style="width: 144rpx; height: 144rpx; border-radius: 10rpx;margin-right: 30rpx;flex-shrink: 0;"
				:src="item.goods_cover" mode="aspectFill">
			</image>
			<view style="width: 100%;">
				<view class="display-flex-between mb8 fs14 lh18 color-333">
					<text class="fw600 ">{{item.goods_name}}</text>
					<text ><text class="fs10">￥</text>{{item.price_selling}}</text>
				</view>
				<view class="display-flex-between fs12 lh18  color-333 fw400">
					<text class="gray-tag">{{item.goods_spec}}</text>
					<text>×{{item.stock_sales}}</text>
				</view>
			</view>
		</view>
		<view class="goods-total display-flex-between">
			<view >
				<text class="fs12 lh18 color-3E3D44 fw400">实付：</text><text class="fs18 lh15 fw600 color-556"><text class="fs10">￥</text>{{data.amount_total}}</text>
			</view>
			<view class="display-flex-center">
				<text class="btn-gray-border" @click.stop="cancelOrder"
					v-if="[1, 2, 3].includes(data.status) && !isRefund">取消订单</text>
				<text class="common-btn ml10" @click.stop="toPay" v-if="[1, 2].includes(data.status)">立即付款</text>
				<text class="btn-gray-border ml10" @click.stop="confirm" v-if="[4].includes(data.status)">确认收货</text>
				<text class="btn-gray-border ml10" v-if="[6, 9].includes(data.status) && !isRefund"
					@click.stop="toAfterSales">申请售后</text>
				<template v-if="isRefund">
					<text class="btn-gray-border ml10" @click.stop="cancelAfter"
						v-if="[1,2,3].includes(data.refund_status)">取消申请</text>
					<text class="btn-gray-border ml10" @click="toDetail"
						v-if="[-2, -1, 4].includes(data.refund_status)">查看详情</text>
				</template>
			</view>
		</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 {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: { AfterReson },
		data() {
			return {
				showReson: false,
				cancelRemark: '',
				confirmShow: false,
				confirmData: {
					title: '',
					content: ''
				},
				confirmType: ''
			}
		},
		watch: {

		},
		computed: {
			statusDisplay() {
				if (this.data.refund_status == 0) {
					switch (this.data.status) {
						case 0:
							return '已取消'
						case 1:
						case 2:
							return '待付款'
						case 3:
							return '待发货'
						case 4:
							return '待收货'
						case 6:
						case 9:
							return '已完成'
						default:
							return ''
					}
				} else {
					return this.data.refund_status_name
				}
			},
			isRefund() {
				return this.data.refund_status != 0
			}
		},
		methods: {
			confirmHandler() {
				// 确认弹框
				let currentApi = null
				if (this.confirmType == 'cancelOrder') {
					// 取消订单
					this.$api.cancelOrder({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.$emit('refresh')
					}).catch(() => {
						this.confirmShow = false
					})
				} else if (this.confirmType == 'confirm') {
					this.$api.confirmOrder({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.$emit('refresh')
					}).catch(() => {
						this.confirmShow = false
					})
				} else if (this.confirmType == 'cancelAfter') {
					this.$api.cancelAfterSales({ order_no: this.data.order_no }).then(res => {
						this.confirmShow = false
						this.$emit('refresh')
					}).catch(() => {
						this.confirmShow = false
					})
				}
			},
			toAfterSales() {
				uni.navigateTo({
					url: `/subPages/afterSales/afterSales?orderNo=${this.data.order_no}`
				})
			},
			toPay() {
				// 立即付款
				this.$toWechatPay(this.data.order_no)
			},
			cancelAfter() {
				this.confirmShow = true
				this.confirmType = 'cancelAfter'
				this.confirmData = {
					title: '取消申请',
					content: '确认取消申请吗?'
				}
			},
			cancelOrder() {
				if (this.data.status == 3) {
					uni.navigateTo({
						url: `/subPages/cancelOrder/cancelOrder?orderNo=${this.data.order_no}`
					})
				} else {
					this.showReson = true
				}
			},
			cancelConfirm(data) {
				this.confirmShow = true
				this.confirmType = 'cancelOrder'
				this.confirmData = {
					title: '取消订单',
					content: '确认取消订单吗?'
				}
			},
			confirm() {
				this.confirmShow = true
				this.confirmType = 'confirm'
				this.confirmData = {
					title: '确认收货',
					content: '确认收货码?'
				}
			},
			toDetail() {
				uni.navigateTo({
					url: `../orderDetail/orderDetail?orderNo=${this.data.order_no}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 30rpx  24rpx;
		margin-bottom: 20rpx;
	}

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

	.common-btn,
	.btn-gray-border {
		height: 64rpx;
		line-height: 64rpx;
	}
</style>