jsm-mall-h5-front/src/packageAttachment/pages/returnOfOldParts/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.partsOldRefundManageRecordList || []"
                :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.partsOldRefundManageRecordList || []).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.websiteName }}({{ info.websiteNumber }}) </view>
              </view>
            </view>
            <!-- <view class="accessories_nfo_ac">
							<view class="accessories_nfo_title">
								{{info.flag==='SAVE' && info.settlementState?"*":""}}申请类别:
							</view>
							<view class="accessories_nfo_info">
								<radio-group v-if="info.flag==='SAVE' && info.settlementState"
									@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>
									{{['家用空调', '商用空调', '生活电器（小家电）'][['HOME', 'TRADE', 'ELEC'].indexOf(info.applyCategory)]}}
								</view>
							</view>
						</view>
						<view class="accessories_nfo_ac">
							<view class="accessories_nfo_title">
								{{info.flag==='SAVE' && info.settlementState?"*":""}}申请类型:
							</view>
							<view class="accessories_nfo_info">
								<radio-group v-if="info.flag==='SAVE' && info.settlementState"
									@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>
									{{['新件返还', '破损返还', '故障返还'][['NEW', 'LOST', 'BUG'].indexOf(info.applyType)]}}
								</view>
							</view>
						</view>
						<view class="accessories_nfo_ac">
							<view class="accessories_nfo_title">
								{{info.flag==='SAVE' && info.settlementState?"*":""}}返件方式:
							</view>
							<view class="accessories_nfo_info">
								<radio-group v-if="info.flag==='SAVE' && info.settlementState"
									@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>
									{{['物流快递', '网点自还'][['EXPRESS', 'SELF'].indexOf(info.refundMode)]}}
								</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.examineRemark }}
                </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.refundedTime }}
                </view>
              </view>
            </view>
          </view>
          <popup
            :value="showPopup"
            @input="
              val => {
                showPopup = val
              }
            "
          >
            <view v-if="listItem" style="background: #fff; width: 500upx">
              <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 && info.flag === 'SAVE' && info.settlementState">
				<view class="btcon pv30 ph10">
					<view class="confirm-btn" @tap.stop="confirmation">确认返还</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
  },
  // 额外添加的原生按钮
  onNavigationBarButtonTap(e) {
    if (e.text === '工单查看') {
      this.$navToPage({
        url: '/packageAttachment/pages/returnOfOldParts/workOrderView'
      })
    }
  },
  data() {
    return {
      showPopup: false,
      info: null,
      listItem: null
    }
  },
  onLoad: function (option) {
    this.getDetails(option.applyNo)
  },
  methods: {
    getDetails(applyNo) {
      this.$api
        .get('/app/worker/old-refund/detail', {
          applyNo
        })
        .then(res => {
          this.info = res.data
        })
        .catch(() => {})
    },
    confirmation() {
      var { applyCategory, applyNo, applyType, refundMode } = this.info
      if (applyCategory && applyNo && applyType && refundMode) {
        this.$api
          .post('/app/worker/old-refund/submit', {
            applyCategory,
            applyNo,
            applyType,
            refundMode
          })
          .then(res => {
            this.getDetails(applyNo)
            uni.$emit('updataReturnOfOldPartsList')
          })
          .catch(() => {})
      }
    }
  }
}
</script>

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