乡村相册

src/saas/AppCountryAlbum/WatermarkSetting.vue

@@ -1,28 +1,214 @@
 <template>
-  <div class="AlbumDetail"></div>
+  <div class="WatermarkSetting">
+    <div class="title">
+      <h2>水印选择</h2>
+      <span>*选择水印后，相册只能上传该水印照片</span>
+    </div>
+    <div class="cell-group">
+      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
+        <div class="cell-item__left">
+          <h2>不限</h2>
+        </div>
+        <div class="cell-item__check" :class="[currIndex === 0 ? 'active' : '']"></div>
+      </div>
+      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 1">
+        <div class="cell-item__left">
+          <h2>从库中选择水印</h2>
+        </div>
+        <div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
+      </div>
+    </div>
+    <div class="title">
+      <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>
+    </div>
+    <div class="form-btn" hover-class="text-hover">保存</div>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'SourceSetting',
+    name: 'WatermarkSetting',
 
-    appName: '来源设置',
+    appName: '水印选择',
 
     data () {
       return {
+        currIndex: 0,
+        checkedList: [0, 1, 5]
       }
     },
 
-    mounted () {
+    onLoad () {
 
     },
 
     methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
 
+      checkd (index) {
+        const i = this.checkedList.indexOf(index)
+        if (i > -1) {
+          this.checkedList.splice(i, 1)
+        } else {
+          this.checkedList.push(index)
+        }
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  .WatermarkSetting {
+    padding-bottom: 130px;
 
+    * {
+      box-sizing: border-box;
+    }
+
+    .watermark-list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      background: #fff;
+      padding: 16px;
+
+      .item {
+        position: relative;
+        margin-bottom: 16px;
+        width: 352px;
+        height: 240px;
+        border-radius: 8px;
+        font-size: 0;
+
+        &.active {
+          .watermark {
+            border: 4px solid #2477F1;
+          }
+        }
+
+        .checked {
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 1;
+          width: 64px;
+          height: 64px;
+        }
+
+        .watermark {
+          width: 352px;
+          height: 240px;
+        }
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .form-btn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      text-align: center;
+      color: #fff;
+      font-size: 32px;
+      background: #1365DD;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .tips {
+      line-height: 44px;
+      margin: 32px;
+      font-size: 28px;
+      color: #999999;
+      white-space: pre-line;
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      height: 96px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #666666;
+        font-size: 32px;
+      }
+
+      span {
+        margin-left: 16px;
+        color: #999999;
+        font-size: 30px;
+      }
+    }
+
+    .cell-group {
+      .cell-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 108px;
+        margin-bottom: 16px;
+        padding: 0 32px;
+        background: #FFFFFF;
+
+        &:active {
+          background: #eee;
+        }
+
+        image {
+          width: 32px;
+          height: 32px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        h2 {
+          margin-bottom: 12px;
+          color: #333333;
+          font-size: 32px;
+        }
+
+        p {
+          color: #999999;
+          font-size: 28px;
+        }
+
+        .cell-item__check {
+          flex-shrink: 1;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          border: 4px solid #CCCCCC;
+          transition: all ease 0.3s;
+
+          &.active {
+            border: 10px solid #1365DD;
+          }
+        }
+      }
+    }
+  }
 </style>