store-management-app/src/pages/index/index.vue

<template>
  <view class="content">
    <navBar> 添加画作 </navBar>
    <view class="container-box">
      <span style="font-weight: bold"> 已扫画筒号：{{ state.pid }} </span>
      <view style="display: flex; align-items: center">
        <up-input
          class="login-input"
          placeholder="画家姓名/画作名称"
          v-model="state.searchValue"
          style="flex: 1; margin-right: 10rpx"
          clearable
        >
        </up-input>

        <up-button
          style="
            width: 120rpx;
            height: 80rpx;
            margin-top: 15rpx;
            margin-left: 15rpx;
          "
          color="#EFC54E"
          throttleTime="5"
          :loading="loading"
          @click="paintingList((state.page = 1))"
          >搜索</up-button
        >
      </view>
      <up-list @scrolltolower="scrolltolower" style="height: 1120rpx">
        <up-list-item
          class="painting-box"
          v-for="(painting, index) in state.tableData"
          :key="index"
        >
          <span style="display: flex; align-items: center; position: relative">
            <up-image
              :show-loading="true"
              :src="painting.HdPic"
              width="100px"
              height="100px"
              @click="enlarge(painting.HdPic)"
            ></up-image>
            <span
              style="display: flex; flex-direction: column; margin-left: 10px"
            >
              <span style="font-weight: bold">{{ painting.ArtworkName }}</span>
              <span style="color: #bcbcbc; font-size: 16px"
                >画作编号：{{ painting.Tfnum }}</span
              >
              <span style="color: #bcbcbc; font-size: 16px"
                >画家编号：{{ painting.Tnum }}</span
              >
              <span style="color: #bcbcbc; font-size: 16px"
                >画家姓名：{{ painting.ArtistName }}</span
              >
              <span style="color: #bcbcbc; font-size: 16px"
                >平尺（寸）：{{ painting.Ruler }}</span
              >
            </span>
            <up-radio-group
              v-model="painting.checked"
              style="position: absolute; left: 550rpx; bottom: 150rpx"
              placement="right"
              @change="groupChange"
            >
              <up-radio :name="painting.ArtworkUuid"></up-radio>
            </up-radio-group>
          </span>
        </up-list-item>
      </up-list>
    </view>
  </view>
  <view class="button-container">
    <up-button
      style="width: 336rpx; margin: auto; height: 80rpx"
      color="#BABABA"
      throttleTime="5"
      @click="backScan"
      v-if="runTimeEnv()"
      >取消</up-button
    >
    <up-button
      style="width: 336rpx; margin: auto; height: 80rpx"
      color="#EFC54E"
      throttleTime="5"
      :loading="loading"
      :disabled="isButtonDisabled"
      @click="doneSet"
    >
      {{ buttonText }}</up-button
    >
  </view>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useToast from "@/hooks/toast/useToast.js";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { creChangepainting, add } from "@/api/login.js";
import { closeWebview, runTimeEnv } from "../../../utils/index";

const { showMessage } = useToast();
const loading = ref(false);
const isButtonDisabled = ref(false);
const buttonText = ref("确认");
const state = reactive({
  id: "",
  pid: "",
  tableData: [],
  page: 1,
  pageSize: 10,
  selectedUuid: "",
  searchValue: "",
});
onLoad((options) => {
  state.id = options.id;
  state.pid = options.pid;
  paintingList();
});
const groupChange = (e) => {
  state.tableData.forEach((item) => {
    if (item.ArtworkUuid !== e) {
      item.checked = "";
    }
  });
};
// 获取可添加的画作列表
const paintingList = async (param) => {
  loading.value = true;
  const res = await creChangepainting({
    Tfnum: "",
    ArtworkName: "",
    Tnum: "",
    ArtistName: "",
    page: state.page,
    pageSize: state.pageSize,
    keywords: state.searchValue,
    ...param,
  });
  loading.value = false;
  if (res.status === 0) {
    if (res.data.Data !== null) {
      state.tableData = res.data.Data.map((item) => {
        return {
          ...item,
          checked: "",
        };
      });
      console.log(1111, state.tableData);
    } else {
      state.tableData = [];
      showMessage({ type: "error", message: "查询失败，暂无画作!" });
    }
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};

//添加画作
const doneSet = async () => {
  loading.value = true;
  const selectedPainting = state.tableData.find((item) => item.checked);
  if (selectedPainting) {
    const res = await add({
      type: "add",
      id: state.id,
      pid: state.pid,
      drawUid: selectedPainting.ArtworkUuid,
      drawName: selectedPainting.ArtworkName,
      drawerName: selectedPainting.ArtistName,
      drawerUid: selectedPainting.ArtistUuid,
      rulerNum: selectedPainting.Ruler,
      drawThumbnail: selectedPainting.HdPic,
      drawerNum: selectedPainting.Tnum, //画家编号
      drawNum: selectedPainting.Tfnum,
    });
    if (res.status === 0) {
      showMessage({ type: "sucess", message: "添加画作成功" });
      isButtonDisabled.value = true;
      buttonText.value = "已添加";
      state.searchValue = "";
      // 重新获取初始画作列表
      paintingList({
        page: 1,
        pageSize: 10,
        keywords: "",
      });
    } else {
      showMessage({ type: "error", message: res.msg });
    }
  } else {
    showMessage({ type: "error", message: "请先选择要添加的画作" });
  }
  loading.value = false;
};
//下拉刷新数据
const scrolltolower = async () => {
  state.page = state.page + 1;
  const res = await creChangepainting({
    Tfnum: "",
    ArtworkName: "",
    Tnum: "",
    ArtistName: "",
    page: state.page,
    pageSize: state.pageSize,
    keywords: state.searchValue,
  });
  if (res.status === 0) {
    if (res.data.Data !== null) {
      const newData = res.data.Data.map((item) => {
        return {
          ...item,
          checked: "",
        };
      });
      const uniqueData = newData.filter((newItem) => {
        return !state.tableData.some(
          (existingItem) => existingItem.ArtworkUuid === newItem.ArtworkUuid
        );
      });
      state.tableData = state.tableData.concat(uniqueData);
    }
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};
//点击照片预览
const enlarge = (src) => {
  uni.previewImage({
    urls: [src],
    current: src,
  });
};
const backScan = () => {
  closeWebview();
};
</script>

<style lang="scss" scoped>
page {
  background: url("@/static/bgp.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
  box-sizing: border-box;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .container-box {
    height: auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #fff;
  }

  .login-input {
    width: 80%;
    display: flex;
    background-color: #f9f9f9;
    margin-top: 20rpx;
    padding: 32rpx 24rpx;
    box-sizing: border-box;
    height: 96rpx;
  }

  .painting-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
  }
}
.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  bottom: 1rpx;
  left: 0;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  height: 8%;
}
</style>