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="画家姓名/编号/画作编号/画作名称" 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="login">搜索</up-button>
      </view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
					@scrolltolower="lower" @scroll="scroll">
      <view 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="click"></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>
      </view>
    </scroll-view>
    </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:"",
});
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,
    ...param,
  });
  if (res.status === 0) {
        loading.value = false
        state.tableData = res.data.Data.map((item) =>{
          return {
            ...item,
            checked:''
          }
        })||[]
        console.log(1111,state.tableData)
      } else {
        showMessage({ type: "error", message: res.msg });
      }
      loading.value = false
}
//添加画作
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,
            drawNum:selectedPainting.Tnum,
            drawerNum: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 lower=() =>{
  console.log(888888)
}
const scroll =(e) =>{
  console.log(e)
}
</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: 100%;
    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: 20rpx;
    left: 0;
    padding: 0 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    height: 8%;
  }
</style>