counterEdit.vue

<template>
  <div class="container">
    <div class="flex-start top">
      <div class="flex-start">
        <van-cell-group class="gn">
          <van-cell title="专柜LOGO" class="logo" >
            <template slot="default">
              <van-uploader
                v-model="logoList"
                :max-count="1"
                class="input"
                :after-read="afterRead"
                :before-read="beforeRead"
                @delete="deleteLogo"
              >
                <div>
                  <van-icon name="photo" size="20" />
                </div>
              </van-uploader>
            </template>
          </van-cell>
          <van-cell title="专柜名称">
            <template slot="default">
              <van-field v-model="addForm.name" placeholder="输入名称" class="input" />
            </template>
          </van-cell>
          <van-cell title="专柜地址">
            <template slot="default">
              <van-field v-model="addForm.location" placeholder="输入地址"  class="input" />
            </template>
          </van-cell>
          <van-cell title="电话">
            <template slot="default">
              <van-field v-model="addForm.phone" placeholder="输入电话" class="input" />
            </template>
          </van-cell>
          <div class="border">
            <div class="des">摘要信息</div>
            <van-field
              v-model="addForm.summaryTitle"
              rows="4"
              autosize
              type="textarea"
              placeholder="请输入摘要信息"
              show-word-limit
              maxlength="30"
            />
          </div>
        </van-cell-group>
      </div>
      <div class="flex-start fwb">
        <div class="txt">轮播图</div>
        <van-uploader
          v-model="bannerList"
          :max-count="4"
          class="pic"
          :before-read="beforeRead"
          :after-read="afterAddBanner"
          @delete="deleteBanner"
          multiple="true"
        />
        <quill-editor
          v-model="addForm.summary"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange($event)"
        ></quill-editor>
      </div>
    </div>

    <div class="creat" @click="handleSave">保存信息</div>
  </div>
</template>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import { editStore, getStoreDetail } from "@/api/sidebar/voucher";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
Quill.register("modules/ImageExtend", ImageExtend);
import axios from "axios";
import { log } from "util";
const toolbarOptions = [
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  ["image"] // 图片
];

export default {
  components: {
    quillEditor
  },

  data() {
    return {
      addForm: {
        logo: '',
        summaryTitle: '',
        name: '',
        location: '',
        summary: '',
        phone: ''
      },
      oyStallCode: "",
      list: [],
      bannerList: [],
      title: "",
      logoList: [],
      // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
            name: "file", // 图片参数名
            // size: 3,
            action: "http://139.155.48.151:8084/admin/auth/util/saveImg",
            response: res => {
              console.log(res.data.imgPath,'富文本');
              
              return res.data.imgPath;
            },
            headers: xhr => {
              // xhr.setRequestHeader('Content-Type','multipart/form-data')
            } // 可选参数 设置请求头部
          },
          toolbar: {
            // 如果不上传图片到服务器，此处不必配置
            container: toolbarOptions, // container为工具栏，此次引入了全部工具栏，也可自行配置
            placeholder: "请输入正文",
            handlers: {
              image: function() {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      }
    };
  },
  mounted() {
    this.addForm.oyStallCode = sessionStorage.getItem("oyStallCode");
    console.log(this.addForm.oyStallCode, "编辑专柜信息oyStallCode");
    this.getDetail()
  },
  methods: {
    getDetail() {
      let params = {
        oyStallCode: this.addForm.oyStallCode     
      }
      getStoreDetail(params).then(res => {
        if (res.data.stallInfo != null) {
          console.log(res, "详情");
          this.list = res.data.carousel;
          let obj = {};
          obj.url = res.data.stallInfo.logo;
          this.logoList.push(obj);
          res.data.carousel.forEach(item => {
            let obj2 = {};
            obj2.url = item;
            this.bannerList.push(obj2);
          });
          this.addForm = res.data.stallInfo;
        }
      });
    },
    change(val) {
      console.log(val);
    },
    onEditorChange({ editor, html, text }) {
      this.$emit("input", this.addForm.summary);
    },
    beforeRead(file) {
      if(file.type) {
        if (file.type !== "image/jpeg" && file.type !== "image/png") {
          this.$toast("只允许上传jpg/png格式的图片！")
          return false;
        }
      }else {
        console.log(222);
        file.forEach( item => {
          if (item.type !== "image/jpeg" && item.type !== "image/png") {
           this.$toast("只允许上传jpg/png格式的图片！")
          }         
        })
        // console.log(file,'file');     
        // console.log(file.type,'file.type');
      }
     
      
      //上传之前校验
      
      return true;
    },
    async afterRead(file) {
      // this.addForm.logo = await this.getImgUrl(file.file)//使用上传的方法。file.file
      this.addForm.logo = await this.getImgUrl(file.file);
      console.log(this.addForm.logo, "this.addForm.logo");
    },
    async getImgUrl(file) {
      
      
      let params = new FormData()
      params.append("file", file)
      let url = "http://139.155.48.151:8084/admin/auth/util/saveImg"
      const img = await axios.post(url, params)
      let urls = img.data.data.imgPath;
      console.log(urls, "urls");
      return urls;
    },
    async afterAddBanner(file) {
      if(file.file) {
        let img = await this.getImgUrl(file.file);
        this.list.push(img);
      }else {
        file.forEach(async item => {
          let imgs = await this.getImgUrl(item.file)
          this.list.push(imgs);
          console.log(this.list,'list1')
        })      
      }
    },
    deleteBanner(file, index) {
      this.list.splice(index.index, 1);
    },
    deleteLogo(file) {
      this.addForm.logo = "";
    },
    handleSave() {
      const carousel = this.list.join(';')  
      // this.addForm.oyStallCode = 1
      delete this.addForm.id  
       if(!this.addForm.logo){
          this.$toast("请上传logo")
          return false
        }
        if(!this.addForm.name){
          this.$toast("请输入专柜名称")
          return false
        }   
        if(!this.addForm.location){
          this.$toast("请输入专柜地址")
          return false
        }    
        if(!this.addForm.phone){
          this.$toast("请输入电话号码")
          return false
        } 
        if(!this.addForm.summaryTitle){
          this.$toast("请输入摘要信息")
          return false
        } 
        if(!this.addForm.summary){
          this.$toast("请输入正文")
          return false
        } 
        console.log(Object.assign(this.addForm,{ carousel }),'11');
        
       editStore(Object.assign(this.addForm,{ carousel })).then( res => {
         if(res.result == 'success') {
           this.$router.go(-1)
         }    
       })     
    }
  }
};
</script>
<style >
</style>
<style scoped>
.logo >>> .van-cell__value {
  padding: 10px 0 0 0;
}
.pic {
  border-bottom: 2px solid #ebedf0;
}
.pic >>> .van-uploader__wrapper {
  justify-content: center;
}
.txt {
  font-size: 18px;
  color: rgba(45, 71, 106, 1);
  font-weight: bold;
  margin: 6px 16px 4px;
}
.top {
  background: #f8f8f8;
}
.fwb {
  margin-top: 10px;
}
.container {
  min-height: 100%;
  height: auto;
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
.content {
  background: #fff;
  height: auto;
}
.creat {
  margin: 20px 0;
  width: 343px;
  height: 40px;
  line-height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  bottom: 0;
}

.des {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  margin-bottom: 12px;
}
.detail {
  background-color: #fff;
  padding: 12px 16px 0 16px;
}
.border {
  padding: 15px;
}
.border >>> .van-field__control {
  text-align: left !important;
  background-color: #f8f8f8;
}
.border >>> .van-cell {
  padding: 0;
}
.van-cell__value,
.van-cell__value--alone {
  text-align: right;
}
.input {
  padding: 0;
}
.gn >>> .van-field__control {
  text-align: right;
}
.gn >>> .van-cell__title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
}
.gn {
  width: 100%;
  padding-bottom: 12px;
}
.input >>> .van-uploader__input-wrapper {
  width: 100%;
}
</style>