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"
      >取消</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";
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,
            drawThumbnai:selectedPainting.HdPic,
            drawerNum:selectedPainting.Tnum,//画家编号
            drawNum:selectedPainting.Tfnum,
        });
        if (res.status === 0) {
            showMessage({ type: "sucess", message: "添加画作成功" });
            isButtonDisabled.value = true;
            buttonText.value = "已添加";
            paintingList();
        } 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
  });

}

</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>