乡村相册

src/saas/AppCountryAlbum/WatermarkSetting.vue

@@ -5,7 +5,7 @@
       <span>*选择水印后，相册只能上传该水印照片</span>
     </div>
     <div class="cell-group">
-      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
+      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 0, checkedList = []">
         <div class="cell-item__left">
           <h2>不限</h2>
         </div>
@@ -18,20 +18,21 @@
         <div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
       </div>
     </div>
-    <div class="title">
+    <div class="title" v-if="currIndex === 1">
       <h2>水印库</h2>
     </div>
-    <div class="watermark-list">
-      <div class="item" @click="checkd(index)" v-for="(item, index) in 10" :key="index" :class="[checkedList.includes(index) ? 'active' : '']">
-        <image class="checked" v-if="checkedList.includes(index)" src="./images/xuanzhong.png" />
-        <image class="watermark" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
+    <div class="watermark-list" v-if="currIndex === 1">
+      <div class="item" @click="checkd(item.type)" v-for="(item, index) in config" :key="index" :class="[checkedList.includes(index) ? 'active' : '']">
+        <image class="checked" v-if="checkedList.includes(item.type)" src="./images/xuanzhong.png" />
+        <image class="watermark" :src="item.thum" mode="aspectFill" />
       </div>
     </div>
-    <div class="form-btn" hover-class="text-hover">保存</div>
+    <div class="form-btn" hover-class="text-hover" @click="save">保存</div>
   </div>
 </template>
 
 <script>
+  import { config } from './config'
   export default {
     name: 'WatermarkSetting',
 
@@ -40,27 +41,35 @@
     data () {
       return {
         currIndex: 0,
-        checkedList: [0, 1, 5]
+        config,
+        checkedList: []
       }
     },
 
-    onLoad () {
-
+    onLoad (query) {
+      if (query.value) {
+        this.currIndex = 1
+        this.checkedList = query.value.split(',')
+      }
     },
 
     methods: {
-      linkTo (url) {
-        uni.navigateTo({
-          url
+      save () {
+        uni.$emit('change', {
+          type: 'watermark',
+          value: this.checkedList.length ? this.checkedList.join(',') : ''
+        })
+        uni.navigateBack({
+          delta: 1
         })
       },
 
-      checkd (index) {
-        const i = this.checkedList.indexOf(index)
+      checkd (type) {
+        const i = this.checkedList.indexOf(type)
         if (i > -1) {
           this.checkedList.splice(i, 1)
         } else {
-          this.checkedList.push(index)
+          this.checkedList.push(type)
         }
       }
     }
@@ -84,17 +93,19 @@
       padding: 16px;
 
       .item {
+        display: flex;
         position: relative;
+        align-items: center;
+        justify-content: center;
         margin-bottom: 16px;
         width: 352px;
         height: 240px;
         border-radius: 8px;
         font-size: 0;
+        background: #2A3540;
 
         &.active {
-          .watermark {
-            border: 4px solid #2477F1;
-          }
+          border: 4px solid #2477F1;
         }
 
         .checked {
@@ -107,8 +118,8 @@
         }
 
         .watermark {
-          width: 352px;
-          height: 240px;
+          width: 200px;
+          height: 200px;
         }
 
         &:nth-of-type(2n) {
@@ -211,4 +222,4 @@
       }
     }
   }
-</style>
+</style>