product_wx/pages/subPackages/surroundingReleases/index.vue

<template>
    <div class="surrounding">
      <van-tabs :active="active" @change="onChange">
        <van-tab title="新增发布" :name="0">
          <div class="newRelease_com">
            <ul class="predetermineUl">
              <li class="predetermineLi2" style="border-bottom: none">
                <div class="liName">标题</div>
                <van-field
                    :value="postData.constant"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                    class="myField"
                    maxlength="50"
                    show-word-limit
                />
              </li>
            </ul>
            <ul class="predetermineUl">
              <li class="detailLi2" style="border-bottom: none">
            <span class="liName">
              快捷选择
            </span>
                <div class="detailLi2Box">
                  <div class="detailLi2BoxTop">
                    <div class="checkItem" :class="checkedName===item.label?'checked':''" v-for="item in checkList" :key="item.id" @click="clickCheck(item)">{{item.label}}</div>
                  </div>
                </div>
              </li>
              <li class="detailLi">
                <span class="liName">地址</span>
                <span >
               <input class="liInfo" placeholder="选择地址" disabled>
               <van-icon name="location" style="color: rgba(51, 51, 51, 0.90)"/>
            </span>
              </li>
              <li class="detailLi" style="border-bottom: none">
                <span class="liName">电话</span>
                <span >
               <input class="liInfo" placeholder="请填写">
            </span>
              </li>
            </ul>
            <ul class="predetermineUl">
              <li class="detailLi2">
                <div class="titleBox" style="margin-bottom: 24rpx">
                  <span class="liName">简介</span>
                  <span class="tips">（支持图片上传限20M内，最多1张）</span>
                </div>
                <van-uploader
                    :max-count="12"
                    @delete="deleteRYXXZP"
                    :file-list="fileList"
                    @after-read="uploadRYXXZP"
                    :show-upload="true"
                />
                <van-field
                    :value="postData.constant"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                    class="myField"
                    maxlength="2000"
                    show-word-limit
                />
              </li>
            </ul>
            <div class="buttonBox">
              <button class="btn zcBtn">暂存</button>
              <button class="btn tjBtn">发布</button>
            </div>
          </div>
        </van-tab>
        <van-tab title="发布记录" :name="1">
            <releaseRecord_com/>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import releaseRecord_com from "./components/releaseRecord_com.vue";
export default {
  name: "index",
  components:{
    releaseRecord_com
  },
  data(){
    return{
      active:0,
      dc_key: ['periphery_type'],
      fileList:[],
      checkList:[],
      postData:{},
      checkedName:'干洗'
    }
  },
  created(){
    this.getByCodes()
  },
  methods:{
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.checkList = this.dic_SelectList.periphery_type
      console.log('checkList',this.checkList)
    },
    clickCheck(item){
      this.checkedName = item.label
    },
    onChange(e){

    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      console.log(event)
      let that = this;
      const { file } = event.detail;
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          console.log('data',data)
          that.fileList.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data[0],
            isImage: true,
          });
        },
        fail(res) {},
      });
    },
  }
}
</script>

<style lang="scss">
.surrounding{
  .newRelease_com{
    .predetermineUl{
      margin: 24rpx 0;
      background: white;
      box-sizing: border-box;
      padding: 0 32rpx;
      .predetermineLi{
        padding: 32rpx 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        justify-content: space-between;
      }
      .predetermineLi2{
        padding: 32rpx 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        flex-direction: column;
      }
      .van-cell {
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
      .liName{
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
      }
      .liIpt{
        color: rgba(102, 102, 102, 1);
        font-size: 32rpx;
        text-align: right;
      }
      .detailLi{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        border-bottom: 2rpx solid #E6E6E6;
        .liInfo{
          display: inline-block;
          text-align: right;
          max-width: 428rpx;
          color: rgba(102, 102, 102, 1);
          font-size: 32rpx;
          line-height: 38rpx;
          .radio{
            margin-left: 64rpx;
          }
        }
      }
      .detailLi2{
        display: flex;
        flex-direction: column;
        padding: 32rpx 0;
        border-bottom: 2rpx solid #E6E6E6;
        .detailLi2BoxTop{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 12rpx 0;
          .checkItem{
            width: 128rpx;
            height: 64rpx;
            font-size: 28rpx;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F5F7FA;
            border-radius: 8rpx;
            margin: 12rpx 0;
          }
          .checked{
            background: #0365F9;
            color: white;
          }
        }
      }
    }
    .titleBox{
        display: flex;
        align-items: center;
        .titleName{
          color: rgba(24, 23, 42, 1);
          font-size: 32rpx;
          font-weight: 600;
          margin-right: 16rpx;
        }
        .tips{
          font-size: 28rpx;
          color: rgba(179, 179, 179, 1);
        }
      }
    .buttonBox{
      display: flex;
      justify-content: center;
      .btn{
        width: 240rpx;
        height: 80rpx;
        display: flex;
        border-radius: 8rpx;
        align-items: center;
        justify-content: center;
        margin: 48rpx 16rpx 150rpx 16rpx;
        color: white;
        letter-spacing: 2rpx;
        text-indent: 2rpx;
      }
      .zcBtn{
        background: #FE8643;
      }
      .tjBtn{
        background: #0365F9;
      }
    }
  }
}
</style>