乡村相册

src/saas/AppCountryAlbum/AppCountryAlbum.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="form">
+    <component ref="TabPage" :is="component" @change="onChange" :params="params"/>
+  </div>
+</template>
+
+<script>
+import Tabbar from './components/Tabbar.vue'
+import { mapActions } from "vuex"
+
+export default {
+  name: 'AppCountryAlbum',
+  appName: '乡村相册',
+
+  data() {
+    return {
+      component: 'Tabbar',
+      params: {}
+    }
+  },
+
+  components: {
+    Tabbar
+  },
+
+  methods: {
+    ...mapActions(['injectJWeixin']),
+
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    }
+  },
+
+  onShow() {
+    this.$refs?.TabPage?.show()
+    this.$nextTick(() => {
+      this.injectJWeixin(['sendChatMessage', 'shareAppMessage', 'shareWechatMessage']).then(() => {
+        this.$dict.load(['questionnaireStatus', 'questionnaireType', 'questionnaireFieldType'])
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/saas/AppCountryAlbum/Message.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="message">
+    <div class="message-item" v-for="(item, index) in 10" :key="index">
+      <h2>2022-2-14 10:02</h2>
+      <div>您于2月13日发布的《打卡相册》的照片已被XXX查看</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Message',
+    appName: '乡村相册',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .message {
+    padding-bottom: 60px;
+
+    .message-item {
+      h2 {
+        padding: 48px 0 32px;
+        color: #666666;
+        font-size: 32px;
+        font-weight: normal;
+        text-align: center;
+      }
+
+      div {
+        margin: 0 32px;
+        padding: 32px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+        font-size: 32px;
+        color: #333333;
+        line-height: 44px;
+        text-align: justify;
+        border-radius: 16px;
+        background: #fff;
+      }
+    }
+  }
+</style>

src/saas/AppCountryAlbum/components/Home.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="album-home">
+    <div class="userinfo">
+      <image src="https://pica.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_is.jpg?source=32738c0c" />
+      <div class="right">
+        <h2>吴小米</h2>
+        <p>欢迎使用乡村相册</p>
+      </div>
+    </div>
+    <div class="album-total">
+      <div class="album-total__item">
+        <span>今日拍照人数</span>
+        <i>5</i>
+      </div>
+      <div class="album-total__item">
+        <span>今日拍照数量</span>
+        <i>5</i>
+      </div>
+    </div>
+    <div class="album-operate">
+      <div class="left">
+        <div class="left-item">
+          <image src="../images/paizhao.png" />
+          <span>拍照</span>
+        </div>
+        <div class="left-item">
+          <image src="../images/pintu.png" />
+          <span>拼图汇报</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="right-top">
+          <image class="right-top__left" src="../images/xiaoxizhushou.png"/>
+          <image @click="linkTo('/saas/AppCountryAlbum/Message')" class="right-top__right" src="../images/gengduo1.png" />
+        </div>
+        <div class="right-info">
+          <div class="right-info__news">
+            <span>最新</span>
+            <i>你于2月14日发布的你于2月14日发布的</i>
+          </div>
+          <p>2022-2-14  10:02</p>
+        </div>
+      </div>
+    </div>
+    <div class="album-list">
+      <h2>工作相册</h2>
+      <div class="album-list__wrapper">
+        <div class="item" v-for="(item, index) in 3" :key="index">
+          <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">
+            <h2>工作相册</h2>
+            <div class="item-bottom__info">
+              <div class="left">
+                <span>今日新增</span>
+                <i>5</i>
+                <span>张</span>
+              </div>
+              <div class="right">
+                <image src="../images/zhaopianshuliang.png" />
+                <span>16</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item item-add">
+          <div class="item-add__btn"></div>
+          <p>添加相册</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Home',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .album-home {
+    padding: 50px 32px 120px;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .album-list {
+      & > h2 {
+        height: 96px;
+        line-height: 96px;
+        color: #333333;
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .item-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #EFF5FA;
+        box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+        border-radius: 16px;
+        border: 2px solid #FFFFFF;
+
+        p {
+          margin-top: 16px;
+          font-size: 26px;
+          color: #999;
+        }
+
+        .item-add__btn {
+          position: relative;
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+          background: #FFFFFF;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+
+          &::after {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 1;
+            width: 4px;
+            height: 32px;
+            background: #333333;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 4px;
+            transform: translate(-50%, -50%);
+            content: ' ';
+          }
+
+          &::before {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 1;
+            width: 32px;
+            height: 4px;
+            background: #333333;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 4px;
+            transform: translate(-50%, -50%);
+            content: ' ';
+          }
+        }
+      }
+
+      .album-list__wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .item {
+          position: relative;
+          width: 328px;
+          height: 328px;
+          margin-top: 32px;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+          border-radius: 16px;
+          overflow: hidden;
+
+          .item-bottom {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            padding: 20px 16px 16px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+
+            & > h2 {
+              margin-bottom: 14px;
+              font-size: 32px;
+              color: #fff;
+            }
+
+            .item-bottom__info {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 86px;
+                height: 48px;
+                padding: 0 8px;
+                color: #fff;
+                background: rgba(0, 0, 0, 0.5);
+                box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+                border-radius: 8px;
+
+                image {
+                  width: 28px;
+                  height: 28px;
+                }
+              }
+
+              .left {
+                span {
+                  color: #c6c5c4;
+                  font-size: 28px;
+                }
+
+                i {
+                  padding: 0 3px;
+                  color: #fff;
+                  font-size: 28px;
+                }
+              }
+            }
+          }
+
+          & > span {
+            position: absolute;
+            left: 16px;
+            top: 16px;
+            z-index: 1;
+            width: 94px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            color: #fff;
+            font-size: 28px;
+            background: #FF524F;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 8px;
+          }
+
+          & > image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    .album-operate {
+      display: flex;
+      align-items: center;
+      margin: 48px 0 32px;
+
+      .right {
+        flex: 1;
+        height: 256px;
+        padding: 24px;
+        background: #2BB1FF;
+        box-shadow: 0px 4px 8px 0px rgba(25, 81, 129, 0.12);
+        border-radius: 16px;
+
+        .right-top {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 40px;
+
+          .right-top__left {
+            width: 136px;
+            height: 32px;
+          }
+
+          .right-top__right {
+            width: 32px;
+            height: 32px;
+          }
+        }
+
+        .right-info {
+          .right-info__news {
+            margin-bottom: 12px;
+
+            span {
+              display: inline-block;
+              width: 68px;
+              height: 40px;
+              line-height: 40px;
+              margin-right: 8px;
+              text-align: center;
+              background: #FFBC5E;
+              border-radius: 8px;
+              color: #FFFFFF;
+            }
+
+            i {
+              color: #fff;
+              font-size: 28px;
+            }
+          }
+
+          p {
+            color: #fff;
+            opacity: 0.8;
+            font-size: 28px;
+          }
+        }
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: column;
+        width: 288px;
+        height: 256px;
+        margin-right: 16px;
+
+        .left-item {
+          display: flex;
+          align-items: center;
+          width: 288px;
+          height: 120px;
+          padding-left: 48px;
+          background: #FFFFFF;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
+          border-radius: 16px;
+
+          &:first-child {
+            margin-bottom: 26px;
+          }
+
+          span {
+            color: #333333;
+            font-size: 32px;
+            font-weight: 600;
+          }
+
+          image {
+            width: 32px;
+            height: 32px;
+            margin-right: 16px;
+          }
+        }
+      }
+    }
+
+    .userinfo {
+      display: flex;
+      align-items: center;
+      margin-bottom: 50px;
+
+      image {
+        width: 112px;
+        height: 112px;
+        margin-right: 24px;
+        border-radius: 50%;
+      }
+
+      .right {
+        h2 {
+          margin-bottom: 10px;
+          font-weight: 600;
+          color: #333333;
+          font-size: 44px;
+        }
+
+        p {
+          font-size: 28px;
+          color: #999999;
+        }
+      }
+    }
+
+    i, em {
+      font-style: normal;
+    }
+
+    .album-total {
+      display: flex;
+      align-items: center;
+
+      .album-total__item {
+        display: flex;
+        flex: 1;
+        font-size: 28px;
+
+        i {
+          color: #3B424A;
+          font-weight: 600;
+        }
+
+        span {
+          margin-right: 16px;
+          color: #999999;
+        }
+      }
+    }
+  }
+</style>

src/saas/AppCountryAlbum/components/Organize.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="Organize">
+    <div class="Organize-top">
+      <div>
+        <div class="left">
+          <h2>09</h2>
+          <div class="left-wrapper__right">
+            <h3>2022年2月</h3>
+            <p>日·数据统计</p>
+          </div>
+        </div>
+        <div class="right">
+          <image src="../images/qiehuan.png" />
+          <span>切换日期</span>
+        </div>
+      </div>
+    </div>
+    <div class="info">
+      <div class="info-item info-total">
+        <div class="info-item__title">
+          <h2>拍照统计</h2>
+        </div>
+        <div class="info-total__wrapper">
+          <div class="info-total__item">
+            <span>未拍照</span>
+            <div class="info-total__item--bottom">
+              <h3>0</h3>
+              <i>人</i>
+            </div>
+          </div>
+          <div class="info-total__item">
+            <span>已拍照</span>
+            <div class="info-total__item--bottom">
+              <h3>10</h3>
+              <i>人</i>
+            </div>
+          </div>
+          <div class="info-total__item">
+            <span>拍照数</span>
+            <div class="info-total__item--bottom">
+              <h3>30</h3>
+              <i>人</i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info-item info-work">
+        <div class="info-item__title">
+          <h2>考勤统计</h2>
+          <image src="../images/right.png" />
+        </div>
+        <div class="info-work__wrapper">
+          <div class="top">
+            <div class="left">
+              <h2>8</h2>
+              <span>人已打卡</span>
+              <i>共12人</i>
+            </div>
+            <span>66.6%</span>
+          </div>
+          <div class="progress">
+            <div style="width: 60%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="info-item info-rank">
+        <div class="info-item__title">
+          <h2>成员拍照排名</h2>
+          <image src="../images/right.png" />
+        </div>
+        <div class="info-rank__wrapper">
+          <div class="rank-item" v-for="(item, index) in 10" :key="index">
+            <div class="rank-item__left">
+              <image src="../images/rank1.png" v-if="index === 0" />
+              <image src="../images/rank2.png" v-else-if="index === 1" />
+              <image src="../images/rank3.png" v-else-if="index === 2" />
+              <span v-else>{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</span>
+              <h2>贡平娟</h2>
+            </div>
+            <div class="rank-item__right">
+              <span>已上传</span>
+              <i>10</i>
+              <span>张</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Organize',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Organize {
+    padding: 0 0 40px;
+
+    * {
+      box-sizing: border-box;
+      line-height: 1;
+    }
+
+    i, em {
+      font-style: normal;
+    }
+
+    .info {
+      position: relative;
+      top: -116px;
+      padding: 0 32px;
+
+      .info-item {
+        margin-bottom: 32px;
+        padding: 0 32px 32px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
+        border-radius: 16px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .info-rank__wrapper {
+          .rank-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 112px;
+            border-bottom: 1px solid #DDDDDD;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            & > div {
+              display: flex;
+              align-items: center;
+            }
+
+            .rank-item__right {
+              font-size: 28px;
+              color: #999999;
+
+              i {
+                color: #2E88FF;
+              }
+            }
+
+            .rank-item__left {
+              image {
+                width: 50px;
+                height: 50px;
+                margin-right: 32px;
+              }
+
+              span {
+                width: 60px;
+                margin-right: 22px;
+                padding-left: 6px;
+                color: #CCCCCC;
+                font-size: 32px;
+                font-weight: 600;
+              }
+
+              h2 {
+                color: #333333;
+                font-size: 32px;
+              }
+            }
+          }
+        }
+
+        .info-work__wrapper {
+          .top {
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            & > span {
+              font-size: 32px;
+              font-weight: 600;
+              color: #333333;
+            }
+
+            .left {
+              display: flex;
+              align-items: baseline;
+
+              h2 {
+                position: relative;
+                top: 6px;
+                color: #333;
+                font-size: 56px;
+              }
+
+              span {
+                font-size: 32px;
+                color: #333;
+              }
+
+              i {
+                margin-left: 12px;
+                font-size: 32px;
+                color: #999999;
+              }
+            }
+          }
+
+          .progress {
+            position: relative;
+            height: 16px;
+            margin-top: 32px;
+            margin-bottom: 16px;
+            background: #EEEEEE;
+            border-radius: 4px;
+            overflow: hidden;
+
+            & > div {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 16px;
+              border-radius: 4px;
+              background: #2E88FF;
+            }
+          }
+        }
+
+        .info-total__wrapper {
+          display: flex;
+          align-items: center;
+
+          & > div {
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            flex: 1;
+            height: 156px;
+            margin-right: 18px;
+            padding: 0 24px;
+            background: #FFFFFF;
+            border-radius: 8px;
+            border: 1px solid #E6E6E7;
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            .info-total__item--bottom {
+              display: flex;
+              align-items: center;
+              line-height: 1;
+            }
+
+            span {
+              margin-bottom: 20px;
+              font-size: 28px;
+              color: #333;
+              font-weight: 600;
+            }
+
+            i {
+              color: #333333;
+              font-size: 26px;
+            }
+          }
+        }
+
+        .info-item__title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 108px;
+
+          h2 {
+            font-weight: 600;
+            font-size: 32px;
+            color: #333;
+          }
+
+          image {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+
+    .Organize-top {
+      height: 320px;
+      width: 100%;
+      padding: 58px 32px 0;
+      background: #3975C6;
+
+      & > div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        height: 56px;
+        padding: 0 36px;
+        background: #285DA4;
+        border-radius: 28px;
+
+        image {
+          width: 36px;
+          height: 26px;
+          margin-right: 12px;
+        }
+
+        span {
+          color: #FFFFFF;
+          font-size: 28px;
+        }
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+
+        h2 {
+          margin-right: 16px;
+          font-size: 100px;
+          font-weight: 600;
+          color: #FFFFFF;
+        }
+
+        h3 {
+          margin-bottom: 8px;
+          color: #a9c3e6;
+          font-size: 28px;
+        }
+
+        p {
+          font-size: 32px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+</style>

src/saas/AppCountryAlbum/components/Tabbar.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="form-wrapper">
+    <div class="form-content">
+      <Home ref="Home" v-if="currIndex === 0" @change="onChange"/>
+      <Organize ref="Organize" v-if="currIndex === 1" @change="onChange"/>
+    </div>
+    <AiTabbar :active.sync="currIndex" :list="tabBar"/>
+  </div>
+</template>
+
+<script>
+  import Home from './Home.vue'
+  import Organize from './Organize.vue'
+
+  export default {
+    name: 'AppAskForm',
+    appName: '乡村相册',
+
+    data() {
+      return {
+        currIndex: 0
+      }
+    },
+
+    components: {
+      Home,
+      Organize
+    },
+
+    computed: {
+      tabBar() {
+        const link = icon => `${this.$cdn}askform/${icon}.png`
+        return [
+          {text: "相册", iconPath: "bdlb1", selectedIconPath: "bdlb2"},
+          {text: "组织", iconPath: "xjxm1", selectedIconPath: "xjxm2"}
+        ].map(e => ({
+          ...e,
+          iconPath: link(e.iconPath),
+          selectedIconPath: link(e.selectedIconPath)
+        }))
+      }
+    },
+
+    methods: {
+      onChange(e) {
+        this.$emit('change', e)
+      },
+      show() {
+        if (this.currIndex == 0) {
+          this.currIndex = -1
+          this.$nextTick(() => {
+            this.currIndex = 0
+          })
+        }
+      }
+    },
+    onReachBottom() {
+      if (this.currIndex === 0) {
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>