first

components/JeepayUploadImg/enlarge.vue

@@ -0,0 +1,143 @@
+<template>
+  <view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" @tap.stop="close">
+    <movable-area class="marea" scale-area>
+      <movable-view
+        :id="'movable-view-' + i"
+        :key="'movable-view-' + i"
+        class="mview"
+        direction="all"
+        :out-of-bounds="false"
+        :inertia="true"
+        damping="90"
+        friction="2"
+        scale="true"
+        scale-min="1"
+        scale-max="4"
+        :scale-value="scale"
+      >
+        <image
+          :id="'image-' + i"
+          :key="'movable-view' + i"
+          class="image"
+          :src="imgs"
+          :data-index="i"
+          :data-src="img"
+          mode="widthFix"
+        />
+      </movable-view>
+    </movable-area>
+    <view v-if="changeIsShow" class="change-img" @click="chooseImg">更换图片</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "ksj-previewImage", //插件名称
+  props: {
+    imgs: {
+      //图片列表
+      type: String,
+      required: true,
+      default: "",
+    },
+    //透明度,0到1之间。
+    opacity: {
+      type: Number,
+      default: 1,
+    },
+    changeIsShow: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      swiper: false, //是否禁用
+      show: false, //显示状态
+      index: 0, //当前页
+      deg: 0, //旋转角度
+      time: 0, //定时器
+      interval: 1000, //长按事件
+      scale: 1, //缩放比例
+    }
+  },
+  methods: {
+    chooseImg() {
+      this.$emit("chooseImg")
+    },
+
+    //旋转
+    rotate(e) {
+      this.deg = this.deg == 270 ? 0 : this.deg + 90
+    },
+    close() {
+      this.$emit("enlargeClose")
+    },
+  },
+}
+</script>
+
+<!--使用scss,只在本组件生效-->
+<style lang="scss" scoped>
+.previewImage {
+  z-index: 25;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  user-select: none;
+  .marea {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    overflow: hidden;
+    .mview {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: auto;
+      min-height: 100%;
+      .image {
+        width: 100%;
+      }
+    }
+  }
+
+  .rotate {
+    position: absolute;
+    right: 10rpx;
+    width: 120rpx;
+    height: 56rpx;
+    bottom: 10rpx;
+    text-align: center;
+    padding: 10rpx;
+    .text {
+      background-color: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      font-size: 30rpx;
+      border-radius: 20rpx;
+      border: 1rpx solid #f1f1f1;
+      padding: 6rpx 22rpx;
+      user-select: none;
+    }
+    .text:active {
+      background-color: rgba(100, 100, 100, 0.5);
+    }
+  }
+}
+.change-img {
+  position: fixed;
+  width: 300rpx;
+  bottom: 5%;
+  left: 50%;
+  margin-left: -150rpx;
+  text-align: center;
+  z-index: 30;
+  color: #fff;
+  padding: 30rpx;
+  box-sizing: border-box;
+  background-color: #0041c4;
+  border-radius: 10rpx;
+}
+</style>