乡村相册接口对接

2022-05-19 14:43:42 +08:00
parent a718ef4273
commit e2fa55065e
9 changed files with 407 additions and 150 deletions
--- a/src/common/axios.js
+++ b/src/common/axios.js
@@ -28,6 +28,14 @@ instance.interceptors.response.use(res => {
  if (res.data) {
    if (res.data.code) {
      if (res.data.code == 0) {
+        return res.data
+      } else if (res.data.code === 1) {
+        uni.showToast({
+          title: res.data.msg,
+          duration: 2000,
+          icon: 'none'
+        })
+
        return res.data
      } else if (res.data.code == 401) {
        store.commit("logout");
--- a/src/saas/AppCountryAlbum/AlbumDetail.vue
+++ b/src/saas/AppCountryAlbum/AlbumDetail.vue
@@ -40,11 +40,11 @@
        </div>
      </div>
      <div class="photo-item__wrapper">
-        <div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in list" :key="index">
-          <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" @click="preview(item.url)" mode="aspectFill" />
+        <div class="photo-item" @click="linkTo('./Photo?url=' + item.photoUrl + '&id=' + item.id)" v-for="(item, index) in list" :key="index">
+          <image :src="item.photoUrl" mode="aspectFill" />
          <div class="photo-item__text">
            <h2>张三</h2>
-            <p>02-12 12:32</p>
+            <p>{{ item.createTime }}</p>
          </div>
        </div>
        <AiEmpty v-if="!list.length"></AiEmpty>
@@ -95,10 +95,15 @@
      uni.$on('change', () => {
        this.getInfo(query.id)
      })
+
+      uni.$on('update', () => {
+        this.getList()
+      })
    },

    onUnload () {
      uni.$off('change')
+      uni.$off('update')
    },

    methods: {
@@ -116,18 +121,6 @@
        })
      },

-      preview (url) {
-        let imgs = []
-        this.list.forEach(item => {
-          imgs = [...imgs, ...item.list.map(v => v.url)]
-        })
-
-        uni.previewImage({
-          urls: imgs,
-          current: url
-        })
-      },
-
      getTotalInfo (id) {
        this.$http.post(`/api/appalbumphoto/photoDetail?id=${id}`).then(res => {
          if (res.code === 0) {
@@ -210,7 +203,7 @@
            }

            p {
-              color: #898482;
+              color: #fff;
              font-size: 28px;
            }
          }
--- a/src/saas/AppCountryAlbum/Form.vue
+++ b/src/saas/AppCountryAlbum/Form.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="form">
+    <div class="form-group">
+      <div class="form-item" :class="[config.fieldType === '1' ? 'textarea' : '']">
+        <span>{{ mapFieldLable(config.type) }}</span>
+        <div class="form-item__right" v-if="config.fieldType === '0'">
+          <input :placeholder="'请输入' + mapFieldLable(config.type)" v-model="config.defaultValue">
+          <span></span>
+        </div>
+        <div class="form-item__right" v-if="config.fieldType === 'date'" @click="isShowDate = true">
+          <span :style="{color: config.defaultValue ? '#333' : '#999'}">{{ config.defaultValue || '请选择' + mapFieldLable(config.type) }}</span>
+          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
+        </div>
+        <div class="form-item__right" v-if="config.fieldType === '1'">
+          <textarea :placeholder="'请输入' + mapFieldLable(config.type)" v-model="config.defaultValue" :maxlength="-1"></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="form-btn" hover-class="text-hover" @click="save">保存</div>
+    <u-picker mode="time" v-model="isShowDate" :params="params" @confirm="onChange"></u-picker>
+  </div>
+</template>
+<script>
+  import { mapFieldLable } from './config'
+  export default {
+    data () {
+      return {
+        list: [],
+        mapFieldLable,
+        isShowDate: false,
+        params: {
+          year: true,
+          month: true,
+          day: true
+        },
+        currIndex: 0,
+        config: {
+          type: '',
+          fieldType: '',
+          defaultValue: ''
+        }
+      }
+    },
+
+    onLoad () {
+      this.config = {
+        ...this.config,
+        ...uni.getStorageSync('formConfig')
+      }
+    },
+
+    methods: {
+      onChange (e) {
+        this.$set(config, 'value', `${e.year}-${e.month}-${e.day}`)
+      },
+
+      save () {
+        uni.$emit('change', this.config)
+        uni.navigateBack({
+          delta: 1
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .form {
+    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-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 120px;
+        font-size: 32px;
+        color: #333333;
+        border-bottom: 1px solid #DDDDDD;
+
+        &:last-child {
+          border: none;
+        }
+
+        & > span {
+          margin-right: 20px;
+        }
+
+        &.textarea {
+          display: block;
+          height: auto;
+          padding: 32px 0;
+
+          textarea {
+            width: 100%;
+            margin-top: 20px;
+            text-align: left;
+          }
+        }
+
+        .form-item__right {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          text-align: right;
+          height: 100%;
+          flex: 1;
+
+          span {
+            font-size: 30px;
+            color: #333;
+          }
+
+          input {
+            width: 100%;
+            height: 100%;
+            text-align: right;
+            font-size: 30px;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+</style>
--- a/src/saas/AppCountryAlbum/Photo.vue
+++ b/src/saas/AppCountryAlbum/Photo.vue
@@ -1,16 +1,16 @@
 <template>
  <div class="photo">
-    <image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+    <image mode="aspectFit" :src="img" @click="preview(img)" />
    <div class="photo-footer">
+      <div class="item" @click="back">
+        <image src="./images/fanhui.png" />
+        <span>返回</span>
+      </div>
      <div class="item" @click="back">
        <image src="./images/fenxiang.png" />
        <span>分享</span>
      </div>
-      <div class="item">
-        <image src="./images/xiazai.png" />
-        <span>下载</span>
-      </div>
-      <div class="item">
+      <div class="item" @click="remove">
        <image src="./images/shanchu.png" />
        <span>删除</span>
      </div>
@@ -26,12 +26,14 @@

    data () {
      return {
-
+        img: '',
+        id: ''
      }
    },

-    onLoad () {
-
+    onLoad (query) {
+      this.id = query.id
+      this.img = query.url
    },

    methods: {
@@ -39,6 +41,27 @@
        uni.navigateBack({
          delta: 1
        })
+      },
+
+      remove () {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.$http.post(`/api/appalbumphoto/delete?ids=${this.id}`).then(res => {
+            if (res.code == 0) {
+              this.$u.toast('删除成功')
+              uni.$emit('update')
+
+              this.back()
+            }
+          })
+        }).catch(() => {
+        })
+      },
+
+      preview (url) {
+        uni.previewImage({
+          urls: [url],
+          current: url
+        })
      }
    }
  }
@@ -49,6 +72,7 @@
    position: relative;
    width: 100%;
    height: 100vh;
+    overflow: auto;
    background: #000;

    .photo-footer {
@@ -84,7 +108,7 @@

    & > image {
      width: 100%;
-      height: 100%;
+      min-height: calc(100% - 216px);
    }
  }
-</style>
+</style>
--- a/src/saas/AppCountryAlbum/Watermark.vue
+++ b/src/saas/AppCountryAlbum/Watermark.vue
@@ -9,8 +9,8 @@
      <span @click="save">保存</span>
    </div>
    <image :src="img" mode="aspectFit" />
-    <div class="watermark" v-if="currIndex > -1">
-      <component :is="'Watermark' + (currIndex + 1)"></component>
+    <div class="watermark" v-if="currIndex > -1 && currWatermarkConfig.length">
+      <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
    </div>
    <div class="photo-bottom" data-html2canvas-ignore>
      <div class="photo-bottom__top">
@@ -25,7 +25,7 @@
          v-for="(item, index) in watermarkList"
          :key="item.id"
          @click="currIndex = index">
-          <image :src="config[index].thum" mode="aspectFill" />
+          <image :src="item.thum" mode="aspectFill" />
          <div class="water-item__bottom">{{ item.name }}</div>
        </div>
      </div>
@@ -60,7 +60,6 @@
  import Watermark7 from './components/watermark/Watermark7'
  import Watermark8 from './components/watermark/Watermark8'

-  import { config } from './config'
  export default {
    name: 'Watermark',

@@ -80,7 +79,6 @@
    data () {
      return {
        img: '',
-        config,
        currIndex: 0,
        isHide: false,
        height: '100%',
@@ -100,6 +98,12 @@
        }

        return [this.albumList.map(v => v.value).indexOf(this.albumId)]
+      },
+
+      currWatermarkConfig () {
+        if (this.currIndex < 0 || !this.watermarkList.length) return []
+
+        return this.watermarkList[this.currIndex].itemList
      }
    },

@@ -117,42 +121,44 @@
    methods: {
      save () {
        this.isHide = true
+        this.$loading()
        this.$nextTick(() => {
-          setTimeout(() => {
-            html2canvas(this.$refs.waterMarker, {
-              allowTaint: true,
-              useCORS: true
-            }).then((canvas) => {
-              let dataURL = canvas.toDataURL('image/png')
-              const file = this.dataURLtoFile(dataURL, 'photo.png')
-              let formData = new FormData()
-              formData.append('file', file)
-              this.$http.post('/admin/file/add2?type=image', formData).then(res => {
-                if (res.code === 0) {
-                  console.log(res)
-                  let info = {}
-                  if (this.currIndex > -1) {
-                    info = this.watermarkList[this.currIndex]
-                  }
-                  this.$http.post('/api/appalbumphoto/addOrUpdate', {
-                    albumId: this.albumId,
-                    photoUrl: res.data.url,
-                    fileId: res.data.id,
-                    watermarkType: this.currIndex > -1 ? info.watermarkType : '',
-                    templateId: this.currIndex > -1 ? info.id : ''
-                  }).then(res => {
-                    if (res.code === 0) {
-                      console.log(res)
-                      this.$u.toast('新增成功')
-                    }
-                  })
+          html2canvas(this.$refs.waterMarker, {
+            allowTaint: true,
+            useCORS: true
+          }).then((canvas) => {
+            let dataURL = canvas.toDataURL('image/png')
+            const file = this.dataURLtoFile(dataURL, 'photo.png')
+            let formData = new FormData()
+            formData.append('file', file)
+            this.$http.post('/admin/file/add2?type=image', formData).then(res => {
+              if (res.code === 0) {
+                let info = {}
+                if (this.currIndex > -1) {
+                  info = this.watermarkList[this.currIndex]
                }
-              })
-              this.waterSrc = dataURL
-            }).catch(e => {
-              console.log(e)
+                this.$http.post('/api/appalbumphoto/addOrUpdate', {
+                  albumId: this.albumId,
+                  photoUrl: res.data.url,
+                  fileId: res.data.id,
+                  watermarkType: this.currIndex > -1 ? info.watermarkType : '',
+                  templateId: this.currIndex > -1 ? info.id : ''
+                }).then(res => {
+                  if (res.code === 0) {
+                    uni.$emit('update')
+                    this.$u.toast('新增成功')
+
+                    setTimeout(() => {
+                      this.back()
+                    }, 500)
+                  }
+                })
+              }
            })
-          }, 2000)
+            // this.waterSrc = dataURL
+          }).catch(e => {
+            console.log(e)
+          })
        })
      },

--- a/src/saas/AppCountryAlbum/WatermarkConfig.vue
+++ b/src/saas/AppCountryAlbum/WatermarkConfig.vue
@@ -1,80 +1,43 @@
 <template>
  <div class="AttendanceFiexdTime">
    <div class="form-group">
-      <div class="form-group__item">
+      <div class="form-group__item" hover-class="bg-hover" v-for="(item, index) in config" :key="index">
        <div class="left">
-          <switch color="#1088F9" checked />
-          <div class="left-right">
-            <h2>大标题</h2>
-            <p>打卡</p>
+          <switch color="#1088F9" :checked="item.status === '1'" :disabled="item.editEnable === '0'" @change="e => onChange(e, index)" />
+          <div class="left-right" @click="toInput(item)">
+            <h2>{{ mapFieldLable(item.type) }}</h2>
+            <p>{{ item.defaultValue || '' }}</p>
          </div>
        </div>
-        <div class="right">
-          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
-        </div>
-      </div>
-      <div class="form-group__item">
-        <div class="left">
-          <switch color="#1088F9" disabled checked />
-          <div class="left-right">
-            <h2>时间</h2>
-            <p>2022-01-03</p>
-          </div>
-        </div>
-        <div class="right">
-          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
-        </div>
-      </div>
-      <div class="form-group__item">
-        <div class="left">
-          <switch color="#1088F9" checked />
-          <div class="left-right">
-            <h2>地点</h2>
-            <p>绿地蓝海</p>
-          </div>
-        </div>
-        <div class="right">
-          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
-        </div>
-      </div>
-      <div class="form-group__item">
-        <div class="left">
-          <switch color="#1088F9" checked />
-          <div class="left-right">
-            <h2>拍摄人</h2>
-            <p>陶白白</p>
-          </div>
-        </div>
-        <div class="right">
-          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
-        </div>
-      </div>
-      <div class="form-group__item">
-        <div class="left">
-          <switch color="#1088F9" checked />
-          <div class="left-right">
-            <h2>天气</h2>
-            <p>雨夹雪 北风3℃</p>
-          </div>
-        </div>
-        <div class="right">
+        <div class="right" @click="toInput(item)">
          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
        </div>
      </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 { mapFieldLable } from './config'
+
  export default {
    data () {
      return {
-
+        config: [],
+        mapFieldLable
      }
    },

    onLoad () {
+      this.config = uni.getStorageSync('waterConfig')

+      uni.$on('change', e => {
+        this.config.forEach((v, index) => {
+          if (v.type === e.type) {
+            this.$set(this.config[index], 'defaultValue', e.defaultValue)
+          }
+        })
+      })
    },

    methods: {
@@ -82,6 +45,32 @@
        uni.navigateTo({
          url
        })
+      },
+
+      onChange (e, index) {
+        this.$set(this.config[index], 'status', e.detail.value ? '1' : '0')
+      },
+
+      toInput (e) {
+        if (e.editEnable === '0') return
+
+        if (e.fieldType === '2') return
+
+        uni.setStorageSync('formConfig', e)
+        this.linkTo('./Form')
+      },
+
+      save () {
+        for (let i = 0; i < this.config.length; i ++) {
+          if ((this.config[i].fieldType === '0' || this.config[i].fieldType === '1') && !this.config[i].defaultValue && this.config[i].status === '1') {
+            return this.$u.toast(`请输入${this.mapFieldLable(this.config[i].type)}`)
+          }
+        }
+
+        uni.$emit('change', this.config)
+        uni.navigateBack({
+          delta: 1
+        })
      }
    }
  }
@@ -122,7 +111,7 @@
        display: flex;
        align-items: center;
        justify-content: space-between;
-        height: 160px;
+        padding: 32rpx 0;
        font-size: 32px;
        color: #333333;
        border-bottom: 1px solid #DDDDDD;
@@ -134,8 +123,11 @@
        .left {
          display: flex;
          align-items: center;
+          flex: 1;
+          margin-right: 10px;

          .left-right {
+            flex: 1;
            margin-left: 36px;

            h2 {
--- a/src/saas/AppCountryAlbum/components/Home.vue
+++ b/src/saas/AppCountryAlbum/components/Home.vue
@@ -80,13 +80,15 @@
      return {
        countPhotoNo: '',
        countPhotographer: '',
-        list: []
+        list: [],
+        msgInfo: {}
      }
    },

    mounted () {
      this.getCountPhotoNo()
      this.getAlbumList()
+      this.getMsgList()
    },

    methods: {
@@ -109,6 +111,14 @@
        })
      },

+      getMsgList () {
+        this.$http.post('/api/sysmessage/latestnews').then(res => {
+          if (res.code === 0) {
+            this.msgInfo = res.data
+          }
+        })
+      },
+
      getAlbumList () {
        this.$http.post('/api/appalbum/list', null, {
          parmas: {
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
@@ -6,22 +6,30 @@
    </div>
    <div class="info">
      <p>{{ date }} {{ weekCn }}</p>
-      <p>武汉市·绿地蓝海国际A座</p>
-      <p>晴 7℃</p>
+      <p>{{ address }}</p>
+      <p v-if="isShowWeather">{{ weather }}</p>
    </div>
-    <div class="text">#这是一条备注信息</div>
+    <div class="text" v-if="isShowRemark">{{ remark }}</div>
  </div>
 </template>

 <script>
-  import {mapActions} from 'vuex'
+  import { mapActions } from 'vuex'
  export default {
+    props: ['config'],
+
    data () {
      return {
        date: '',
        time: '',
        week: '',
-        timer: null
+        weather: '晴转多云',
+        remark: '',
+        address: '武汉市·绿地蓝海国际A座',
+        timer: null,
+        configList: [],
+        isShowWeather: false,
+        isShowRemark: false
      }
    },

@@ -51,7 +59,24 @@
      }
    },

+    watch: {
+      configList: {
+        handler: function (v) {
+          if (v.length) {
+            const weather = v.filter(v => v.type === '2')[0]
+            const remark = v.filter(v => v.type === '4')[0]
+            console.log(v)
+            this.isShowWeather = weather.status === '1'
+            this.isShowRemark = remark.status === '1'
+            this.remark = remark.defaultValue || ''
+          }
+        },
+        deep: true
+      },
+    },
+
    created () {
+      this.configList = JSON.parse(JSON.stringify(this.config))
      this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
      this.time = this.$dayjs().format('HH:mm')

@@ -61,17 +86,12 @@
        this.week = new Date().getDay()
      }, 1000)

-      this.injectJWeixin(['getLocation']).then(res => {
-        console.log(res)
-        wx.getLocation({
-          type: 'wgs84',
-          success: function (res) {
-            var latitude = res.latitude
-            var longitude = res.longitude
-            var speed = res.speed
-            var accuracy = res.accuracy
-          }
-        });
+      this.getLocation()
+
+      uni.$on('change', e => {
+        this.configList = [
+          ...e
+        ]
      })
    },

@@ -82,21 +102,35 @@
    methods: {
      ...mapActions(['injectJWeixin']),
      getLocation () {
-        uni.getLocation({
-          type: 'wgs84',
-          success: res => {
-            console.log(res)
-            this.$http.get('https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1').then(res => {
+        this.injectJWeixin(['getLocation']).then(res => {
+          console.log(res)
+          wx.getLocation({
+            type: 'wgs84',
+            success: function (res) {
              console.log(res)
-            })
-          },
-          fail: error => {
-            console.log(error)
-          }
+              var latitude = res.latitude
+              var longitude = res.longitude
+              var speed = res.speed
+              var accuracy = res.accuracy
+            }
+          })
        })
+        // uni.getLocation({
+        //   type: 'wgs84',
+        //   success: res => {
+        //     console.log(res)
+        //     this.$http.get('https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1').then(res => {
+        //       console.log(res)
+        //     })
+        //   },
+        //   fail: error => {
+        //     console.log(error)
+        //   }
+        // })
      },

      linkTo (url) {
+        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
          url
        })
@@ -115,6 +149,7 @@
      min-width: 274px;
      height: 48px;
      line-height: 48px;
+      margin-top: 32px;
      padding: 0 16px;
      font-size: 28px;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
@@ -146,7 +181,7 @@

    .info {
      line-height: 40px;
-      margin: 32px 0;
+      margin: 32px 0 0;
      padding-left: 22px;
      border-left: 6px solid #F8BC58;

--- a/src/saas/AppCountryAlbum/config/index.js
+++ b/src/saas/AppCountryAlbum/config/index.js
@@ -45,3 +45,41 @@ export const config = [
  //   thum: 'https://cdn.cunwuyun.cn/dvcp/h5/watermark/1.png'
  // }
 ]
+
+export const mapFieldLable = type => {
+  return {
+    0: '时间',
+    1: '日期',
+    2: '天气',
+    3: '地点',
+    4: '备注',
+    5: '标题',
+    6: '巡检人',
+    7: '巡查事项',
+    8: '工作主题',
+    9: '网格员',
+    10: '网格名称',
+    11: '服务对象',
+    12: '工作纪实',
+    13: '日历',
+    14: '拍摄人',
+    15: '经纬度',
+    16: '自定义文字',
+    17: '大标题',
+    18: '小标题',
+    19: '汇报人',
+    20: '汇报单位',
+    21: '颜色设置',
+    22: '工作单位',
+    23: '巡查地点',
+    24: '巡查人',
+    25: '巡查情况',
+    26: '主持人',
+    27: '记录人',
+    28: '参与人',
+    29: '会议地点',
+    30: '会议主题',
+    31: '会议内容',
+    32: '总结',
+  }[type]
+}