first commit
This commit is contained in:
wangxiaowei
211
pages/order/refund/apply/apply.vue
Normal file
211
pages/order/refund/apply/apply.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="refund-apply pb100">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="one-product d-s-c p30 bg-white ">
|
||||
<view class="cover">
|
||||
<image :src="product.image.file_path" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="pro-info">{{product.product_name}}</view>
|
||||
<view class="pt10 p-0-30 f24 gray9">
|
||||
<text class="">
|
||||
单价：¥{{product.line_price}}
|
||||
</text>
|
||||
<text class="ml20">
|
||||
数量：{{product.total_num}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务类型 -->
|
||||
<view class="group bg-white">
|
||||
<view class="group-hd border-b-e">
|
||||
<view class="left">
|
||||
<text class="min-name">服务类型</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-s-c p-20-0">
|
||||
<button v-if="product.orderM.delivery_type.value!=30" type="default"
|
||||
:class="type==10?'btn-red-border':''" @click="tabType(10)">退货/退款</button>
|
||||
<button v-if="product.orderM.delivery_type.value!=30" type="default"
|
||||
:class="type==20?'ml20 btn-red-border':'ml20'" @click="tabType(20)">换货</button>
|
||||
<button v-if="product.orderM.delivery_type.value!=30" type="default"
|
||||
:class="type==30?'ml20 btn-red-border':'ml20'" @click="tabType(30)">仅退款</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--申请原因-->
|
||||
<view class="group bg-white">
|
||||
<view class="group-hd">
|
||||
<view class="left">
|
||||
<text class="min-name">申请原因</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-s-c">
|
||||
<textarea class="p10 box-s-b border flex-1 f28 lh150" value="" name="content"
|
||||
placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--退款金额-->
|
||||
<view class="group bg-white" v-if="type==10 || type==30">
|
||||
<view class="group-hd">
|
||||
<view class="left">
|
||||
<text class="min-name">退款金额：</text>
|
||||
<text class="red f30">¥{{product.total_pay_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--上传图片-->
|
||||
<view class="group bg-white">
|
||||
<view class="group-hd">
|
||||
<view class="left">
|
||||
<text class="min-name">上传凭证</text>
|
||||
<text class="gray9">(最多6张)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-list d-s-c">
|
||||
<view class="item" v-for="(imgs,img_num) in images" :key="img_num" @click="deleteFunc(imgs)">
|
||||
<image :src="imgs.file_path" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="item d-c-c d-stretch" v-if="images.length<6">
|
||||
<view class="upload-btn d-c-c d-c flex-1" @click="openUpload()">
|
||||
<text class="icon iconfont icon-xiangji f34"></text>
|
||||
<text class="gray9">上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="foot-btns">
|
||||
<button form-type="submit" class="btn-red">确认提交</button>
|
||||
<!--<button type="primary" >确认提交</button>-->
|
||||
</view>
|
||||
</form>
|
||||
<!--上传图片-->
|
||||
<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Upload from '@/components/upload/upload.vue';
|
||||
export default {
|
||||
components: {
|
||||
Upload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*是否加载完成*/
|
||||
loadding: true,
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
type: 10,
|
||||
/*是否打开上传图片*/
|
||||
isUpload: false,
|
||||
/*订单商品id*/
|
||||
order_product_id: 0,
|
||||
/*订单商品*/
|
||||
product: {},
|
||||
images: [],
|
||||
/*小程序订阅消息*/
|
||||
temlIds: [],
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.order_product_id = e.order_product_id;
|
||||
},
|
||||
mounted() {
|
||||
/*获取订单详情*/
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/*获取数据*/
|
||||
getData() {
|
||||
let self = this;
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
let order_product_id = self.order_product_id;
|
||||
self._get('user.refund/apply', {
|
||||
order_product_id: order_product_id,
|
||||
platform: self.getPlatform()
|
||||
}, function(res) {
|
||||
self.product = res.data.detail;
|
||||
self.temlIds = res.data.template_arr;
|
||||
if (self.product.orderM.delivery_type.value == 30) {
|
||||
self.type = 30;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
/*切换服务类型*/
|
||||
tabType(e) {
|
||||
this.type = e;
|
||||
},
|
||||
|
||||
/*提交表单*/
|
||||
formSubmit: function(e) {
|
||||
let self = this;
|
||||
var formdata = e.detail.value;
|
||||
formdata.type = self.type;
|
||||
formdata.order_product_id = self.order_product_id;
|
||||
formdata.images = JSON.stringify(self.images);
|
||||
let callback = function() {
|
||||
uni.showLoading({
|
||||
title: '正在提交',
|
||||
mask: true
|
||||
});
|
||||
self._post('user.refund/apply', formdata, function(res) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 3000,
|
||||
complete: function() {
|
||||
self.gotoPage('/pages/order/refund/index/index');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
self.subMessage(self.temlIds, callback);
|
||||
},
|
||||
|
||||
/*打开上传图片*/
|
||||
openUpload() {
|
||||
this.isUpload = true;
|
||||
},
|
||||
|
||||
/*获取上传的图片*/
|
||||
getImgsFunc(e) {
|
||||
let self = this;
|
||||
self.isUpload = false;
|
||||
if (e && typeof(e) != 'undefined') {
|
||||
let this_length = self.images.length,
|
||||
upload_length = e.length;
|
||||
if (this_length + upload_length < 7) {
|
||||
self.images = self.images.concat(e);
|
||||
} else {
|
||||
let leng = 6 - this_length;
|
||||
for (let i = 0; i < leng; i++) {
|
||||
self.images.push(e[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*删除图片*/
|
||||
deleteFunc(e) {
|
||||
this.images.splice(e, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user