new-greemall-wxapp/pages/mine/order/detail.vue

<template>
  <view class="app-container">
    <no-data v-if="isLoading" :showText="'加载中'"></no-data>
    <no-data v-if="!isLoading && noData" :showText="'加载失败'"></no-data>
    <block v-if="!isLoading && !noData">
      <view class="status-container" v-if="detail.orderStatus == 'NOPAY'"
        >待付款，30分钟内未付款将会关闭订单</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'DFH'"
        >买家已付款，待卖家发货</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'YFH'"
        >卖家已发货，已签收状态将在签收7日后自动确认</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'OVER'"
        >已确定收货，7日后将关闭退款通道</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'CLOSE'"
        >订单已关闭</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'REFUND'"
        >订单售后中</view
      >
      <view class="status-container" v-if="detail.orderStatus == 'TIMEOUT'"
        >订单超时未支付</view
      >

      <view class="main-container">
        <view
          class="logistics-container card"
          v-if="detail.orderStatus == 'YFH' || detail.orderStatus == 'OVER'"
          @tap="toLogistics"
        >
          <view class="icon"
            ><image src="@/static/icon/logistics.png"></image
          ></view>
          <view class="main" v-if="hasLogistics">
            <view>{{ logisticsData[0].context }}</view>
            <view>{{ logisticsData[0].time }}</view>
          </view>
          <view class="main" v-else>
            <view class="noData">暂无物流信息</view>
          </view>
          <view class="right"
            ><image src="@/static/icon/right.png"></image
          ></view>
        </view>

        <view class="address-container card">
          <view class="icon"
            ><image src="@/static/icon/address.png"></image
          ></view>
          <view class="right">
            <view class="name"
              >{{ detail.receUserName
              }}<text>{{ detail.recePhone }}</text></view
            >
            <view class="address ellipsis-2"
              >{{ detail.province }}{{ detail.city }}{{ detail.area
              }}{{ detail.street }}{{ detail.receAddress
              }}{{ detail.houseNo ? detail.houseNo : '' }}</view
            >
          </view>
        </view>

        <view class="goods-container card">
          <view class="title">商品信息</view>
          <block v-for="(item, index) in detail.orderDetails" :key="index">
            <view class="item" @tap="toGoodsDetail(item.goodsId)">
              <image
                v-if="
					item.goods &&
					item.goods.logo &&
					$compareTime(item.goods.logoStartTime, item.goods.logoEndTime) &&
					item.goods.mergeImage
                "
                :src="item.goods.mergeImage"
                mode="aspectFill"
              ></image>
              <image v-else :src="item.imgUrl" mode="aspectFill"></image>
              <view class="right">
                <view class="top">
                  <view class="name ellipsis-2">{{ item.goodsName }}</view>
                  <view class="des">{{ item.goodsSpecValue }}</view>
                </view>
                <view class="bottom">
                  <view class="price">￥{{ item.price | numToFixed }}</view>
                  <view class="num">x{{ item.num }}</view>
                </view>
              </view>
            </view>
          </block>
        </view>

        <view class="peisong-container card">
          <view class="top">
            <view class="left">配送方式</view>
            <view class="right" v-if="detail.freight == 0">快递包邮</view>
            <view class="right" v-if="detail.freight != 0">快递自费</view>
          </view>
          <view class="bottom">
            <view class="left">买家留言</view>
            <view class="right">{{ detail.buyerMsg }}</view>
          </view>
        </view>

        <view class="total-container card">
          <view class="top">
            <view class="item">
              <view>商品金额</view>
              <view>￥{{ detail.totalProductAmount | numToFixed }}</view>
            </view>
            <view class="item">
              <view>运费</view>
              <view>￥{{ detail.freight | numToFixed }}</view>
            </view>
            <view class="item">
              <view>优惠券</view>
              <view>-￥{{ detail.couponValue | numToFixed }}</view>
            </view>
            <view class="item" v-if="detail.promotionDiscountRate">
              <view>折扣优惠</view>
              <view
                >-¥{{ detail.promotionDiscountAmount | numToFixed }}({{
                  detail.promotionDiscountRate * 10
                }}折)</view
              >
            </view>
          </view>
          <view class="total"
            >订单总额：<text>￥{{ detail.payAmount | numToFixed }}</text></view
          >
        </view>

        <view class="order-container card">
          <view class="title">订单信息</view>
          <view class="item1">
            <view class="left">
              <view class="label">订单编号</view>
              <view class="value">{{ detail.orderId }}</view>
            </view>
            <view class="copy" @tap="copy(detail.orderId)">复制</view>
          </view>
          <view class="item2">
            <view class="label">创建时间</view>
            <view class="value">{{ detail.createTime }}</view>
          </view>
          <view class="item2" v-if="detail.payTime">
            <view class="label">支付时间</view>
            <view class="value">{{ detail.payTime }}</view>
          </view>
          <view class="item2" v-if="detail.payTime">
            <view class="label">支付方式</view>
            <view class="value">{{ detail.payType }}</view>
          </view>
          <view class="item2" v-if="detail.deliverTime">
            <view class="label">发货时间</view>
            <view class="value">{{ detail.deliverTime }}</view>
          </view>
          <view class="item2" v-if="detail.overTime">
            <view class="label">完成时间</view>
            <view class="value">{{ detail.overTime }}</view>
          </view>
          <view class="item2" v-if="detail.exchangeCode">
            <view class="label">优惠金额</view>
            <view class="value">{{
              detail.exchangeSubAmount | numToFixed
            }}</view>
          </view>
          <view class="item2" v-if="detail.exchangeCode">
            <view class="label">优惠码</view>
            <view class="value">{{ detail.exchangeCode }}</view>
          </view>
        </view>

        <!-- 底部按钮：待付款 -->
        <view class="bottom-container" v-if="detail.orderStatus == 'NOPAY'">
          <view class="button gray" @tap="isCancelDialog = true">取消订单</view>
          <view class="button red" @tap="submitOrder(detail)">立即付款</view>
        </view>
        <!-- 底部按钮：待发货 -->
        <view class="bottom-container" v-if="detail.orderStatus == 'DFH'">
          <view class="button white" @tap="remindShipment">提醒发货</view>
          <view
            class="button white"
            v-if="checkCanReturn(detail.orderShareStatus)"
            @tap="toApplyReturn"
            >申请售后</view
          >
        </view>
        <!-- 底部按钮：待收货 -->
        <view class="bottom-container" v-if="detail.orderStatus == 'YFH'">
          <view class="button gray" @tap="toLogistics">查看物流</view>
          <view class="button red" @tap="isConfirmDialog = true">确认收货</view>
          <view
            class="button white"
            v-if="checkCanReturn(detail.orderShareStatus)"
            @tap="toApplyReturn"
            >申请售后</view
          >
        </view>
        <!-- 底部按钮：已完成 -->
        <view class="bottom-container" v-if="detail.orderStatus == 'OVER'">
          <view class="button gray" @tap="toLogistics">查看物流</view>
          <view
            class="button gray"
            v-if="detail.tax && detail.orderTaxId"
            @tap="toInvoiceDetail"
            >查看发票</view
          >
          <view class="button white" v-else @tap="isInvoiceDialog = true"
            >申请发票</view
          >
          <view
            class="button white"
            v-if="checkCanReturn(detail.orderShareStatus)"
            @tap="toApplyReturn"
            >申请售后</view
          >
          <view
            class="button red"
            v-if="!detail.commentService"
            @tap="toEvaluate"
            >评价</view
          >
        </view>
        <!-- 底部按钮：售后中 -->
        <view class="bottom-container" v-if="isReturnOrder">
          <view class="button gray" @tap="toReturnDetail">售后详情</view>
        </view>

        <!-- 取消订单 -->
        <modal-dialog
          showText="确定要取消订单吗？"
          :isShowDialog="isCancelDialog"
          @cancel="isCancelDialog = false"
          @confirm="confirmCancelOrder"
        ></modal-dialog>

        <!-- 确认收货 -->
        <modal-dialog
          showText="确定要确认收货吗？"
          :isShowDialog="isConfirmDialog"
          @cancel="isConfirmDialog = false"
          @confirm="confirmReceipt"
        ></modal-dialog>

        <!-- 申请发票 -->
        <view class="global-mask" v-show="isInvoiceDialog"></view>
        <view
          class="invoice-dialog"
          v-show="isInvoiceDialog"
          @tap="isShowCompanyList = false"
        >
          <view class="type-c">
            <view class="top">
              <view class="title">发票类型</view>
              <image
                src="@/static/icon/close.png"
                @tap="isInvoiceDialog = false"
              ></image>
            </view>
            <view class="list">
              <view
                class="item"
                :class="taxType === false ? 'current' : ''"
                @tap="taxType = false"
                >增值税普通发票</view
              >
              <view
                class="item"
                :class="taxType === true ? 'current' : ''"
                @tap="
                  taxType = true;
                  invoiceHeader = 2;
                "
                >增值税专用发票</view
              >
            </view>
          </view>
          <view class="header-c">
            <view class="title">
              <view>发票抬头</view>
              <view class="button" @tap="getWxInvoice()">获取微信发票</view>
            </view>
            <view class="list">
              <view
                class="item"
                :class="invoiceHeader == 1 ? 'current' : ''"
                @tap="invoiceHeader = 1"
                v-if="taxType === false"
                >个人</view
              >
              <view
                class="item"
                :class="invoiceHeader == 2 ? 'current' : ''"
                @tap="invoiceHeader = 2"
                >公司</view
              >
            </view>
            <view class="form" v-show="invoiceHeader == 1">
              <view class="row">
                <view class="label">个人名称</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写“个人”或您的姓名"
                    v-model="invoiceForm.personName"
                /></view>
              </view>
            </view>
            <view class="form" v-show="invoiceHeader == 2">
              <view class="row">
                <view class="label">单位名称</view>
                <view class="input">
                  <input
                    type="text"
                    placeholder="请填写单位名称"
                    v-model="invoiceForm.companyName"
                    @focus="companyFocus"
                  />
                  <div class="companyList" v-show="isShowCompanyList">
                    <block v-for="(item, index) in companyList" :key="index">
                      <div class="item" @tap="chooseCompany(item)">
                        {{ item.name }}
                      </div>
                    </block>
                  </div>
                </view>
              </view>
              <view class="row">
                <view class="label">纳税人识别号</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写纳税人识别号"
                    v-model="invoiceForm.payerNum"
                /></view>
              </view>
              <view class="more" v-if="taxType === false">
                <view>更多选填项</view>
                <view class="right" v-if="isOpen" @tap="isOpen = !isOpen"
                  >收起<image src="../../../static/icon/arrow_2.png"></image
                ></view>
                <view class="right" v-else @tap="isOpen = !isOpen"
                  >展开<image src="../../../static/icon/arrow_1.png"></image
                ></view>
              </view>
              <block v-if="isOpen">
                <view class="row">
                  <view class="label">注册地址</view>
                  <view class="input"
                    ><input
                      type="text"
                      placeholder="请填写注册地址"
                      v-model="invoiceForm.regAddress"
                  /></view>
                </view>
                <view class="row">
                  <view class="label">注册电话</view>
                  <view class="input"
                    ><input
                      type="text"
                      placeholder="请填写注册电话"
                      v-model="invoiceForm.regPhone"
                  /></view>
                </view>
                <view class="row">
                  <view class="label">开户银行</view>
                  <view class="input"
                    ><input
                      type="text"
                      placeholder="请填写开户银行"
                      v-model="invoiceForm.bank"
                  /></view>
                </view>
                <view class="row">
                  <view class="label">银行帐号</view>
                  <view class="input"
                    ><input
                      type="text"
                      placeholder="请填写银行帐号"
                      v-model="invoiceForm.account"
                  /></view>
                </view>
              </block>
            </view>
          </view>
          <view class="header-c">
            <view class="title">收票人信息</view>
            <view class="form">
              <view class="row" v-if="taxType === true">
                <view class="label">收票人姓名</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写联系姓名"
                    v-model="invoiceForm.name"
                /></view>
              </view>
              <view class="row" v-if="taxType === true">
                <view class="label">收票人手机</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写联系手机"
                    v-model="invoiceForm.phone"
                /></view>
              </view>
              <view class="row">
                <view class="label">收票人邮箱</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写收票邮箱"
                    v-model="invoiceForm.email"
                /></view>
              </view>
              <view class="row" v-if="taxType === true">
                <view class="label">收票人地址</view>
                <view class="input"
                  ><input
                    type="text"
                    placeholder="请填写收票地址"
                    v-model="invoiceForm.address"
                /></view>
              </view>
            </view>
          </view>
          <view class="content-c">
            <view class="title"
              >发票内容<text
                >发票内容选项已根据税法调整，具体请以实际展示为准</text
              ></view
            >
            <view class="list">
              <view class="item">商品内容</view>
            </view>
            <view class="tips"
              >发票内容将显示详情商品名称与价格信息，发票金额为实际支付金额</view
            >
            <view class="button" @tap="submitInvoice">确定</view>
          </view>
        </view>
      </view>
    </block>
    <zhifutanchuan
      v-if="detail_"
      :orderInfo="orderInfo"
      @PAY_TYPE_STR="PAY_TYPE_STR"
    />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import modalDialog from '@/components/modalDialog.vue';
import zhifutanchuan from '@/components/zhifutanchuan.vue';
export default {
  components: {
    modalDialog,
    zhifutanchuan,
  },
  data() {
    return {
      detail_: null,
      orderInfo: null,
      isLoading: true,
      noData: true,
      orderId: null, // 订单id
      orderRefundId: null, // 售后订单id
      isReturnOrder: false, // 是否售后订单
      detail: {}, // 订单详情
      isCancelDialog: false, // 是否显示取消订单弹窗
      isConfirmDialog: false, // 是否显示确认收货弹窗
      isInvoiceDialog: false, // 是否显示申请发票弹窗
      taxType: false,
      invoiceHeader: 1, // 发票类型：1个人，2公司
      isOpen: false, // 是否展开
      invoiceForm: {
        // 发票表单数据
        // 发票抬头
        personName: '', // 个人 - 名称
        companyName: '', // 公司 - 名称
        payerNum: '', // 公司 - 识别号
        regAddress: '', // 公司 - 注册地址
        regPhone: '', // 公司 - 注册电话
        bank: '', // 公司 - 开户银行
        account: '', // 公司 - 银行账号
        // 收票人信息
        name: '', // 姓名
        phone: '', // 手机
        email: '', // 邮箱
        address: '', // 地址
      },
      canClickSave: true, // 能否点击提交
      logisticsData: [], // 物流信息
      hasLogistics: true, // 是否有物流信息
      canRemindShipment: true, // 能否点击提醒发货
      companyList: [],
      isShowCompanyList: false,
      isChooseCompany: false,
    };
  },

  computed: {
    ...mapState(['userInfo', 'isLogin', 'userId']),
  },

  watch: {
    'invoiceForm.companyName'() {
      if (this.isChooseCompany) {
        this.isChooseCompany = false;
        return false;
      }
      this.getCompanyList();
    },
    taxType() {
      if (this.taxType === true) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
    },
  },

  onLoad({ orderId, orderRefundId }) {
    console.log(orderId, '--------------');
    this.orderId = orderId;
    if (!!orderRefundId) {
      this.isReturnOrder = true;
      this.orderRefundId = orderRefundId;
    }
    this.getOrderDetail();

    uni.$on('refreshOrderDetail', (data) => {
      if (data) {
        this.isReturnOrder = true;
        this.orderRefundId = data;
      } else {
        this.isReturnOrder = false;
        this.orderRefundId = null;
      }
      this.getOrderDetail();
    });
  },

  methods: {
    getOrderDetail() {
      let url = '',
        params = {};
      if (this.isReturnOrder) {
        url = '/order/refund/detail';
        params = {
          orderRefundId: this.orderRefundId,
        };
      } else {
        url = '/order/detail';
        params = {
          orderId: this.orderId,
        };
      }
      console.log(params, '------------------------');
      this.$axios({
        url,
        method: 'get',
        params,
      })
        .then((res) => {
          this.noData = false;
          this.isLoading = false;
          this.detail = res.data;
          this.getLogisticsData();
        })
        .catch((res) => {
          this.noData = true;
          this.isLoading = false;
        });
    },

    // 检查是否可以申请售后（根据orderShareStatus）
    checkCanReturn(status) {
      if (!status || status === 'OVER' || status === 'CANCEL') {
        return false;
      } else {
        return true;
      }
    },

    // 获取物流信息
    getLogisticsData() {
      this.$axios({
        url: '/common/express',
        method: 'get',
        params: {
          companyCode: this.detail.companyCode
            ? this.detail.companyCode
            : 'shunfeng',
          logisticsNo: this.detail.logisticsNo,
        },
      }).then((res) => {
        if (res.code == 200 && res.data.length >= 1) {
          this.logisticsData = res.data;
        } else if (res.code == 1100 || res.data.length < 1) {
          this.hasLogistics = false;
        }
      });
    },

    // 去商品详情
    toGoodsDetail(id) {
      uni.navigateTo({
        url: '/packageGoods/pages/detail?id=' + id,
      });
    },

    // 确认取消订单
    confirmCancelOrder() {
      this.$axios({
        url: '/order/cancel',
        method: 'get',
        params: {
          orderId: this.orderId,
        },
      }).then((res) => {
        this.getOrderDetail();
        this.isCancelDialog = false;
        this.$successToast('取消订单成功');
        uni.$emit('refreshOrderList');
      });
    },

    // 确认收货
    confirmReceipt() {
      this.$axios({
        url: '/order/ack',
        params: {
          orderId: this.orderId,
        },
      }).then((res) => {
        this.getOrderDetail();
        this.isConfirmDialog = false;
        this.$successToast('确认收货成功');
        uni.$emit('refreshOrderList');
      });
    },

    PAY_TYPE_STR(ewPam) {
      this.payOrder(ewPam);
    },

    submitOrder(item) {
      let that = this;
      this.orderInfo = item;
      this.detail_ = true;
    },

    // 立即付款
    payOrder(ewPam = {}) {
      let that = this;
      this.$axios({
        url: '/order/wait/pay',
        params: {
          ...ewPam,
          userId: this.userId,
          orderId: this.orderInfo.orderId,
        },
        isLoading: 1,
      }).then((res) => {
        that.orderId = res.data.id;
        if (ewPam.payType == '微信支付') {
          uni.getProvider({
            service: 'payment',
            success: (e) => {
              uni.requestPayment({
                provider: e.provider[0],
                orderInfo: res.data,
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.payPackage,
                signType: 'MD5',
                paySign: res.data.paySign,
                success: (payRes) => {
                  this.detail_ = false;
                  this.orderInfo = null;
                  that.getOrderDetail();
                  that.$successToast('支付成功');
                  uni.$emit('refreshOrderList');
                },
                fail: (err) => {
                  this.detail_ = false;
                  this.orderInfo = null;
                  that.$toast('支付失败');
                  that.getOrderDetail();
                  uni.$emit('refreshOrderList');
                },
              });
            },
          });
        } else if (
          ewPam.payType == '云闪付' &&
          res?.data?.umsMiniRep?.miniPayRequest?.cqpMpAppId
        ) {
          uni.navigateToMiniProgram({
            appId: res.data?.umsMiniRep?.miniPayRequest?.cqpMpAppId,
            path: res.data?.umsMiniRep?.miniPayRequest?.cqpMpPath,
            success(res) {
              uni.onAppShow(({ scene }) => {
                if (scene == 1038) {
                  that.$successToast('支付成功');
                }
				this.detail_ = false;
                this.orderInfo = null;
                that.getOrderDetail();
				uni.reLaunch({
				  url: '/pages/mine/order/detail?orderId=' + that.orderId,
				});
                uni.$emit('refreshOrderList');
				uni.offAppShow();
              });
            },
          });
        }
      });
    },

    // // 立即付款
    // payOrder() {
    //   let that = this;
    //   this.$axios({
    //     url: '/order/wait/pay',
    //     params: {
    //       userId: this.userId,
    //       orderId: this.orderId,
    //     },
    //     isLoading: 1,
    //   }).then((res) => {
    //     uni.getProvider({
    //       service: 'payment',
    //       success: (e) => {
    //         uni.requestPayment({
    //           provider: e.provider[0],
    //           orderInfo: res.data,
    //           timeStamp: res.data.timeStamp,
    //           nonceStr: res.data.nonceStr,
    //           package: res.data.payPackage,
    //           signType: 'MD5',
    //           paySign: res.data.paySign,
    //           success: (res) => {
    //             that.getOrderDetail();
    //             that.$successToast('支付成功');
    //             uni.$emit('refreshOrderList');
    //           },
    //           fail: (err) => {
    //             that.$toast('支付失败');
    //           },
    //         });
    //       },
    //     });
    //   });
    // },

    // 复制
    copy(val) {
      let that = this;
      uni.setClipboardData({
        data: val,
        success: function () {
          that.$successToast('复制成功');
        },
      });
    },

    // 验证数据
    vailateData() {
      // 全状态必填
      if (this.invoiceHeader == 1 && !this.invoiceForm.personName) {
        this.$toast('请填写您的姓名');
        return false;
      }
      if (this.invoiceHeader == 2 && !this.invoiceForm.companyName) {
        this.$toast('请填写单位名称');
        return false;
      }
      if (this.invoiceHeader == 2 && !this.invoiceForm.payerNum) {
        this.$toast('请填写纳税人识别号');
        return false;
      }
      // 普票
      if (this.taxType === false) {
        if (!this.invoiceForm.email) {
          this.$toast('请填写收票人邮箱');
          return false;
        }
      }
      // 专票
      else if (this.taxType === true) {
        if (!this.invoiceForm.regAddress) {
          this.$toast('请填写注册地址');
          return false;
        }
        if (!this.invoiceForm.regPhone) {
          this.$toast('请填写注册电话');
          return false;
        }
        if (!this.invoiceForm.bank) {
          this.$toast('请填写开户银行');
          return false;
        }
        if (!this.invoiceForm.account) {
          this.$toast('请填写银行账号');
          return false;
        }
        if (!this.invoiceForm.name) {
          this.$toast('请填写收票人姓名');
          return false;
        }
        if (!this.invoiceForm.phone) {
          this.$toast('请填写收票人手机');
          return false;
        }
        if (!this.invoiceForm.email) {
          this.$toast('请填写收票人邮箱');
          return false;
        }
        if (!this.invoiceForm.address) {
          this.$toast('请填写收票人地址');
          return false;
        }
      }
      return true;
    },

    // 提交发票
    submitInvoice() {
      if (!this.canClickSave) return false;
      this.canClickSave = false;
      setTimeout(() => {
        this.canClickSave = true;
      }, 3000);
      if (!this.vailateData()) return;

      let params = {};
      if (this.invoiceHeader == 1) {
        params = {
          type: false,
          name: this.invoiceForm.personName,
        };
      } else {
        params = {
          type: true,
          name: this.invoiceForm.companyName,
          taxNo: this.invoiceForm.payerNum,
          registerAddress: this.invoiceForm.regAddress,
          registerPhone: this.invoiceForm.regPhone,
          bank: this.invoiceForm.bank,
          account: this.invoiceForm.account,
        };
      }
      params.taxType = this.taxType;
      params.content = '商品明细';
      params.receiverName = this.invoiceForm.name;
      params.receiverPhone = this.invoiceForm.phone;
      params.receiverEmail = this.invoiceForm.email;
      params.receiverAddress = this.invoiceForm.address;
      params.userId = this.userId;
      params.orderId = this.orderId;
      this.$axios({
        url: '/user/order/tax/save',
        type: 'application/json',
        params,
        isLoading: 1,
      }).then((res) => {
        this.getOrderDetail();
        this.$successToast('提交成功');
        this.isInvoiceDialog = false;
      });
    },

    // 发票详情
    toInvoiceDetail() {
      uni.navigateTo({
        url: '/pages/mine/order/invoice?id=' + this.detail.orderTaxId,
      });
    },

    // 申请退款
    toApplyReturn() {
      uni.navigateTo({
        url: '/pages/mine/order/return/apply?orderId=' + this.orderId,
      });
    },

    // 去售后详情
    toReturnDetail() {
      uni.navigateTo({
        url:
          '/pages/mine/order/return/detail?orderRefundId=' + this.orderRefundId,
      });
    },

    // 去查看物流
    toLogistics() {
      uni.navigateTo({
        url:
          '/pages/mine/order/logistics?companyCode=' +
          this.detail.companyCode +
          '&logisticsNo=' +
          this.detail.logisticsNo,
      });
    },

    // 提醒发货
    remindShipment() {
      if (!this.canRemindShipment) {
        return this.$toast('请勿频繁操作');
      }
      this.canRemindShipment = false;
      setTimeout(() => {
        this.canRemindShipment = true;
      }, 3000);

      this.$axios({
        url: '/order/notice',
        params: {
          orderId: this.orderId,
          userId: this.userId,
        },
      }).then((res) => {
        this.$successToast('提醒发货成功');
      });
    },

    companyFocus() {
      this.getCompanyList();
    },

    getCompanyList() {
      this.$axios({
        url: '/user/order/tax/title/list',
        method: 'get',
        params: {
          companyName: this.invoiceForm.companyName,
        },
      }).then((res) => {
        this.companyList = res.data || [];
        if (this.companyList.length > 0) {
          this.isShowCompanyList = true;
        } else {
          this.isShowCompanyList = false;
        }
      });
    },

    chooseCompany(item) {
      this.invoiceForm.companyName = item.name;
      this.invoiceForm.payerNum = item.taxId;
      this.isChooseCompany = true;
      this.isShowCompanyList = false;
    },

    // 去评价
    toEvaluate() {
      uni.navigateTo({
        url: '/pages/mine/order/evaluate?orderId=' + this.orderId,
      });
    },

    // 获取微信发票
    getWxInvoice() {
      let that = this;
      uni.chooseInvoiceTitle({
        success(res) {
          if (that.taxType == true && res.type == 1) {
            return this.$toast('专票只能选择公司类型');
          }
          // 个人
          if (res.type == 1) {
            that.invoiceHeader = 1;
            that.invoiceForm.personName = res.title;
          }
          // 公司
          if (res.type == 0) {
            that.invoiceHeader = 2;
            that.invoiceForm.companyName = res.title;
            that.invoiceForm.payerNum = res.taxNumber;
            that.invoiceForm.regAddress = res.companyAddress;
            that.invoiceForm.regPhone = res.telephone;
            that.invoiceForm.bank = res.bankName;
            that.invoiceForm.account = res.bankAccount;
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background: #f4f2f2;
  box-sizing: border-box;
}
.status-container {
  background: #fe781f;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  color: #ffffff;
}
.card {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.main-container {
  padding: 20rpx 20rpx 120rpx;
}
.logistics-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  .icon {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    background: linear-gradient(-90deg, #ff4042 0%, #fe781f 100%);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
  .main {
    width: 560rpx;
    font-size: 24rpx;
    line-height: 32rpx;
  }
  .noData {
    font-size: 28rpx;
    color: #666666;
  }
  .right {
    margin-left: 20rpx;
    flex-shrink: 0;
    image {
      width: 16rpx;
      height: 28rpx;
    }
  }
}
.address-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;
  .icon {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    background: linear-gradient(-90deg, #ff4042 0%, #fe781f 100%);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    image {
      width: 28rpx;
      height: 36rpx;
    }
  }
  .right {
    width: 600rpx;
    .name {
      font-size: 32rpx;
      color: #333333;
      text {
        font-size: 28rpx;
        color: #999999;
        margin-left: 16rpx;
      }
    }
    .address {
      font-size: 28rpx;
      color: #666666;
      line-height: 34rpx;
      margin-top: 10rpx;
    }
  }
}
.goods-container {
  padding: 0 20rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-top: 20rpx;
  }
  .item {
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      border: none;
    }
    image {
      width: 180rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .right {
      width: 470rpx;
      height: 180rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        .name {
          font-size: 28rpx;
          color: #333333;
          line-height: 36rpx;
        }
        .des {
          font-size: 28rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
          font-size: 28rpx;
          color: #ff3f42;
          line-height: 28rpx;
        }
        .num {
          font-size: 28rpx;
          color: #333333;
          line-height: 28rpx;
        }
      }
    }
  }
}
.peisong-container {
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333333;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    border-bottom: 1px solid #eaeaea;
  }
  .bottom {
    display: flex;
    align-items: center;
    min-height: 88rpx;
    .left {
      margin-right: 40rpx;
      flex-shrink: 0;
    }
    .right {
      padding: 10rpx 0;
      line-height: 32rpx;
    }
  }
}
.total-container {
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333333;
  .top {
    padding: 10rpx 0;
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64rpx;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    height: 80rpx;
    align-items: center;
    border-top: 1px solid #eaeaea;
    text {
      color: #ff3f42;
    }
  }
}
.order-container {
  padding: 20rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-bottom: 20rpx;
  }
  .item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60rpx;
    .left {
      display: flex;
      .label {
        margin-right: 40rpx;
        flex-shrink: 0;
      }
    }
    .copy {
      color: #fe781f;
    }
  }
  .item2 {
    display: flex;
    align-items: center;
    height: 60rpx;
    .label {
      margin-right: 40rpx;
      flex-shrink: 0;
    }
  }
}
.bottom-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  height: 100rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #ffffff;
  border-top: 1px solid #f4f2f2;
  .button {
    width: 150rpx;
    height: 56rpx;
    border-radius: 56rpx;
    text-align: center;
    line-height: 56rpx;
    font-size: 28rpx;
    margin-left: 15rpx;
    &:first-child {
      margin-left: 0;
    }
    &.gray {
      color: #999999;
      border: 1px solid #999999;
    }
    &.white {
      color: #ff3f42;
      border: 1px solid #ff3f42;
    }
    &.red {
      color: #ffffff;
      border: 1px solid #ff3f42;
      background: #ff3f42;
    }
  }
}
.invoice-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0 20rpx;
  max-height: 100vh;
  overflow-y: scroll;
  .type-c {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20rpx;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 84rpx;
      .title {
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
      }
      image {
        width: 31rpx;
        height: 31rpx;
      }
    }
    .list {
      display: flex;
      .item {
        padding: 0 16rpx;
        border: 1px solid #c0c0c0;
        font-size: 24rpx;
        color: #666666;
        border-radius: 6rpx;
        line-height: 48rpx;
        margin-right: 20rpx;
        &.current {
          border: 1px solid #fe781f;
          background: rgba($color: #fe781f, $alpha: 0.3);
          color: #fe781f;
        }
      }
    }
  }
  .header-c {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20rpx;
    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      line-height: 84rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .button {
        font-size: 24rpx;
        color: #fe781f;
        border: 1px solid #fe781f;
        border-radius: 6rpx;
        line-height: 48rpx;
        height: 48rpx;
        padding: 0 16rpx;
        font-weight: normal;
      }
    }
    .list {
      display: flex;
      padding-bottom: 20rpx;
      .item {
        width: 120rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 6rpx;
        text-align: center;
        border: 1px solid #c0c0c0;
        font-size: 24rpx;
        color: #666666;
        margin-right: 20rpx;
        &.current {
          border: 1px solid #ff3f42;
          background: #ff3f42;
          color: #ffffff;
        }
      }
    }
    .form {
      .row {
        display: flex;
        height: 60rpx;
        align-items: center;
        .label {
          width: 200rpx;
        }
        .input {
          width: 510rpx;
          position: relative;
          input {
            width: 100%;
          }
          .companyList {
            position: absolute;
            top: 60rpx;
            left: -20rpx;
            background: #ffffff;
            width: 530rpx;
            z-index: 11;
            border: 1px solid #eaeaea;
            max-height: 400rpx;
            overflow-y: scroll;
            box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.2);
            .item {
              color: #666666;
              padding: 16rpx 20rpx;
            }
          }
        }
      }
      .more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60rpx;
        .right {
          display: flex;
          align-items: center;
          image {
            width: 20rpx;
            height: 20rpx;
            display: block;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
  .content-c {
    padding-bottom: 40rpx;
    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      line-height: 84rpx;
      text {
        font-size: 22rpx;
        color: #999999;
        margin-left: 10rpx;
        font-weight: normal;
      }
    }
    .list {
      display: flex;
      .item {
        padding: 0 16rpx;
        background: rgba($color: #fe781f, $alpha: 0.3);
        font-size: 24rpx;
        color: #fe781f;
        border-radius: 6rpx;
        line-height: 48rpx;
      }
    }
    .tips {
      font-size: 22rpx;
      color: #999999;
      margin-top: 20rpx;
    }
    .button {
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 70rpx;
      background: linear-gradient(-90deg, #ff3f42 0%, #fe781f 100%);
      text-align: center;
      font-size: 28rpx;
      color: #ffffff;
      margin-top: 20rpx;
    }
  }
}
</style>