first commit
This commit is contained in:
1
金壶/appV1/pages/refund/.pydio
Normal file
1
金壶/appV1/pages/refund/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
51fe35e6-5189-4f00-8956-b23d16c65ec8
|
||||
189
金壶/appV1/pages/refund/refund.vue
Normal file
189
金壶/appV1/pages/refund/refund.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="bg_F2F2F2">
|
||||
<ServiceTop page_title='退款/售后'></ServiceTop>
|
||||
<!-- 占位 -->
|
||||
<view class="place"></view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods_list">
|
||||
<view class="order_list">
|
||||
<view class="padding-30 order_items margin-shu20 x-bg-white" v-for="(item,index) of serviceList" :key='index' @click="to_refundDetail(item.id,index)">
|
||||
<view class="d-flex">
|
||||
<view>退款订单详情</view>
|
||||
<view class="margin-zy20">{{item.order_sn}}</view>
|
||||
<view class="order_state text-center x-text-white">{{item.status_text}}</view>
|
||||
</view>
|
||||
<view class="list x-bg-white margin-bottom22 padding-sx30">
|
||||
<view class="list_items">
|
||||
<view class="items_li d-flex a-center">
|
||||
<view class="d-flex goods_items a-center w-100">
|
||||
<view class="box_img">
|
||||
<image :src="item.app_thumb" mode="" class="h-100 w-100"></image>
|
||||
</view>
|
||||
<view class="goods_txt flex-1 padding-zy30">
|
||||
<view class="font-weight">{{item.name}}</view>
|
||||
<view class="">{{item.manufacturer_name}}</view>
|
||||
<view class="">{{item.spec_desc}} {{item.retail_flag}}</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view class="x-text-159">¥ {{item.unit_price}}</view>
|
||||
<view class="">X {{item.goods_number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex padding-zy30 j-end">
|
||||
<text class="x_text_hui">退款金额 :</text>
|
||||
<text class="x-text-159">¥ {{item.total_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-text">{{loadingText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ServiceTop from '../../components/HeaderTop/ServiceTop.vue'
|
||||
import service from '../../utils/models/service.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page:1,
|
||||
isScroll:true,
|
||||
serviceList:[],
|
||||
loadingText:"正在加载...",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ServiceTop
|
||||
},
|
||||
//下拉刷新,需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(()=>{
|
||||
this.reload();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
//上拉加载,需要自己在page.json文件中配置"onReachBottomDistance"
|
||||
onReachBottom(){
|
||||
if(!this.isScroll){
|
||||
this.loadingText="到底了";
|
||||
return false;
|
||||
}else{
|
||||
this.loadingText="正在加载...";
|
||||
setTimeout(() => {
|
||||
this.getList();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 查看订单详情
|
||||
to_refundDetail(id,index){
|
||||
uni.navigateTo({
|
||||
url:'../refund/refund_details?id='+id+'&index='+index
|
||||
})
|
||||
},
|
||||
async getList() {
|
||||
let parames = {
|
||||
page:this.page
|
||||
}
|
||||
|
||||
let data = await service.getList(parames)
|
||||
if(data.data.current_page == data.data.last_page){
|
||||
this.isScroll = false
|
||||
}
|
||||
for (let i = 0; i < data.data.data.length; i++) {
|
||||
this.serviceList.push(data.data.data[i])
|
||||
}
|
||||
this.page++
|
||||
this.handleError(data, res => {
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.page){
|
||||
this.isScroll = true
|
||||
this.serviceList = []
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
onShow:function(e) {
|
||||
let pages = getCurrentPages();
|
||||
let currPage = pages[pages.length-1];
|
||||
if (currPage.index){
|
||||
this.serviceList[currPage.index]['status_text'] = currPage.status_text
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.place{
|
||||
background-color: #ffffff;
|
||||
height: 148upx;
|
||||
}
|
||||
.loading-text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60upx;
|
||||
color: #979797;
|
||||
font-size: 24upx;
|
||||
}
|
||||
.order_list {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.order_state{
|
||||
border-radius: 20upx 0 0 20upx;
|
||||
height:46upx;
|
||||
width:140upx;
|
||||
background-color: #EDCA4A;
|
||||
line-height: 46upx;
|
||||
right:0;
|
||||
}
|
||||
.order_items {
|
||||
border-radius: 20upx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 26upx;
|
||||
|
||||
.list_items {
|
||||
.box_img {
|
||||
height: 153.3upx;
|
||||
width: 198upx;
|
||||
background-color: #F2F2F2;
|
||||
padding: 10upx 20upx;
|
||||
margin: 0 10upx;
|
||||
}
|
||||
|
||||
.goods_items {
|
||||
display: flex;
|
||||
.goods_count {
|
||||
bottom: -14upx;
|
||||
right: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 4upx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
.look_logistics{
|
||||
border-radius: 20upx;
|
||||
width:132upx;
|
||||
height:45upx;
|
||||
line-height: 45upx;
|
||||
text-align: center;
|
||||
border:1upx solid #C3C3C3;
|
||||
right:22upx;
|
||||
bottom:-54upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
440
金壶/appV1/pages/refund/refund_details.vue
Normal file
440
金壶/appV1/pages/refund/refund_details.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<!-- 售后进度 页面 -->
|
||||
<view class="content bg_F2F2F2">
|
||||
<HeaderTop page_title='售后进度'></HeaderTop>
|
||||
<!-- 商家正在处理中 -->
|
||||
<view v-if="serviceInfo.status == 1" class="banner x-text-white margin-bottom22 banner3">
|
||||
<view class="font-weight is_state">商家正在处理中</view>
|
||||
<view class="state_txt padding-zy64">您已成功提交售后申请,请耐心等待</view>
|
||||
</view>
|
||||
<!-- 申请已通过 -->
|
||||
<view v-if="serviceInfo.status == 2 || serviceInfo.status == 3" class="banner x-text-white margin-bottom22 banner4">
|
||||
<view class="font-weight is_state">申请已通过</view>
|
||||
<view class="state_txt padding-zy64">申请已通过,请填写信息</view>
|
||||
</view>
|
||||
|
||||
<!-- 申请已拒绝 -->
|
||||
<view v-if="serviceInfo.status == 4" class="banner x-text-white margin-bottom22 banner4">
|
||||
<view class="font-weight is_state">申请已拒绝</view>
|
||||
<view class="state_txt padding-zy64">申请已通过,请填写信息</view>
|
||||
</view>
|
||||
|
||||
<!-- 已提交物流 -->
|
||||
<view v-if="serviceInfo.status == 5" class="banner x-text-white margin-bottom22 banner4">
|
||||
<view class="font-weight is_state">等待客服确认收货</view>
|
||||
<view class="state_txt padding-zy64">您的退货已经在运送途中,请耐心等待</view>
|
||||
</view>
|
||||
|
||||
<!-- 财务待退款 -->
|
||||
<view v-if="serviceInfo.status == 6" class="banner x-text-white margin-bottom22 banner4">
|
||||
<view class="font-weight is_state">等待财务退款</view>
|
||||
<view class="state_txt padding-zy64">您已售后申请已经通过,请耐心等待财务退款</view>
|
||||
</view>
|
||||
|
||||
<!-- 售后完成 -->
|
||||
<view v-if="serviceInfo.status == 7" class="banner x-text-white margin-bottom22 banner4">
|
||||
<view class="font-weight is_state">已完成</view>
|
||||
<view class="state_txt padding-zy64">此售后已经完成</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<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 v-if="serviceInfo.status == 2" class="d-flex a-center x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||||
<view class="" style="width:40%">商家处理详情</view>
|
||||
<view class="flex-1">
|
||||
<view>商家同意退货申请,等待您退货</view>
|
||||
<view class="x-text-159 font-20 info">为了不影响商品二次销售,请在2020-0
|
||||
4-25 00:00:00前寄回该商品,逾期未退
|
||||
货,退款申请将超时关闭。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="serviceInfo.status > 0 && serviceInfo.status < 99" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||||
<view class="">退货详情</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">申请类型 : </view>
|
||||
<view class="flex-1">{{serviceInfo.type_text}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">原因 : </view>
|
||||
<view class="flex-1">{{serviceInfo.reason_text}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">退款金额 : </view>
|
||||
<view class="flex-1">{{serviceInfo.refund_price}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">退款说明 : </view>
|
||||
<view class="flex-1">{{serviceInfo.refund_content}}</view>
|
||||
</view>
|
||||
<view class="d-flex" v-if="serviceInfo.img">
|
||||
<view class="select_txt" style="width:30%;">上传图片</view>
|
||||
<image src="../../static/1000.jpg" mode="" class="updata_img"></image>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">申请日期 : </view>
|
||||
<view class="flex-1">2020-02-02 15:02:32</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="serviceInfo.status == 3" class="d-flex a-center x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||||
<view class="" style="width:40%">商家处理详情</view>
|
||||
<view class="flex-1">
|
||||
<view>商家同意退款申请,等待客服处理</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="serviceInfo.status == 2" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||||
<view class="">退货信息</view>
|
||||
<view class="">
|
||||
<view>退货地址 : 安徽省合肥市瑶海区大虾村 售后部</view>
|
||||
<view>联系电话 : 133****3343</view>
|
||||
<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="toggleDrop()">
|
||||
<text>{{the_Logistics_company}}</text>
|
||||
<image src="../../static/my/shang.png" mode="" style="height:12upx; width:13upx;" v-if="isLogistics_company==true"></image>
|
||||
<image src="../../static/my/xia.png" mode="" style="height:12upx; width:13upx;" v-if="isLogistics_company==false"></image>
|
||||
</view>
|
||||
<view class="selection-list x-bg-white padding-zy30" v-if="isLogistics_company==true">
|
||||
<view>
|
||||
<view v-for="(item, index) in logistics_company" :key="index" @click="chooseLogistics_company(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="express_sn" placeholder="请输入物流单号" class="h-100" style="border:1upx solid #C3C3C3;" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex j-sb">
|
||||
<view class="select_txt">备注</view>
|
||||
<view class="flex-1" style="border:1upx solid #C3C3C3; margin: 0 0 0 30px;">
|
||||
<textarea value="" v-model="express_remarks" placeholder="备注" placeholder-style="color:#989898" class="padding-sx30 remarks" @blur="bindTextAreaBlur" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="serviceInfo.status == 5 && serviceInfo.express_sn" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||||
<view class="">快递详情</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">物流公司 : </view>
|
||||
<view class="flex-1">{{serviceInfo.express}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">物流单号 : </view>
|
||||
<view class="flex-1">{{serviceInfo.express_sn}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">备注 : </view>
|
||||
<view class="flex-1">{{serviceInfo.express_remarks}}</view>
|
||||
</view>
|
||||
<view class="d-flex">
|
||||
<view class="" style="width:30%;">申请日期 : </view>
|
||||
<view class="flex-1">{{serviceInfo.create_time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex bottom-0 right-0 w-100">
|
||||
<view v-if="serviceInfo.status == 2" class="flex-1 main-bg-color text-white font-md py-2 text-center btn3"
|
||||
hover-class="main-bg-hover-color" @click="submitExpress()">提交物流</view>
|
||||
<view v-if="serviceInfo.status < 7" class="flex-1 main-bg-color bg-danger text-white font-md py-2 text-center btn3"
|
||||
hover-class="main-bg-hover-color" @click="cancel()">撤销申请</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:'',
|
||||
index:'',
|
||||
express:0,
|
||||
express_sn:'',
|
||||
express_remarks:'',
|
||||
// 物流公司
|
||||
the_Logistics_company:'请选择', //当前的物流公司名称
|
||||
isLogistics_company: false,
|
||||
logistics_company_index: 0,
|
||||
logistics_company:[{
|
||||
value: '1',
|
||||
label: '物流公司1'
|
||||
},{
|
||||
value: '2',
|
||||
label: '物流公司2'
|
||||
},{
|
||||
value: '3',
|
||||
label: '物流公司3'
|
||||
},{
|
||||
value: '4',
|
||||
label: '物流公司4'
|
||||
}],
|
||||
serviceInfo:{
|
||||
status:0
|
||||
}
|
||||
}
|
||||
},
|
||||
comments: {
|
||||
HeaderTop
|
||||
},
|
||||
components: {uniCombox},
|
||||
methods: {
|
||||
// 物流公司
|
||||
chooseLogistics_company (index) {
|
||||
this.logistics_company_index = index
|
||||
this.isLogistics_company = false
|
||||
this.the_Logistics_company = this.logistics_company[index].label
|
||||
this.express = this.logistics_company[index].label
|
||||
},
|
||||
// toggle 物流公司
|
||||
toggleDrop () {
|
||||
this.isLogistics_company = !this.isLogistics_company
|
||||
},
|
||||
bindTextAreaBlur: function (e) {
|
||||
|
||||
|
||||
},
|
||||
async getInfo() {
|
||||
let data = await service.getInfo(this.id)
|
||||
this.serviceInfo = data.data
|
||||
|
||||
this.handleError(data, res => {
|
||||
|
||||
})
|
||||
},
|
||||
submitExpress() {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定操作',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
|
||||
that.doSubmitExpress()
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async doSubmitExpress() {
|
||||
let parames = {
|
||||
id:this.id,
|
||||
express:this.express,
|
||||
express_sn:this.express_sn,
|
||||
express_sn:this.express_remarks
|
||||
}
|
||||
|
||||
let data = await service.express(parames)
|
||||
if(data.code == 200){
|
||||
uni.redirectTo({
|
||||
url:'../refund/refund_details?id='+data.data.service_id
|
||||
})
|
||||
}
|
||||
this.handleError(data, res => {
|
||||
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定操作',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
|
||||
that.doCancel()
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async doCancel() {
|
||||
let parames = {
|
||||
id:this.id
|
||||
}
|
||||
|
||||
let data = await service.cancel(parames)
|
||||
if(data.code == 200){
|
||||
let pages = getCurrentPages(); //获取所有页面栈实例列表
|
||||
let prevPage = pages[ pages.length - 2 ]; //上一页页面实例
|
||||
prevPage.$vm.index = this.index; //修改上一页data里面的couponNumber参数值为value
|
||||
prevPage.$vm.status_text = data.data.status_text;
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
this.handleError(data, res => {
|
||||
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getInfo()
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
this.id = option.id
|
||||
this.index = option.index
|
||||
}
|
||||
}
|
||||
</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>
|
||||
349
金壶/appV1/pages/refund/refund_submit.vue
Normal file
349
金壶/appV1/pages/refund/refund_submit.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user