博客

uniapp使用 movable-area movable-view 实现图片双指缩放、鼠标单击缩小双击放大、图片及标记点功能

  • Post author:
  • Post category:uniapp

效果

在这里插入图片描述

movable-area 与 movable-view

movable-view
movable-area movable-view 主要是可以实现缩放及拖拽功能，不过只能限制在movable-area 范围内的拖拽超出范围会回弹。
为了增大一点它的回弹范围 可以设置 movable-view的宽高为0；
然后子元素决定定位居中。

单击缩小 双击放大

微信小程序没有双击事件 通过setTimeout 拦截并判断是单击还是双击。

区分pc端还是手机端

  isPc() {
      const getSystemInfoSync = uni.getSystemInfoSync();
      if (
        ['windows', 'macos', 'linux'].includes(getSystemInfoSync.oeName) ||
        !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
      ) {
        return true;
      } else {
        return false;
      }
    },

实现代码（部分无用组件自行删除）

hpopup 为uni-popup 我对其进行了二次封装 用于解决页面滚动穿透问题。 如果需要使用到拖拽动态改变弹窗大小 请替换一下 hpopup 为uni-popup
getDomInfo

export function getDomInfo(className, _this) {
  const el = className;
  const query = uni.createSelectorQuery().in(_this);
  return new Promise((resolve, reject) => {
    query.select(el).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function (res) {
      let data = res[0]; // #the-id节点的上边界坐标
      resolve(data);
    });
  });
}

partDetail.js

// partDetail 部件详情 数据
export const data = {
  code: 1,
  msg: '处理成功',
  time: 89148965.92326912,
  data: {
    img: {},
    mid: '18_1221',
    part_detail: [
      [
        {
          remark: '',
          sa_code: '',
          pnum: '01',
          pid: '18328587749',
          itid: '01',
          label: '保修 柴油微粒过滤器',
          psort: 2,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'EU6',
          quantity: '1',
          condition: '',
          spid: '18328587749'
        },
        {
          remark: '+S167A',
          sa_code: 'S167A',
          pnum: '01',
          pid: '18328596435',
          itid: '01',
          label: '保修 柴油微粒过滤器',
          psort: 16,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'EU5',
          quantity: '1',
          condition: '',
          spid: '18328596435'
        },
        {
          remark: '-20190700<br/>+S167A',
          sa_code: 'S167A',
          pnum: '01',
          pid: '18328596435',
          itid: '01',
          label: '保修 柴油微粒过滤器',
          psort: 18,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'EU5',
          quantity: '1',
          condition: '',
          spid: '18328596435'
        },
        {
          remark: '-20190700<br/>-S167A',
          sa_code: 'S167A',
          pnum: '01',
          pid: '18328587749',
          itid: '01',
          label: '保修 柴油微粒过滤器',
          psort: 20,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'EU6',
          quantity: '1',
          condition: '',
          spid: '18328587749'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '02',
          pid: '18308512137',
          itid: '02',
          label: 'V 型带箍',
          psort: 42,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18308512137'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '03',
          pid: '18308513651',
          itid: '03',
          label: '密封件',
          psort: 43,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18308513651'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '04',
          pid: '18208579603',
          itid: '04',
          label: '发动机附近的废气触媒转换器支架',
          psort: 44,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18208579603'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '05',
          pid: '18208470030',
          itid: '05',
          label: '发动机附近的废气触媒转换器支架',
          psort: 46,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18208470030'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '06',
          pid: '07129904559',
          itid: '06',
          label: '螺栓',
          psort: 47,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'M8X20-U1-8.8',
          quantity: '2',
          condition: '',
          spid: '07129904559'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '07',
          pid: '07119904024',
          itid: '07',
          label: '六角螺母',
          psort: 48,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'M8-ZNS3',
          quantity: '2',
          condition: '',
          spid: '07119904024'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '08',
          pid: '07119907332',
          itid: '08',
          label: '六角螺栓',
          psort: 52,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'M8X16-8.8-ZNS3',
          quantity: '2',
          condition: '',
          spid: '07119907332'
        },
        {
          remark: '',
          sa_code: '',
          pnum: '08',
          pid: '07119904124',
          itid: '08',
          label: '六角螺栓',
          psort: 53,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: 'M8X16-8.8-ZNS3',
          quantity: '1',
          condition: '',
          spid: '07119904124'
        }
      ],
      [
        {
          remark: '',
          sa_code: '',
          pnum: '09',
          pid: '18328587758',
          itid: '09',
          label: '退耦元件',
          psort: 54,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18328587758'
        }
      ],
      [
        {
          remark: '-20190100',
          sa_code: '',
          pnum: '10',
          pid: '18308473749',
          itid: '10',
          label: '张紧夹箍',
          psort: 56,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18308473749'
        },
        {
          remark: '',
          sa_code: '',
          pnum: '10',
          pid: '18308478401',
          itid: '10',
          label: '张紧夹箍',
          psort: 57,
          iscomt: '',
          has_article: '',
          isreplace: '',
          model: '',
          quantity: '1',
          condition: '',
          spid: '18308478401'
        }
      ]
    ],
    mcid: 'A1obERxaQlhaTkhKQUhaBQ%3D%3D',
    num: '18',
    maingroup: '18',
    brandCode: 'bmw',
    subgroup: '18_1221',
    imageHeight: '',
    imageWidth: ''
  },
  length: 1,
  img: {
    imagePath:
      'https://structimgs.007vin.com/struct/1000003/55936320a0f1c1851515a6e725f7f851.png',
    imgPoints: {
      hotspots: [
        {
          hsX: '296',
          hsY: '389',
          maxY: '419',
          maxX: '314',
          hsKey: '01'
        },
        {
          hsX: '168',
          hsY: '434',
          maxY: '464',
          maxX: '188',
          hsKey: '02'
        },
        {
          hsX: '231',
          hsY: '388',
          maxY: '418',
          maxX: '251',
          hsKey: '03'
        },
        {
          hsX: '644',
          hsY: '441',
          maxY: '471',
          maxX: '664',
          hsKey: '04'
        },
        {
          hsX: '587',
          hsY: '135',
          maxY: '165',
          maxX: '607',
          hsKey: '05'
        },
        {
          hsX: '586',
          hsY: '66',
          maxY: '91',
          maxX: '612',
          hsKey: '06'
        },
        {
          hsX: '725',
          hsY: '439',
          maxY: '469',
          maxX: '745',
          hsKey: '06'
        },
        {
          hsX: '499',
          hsY: '526',
          maxY: '552',
          maxX: '526',
          hsKey: '07'
        },
        {
          hsX: '725',
          hsY: '391',
          maxY: '421',
          maxX: '745',
          hsKey: '07'
        },
        {
          hsX: '640',
          hsY: '393',
          maxY: '419',
          maxX: '666',
          hsKey: '08'
        },
        {
          hsX: '725',
          hsY: '343',
          maxY: '373',
          maxX: '745',
          hsKey: '08'
        },
        {
          hsX: '166',
          hsY: '35',
          maxY: '64',
          maxX: '186',
          hsKey: '09'
        },
        {
          hsX: '684',
          hsY: '136',
          maxY: '165',
          maxX: '714',
          hsKey: '10'
        }
      ],
      maxScaleFactor: 1,
      imageFormat: 'image/png'
    },
    name: '保修 柴油微粒过滤器'
  },
  args: {
    mcid: 'A1obERxaQlhaTkhKQUhaBQ%3D%3D',
    num: '18',
    mid: '18_1221',
    subgroup: '18_1221',
    brandCode: 'bmw',
    noCacheTime: '1672043382',
    users: '17700783774',
    client_ip: '125.94.200.9',
    source: 'web',
    yc_id: '40cfef25b53f395958adcb9323dda090'
  },
  query_time: 0.028442570939660072
};

export const priceOptions = {
  18328587749: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥21899.99'
  },
  18328596435: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥21899.99'
  },
  18308512137: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥320.99'
  },
  18308513651: {
    inventory: 0,
    has_article: 1,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥62.0'
  },
  18208579603: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥377.0'
  },
  18208470030: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥282.99'
  },
  '07129904559': {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 1,
    sale_price: '¥12.99'
  },
  '07119904024': {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 1,
    sale_price: '¥8.0'
  },
  '07119907332': {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥8.0'
  },
  '07119904124': {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥8.99'
  },
  18328587758: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥1870.0'
  },
  18308473749: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 1,
    sale_price: '¥343.0'
  },
  18308478401: {
    inventory: 0,
    has_article: 0,
    iscomt: 0,
    isreplace: 0,
    sale_price: '¥308.99'
  }
};

组件代码

<template>
  <view class="container">
    <movable-area class="preview_box" :style="movableAreaHeightStyle">
      <movable-view
        :animation="false"
        v-if="showMovableView"
        class="preview_image movable-view_box"
        direction="all"
        :x="initDrag.x"
        :y="initDrag.y"
        :scale="true"
        :scale-min="initDrag.scaleMin"
        :scale-max="initDrag.scaleMax"
        @scale="scaleChange"
        @click.stop="movableClick"
        :style="imageCenterStyle"
        :scale-value="scaleValue"
        out-of-bounds
        inertia
      >
        <!-- <image src="@/pages/static/images/index/car.png" mode="aspectFit" /> -->
        <view class="image_center_box">
          <view class="image_box" :style="imageBoxStyle">
            <!--  -->
            <view
              class="point"
              v-for="(item, index) in imgInfo.imgPoints.hotspots"
              :key="index"
              :style="item.getPointStyle"
              @click.stop="pointHandle(item.hsKey)"
              :class="
                item.active == true ? 'border-c_blue-1' : 'border-c_gray-1'
              "
            ></view>
            <image :src="imgInfo.imagePath" mode="" />
          </view>
        </view>
      </movable-view>
      <image
        v-else
        @load="previewImageLoad"
        class="preview_image_outer movable-view_image_box"
        :src="imgInfo.imagePath"
        mode=""
      />

      <view class="image_list_box">
        <view
          v-for="(item, index) in Array(4)"
          :key="index"
          :class="index == 0 ? 'mini_image_active' : ''"
          class="mini_image_item"
        >
          <image src="@/pages/static/images/index/car.png" mode="aspectFit" />
        </view>
      </view>
    </movable-area>
    <view v-if="!isDragLine" class="list_content">
      <view class="tag_info_box">
        <view class="info_label">
          <text>配件位置：21</text>
        </view>
        <!-- <view class="view_tip">
          <text>按住上下拖动，可调整显示范围</text>
        </view> -->
      </view>
      <view class="list">
        <listItemType1
          class="list_item"
          v-for="(item, index) in Array(10)"
          :key="index"
        ></listItemType1>
      </view>
    </view>
    <template v-else-if="isDragLine">
      <!-- 拖拽条 -->
      <view class="moveLine" v-if="isTagMove" :style="moveLineStyle">
        <view class="drag_line_tip"></view>

        <view class="info_label">
          <text>配件位置：21</text>
        </view>
        <view class="close" @click.stop="partsListPopupClose">
          <view class="close_center">
            <view class="r"></view>
            <view class="c"></view>
          </view>
        </view>
      </view>
      <!-- 配件列表弹窗 -->
      <hPopup type="bottom" v-model="partsListPopupShow">
        <view
          class="list_content parts_popup_content"
          :style="popupHeightStyle"
        >
          <view
            class="tag_info_box"
            @touchstart="isDragLine && tagStart($event)"
            @touchmove.stop="isDragLine && tagMove($event)"
            @touchend.stop="isDragLine && tagEnd($event)"
          >
            <view class="drag_line_tip"></view>
            <view class="info_label">
              <text>配件位置：21</text>
            </view>
            <view class="close" @click.self="partsListPopupClose">
              <view class="close_center">
                <view class="r"></view>
                <view class="c"></view>
              </view>
            </view>
          </view>
          <!-- @touchstart.stop="() => {}" -->
          <view class="list" @touchmove.self="() => {}">
            <listItemType1
              class="list_item"
              v-for="(item, index) in Array(10)"
              :key="index"
            ></listItemType1>
            <safeFooter bgColor="transparent" :fixed="false"></safeFooter>
          </view>
        </view>
      </hPopup>
    </template>
  </view>
</template>
<script>
import listItemType1 from '@/pages/components/indexComponents/listItemType1.vue';
import hPopup from '@/components/baseComponent/h-popup.vue';
import safeFooter from '@/components/baseComponent/safe-footer.vue';
import { getDomInfo } from '@/utils/request/common.js';
import { data } from '@/pages/static/js/partDetail.js';

export default {
  components: {
    listItemType1,
    hPopup,
    safeFooter
  },
  props: {
    //是否可以拖拽横横线改变上下高度
    isDragLine: {
      type: Boolean,
      default: true
    },
    //是否有多个主图数据
    isMultiple: {
      type: Boolean,
      default: true
    },
    vinItemData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data: () => ({
    partsListPopupShow: false, //是否 显示 配件信息弹窗
    isTagMove: false,
    tagOffsetTop: 0,
    tagTop: 0,
    tagPageY: 0,
    maxRatio: 0.95,
    minRatio: 0.35,
    movableAreaHeight: null,
    imgInfo: {},
    showMovableView: false,
    imageBox: { width: 0, height: 0 },
    previewBox: { width: 0, height: 0 },
    // outOfProportion: 1, // 超出边界范围比例
    //初始化拖拽数据
    initDrag: {
      x: 0, //x轴偏移量  单位px
      y: 0, //y轴偏移量  单位px
      scaleMin: 0.5,
      scaleMax: 5
    },
    currentScale: 1, //当前缩放值
    scaleValue: 1,
    lastTapTime: 0, //记录上一次点击时间
    clickTimer: null,
    clickDelay: 300
  }),
  computed: {
    vinImageData() {
      if (!this.isMultiple) {
        return this.vinItemData;
      }
      return {};
    },
    windowHeight() {
      const getSystemInfoSync = uni.getSystemInfoSync();
      return getSystemInfoSync.windowHeight;
    },
    imageCenterStyle() {
      let w = 0;
      let h = 0;
      if (this.showMovableView) {
        return `width:${w}px;height:${h}px;`;
      }
      return '';
    },
    imageBoxStyle() {
      let w = this.imageBox.width;
      let h = this.imageBox.height;
      if (this.showMovableView) {
        return `width:${w}px;height:${h}px;`;
      }
      return '';
    },
    isPc() {
      const getSystemInfoSync = uni.getSystemInfoSync();
      if (
        ['windows', 'macos', 'linux'].includes(getSystemInfoSync.oeName) ||
        !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
      ) {
        return true;
      } else {
        return false;
      }
    },
    moveLineStyle() {
      let top = this.tagTop;
      return `top:${top}px;`;
    },
    popupHeightStyle() {
      let h = this.movableAreaHeight;
      if (h) {
        return `height:calc(100vh - ${h}px);`;
      } else {
        return 'height: 35vh;';
      }
    },
    movableAreaHeightStyle() {
      let h = this.movableAreaHeight;
      if (h && !this.isDragLine) {
        return `height:${h}px;`;
      } else if (this.isDragLine) {
        return `height:100vh;`;
      } else {
        return 'height: 65vh;';
      }
    }
  },
  methods: {
    partsListPopupClose() {
      this.partsListPopupShow = false;
    },
    partsListPopupOpen() {
      this.partsListPopupShow = true;
    },
    // 震动反馈
    feedbackGenerator(instance) {
      //触感反馈
      //wxs 不支持条件编译，所以用此方法判断
      var isiOSAPP = typeof plus != 'undefined' && plus.os.name == 'iOS';
      var UISelectionFeedbackGenerator;
      var UIImpactFeedbackGenerator;
      var impact;

      if (isiOSAPP) {
        UISelectionFeedbackGenerator = plus.ios.importClass(
          'UISelectionFeedbackGenerator'
        );
        impact = new UISelectionFeedbackGenerator();
        impact.init();
        // impact.prepare();
        // impact.init(1);
        // impact.impactOccurred();
        impact.selectionChanged();
      } else {
        if (typeof plus != 'undefined') {
          plus.device.vibrate(300);
        } else {
          //   instance.callMethod('vibrate');
          uni.vibrateShort();
        }
      }
    },
    tagStart(e, instance) {
      const clientY = e.touches[0].clientY;
      const pageY = e.touches[0].pageY;
      const offsetTop = e.target.offsetTop;
      this.tagTop = clientY;
      this.tagOffsetTop = offsetTop;
      this.feedbackGenerator();
    },
    tagMove(e) {
      this.isTagMove = true;
      const clientY = e.touches[0].clientY;
      const pageY = e.touches[0].pageY;
      const offsetTop = e.target.offsetTop;
      let tagTop = clientY;
      let minTop = this.windowHeight * this.minRatio;
      let maxTop = this.windowHeight * this.maxRatio;
      // console.log(
      //   'clientY pageY offsetTop',
      //   clientY,
      //   pageY,
      //   offsetTop,
      //   minTop,
      //   maxTop
      // );
      if (tagTop < minTop && pageY <= minTop) {
        tagTop = minTop;
      }
      if (tagTop > maxTop && pageY >= maxTop) {
        tagTop = maxTop;
      }
      if (pageY <= maxTop && pageY >= minTop) {
        this.tagTop = tagTop;
        this.tagPageY = pageY;
      }
    },
    tagEnd(e) {
      this.isTagMove = false;
      this.movableAreaHeight = this.tagPageY;
    },
    getImgInfo() {
      this.imgInfo = data.img;
      this.imgInfo.imgPoints.hotspots = this.imgInfo.imgPoints.hotspots.map(
        item => {
          item.getPointStyle = this.getPointStyle(item);
          return item;
        }
      );
    },
    // 设置图片标记点 激活
    setpointData(hsKey) {
      this.imgInfo.imgPoints.hotspots = this.imgInfo.imgPoints.hotspots.map(
        item => {
          item.active = false;
          if (item.hsKey == hsKey) {
            item.active = true;
          }
          return item;
        }
      );
    },
    // 点击指示点处理
    pointHandle(hsKey) {
      if (this.isDragLine) {
        this.partsListPopupOpen();
      }
      this.setpointData(hsKey);
    },
    // 获取图片指示点位置样式
    getPointStyle(pointItem) {
      const { hsX, hsY, maxY, maxX, hsKey } = pointItem;
      let style = '';
      let w = maxX - hsX;
      let h = maxY - hsY;
      let left = hsX;
      let top = hsY;
      let beishuWH = 650;
      let beishuL = 800;
      let beishuT = 560;
      w = `${(w / beishuWH) * 100}%`;
      h = `${(h / beishuWH) * 100}%`;
      left = `${(Number(left) / beishuL) * 100}%`;
      top = `${(Number(top) / beishuT) * 100}%`;
      style = `width:${w};height:${h};left:${left};top:${top};`;
      return style;
    },
    async previewImageLoad(e) {
      await this.getDomInfo();
      this.setInDragcenterXY();
      this.showMovableView = true;
    },
    // 获取初始拖拽位置
    async getDomInfo() {
      //  盒子高度
      let imageBox = await getDomInfo('.movable-view_image_box', this);
      let previewBox = await getDomInfo('.preview_box', this);
      console.log('imageBox', imageBox);
      console.log('previewBox', previewBox);
      imageBox = {
        height: imageBox.height || 0,
        width: imageBox.width || 0
      };
      previewBox = {
        height: previewBox.height || 0,
        width: previewBox.width || 0
      };

      this.imageBox = imageBox;
      this.previewBox = previewBox;
    },
    // 设置初始化位置居中
    async setInDragcenterXY() {
      //  盒子高度
      let imageBox = {
        height: 0,
        width: 0
      };
      let previewBox = this.previewBox;
      let x = 0;
      let y = 0;
      x = previewBox.width / 2 - imageBox.width / 2;
      y = previewBox.height / 2 - imageBox.height / 2;
      this.initDrag.x = x;
      this.initDrag.y = y;
    },
    // 缩放过程改变
    scaleChange(event) {
      const { scale } = event.detail;
      this.currentScale = scale;
    },

    movableClick(e) {
      // 判断双击事件
      let curTime = e.timeStamp;
      if (this.lastTapTime > 0) {
        if (curTime - this.lastTapTime < this.clickDelay) {
          this.lastTapTime = curTime;
          clearTimeout(this.clickTimer);
          if (!this.isPc) return;
          // 电脑端才需要 单击和双击事件触发缩放
          // 双击
          return this.movableDbClick(e);
        }
      }
      this.lastTapTime = curTime;
      clearTimeout(this.clickTimer);
      this.clickTimer = setTimeout(() => {
        //   单击
        // 电脑端才需要 单击和双击事件触发缩放
        if (!this.isPc) return;
        this.movableOnClick(e);
      }, this.clickDelay);
    },
    // 图片单击事件
    movableOnClick(e) {
      this.currentScale = this.currentScale - 0.5;
      if (this.currentScale < this.initDrag.scaleMin) {
        this.currentScale = this.initDrag.scaleMin;
      }
      if (this.currentScale > this.initDrag.scaleMax) {
        this.currentScale = this.initDrag.scaleMax;
      }
      this.scaleValue = this.currentScale;
    },
    // 图片双击事件
    movableDbClick(e) {
      this.currentScale = this.currentScale + 0.5;
      if (this.currentScale < this.initDrag.scaleMin) {
        this.currentScale = this.initDrag.scaleMin;
      }
      if (this.currentScale > this.initDrag.scaleMax) {
        this.currentScale = this.initDrag.scaleMax;
      }
      this.scaleValue = this.currentScale;
    }
  },
  watch: {},
  // 组件加载完成
  async onLoad(options) {},
  // 组件显示
  onShow() {},
  created() {
    this.getImgInfo();
  },
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
}
.preview_box {
  width: 100%;
  background-color: red;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  .preview_image {
    width: 80%;
    height: min-content;
    max-height: 100%;
    .image_center_box {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .image_box {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      image {
        object-fit: contain;
        width: 100%;
      }
      .point {
        position: absolute;
        display: inline-block;
        /* border: dashed 1px; */
        border: solid 1px;
        cursor: pointer;
        border-radius: 9999rpx;
      }
      .border-c_blue-1 {
        border-color: rgba(24, 144, 255, 1);
      }
      .border-c_gray-1 {
        background-color: rgba(232, 232, 232, 0.5);
        border-color: rgba(51, 51, 51, 1);
      }
    }
  }
  .preview_image_outer {
    width: 80%;
    max-height: 100%;
    object-fit: contain;
  }
  .image_list_box {
    position: absolute;
    right: 27rpx;
    top: 12vh;
    width: 82rpx;
    background: #ffffff;
    box-shadow: 0px 0px 14rpx 0px #dde6f6;
    border-radius: 18rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 11rpx 0;
    .mini_image_active {
      border: 2rpx solid #d70937;
    }
    .mini_image_item {
      width: 63rpx;
      height: 63rpx;
      background: #ffffff;
      border-radius: 9rpx;
      margin-bottom: 11rpx;
      &:last-child {
        margin-bottom: 0;
      }
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.moveLine {
  width: 100%;
  background: rgb(242, 245, 253);
  opacity: 0.5;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
.tag_info_box,
.moveLine {
  .drag_line_tip {
    position: absolute;
    top: 5rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 72rpx;
    height: 11rpx;
    background: linear-gradient(90deg, #c7cee0 0%, #b9c2d7 100%);
    border-radius: 5999rpx;
  }
  .info_label {
    margin-top: 27rpx;
    margin-bottom: 16rpx;
    padding: 7rpx 25rpx 7rpx 16rpx;
    box-sizing: border-box;
    height: 45rpx;
    background: linear-gradient(90deg, #4448f6 0%, #d46dff 100%);
    border-radius: 0px 999rpx 999rpx 0px;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    width: max-content;
  }
  .view_tip {
    font-size: 22rpx;
    color: #2a56e4;
    margin-right: 22rpx;
  }
  .close {
    margin-right: 16rpx;
    width: 30rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
    .close_center {
      width: 100%;
      position: relative;
    }
    .r {
      position: absolute;
      width: 100%;
      height: 4rpx;
      border-radius: 999rpx;
      transform: rotate(45deg);
      background: #000000;
    }
    .c {
      position: absolute;
      width: 100%;
      height: 4rpx;
      border-radius: 999rpx;
      transform: rotate(-45deg);
      background: #000000;
    }
  }
}
.parts_popup_content {
  display: flex;
  flex-direction: column;
  .list {
    height: 0;
    flex-grow: 1;
    overflow-y: auto;
  }
}
.list_content {
  width: 100%;
  background: #f2f5fd;
  .tag_info_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .list {
    width: 100%;
    padding: 0 11rpx;
    box-sizing: border-box;
    .list_item {
      display: block;
      box-sizing: border-box;
      margin-bottom: 27rpx;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
版权声明：本文为weixin_43245095原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。