init 12.0

pages-purchaser/columnDetail/columnDetail.vue

@@ -0,0 +1,228 @@
+<template>
+  <view class="container column-detail">
+    <view :class="[scrollTopNumber == 0 ? 'top-content' : 'scroll-top-content']">
+      <view :class="['position-regular', scrollTopNumber != 0 && 'position-content-bg']">
+        <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+          <view class="content-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
+            <text v-if="scrollTopNumber != 0">专栏详情</text>
+            <view class="arrow-left-icon">
+              <van-icon name="arrow-left" size="20px" @click="goHandler" />
+            </view>
+          </view>
+        </view>
+        <view class="name-author">
+          <view class="author-img">
+            <view class="img-box">
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
+            </view>
+            <view class="set-btn"> + 关注</view>
+          </view>
+          <view class="name-box">
+            <text>专栏名称专栏名称专栏名称</text>
+            <text>作者昵称作者昵称</text>
+          </view>
+        </view>
+      </view>
+      <view class="info-lable-card">
+        <view class="info-card-lable">
+          <text>专栏名称专1</text>
+          <text>专栏名称专2</text>
+          <text>专栏名称专3</text>
+          <text>专栏名称专3</text>
+          <text>专栏名称专3</text>
+          <text>专栏名称专3</text>
+        </view>
+        <view class="info-card-fans">
+          <text>12</text>
+          <text>文章</text>
+          <text>24</text>
+          <text>被收藏</text>
+          <text>36</text>
+          <text>粉丝</text>
+        </view>
+      </view>
+    </view>
+    <view class="column-list-content">
+      <column-list-content />
+    </view>
+  </view>
+</template>
+
+<script>
+import ColumnListContent from "../components/columnListContent.vue";
+import infoCard from "../components/infoCard.vue";
+export default {
+  components: { infoCard, ColumnListContent },
+  data() {
+    return {
+      navBarStyle: {
+        height: 60 + "px",
+        paddingTop: 40 + "px",
+        paddingBottom: "4px",
+      },
+      scrollTopNumber: 0,
+    };
+  },
+  methods: {
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
+  },
+  onLoad() {
+    this.initNavBar();
+  },
+  onPageScroll(e) {
+    console.log(e);
+    this.scrollTopNumber = e.scrollTop;
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.column-detail {
+  position: relative;
+  background-color: #f3f5f9;
+  .scroll-top-content,
+  .position-content-bg {
+    background-color: #fff;
+  }
+  .top-content {
+    width: 100%;
+    height: 625rpx;
+    background-image: url(https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .position-regular {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 99;
+    .name-author {
+      z-index: 99;
+      display: flex;
+      height: 178rpx;
+      padding: 20rpx 40rpx;
+      .author-img {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        width: 126rpx;
+        height: 138rpx;
+        text-align: center;
+        .img-box {
+          width: 110rpx;
+          height: 110rpx;
+          border-radius: 50%;
+          overflow: hidden;
+          image {
+            width: 110rpx;
+            height: 110rpx;
+          }
+        }
+        .set-btn {
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          left: 0;
+          bottom: 0;
+          width: 126rpx;
+          height: 48rpx;
+          border-radius: 150rpx;
+          background-color: #376cbb;
+          color: #fff;
+        }
+      }
+      .name-box {
+        margin-left: 20rpx;
+        text:nth-child(1) {
+          font-size: 36rpx;
+          font-weight: 500;
+          line-height: 50rpx;
+          padding: 20rpx 0;
+        }
+        text:nth-child(2) {
+          font-size: 28rpx;
+          font-weight: 400;
+          line-height: 39rpx;
+        }
+      }
+    }
+  }
+  .nav-bar-wrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    z-index: 99;
+    .content-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: center;
+      color: #fff;
+      font-size: 34rpx;
+      .arrow-left-icon {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40rpx;
+        height: 40rpx;
+        left: 39rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 99;
+      }
+    }
+  }
+  .column-list-content {
+    position: absolute;
+    width: 682rpx;
+    border-radius: 12rpx 12rpx 0 0;
+    top: 580rpx;
+    right: 50%;
+    transform: translateX(50%);
+    z-index: 9;
+    overflow: hidden;
+  }
+  .info-lable-card {
+    position: absolute;
+    top: 165px;
+    left: 0;
+    padding: 30rpx 35rpx;
+    .info-card-lable {
+      display: flex;
+      flex-wrap: wrap;
+      text {
+        height: 45rpx;
+        padding: 6rpx 12rpx 6rpx 12rpx;
+        border-radius: 150rpx;
+        background-color: #8994a1;
+        margin: 20rpx 20rpx 0rpx 0;
+      }
+    }
+    .info-card-fans {
+      margin-top: 20rpx;
+      display: flex;
+      align-items: center;
+      text:nth-child(2n + 1) {
+        color: #ffe8a8;
+        font-size: 38rpx;
+        font-weight: 500;
+      }
+      text:nth-child(2n) {
+        margin: 0 40rpx 0 5rpx;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

pages-purchaser/components/columnListContent.vue

@@ -0,0 +1,239 @@
+<template>
+  <view class="column-list-content-detail">
+    <view class="introduce-content">
+      <view class="introduce"></view>
+      <view :class="['introduce-detail', item.isExpand && 'expand']" :style="{ height: isExpand ? 'auto' : richTextHeight + 'px' }">
+        {{ content }}
+        <view class="expan-btn-sl" v-if="isShowBtn && !isExpand">......</view>
+      </view>
+
+      <view class="expan-btn" @click.stop="handleExpand" v-if="isShowBtn">{{ isExpand ? "收起" : "展开" }}</view>
+    </view>
+    <view class="content-item">
+      <view class="type-time">
+        <view class="type"> 笔 记</view>
+        <view class="time"> 2023.08.24 13:13:13</view>
+      </view>
+      <view class="title-item"> 标题标题标题标题标题标题标题标题标题标题标题标题</view>
+      <view class="text-conten">
+        有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录
+        内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，
+      </view>
+      <view class="look-all"> 查看全文 </view>
+      <view class="file-item"> 文档名称.docx </view>
+      <view class="image-conten">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png" @click="previewImageMediahandler"></image>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"></image>
+      </view>
+      <view class="lable-conten">
+        <text>石头科技</text>
+        <text>公司调研电话会</text>
+      </view>
+      <view class="collect-conten">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_icon.png"></image>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image> 88
+      </view>
+      <view class="introduce-detail-one" v-show="showText">
+        有专栏详情页面，情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查容详情页面也需要登录后
+      </view>
+    </view>
+    <view v-show="loadTimeLine" class="loadTimeLine"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loadTimeLine: true, //时间线的遮罩
+      richTextHeight: 1000,
+      isExpand: true,
+      isShowBtn: true,
+      showText: true,
+      content:
+        "情页面，有专栏详情页面，内容详情页面，有专栏详情页面，内容详情页面，有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查容详情页面也需要登录后",
+    };
+  },
+  mounted() {
+    const queryOne = wx.createSelectorQuery().in(this).selectAll(".introduce-detail-one").boundingClientRect();
+    queryOne.exec((res) => {
+      this.richTextHeight = res[0][0].height;
+      this.showText = false;
+      this.getConentsHeight();
+    });
+  },
+  methods: {
+    previewImageMediahandler() {
+      uni.previewImage({
+        urls: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"], //查看图片的数组
+      });
+    },
+    // 去往文章详情的
+    async handleExpand() {
+      this.isExpand = !this.isExpand;
+    },
+    getConentsHeight() {
+      const query = wx.createSelectorQuery().in(this);
+      query.selectAll(".introduce-detail").boundingClientRect();
+      query.exec((res) => {
+        console.log(res[0][0].height);
+        if (res[0][0].height > this.richTextHeight) {
+          this.isExpand = false;
+          this.isShowBtn = true;
+        } else {
+          this.isExpand = true;
+          this.isShowBtn = false;
+        }
+        setTimeout(() => {
+          this.loadTimeLine = false;
+        }, 300);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.column-list-content-detail {
+  position: relative;
+  padding: 50rpx 40rpx;
+  background: #fff;
+  .loadTimeLine {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background-color: #fff;
+    z-index: 6;
+  }
+  .introduce-content {
+    padding-bottom: 50rpx;
+    border-bottom: 1px solid #f0f1f3;
+    .introduce {
+      width: 100%;
+      height: 53rpx;
+      text-align: center;
+      line-height: 53rpx;
+      background-color: #fff6de;
+      color: #928563;
+      font-weight: 500;
+      margin-bottom: 40rpx;
+    }
+  }
+  .introduce-detail {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: justify;
+    // display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    position: relative;
+    &.expand {
+      -webkit-line-clamp: 999;
+      height: auto;
+    }
+    .expan-btn-sl {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background-color: #fff;
+      padding: 2rpx 0 2rpx 8rpx;
+      z-index: 9;
+    }
+  }
+  .expan-btn {
+    margin-top: 15rpx;
+    color: #2c83ff;
+    text-align: right;
+    position: relative;
+    &.pos {
+      padding: 0 0 0 40rpx;
+      background-color: rgba(255, 255, 255, 0.882);
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  .content-item {
+    padding: 40rpx 0;
+    border-bottom: 1px solid #f0f1f3;
+    .type-time {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #666666;
+      .type {
+        width: 110rpx;
+        height: 42rpx;
+        line-height: 42rpx;
+        text-align: center;
+        border-radius: 38rpx;
+        color: #928563;
+        background-color: #fff6de;
+        font-weight: 500;
+      }
+    }
+    .title-item {
+      margin: 10rpx 0 20rpx;
+      color: #333;
+      font-size: 32rpx;
+      font-weight: 500;
+      line-height: 46rpx;
+    }
+    .file-item {
+      width: 100%;
+      height: 42rpx;
+      margin: 20rpx 0;
+      display: flex;
+      align-items: center;
+      background-color: #f8f8fa;
+      color: #376cbb;
+    }
+    .image-conten {
+      display: flex;
+      flex-wrap: wrap;
+      image {
+        width: 144rpx;
+        height: 144rpx;
+        margin-right: 20rpx;
+      }
+    }
+    .lable-conten {
+      display: flex;
+      margin: 20rpx 0;
+      font-size: 24rpx;
+      text {
+        height: 34rpx;
+        border-radius: 44rpx;
+        padding: 3rpx 35rpx 3rpx 35rpx;
+        background-color: #f0f1f3;
+        margin-right: 20rpx;
+      }
+    }
+    .collect-conten {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      color: #666666;
+      image {
+        width: 27rpx;
+        height: 26rpx;
+        margin-right: 8rpx;
+      }
+    }
+    .look-all {
+      float: right;
+      width: 108rpx;
+      height: 42rpx;
+      border-radius: 150rpx;
+      text-align: center;
+      line-height: 42rpx;
+      font-size: 21rpx;
+      color: #fff;
+      background-color: #376cbb;
+      margin: 20rpx 0;
+    }
+  }
+}
+</style>

pages-purchaser/components/imageUpload.vue

@@ -0,0 +1,393 @@
+<template>
+  <view class="imageUploadContainer">
+    <view class="imageUploadList">
+      <view class="imageItem" v-bind:key="index" v-for="(path, index) in imageListData">
+        <image
+          :src="path"
+          :class="{ dragging: isDragging(index) }"
+          draggable="true"
+          @tap="previewImage"
+          :data-index="index"
+          @touchstart="start"
+          @touchmove.stop.prevent="move"
+          @touchend="stop"
+        ></image>
+        <view v-if="isShowDel" class="imageDel" @tap="deleteImage" :data-index="index">x</view>
+      </view>
+      <view v-if="isShowAdd" class="imageUpload" @tap="selectImage">+</view>
+    </view>
+    <image v-if="showMoveImage" class="moveImage" :style="{ left: posMoveImageLeft, top: posMoveImageTop }" :src="moveImagePath"></image>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "robby-image-upload",
+  props: ["value", "enableDel", "enableAdd", "enableDrag", "serverUrl", "formData", "header", "limit", "fileKeyName", "showUploadProgress", "serverUrlDeleteImage"],
+  data() {
+    return {
+      imageBasePos: {
+        x0: -1,
+        y0: -1,
+        w: -1,
+        h: -1,
+      },
+      showMoveImage: false,
+      moveImagePath: "",
+      moveLeft: 0,
+      moveTop: 0,
+      deltaLeft: 0,
+      deltaTop: 0,
+      dragIndex: null,
+      targetImageIndex: null,
+      imageList: [],
+      isDestroyed: false,
+    };
+  },
+  mounted: function () {
+    this.imageList = this.value;
+
+    if (this.showUploadProgress === false) {
+      this.showUploadProgress = false;
+    } else {
+      this.showUploadProgress = true;
+    }
+  },
+  destroyed: function () {
+    this.isDestroyed = true;
+  },
+  computed: {
+    imageListData: function () {
+      if (this.value) {
+        return this.value;
+      }
+    },
+    posMoveImageLeft: function () {
+      return this.moveLeft + "px";
+    },
+    posMoveImageTop: function () {
+      return this.moveTop + "px";
+    },
+    isShowDel: function () {
+      if (this.enableDel === false) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    isShowAdd: function () {
+      if (this.enableAdd === false) {
+        return false;
+      }
+
+      if (this.limit && this.imageList.length >= this.limit) {
+        return false;
+      }
+
+      return true;
+    },
+    isDragable: function () {
+      if (this.enableDrag === false) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+  },
+  methods: {
+    selectImage: function () {
+      var _self = this;
+      if (!_self.imageList) {
+        _self.imageList = [];
+      }
+
+      uni.chooseImage({
+        count: _self.limit ? _self.limit - _self.imageList.length : 999,
+        success: function (e) {
+          var imagePathArr = e.tempFilePaths;
+
+          //如果设置了limit限制，在web上count参数无效，这里做判断控制选择的数量是否合要求
+          //在非微信小程序里，虽然可以选多张，但选择的结果会被截掉
+          //在app里，会自动做选择数量的限制
+          if (_self.limit) {
+            var availableImageNumber = _self.limit - _self.imageList.length;
+            if (availableImageNumber < imagePathArr.length) {
+              uni.showToast({
+                title: "图片总数限制为" + _self.limit + "张，当前还可以选" + availableImageNumber + "张",
+                icon: "none",
+                mask: false,
+                duration: 2000,
+              });
+              return;
+            }
+          }
+
+          //检查服务器地址是否设置，设置即表示图片要上传到服务器
+          if (_self.serverUrl) {
+            uni.showToast({
+              title: "上传进度：0/" + imagePathArr.length,
+              icon: "none",
+              mask: false,
+            });
+
+            var remoteIndexStart = _self.imageList.length - imagePathArr.length;
+            var promiseWorkList = [];
+            var keyname = _self.fileKeyName ? _self.fileKeyName : "upload-images";
+            var completeImages = 0;
+
+            for (let i = 0; i < imagePathArr.length; i++) {
+              promiseWorkList.push(
+                new Promise((resolve, reject) => {
+                  let remoteUrlIndex = remoteIndexStart + i;
+                  uni.uploadFile({
+                    url: _self.serverUrl,
+                    fileType: "image",
+                    header: _self.header,
+                    formData: _self.formData,
+                    filePath: imagePathArr[i],
+                    name: keyname,
+                    success: function (res) {
+                      if (res.statusCode === 200) {
+                        if (_self.isDestroyed) {
+                          return;
+                        }
+
+                        completeImages++;
+
+                        if (_self.showUploadProgress) {
+                          uni.showToast({
+                            title: "上传进度：" + completeImages + "/" + imagePathArr.length,
+                            icon: "none",
+                            mask: false,
+                            duration: 500,
+                          });
+                        }
+                        console.log("success to upload image: " + res.data);
+                        resolve(res.data);
+                      } else {
+                        console.log("fail to upload image:" + res.data);
+                        reject("fail to upload image:" + remoteUrlIndex);
+                      }
+                    },
+                    fail: function (res) {
+                      console.log("fail to upload image:" + res);
+                      reject("fail to upload image:" + remoteUrlIndex);
+                    },
+                  });
+                })
+              );
+            }
+            Promise.all(promiseWorkList).then((result) => {
+              if (_self.isDestroyed) {
+                return;
+              }
+
+              for (let i = 0; i < result.length; i++) {
+                _self.imageList.push(result[i]);
+              }
+
+              _self.$emit("add", {
+                currentImages: imagePathArr,
+                allImages: _self.imageList,
+              });
+              _self.$emit("input", _self.imageList);
+            });
+          } else {
+            for (let i = 0; i < imagePathArr.length; i++) {
+              _self.imageList.push(imagePathArr[i]);
+            }
+
+            _self.$emit("add", {
+              currentImages: imagePathArr,
+              allImages: _self.imageList,
+            });
+            _self.$emit("input", _self.imageList);
+          }
+        },
+      });
+    },
+    deleteImage: function (e) {
+      var imageIndex = e.currentTarget.dataset.index;
+      var deletedImagePath = this.imageList[imageIndex];
+      this.imageList.splice(imageIndex, 1);
+
+      //检查删除图片的服务器地址是否设置，如果设置则调用API，在服务器端删除该图片
+      if (this.serverUrlDeleteImage) {
+        uni.request({
+          url: this.serverUrlDeleteImage,
+          method: "GET",
+          data: {
+            imagePath: deletedImagePath,
+          },
+          success: (res) => {
+            console.log(res.data);
+          },
+        });
+      }
+
+      this.$emit("delete", {
+        currentImage: deletedImagePath,
+        allImages: this.imageList,
+      });
+      this.$emit("input", this.imageList);
+    },
+    previewImage: function (e) {
+      var imageIndex = e.currentTarget.dataset.index;
+      uni.previewImage({
+        current: this.imageList[imageIndex],
+        indicator: "number",
+        loop: "true",
+        urls: this.imageList,
+      });
+    },
+    initImageBasePos: function () {
+      let paddingRate = 0.024;
+      var _self = this;
+      //计算图片基准位置
+      uni.getSystemInfo({
+        success: function (obj) {
+          let screenWidth = obj.screenWidth;
+          let leftPadding = Math.ceil(paddingRate * screenWidth);
+          let imageWidth = Math.ceil((screenWidth - 2 * leftPadding) / 4);
+
+          _self.imageBasePos.x0 = leftPadding;
+          _self.imageBasePos.w = imageWidth;
+          _self.imageBasePos.h = imageWidth;
+        },
+      });
+    },
+    findOverlapImage: function (posX, posY) {
+      let rows = Math.floor((posX - this.imageBasePos.x0) / this.imageBasePos.w);
+      let cols = Math.floor((posY - this.imageBasePos.y0) / this.imageBasePos.h);
+      let indx = cols * 4 + rows;
+      return indx;
+    },
+    isDragging: function (indx) {
+      return this.dragIndex === indx;
+    },
+    start: function (e) {
+      console.log(this.isDragable);
+      if (!this.isDragable) {
+        return;
+      }
+      this.dragIndex = e.currentTarget.dataset.index;
+      this.moveImagePath = this.imageList[this.dragIndex];
+      this.showMoveImage = true;
+
+      //计算纵向图片基准位置
+      if (this.imageBasePos.y0 === -1) {
+        this.initImageBasePos();
+
+        let basePosY = Math.floor(this.dragIndex / 4) * this.imageBasePos.h;
+        let currentImageOffsetTop = e.currentTarget.offsetTop;
+        this.imageBasePos.y0 = currentImageOffsetTop - basePosY;
+      }
+
+      //设置选中图片当前左上角的坐标
+      this.moveLeft = e.target.offsetLeft;
+      this.moveTop = e.target.offsetTop;
+    },
+    move: function (e) {
+      if (!this.isDragable) {
+        return;
+      }
+      const touch = e.touches[0];
+      this.targetImageIndex = this.findOverlapImage(touch.clientX, touch.clientY);
+
+      //初始化deltaLeft/deltaTop
+      if (this.deltaLeft === 0) {
+        this.deltaLeft = touch.clientX - this.moveLeft;
+        this.deltaTop = touch.clientY - this.moveTop;
+      }
+
+      //设置移动图片位置
+      this.moveLeft = touch.clientX - this.deltaLeft;
+      this.moveTop = touch.clientY - this.deltaTop;
+    },
+    stop: function (e) {
+      if (!this.isDragable) {
+        return;
+      }
+      if (this.dragIndex !== null && this.targetImageIndex !== null) {
+        if (this.targetImageIndex < 0) {
+          this.targetImageIndex = 0;
+        }
+
+        if (this.targetImageIndex >= this.imageList.length) {
+          this.targetImageIndex = this.imageList.length - 1;
+        }
+        //交换图片
+        if (this.dragIndex !== this.targetImageIndex) {
+          this.imageList[this.dragIndex] = this.imageList[this.targetImageIndex];
+          this.imageList[this.targetImageIndex] = this.moveImagePath;
+        }
+      }
+
+      this.dragIndex = null;
+      this.targetImageIndex = null;
+      this.deltaLeft = 0;
+      this.deltaTop = 0;
+      this.showMoveImage = false;
+
+      this.$emit("input", this.imageList);
+    },
+  },
+};
+</script>
+
+<style>
+.imageUploadContainer {
+  /* padding: 10upx 5upx;
+		margin: 10upx 5upx; */
+}
+
+.dragging {
+  transform: scale(1.2);
+}
+
+.imageUploadList {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.imageItem,
+.imageUpload {
+  width: 160upx;
+  height: 160upx;
+  margin: 20upx 16upx 20upx 0;
+}
+
+.imageDel {
+  position: relative;
+  left: 120upx;
+  bottom: 165upx;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 36upx;
+  text-align: center;
+  line-height: 35upx;
+  border-radius: 17upx;
+  color: white;
+  font-size: 30upx;
+  padding-bottom: 2upx;
+}
+
+.imageItem image,
+.moveImage {
+  width: 160upx;
+  height: 160upx;
+  border-radius: 8upx;
+}
+
+.imageUpload {
+  line-height: 130upx;
+  text-align: center;
+  font-size: 150upx;
+  color: #d9d9d9;
+  border: 1px solid #d9d9d9;
+  border-radius: 8upx;
+}
+
+.moveImage {
+  position: absolute;
+}
+</style>

pages-purchaser/components/infoCard.vue

@@ -0,0 +1,127 @@
+<template>
+  <view class="info-card-detail">
+    <view class="name-author">
+      <view class="author-img">
+        <view class="img-box">
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
+        </view>
+        <view class="set-btn"> + 关注</view>
+      </view>
+      <view class="name-box">
+        <text>专栏名称专栏名称专栏名称</text>
+        <text>作者昵称作者昵称</text>
+      </view>
+    </view>
+    <view class="info-card-lable">
+      <text>专栏名称专1</text>
+      <text>专栏名称专2</text>
+      <text>专栏名称专3</text>
+      <text>专栏名称专3</text>
+      <text>专栏名称专3</text>
+      <text>专栏名称专3</text>
+    </view>
+    <view class="info-card-fans">
+      <text>12</text>
+      <text>文章</text>
+      <text>24</text>
+      <text>被收藏</text>
+      <text>36</text>
+      <text>粉丝</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.info-card-detail {
+  border-radius: 16rpx;
+  background-image: url(https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png);
+  background-size: 100% 100%;
+  // 上面的那个盒子用就把上面的样式去掉
+  width: 100%;
+  padding: 40rpx 35rpx;
+  background-repeat: no-repeat;
+  color: #fff;
+  .name-author {
+    display: flex;
+
+    .author-img {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      width: 126rpx;
+      height: 138rpx;
+      text-align: center;
+      .img-box {
+        width: 110rpx;
+        height: 110rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        image {
+          width: 160rpx;
+          height: 160rpx;
+        }
+      }
+      .set-btn {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        left: 0;
+        bottom: 0;
+        width: 126rpx;
+        height: 48rpx;
+        border-radius: 150rpx;
+        background-color: #376cbb;
+        color: #fff;
+      }
+    }
+    .name-box {
+      margin-left: 20rpx;
+      text:nth-child(1) {
+        font-size: 36rpx;
+        font-weight: 500;
+        line-height: 50rpx;
+        padding: 20rpx 0;
+      }
+      text:nth-child(2) {
+        font-size: 28rpx;
+        font-weight: 400;
+        line-height: 39rpx;
+      }
+    }
+  }
+  .info-card-lable {
+    display: flex;
+    flex-wrap: wrap;
+    text {
+      height: 45rpx;
+      padding: 6rpx 12rpx 6rpx 12rpx;
+      border-radius: 150rpx;
+      background-color: #8994a1;
+      margin: 20rpx 20rpx 0rpx 0;
+    }
+  }
+  .info-card-fans {
+    margin-top: 20rpx;
+    display: flex;
+    align-items: center;
+    text:nth-child(2n + 1) {
+      color: #ffe8a8;
+      font-size: 38rpx;
+      font-weight: 500;
+    }
+    text:nth-child(2n) {
+      margin: 0 40rpx 0 5rpx;
+    }
+  }
+}
+</style>

pages-purchaser/contentAllPage/contentAllPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="container content-all-page">
+    <view class="tab-content">
+      <view class="item" v-for="item in tabList" :key="item.value" @click="tabClickHandler(item)">
+        {{ item.name }}
+        <view class="line-active" v-if="tabActive == item.value"> </view>
+      </view>
+    </view>
+    <view class="content-ul">
+      <view class="content-li">
+        <view class="type-time">
+          <view class="type"> 笔 记</view>
+          <view class="time"> 2023.08.24 13:13:13</view>
+        </view>
+        <view class="title-item"> 标题标题标题标题标题标题标题标题标题标题标题标题</view>
+        <view class="btn-box">
+          <view class="cancell-box"> 取消发布</view>
+          <view class="reject-box"> 驳回理由</view>
+          <view class="edit-box"> 修改 </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tabList: [
+        { name: "草稿箱", value: "1" },
+        { name: "已发布", value: "2" },
+        { name: "审核中", value: "3" },
+        { name: "已驳回", value: "4" },
+      ],
+      tabActive: "1",
+    };
+  },
+  methods: {
+    // top标签点击事件
+    tabClickHandler(item) {
+      this.tabActive = item.value;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.content-all-page {
+  background-color: #f3f5f9;
+  .tab-content {
+    margin-top: 1rpx;
+    background-color: #fff;
+    height: 96rpx;
+    display: flex;
+    view {
+      flex: 1;
+      text-align: center;
+      line-height: 96rpx;
+      border-bottom: 2rpx solid #e7e7e7;
+    }
+    .item {
+      position: relative;
+      .line-active {
+        position: absolute;
+        left: 50%;
+        bottom: 0rpx;
+        width: 32rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        background-color: #376cbb;
+        transform: translateX(-50%);
+      }
+    }
+  }
+  .content-ul {
+    padding: 30rpx;
+    .content-li {
+      width: 100%;
+      height: 256rpx;
+      padding: 20rpx;
+      border-radius: 16rpx;
+      border-top: 10rpx solid #e7e0cd;
+      background-color: #fff;
+      .type-time {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #666666;
+        .type {
+          width: 110rpx;
+          height: 42rpx;
+          line-height: 42rpx;
+          text-align: center;
+          border-radius: 38rpx;
+          color: #928563;
+          background-color: #fff6de;
+          font-weight: 500;
+        }
+      }
+      .title-item {
+        margin: 10rpx 0 20rpx;
+        color: #333;
+        font-size: 32rpx;
+        font-weight: 500;
+        line-height: 46rpx;
+      }
+      .btn-box {
+        display: flex;
+        justify-content: flex-end;
+        view {
+          padding: 4rpx 24rpx 4rpx 24rpx;
+          border-radius: 150rpx;
+		  margin-left: 10rpx;
+        }
+        .cancell-box {
+          color: #376cbb;
+          border: 1rpx solid #376cbb;
+        }
+        .edit-box {
+          color: #fff;
+          background-color: #376cbb;
+        }
+        .reject-box {
+          color: #d54941;
+          border: 1rpx solid #d54941;
+        }
+      }
+    }
+  }
+}
+</style>

pages-purchaser/noteAndViewpoint/noteAndViewpoint.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="container note-and-viewpoint">
+    <view class="content-item">
+      <view class="author-name">
+        <view class="img-box">
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
+        </view>
+        <text style="margin-left: 10rpx">作者昵称作者昵称</text>
+      </view>
+      <view class="type-time">
+        <view class="type"> 笔 记</view>
+        <view class="time"> 2023.08.24 13:13:13</view>
+      </view>
+      <view class="title-item"> 标题标题标题标题标题标题标题标题标题标题标题标题</view>
+      <view class="text-conten">
+        有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录
+        内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，
+      </view>
+      <view class="file-item"> 文档名称.docx </view>
+      <view class="image-conten">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png" @click="previewImageMediahandler"></image>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"></image>
+      </view>
+      <view class="lable-conten">
+        <text>石头科技</text>
+        <text>公司调研电话会</text>
+      </view>
+      <view class="collect-conten">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_icon.png"></image>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image> 88
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    previewImageMediahandler() {
+      uni.previewImage({
+        urls: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"], //查看图片的数组
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.note-and-viewpoint {
+  padding: 30rpx;
+  background: #f3f5f9;
+  .content-item {
+    padding: 40rpx;
+    background-color: #fff;
+    .type-time {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #666666;
+      .type {
+        width: 110rpx;
+        height: 42rpx;
+        line-height: 42rpx;
+        text-align: center;
+        border-radius: 38rpx;
+        color: #928563;
+        background-color: #fff6de;
+        font-weight: 500;
+      }
+    }
+    .title-item {
+      margin: 10rpx 0 20rpx;
+      color: #333;
+      font-size: 32rpx;
+      font-weight: 500;
+      line-height: 46rpx;
+    }
+    .file-item {
+      width: 100%;
+      height: 42rpx;
+      margin: 20rpx 0;
+      display: flex;
+      align-items: center;
+      background-color: #f8f8fa;
+      color: #376cbb;
+    }
+    .image-conten {
+      display: flex;
+      flex-wrap: wrap;
+      image {
+        width: 144rpx;
+        height: 144rpx;
+        margin-right: 20rpx;
+      }
+    }
+    .lable-conten {
+      display: flex;
+      margin: 20rpx 0;
+      font-size: 24rpx;
+      text {
+        height: 34rpx;
+        border-radius: 44rpx;
+        padding: 3rpx 35rpx 3rpx 35rpx;
+        background-color: #f0f1f3;
+        margin-right: 20rpx;
+      }
+    }
+    .collect-conten {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      color: #666666;
+      image {
+        width: 27rpx;
+        height: 26rpx;
+        margin-right: 8rpx;
+      }
+    }
+    .author-name {
+      display: flex;
+      align-items: center;
+      margin-bottom: 50rpx;
+      .img-box {
+        width: 48rpx;
+        height: 48rpx;
+        overflow: hidden;
+        font-size: 28rpx;
+        color: #333;
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

pages-purchaser/specialColumn/specialColumn.vue

@@ -0,0 +1,291 @@
+<template>
+  <view class="container special-column">
+    <view class="tab-content">
+      <view class="item" v-for="item in tabList" :key="item.value" @click="tabClickHandler(item)">
+        {{ item.name }}
+        <view class="line-active" v-if="tabActive == item.value"> </view>
+      </view>
+    </view>
+    <view class="item-ul" v-if="tabActive == 1">
+      <view class="item-li">
+        <view class="item-title"> 专栏名称</view>
+        <view class="item-name-time">
+          <view class="name"> 作者昵称作者昵称</view>
+          <view class="time"> 2023.08.24更新</view>
+        </view>
+        <view class="item-content">
+          专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查专栏介绍：有专栏详情页面，内容详情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查看，登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才
+        </view>
+      </view>
+    </view>
+    <view class="set-up-info" v-if="tabActive == 2">
+      <view class="info-name info-box">
+        <text class="seting-txt">首次进入我的专栏</text>
+        <text class="seting-txt">请设置您的专栏信息</text>
+        <input v-model="columnName" placeholder="请输入专栏名称" />
+        <input v-model="columnNickname" placeholder="请输入昵称" />
+      </view>
+      <view class="set-up-lable info-box">
+        <view class="top-box">
+          <view class="lable-txt">
+            专栏标签
+            <text>（选填）</text>
+          </view>
+          <view v-if="columnLableList.length < 6" class="new-lable" @click="addlableShow = true">+ 新建标签</view>
+        </view>
+        <view class="column-lable">
+          <view class="lable-item" v-for="(item, index) in columnLableList" :key="index">
+            <text>{{ item }}</text>
+            <van-icon name="cross" @click="deleteLablehandle(index)" />
+          </view>
+        </view>
+      </view>
+      <view class="set-up-info info-box">
+        <view class="lable-txt"> 专栏介绍 </view>
+        <u-input v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
+      </view>
+      <view class="my-btn" @click="infoDetermineHandler"> 进入我的专栏 </view>
+    </view>
+    <u-modal
+      v-model="addlableShow"
+      :show-title="false"
+      show-cancel-button
+      confirm-text="确定"
+      cancel-text="取消"
+      :content-style="{ fontSize: '32rpx' }"
+      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
+      :confirm-style="{ fontWeight: '700' }"
+      @confirm="confirmModal"
+      @cancel="cancelModal"
+    >
+      <view class="slot-content slot-content-text">
+        <text class="add-lable-txt">新建标签</text>
+        <input v-model="addLableName" placeholder="请输入标签名称（最多8个字）" :maxlength="8" />
+      </view>
+    </u-modal>
+    <!-- <info-card /> -->
+    <!-- <column-list-content /> -->
+  </view>
+</template>
+
+<script>
+import ColumnListContent from "../components/columnListContent.vue";
+import infoCard from "../components/infoCard.vue";
+export default {
+  components: { infoCard, ColumnListContent },
+  data() {
+    return {
+      tabList: [
+        { name: "专栏列表", value: "1" },
+        { name: "我的专栏", value: "2" },
+      ],
+      tabActive: "2",
+      addlableShow: false,
+      columnName: "",
+      columnNickname: "",
+      columnIntroduce: "",
+      columnLableList: [],
+      addLableName: "",
+    };
+  },
+  methods: {
+    // top标签点击事件
+    tabClickHandler(item) {
+      this.tabActive = item.value;
+    },
+    // 添加标签的确认事件
+    confirmModal() {
+      if (!this.addLableName) return this.$util.toast("未添加标签");
+      this.columnLableList.push(this.addLableName);
+      this.addLableName = "";
+      console.log("confirm");
+    },
+    // 添加标签的取消事件
+    cancelModal() {
+      this.addLableName = "";
+      console.log("cancel");
+    },
+    // 信息填写完成 进入我的专栏
+    infoDetermineHandler() {
+      if (this.columnName && this.columnNickname && this.columnIntroduce) {
+      } else {
+        let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
+        this.$util.toast("请输入" + str);
+      }
+    },
+    // 删除新建标签
+    deleteLablehandle(index) {
+      this.columnLableList.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.special-column {
+  background-color: #f3f5f9;
+  input {
+    height: 72rpx;
+    background-color: #f0f1f3;
+    padding-left: 24rpx;
+    border-radius: 12rpx;
+  }
+  .tab-content {
+    margin-top: 1rpx;
+    background-color: #fff;
+    height: 96rpx;
+    display: flex;
+    view {
+      flex: 1;
+      text-align: center;
+      line-height: 96rpx;
+      border-bottom: 2rpx solid #e7e7e7;
+    }
+    .item {
+      position: relative;
+      .line-active {
+        position: absolute;
+        left: 50%;
+        bottom: 0rpx;
+        width: 32rpx;
+        height: 6rpx;
+        border-radius: 6rpx;
+        background-color: #376cbb;
+        transform: translateX(-50%);
+      }
+    }
+  }
+  .item-ul {
+    padding: 30rpx;
+    .item-li {
+      padding: 0 30rpx 30rpx;
+      background-color: white;
+      border-radius: 16rpx;
+      border-top: 10rpx solid #8fa4c4;
+      margin-bottom: 20rpx;
+      .item-title {
+        font-size: 34rpx;
+        font-weight: 500;
+      }
+      .item-name-time {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 80rpx;
+        font-size: 28rpx;
+        color: #999;
+      }
+      .item-content {
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .set-up-info {
+    padding: 30rpx;
+    .info-name {
+      width: 100%;
+      padding: 40rpx;
+      border-radius: 16rpx;
+      color: #333;
+      background-color: #fff;
+      .seting-txt {
+        text-align: center;
+        font-size: 36rpx;
+        font-weight: 500;
+        line-height: 50rpx;
+      }
+      .item-txt {
+        margin-top: 40rpx;
+        margin-bottom: 5rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 40rpx;
+      }
+      input {
+        margin-top: 40rpx;
+      }
+    }
+    .set-up-lable {
+      .top-box {
+        display: flex;
+        background-color: #fff;
+        justify-content: space-between;
+
+        .new-lable {
+          color: #376cbb;
+        }
+      }
+    }
+    .lable-txt {
+      font-size: 28rpx;
+      font-weight: 500;
+      line-height: 40rpx;
+      display: flex;
+      text {
+        color: #999;
+        flex-wrap: 400;
+      }
+    }
+    .info-box {
+      padding: 40rpx;
+      border-radius: 16rpx;
+      color: #333;
+      background-color: #fff;
+      margin-bottom: 30rpx;
+    }
+  }
+  .u-input {
+    margin-top: 10rpx;
+    background-color: #f0f1f3;
+  }
+  .u-input__textarea {
+    padding: 20rpx !important;
+  }
+  .my-btn {
+    margin: 50rpx 0;
+    width: 100%;
+    height: 72rpx;
+    padding: 18rpx 30rpx 18rpx 30rpx;
+    border-radius: 9rpx;
+    background: #376cbb;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .add-lable-txt {
+    color: #000;
+    font-size: 36rpx;
+    flex-wrap: 600;
+    margin-bottom: 20rpx;
+
+    width: 100%;
+    text-align: center;
+  }
+  .column-lable {
+    display: flex;
+    flex-wrap: wrap;
+    .lable-item {
+      display: flex;
+      color: #fff;
+      font-size: 28rpx;
+      padding: 10rpx 24rpx;
+      background-color: #376cbb;
+      border-radius: 153px;
+      margin: 20rpx 20rpx 0 0;
+      text {
+        margin-right: 12rpx;
+      }
+    }
+  }
+  .slot-content-text {
+    text-align: left;
+  }
+}
+</style>

pages-purchaser/writeNote/writeNote.vue

@@ -0,0 +1,314 @@
+<template>
+  <view class="container write-note">
+    <view class="write-note-top">
+      <view @click="topLableHandler(item)" :class="['write-text', topLableActive == item.value && 'act-top-lable']" v-for="item in topLableList" :key="item.value"> {{ item.name }}</view>
+    </view>
+    <view class="write-note-content">
+      <view class="title-note"> <input placeholder="请输入标题" /></view>
+      <view class="content-note">
+        <editor v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
+        <view class="new-lable" @click="showPopup = true">+ 标签（至少添加一个）</view>
+      </view>
+    </view>
+    <view class="write-note-img">
+      <robbyImageUpload class="image-add-upload" :value="fileList" :limit="6" />
+    </view>
+    <view class="write-note-button">
+      <view class="write-note"> 草稿箱</view>
+      <view class="write-note"> 发布</view>
+    </view>
+    <van-popup :show="showPopup" position="bottom" custom-style="height: 85%;" round custom-class="lable-class-popup">
+      <viwe class="add-lable-box">
+        <view class="add-txt"> 添加标签 <view> 完成 </view></view>
+        <view class="select-item">
+          <view @click="industryOfCompanyHanler(item)" v-for="item in lableList" :key="item.value" :class="['item', lableActive == item.value && 'act-item']"> {{ item.name }}</view>
+        </view>
+        <view class="input-box">
+          <icon type="search" size="15" class="sea_ico" />
+          <input v-model="columnName" placeholder="专栏名称" />
+          <view v-if="lableActive == 2" style="color: #376cbb" @click="addCompanyLableHandler">+ &nbsp;创建</view>
+        </view>
+        <view class="text-box"> 已选标签 <view class="one-lable-text"> 至少添加一个标签 </view></view>
+        <view class="lable-ul">
+          <block v-if="lableActive == 1">
+            <view :class="['lable-li', item.isActive && 'active']" v-for="item in selectedLableList" :key="item.name">
+              {{ item.name }}
+              <van-icon name="cross" style="margin-left: 8rpx" @click="selectedLableHandle(item)" />
+            </view>
+          </block>
+          <block v-else>
+            <view :class="['lable-li', item.isActive && 'active']" v-for="item in companySelectedLable" :key="item.name">
+              {{ item.name }}
+              <van-icon name="cross" style="margin-left: 8rpx" @click="selectedLableHandle(item)" />
+            </view>
+          </block>
+        </view>
+        <view class="text-box"> 标签</view>
+        <view class="lable-ul">
+          <!-- 这里就不用计算属性了 不知道会不会有隐藏的问题 -->
+          <block v-if="lableActive == 1">
+            <view :class="['lable-li', item.isActive && 'active']" @click="industryLabelHandler(item)" v-for="item in industryLabel" :key="item.name">{{ item.name }}</view>
+          </block>
+          <block v-else>
+            <block v-for="item in companyLable" :key="item.name">
+              <view :class="['lable-li', item.isActive && 'active']" @click="industryLabelHandler(item)" v-if="!item.search">
+                {{ item.name }}
+              </view>
+            </block>
+          </block>
+        </view>
+      </viwe>
+    </van-popup>
+  </view>
+</template>
+
+<script>
+import robbyImageUpload from "../components/imageUpload.vue";
+export default {
+  components: { robbyImageUpload },
+  data() {
+    return {
+      showPopup: true,
+      fileList: [],
+      advice_content: "",
+      columnName: "",
+      lableList: [
+        { name: "行业标签", value: 1 },
+        { name: "公司标签", value: 2 },
+      ], // 公司或者行业标签
+      lableActive: 1,
+      topLableList: [
+        { name: "笔记", value: 1 },
+        { name: "观点", value: 2 },
+      ], // 笔记或者观点的标签
+      topLableActive: 1, // 笔记或者观点的选中
+      industryLabel: [
+        { name: "笔记1", value: 1 },
+        { name: "笔记2", value: 2 },
+        { name: "笔记3", value: 3 },
+        { name: "笔记4", value: 4 },
+        { name: "笔记5", value: 5 },
+      ], // 行业标签
+      selectedLableList: [], // 行业标签已选项
+      companyLable: [
+        { name: "笔记11", value: 1 },
+        { name: "笔记22", value: 2 },
+        { name: "笔记33", value: 3 },
+        { name: "笔记44", value: 4 },
+        { name: "笔记55", value: 5 },
+      ], // 公司标签
+      companySelectedLable: [], // 公司标签已选项
+    };
+  },
+  methods: {
+    // 创建标签公司Lable
+    addCompanyLableHandler() {
+      if (!this.columnName) return;
+      this.companyLable.push({ name: this.columnName, value: this.companyLable.length + 1, search: true, isActive: true });
+      this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
+    },
+    // 行业公司标签的点击事件
+    industryOfCompanyHanler(item) {
+      this.lableActive = item.value;
+    },
+    // 内容输入框
+    contentChange(e) {
+      this.advice_content = e.detail.html;
+    },
+    // 头部 table 的点击事件
+    topLableHandler(item) {
+      this.topLableActive = item.value;
+    },
+    // 行业的标签点击事件
+    industryLabelHandler(item) {
+      this.$set(item, "isActive", !item.isActive);
+      if (this.lableActive == 1) {
+        this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
+      } else {
+        this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
+      }
+    },
+    // 点击取消标签的事件
+    selectedLableHandle(item) {
+      if (this.lableActive == 1) {
+        this.industryLabel.forEach((key) => {
+          if (key.value === item.value) {
+            item.isActive = !item.isActive;
+          }
+        });
+        this.selectedLableList = this.industryLabel.filter((key) => key.isActive);
+      } else {
+        if (item.search) {
+          let index = this.companyLable.findIndex((key) => key.value === item.value);
+          this.companyLable.splice(index, 1);
+        } else {
+          this.companyLable.forEach((key) => {
+            if (key.value === item.value) {
+              item.isActive = !item.isActive;
+            }
+          });
+        }
+        this.companySelectedLable = this.companyLable.filter((key) => key.isActive);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.write-note {
+  background-color: #f3f5f9;
+  .write-note-content {
+    background-color: #fff;
+    margin-top: 1rpx;
+    padding: 30rpx;
+    .title-note {
+      width: 100%;
+      height: 112rpx;
+      display: flex;
+      align-items: center;
+      border-bottom: 2rpx solid #f3f5f9;
+    }
+    .content-note {
+      width: 100%;
+      height: 880rpx;
+      padding-top: 20rpx;
+      .ql-container {
+        height: calc(100% - 80rpx);
+      }
+      .new-lable {
+        margin-top: 20px;
+        color: #376cbb;
+      }
+    }
+  }
+  .write-note-img {
+    margin-top: 20rpx;
+    background-color: #fff;
+    width: 100%;
+    padding: 20rpx;
+    .image-add-upload {
+      width: 100%;
+    }
+  }
+  .write-note-button {
+    display: flex;
+  }
+  .lable-class-popup {
+    padding: 30rpx;
+  }
+  .add-lable-box {
+    font-size: 28rpx;
+    width: 100%;
+    .add-txt {
+      position: relative;
+      height: 60rpx;
+      line-height: 60rpx;
+      font-weight: 600;
+      font-size: 36rpx;
+      color: #000;
+      text-align: center;
+      view {
+        position: absolute;
+        top: 0;
+        right: 20rpx;
+        color: #376cbb;
+        font-size: 28rpx;
+      }
+    }
+    .select-item {
+      display: flex;
+      margin: 20rpx 0;
+      .item {
+        width: 176rpx;
+        height: 64rpx;
+        border-radius: 100rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f3f3f3;
+        margin-right: 30rpx;
+      }
+      .act-item {
+        color: #376cbb;
+        background-color: #e5efff;
+      }
+    }
+    .input-box {
+      background-color: #f3f3f3;
+      display: flex;
+      align-items: center;
+      height: 80rpx;
+      width: 100%;
+      position: relative;
+      padding-left: 50rpx;
+      padding-right: 20rpx;
+      input {
+        background-color: #f3f3f3;
+        flex: 1;
+        height: 80rpx;
+      }
+      .sea_ico {
+        position: absolute;
+        width: 31rpx;
+        height: 31rpx;
+        left: 10rpx;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+    .text-box {
+      color: #333;
+      font-size: 28rpx;
+      font-weight: 600;
+      display: flex;
+      justify-content: space-between;
+      margin: 30rpx 0;
+      .one-lable-text {
+        color: #999;
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+    }
+    .lable-ul {
+      display: flex;
+      flex-wrap: wrap;
+      .lable-li {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        margin: 0 20rpx 30rpx 0;
+        height: 56rpx;
+        padding: 0 24rpx;
+        border-radius: 153rpx;
+        background-color: #f8f8fa;
+      }
+      .active {
+        background-color: #376cbb;
+        color: #fff;
+      }
+    }
+  }
+  .write-note-top {
+    display: flex;
+    background-color: #fff;
+    padding: 15rpx 35rpx;
+    .write-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28rpx;
+      width: 148rpx;
+      height: 64rpx;
+      padding: 10rpx 32rpx 10rpx 32rpx;
+      border-radius: 0rpx 6rpx 6rpx 0rpx;
+      border: 1rpx solid #e7e7e7;
+    }
+    .act-top-lable {
+      background-color: #376cbb;
+      color: #fff;
+      border: none;
+    }
+  }
+}
+</style>

pages.json

@@ -448,64 +448,95 @@
           "path": "newResources/newResources",
           "style": {
             "enablePullDownRefresh": false,
-            "navigationStyle":"custom"
-          }
-        },
-				{
-					"path" : "leaflet/leaflet",
-					"style" : {
-						"navigationBarTitleText": "宣传单",
-						"enablePullDownRefresh": false
-					}
-				},
-				{
-					"path" : "survey/surveySubmit",
-					"style" : {
-						"navigationBarTitleText": "我要调研",
-						"enablePullDownRefresh": false
-					}
-				},
-				{
-					"path" : "survey/surveyDetail",
-					"style" : {
-						"navigationBarTitleText": "调研需求",
-						"enablePullDownRefresh": false
-					}
-				},
-				{
-					"path" : "researchList/researchList",
-					"style" :{
-						"navigationBarTitleText": "研选榜单",
-						"enablePullDownRefresh": false
-					}
-				}
-			  ,
-				{
-					"path" : "lastestReport/lastestReport",
-					"style" : {
-							"navigationBarTitleText": "最新报告",
-							"enablePullDownRefresh": false
-						}
-					}
-			    ,
-					{
-						"path" : "finishedActivity/finishedActivity",
-						"style" :                                                                                    
-						{
-								"navigationBarTitleText": "已结束活动",
-								"enablePullDownRefresh": false
-						}
-					}
-					,
-					{
-						"path" : "purchaserActivity/purchaserActivity",
-						"style" :                                                                                    
-						{
-								"navigationBarTitleText": "研选活动",
-								"enablePullDownRefresh": false
-						}
-					}
-				]
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "leaflet/leaflet",
+          "style": {
+            "navigationBarTitleText": "宣传单",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "survey/surveySubmit",
+          "style": {
+            "navigationBarTitleText": "我要调研",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "survey/surveyDetail",
+          "style": {
+            "navigationBarTitleText": "调研需求",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "researchList/researchList",
+          "style": {
+            "navigationBarTitleText": "研选榜单",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "lastestReport/lastestReport",
+          "style": {
+            "navigationBarTitleText": "最新报告",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "finishedActivity/finishedActivity",
+          "style": {
+            "navigationBarTitleText": "已结束活动",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "purchaserActivity/purchaserActivity",
+          "style": {
+            "navigationBarTitleText": "研选活动",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "specialColumn/specialColumn",
+          "style": {
+            "navigationBarTitleText": "研选专栏",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "writeNote/writeNote",
+          "style": {
+            "navigationBarTitleText": "发布新内容",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "contentAllPage/contentAllPage",
+          "style": {
+            "navigationBarTitleText": "内容中心",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "noteAndViewpoint/noteAndViewpoint",
+          "style": {
+            "navigationBarTitleText": "笔记详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "columnDetail/columnDetail",
+          "style": {
+            "navigationBarTitleText": "",
+            "enablePullDownRefresh": false,
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     },
     {
       "root": "pages-message",
@@ -556,7 +587,7 @@
       "van-checkbox-group": "/wxcomponents/vant/dist/checkbox-group/index",
       "van-dialog": "/wxcomponents/vant/dist/dialog/index",
       "van-popup": "/wxcomponents/vant/dist/popup/index",
-			"van-field": "/wxcomponents/vant/dist/field/index"
+      "van-field": "/wxcomponents/vant/dist/field/index"
     }
   },
   "tabBar": {