ssj/pages/users/goods_return/index.vue

<template>
	<view>
		<form  @submit="subRefund" report-submit='true'>
		  <view class='apply-return'>
		    <view class='goodsStyle acea-row row-between' v-for="(item,index) in orderInfo.cartInfo" :key="index">
		        <view class='pictrue'><image :src='item.productInfo.image'></image></view>
		        <view class='text acea-row row-between'>
		          <view class='name line2'>{{item.productInfo.store_name}}</view>
		          <view class='money' v-if="item.productInfo.attrInfo">
								<view>￥{{item.productInfo.attrInfo.price}}</view>
								<view class='num'>x{{item.cart_num}}</view>
		          </view>
		          <view class='money' v-else>
								<view>￥{{item.productInfo.price}}</view>
								<view class='num'>x{{item.cart_num}}</view>
		          </view>
		        </view>
		    </view>
		    <view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>退货件数</view>
						<view class='num'>{{orderInfo.total_num}}</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>退款金额</view>
						<view class='num'>￥{{orderInfo.pay_price}}</view>
					</view>
					<view class='item acea-row row-between-wrapper' @tap="toggleTab('region')">
						<view>退款原因</view>
						<picker class='num' @change="bindPickerChange" :value="index" :range="RefundArray">
								<view class="picker acea-row row-between-wrapper">
									<view class='reason'>{{RefundArray[index]}}</view>
									<text class='iconfont icon-jiantou'></text>
								</view>
						</picker>
					</view>
					<view class='item textarea acea-row row-between'>
						<view>备注说明</view>
						<textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain" placeholder-class='填写备注信息，100字以内'></textarea>
					</view>
					<view class='item acea-row row-between'>
						<view class='title acea-row row-between-wrapper'>
								<view>上传凭证</view>
								<view class='tip'>( 最多可上传3张 )</view>
						</view>
						<view class='upload acea-row row-middle'>
								<view class='pictrue' v-for="(item,index) in refund_reason_wap_img" :key="index">
									<image :src='item'></image>
									<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic' v-if="refund_reason_wap_img.length < 3">
									<text class='iconfont icon-icon25201'></text>
									<view>上传凭证</view>
								</view>
						</view>
					</view>
		    </view>
		    <button class='returnBnt bg-color' form-type="submit">申请退款</button>
		  </view>
		</form>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import { ordeRefundReason, orderRefundVerify, getOrderDetail} from '@/api/order.js';
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	export default {
		components: {},
		data() {
			return {
				refund_reason_wap_img:[],
				orderInfo:{},
				RefundArray: [],
				index: 0,
				orderId:0,
			};
		},
		computed: mapGetters(['isLogin']),
		 onLoad: function (options) {
		  if (!options.orderId) return this.$util.Tips({title:'缺少订单id,无法退款'},{tab:3,url:1});
				this.orderId = options.orderId;
				if (this.isLogin) {
					this.getOrderInfo();
					this.getRefundReason();
				} else {
					toLogin()
				}
		  },
		methods: {
		/**
			 * 获取订单详情
			 *
			*/
			getOrderInfo:function(){
				let that=this;
				getOrderDetail(that.orderId).then(res=>{
					that.$set(that,'orderInfo',res.data);
				});
			},
			/**
			 * 获取退款理由
			*/
			getRefundReason:function(){
				let that=this;
				ordeRefundReason().then(res=>{
					that.$set(that,'RefundArray',res.data);
				})
			},
			/**
			 * 删除图片
			 *
			*/
			DelPic:function(e){
				let index = e, that = this, pic = this.refund_reason_wap_img[index];
				that.refund_reason_wap_img.splice(index, 1);
				that.$set(that,'refund_reason_wap_img',that.refund_reason_wap_img);
			},
			/**
			 * 上传文件
			 *
			*/
			uploadpic:function(){
				let that=this;
				this.$util.uploadImageOne('upload/image',function(res){
					that.refund_reason_wap_img.push(res.data.url);
					that.$set(that,'refund_reason_wap_img',that.refund_reason_wap_img);
				});
			},
			/**
			 * 申请退货
			*/
			subRefund:function(e){
				let that = this, value = e.detail.value;
				//收集form表单
				// if (!value.refund_reason_wap_explain) return app.Tips({title:'请输入退款原因'});
				orderRefundVerify({
					text: that.RefundArray[that.index] || '',
					refund_reason_wap_explain: value.refund_reason_wap_explain,
					refund_reason_wap_img: that.refund_reason_wap_img.join(','),
					uni: that.orderId
				}).then(res=>{
					return this.$util.Tips({ title: '申请成功', icon: 'success' }, { tab: 5, url: '/pages/users/user_return_list/index?isT=1' });
				}).catch(err=>{
					return this.$util.Tips({ title: err });
				})
			},
			bindPickerChange: function (e) {
			this.$set(this,'index',e.detail.value);
			}
		}
	}
</script>

<style scoped lang="scss">
	.apply-return .list{background-color:#fff;margin-top:18rpx;}
	.apply-return .list .item{margin-left:30rpx;padding-right:30rpx;min-height:90rpx;border-bottom:1rpx solid #eee;font-size:30rpx;color:#333;}
	.apply-return .list .item .num{color:#282828;width:427rpx;text-align:right;}
	.apply-return .list .item .num .picker .reason{width:385rpx;}
	.apply-return .list .item .num .picker .iconfont{color:#666;font-size:30rpx;margin-top:2rpx;}
	.apply-return .list .item.textarea{padding:30rpx 30rpx 30rpx 0;}
	.apply-return .list .item textarea{height:100rpx;font-size:30rpx;}
	.apply-return .list .item .placeholder{color:#bbb;}
	.apply-return .list .item .title{height:95rpx;width:100%;}
	.apply-return .list .item .title .tip{font-size:30rpx;color:#bbb;}
	.apply-return .list .item .upload{padding-bottom:36rpx;}
	.apply-return .list .item .upload .pictrue{margin:22rpx 23rpx 0 0;width:156rpx;height:156rpx;position:relative;font-size:24rpx;color:#bbb;}
	.apply-return .list .item .upload .pictrue:nth-of-type(4n){margin-right:0;}
	.apply-return .list .item .upload .pictrue image{width:100%;height:100%;border-radius:3rpx;}
	.apply-return .list .item .upload .pictrue .icon-guanbi1{position:absolute;font-size:45rpx;top:-10rpx;right:-10rpx;}
	.apply-return .list .item .upload .pictrue .icon-icon25201{color:#bfbfbf;font-size:50rpx;}
	.apply-return .list .item .upload .pictrue:nth-last-child(1){border:1rpx solid #ddd;box-sizing:border-box;}
	.apply-return .returnBnt{font-size:32rpx;color:#fff;width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:43rpx auto;}
</style>