uni-xiudoyou/src/pages/index/setting/editnotice.vue

<!-- editniotice -->
<template>
  <view class="editniotice">
    <!-- <Header :title="title" /> -->
    <!-- <view style="height: 94upx;"></view> -->
    <view class="content">
      <view class="content-warp">
        <view class="uni-list-cell">
          <view class="name">选择店铺：</view>
          <view class="uni-list-cell-db">
            <picker
              @change="bindPickerChange"
              :value="storeIndex"
              :range="storeList"
              :disabled="storeDisabled"
              range-key="name"
              class="uni-upd"
            >
              <view class="uni-input">{{ storeList[storeIndex].name }}</view>
            </picker>
            <view class="icon-warp">
              <image
                src="../../../static/images/moreicon.png"
                class="iconRight"
              ></image>
            </view>
          </view>
        </view>
        <view class="inputnamt">
          <view class="title">新闻标题：</view>
          <input
            class="txt"
            v-model="noticeMessage.title"
            type="text"
            placeholder="请输入新闻标题"
            placeholder-style="color:#8f8f8f;"
          />
        </view>
        <view class="icon-warp">
          <view class="title">上传图标：</view>
          <image
            class="icon"
            :src="noticeMessage.icon"
            v-if="noticeMessage.icon"
          ></image>
          <view class="upload" @tap="upload">
						<text class="load">点击上传</text>
						<text class="per">{{progress}}%</text>
					</view>
        </view>
        <view class="noticeContent">
          <view class="container">
            <editor
              id="editor"
              class="ql-container"
              :placeholder="placeholder"
              @input="saveTxt"
              @ready="onEditorReady"
            ></editor>
          </view>
        </view>
        <view class="btn-warp">
          <view class="btn" @tap="saveNotice">提交发布</view>
        </view>
      </view>
    </view>
    <rf-loading v-if="loading"></rf-loading>
  </view>
</template>

<script>
let myCloud;

import Header from '../../components/header';
import moment from '@/common/moment';
import indexConfig from '@/config/index.config';

export default {
  name: 'editniotice',
  components: {
    Header,
  },
  data() {
    //这里存放数据
    return {
      loading: true,
      scenicId: '',
      title: '公告编辑',
      storeList: [{ name: '请选择公告所属店铺', id: '' }],
      storeIndex: 0,
      storeId: '',
      storeDisabled: true,
      newid: '',

      placeholder: '请输入公告内容',
      mastknow: '',

			iconUrl: '',
			progress: 0,
      noticeMessage: {
        content: '',
        icon: '',
        title: '',
        sid: '',
				id: '',
				type: '2'
      },
    };
  },
  onReady () {
    myCloud = uniCloud.init({
      provider: 'aliyun',
      spaceId: 'db8671a1-69bd-470d-ad59-ba927c88f4a4',
      clientSecret: '8nOzV70edtpCd0El6qce3g==',
    });
  },
  onLoad(option) {
    this.newid = option.id;
    this.getShopMessage();
    if (this.newid === 'add') {
      this.title = '添加公告';
      this.loading = false;
    } else {
      this.getNoticeBuyId();
    }
  },

  //方法集合
  methods: {
    // 选择店铺
    bindPickerChange(e) {
      this.storeIndex = e.detail.value;
			this.storeId = this.storeList[this.storeIndex].id;
			this.noticeMessage.sid = this.storeId
    },
    // 商家信息
    async getShopMessage() {
      await this.$http.get('/getUserInfo').then(async (res) => {
        if (res.data) {
          this.scenicId = res.data.id;
          this.getShopList();
        }
      });
    },
    async getShopList() {
      this.storeList = [{ name: '请选择公告所属店铺', id: '' }];
      await this.$http
        .get('/shop/getList', {
          mid: this.scenicId,
        })
        .then(async (res) => {
          if (res.data) {
            let arr = [];
            res.data.forEach((element) => {
              arr.push({ name: element.name, id: element.id });
            });
            this.storeList = this.storeList.concat(arr);
            this.storeDisabled = false;

            if (this.noticeMessage) {
              // 店铺回显
              this.storeId = this.noticeMessage.sid;
              this.storeList.forEach((item, index) => {
                if (this.storeId === item.id) {
                  this.storeIndex = index;
                }
              });
            }
          }
        });
    },
    // 获取单个公告的信息
    async getNoticeBuyId() {
      this.loading = true;
      await this.$http.get('/news/getById/' + this.newid).then(async (res) => {
        if (res.code === 200) {
          this.noticeMessage = res.data;
          this.loading = false;
        }
      });
    },
    // 富文本
    onEditorReady() {
      uni
        .createSelectorQuery()
        .select('#editor')
        .context((res) => {
          console.log(this.noticeMessage.content);
          this.editorCtx = res.context;
          this.editorCtx.setContents({ html: this.noticeMessage.content});
        })
        .exec()
    },
    saveTxt(e) {
      this.noticeMessage.content = e.detail.html;
    },
    // 保存编辑
    saveNotice() {
      console.log(this.noticeMessage);
      this.$http.post('/news/add', this.noticeMessage).then((res) => {
        if (res.code === 200 && res.msg === 'OK') {
          this.$mHelper.toast('提交成功！');
          setTimeout(() => {
            this.$mRouter.back();
          }, 800);
        }
      });
    },

    // --------------------------

    // 图标上传
    upload() {
      this.noticeMessage.icon = ''
      let _self = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // camera 使用相机   album 从相册中选
        success: function (res) {
          // 成功则返回图片的本地文件路径列表 tempFilePaths
          _self.iconUrl = res.tempFilePaths[0];
          myCloud.uploadFile({
						url: indexConfig.uploadUrl,
            filePath: _self.iconUrl,
            cloudPath: _self.iconUrl,
						name: 'file',
						success:(res)=>{
              if (res.fileID) {
                _self.noticeMessage.icon = res.fileID
              }
            },
            onUploadProgress: function (progressEvent){
              _self.progress = 1
              _self.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            }
          });
				
        },
        fail: function (error) {
          console.log(error);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.editniotice {
  .content {
    padding: 25upx 0;
    height: 100vh;
  }
  .content-warp {
    padding: 0 33upx 100upx;
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
  }
  .uni-list-cell {
    border-bottom: 2px solid #f4f4f4;
    .name {
      color: #2f2f2f;
      font-size: 28upx;
    }
    .uni-list-cell-db {
      height: 80upx;
      font-size: 28upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      color: #8f8f8f;
      font-size: 30upx;
      .uni-upd {
        width: 100%;
      }
    }
    .uni-input {
      height: 100%;
      line-height: 80upx;
    }
    .icon-warp {
      width: 19upx;
      .iconRight {
        width: 19upx;
        height: 27upx;
      }
    }
  }
  .inputnamt {
    height: 80upx;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f4f4f4;
    .title {
      color: #2f2f2f;
    }
    .txt {
      flex: 1;
    }
  }
  .icon-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20upx 0;
    border-bottom: 2px solid #f4f4f4;
    .title {
      color: #2f2f2f;
    }
    .icon {
      width: 185upx;
      height: 185upx;
      border-radius: 20upx;
    }
    .upload {
      width: 185upx;
      height: 185upx;
      border: 2px dashed #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.load {
				margin-top: 25upx;
			}
			.per {
				margin-top: 10upx;
			}
    }
  }
  .noticeContent {
    padding: 40upx;
    border: 2px solid #f4f4f4;
    margin-top: 20upx;
  }
  .btn-warp {
    margin-top: 80upx;
    display: flex;
    justify-content: center;
    .btn {
      width: 600upx;
      height: 90upx;
      border-radius: 20upx;
      text-align: center;
      line-height: 90upx;
      color: #fff;
      font-size: 30upx;
      font-weight: 700;
      letter-spacing: 2upx;
      background-color: #9e5dfc;
    }
  }
}
</style>