乡村相册

src/saas/AppCountryAlbum/AddReport.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="report">
     <components class="report-item" :is="component"></components>
-    <div class="report-list">
+    <div class="report-list" data-html2canvas-ignore>
       <image @click="component = 'WorkReport'" :class="[component === 'WorkReport' ? 'active' : '']" src="./images/report1.png" />
       <image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report4.png" />
       <image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report2.png" />
@@ -11,10 +11,10 @@
 </template>
 
 <script>
-  import Daily from './components/Daily'
-  import WorkReport from './components/WorkReport'
-  import InspectLog from './components/InspectLog'
-  import MeetingMminutes from './components/MeetingMminutes'
+  import Daily from './components/report/Daily'
+  import WorkReport from './components/report/WorkReport'
+  import InspectLog from './components/report/InspectLog'
+  import MeetingMminutes from './components/report/MeetingMminutes'
 
   export default {
     name: 'Report',
@@ -46,23 +46,26 @@
 
 <style lang="scss" scoped>
   .report {
-    height: 100vh;
-    overflow: hidden;
+    // height: 100vh;
+    // overflow: hidden;
+    padding-bottom: 240px;
 
     * {
       box-sizing: border-box;
     }
 
     .report-item {
-      height: calc(100% - 240px);
       padding-bottom: 20px;
-      overflow-y: auto;
     }
 
     .report-list {
+      position: fixed;
       display: flex;
       justify-content: center;
       align-items: center;
+      left: 0;
+      bottom: 0;
+      width: 100%;
       height: 240px;
       padding: 0 24px;
       background: #FFFFFF;

src/saas/AppCountryAlbum/ReportConfig.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="AttendanceFiexdTime">
+    <div class="form-group">
+      <div class="form-item" v-for="(item, index) in list" :key="index">
+        <span>{{ item.label }}</span>
+        <div class="form-item__right" v-if="item.type === 'text'">
+          <input :placeholder="'请输入' + item.label" v-model="item.value">
+          <span></span>
+        </div>
+        <div class="form-item__right" v-if="item.type === 'date'" @click="currIndex = index, isShowDate = true">
+          <span :style="{color: item.value ? '#333' : '#999'}">{{ item.value || '请选择' + item.label }}</span>
+          <u-icon name="arrow-right" color="#E1E2E3" size="#E1E2E3"></u-icon>
+        </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>
+  export default {
+    data () {
+      return {
+        list: [],
+        isShowDate: false,
+        params: {
+          year: true,
+          month: true,
+          day: true
+        },
+        currIndex: 0
+      }
+    },
+
+    onLoad (query) {
+      this.list = JSON.parse(query.params)
+    },
+
+    methods: {
+      onChange (e) {
+        this.$set(this.list[this.currIndex], 'value', `${e.year}-${e.month}-${e.day}`)
+      },
+
+      save () {
+        uni.$emit('change', this.list)
+        uni.navigateBack({
+          delta: 1
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AttendanceFiexdTime {
+    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;
+        }
+
+        .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>

src/saas/AppCountryAlbum/Watermark.vue

@@ -12,7 +12,7 @@
     <div class="watermark" v-if="currIndex > -1">
       <component :is="'Watermark' + (currIndex + 1)"></component>
     </div>
-    <div class="photo-bottom" v-if="!isHide">
+    <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
         <image src="./images/clear.png" @click="isHide = true, currIndex = -1" />
         <h2>水印</h2>
@@ -31,6 +31,20 @@
       </div>
     </div>
     <image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
+    <div class="photo-tabbar"  data-html2canvas-ignore>
+      <div class="item" @click="back">
+        <image src="./images/fanhui.png" />
+        <div>返回</div>
+      </div>
+      <div class="item" @click="isHide = false, currIndex = 0">
+        <image src="./images/shuiyin.png" />
+        <div>水印</div>
+      </div>
+      <div class="item" @click="save">
+        <image src="./images/shangchuan.png" />
+        <div>上传</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -81,7 +95,6 @@
     methods: {
       save () {
         this.isHide = true
-        console.log(this.$refs.waterMarker.offsetHeight)
         this.$nextTick(() => {
           setTimeout(() => {
             html2canvas(this.$refs.waterMarker, {
@@ -136,6 +149,34 @@
       font-size: 28px;
     }
 
+    .photo-tabbar {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
+      width: 100%;
+      height: 216px;
+      background: #1E1E21;
+
+      .item {
+        flex: 1;
+        text-align: center;
+
+        image {
+          width: 56px;
+          height: 56px;
+          margin-bottom: 12px;
+        }
+
+        div {
+          font-size: 28px;
+          color: #fff;
+        }
+      }
+    }
+
     .photo-bottom {
       position: fixed;
       bottom: 0;

src/saas/AppCountryAlbum/components/Home.vue

@@ -99,7 +99,6 @@
           count: 1,
           sizeType: ['compressed'],
           success: res => {
-            console.log(res.tempFiles[0])
             let formData = new FormData()
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {

src/saas/AppCountryAlbum/components/report/Daily.vue

@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="add">
-        <div class="add-btn" @click="choose">
+        <div class="add-btn">
           <span>添加图片</span>
         </div>
         <div class="add-btn">

src/saas/AppCountryAlbum/components/report/InspectLog.vue

@@ -66,7 +66,7 @@
     .top {
       width: 100%;
       height: 16px;
-      background: url(./../images/xc-icon.png) repeat;
+      background: url(./../../images/xc-icon.png) repeat;
       background-size: 16px 16px;
     }
 

src/saas/AppCountryAlbum/components/report/WorkReport.vue

@@ -1,28 +1,26 @@
 <template>
-  <div class="WorkReport">
-    <div class="top">
-      <span>请输入汇报单位</span>
-      <span>2022-03-09</span>
+  <div class="WorkReport" ref="report">
+    <div class="top" @click="linkTo('./ReportConfig')">
+      <span>{{ form.unit || '请输入汇报单位' }}</span>
+      <span>{{ form.date || '请选择日期' }}</span>
     </div>
-    <div class="body">
+    <div class="body" @click="linkTo('./ReportConfig')">
       <h2>工作汇报</h2>
-      <div class="subtitle">千言街巡查情况汇报</div>
+      <div class="subtitle">{{ form.title || '请输入标题' }}</div>
       <div class="partition">
         <div><i></i></div>
       </div>
     </div>
     <div class="bottom">
-      <div class="bottom-item__wrapper">
+      <div class="bottom-item__wrapper" @click="linkTo('./ReportConfig')">
         <div class="bottom-item">
-          <label>汇报人：</label>
-          <span>鄢然</span>
+          <label>汇报人：{{ form.name || '请输入汇报人姓名' }}</label>
         </div>
         <div class="bottom-item">
-          <label>备注：</label>
-          <span>鄢然</span>
+          <span>备注：{{ '请输入备注' }}</span>
         </div>
       </div>
-      <div class="add">
+      <div class="add" data-html2canvas-ignore ref="add">
         <div class="add-btn">
           <span>添加图片</span>
         </div>
@@ -31,10 +29,12 @@
         </div>
       </div>
     </div>
+    <image v-if="waterSrc" :src="waterSrc" />
   </div>
 </template>
 
 <script>
+  import html2canvas from 'html2canvas'
   export default {
     name: 'WorkReport',
 
@@ -42,16 +42,71 @@
 
     data () {
       return {
-
+        waterSrc: '',
+        form: {
+          unit: '',
+          title: '',
+          date: '',
+          name: ''
+        }
       }
     },
 
-    onLoad () {
-
+    mounted () {
+      uni.$on('change', e => {
+        console.log(e)
+        e.forEach(v => {
+          this.form[v.key] = v.value
+        })
+      })
     },
 
     methods: {
+      save () {
+        const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
+        html2canvas(this.$refs.report, {
+          allowTaint: true,
+          useCORS: true,
+          height
+        }).then((canvas) => {
+          let dataURL = canvas.toDataURL('image/png')
+          this.waterSrc = dataURL
+        }).catch(e => {
+          console.log(e)
+        })
+      },
 
+      linkTo (path) {
+        const data = [
+          {
+            type: 'text',
+            key: 'unit',
+            value: '',
+            label: '汇报单位'
+          },
+          {
+            type: 'text',
+            key: 'title',
+            value: '',
+            label: '标题'
+          },
+          {
+            type: 'text',
+            key: 'name',
+            value: '',
+            label: '汇报人'
+          },
+          {
+            type: 'date',
+            key: 'date',
+            value: '',
+            label: '汇报日期'
+          }
+        ]
+        uni.navigateTo({
+          url: `${path}?params=${JSON.stringify(data)}`
+        })
+      }
     }
   }
 </script>
@@ -146,6 +201,11 @@
           color: #333333;
           font-size: 32px;
 
+          span {
+            flex: 1;
+            text-align: justify;
+          }
+
           &:last-child {
             margin-bottom: 0;
           }