xk-doctor-wx/subPackages/sub_salesperson/input/InputListPage.vue

<template>
  <business-page-layout :title="title" :show-back="true">
    <view class="page-wrap" :class="{ 'has-footer': showListFooter }">
      <input-draft-sheet
        v-model="showDraftSheet"
        :input-type="inputType"
        @select="onDraftSelect"
      />
      <view v-for="item in list" :key="item.id" class="card">
        <view class="row" @click="goDetail(item)">
          <text class="name">{{ item.name }}</text>
          <text class="status" :class="'s' + item.status">{{ statusText(item.status) }}</text>
        </view>
        <view class="sub" @click="goDetail(item)">{{ item.mobile }} · {{ displayTime(item.created_at) }}</view>
        <view class="card-actions" @click.stop>
          <button class="mini-btn outline" @click="goDetail(item)">查看详情</button>
          <button v-if="canEditItem(item)" class="mini-btn outline" @click="goEdit(item)">继续编辑</button>
          <button v-if="showDoctorEntry" class="mini-btn" @click="goDoctorInput(item)">录入医生</button>
        </view>
      </view>
      <view v-if="!list.length" class="empty">暂无记录</view>
    </view>
    <view v-if="showListFooter" class="list-footer">
      <button class="footer-btn" @click="goForm()">录入</button>
    </view>
  </business-page-layout>
</template>

<script>
import BusinessPageLayout from '@/subPackages/sub_salesperson/components/business-page-layout.vue'
import InputDraftSheet from '@/subPackages/sub_salesperson/components/InputDraftSheet.vue'
import businessMixin from '@/subPackages/sub_salesperson/common/businessMixin.js'
import { navigateToInputForm, openDraftForm, goDoctorInputFromStore } from '@/subPackages/sub_salesperson/common/inputNavigation.js'

export default {
  mixins: [businessMixin],
  components: { BusinessPageLayout, InputDraftSheet },
  props: {
    auditMode: { type: Boolean, default: false },
    inputType: { type: String, default: 'store' },
    formPath: { type: String, required: true },
    detailPath: { type: String, required: true },
    doctorFormPath: { type: String, default: '' },
  },
  data() { return { list: [], page: 1, showDraftSheet: false } },
  computed: {
    title() {
      if (this.inputType === 'doctor') return this.auditMode ? '医生信息审核' : '医生列表'
      return this.auditMode ? '门店信息审核' : '门店列表'
    },
    showDoctorEntry() {
      return this.inputType === 'store' && !this.auditMode
    },
    showListFooter() {
      return !this.auditMode && !!this.formPath
    },
  },
  methods: {
    handlePageLoad(q = {}) {
      if (String(q.openDraft || '') === '1') {
        this.showDraftSheet = true
      }
    },
    parseListItems(data) {
      if (Array.isArray(data)) return data
      if (data && Array.isArray(data.items)) return data.items
      if (data && Array.isArray(data.data)) return data.data
      return []
    },
    listApi(params) {
      return this.inputType === 'doctor'
        ? this.bizApi.getDoctorInputList(params)
        : this.bizApi.getStoreInputList(params)
    },
    reload() { this.page = 1; this.load(1, false) },
    load(page, append) {
      const params = { page, pageSize: 15 }
      if (this.auditMode) params.status = 0
      this.listApi(params)
        .then((w) => {
          const items = this.parseListItems(w.data)
          if (!items.length && !w.ok) {
            uni.showToast({ title: (w.res && w.res.msg) || '加载失败', icon: 'none' })
            return
          }
          this.list = append ? this.list.concat(items) : items
          this.page = page
        })
        .catch(() => {
          uni.showToast({ title: '加载失败', icon: 'none' })
        })
    },
    canEditItem(item) {
      return !this.auditMode && Number(item.status) === 0
    },
    goEdit(item) {
      if (!this.formPath) return
      uni.navigateTo({ url: `${this.formPath}?id=${item.id}` })
    },
    statusText(s) {
      return { 0: '待审核', 1: '已通过', 2: '已拒绝' }[Number(s)] || '-'
    },
    displayTime(t) {
      if (t == null || t === '') return '-'
      if (typeof t === 'string' && (t.includes('-') || t.includes(':'))) {
        return t.length >= 10 ? t.slice(0, 10) : t
      }
      const n = Number(t)
      if (!Number.isFinite(n) || n <= 0) return '-'
      const ms = n < 1e12 ? n * 1000 : n
      const d = new Date(ms)
      const pad = (x) => String(x).padStart(2, '0')
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
    },
    goForm() {
      navigateToInputForm(this.formPath, this.inputType, {
        onPickDraft: () => { this.showDraftSheet = true },
      })
    },
    onDraftSelect(draft) {
      openDraftForm(this.formPath, draft && draft.id)
    },
    goDetail(item) {
      uni.navigateTo({ url: `${this.detailPath}?id=${item.id}` })
    },
    goDoctorInput(item) {
      goDoctorInputFromStore(item.id, this.bizCtx)
    },
  },
}
</script>

<style scoped>
.page-wrap { padding: 24rpx; box-sizing: border-box; }
.page-wrap.has-footer {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.list-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
.footer-btn {
  width: 100%;
  background: #6acdbb;
  color: #fff;
  font-size: 30rpx;
  line-height: 1.6;
  border-radius: 12rpx;
  padding: 22rpx;
  margin: 0;
}
.card { background: #fff; padding: 28rpx; border-radius: 16rpx; margin-bottom: 16rpx; }
.row { display: flex; justify-content: space-between; align-items: center; }
.name { font-size: 30rpx; font-weight: 600; }
.status { font-size: 24rpx; }
.s0 { color: #FF7D00; }
.s1 { color: #00B42A; }
.s2 { color: #F53F3F; }
.sub { margin-top: 12rpx; color: #86909C; font-size: 24rpx; }
.card-actions { margin-top: 16rpx; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12rpx; }
.mini-btn { font-size: 24rpx; padding: 8rpx 24rpx; background: #6acdbb; color: #fff; line-height: 1.6; margin: 0; }
.mini-btn.outline { background: #fff; color: #6acdbb; border: 1rpx solid #6acdbb; }
.empty { text-align: center; color: #86909C; padding: 80rpx 0; }
</style>