cxhxy/addons/foodhelp/uni_app/pages/order/refund.vue

<template>
	<view class="hm-p-b-100">
		<view v-if="order" class="hm-p-lr-20">
			<u-sticky offsetTop="0" customNavHeight="0">
				<view class="hm-p-t-20">
					<u-subsection :list="tabList" bgColor="#fdf6ec" :current="tabN" activeColor="#ff9900"
						inactiveColor="#909193" mode="subsection" @change="actTap"></u-subsection>
				</view>
			</u-sticky>
			<!-- 商品列表 -->
			<view class="hm-p-lr-20 hm-m-t-20 hm-bg-f hm-br-8">
				<view v-for="(item, index) in order.goods" :key="index" class="goods-list">
					<image :src="item.image.url" />
					<view v-if="tabN==0" class="selectNumber hm-fr">
						<view @click="item.refund_num>0?edit('dec',index):''"
							:class="'default left  ' + (item.refund_num>0?'':' default-active')">-</view>
						<view class="num">{{item.refund_num}}</view>
						<view @click="item.total_num>item.refund_num?edit('inc',index):''"
							:class="'default right  ' + (item.total_num>item.refund_num>0?'':' default-active')">+
						</view>
					</view>
					<view v-else class="hm-dis-block-inline hm-fr hm-col-error">
						退 × {{item.total_num}}
					</view>
					<view style="padding-left: 30rpx;">
						<view class="hm-line-1 hm-font-30">{{item.goods_name}}</view>
						<view v-if="item.goods_attr" class="hm-line-1 hm-col-tips hm-font-26">{{item.goods_attr}}</view>
						<view class="hm-dis-block-inline hm-font-26 hm-col-error">
							￥{{item.goods_price}}
							<text class="hm-m-l-10 hm-col-tips">× {{item.total_num}}</text>
						</view>
					</view>
				</view>
				<view class="hm-p-tb-20 hm-text-right">
					共{{order.goods.length}}种商品，合计：<text class="hm-col-error">￥{{order.total_price}}</text>
				</view>
			</view>
			<!-- 费用清单 -->
			<view class="hm-br-8 hm-bg-f hm-m-t-20">
				<view class="hm-p-20 hm-border-b">费用清单</view>
				<view class="hm-p-20 hm-border-b hm-col-tips">
					实付金额：<text class="hm-col-error hm-fr">￥{{order.pay_price}}</text>
				</view>
				<view v-if="order.delivery_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					配送费用：<text class="hm-col-error hm-fr">+￥{{order.delivery_price}}</text>
				</view>
				<view v-if="order.pack_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					包装费用：<text class="hm-col-error hm-fr">+￥{{order.pack_price}}</text>
				</view>
				<view v-if="order.activity_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					优惠金额：<text class="hm-col-error hm-fr">-￥{{order.activity_price}}</text>
				</view>
				<view class="hm-p-20 hm-border-b hm-col-tips">
					退款金额：<text class="hm-col-error hm-fr">￥{{refund_price}}</text>
				</view>
				<view class="hm-p-20 hm-col-tips">
					退款理由：
					<view class="hm-dis-block-inline">
						<u--input v-model="desc" placeholder="请输入退款理由" border="none"></u--input>
					</view>
				</view>
			</view>
			<!-- 技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
			<!-- 提交订单 -->
			<view class="hm-footer-fixed">
				<view class="hm-p-lr-b25 hm-w-b100">
					<u-button @click="submit" type="success" text="提交申请"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				tabList: [{
					name: '退部分',
					value: 10
				}, {
					name: '退全部',
					value: 20
				}],
				tabN: 0,
				order_id: null,
				order: null,
				refund_price: '0.00', //退款金额
				desc: '代客退单', //退款理由
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.order_id = options.id;
			_this.applet = App.getApplet();
			_this.getOrderDetail();
		},
		methods: {

			/**
			 * 修改退款订单
			 */
			edit: function(mode, index) {
				let _this = this,
					order = _this.order;
				if (mode == 'inc') {
					_this.order.goods[index].refund_num = order.goods[index].refund_num + 1;
				} else {
					_this.order.goods[index].refund_num = order.goods[index].refund_num - 1;
				}
				App._get('order.refund/edit', {
					order_id: order.order_id,
					mode: mode,
					index: index
				}, function(result) {
					_this.refund_price = result.data;
				});
			},

			/**
			 * 切换退款模式
			 */
			actTap: function(index) {
				let refund_price = '0.00';
				this.tabN = index;
				if (index == 1) {
					this.refund_price = this.order.pay_price;
				} else {
					this.refund_price = '0.00';
					this.getOrderDetail();
				}
			},

			/**
			 * 获取订单详情
			 */
			getOrderDetail: function() {
				let _this = this;
				App._get('order.refund/detail', {
					order_id: _this.order_id
				}, function(result) {
					_this.order = result.data.order;
				});
			},

			/**
			 * 订单提交
			 */
			submit: function() {
				let _this = this,
				order = _this.order,
				content = '';
				if (_this.refund_price == 0) {
					App.showError('退款金额不可为0');
					return false;
				}
				if (_this.desc == '') {
					App.showError('退款理由不可为空');
					return false;
				}
				if(order.pay_status.value == 20){
					if(order.pay_mode.value == 1){
						content = '该订单使用余额支付，退款金额将原路返回，是否要继续退单？';
					}else if(order.pay_mode.value == 2){
						content = '该订单使用线下支付，退款金额请当面退还，是否要继续退单？';
					}else if(order.pay_mode.value == 3){
						content = '该订单使用支付宝支付，退款金额将原路返回，是否要继续退单？';
					}else{
						content = '该订单使用微信支付，退款金额将原路返回，是否要继续退单？';
					}
				}else{
					content = '该订单还未付款，仅退单不退款，是否要继续退单？';
				}
				// 提交到后端
				uni.showModal({
					title: "提示",
					content: content,
					success: function(o) {
						o.confirm && App._post_form('order.refund/refund', {
							desc: _this.desc,
							mode: _this.tabN,
							order_id: _this.order_id
						}, function(result) {
							App.showSuccess(result.msg, function() {
								uni.navigateBack();
							});
						});
					}
				});
			},

		}
	};
</script>
<style lang="scss" scoped>
	.goods-list {
		padding: 10rpx 0rpx;
		border-bottom: 1rpx solid #f3f4f6;
		height: 120rpx;

		image {
			height: 120rpx;
			width: 120rpx;
			border-radius: 8rpx;
			float: left;
			margin-right: 20rpx;
		}
	}
</style>