乡村相册迁移位置

2022-08-08 10:33:18 +08:00
parent e912b6d00c
commit 91abd76323
109 changed files with 5 additions and 5 deletions
--- a/src/project/caw/AppCountryAlbum/Clipping.vue
+++ b/src/project/caw/AppCountryAlbum/Clipping.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="Clipping">
+    <div class="photo-wrapper">
+      <!-- <image mode="widthFix" :src="img" /> -->
+      <kspCropper mode="free" ref="Cropper" :url="img" @ok="onOk"></kspCropper>
+    </div>
+    <div class="photo-footer">
+      <div class="title">
+        <span @click="back">返回</span>
+        <h2>剪裁</h2>
+        <span class="save-btn" @click="save">保存</span>
+      </div>
+      <scroll-view class="photo-bottom" scroll-x >
+        <!-- <div class="clipping-item" @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">
+          <image src="./images/clipping/yuantu.png" />
+          <span>原图</span>
+        </div> -->
+        <div class="clipping-item" @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">
+          <image src="./images/clipping/clipping5.png" />
+          <span>自由缩放</span>
+        </div>
+        <!-- <div class="clipping-item" @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">
+          <image src="./images/clipping/clipping4.png" />
+          <span>正方形</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">
+          <image src="./images/clipping/clipping3.png" />
+          <span>2:3</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 4" :class="[currIndex === 4 ? 'active' : '']">
+          <image src="./images/clipping/clipping2.png" />
+          <span>3:2</span>
+        </div>
+        <div class="clipping-item" @click="currIndex = 5" :class="[currIndex === 5 ? 'active' : '']">
+          <image src="./images/clipping/clipping1.png" />
+          <span>3:4</span>
+        </div> -->
+      </scroll-view>
+    </div>
+  </div>
+</template>
+
+<script>
+  import kspCropper from './components/ksp-cropper.vue'
+  export default {
+    name: 'Clipping',
+
+    appName: '图片剪裁',
+
+    components: {
+      kspCropper
+    },
+
+    data () {
+      return {
+        img: '',
+        currIndex: 1
+      }
+    },
+
+    onLoad (query) {
+      this.img = decodeURIComponent(query.url)
+      this.type = query.type
+    },
+
+    methods: {
+      back () {
+        uni.navigateBack({
+          delta: 1
+        })
+      },
+
+      save () {
+        this.$refs.Cropper.cropAppH5().then(res => {
+          console.log(res)
+        })
+      },
+
+      onOk (e) {
+        uni.$emit('cropper', e.path)
+
+        this.back()
+      },
+
+      rotateAngle () {
+        this.$refs.Cropper.rotateAngle()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Clipping {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow-y: auto;
+    background: #000;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .photo-footer {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 100%;
+      background: #FFFFFF;
+      border-radius: 32px 32px 0px 0px;
+      border: 1px solid #DDDDDD;
+
+      .title {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        height: 96px;
+
+        span {
+          position: absolute;
+          top: 50%;
+          left: 32px;
+          z-index: 1;
+          color: #222;
+          font-size: 32px;
+          font-weight: 600;
+          transform: translateY(-50%);
+        }
+
+        .save-btn {
+          left: initial;
+          right: 32px;
+        }
+
+        h2 {
+          color: #333;
+          font-size: 28px;
+          font-weight: 600;
+        }
+      }
+
+      .photo-bottom {
+        padding: 48px 48px;
+        font-size: 0;
+        white-space: nowrap;
+
+        .clipping-item {
+          display: inline-block;
+          margin-right: 48px;
+          text-align: center;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          span {
+            display: block;
+            color: #333;
+            font-size: 28px;
+          }
+
+          image {
+            width: 80px;
+            height: 80px;
+          }
+
+          &.active {
+            span {
+              color: #3975C6;
+            }
+          }
+        }
+      }
+    }
+
+    .photo-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: calc(100vh - 312px);
+
+      & > image {
+        width: 100%;
+      }
+    }
+  }
+</style>