jsm-mall-h5-front/src/packageAttachment/pages/returnOfNewParts/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.flagName }}
              </text>
            </view>
            <view class="accessories_list_card">
              <view
                class="accessories_list_a"
                v-for="(item, index) in info.partsNewRefundManageRecordList || []"
                :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
                    v-if="~['REFUNDED'].indexOf(info.flag)"
                    class="viewtkstate"
                    @tap.stop="
                      () => {
                        listItem = item
                        showPopup = true
                      }
                    "
                  >
                    查看退款状态
                  </view>
                </view>
              </view>
              <view class="accessories_list_amount">
                合计：<text class="colorts">
                  ￥{{
                    [...(info.partsNewRefundManageRecordList || []).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.applyNo }}
                </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">
                <radio-group
                  v-if="info.flag === 'SAVE'"
                  @change="
                    d => {
                      info.applyCategory = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="HOME" :checked="info.applyCategory === 'HOME'" />家用空调
                  </label>
                  <label> <radio value="TRADE" :checked="info.applyCategory === 'TRADE'" />商用空调 </label>
                  <br />
                  <br />
                  <label> <radio value="ELEC" :checked="info.applyCategory === 'ELEC'" />生活电器（小家电） </label>
                </radio-group>
                <view v-else>
                  {{ info.applyCategoryName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 申请类型: </view>
              <view class="accessories_nfo_info">
                <radio-group
                  v-if="info.flag === 'SAVE'"
                  @change="
                    d => {
                      info.applyType = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="NEW" :checked="info.applyType === 'NEW'" />新件返还
                  </label>
                  <label> <radio value="LOST" :checked="info.applyType === 'LOST'" />破损返还 </label>
                  <br />
                  <br />
                  <label> <radio value="BUG" :checked="info.applyType === 'BUG'" />故障返还 </label>
                </radio-group>
                <view v-else>
                  {{ info.applyTypeName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 返件方式: </view>
              <view class="accessories_nfo_info">
                <radio-group
                  v-if="info.flag === 'SAVE'"
                  @change="
                    d => {
                      info.refundMode = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="EXPRESS" :checked="info.refundMode === 'EXPRESS'" />物流快递
                  </label>
                  <label> <radio value="SELF" :checked="info.refundMode === 'SELF'" />网点自还 </label>
                </radio-group>
                <view v-else>
                  {{ info.refundModeName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批人: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineBy }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批时间: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineTime }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批结果: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.flagName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 审批备注: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.examineRemark }}
                </view>
              </view>
            </view>
          </view>
          <!-- 发货信息 -->
          <view class="accessories_nfo_card" v-if="~['SUBMIT', 'AGREE', 'REJECT', 'REFUNDED'].indexOf(info.flag)">
            <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.workerName }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 接收单位: </view>
              <view class="accessories_nfo_info">
                <view> {{ info.receiveWebsitName }}({{ info.receiveWebsitId }}) </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 收货地址: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.receiveAddress }}
                </view>
              </view>
            </view>
            <view class="accessories_nfo_ac">
              <view class="accessories_nfo_title"> 物流单号: </view>
              <view class="accessories_nfo_info">
                <view>
                  {{ info.expressNo }}
                </view>
              </view>
            </view>
          </view>
          <popup
            :value="showPopup"
            @input="
              val => {
                showPopup = val
              }
            "
          >
            <view
              v-if="listItem"
              style="
                background: #fff;
                width: 500upx;
                -moz-box-shadow: 0px 0px 20px #333333;
                -webkit-box-shadow: 0px 0px 20px #333333;
                box-shadow: 0px 0px 20px #333333;
                border-radius: 20rpx;
              "
            >
              <view class="accessories_nfo_card">
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款金额: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundAmount }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款状态: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ ['成功', '失败', '等待'][['OK', 'FAIL', 'WAIT'].indexOf(listItem.refundState)] || '' }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款时间: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundTime }}
                    </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 退款方式: </view>
                  <view class="accessories_nfo_info">
                    <view> 微信 </view>
                  </view>
                </view>
                <view class="accessories_nfo_ac">
                  <view class="accessories_nfo_title"> 微信接收账号: </view>
                  <view class="accessories_nfo_info">
                    <view>
                      {{ listItem.refundMchNo }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </popup>
        </view>
      </zj-page-fill>
      <!-- <bt-container v-if="info && ~['AGREE'].indexOf(info.flag)">
				<view class=" btcon pv30 ph10">
					<view class="confirm-btn" v-if="~['AGREE'].indexOf(info.flag)">确认接收</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 {
      showPopup: false,
      info: null,
      listItem: null
    }
  },
  onLoad: function (option) {
    this.getDetails(option.applyNo)
  },
  methods: {
    getDetails(applyNo) {
      this.$api
        .post('/app/worker/new-refund/detail', {
          applyNo
        })
        .then(res => {
          this.info = res.data
        })
        .catch(() => {})
    }
  }
}
</script>

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