ec.uniapp-master/pages/afterSales/detail/detail.vue

<template>
<view id="order-detail">
    <view v-if="detail && detail.data">
        当前服务状态：{{showStatus[detail.data.status]}}
    </view>
    <view class="detail_content" v-if="detail && detail.data">
       <view class="store_title">
          <view class="img">
              <image :src="detail.data.order_item.item_meta.image" alt></image>
          </view>
           <view class="store_text ">
               <view class="name">{{detail.data.order_item.item_name}}</view>
               <view class="num">{{detail.data.order_item.quantity}}件</view>
           </view>
       </view>
        <view class="store_content mx-1px-top">
            <view class="store_content_title">
                <view>售后编号</view>
                <view>{{detail.data.refund_no}}</view>
            </view>
            <view class="store_content_title">
                <view>申请时间</view>
                <view>{{detail.data.created_at}}</view>
            </view>
            <view class="store_content_title">
                <view>服务类型</view>
                <view>{{detail.data.service_type_text}}</view>
            </view>
            <view class="store_content_title">
                <view>服务状态</view>
                <view>{{statusList[detail.data.status]}}</view>
            </view>
            <view class="store_content_title">
                <view>退款金额</view>
                <view>￥{{detail.data.amount/100}}</view>
            </view>
            <view class="store_content_title">
                <view class="refund_reason">退款原因</view>
                <view>{{detail.data.content}}</view>
            </view>
        </view>
    </view>
    <view v-if="detail && detail.data">
		<view class="status_content" v-if="detail.data.status == 2 || detail.data.status == 3 || detail.data.status == 4 || detail.data.status == 5 || detail.data.status == 8">
		     <view class="status_title">
		         {{detail.data.tips_title}}
		     </view>
		     <view class="content">
		         {{detail.data.tips}} 
		     </view>
		</view>
	</view>
    <view class="submit" v-if="detail && detail.data">
		<button class="cancel" @tap="close" v-if="detail.data.status == 0 || detail.data.status == 1 || detail.data.status == 5">取消申请</button>
        <button type="primary" class="return-button" :class=" detail.data.order.distribution_status == 1 ? 'bottom' : '' " :data-refund-no="detail.data.refund_no" @tap="viewExpress" v-if="(detail.data.status == 1 && detail.data.order.distribution_status == 1) || (detail.data.status == 5 && detail.data.order.distribution_status == 1)">立即退货</button>
        
    </view>



    <!--弹出框-->
    <view class="popup" v-if="showReason">
        <view class="popup_alert">
            <view class="title">是否取消</view>
            <view class="content">
                <input type="text" placeholder="备注(必填)" @input="changeReason"></input>
            </view>
            <view class="buttom">
                <view class="cancel" @tap="cancel">取消</view>
                <view class="confirm" @tap="confirm">确定</view>
            </view>
        </view>

    </view>
</view>

</template>
<script>
/**
 * Created by admin on 2017/8/31.
 */
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';

export default {
  data() {
    return {
      showReason: false,
      detail: "",
      cancelReason: "",
      statusList: ['待审核', '审核通过', '拒绝申请', '已完成', '已关闭', '等待买家退货', '买家已退货', '等待商城发货', "等待商城退款"],
      showStatus: ['申请审核中', '申请已通过', '拒绝申请', '已完成', '售后已关闭', '等待用户退货', '用户已退货', '等待商城发货', "等待商城退款"]
    };
  },

  onReady() {
    
  },

  onShow() {// let app =getApp();
    // app.isBirthday().then(()=>{
    //     if(this.$cookieStorage.get("birthday_gift")){
    //         var giftData=this.$cookieStorage.get("birthday_gift").data;
    //         new app.ToastPannel().__page.showText(giftData);
    //     }
    // });
  },

  onLoad(e) {
    var id = e.no;
    pageLogin(getUrl(), () => {
      this.queryAfterSalesDetail(id);
    });
  },

  components: {},
  props: {},
  methods: {
    viewExpress(e) {
      var refund_no = e.currentTarget.dataset.refundNo;
      wx.navigateTo({
        url: '/pages/afterSales/retreat/retreat?no=' + refund_no
      });
    },

    // 查询售后订单详情
    queryAfterSalesDetail(id) {
      this.$http.get({
        api: "api/refund/show/" + id,
        header: {
          Authorization: this.$cookieStorage.get('user_token')
        }
      }).then(res => {
        var tips = res.data.data.tips;
        tips = tips.replace(/\<br\>/g, "\n");
        res.data.data.tips = tips;

        if (res.data.status) {
          this.setData({
            detail: res.data
          });
        }
      });
    },

    close() {
      this.setData({
        showReason: true
      }); // wx.showModal({
      //     title:"是否取消",
      //     content:"<input type='text'/>",
      // });
    },

    cancel() {
      this.setData({
        showReason: false
      });
    },

    changeReason(e) {
      this.setData({
        cancelReason: e.detail.value
      });
    },

    confirm() {
      if (!this.cancelReason) {
        return;
      }

      var reason = this.cancelReason;
      var refund_no = this.detail.data.refund_no;
      this.setData({
        showReason: false,
        cancelReason: ""
      }); // 退款

      this.$http.post({
        api: "api/refund/user/close",
        header: {
          Authorization: this.$cookieStorage.get('user_token')
        },
        data: {
          refund_no: refund_no,
          remark: reason
        }
      }).then(res => {
        if (res.data.status) {
          wx.showToast({
            title: "取消成功",
            duration: 1500,
            success: () => {
              setTimeout(() => {
                wx.redirectTo({
                  url: '/pages/afterSales/index/index'
                });
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: "取消失败",
            duration: 1000
          });
        }
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "detail";
</style>