settle_down_wx/pages/subPackages/surroundingReleases/editPage.vue

<template>
  <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>
</template>

<script>
import dayjs from "dayjs";
import { getByCodes,peripheryEdit,getUserLocalStorageInfo, peripheryGetById} from "@/js_sdk/http";
export default {
  name: "editPage",
  data(){
    return{
      dc_key: ['periphery_type'],
      fileList:[],
      checkList:[],
      postData:{
        createdBy:getUserLocalStorageInfo().userId,
        status:'',
        businessName:'',
        type:'',
        businessAddress:'',
        longitude:'',
        latitude:'',
        businessPhone:'',
        fileUrl:'',
        introduction:'',
        releaseType:'periphery'
      },
      checkedName:'干洗',
    }
  },
  onLoad(options){
    console.log(options.id)
    this.getByCodes()
    peripheryGetById({id:options.id}).then(res=>{
      if (res.code==200){
         this.postData = res.data
         const typeObj = this.checkList.find(e=>{
         return res.data.type === e.value
        })
        this.checkedName = typeObj.label
        this.fileList = [{
          imgUrl: "/FileController/download/" + res.data.fileUrl,
          id: res.data.fileUrl,
          url:
              this.$constant.BASE_URI +
              "/FileController/download/" +
              res.data.fileUrl,
          isImage: true,
        }]
        console.log(this.fileList)
      }

      console.log(res)
    })
  },
  created(){
  },
  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)
      peripheryEdit(this.postData).then(res=>{
        if (res.code=='200'){
          uni.showToast({
            title: toastMsg,
            duration: 500
          });
          uni.navigateBack()
        }else{
          uni.showToast({
            title: res.msg,
            duration: 500
          });
        }
      })
    },
    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">
.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>