350 lines
9.2 KiB
Vue
350 lines
9.2 KiB
Vue
<template>
|
||
<!-- 售后进度 页面 -->
|
||
<view class="content bg_F2F2F2">
|
||
<HeaderTop page_title='售后进度'></HeaderTop>
|
||
|
||
<view class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="d-flex j-sb">
|
||
<view>退款订单详情</view>
|
||
<view class="margin-zy20">2020202020202</view>
|
||
</view>
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<view class="box_img">
|
||
<image src="../../static/1000.jpg" mode="" class="h-100 w-100"></image>
|
||
</view>
|
||
<view class="goods_txt flex-1 padding-zy30">
|
||
<view class="font-weight">盐酸二甲双胍缓释片</view>
|
||
<view class="">中国药科大学制药有限公司</view>
|
||
<view class="">50mg*20s 整</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x-text-159">￥ 4.00</view>
|
||
<view class="">X 4</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="">退货信息</view>
|
||
<view class="">
|
||
<view class="d-flex j-sb refund_form">
|
||
<view class="select_txt"><text class="x-text-159">*</text>申请类型</view>
|
||
<view class="h-100 select_input">
|
||
<view class="selection-component">
|
||
<view class="selection-show padding-zy30 d-flex j-sb a-center" @click="toggle_Apply_types()">
|
||
<text>{{the_Apply_types}}</text>
|
||
<image src="../../static/my/shang.png" mode="" style="height:12upx; width:13upx;" v-if="isApply_types==true"></image>
|
||
<image src="../../static/my/xia.png" mode="" style="height:12upx; width:13upx;" v-if="isApply_types==false"></image>
|
||
</view>
|
||
<view class="selection-list x-bg-white padding-zy30" v-if="isApply_types==true">
|
||
<view>
|
||
<view v-for="(item, index) in apply_types" :key="index" @click="chooseapply_types(index)">{{ item.label}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-flex j-sb refund_form margin-shu20">
|
||
<view class="select_txt"><text class="x-text-159">*</text>退款金额</view>
|
||
<view class="" style="width:70%;">
|
||
<input type="number" value="" v-model="refund_price" placeholder="请输入退款金额" class="h-100" style="border:1upx solid #C3C3C3;" />
|
||
</view>
|
||
</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="flex-1" style="border:1upx solid #C3C3C3; margin: 0 0 0 30px;">
|
||
<textarea value="" v-model="refund_content" placeholder="请具体描述" placeholder-style="color:#989898" class="padding-sx30 remarks" @blur="bindTextAreaBlur" />
|
||
</view>
|
||
</view>
|
||
<view class="d-flex j-sb refund_form margin-shu20">
|
||
<view class="select_txt"><text class="x-text-159">*</text>原因</view>
|
||
<view class="h-100 select_input">
|
||
<view class="selection-component">
|
||
<view class="selection-show padding-zy30 d-flex j-sb a-center" @click="toggle_refund_reason()">
|
||
<text>{{the_refund_reason}}</text>
|
||
<image src="../../static/my/shang.png" mode="" style="height:12upx; width:13upx;" v-if="isRefund_reason==true"></image>
|
||
<image src="../../static/my/xia.png" mode="" style="height:12upx; width:13upx;" v-if="isRefund_reason==false"></image>
|
||
</view>
|
||
<view class="selection-list x-bg-white padding-zy30" v-if="isRefund_reason==true">
|
||
<view>
|
||
<view v-for="(item, index) in refund_reason" :key='index' @click="chooseRefund_reason(index)">{{ item.label }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="upData">
|
||
上传图片（最多可上传3张）
|
||
</view>
|
||
<view class="upData_box">
|
||
<input type="file" id='upload_file' accept='image/*' name='file' @change='fileChange($event)'>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="d-flex bottom-0 right-0 w-100">
|
||
<view class="flex-1 main-bg-color text-white font-md py-2 text-center btn3"
|
||
hover-class="main-bg-hover-color" @click="add()">提交退货信息</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import uniCombox from "../../components/uni-combox/uni-combox/uni-combox.vue"
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
import service from '../../utils/models/service.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id:'',
|
||
refund_price:"",
|
||
refund_content:"",
|
||
reason:0,
|
||
type:0,
|
||
//申请类型
|
||
the_Apply_types:'请选择', //当前的物流公司名称
|
||
isApply_types: false,
|
||
apply_types_index:0,
|
||
apply_types: [{
|
||
value: '1',
|
||
label: '申请类型1'
|
||
}, {
|
||
value: '2',
|
||
label: '申请类型2'
|
||
}, {
|
||
value: '3',
|
||
label: '申请类型3'
|
||
}],
|
||
// 退款原因
|
||
the_refund_reason:'请选择', //当前的物流公司名称
|
||
isRefund_reason: false,
|
||
refund_reason_index:0,
|
||
refund_reason:[{
|
||
value: '1',
|
||
label: '退款原因1'
|
||
}, {
|
||
value: '2',
|
||
label: '退款原因2'
|
||
}, {
|
||
value: '3',
|
||
label: '退款原因3'
|
||
}],
|
||
serviceInfo:{},
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
components: {uniCombox},
|
||
methods: {
|
||
//退款原因
|
||
chooseRefund_reason(index){
|
||
this.refund_reason_index = index
|
||
this.isRefund_reason = false
|
||
this.the_refund_reason = this.refund_reason[index].label
|
||
this.reason = this.refund_reason[index].value
|
||
},
|
||
//toggle 退款原因
|
||
toggle_refund_reason(){
|
||
this.isRefund_reason = !this.isRefund_reason
|
||
},
|
||
// 申请类型
|
||
chooseapply_types(index){
|
||
this.apply_types_index = index
|
||
this.isApply_types = false
|
||
this.the_Apply_types = this.apply_types[index].label
|
||
this.type = this.apply_types[index].value
|
||
},
|
||
// toggle 申请类型
|
||
toggle_Apply_types(){
|
||
this.isApply_types = !this.isApply_types
|
||
},
|
||
bindTextAreaBlur: function (e) {
|
||
|
||
|
||
},
|
||
async getInfo() {
|
||
let data = await service.getInfo(this.id)
|
||
this.serviceInfo = data.data
|
||
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
add() {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定操作',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
|
||
that.doAdd()
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async doAdd() {
|
||
let parames = {
|
||
order_id:1,
|
||
order_goods_id:1,
|
||
type:this.type,
|
||
reason:this.reason,
|
||
refund_price:this.refund_price,
|
||
refund_content:this.refund_content
|
||
}
|
||
|
||
let data = await service.add(parames)
|
||
if(data.code == 200){
|
||
uni.redirectTo({
|
||
url:'../refund/refund_details?id='+data.data.service_id
|
||
})
|
||
}
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
|
||
},
|
||
created() {
|
||
this.getInfo()
|
||
},
|
||
onLoad(option) {
|
||
|
||
this.id = option.id
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
uni-textarea{
|
||
width:100%;
|
||
}
|
||
height:100%;
|
||
overflow-y: auto;
|
||
.banner {
|
||
|
||
background-position: center;
|
||
background-size: cover;
|
||
height: 221upx;
|
||
|
||
.is_state {
|
||
padding: 50upx 0 0 64upx;
|
||
line-height: 60upx;
|
||
}
|
||
|
||
}
|
||
.banner1{
|
||
background-image: url(../../static/my/banner1.png);
|
||
}
|
||
.banner2{
|
||
background-image: url(../../static/my/banner2.png);
|
||
}
|
||
.banner3{
|
||
background-image: url(../../static/my/banner3.png);
|
||
}
|
||
.banner4{
|
||
background-image: url(../../static/my/banner4.png);
|
||
}
|
||
.banner5{
|
||
background-image: url(../../static/my/banner5.png);
|
||
}
|
||
.banner6{
|
||
background-image: url(../../static/my/banner6.png);
|
||
}
|
||
|
||
.my_order {
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
.refund_form{
|
||
height: 80upx;
|
||
.selection-component{
|
||
border:1upx solid #C3C3C3;
|
||
overflow: hidden;
|
||
margin-left:30upx;
|
||
z-index:88;
|
||
|
||
}
|
||
.selection-show{
|
||
position: relative;
|
||
}
|
||
.selection-list{
|
||
z-index:99;
|
||
border:1upx solid #C3C3C3;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.box_img {
|
||
height: 153.3upx;
|
||
width: 198upx;
|
||
background-color: #F2F2F2;
|
||
padding: 10upx 20upx;
|
||
margin: 0 10upx;
|
||
}
|
||
.info{
|
||
line-height: 30upx;
|
||
margin-top:20upx;
|
||
}
|
||
.select_txt{
|
||
line-height: 80upx;
|
||
width:20%;
|
||
}
|
||
.select_input{
|
||
z-index: 106;
|
||
line-height: 38px;
|
||
width:75%;
|
||
}
|
||
.remarks{
|
||
// padding:20upx 0 0 30upx ;
|
||
font-size: 26upx;
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
}
|
||
.updata_img{
|
||
height:143.6upx;
|
||
width:150upx;
|
||
}
|
||
.is_txt{
|
||
text-align: justify;
|
||
}
|
||
.is_txt:after{
|
||
content: " ";
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.order_list {
|
||
height: calc(100% - 238upx);
|
||
overflow-y: auto;
|
||
|
||
.order_state {
|
||
border-radius: 20upx 0 0 20upx;
|
||
height: 46upx;
|
||
width: 120upx;
|
||
background-color: #EDCA4A;
|
||
line-height: 46upx;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
|
||
.order_items {
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
}
|
||
|
||
}
|
||
.is_submit{
|
||
line-height: 82upx;
|
||
margin:100upx auto;
|
||
}
|
||
}
|
||
</style>
|