123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <!-- 售后进度详情 -->
- <template>
- <view class="container">
- <view class="gap"></view>
- <view class="progress_content">
- <view class="progress_content_item" v-for="(item,index1) in returnLogList" :key="index1">
- <view class="progress_date_wrap">
- <view class="progress_date">{{formatDate(item.createTime)}}</view>
- <view class="progress_time">{{formatTime(item.createTime)}}</view>
- </view>
- <view class="circle_icon_wrap">
- <image :src="imgUrl + '/order-detail/sel.png'" mode="" class="circle_active" v-if="index1 == 0"></image>
- <view class="circle_icon" v-else></view>
- <view class="progress_line"></view>
- </view>
- <view class="progress_text" :class="{progress_text_active:index1 == 0}" v-html="item.content"></view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- export default {
- data(){
- return {
- after_sale_bg:getApp().globalData.imgUrl+'order/after_sale_bg.png',
- to_right:getApp().globalData.imgUrl+'order/right.png',
- icon:getApp().globalData.imgUrl+'order/icon.png',
- concatUrl:getApp().globalData.imgUrl+'order/concat.png',
- phoneUrl:getApp().globalData.imgUrl+'order/phone.png',
- afsSn:'', // 售后单号
- state:'' ,// 退换货状态
- returnLogList:[],
- imgUrl: getApp().globalData.imgUrl,
- }
- },
- computed: {
- ...mapState(['userInfo'])
- },
- onLoad(option){
- this.afsSn = option.afsSn
- this.state = option.state
- this.loadData()
- },
- methods:{
- // 售后详情
- loadData(){
- let param = {}
- if(this.state == 2){ //换货详情
- param.url = 'v1/front/member/afterSale/replacementDetail'
- }else{ // 仅退款、退货退款
- param.url = 'v3/business/front/after/sale/detail'
- }
- param.method = 'GET';
- param.data = {};
- param.data.afsSn = this.afsSn;
- this.$request(param).then(res => {
- if (res.state == 200) {
- this.returnLogList = res.data.returnLogList.reverse();
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- // 日期时间格式化
- formatDate(val){
- let date = val.split(' ')[0]
- let date1 = date.split('-')[1]
- let date2 = date.split('-')[2]
- return date1+'-'+date2
- },
- formatTime(val){
- let time = val.split(' ')[1]
- return time.split(':')[0]+':'+time.split(':')[1]
- },
- }
- }
- </script>
- <style lang="scss">
- .container{
- width: 750rpx;
- margin: 0 auto;
- .gap{
- width:100%;
- height:20rpx;
- background-color:#F8F8F8;
- }
- .progress_content{
- margin-top:20rpx;
- background-color: #fff;
- .progress_content_item{
- display:flex;
- align-items: flex-start;
- padding-left:30rpx;
- .progress_date_wrap{
- margin-right:10rpx;
- display:flex;
- flex-direction: column;
- align-items: flex-end;
- white-space: nowrap;
- .progress_date{
- font-weight: 600;
- font-size:28rpx;
- color:#949494;
- }
- .progress_time{
- font-size:22rpx;
- color:#949494;
- }
- }
- .circle_icon_wrap{
- width:40rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-right:37rpx;
- .circle_icon{
- width: 24rpx;
- height: 24rpx;
- background: #FFFFFF;
- border: 2rpx solid #FC1C1C;
- border-radius: 50%;
- margin-left:6rpx;
- margin-right:10rpx;
- }
- .circle_active{
- width: 40rpx;
- height: 40rpx;
- }
- .progress_line{
- width:1rpx;
- height:76rpx;
- background:#DDDDDD;
- }
- }
- .progress_text{
- white-space: pre-wrap;
- font-size:26rpx;
- color:#999999;
- font-weight: 600;
- }
- .progress_text_active{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 32rpx;
- }
- }
- }
- .progress_content>view:last-child .progress_line{
- display: none;
- }
- }
- .big_price{
- font-size:34rpx;
- }
- .small_price{
- font-size:24rpx;
- }
- </style>
|