289 lines
9.5 KiB
Vue
289 lines
9.5 KiB
Vue
<template>
|
|
<view class="afterSales">
|
|
<view class="service-content">
|
|
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
|
|
</view>
|
|
<!-- 商品信息 -->
|
|
<view class="goods-item" >
|
|
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
|
|
<view class="item--content">
|
|
<view class="title">{{goodsInfo.goods_name}}</view>
|
|
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
|
|
<view class="price">{{goodsInfo.price || '0'}}
|
|
<view class="price-type">
|
|
<text> DT积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 勾选分类 -->
|
|
<view class="sales">
|
|
<view class="sales-item" @click="goSales('refund')">
|
|
<view class="sales-item-left">
|
|
<image class="icon"
|
|
src="http://storage.zh.shangkelian.cn/images/2022/01/11/9093c59ea5d513008926ac4233c20992.png"
|
|
mode="aspectFill" />
|
|
<view class="sales-title">退货</view>
|
|
</view>
|
|
<view class="sales-item-right">
|
|
<view class="sales-des">
|
|
<text> {{refundTime}} 前可申请</text>
|
|
<text class="red">支持七天无理由退货</text>
|
|
<text class="red">(一次性包装破损不支持)</text>
|
|
</view>
|
|
<uni-icons class="icon-right" size="16" type="right" />
|
|
</view>
|
|
</view>
|
|
<view class="sales-item" @click="goSales('exchange')">
|
|
<view class="sales-item-left">
|
|
<image class="icon"
|
|
src="http://storage.zh.shangkelian.cn/images/2022/01/11/9093c59ea5d513008926ac4233c20992.png"
|
|
mode="aspectFill" />
|
|
<view class="sales-title">换货</view>
|
|
</view>
|
|
<view class="sales-item-right">
|
|
<view class="sales-des">
|
|
<text> {{changeTime}} 前可申请</text>
|
|
</view>
|
|
<uni-icons class="icon-right" size="16" type="right" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class=" introduce"><navigator hover-class="none" url="/pages/vip/agreement?id=5">退换货说明</navigator> </view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {refundpre} from '@/apis/interfaces/order.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
goodsInfo: {},
|
|
id: '',
|
|
refundTime:'',
|
|
changeTime:'',
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.id = this.$Route.query.id;
|
|
this.getBaseInfo();
|
|
},
|
|
methods: {
|
|
getBaseInfo(){
|
|
refundpre(this.id).then(res=>{
|
|
this.goodsInfo = res.order.items[0].sku;
|
|
this.goodsInfo.shop =res.order.shop;
|
|
this.refundTime = res.refundTime;
|
|
this.changeTime = res.changeTime;
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
})
|
|
})
|
|
},
|
|
goSales(type) {
|
|
if (type == 'refund') {
|
|
this.$Router.push({
|
|
name: 'RefundOrExchangeApply',
|
|
params: {
|
|
type: type,
|
|
id:this.id,
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title:'努力开发中，敬请期待',
|
|
icon:'none',
|
|
mask:true,
|
|
duration:3000,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.introduce {
|
|
padding-top: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #1890FF;
|
|
text-align: center;
|
|
}
|
|
|
|
.afterSales {
|
|
background-color: $window-color;
|
|
min-height: 100vh;
|
|
|
|
.service-content {
|
|
background-color: #Fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
|
|
.service {
|
|
font-size: 24rpx;
|
|
margin: $margin;
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #f9f9f9;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: #666;
|
|
|
|
span {
|
|
color: $text-price;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-item {
|
|
background-color: #Fff;
|
|
width: 100%;
|
|
display: inline-block;
|
|
// border-bottom: solid 1rpx #eee;
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
// padding: $padding;
|
|
padding-left: $padding;
|
|
padding-top: $padding;
|
|
padding-bottom: $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
.good-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.item--content {
|
|
flex: 1;
|
|
padding: $padding - 10;
|
|
|
|
&>.title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
// @extend .ellipsis-1;
|
|
}
|
|
|
|
&>.sub_title {
|
|
color: #a05f0c;
|
|
font-size: 26rpx;
|
|
padding-top: 6rpx;
|
|
// @extend .ellipsis-1;
|
|
}
|
|
|
|
&>.price {
|
|
padding-top: 10rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: $text-price;
|
|
|
|
// @extend .ellipsis-1;
|
|
.price-type {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
|
|
text {
|
|
margin-right: $margin/2;
|
|
padding-left: 10rpx;
|
|
font-size: 60%;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.kucun {
|
|
color: $text-gray;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.sales {
|
|
margin: $margin;
|
|
background-color: #fff;
|
|
border-radius: $padding $padding 0 0;
|
|
box-shadow: 0 0 26rp 0 rgba($color: #000000, $alpha: 0.1);
|
|
padding: 0 $padding;
|
|
|
|
.sales-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
height: 180rpx;
|
|
border-bottom: solid #f9f9f9 1rpx;
|
|
|
|
.sales-item-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
margin-right: $margin - 10;
|
|
}
|
|
}
|
|
|
|
.sales-item-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
.sales-des {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
|
|
.red {
|
|
color: $text-price;
|
|
}
|
|
}
|
|
|
|
.icon-right {
|
|
padding-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|