commit message

pages/order/afterSales/applyCancel.vue

@@ -0,0 +1,298 @@
+<template>
+	<view>
+		<view class="cancel-head">
+			<u-cell-group>
+				<u-cell-item title="未收货" :arrow="false">
+					<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="NO" @click="radioChange('NO')"></u-radio></u-radio-group>
+				</u-cell-item>
+				<u-cell-item title="已收货" v-if="applyService" :arrow="false">
+					<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="YES" @click="radioChange('YES')"></u-radio></u-radio-group>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="cancle-body" v-if="rog === 'NO'">
+			<view class="cancel-tips">
+				<view class="tips-header">温馨提示：</view>
+				<view>1. 订单取消后无法恢复;</view>
+				<view>2. 订单取消后，使用的优惠券将不再返还，积分可以退回;</view>
+				<view>3. 订单取消后，订单中的赠品要随商品一起返还给商家;</view>
+			</view>
+			<u-cell-group>
+				<u-cell-item title="退款方式" value="原路退回" :arrow="false" v-if="isRetrace"></u-cell-item>
+				<u-cell-item title="退款方式" value="账号退款" :arrow="false" v-else></u-cell-item>
+				<u-cell-item title="退款金额" :value="refund_info.refund_price" :arrow="false"></u-cell-item>
+				<u-cell-item title="取消原因" :value="refund_info.reason" @click="handleShowReason" :arrow="true" arrow-direction="down" required></u-cell-item>
+				<u-action-sheet :list="reasonSelectActions" v-model="reasonSelectShow" @click="onSelectReason"></u-action-sheet>
+				<view v-if="!isRetrace">
+					<u-cell-item title="账户类型" :value="accountTypeText" @click="handleShowAccountType" :arrow="true" arrow-direction="down" required></u-cell-item>
+					<u-action-sheet :list="accountTypeSelectActions" v-model="accountTypeSelectShow" @click="onSelectAccountType"></u-action-sheet>
+					<view v-if="refund_info.account_type === 'BANK_TRANSFER'">
+						<u-field v-model="refund_info.bank_name" required clearable label="银行名称" input-align="right" placeholder="请输入银行名称"></u-field>
+						<u-field v-model="refund_info.bank_deposit_name" label-width="150" required clearable label="银行开户行" input-align="right" placeholder="请输入银行开户行"></u-field>
+						<u-field v-model="refund_info.bank_account_name" label-width="150" required clearable label="银行开户名" input-align="right" placeholder="请输入银行开户名"></u-field>
+						<u-field v-model="refund_info.bank_account_number" required clearable label="银行账号" input-align="right" placeholder="请输入银行账号"></u-field>
+					</view>
+					<u-field v-model="refund_info.return_account" required clearable label="退款账号" input-align="right" placeholder="请输入退款账号"></u-field>
+				</view>
+				<u-field v-model="refund_info.mobile" required clearable label="联系方式" input-align="right" placeholder="请输入手机号码"></u-field>
+			</u-cell-group>
+			<view class="submit-btn">
+				<u-button shape="circle" class="cancel-btn" @click="handleCancelSubmit">取消</u-button>
+				<u-button shape="circle" class="main-btn" @click="handleSubmitApply">提交</u-button>
+			</view>
+		</view>
+		<view class="service-body" v-else>
+			<view class="cancel-tips">
+				<view class="tips-header">温馨提示：</view>
+				<view>1. 当前订单还未确认收货，如果申请售后，则订单自动确认收货;</view>
+				<view>2. 如申请售后，使用的优惠券和积分等将不再返还;</view>
+				<view>3. 订单中的赠品要随申请售后的商品一起返还给商家;</view>
+			</view>
+			<view class="submit-btn"><u-button shape="circle" class="main-btn" @click="handleApplyService">申请售后</u-button></view>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+import Foundation from '@/utils/Foundation.js';
+import RegExp from '@/utils/RegExp.js';
+import { applyCancelOrder } from '@/api/after-sale.js';
+import { confirmReceipt, getOrderDetail } from '@/api/order.js';
+
+export default {
+	data() {
+		return {
+			/** 订单编号 */
+			order_sn: 0,
+			/** 订单详细 */
+			order: '',
+			/** 是否允许申请售后 */
+			applyService: false,
+			/** 是否已收货 */
+			rog: 'NO',
+			/** 是否支持原路退款 */
+			isRetrace: false,
+			/** 申请取消订单参数 */
+			refund_info: {
+				reason: '请选择取消原因',
+				mobile: '',
+				account_type: '',
+				return_account: '',
+				refund_price: 0.0
+			},
+			/** 是否展示取消原因下拉框 */
+			reasonSelectShow: false,
+			/** 取消原因下拉框数据 */
+			reasonSelectActions: [
+				{ text: '商品无货' },
+				{ text: '配送时间问题' },
+				{ text: '不想要了' },
+				{ text: '商品信息填写错误' },
+				{ text: '地址信息填写错误' },
+				{ text: '商品降价' },
+				{ text: '货物破损已拒签' },
+				{ text: '订单无物流跟踪记录' },
+				{ text: '非本人签收' },
+				{ text: '其他' }
+			],
+			/** 账户类型下拉框选中的值 */
+			accountTypeText: '请选择账户类型',
+			/** 是否展示账户类型下拉框 */
+			accountTypeSelectShow: false,
+			/** 账户类型下拉框数据 */
+			accountTypeSelectActions: [{ text: '支付宝', value: 'ALIPAY' }, { text: '微信', value: 'WEIXINPAY' }, { text: '银行卡', value: 'BANK_TRANSFER' }]
+		};
+	},
+	onLoad(options) {
+		this.order_sn = options.sn;
+		this.GET_OrderCancelDetail();
+	},
+	methods: {
+		// 选中任一radio时，由radio-group触发
+		radioChange(e) {
+			this.rog = e;
+		},
+		/** 展示申请原因上拉框事件绑定 */
+		handleShowReason() {
+			this.reasonSelectShow = true;
+		},
+
+		/** 申请原因选中事件绑定 */
+		onSelectReason(index) {
+			this.reasonSelectShow = false;
+			this.refund_info.reason = this.reasonSelectActions[index].text;
+		},
+
+		/** 展示账户类型上拉框事件绑定 */
+		handleShowAccountType() {
+			this.accountTypeSelectShow = true;
+		},
+
+		/** 账户类型选中事件绑定 */
+		onSelectAccountType(index) {
+			this.accountTypeSelectShow = false;
+			this.accountTypeText = this.accountTypeSelectActions[index].text;
+			this.refund_info.account_type = this.accountTypeSelectActions[index].value;
+		},
+
+		/** 跳转至订单列表页面 */
+		handleCancelSubmit() {
+			uni.redirectTo({
+				url: '/pages/order/myOrder?status=0'
+			});
+		},
+
+		/** 申请售后 */
+		handleApplyService() {
+			confirmReceipt(this.order_sn).then(() => {
+				uni.redirectTo({
+					url: '/pages/order/afterSales/afterSales'
+				});
+			});
+		},
+
+		/** 校验参数 */
+		handleCheckParams() {
+			// 取消原因校验
+			if (!this.refund_info.reason || this.refund_info.reason === '请选择取消原因') {
+				this.$refs.uToast.show({ title: '请选择取消原因!', type: 'error' });
+				return false;
+			}
+			// 联系方式校验
+			if (!this.refund_info.mobile || !this.$u.test.mobile(this.refund_info.mobile)) {
+				this.$refs.uToast.show({ title: '请输入正确格式的手机号码!', type: 'error' });
+				return false;
+			}
+
+			// 如果不支持原路退款
+			if (!this.isRetrace) {
+				// 账户类型校验
+				if (!this.refund_info.account_type) {
+					this.$refs.uToast.show({ title: '请选择账户类型!', type: 'error' });
+					return false;
+				}
+
+				// 如果账户类型不为银行卡
+				if (this.refund_info.account_type != 'BANK_TRANSFER') {
+					// 退款账号校验
+					if (!this.refund_info.return_account) {
+						this.$refs.uToast.show({ title: '请输入退款账号!', type: 'error' });
+						return false;
+					}
+				} else {
+					// 银行名称校验
+					if (!this.refund_info.bank_name) {
+						this.$refs.uToast.show({ title: '请输入银行名称!', type: 'error' });
+						return false;
+					}
+					// 银行开户行校验
+					if (!this.refund_info.bank_deposit_name) {
+						this.$refs.uToast.show({ title: '请输入银行开户行!', type: 'error' });
+						return false;
+					}
+					// 银行开户名校验
+					if (!this.refund_info.bank_account_name) {
+						this.$refs.uToast.show({ title: '请输入银行开户名!', type: 'error' });
+						return false;
+					}
+					// 银行账号校验
+					if (!this.refund_info.bank_account_number) {
+						this.$refs.uToast.show({ title: '请输入银行账号!', type: 'error' });
+						return false;
+					}
+				}
+			}
+
+			return true;
+		},
+
+		/** 提交取消订单申请 */
+		handleSubmitApply() {
+			// 校验参数
+			if (!this.handleCheckParams()) {
+				return false;
+			}
+
+			this.refund_info.order_sn = this.order_sn;
+
+			applyCancelOrder(this.refund_info).then(() => {
+				this.$refs.uToast.show({ title: '提交成功!', type: 'success' });
+				this.handleCancelSubmit();
+			});
+		},
+
+		/** 获取订单详情信息 */
+		GET_OrderCancelDetail() {
+			getOrderDetail(this.order_sn).then(response => {
+				this.order = response.data;
+				this.isRetrace = this.order.is_retrace;
+				this.refund_info.refund_price = Foundation.formatPrice(this.order.order_price);
+				this.applyService = this.order.order_status === 'SHIPPED' && this.order.ship_status === 'SHIP_YES';
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/deep/ .u-cell { 
+	// #ifdef MP-WEIXIN
+	width: 100vw !important;
+	overflow: hidden !important;
+	display: block !important;
+	
+	// #endif
+}
+/deep/ .u-cell_title{
+	// #ifdef MP-WEIXIN
+	float: left;
+	// #endif
+}
+/deep/ .u-cell__value{
+	// #ifdef MP-WEIXIN
+	float: right;
+	// #endif
+}
+
+.cancel-head {
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-end;
+}
+.submit-btn {
+	display: flex;
+	margin-top: 40rpx;
+	margin-bottom: 40rpx;
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+}
+.cancel-tips {
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx;
+	font-size: 22rpx;
+	font-family: PingFang SC, PingFang SC-Regular;
+	color: #999999;
+	view {
+		margin-top: 6rpx;
+	}
+	.tips-header {
+		color: #ff6262;
+		font-size: 26rpx;
+		margin-bottom: 6rpx;
+	}
+}
+.main-btn {
+	width: 40%;
+	background-color: $light-color;
+	color: #ffffff;
+}
+.cancel-btn {
+	margin-right: 30px;
+	width: 40%;
+	border-color: $light-color;
+	color: $light-color;
+}
+</style>