乡村相册

src/saas/AppCountryAlbum/AddAlbum.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="AddAlbum">
+    <div class="form-group">
+      <div class="form-group__item">
+        <div class="left">
+          <label>*</label>
+          <span>相册名称</span>
+        </div>
+        <div class="right">
+          <input placeholder="请输入相册名称" placeholder-style="color: #999" />
+        </div>
+      </div>
+      <div class="form-group__item">
+        <div class="left">
+          <label>*</label>
+          <span>水印</span>
+        </div>
+        <div class="right">
+          <span>请选择</span>
+          <image src="./images/right.png" />
+        </div>
+      </div>
+      <div class="form-group__item">
+        <div class="left">
+          <label>*</label>
+          <span>拍摄人</span>
+        </div>
+        <div class="right">
+          <span>请选择</span>
+          <image src="./images/right.png" />
+        </div>
+      </div>
+      <div class="form-group__item">
+        <div class="left">
+          <label>*</label>
+          <span>水印</span>
+        </div>
+        <div class="right">
+          <span>请选择</span>
+          <image src="./images/right.png" />
+        </div>
+      </div>
+    </div>
+    <div class="form-btn" hover-class="text-hover">保存</div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'AddAlbum',
+
+    appName: '新增相册',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AddAlbum {
+    padding-bottom: 130px;
+
+    * {
+      line-height: 1;
+      box-sizing: border-box;
+    }
+
+    .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;
+      }
+    }
+    .form-group {
+      margin-bottom: 16px;
+      padding: 0 32px;
+      background: #fff;
+
+      .form-group__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 112px;
+        font-size: 32px;
+        color: #333333;
+        border-bottom: 1px solid #DDDDDD;
+
+        &.form-group__checked {
+          height: auto;
+          padding: 32px 0;
+
+          .left {
+            h2 {
+              margin-bottom: 12px;
+              color: #333333;
+              font-size: 32px;
+            }
+
+            &.left-add {
+              display: flex;
+              align-items: center;
+
+              h2 {
+                margin-bottom: 0;
+              }
+            }
+
+            .add-btn {
+              position: relative;
+              width: 48px;
+              height: 48px;
+              margin-right: 16px;
+              border-radius: 50%;
+              overflow: hidden;
+              background: #1088F9;
+
+              &::after {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                z-index: 1;
+                width: 4px;
+                height: 24px;
+                background: #fff;
+                content: ' ';
+                transform: translate(-50%, -50%);
+              }
+
+              &::before {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                z-index: 1;
+                width: 24px;
+                height: 4px;
+                background: #fff;
+                content: ' ';
+                transform: translate(-50%, -50%);
+              }
+            }
+
+            p {
+              color: #999999;
+              font-size: 28px;
+            }
+          }
+        }
+
+        label {
+          color: #FF4466;
+        }
+
+        &:last-child {
+          border: none;
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+          color: #999999;
+          image {
+            width: 32px;
+            height: 32px;
+          }
+
+          input {
+            text-align: right;
+            color: #999;
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/saas/AppCountryAlbum/AlbumDetail.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="AlbumDetail"></div>
+</template>
+
+<script>
+  export default {
+    name: 'AlbumDetail',
+
+    appName: '相册详情',
+
+    data () {
+      return {
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/saas/AppCountryAlbum/PersonnelSetting.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="WatermarkSetting"></div>
+</template>
+
+<script>
+  export default {
+    name: 'WatermarkSetting',
+
+    appName: '水印设置',
+
+    data () {
+      return {
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/saas/AppCountryAlbum/SourceSetting.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="AlbumDetail"></div>
+</template>
+
+<script>
+  export default {
+    name: 'SourceSetting',
+
+    appName: '来源设置',
+
+    data () {
+      return {
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/saas/AppCountryAlbum/WatermarkSetting.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="AlbumDetail"></div>
+</template>
+
+<script>
+  export default {
+    name: 'SourceSetting',
+
+    appName: '来源设置',
+
+    data () {
+      return {
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/saas/AppCountryAlbum/components/Home.vue

@@ -45,7 +45,7 @@
     <div class="album-list">
       <h2>工作相册</h2>
       <div class="album-list__wrapper">
-        <div class="item" v-for="(item, index) in 3" :key="index">
+        <div class="item" v-for="(item, index) in 3" :key="index" @click="linkTo('./AlbumDetail')">
           <span>未查看</span>
           <image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
           <div class="item-bottom">
@@ -63,7 +63,7 @@
             </div>
           </div>
         </div>
-        <div class="item item-add">
+        <div class="item item-add" @click="linkTo('./AddAlbum')">
           <div class="item-add__btn"></div>
           <p>添加相册</p>
         </div>