717 lines
15 KiB
Vue
717 lines
15 KiB
Vue
<template>
|
||
<view class="OrderInfo" v-if="loaded">
|
||
<!-- 订单状态 -->
|
||
<view class="order-status">
|
||
<view class="info">
|
||
{{state.text}}
|
||
<span>{{state.remark}}</span>
|
||
</view>
|
||
<image src="/static/imgs/fire.png" mode="widthFix"></image>
|
||
</view>
|
||
|
||
<view class="goods-info1">
|
||
<view class="top">
|
||
<view class="company">
|
||
<view class="company-logo">
|
||
<image :src="info.shop.cover" mode="aspectFill" />
|
||
<view class="name ellipsis">{{info.shop.name}}</view>
|
||
</view>
|
||
<view class="flexrow">
|
||
<view class="no ellipsis">退后单号： {{info.refund_no}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-info">
|
||
<image class="goods-img" :src="info.goods_sku.cover" mode="aspectFill" />
|
||
<view class="goods">
|
||
<view class="name">
|
||
<view class="name1 ellipsis-2">{{info.goods_sku.goods_name}}</view>
|
||
<!-- <span>￥16.80</span> -->
|
||
</view>
|
||
<view class="sku">权证个数 <span>x {{info.qty}}</span> </view>
|
||
</view>
|
||
</view>
|
||
<navigator class="total" hover-class="none" :url='"/pages/goods/details?id="+info.goods_sku.goods_id'>
|
||
<view class="total-btn">再次购买</view>
|
||
</navigator>
|
||
<view class="goods-type">创建退货时间 <span>{{info.created_at}}</span></view>
|
||
<view class="goods-type">运费 <span>自行承担运费</span></view>
|
||
<view class="goods-type">退货数量 <span>
|
||
<u-number-box v-model="info.qty" :disabled="true"></u-number-box>
|
||
</span></view>
|
||
<view class="goods-type">退货方式<span>快递退回</span></view>
|
||
<block v-if="info.can.user_deliver">
|
||
<view class="goods-type-1">物流公司
|
||
<u-input v-model="company" placeholder='请输入退货物流公司' />
|
||
</view>
|
||
<view class="goods-type-1">物流单号
|
||
<u-input v-model="number" placeholder='请输入物流单号' />
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<!-- 操作相关 -->
|
||
<view class="actions">
|
||
<view @click="showLogs = true" class="nowPay">查看退货日志</view>
|
||
<view v-if="info.can.user_deliver" @click="nowRefunds(refund_id)" class="nowPay">确认退货</view>
|
||
</view>
|
||
<!-- 显示 -->
|
||
<u-popup v-model="showLogs" mode="bottom" border-radius="14">
|
||
<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView" v-if="logs.length>0">
|
||
<view class="coupon-title">退货操作进度 </view>
|
||
<view class="list">
|
||
<view class="list-item" v-for="(item,index) in logs" :key='index'>
|
||
<view :class="['dian',index === 0 ?'dian-active':'']"></view>
|
||
<view :class="['content',index === 0?'content-active':'']">
|
||
<view class="title">{{item.state_text?item.state_text:'当前状态不明确，需后台返回'}}</view>
|
||
<view class="des">原因：{{item.title || '无理由'}} ； 备注：{{item.remark || '无备注'}}</view>
|
||
<view class="pictures">
|
||
<image @click="priveImg(index,idx)" v-for="(it,idx) in item.pictures" :key='idx' :src="it" mode="aspectFill" />
|
||
</view>
|
||
<view class="date"> {{item.created_at}} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 没有优惠券列表 -->
|
||
<no-list v-if="logs.length === 0" name='no-news' txt="没有任何退货进度信息哦~" />
|
||
</scroll-view>
|
||
</u-popup>
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mallRefundsInfo,
|
||
mallRefundsDeliver
|
||
} from '@/apis/interfaces/numberWeight'
|
||
export default {
|
||
name: 'OrderInfo',
|
||
data() {
|
||
return {
|
||
info: {},
|
||
qty: 1,
|
||
state:{},
|
||
refund_id: '', // 退货单no
|
||
company: '',
|
||
number: '',
|
||
logs: [],
|
||
loaded:false,
|
||
showLogs: false // 默认不显示记录信息
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
// this.refund_id = this.$route.params.no
|
||
// this.getInfo(this.refund_id)
|
||
this.refund_id = e.no
|
||
this.getInfo(e.no)
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('refresh')) {
|
||
this.getInfo(this.refund_id)
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取退货的基本信息
|
||
getInfo(refund_id) {
|
||
mallRefundsInfo(refund_id).then(res => {
|
||
this.info = res
|
||
this.logs = res.log
|
||
this.state = res.state
|
||
this.loaded = true
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
priveImg(index,idx){
|
||
console.log(this.logs[index].pictures);
|
||
uni.previewImage({
|
||
current:idx,
|
||
urls:this.logs[index].pictures
|
||
})
|
||
},
|
||
// 确认退货
|
||
nowRefunds(no) {
|
||
let data = {
|
||
refund: this.refund_id,
|
||
company: this.company,
|
||
number: this.number,
|
||
}
|
||
if (data.company === '') {
|
||
this.$refs.uToast.show({
|
||
title: '请核对物流公司名称',
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
return;
|
||
}
|
||
if (data.number === '') {
|
||
this.$refs.uToast.show({
|
||
title: '请核对物流单号',
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
return;
|
||
}
|
||
uni.showModal({
|
||
title: '哎呦，提醒你',
|
||
content: '是否确退货信息准确无误呀',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
mallRefundsDeliver(data).then(res => {
|
||
console.log(res)
|
||
this.$refs.uToast.show({
|
||
title: res,
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
this.getInfo(data.refund)
|
||
uni.setStorageSync('refresh', true)
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
this.$refs.uToast.show({
|
||
title: '放弃了~',
|
||
type: 'error',icon:false,
|
||
duration: 3000
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.OrderInfo {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #F7F7F7;
|
||
padding-bottom: 80rpx;
|
||
|
||
.order-status {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
background-image: linear-gradient(to bottom, $main-color, $main-color-light);
|
||
color: #Fff;
|
||
font-size: 36rpx;
|
||
padding: 30rpx 50rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
.info {
|
||
font-size: 36rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
span {
|
||
font-size: 28rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
|
||
.acceptInfo {
|
||
margin: 0 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 14rpx 4rpx rgba($color: $main-color, $alpha: 0.2);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
position: relative;
|
||
top: -30rpx;
|
||
|
||
.name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
|
||
span {
|
||
padding-left: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.address {
|
||
padding-top: 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
span {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-info1 {
|
||
padding: 20rpx 40rpx;
|
||
background-color: #fff;
|
||
|
||
.goods-type {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
.goods-type-1 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
|
||
u-input {
|
||
flex: 1;
|
||
margin-left: 50rpx;
|
||
}
|
||
}
|
||
|
||
.goods-type-address {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
u-icon {
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
// 顶部信息
|
||
.top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-bottom: solid 1rpx #EFF4F2;
|
||
|
||
.company-logo {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.name {
|
||
width: 600rpx;
|
||
font-size: 30rpx;
|
||
color: #484848;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
|
||
.no {
|
||
margin-top: 16rpx;
|
||
font-size: $title-size*0.8;
|
||
color: #999;
|
||
// width: 500rpx;
|
||
}
|
||
|
||
.status {
|
||
color: #999;
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
|
||
// 商品信息
|
||
.goods-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
margin-top: 40rpx;
|
||
|
||
.goods-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.goods {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
|
||
|
||
.name {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
// font-weight: bold;
|
||
|
||
.name1 {
|
||
width: 500rpx;
|
||
}
|
||
|
||
span {
|
||
font-size: 34rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.sku {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 合计信息
|
||
.total {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
color: $main-color;
|
||
flex: 1;
|
||
text-align: right;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.total-btn {
|
||
border: solid 1rpx $main-color;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 操作信息
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
background-color: #fff;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
padding: 20rpx 50rpx 30rpx 50rpx;
|
||
color: #fff;
|
||
|
||
.nowPay {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
// background-color: $main-color;
|
||
color: #999;
|
||
border: solid 1rpx #cacaca;
|
||
}
|
||
|
||
.cancelOrder {
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #DD524D;
|
||
}
|
||
|
||
.logistics {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.sign {
|
||
background-color: #DD524D;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.evaluate {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.flexrow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
|
||
.copy {
|
||
color: $main-color;
|
||
font-size: $title-size*0.8;
|
||
font-weight: 400;
|
||
padding: 0 30rpx;
|
||
}
|
||
}
|
||
|
||
.no-address {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 优惠券弹窗
|
||
.scrollView {
|
||
// padding: 40rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
// 标题
|
||
.coupon-title {
|
||
padding: 40rpx;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
// 优惠券样式
|
||
.coupon-list-item {
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 20rpx 50rpx;
|
||
|
||
.coupon-item {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-top1 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: $title-size*0.94;
|
||
width: 100%;
|
||
margin-left: 0 !important;
|
||
margin-top: 30rpx;
|
||
|
||
.shop-info {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.list-top1-img {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.des {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.list-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
font-size: $title-size*0.94;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
width: 600rpx;
|
||
margin-left: 30rpx;
|
||
|
||
.list-top-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
.shop-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.title {
|
||
width: 380rpx;
|
||
font-size: $title-size*1;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.urate {
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.des {
|
||
// padding-top: $padding*0.8;
|
||
font-size: $title-size * 0.8;
|
||
color: #999;
|
||
|
||
span {
|
||
color: #666;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.list-banner {
|
||
width: 120rpx;
|
||
margin-right: $margin*1.5;
|
||
height: 120rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.list-top-right {
|
||
border: solid 1rpx $main-color;
|
||
color: $main-color;
|
||
display: inline-block;
|
||
padding: 8rpx 16rpx;
|
||
font-size: $title-size *0.8;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
margin-top: $margin*2;
|
||
margin-left: 20rpx;
|
||
padding: 30rpx 50rpx;
|
||
|
||
.list-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border-left: solid 2rpx #cacaca;
|
||
padding-bottom: $margin*1.6;
|
||
|
||
&:last-child {
|
||
border-left: solid 2rpx #fff !important;
|
||
}
|
||
|
||
&:first-child {
|
||
color: $main-color !important;
|
||
}
|
||
|
||
.dian {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #cacaca;
|
||
border: solid 10rpx rgba($color:#cacaca, $alpha: 0.3);
|
||
position: relative;
|
||
left: -11rpx;
|
||
}
|
||
|
||
.dian-active {
|
||
background-color: $main-color;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
left: -16rpx;
|
||
border: solid 10rpx rgba($color: $main-color, $alpha: 0.3);
|
||
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.5);
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
margin-left: 60rpx;
|
||
// padding: 10rpx 0;
|
||
font-size: $title-size * 0.9;
|
||
color: #666;
|
||
position: relative;
|
||
top: -10rpx;
|
||
|
||
.date {
|
||
margin-top: $margin;
|
||
}
|
||
}
|
||
|
||
.content-active {
|
||
color: $main-color;
|
||
}
|
||
|
||
.pictures{
|
||
width: 100%;
|
||
image{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 8rpx;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|