dvcp_v2_wechat_app/src/project/fengdu/AppCircle/Add.vue

<template>
  <div class="Add">
    <div class="add-content">
      <div class="top">
        <!-- <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-edit.png" /> -->
        <textarea placeholder="发布内容" v-model="form.content" :maxlength="500"></textarea>
        <div class="bottom">
          <div></div>
          <div>
            <i>{{ form.content.length }}</i>
            <span>/500</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <h2>最多上传9张</h2>
        <div class="img">
          <AiUploader v-model="form.files" :limit="9" multiple/>
        </div>
        <div class="topic">
          <h3 v-if="!form.themeId" @click="isShow = true">#绑定话题</h3>
          <div class="choosed" v-else @click="isShow = true">
            <span>#{{ form.themeTitle }}</span>
          </div>
          <p>绑定一个与您发布内容相关很高的话题，会被更多人看到哦。</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h2>仅本社区可见</h2>
      <switch color="#2D7DFF" @change="onSwitchChange"></switch>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" :class="[!form.content ? 'active' : '']" @click="submit">发布服务</div>
    </div>
    <u-popup v-model="isShow" mode="bottom" hidden height="700rpx" border-radius="30">
			<div class="popup">
        <h2>请选择</h2>
        <scroll-view class="popup-list" scroll-y>
          <div
            v-for="(item, index) in topicList"
            :class="[form.themeId === item.id ? 'active' : '']"
            :key="index"
            @click="form.themeId = item.id, form.themeTitle = item.title, isShow = false">
            #{{ item.title }}
          </div>
        </scroll-view>
      </div>
		</u-popup>
  </div>
</template>
<script>
  export default {
    name: 'Add',
    appName: '发新贴',
    navigationBarBackgroundColor: '#ffffff',
    navigationBarTextStyle: 'black',

    data () {
      return {
        form: {
          files: [],
          themeId: '',
          themeTitle: '',
          source: 0,
          content: '',
          visibleRange: 1
        },
        topicList: [],
        isShow: false
      }
    },

    onLoad () {
      this.getTopicList()
    },

    methods: {
      submit () {
        if (!this.form.content) {
          return this.$toast(`内容不能为空`)
        }

        this.$loading()
        this.$instance.post(`/app/appneighborhoodassistance/addOrUpdate`, {
          ...this.form
        }).then(res => {
          uni.hideLoading()
          if (res.code === 0) {
            this.$dialog.alert({
              title: '温馨提示',
              content: '提交成功'
            }).then(() => {
              uni.navigateBack()
              uni.$emit('updateList')
            }).catch(() => {})
          }
        })
      },

      onSwitchChange (e) {
        this.form.visibleRange = e.detail.value ? 0 : 1
      },

      getTopicList () {
        this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
          withoutToken: true,
          params: {
            current: 1,
            size: 100
          }
        }).then(res => {
          if (res.code === 0) {
            this.topicList = res.data.records
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .Add {
    padding: 24px 0 130px;

    & > div {
      background: #fff;
    }

    .btn-wrapper .active {
      background: rgba(45, 125, 255, 0.6);
    }

    .popup {
      height: 700px;
      border-radius: 20px 20px 0 0;

      h2 {
        height: 98px;
        line-height: 98px;
        text-align: center;
        color: #333333;
        font-size: 34px;
        font-weight: 600;
      }

      .popup-list {
        height: calc(100% - 98px);

        div {
          padding: 20px 48px;
          color: #333333;
          font-size: 30px;

          &.active {
            color: #2D7DFF;
          }
        }
      }
    }

    div {
      box-sizing: border-box;
    }

    .add-content {
      margin-bottom: 24px;

      & > .top {
        padding: 32px;
        border-bottom: 1px solid #eee;

        textarea {
          width: 100%;
          height: 300px;
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 14px;

          div {
            display: flex;
            align-items: center;
          }

          i {
            font-size: 24px;
            color: #666666;
          }

          span {
            font-size: 24px;
            color: #999999;
          }
        }
      }

      & > .bottom {
        padding: 32px 32px;

        h2 {
          margin-bottom: 16px;
          font-size: 24px;
          color: #999;
        }

        .topic {
          h3 {
            width: 134px;
            height: 52px;
            line-height: 52px;
            margin-bottom: 12px;
            text-align: center;
            border: 1px solid #999;
            border-radius: 26px;
            color: #666;
            font-size: 22px;
          }

          p {
            font-size: 20px;
            color: #999999;
          }

          .choosed {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 52px;
            padding: 0 16px;
            width: fit-content;
            margin-bottom: 12px;
            border: 1px solid #2D7DFF;
            border-radius: 26px;
            font-size: 22px;
            color: #2D7DFF;
          }
        }
      }
    }

    & > .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 98px;
      padding: 0 32px;

      h2 {
        font-size: 28px;
        color: #333333;
      }
    }
  }
</style>