AddPosts

src/apps/AppResidentActivitie/AddPosts.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="page">
+    <div class="textarea-div mar-b16">
+      <div class="title mar-b32"><span></span>帖子内容</div>
+      <div class="pad-l20">
+        <u-input v-model="form.content" type="textarea" :border="false" :height="140" :auto-height="true" placeholder="请输入内容（1000字以内）" placeholder-style="color:#999;font-size:16px;" maxLength="140" />
+      </div>
+    </div>
+    <div class="textarea-div pad-b208">
+      <div class="title mar-b32"><span></span>图片（最多9张）</div>
+      <div class="pad-l20">
+        <AiUploader :limit="9" v-model="form.images"></AiUploader>
+      </div>
+    </div>
+    <div class="footer-btn">
+      <div class="btn" @click="addPost">立即发布</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AddPosts',
+  components: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  data() {
+    return {
+      files: [],
+      id: '',
+      flag: false,
+      form: {
+        content: '',
+        images: [],
+      },
+    }
+  },
+  onLoad(o) {
+    this.id = o.id || ''
+  },
+  methods: {
+    addPost() {
+      if (this.flag) return
+
+      if (!this.form.content && !this.form.images.length) {
+        return this.$u.toast('帖子内容不能为空')
+      }
+      this.flag = true
+
+      let imagesList = []
+      if (this.form.images) {
+        this.form.images.map((item) => {
+          imagesList.push({ id: item.id, url: item.url })
+        })
+      }
+
+      this.$http
+        .post(`/app/appvillageactivitypost/addOrUpdate`, {
+          content: this.form.content,
+          avatar: this.user.avatarUrl,
+          name: this.user.realName,
+          phone: this.user.phone ? this.user.phone : '',
+          userId: this.user.partyId,
+          activityId: this.id,
+          images: JSON.stringify(imagesList),
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('发布成功')
+            this.flag = false
+            uni.$emit('refresh')
+            uni.navigateBack()
+          }
+        })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.textarea-div {
+  width: 100%;
+  padding: 32px 32px 38px 32px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.title {
+  font-size: 32px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  color: #333;
+  line-height: 44px;
+  span {
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #ff4466;
+    margin-right: 4px;
+  }
+}
+.border {
+  border-bottom: 2px solid #ddd;
+}
+.mar-b32 {
+  margin-bottom: 32px;
+}
+.pad-l20 {
+  padding-left: 20px;
+}
+.mar-b16 {
+  margin-bottom: 16px;
+}
+.pad-b208 {
+  padding-bottom: 208px;
+}
+.footer-btn {
+  width: 100%;
+  padding: 116px 32px 32px;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #f3f6f9;
+  z-index: 99;
+  .btn {
+    width: 100%;
+    height: 92px;
+    line-height: 92px;
+    text-align: center;
+    background: #1365dd;
+    border-radius: 8px;
+    font-size: 34px;
+    color: #fff;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+}
+</style>