junzitang/pagesT/order/CancelOrder.vue

<template>
	<u-popup @close="close" :value="show" :closeable="true" mode="bottom" border-radius="16">
		<view class="pop-view">
			<view class="title">请选择取消原因</view>
			<view style="padding-bottom: 30rpx;">
				<view v-for="(item, index) in reason" :key="index" class="reason-li clearfix" @click="resonChange(item)">
					<text class="float_left">{{ item }}</text>
					<text class="float_right ibonfont primary-color" :class="[cancel_reason === item ? 'ibonxuanze1' : 'ibonweixuanze']"></text>
				</view>
			</view>
			<view class="other-reason" v-if="cancel_reason === '其他原因'"><u-input type="textarea" v-model="other_reason" :border="true" :height="150"></u-input></view>
		</view>
		<view class="confirm-btn primary-bg" @click="confirm">
			<u-loading v-if="loading" mode="circle"></u-loading>
			确定
		</view>
	</u-popup>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		orderId: {
			type: [Number, String],
			default: ''
		},
		cancelbeforeOrderStatus: {
			type: [Number, String],
			default: ''
		},
		payStatus: {
			type: [Number, String],
			default: ''
		}
	},
	computed: {
		// 系统是否开启取消订单审核状态
		cancelOrderAudit() {
			return this.$store.state.baseSet.cancelOrderAudit || 4;
		}
	},
	data() {
		return {
			other_reason: '',
			loading: false,
			cancel_reason: '',
			reason: ['不想买了', '信息填错了', '买错商品了', '卖家缺货', '其他原因']
		};
	},
	methods: {
		resonChange(item) {
			this.cancel_reason = item;
		},
		confirm() {
			if (!this.cancel_reason) {
				this.$api.msg('请选择取消订单的原因');
				return;
			}
			if (this.cancel_reason === '其他原因' && !this.other_reason) {
				this.$api.msg('请输入取消订单的原因');
				return;
			}
			if (this.loading) {
				return;
			}
			let obj = {
				orderStatus: this.payStatus === 4 ? 6 : 7,
				cancelReason: this.cancel_reason === '其他原因' ? this.other_reason : this.cancel_reason
			};
			if (this.cancelOrderAudit === 5) {
				obj.cancelbeforeOrderStatus = this.cancelbeforeOrderStatus;
			}
			this.loading = true;
			this.$u.api
				.updateOrderStatus(this.orderId, obj)
				.then(res => {
					this.loading = false;
					this.$api.msg('取消成功');
					this.close();
					this.$emit('confirm');
				})
				.catch(err => {
					this.loading = false;
				});
		},
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
.confirm-btn {
	color: #ffffff;
	line-height: 90rpx;
	text-align: center;
	width: 100%;
}
.pop-view {
	padding: 0 30rpx;
	.title {
		font-weight: bold;
		line-height: 70rpx;
		padding-top: 10rpx;
	}
	.desc {
		color: #6c6c6c;
		font-size: 24rpx;
		line-height: 60rpx;
		padding-bottom: 30rpx;
	}
	.reason-li {
		line-height: 90upx;
		padding-right: 30upx;
		vertical-align: middle;
		border-bottom: 1px solid #f5f5f5;
		.ibonxuanze1,
		.ibonweixuanze {
			margin-right: 0;
			padding-left: 0;
			font-size: 38upx;
		}
	}
	.other-reason {
		padding-bottom: 30rpx;
	}
}
</style>