jsm-mall-h5-front/src/packageAttachment/pages/orderOfSales/details.vue

<template>
  <view style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view class="accessories_nfo_card_view" v-if="info">
          <!-- 配件信息 -->
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_card_title">
              <text>配件信息</text>
              <text class="colorts">
                {{ info.stateName }}
              </text>
            </view>
            <view class="accessories_list_card" v-if="info.itemList && info.itemList.length">
              <view class="accessories_list_a" v-for="(item, index) in info.itemList" :key="index">
                <view class="accessories_list_a_info">
                  <view>
                    {{ item.partsName }}
                  </view>
                  <view> *{{ item.qty }} </view>
                  <view> ￥{{ item.totalAmount }} </view>
                </view>
                <view class="accessories_list_a_number">
                  <text>{{ item.partsNumber }}</text>
                </view>
              </view>
              <view class="accessories_list_amount">
                合计：<text class="colorts">
                  ￥{{
                    [...(info.itemList || []).map(a => a.totalAmount || 0), 0].reduce((a, b) => {
                      return a + b
                    })
                  }}
                </text>
              </view>
            </view>
            <view class="accessories_nfo_card_title"> 备注信息 </view>
            <view class="accessories_nfo_card_note">
              {{ info.remark }}
            </view>
          </view>
          <!-- 申请信息 -->
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_card_title"> 申请信息 </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请单号: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.id }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请日期: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.createTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请人: </view>
              <view class="accessories_nfo_info">
                <view> {{ info.workerName }}({{ info.workerId }}) </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 网点: </view>
              <view class="accessories_nfo_info">
                <view> {{ info.websitName }}({{ info.websitNumber }}) </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请类别: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ { HOME: '家用空调', TRADE: '商用空调', ELEC: '生活电器（小家电）' }[info.applyCategoryName] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请类型: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ ['普通申请', '急件申请', '备件申请'][[0, 1, 2].indexOf(info.applyType)] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 发货方式: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ ['快递', '自提'][info.deliveryType] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 支付方式: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ { WECHAT: '微信支付', LINE: '线下支付', EXAMINE: '审批' }[info.payType] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 支付金额: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.totalAmount }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 支付时间: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.payTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 支付状态: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ ['未支付', '已支付、未提货', '已支付、已提货', '已支付、缺货'][info.payFlag] }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 下单时间: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.createTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 微信流水号: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ payInfo('transactionId') }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 提货状态: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.pickupStateName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 领取时间: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.endTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 操作人: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.workerName }}
                </view>
              </view>
            </view>
          </view>
          <!-- 发货信息 -->
          <view class="accessories_nfo_card">
            <view class="accessories_nfo_card_title"> 发货信息 </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 发货单位: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.deliveryUnit }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 接收单位: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.receiveUnit }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 收货地址: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.receiveAddr }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 详细地址: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.addr }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 物流单号: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.logisticsNo }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </zj-page-fill>
      <bt-container v-if="info && ~[2].indexOf(info.state) && !info.workerConfirmDate && info.deliveryType === 0">
        <view class="btcon pv30 ph10">
          <view @tap.stop="confirmationDelivery" class="confirm-btn">确认提货 </view>
        </view>
      </bt-container>
      <bt-container v-else-if="info && ~[1].indexOf(info.state) && ~[0].indexOf(info.payFlag)">
        <view class="btcon pv30 ph10">
          <view @tap.stop="gopay" class="confirm-btn">去支付 </view>
        </view>
      </bt-container>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import popup from '@/components/popup.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill,
    popup
  },
  data() {
    return {
      info: null,
      params: {}
    }
  },
  onLoad(option) {
    var { salesId, pushFlag, identity } = option
    this.params = {
      salesId,
      identity
    }
    if (pushFlag) {
      this.params.pushFlag = pushFlag
    }
    this.getDetails()
  },
  methods: {
    gopay() {
      uni.redirectTo({
        url: `/packageAttachment/pages/applicationParts/orderPayment?id=${this.info.id}`
      })
    },
    payInfo(key) {
      if (this.info && this.info.payList && this.info.payList[0]) {
        return this.info.payList[0][key] || ''
      }
      return ''
    },
    getDetails(params) {
      this.$api
        .post('/app/worker/parts-sales/detail', this.params)
        .then(res => {
          this.info = res.data
        })
        .catch(() => {})
    },
    confirmationDelivery() {
      this.$api
        .post('/app/worker/parts-sales/workerConfirmDelivery', {
          salesId: this.info.salesId
        })
        .then(res => {
          uni.$emit('updateOrderOfSales')
          uni.$emit('DataStatisticsOfParts')
          this.getDetails()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/static/style/accessories_nfo_card.scss';
</style>