乡村相册

src/saas/AppCountryAlbum/ReportConfig.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="report-config">
-    <div class="form-group">
-      <div class="form-item" v-for="(item, index) in list" :key="index" :class="[item.type === 'textarea' ? 'textarea' : '']">
-        <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 class="form-item__right" v-if="item.type === 'textarea'">
-          <textarea :placeholder="'请输入' + item.label" v-model="item.value" :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>
-  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>
-  .report-config {
-    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>

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

@@ -20,30 +20,38 @@
           <label>总结：</label>
           <span class="">{{ remark }}</span>
         </div>
-        <div class="imgs">
+        <RenderContent style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
-          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-        </div>
       </div>
       <div class="add" data-html2canvas-ignore ref="add">
         <div class="add-btn" @click.stop="addPhoto">
           <span>添加图片</span>
         </div>
-        <!-- <div class="add-btn">
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
           <span>添加文字</span>
-        </div> -->
+        </div>
       </div>
     </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
   </div>
 </template>
 
 <script>
   import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
   export default {
     name: 'Daily',
     label: '日报',
 
     props: ['config'],
 
+    components: {
+      RenderContent
+    },
+
     data () {
       return {
         imgs: [],
@@ -60,6 +68,10 @@
         isShowReporter: true,
         isShowUnit: true,
         isShowRemark: false,
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
       }
     },
 
@@ -116,6 +128,17 @@
         })
       },
 
+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
       addPhoto () {
         uni.chooseImage({
           count: 1,
@@ -125,13 +148,31 @@
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {
               if (res.code === 0) {
-                this.imgs.push(res.data.url)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
               }
             })
           }
         })
       },
 
+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
       linkTo () {
         uni.setStorageSync('waterConfig', this.configList)
         uni.navigateTo({
@@ -151,17 +192,12 @@
       box-sizing: border-box;
     }
 
-    .imgs {
+    .slot-content {
       margin-top: 20px;
+      padding: 0 30px;
 
-      image {
+      textarea {
-        display: block;
         width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
       }
     }
 

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

@@ -22,27 +22,38 @@
           <label>巡查情况：</label>
           <span>{{ remark }}</span>
         </div>
-        <div class="imgs">
+        <RenderContent class="RenderContent" style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
-          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-        </div>
       </div>
       <div class="add" data-html2canvas-ignore ref="add">
         <div class="add-btn" @click="addPhoto">
           <span>添加图片</span>
         </div>
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
+          <span>添加文字</span>
+        </div>
       </div>
     </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
   </div>
 </template>
 
 <script>
   import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
   export default {
     name: 'InspectLog',
     label: '巡查日志',
 
     props: ['config'],
 
+    components: {
+      RenderContent
+    },
+
     data () {
       return {
         title: '巡查日志',
@@ -59,7 +70,11 @@
         isShowAddress: false,
         isShowRemark: false,
         imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
       }
     },
 
@@ -122,6 +137,17 @@
         })
       },
 
+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
       addPhoto () {
         uni.chooseImage({
           count: 1,
@@ -131,13 +157,31 @@
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {
               if (res.code === 0) {
-                this.imgs.push(res.data.url)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
               }
             })
           }
         })
       },
 
+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
       linkTo () {
         uni.setStorageSync('waterConfig', this.configList)
         uni.navigateTo({
@@ -158,17 +202,18 @@
       box-sizing: border-box;
     }
 
-    .imgs {
+    ::v-deep .RenderContent {
+      p {
+        color: #fff;
+      }
+    }
+
+    .slot-content {
       margin-top: 20px;
+      padding: 0 30px;
 
-      image {
+      textarea {
-        display: block;
         width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
       }
     }
 

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

@@ -33,21 +33,28 @@
         <td colspan="3">{{ remark }}</td>
       </tr>
     </table>
-    <div class="imgs">
+    <RenderContent style="margin-top: 20px" :richList="richList" @onLongpress="onLongpress"></RenderContent>
-      <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-    </div>
     <div class="bottom" data-html2canvas-ignore ref="add">
       <div class="add">
         <div class="add-btn" @click="addPhoto">
           <span>添加图片</span>
         </div>
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
+          <span>添加文字</span>
+        </div>
       </div>
     </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
   </div>
 </template>
 
 <script>
   import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
   export default {
     name: 'MeetingMminutes',
 
@@ -55,6 +62,10 @@
 
     props: ['config'],
 
+    components: {
+      RenderContent
+    },
+
     data () {
       return {
         title: '巡查日志',
@@ -76,7 +87,11 @@
         isShowRemark: true,
         isShowHoster: true,
         imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
       }
     },
 
@@ -142,6 +157,17 @@
         })
       },
 
+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
       addPhoto () {
         uni.chooseImage({
           count: 1,
@@ -151,13 +177,31 @@
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {
               if (res.code === 0) {
-                this.imgs.push(res.data.url)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
               }
             })
           }
         })
       },
 
+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
       linkTo () {
         uni.setStorageSync('waterConfig', this.configList)
         uni.navigateTo({
@@ -173,17 +217,12 @@
     padding: 48px 32px 0;
     background: #fff;
 
-    .imgs {
+    .slot-content {
       margin-top: 20px;
+      padding: 0 30px;
 
-      image {
+      textarea {
-        display: block;
         width: 100%;
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 20px;
-        }
       }
     }
 

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="rich">
+    <div class="rich-item" v-for="(item, index) in richList" :key="index">
+      <p @longpress="onLongpress(item, index)" v-if="item.type === 'text'">{{ item.value }}</p>
+      <image @longpress="onLongpress(item, index)" @click="prview(item.value)" v-else mode="widthFix" :src="item.value" />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['richList'],
+
+    data () {
+      return {
+
+      }
+    },
+
+    methods: {
+      onLongpress (item, index) {
+        if (item.type === 'text') {
+          uni.showActionSheet({
+            itemList: ['编辑', '删除'],
+            success: res => {
+              this.$emit('onLongpress', {
+                type: item.type,
+                value: item.value,
+                index: index,
+                action: res.tapIndex === 0 ? 'edit' : 'remove'
+              })
+            }
+          })
+        } else {
+          uni.showActionSheet({
+            itemList: ['删除'],
+            success: () => {
+              this.$emit('onLongpress', {
+                type: item.type,
+                value: item.value,
+                index: index,
+                action: 'remove'
+              })
+            }
+          })
+        }
+      },
+
+      prview (url) {
+        uni.previewImage({
+          urls: [url],
+          current: url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .rich {
+    .rich-item {
+      margin-bottom: 20rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      p {
+        line-height: 1.3;
+        word-break: break-all;
+        text-align: justify;
+        font-size: 30rpx;
+        color: #333;
+      }
+
+      image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+</style>

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

@@ -19,30 +19,39 @@
         <div class="bottom-item" v-if="isShowRemark" @click="linkTo">
           <span>备注：{{ remark }}</span>
         </div>
-        <div class="imgs">
+        <RenderContent :richList="richList" @onLongpress="onLongpress"></RenderContent>
-          <image :src="item" v-for="(item, index) in imgs" mode="widthFix" :key="index" />
-        </div>
       </div>
       <div class="add" data-html2canvas-ignore ref="add">
         <div class="add-btn" @click.stop="addPhoto">
           <span>添加图片</span>
         </div>
-        <!-- <div class="add-btn">
+        <div class="add-btn" @click.stop="content = '', isShowText = true">
           <span>添加文字</span>
-        </div> -->
+        </div>
       </div>
     </div>
+    <u-modal v-model="isShowText" @confirm="confirm" title="文本">
+			<view class="slot-content">
+				<textarea placeholder="请输入文本" :maxlength="-1" v-model="content"></textarea>
+			</view>
+		</u-modal>
   </div>
 </template>
 
 <script>
   import html2canvas from 'html2canvas'
+  import RenderContent from './RenderContent.vue'
+
   export default {
     name: 'WorkReport',
     label: '工作汇报',
 
     props: ['config'],
 
+    components: {
+      RenderContent
+    },
+
     data () {
       return {
         title: '工作汇报',
@@ -58,7 +67,11 @@
         isShowUnit: true,
         isShowRemark: false,
         imgs: [],
-        configList: []
+        configList: [],
+        richList: [],
+        isShowText: false,
+        content: '',
+        currIndex: -1
       }
     },
 
@@ -115,6 +128,17 @@
         })
       },
 
+      onLongpress (e) {
+        if (e.action === 'remove') {
+          this.richList.splice(e.index, 1)
+        } else {
+          this.currIndex = e.index
+          this.content = e.value
+
+          this.isShowText = true
+        }
+      },
+
       addPhoto () {
         uni.chooseImage({
           count: 1,
@@ -124,13 +148,31 @@
             formData.append('file', res.tempFiles[0])
             this.$http.post('/admin/file/add2?type=image', formData).then(res => {
               if (res.code === 0) {
-                this.imgs.push(res.data.url)
+                this.richList.push({
+                  type: 'img',
+                  value: res.data.url
+                })
               }
             })
           }
         })
       },
 
+      confirm () {
+        if (this.currIndex >= 0) {
+          this.richList[this.currIndex].value = this.content
+        } else {
+          this.richList.push({
+            type: 'text',
+            value: this.content
+          })
+        }
+
+        this.isShowText = false
+        this.content = ''
+        this.currIndex = -1
+      },
+
       linkTo () {
         uni.setStorageSync('waterConfig', this.configList)
         uni.navigateTo({
@@ -150,6 +192,15 @@
       box-sizing: border-box;
     }
 
+    .slot-content {
+      margin-top: 20px;
+      padding: 0 30px;
+
+      textarea {
+        width: 100%;
+      }
+    }
+
     & > image {
       position: fixed;
       top: 0;