uni-Identify-quality/pages/consignment-painting/index.vue

<template>
  <div class="order-details">
    <title-block class="titile-d" title="寄存画作">
      <template #left>
        <div>
          <image
            style="width: 112rpx; height: 52rpx"
            src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"
            @click="back"
          ></image>
        </div>
      </template>
    </title-block>
    <div class="content-list" v-if="listPaintings.length > 1">
      <div class="wrap1">*请注意确认寄存结束时间</div>
      <div class="wrap2">
        <div class="wrap2_1" :style="{ height: `${listHeight}rpx` }">
          <div
            :class="['item', index === currentIndex ? 'active' : '']"
            @click="itemClick(index)"
            v-for="(item, index) of listPaintings"
          >
            <div class="item_1">{{ index + 1 }}</div>
            <div class="item_2">
              <div class="item_2_1">
                <img :src="listPaintings[index].fileList1[0].url" alt="" />
              </div>
              <div class="item_2_2">{{ listPaintings[index].artworkNum }}</div>
            </div>
            <div class="item_3">{{ listPaintings[index].artworkName }}</div>
            <div class="item_4">
              {{
                listPaintings[index].warehouseID
                  ? addressList.find(
                      (x) => x.ID === listPaintings[index].warehouseID
                    ).address
                  : ""
              }}
            </div>
            <div class="item_5">{{ listPaintings[index].endAt }}</div>
          </div>
        </div>
        <div class="wrap2_2" @click="expand">
          <div
            class="wrap2_2_1"
            v-if="listPaintings.length > 2"
            :style="{
              transform: `translate(-50%, -50%) ${
                isExpand ? 'rotate(180deg)' : ''
              }`,
            }"
          ></div>
          <div class="wrap2_2_2">共计{{ listPaintings.length }}幅画作</div>
        </div>
      </div>
    </div>
    <scroll-view
      class="content-center"
      :style="{ marginTop: `${contentListHeight + 10}px` }"
      @scroll="scrollDetail"
      :scroll-into-view="scrollId"
      scroll-y="true"
    >
      <div
        class="content-scroll"
        v-for="(item, index) of listPaintings"
        :id="`item-${index}`"
      >
        <div class="painting-name" v-if="listPaintings.length > 1">
          <div class="wrap1">画作{{ index + 1 }}：</div>
          <div class="wrap2" @click="itemDelete(index)">删除</div>
        </div>
        <div class="content2">
          <u-upload
            :fileList="listPaintings[index].fileList1"
            @afterRead="
              (e) => {
                afterRead(e, index);
              }
            "
            @delete="
              (e) => {
                deletePic(e, index);
              }
            "
            name="6"
            multiple
            :maxCount="1"
            width="404rpx"
            height="306rpx"
          >
            <div
              style="
                width: 404rpx;
                height: 306rpx;
                background: #000;
                border-radius: 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <div style="margin-bottom: 14rpx">
                <image
                  style="width: 38.32rpx; height: 38.2rpx"
                  src="../../static/zu142@3x.png"
                ></image>
              </div>
              <div style="font-size: 32rpx; color: #fff">上传画作图片</div>
            </div>
          </u-upload>
        </div>
        <div class="content3">
          <div class="prompt">*扫描自动填入</div>
          <div class="wrap1">
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作编号</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  style="color: #939393; font-size: 24rpx"
                  v-model="listPaintings[index].artworkNum"
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请输入画作编号"
                />
              </div>
              <div class="wrap1_1_4"></div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作名称</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  style="color: #939393; font-size: 24rpx"
                  v-model="listPaintings[index].artworkName"
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请输入画作名称"
                />
              </div>
              <div class="wrap1_1_4"></div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画家名称</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  style="color: #939393; font-size: 24rpx"
                  v-model="listPaintings[index].artistName"
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请输入画家名称"
                />
              </div>
              <div class="wrap1_1_4"></div>
            </div>
            <div class="wrap1_1">
              <div class="wrap1_1_1">画作平尺数</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  type="number"
                  style="color: #939393; font-size: 24rpx"
                  v-model="listPaintings[index].artworkSquareSize"
                  @input="
                    (e) => {
                      inputConfirm(e, index);
                    }
                  "
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请输入画作平尺数"
                />
              </div>
            </div>
          </div>
          <div class="wrap2"></div>
        </div>
        <div class="content4">
          <div class="wrap1">
            <div class="wrap1_1" @click="show2Click(index)">
              <div class="wrap1_1_1">寄存地址</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  style="color: #939393; font-size: 24rpx"
                  disabled
                  :value="
                    listPaintings[index].warehouseID
                      ? addressList.find(
                          (x) => x.ID === listPaintings[index].warehouseID
                        ).address
                      : ''
                  "
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请选择寄存地址"
                />
              </div>

              <div class="wrap1_1_4"></div>
              <div class="wrap1_1_5">
                <image src="../../static/zu611@3x.png"></image>
              </div>
            </div>
            <div class="wrap1_1" @click="openShow1(index)">
              <div class="wrap1_1_1">寄存时长</div>
              <div class="wrap1_1_2"></div>
              <div class="wrap1_1_3">
                <input
                  style="color: #939393; font-size: 24rpx"
                  :value="listPaintings[index].endAt"
                  disabled
                  placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
                  placeholder="请选择寄存时长"
                />
              </div>
              <div class="wrap1_1_5">
                <image src="../../static/zu612@3x.png"></image>
              </div>
            </div>
          </div>
          <div class="wrap2"></div>
        </div>
        <div
          class="content7"
          v-if="index === listPaintings.length - 1"
          @click="addPainting"
        >
          <div class="wrap1">
            <div class="horizontal"></div>
            <div class="vertical"></div>
          </div>
          <div class="wrap2">添加</div>
        </div>
      </div>
    </scroll-view>
    <div class="content5" @click="expand1">
      <div
        class="wrap4"
        v-show="isExpand1"
        :style="{ top: `-${152 * listPaintings.length}rpx` }"
      >
        <div class="item" v-for="(item, index) in listPaintings">
          <div class="item_1">{{ index + 1 }}</div>
          <div class="item_2">{{ item.artworkNum }}</div>
          <div class="item_3">{{ item.artworkName }}</div>
          <div class="item_4">¥ {{ item.expectedPayment }}</div>
        </div>
      </div>
      <div
        class="wrap3"
        :style="{ transform: `${isExpand1 ? '' : 'rotate(180deg)'}` }"
      >
        <img
          src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png"
          alt=""
        />
      </div>
      <div class="wrap1">
        <div class="wrap1_1">*仅微信付款</div>
        <div class="wrap1_2">预计 ¥{{ totalMoney || "0" }}</div>
      </div>
      <div class="wrap2" @click.stop="signContract">确认金额并签署合同</div>
    </div>
    <u-popup
      :round="15"
      :show="show_2"
      mode="bottom"
      @open="
        () => {
          show_2 = true;
        }
      "
    >
      <div class="poup1">
        <div class="content1">
          <div class="wrap1">更换您的寄存地址</div>
          <div @click="show_2 = false" class="wrap2">
            <image
              src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"
            ></image>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content3">
          <div
            v-for="(itemaddress, index1) of addressList"
            @click="selectAddress(itemaddress)"
            :class="[
              listPaintings[currentIndex].warehouseID === itemaddress.ID
                ? 'active'
                : '',
            ]"
            :key="index1"
            class="wrap1"
          >
            <div class="wrap1_1">{{ itemaddress.address }}</div>
            <div class="wrap1_2">*剩余{{ itemaddress.leftNum }}位置</div>
          </div>
        </div>
        <div class="content2"></div>
        <div class="content6" @click="confirmAddress">
          <div class="wrap1">确定</div>
        </div>
      </div>
    </u-popup>
    <u-picker
      v-if="show_1"
      :show="show_1"
      ref="uPicker"
      :columns="columns"
      @confirm="
        (e) => {
          confirmDate(e);
        }
      "
      @cancel="closeClick"
      @change="
        (e) => {
          changeHandler(e);
        }
      "
    ></u-picker>
    <u-loading-page
      bgColor="rgba(0,0,0,0.5)"
      :loading="loading"
      loading-text="正在进入法大大签署..."
    ></u-loading-page>
    <u-toast ref="uToast"></u-toast>
  </div>
</template>
<script>
import http from "@/http/api";
import { postDataByParams } from "../../http/service";
import dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "order-details",
  data() {
    return {
      itemHeight: 0,
      scrollId: "item-0",
      columns: [
        [180],
        ["*"],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        ["="],
        [180],
      ],
      currentIndex: 0,
      listPaintings: [
        {
          expectedPayment: "",
          fileList1: [],
          artworkNum: "",
          artworkName: "",
          artistName: "",
          artworkSquareSize: "",
          warehouseID: "",
          endAt: "",
        },
      ],
      contentListHeight: 0,
      isExpand: false,
      isExpand1: false,
      listHeight: 308,
      minDate: "",
      show: false,
      value1: "",
      loading: false,
      fileList1: [],
      dayMoney: "",
      expectedPayment: "",
      warehouseID: "",
      cycleId: "",
      cycleList: [],
      addressList: [],
      info: {},
      show_2: false,
      data: [],
      show_1: false,
      title: "picker-view",

      visible: true,
      url: "",
    };
  },
  computed: {
    totalMoney() {
      return this.listPaintings.reduce((total, item) => {
        return total + Number(item.expectedPayment);
      }, 0);
    },
  },
  onLoad(load) {
    if (load.url) {
      this.url = load.url;
      this.getDetailUrl();
    }
    if (load.type === "detail") {
      this.getData();
      this.type = load.type;
    }
    if (load.type === "confirm") {
      this.listPaintings = uni.getStorageSync("orderingInfo").listPaintings;
    }
    if (load.type === "scan") {
      this.listPaintings = uni.getStorageSync("scanlist")?.map((x) => {
        return {
          ...x,
          expectedPayment: "",
          warehouseID: "",
          fileList1: [{ url: x.artworkImg }],
        };
      });
    }
  },
  mounted() {
    this.getCycle();
    if (this.$mp.query.url) {
      this.url = this.$mp.query.url;
      this.getDetailUrl();
    }
    this.getAddress();
    this.$nextTick(async () => {
      this.itemHeight = await this.getElementHeight(".content-scroll");
      this.getheight();
    });
  },
  methods: {
    inputConfirm: _.debounce(function (event, index) {
      this.listPaintings[index].artworkSquareSize = event.target.value.replace(
        /\D/g,
        ""
      );
      let number = parseInt(this.listPaintings[index].artworkSquareSize, 10);
      if (isNaN(number) || number <= 0) {
        this.listPaintings[index].artworkSquareSize = "";
      } else {
        this.obtainAmount(index);
      }
    }, 1000),
    addDaysToCurrentDate(days) {
      return dayjs().add(days, "day").format("YYYY-MM-DD");
    },
    show2Click(index) {
      this.currentIndex = index;
      this.show_2 = true;
    },
    closeClick() {
      this.show_1 = false;
    },
    getElementHeight(selector) {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery();
        query
          .select(selector)
          .boundingClientRect((data) => {
            if (data) {
              resolve(data.height); // 成功获取高度时，通过 Promise 返回
            } else {
              reject(new Error("无法获取元素高度")); // 如果找不到元素或获取高度失败时，通过 Promise 返回错误
            }
          })
          .exec();
      });
    },
    async scrollDetail(event) {
      const scrollTop = event.detail.scrollTop; // 获取当前滚动位置
      const totalHeight = this.listPaintings.length * this.itemHeight;
      const scrollPercent = (scrollTop / totalHeight) * 100;
      const index = Math.floor(scrollTop / this.itemHeight); // 计算索引
      /* console.log(`滚动了 ${scrollPercent}%`);
      console.log(`滚动到了第 ${index} 个元素的位置`);*/
      this.currentIndex = index;
    },
    async getData() {
      const data1 = {
        ID: Number(this.$mp.query.ID),
      };
      const res1 = await postDataByParams("/api/v2/warehouse/detail", data1);
      if (res1.code === 200) {
        this.info = res1.data;
      }
    },
    changeHandler(e, i) {
      const {
        columnIndex,
        value,
        values,
        index,
        picker = this.$refs.uPicker,
      } = e;
      if (columnIndex === 2) {
        picker.setColumnValues(this.columns.length - 1, [
          this.columns[2][e.index] * this.columns[0][0],
        ]);
      }
    },
    itemDelete(index) {
      this.listPaintings.splice(index, 1);
      this.currentIndex = 0;
      this.scrollId = `item-0`;
      if (this.listPaintings.length === 1) {
        this.contentListHeight = 0;
      }
      this.$nextTick(() => {
        this.getheight();
      });
    },
    itemClick(index) {
      this.scrollId = `item-${index}`;
      this.currentIndex = index;
    },
    addPainting() {
      this.listPaintings.push({
        expectedPayment: "",
        fileList1: [],
        artworkNum: "",
        artworkName: "",
        artistName: "",
        artworkSquareSize: "",
        warehouseID: this.listPaintings[0].warehouseID,
        endAt: this.listPaintings[0].endAt,
      });
      this.$nextTick(() => {
        this.getheight();
      });
      this.currentIndex = this.currentIndex + 1;
    },
    getheight() {
      let query = uni.createSelectorQuery().in(this);
      query
        .select(".content-list")
        .boundingClientRect((data) => {
          if (data) {
            let query = uni.createSelectorQuery().in(this);
            query
              .select(".titile-d")
              .boundingClientRect((data1) => {
                if (data1) {
                  this.contentListHeight = data.bottom - data1.bottom;
                }
              })
              .exec();
          }
        })
        .exec();
    },
    expand1() {
      if (this.isExpand) {
        this.listHeight = 154 * 2;
      }
      if (this.isExpand) {
        this.isExpand = false;
      }

      this.isExpand1 = !this.isExpand1;
    },
    expand() {
      if (this.isExpand) {
        this.listHeight = 154 * 2;
      } else {
        this.listHeight =
          154 *
          (this.listPaintings.length <= 7 ? this.listPaintings.length : 7);
      }
      this.isExpand = !this.isExpand;
      if (this.isExpand1) {
        this.isExpand1 = false;
      }
    },

    confirmDate(data, index) {
      this.listPaintings[this.currentIndex].endAt =
        data.value[data.value.length - 1];
      if (this.currentIndex === 0) {
        for (let listPainting of this.listPaintings) {
          listPainting.endAt = data.value[data.value.length - 1];
        }
      }
      this.obtainAmount(this.currentIndex, this.currentIndex === 0);
      this.show_1 = false;
    },
    openShow1(index) {
      if (!this.listPaintings[index].artworkSquareSize) {
        uni.showToast({
          title: "请先填写画作平尺数",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      this.currentIndex = index;
      this.show_1 = true;
    },
    uploadFilePromise(url, type = null) {
      return new Promise((resolve) => {
        uni.uploadFile({
          url: http.baseUrl + "/api/wxuser/uploadpic",
          filePath: url,
          name: "file",
          success: (res) => {
            const { path } = JSON.parse(res.data).data;
            resolve(path);
          },
        });
      });
    },
    deletePic() {
      this.fileList1 = [];
    },
    // 新增图片
    async afterRead(event, index) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.listPaintings[index].fileList1.length;
      lists.map((item) => {
        this.listPaintings[index].fileList1.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, "check");
        let item = this.listPaintings[index].fileList1[fileListLen];
        this.listPaintings[index].fileList1.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    async signContract() {
      const checks = [
        {
          value: "fileList1",
          message: "画作图片",
        },
        {
          value: "artworkSquareSize",
          message: "画作平尺数",
        },
        {
          value: "artistName",
          message: "画家名称",
        },
        {
          value: "artworkName",
          message: "画作名称",
        },
        {
          value: "artworkNum",
          message: "画作编号",
        },
        {
          value: "warehouseID",
          message: "寄存地址",
        },
        {
          value: "endAt",
          message: "择寄存时长",
        },
      ];
      for (const [index, item] of this.listPaintings.entries()) {
        for (const check of checks) {
          if (check.value === "fileList1" && item.fileList1.length < 1) {
            uni.showToast({
              title: `请完善第${index + 1}条数据的${check.message}`,
              icon: "none",
            });
            return;
          }

          if (!item[check.value]) {
            uni.showToast({
              title: `请完善第${index + 1}条数据的${check.message}`,
              icon: "none",
            });
            return;
          }
          if (check.value === "artworkSquareSize") {
            if (Number(item[check.value]) < 1) {
              uni.showToast({
                title: `第${index + 1}条数据的${check.message}应大于0`,
                icon: "none",
              });
              return;
            }
          }
        }
      }
      this.loading = true;
      const data = {
        orders: this.listPaintings.map((x) => {
          return {
            endAt: this.addDaysToCurrentDate(x.endAt),
            warehouseID: x.warehouseID,
            artworkSquareSize: Number(x.artworkSquareSize),
            artworkName: x.artworkName,
            artworkImg: x.fileList1?.[0]?.url,
            artworkNum: x.artworkNum,
            artistName: x.artistName,
          };
        }),
      };
      const res = await postDataByParams(
        "/api/v2/warehouse/fdd/contract/h5",
        data
      );
      if (res.code === 200) {
        uni.setStorageSync("jumpUrl", res.data.jumpUrl);
        uni.setStorageSync("orderingInfo", {
          listPaintings: this.listPaintings,
          transactionId: res.data.transactionId,
        });
        uni.navigateTo({
          url: `/pages/signwebview/index`,
        });
      } else {
        // uni.showToast({
        //   title: res.msg,
        //   duration: 2000,
        //   icon: "none",
        // });
        this.$refs.uToast.show({
          message: res.msg,
          icon: "none",
        });
      }
      this.loading = false;
    },
    async obtainAmount(index, list = false) {
      let data = {
        orders: [
          {
            artworkSquareSize: Number(
              this.listPaintings[index].artworkSquareSize
            ),
            endAt: this.addDaysToCurrentDate(this.listPaintings[index].endAt),
          },
        ],
      };
      if (list) {
        data = {
          orders: this.listPaintings.map((x) => {
            return {
              artworkSquareSize: Number(x.artworkSquareSize),
              endAt: this.addDaysToCurrentDate(x.endAt),
            };
          }),
        };
      }
      const res = await postDataByParams("/api/v2/warehouse/calculate", data);
      if (res.code === 200) {
        if (list) {
          this.listPaintings.forEach((x, ix) => {
            res.data.orders?.forEach((y, iy) => {
              if (ix === iy) {
                x.expectedPayment = Number(y.money);
              }
            });
          });
        } else {
          this.listPaintings[index].expectedPayment = Number(
            res.data.orders?.[0]?.money
          );
        }
      }
    },
    confirmCycle() {
      this.show_1 = false;
    },
    confirmAddress() {
      this.show_2 = false;
    },
    selectAddress(item) {
      this.listPaintings[this.currentIndex].warehouseID = item.ID;
      if (this.currentIndex === 0) {
        this.listPaintings.forEach((x) => {
          x.warehouseID = item.ID;
        });
      }
    },
    selectionPeriod(item) {
      this.cycleId = item.ID;
    },
    async getCycle() {
      const res = await postDataByParams("/api/warehouse/cycle");
      if (res.code === 200) {
        this.cycleList = res.data.data;
      }
    },
    async getAddress() {
      const res = await postDataByParams("/api/warehouse/address");
      if (res.code === 200) {
        this.addressList = res.data.data;
        console.log(this.addressList, "addressList");
      }
    },
    async getDetailUrl() {
      const data = {
        url: this.url,
      };
      const res = await postDataByParams("/api/warehouse/ocr", data);
      if (res.code === 200) {
        this.info = res.data;
        this.fileList1 = [{ url: this.info.artworkImg }];
      } else {
        this.$refs.uToast.show({
          message: res.msg,
          icon: "none",
        });
        // uni.showToast({
        //   title: res.msg,
        //   icon: "none",
        // });
      }
      console.log(res, "getDetailUrl");
    },
    isDateFont(item, num) {
      if (Array.isArray && this.data.length === 3) {
        return this.data[num] === item;
      }
    },
    changeData(e) {
      this.data = [
        e.detail.value[0] + 1990,
        e.detail.value[1] + 1,
        e.detail.value[2] + 1,
      ];
    },
    back() {
      uni.navigateBack({ delta: 2 });
    },
  },
};
</script>
<style scoped lang="scss">
.fontDate {
  color: #fff;
}

/deep/ .pickerSelected {
  color: #ffffff !important;
  z-index: 2;
}

/deep/ .test {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  background: #a9d897;
  color: #fff;
  height: 62rpx;
}

uni-picker-view {
  display: block;
}

uni-picker-view .uni-picker-view-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: white;
}

uni-picker-view[hidden] {
  display: none;
}

picker-view {
  width: 100%;
  // height: 600upx;
  height: 400rpx;
  margin-top: 20 upx;
}

.item {
  line-height: 100 upx;
  text-align: center;
}

.order-details {
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  .content-list {
    top: 130rpx;
    z-index: 999;
    position: absolute;
    width: 686rpx;
    margin-top: 34rpx;
    text-align: right;
    .wrap1 {
      margin-bottom: 10rpx;
      font-size: 24rpx;
      color: rgba(78, 150, 77, 1);
    }
    .wrap2 {
      box-sizing: border-box;
      padding-top: 20rpx;
      border: 2rpx dashed rgba(118, 196, 88, 1);
      border-radius: 20rpx;
      background-color: #fff;
      padding-left: 20rpx;
      padding-right: 20rpx;
      .wrap2_2 {
        border-top: 1rpx dashed rgba(118, 196, 88, 1);
        height: 60rpx;
        position: relative;
        .wrap2_2_2 {
          line-height: 60rpx;
          color: rgba(118, 196, 88, 1);
          font-size: 24rpx;
        }
        .wrap2_2_1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 30rpx;
          height: 16rpx;
          background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png");
          background-size: cover;
        }
      }
      .wrap2_1 {
        z-index: 999;
        padding-bottom: 20rpx;
        overflow-y: scroll;
        .item {
          height: 154rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 10rpx;
          padding-right: 10rpx;
          &.active {
            background-color: rgb(245, 251, 242);
          }
          .item_5 {
            width: 134rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_4 {
            margin-right: 28rpx;
            width: 192rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_3 {
            margin-right: 48rpx;
            width: 78rpx;
            color: rgba(98, 98, 98, 1);
            font-size: 24rpx;
          }
          .item_2 {
            margin-right: 24rpx;
            width: 68rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item_2_2 {
              color: rgba(147, 147, 147, 1);
              font-size: 20rpx;
            }
            .item_2_1 {
              background-color: #000;
              width: 68rpx;
              height: 68rpx;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .item_1 {
            margin-right: 18rpx;
            color: rgba(88, 166, 107, 1);
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36rpx;
            height: 36rpx;
            border: 5rpx solid rgba(118, 196, 88, 1);
            border-radius: 50%;
            background: transparent;
          }
        }
      }
    }
  }

  & > .content5 {
    align-items: center;
    left: 0;
    background: #fff;
    width: 750rpx;
    position: fixed;
    bottom: 0;
    height: 172rpx;
    display: flex;
    .wrap4 {
      z-index: 999;
      width: 100%;
      background-color: #fff;
      position: absolute;
      border-top-right-radius: 20rpx;
      border-top-left-radius: 20rpx;
      border-top: 1px dashed rgba(118, 196, 88, 1);
      .item {
        height: 152rpx;
        display: flex;
        align-items: center;
        .item_4 {
          margin-right: 64rpx;
          margin-left: auto;
          color: rgba(118, 196, 88, 1);
          font-size: 24rpx;
          font-weight: bold;
        }
        .item_3 {
          width: 100rpx;
          margin-left: 48rpx;
          color: rgba(98, 98, 98, 1);
          font-size: 24rpx;
        }
        .item_2 {
          width: 100rpx;
          margin-left: 34rpx;
          color: rgba(98, 98, 98, 1);
          font-size: 24rpx;
        }
        .item_1 {
          margin-left: 56rpx;
          color: rgba(88, 166, 107, 1);
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 36rpx;
          height: 36rpx;
          border: 5rpx solid rgba(118, 196, 88, 1);
          border-radius: 50%;
          background: transparent;
        }
      }
    }
    .wrap3 {
      margin-left: 32rpx;
      img {
        width: 30rpx;
        height: 16rpx;
      }
    }
    .wrap2 {
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 392rpx;
      height: 56rpx;
      color: #fff;
      font-size: 32rpx;
      background: #76c458;
    }

    .wrap1 {
      margin-left: 18rpx;
      margin-right: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: start;

      .wrap1_1 {
        color: #939393;
        font-size: 16rpx;
      }

      .wrap1_2 {
        font-size: 32rpx;
        color: #76c458;
      }
    }
  }

  .poup1 {
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 72rpx;

    & > .content6 {
      margin-top: 26rpx;
      display: flex;
      justify-content: center;

      .wrap1 {
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76c458;
        border-radius: 30rpx;
      }
    }

    & > .content3 {
      margin-bottom: 70rpx;

      .wrap1 {
        margin-bottom: 18rpx;
        border-radius: 32rpx;
        height: 80rpx;
        box-sizing: border-box;
        border: 2px solid #76c458;
        padding-left: 44rpx;
        padding-right: 42rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .wrap1_2 {
          color: #76c458;
          font-size: 26rpx;
        }

        .wrap1_1 {
          font-size: 28rpx;
          color: #000;
        }

        &.disabled {
          border: none;
          background: #d8d8d8;

          .wrap1_1 {
            color: #626262;
            font-size: 28rpx;
          }

          .wrap1_2 {
            color: #626262;
            font-size: 16rpx;
          }
        }

        &.active {
          background: #76c458;

          .wrap1_2 {
            color: #fff;
            font-size: 26rpx;
          }

          .wrap1_1 {
            font-size: 28rpx;
            color: #fff;
          }
        }
      }
    }

    & > .content1 {
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;

      .wrap1 {
        color: #000;
        font-size: 32rpx;
      }

      .wrap2 {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    & > .content2 {
      margin-bottom: 36rpx;
      height: 1rpx;
      background: #626262;
    }
  }

  .poup {
    margin-bottom: 72rpx;
    padding-top: 28rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    & > .content7 {
    }
    & > .content3 {
      display: flex;
      flex-wrap: wrap;

      .wrap4 {
        margin-bottom: 40rpx;
        border-radius: 32rpx;
        margin-top: 30rpx;
        width: 220rpx;
        height: 84rpx;
        background: #d8d8d8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .wrap4_1 {
          color: #626262;
          font-size: 28rpx;
        }

        .wrap4_2 {
          color: #be7e7e;
          font-size: 16rpx;
        }
      }

      .wrap1 {
        box-sizing: border-box;
        flex-shrink: 0;
        margin-right: 16rpx;
        font-size: 28rpx;
        border-radius: 32rpx;
        border: 2rpx solid #76c458;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220rpx;
        height: 84rpx;

        &:nth-child(3) {
          margin-right: 0;
        }

        &.active {
          color: #fff;
          background: #76c458;
        }
      }
    }

    & > .content6 {
      margin-top: 26rpx;
      display: flex;
      justify-content: center;

      .wrap1 {
        color: #fff;
        font-size: 28rpx;
        width: 436rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76c458;
        border-radius: 30rpx;
      }
    }

    & > .content5 {
      margin-top: 36rpx;
      height: 66rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #bababa;
      border-top: 1rpx solid #bababa;

      .wrap1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4e964d;
        font-size: 28rpx;
      }

      .wrap2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4e964d;
        font-size: 28rpx;
      }

      .wrap3 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        color: #4e964d;
        font-size: 28rpx;
      }
    }

    & > .content4 {
      font-size: 32rpx;
      color: #000;
    }

    & > .content2 {
      margin-bottom: 36rpx;
      height: 1rpx;
      background: #626262;
    }

    & > .content1 {
      margin-bottom: 36rpx;
      display: flex;
      justify-content: space-between;

      .wrap1 {
        color: #000;
        font-size: 32rpx;
      }

      .wrap2 {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .content-center {
    overflow-y: scroll;
    margin-bottom: 180rpx;
    .content-scroll {
      .painting-name {
        margin-top: 48rpx;
        align-items: center;
        display: flex;
        justify-content: space-between;
        .wrap1 {
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
        }
        .wrap2 {
          font-size: 28rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(118, 196, 88, 1);
          border-radius: 40rpx;
          background-color: #fff;
          width: 148rpx;
          height: 56rpx;
          border: 1px solid rgba(118, 196, 88, 1);
        }
      }
      & > .content4 {
        margin-bottom: 24rpx;
        margin-top: 60rpx;

        .wrap1 {
          border: 1rpx dashed #dfe9f0;
          background-color: #fff;

          .wrap1_1 {
            position: relative;
            height: 114rpx;
            display: flex;
            align-items: center;

            .wrap1_1_4 {
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              position: absolute;
              height: 0;
              width: 636rpx;
              border-bottom: 0.5px solid #626262;
            }

            .wrap1_1_5 {
              right: 42rpx;
              position: absolute;

              image {
                width: 46.34rpx;
                height: 20rpx;
              }
            }

            .wrap1_1_2 {
              margin-right: 36rpx;
              width: 0;
              height: 66rpx;
              border-left: 0.5px solid #626262;
            }

            .wrap1_1_1 {
              width: 210rpx;
              padding-left: 32rpx;

              color: #626262;
              font-size: 24rpx;
            }
          }
        }
      }

      & > .content3 {
        margin-top: 60rpx;

        .prompt {
          color: #4e964d;
          font-size: 16rpx;
          margin-bottom: 4rpx;
        }

        .wrap1 {
          border: 1rpx dashed #dfe9f0;
          background-color: #fff;

          .wrap1_1 {
            position: relative;
            height: 114rpx;
            display: flex;
            align-items: center;

            .wrap1_1_4 {
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
              position: absolute;
              height: 0;
              width: 636rpx;
              border-bottom: 0.5px solid #626262;
            }

            .wrap1_1_2 {
              margin-right: 36rpx;
              width: 0;
              height: 66rpx;
              border-left: 0.5px solid #626262;
            }

            .wrap1_1_1 {
              width: 210rpx;
              padding-left: 32rpx;

              color: #626262;
              font-size: 24rpx;
            }
          }
        }
      }

      & > .content2 {
        display: flex;
        justify-content: center;

        image {
          width: 404rpx;
          height: 306rpx;
        }
      }
      & > .content7 {
        margin: 0 auto;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 40rpx;
        width: 228rpx;
        height: 56rpx;
        border: 3rpx solid rgba(118, 196, 88, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        .wrap2 {
          color: rgba(118, 196, 88, 1);
          font-size: 28rpx;
        }
        .wrap1 {
          margin-right: 20rpx;
          box-sizing: border-box;
          width: 32rpx;
          height: 32rpx;
          border: 3rpx solid rgba(118, 196, 88, 1);
          border-radius: 50%;
          background: transparent;

          position: relative;
          .horizontal {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18rpx;
            height: 2rpx;
            background-color: rgba(118, 196, 88, 1);
          }

          .vertical {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 2rpx;
            height: 18rpx;
            background-color: rgba(118, 196, 88, 1);
          }
        }
      }
    }
  }
}
</style>