lanan-repair-app/pages-order/chooseImg/chooseImg.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title="图片授权客户" title-color="#333"></VNavigationBar>
    <view class="body">
<!--      <div class="searchBox">-->
<!--        <div class="inputBox">-->
<!--          <input placeholder="请输入人员姓名" type="text">-->
<!--        </div>-->
<!--        <text>搜索</text>-->
<!--      </div>-->
      <div class="userList">
        <u-checkbox-group
            placement="column"
            v-model="checked">
          <view v-for="(item, index) in list" :key="item.id" class="userItem">
            <view class="info">
              <image :src="imgUrlPrex + item.image" class="projImgItem" @click="prviewImage(list,index)"></image>
              <view>
                <text class="trade" v-if="item.isOpen=='1'" style="color:#0174F6 ">已授权</text>
                <text class="trade" v-else>未授权</text>
                <u-checkbox style="float: right"  :name="item.id" iconSize="24" shape="circle" activeColor="#1890ff"></u-checkbox>
              </view>
            </view>
<!--            <radio :value="item.userId+''" :checked="index === current" />-->
          </view>
        </u-checkbox-group>
      </div>
    </view>
    <view class="foot">
      <view class="submit" @click="submit">保存</view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import {bus} from "@/utils/eventBus";
import request from '@/utils/request';
import {getDictTextByCodeAndValue} from "@/utils/utils";
import {getJSONData} from "@/utils/auth";
import config from '@/config'
export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {
      list: [],
      imgUrlPrex:config.baseImageUrl,
      checked:[],
    }
  },
  watch: {
    checked: {
      handler(newVal, oldVal) {
        this.buildList()
        console.log('数组发生变化：', newVal);
      },
      deep: true
    },
  },
  onLoad(data) {
    this.list = getJSONData("chooseImg")
    this.list.map((item)=>{
      if(item.isOpen=='1'){
        this.checked.push(item.id)
      }
    })
  },
  methods: {
    /**
     * 预览图片
     */
    prviewImage(imgList, index) {
      let urls = []
      imgList.forEach(i => {
        urls.push(this.imgUrlPrex+i.image)
      })
      uni.previewImage({
        urls: urls,
        current: index
      });
    },
    /**
     * 选中或取消选中，重新组装数据
     */
    buildList(){
      this.list.map((item)=>{
        if(this.checked.includes(item.id)){
          item.isOpen="1"
        }else{
          item.isOpen="0"
        }
      })
    },
    submit() {
      let itemList = []
      this.list.map((item)=>{
        itemList.push({
          id:item.id,
          isOpen:item.isOpen
        })
      })
      console.log(itemList)
      request({
        url: '/admin-api/dl/repair-records/updateItemBatch',
        method: 'post',
        data:itemList
      }).then((res)=>{
        uni.showToast({
          title: '操作成功！',
          icon: 'none'
        })
        setTimeout(()=>{
            uni.navigateBack()
        },700)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 20rpx 0;

    .projImgItem {
      width: 180rpx;
      height: 180rpx;
      background-color: #efefef;
    }

    .searchBox {
      margin: 0 32rpx;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 30rpx;

      display: flex;
      align-items: center;
      column-gap: 20rpx;

      font-weight: 500;
      font-size: 28rpx;
      color: #0174F6;

      .inputBox {
        flex: 1;
        width: 0;
        color: #000;
      }
    }
    .u-checkbox-group{
      display: block !important;
    }
    .userList {
      background-color: #fff;
      padding: 0 20rpx;
      height: 100%;

      .userItem {
        margin: 10rpx;
        border: 1rpx solid #DDDDDD;
        border-radius: 10rpx;
        width: 210rpx;
        float: left;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .info {
          display: flex;
          flex-direction: column;
          row-gap: 20rpx;
          margin: auto;

          .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
          .trade {
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
      //.userItem:last-child {
      //  border-bottom: none;
      //}
    }
  }

  .foot {
    background-color: #fff;
    padding: 30rpx;

    .submit {
      margin: 0 auto;
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
}
</style>