store-manage-app/src/pages/revert/admin.vue

<template>
  <view>
    <CuNavbar :isBack="isBack || false" title="数据上报"></CuNavbar>
    <uv-sticky
      customNavHeight="44px"
      :offset-top="offsetTop"
      bgColor="#fff"
      v-if="checkPermission(['admin'])"
    >
      <StoreDown color="#333333" @change="storeChange"  :isAll="false"></StoreDown>
    </uv-sticky>

    <uv-form
      class="mt-30rpx"
      labelPosition="left"
      ref="formRef"
      :model="form"
      errorType="toast"
      labelWidth="130rpx"
    >
      <view class="px-base space-y-20rpx">
        <view class="card">
          <view class="pl-20rpx">
            <uv-form-item label="日期" prop="form.date" @click="showDateSelect">
              <uv-input
                disabled
                v-model="form.date"
                disabledColor="#ffffff"
                placeholder="请选择日期"
                :border="`none`"
              >
              </uv-input>
              <template v-slot:right>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-form-item>
          </view>
        </view>
        <view class="pointer-events-none">
          <view class="card" v-for="(item, i) in form.items" :key="i">
            <TitleComp :title="item.name"></TitleComp>
            <view class="mt-20rpx">
              <uv-line color="#f5f5f5"></uv-line>
            </view>
            <view class="pl-20rpx">
              <uv-form-item label="销售" :prop="`items.${i}.sales`">
                <uv-input
                 
                  v-model="item.sales"
                  :border="`none`"
                  type="digit"
                  :placeholder="``"
                ></uv-input>
              </uv-form-item>
              <uv-line color="#f5f5f5"></uv-line>
              <uv-form-item label="兑奖" :prop="`items.${i}.expenditure`">
                <uv-input
                 
                  v-model="item.expenditure"
                  :border="`none`"
                  type="digit"
                  :placeholder="``"
                ></uv-input>
              </uv-form-item>
            </view>
          </view>
          <view class="card">
            <TitleComp title="汇总情况"></TitleComp>
            <view class="mt-20rpx">
              <uv-line color="#f5f5f5"></uv-line>
            </view>
            <view class="pl-20rpx">
              <uv-form-item label="销售合计" prop="sales">
                <uv-input
                  :border="`none`"
                  type="digit"
                  v-model="form.sales"
                  placeholder=""
                ></uv-input>
              </uv-form-item>
              <uv-line color="#f5f5f5"></uv-line>
              <uv-form-item
                :label="`${store?.is_lottery_store ? '兑奖' : '支出'}合计`"
                prop="expenditure"
              >
                <uv-input
                  type="digit"
                  :border="`none`"
                  v-model="form.expenditure"
                  :placeholder="``"
                ></uv-input>
              </uv-form-item>
              <uv-line color="#f5f5f5"></uv-line>
              <uv-form-item label="新增客户" prop="new_customers">
                <uv-input
                  :border="`none`"
                  v-model="form.new_customers"
                  type="number"
                  placeholder=""
                ></uv-input>
              </uv-form-item>
              <uv-line color="#f5f5f5"></uv-line>
              <uv-form-item label="交账金额" prop="handover_amount">
                <uv-input
                  :border="`none`"
                  type="digit"
                  v-model="form.handover_amount"
                  placeholder=""
                ></uv-input>
              </uv-form-item>
            </view>
          </view>
        </view>
        <view class="card">
          <TitleComp title="时段报表照片">
            <template #right>
              <view class="text-24rpx text-gray-400"></view>
            </template>
          </TitleComp>
          <uv-form-item label="" prop="photos">
            <view>
              <uv-album
                multipleSize="200rpx"
                :urls="form.photos"
                keyName="url"
              ></uv-album>
            </view>
            <!-- <view class="flex-center w-full" v-if="form.photos.length === 0">
              <uv-empty></uv-empty>
            </view> -->
          </uv-form-item>
        </view>
      </view>
    </uv-form>

    <uv-calendars
      color="#ee2c37"
      confirmColor="#ee2c37"
      ref="calendars"
      @confirm="calendarsConfirm"
      :endDate="endDate"
      :date="form.date"
    />
  </view>
</template>

<script setup>
import { http } from '@/utils/request'
import CuNavbar from '@/components/cu-navbar/index'
import TitleComp from '@/components/title-comp/index'
import { sys } from '@climblee/uv-ui/libs/function/index'
import StoreDown from '@/pages/home/components/store-down.vue'
import { ref, computed, reactive } from 'vue'
import checkPermission from '@/utils/permission'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
import { useUserStore } from '@/store/modules/user'

const props = defineProps({
  isBack: {
    type: Boolean,
    default: false,
  },
  dete: {
    type: String,
    default: '',
  },
})
const endDate = timeFormat(
  props.dete ? new Date(props.dete) : new Date(),
  'yyyy-mm-dd'
)
const calendars = ref(null)
const shoreInfo = ref({})
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo || {})
const store = computed(() => userInfo.value.store)

const form = reactive({
  date: endDate,
  items: [],
  new_customers: '',
  sales: '',
  expenditure: '',
  handover_amount: '',
  photos: [],
})

const offsetTop = computed(() => {
  return sys().statusBarHeight
})

const showDateSelect = () => {
  calendars.value.open()
  hideKeyboard()
}

const calendarsConfirm = (e) => {
  form.date = e.fulldate
  getData()
}
const storeChange = (e) => {
  shoreInfo.value = e
  getData()
}

const hideKeyboard = () => {
  uni.hideKeyboard()
}

const getData = async () => {
  const resData = await http.get(`/ledgers/${form.date}`, {
    params: {
      ...shoreInfo.value,
    },
  })

  Object.assign(form, resData, {
    photos:
      resData?.photos?.map((item) => {
        return { url: item }
      }) || [],
  })
}
</script>