zh_order_food_xcx/pages-school/add-circle.vue

<template>
  <view class="add-circle-box iPhone-bottom flex-common-css box-border-box">
    <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
    <Nav title='发圈子' bgckgroundBox='#fff'></Nav>
    <view class="scroll-view-css box-border-box ptp-24">
      <view class="bgc-f box-border-box p-32">
        <view class="fs-34 fw-600 mb-20">内容描述 <span class='fs-34 fc-9 fw-400'>(必填）</span></view>
        <textarea v-model="fromData.content" class="textarea-class fs-24" :maxlength='500'
          placeholder='这一刻说些什么'></textarea>
      </view>
      <view class="bgc-f mb-20">
        <EnUpload v-model="fromData.image" number='9'></EnUpload>
      </view>
      <view class="bgc-f box-border-box p-32 flex-justify-space align-items-center" @click="openPop()">
        <view class="fs-34 fw-600">{{typeName}}</view>
        <image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
      </view>
    </view>
    <view class="box-border-box p-32" @click="save()">
      <view class="b-bottom text-align-center fs-32 fw-600 fc-f">发布</view>
    </view>
    <uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
      <view class="pop-box box-border-box p-24">
        <view class="head-pop flex-justify-space align-items-center mb-24">
          <uni-icons @click.stop="closePop(1)" type="closeempty" size="24"></uni-icons>
          <view class="fs-36 fc-0 fw-600">选发布类型</view>
          <view class="fs-28 fw-600 fc-41ABF5" @click.stop="closePop(2)">确定</view>
        </view>
        <view class="scroll-view-css">
          <view class="item-box fs-32 " :class="fromData.topic_id==item.id?'fc-41ABF5 bgc-D5EDFB':'bgc-F3F4F6'"
            v-for="(item,i) in classList" :key="i" @click="selectPopAddEditType(item)">{{item.name}}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    getTopic
  } from '@/api/category.js';
  import {
    alumniSave
  } from '@/api/alumni.js';
  import tools from '@/service/tools';
  import EnUpload from '@/components/en-from/en-upload/en-upload.vue';
  export default {
    components: {
      EnUpload
    },
    data() {
      return {
        fromData: {
          news_id: '',
          content: '',
          image: [],
          school_id: '',
          topic_id: '',
        },
        isAJAX: false,
        classList: [],
        typeName: '请选择发布类型',
        show: 'false'
      }
    },
    onLoad(e) {
      if (e.news_id) {
        this.fromData.news_id = e.news_id;
      } else {
        this.fromData.news_id = '';
      }
    },
    methods: {
      change(e) {
        this.show = e.show
      },
      selectPopAddEditType(item) {
        if (this.fromData.topic_id != item.id) {
          this.fromData.topic_id = item.id;
          this.typeName = item.name;
        }
      },
      openPop() {
        getTopic().then((res) => {
          if (res.code === 1) {
            this.classList = res.data;
            this.$refs.popup.open();
          }
        })
      },
      closePop(type) {
        if (type === 1) {
          this.fromData.topic_id = '';
          this.typeName = '请选择发布类型';
        }
        this.$refs.popup.close();
      },

      save() {

        if (this.isAJAX) {
          return
        }
        this.isAJAX = true;
        let circleSchoolId = uni.getStorageSync('circleSchoolId');
        let school_id = uni.getStorageSync('school_id');
        this.fromData.school_id = circleSchoolId ? circleSchoolId : school_id;
        alumniSave(this.fromData).then((res) => {
          if (res.code === 1) {
            tools.success(res.msg)
            setTimeout(() => {
              this.isAJAX = false;
              uni.reLaunch({
                url: '/pages-school/school-circle'
              })
            }, 1500)
          } else {
            tools.error(res.msg)
            this.isAJAX = false;
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .textarea-class {
    width: 100%;
  }

  .add-circle-box {
    .b-bottom {
      width: 686rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(105deg, #57CAFF 0%, #41ABF5 100%);
      border-radius: 200rpx;
    }

    .right-icon {
      width: 32rpx;
      height: 32rpx;
    }

    .head-pop {
      padding-bottom: 34rpx !important;
      border-bottom: 1rpx solid #F2F2F2;
    }

    .pop-box {
      width: 100%;
      height: 50vh;
      // background-color: #fff;
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;

      .item-box {
        width: 100%;
        height: 92rpx;

        border-radius: 200rpx;
        line-height: 92rpx;
        text-align: center;
        margin-bottom: 24rpx;
      }
    }
  }
</style>