settle_down_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.businessName"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                    class="myField"
                    maxlength="50"
                    show-word-limit
                    @change="changeTitle"
                />
              </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="选择地址" v-model="postData.businessAddress" disabled @tap="showMap">
               <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="请填写" v-model="postData.businessPhone">
            </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="1"
                    @delete="deleteRYXXZP"
                    :file-list="fileList"
                    @after-read="uploadRYXXZP"
                    :show-upload="true"
                />
                <van-field
                    :value="postData.introduction"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                    class="myField"
                    maxlength="2000"
                    show-word-limit
                    @change="changeIntro"
                />
              </li>
            </ul>
            <div class="buttonBox">
              <button class="btn zcBtn" @tap="addSurr('unpublished')">暂存</button>
              <button class="btn tjBtn" @tap="addSurr('published')">发布</button>
            </div>
          </div>
        </van-tab>
        <van-tab title="发布记录" :name="1">
            <releaseRecord_com ref="releaseRecord"/>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import releaseRecord_com from "./components/releaseRecord_com.vue";
import { getByCodes,peripheryAdd,getUserLocalStorageInfo } from "@/js_sdk/http";
import dayjs from "dayjs";
export default {
  name: "index",
  components:{
    releaseRecord_com
  },
  data(){
    return{
      active:1,
      dc_key: ['periphery_type'],
      fileList:[],
      checkList:[],
      postData:{
        createdBy:getUserLocalStorageInfo().userId,
        status:'',
        businessName:'',
        type:'',
        businessAddress:'',
        longitude:'',
        latitude:'',
        businessPhone:'',
        fileUrl:'',
        introduction:'',
        releaseType:'periphery'
      },
      checkedName:'干洗',
    }
  },
  onPullDownRefresh() {
    this.$refs.releaseRecord.getByCodes()
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  created(){
    this.getByCodes()
  },
  methods:{
    changeTitle(e){
      this.postData.businessName = e.detail
    },
    changeIntro(e){
      this.postData.introduction = e.detail
    },
    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){
      // console.log(item)
      this.checkedName = item.label
      this.postData.type = item.value
    },
    showMap(){
      const _this = this
      uni.chooseLocation({
        success: function (res) {
          console.log('选择的位置：', res.name);
          _this.postData.businessAddress = res.name
          console.log('纬度：' + res.latitude + '，经度：' + res.longitude);
          _this.postData.latitude = res.latitude
          _this.postData.longitude = res.longitude
          // 其他业务逻辑
        },
        fail: function (error) {
          console.error('Choose location failed: ' + JSON.stringify(error));
        },
        complete: function () {
          console.log('chooseLocation operation is complete');
        }
      });
    },
    addSurr(e){
      const dayjs = require('dayjs')
      const fileArr = []
      this.fileList.forEach(file=>{
        fileArr.push(file.id)
      })
      this.postData.fileUrl = fileArr.toString()
      this.postData.status = e
      let toastMsg = ''
      if (e==='published'){
        this.postData.publisherUserId = getUserLocalStorageInfo().userId
        this.postData.releaseTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        toastMsg = '发布成功'
      }else{
        toastMsg = '暂存成功'
      }
      // console.log(this.postData)
      peripheryAdd(this.postData).then(res=>{
        if (res.code=='200'){
          uni.showToast({
            title: toastMsg,
            duration: 500
          });
          this.postData = {
            createdBy:getUserLocalStorageInfo().userId,
            status:'',
            businessName:'',
            type:'',
            businessAddress:'',
            longitude:'',
            latitude:'',
            businessPhone:'',
            fileUrl:'',
            introduction:'',
            releaseType:'periphery'
          }
          this.fileList = []
          this.active = 1
          this.$refs.releaseRecord.getByCodes()
        }else{
          uni.showToast({
            title: res.msg,
            duration: 500
          });
        }
      })
    },
    onChange(e){
      // console.log(e)
      this.active = e.detail.name
    },
    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;
          min-width: 528rpx;
          max-width: 528rpx;
          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>