12.0

components/loadingAll/loadingAll.vue

@@ -1,20 +1,24 @@
 <template>
   <view v-show="loadingShow">
     <view class="request-loading-view">
-      <!-- <view class="loading-view"><view class="loading"></view></view> -->
-	  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/loading_all.gif"></image>
+      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/loading_all.gif"></image>
     </view>
   </view>
 </template>
 <script>
 export default {
   data() {
-    return {};
+    return {
+      loadingShow: false,
+    };
   },
-  computed: {
-    //计算属性判断vuex中的显示状态
-    loadingShow() {
-      return this.$store.state.requestLoading;
+  watch: {
+    "$store.state.requestLoading": {
+      handler(newValue) {
+        this.loadingShow = newValue;
+      },
+      deep: true,
+      immediate: true,
     },
   },
 };
@@ -34,8 +38,8 @@ export default {
   align-items: center;
   // padding-top: 430rpx;
   image {
-	width: 110rpx;
-	height: 110rpx;
+    width: 110rpx;
+    height: 110rpx;
   }
 }
 </style>

config/modules/purchaser.js

@@ -80,4 +80,9 @@ export const purchaserApi = {
   yanxuanSpecialFollow: (params) => {
     return postHttp("/yanxuan_special/follow", params, 1);
   },
+  // 专栏文章敏感词检测
+  yanxuanSpecialCheck: (params) => {
+    return postHttp("/yanxuan_special/check", params);
+  },
+  
 };

pageMy/myCollection/myCollection.vue

@@ -22,7 +22,7 @@
       <block v-else>
         <view class="content-item" v-for="item in collectList" :key="item.ArticleId">
           <blok v-if="item.NickName">
-            <view class="item-user" v-if="item.Source == 2">
+            <view class="item-user" v-if="item.Source == 2 || item.IsSpecial == 1">
               <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
               <text> {{ item.NickName }}</text>
             </view>
@@ -30,7 +30,7 @@
           <view class="item-title" :class="item.CategoryId == 0 ? 'yan-xuan-tag' : ''" @click="goDetailReport(item)">
             {{ item.Title }}
             <block v-if="item.SpecialTags && item.IsSpecial == 1">
-              <text style="color: #90aeda" v-for="it in item.SpecialTags.split(',')" class="item-industry" :key="it">#{{ it }}</text>
+              <text @click.stop="themeDetails(item, val)" style="color: #90aeda" v-for="it in item.SpecialTags.split(',')" class="item-industry" :key="it">#{{ it }}</text>
             </block>
             <text @click.stop="themeDetails(item, val)" class="item-industry" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
           </view>
@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import { Mine, Report, Home, User, Chart,purchaserApi  } from "@/config/api.js";
+import { Mine, Report, Home, User, Chart, purchaserApi } from "@/config/api.js";
 import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
 import freeCharge from "@/components/freeCharge";
 import ChartItem from "@/components/ItemComponent/chartItem.vue";
@@ -164,6 +164,7 @@ export default {
 
     // 去往主题详情
     themeDetails(item, val) {
+      if (item.IsSpecial == 1) return;
       if (item.Source === 1) {
         //非严选
         uni.navigateTo({ url: "/reportPages/IndustryReport/IndustryReport?id=" + val.IndustrialManagementId });

pages-purchaser/columnDetail/columnDetail.vue

@@ -1,45 +1,48 @@
 <template>
   <view class="container column-detail">
-    <view v-if="authorDetail.BgImg" :class="[scrollTopNumber == 0 ? 'top-content' : 'scroll-top-content']" :style="{ 'background-image': 'url(' + authorDetail.BgImg + ')' }">
-      <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="authorDetail.HeadImg"></image>
-            </view>
-            <view class="set-btn" @click="followAuthor">{{ authorDetail.IsFollow == 1 ? "取消关注" : "+ 关注" }}</view>
-          </view>
-          <view class="name-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
-            <text>{{ authorDetail.SpecialName }}</text>
-            <text>{{ authorDetail.NickName }}</text>
+    <view
+      :class="['position-regular', scrollTopNumber != 0 && 'position-content-bg']"
+      :style="{ 'background-image': scrollTopNumber == 0 ? 'url(https://hzchart.oss-cn-shanghai.aliyuncs.com/test-top-1.png)' : '' }"
+    >
+      <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="info-lable-card">
-        <view class="info-card-lable">
-          <text v-for="item in dataProcessing(authorDetail.Label)" :key="item">{{ item }}</text>
+      <view class="name-author">
+        <view class="author-img">
+          <view class="img-box">
+            <image :src="authorDetail.HeadImg"></image>
+          </view>
+          <view class="set-btn" @click="followAuthor">{{ authorDetail.IsFollow == 1 ? "取消关注" : "+ 关注" }}</view>
         </view>
-        <view class="info-card-fans">
-          <text>{{ authorDetail.SpecialArticleNum }}</text>
-          <text>文章</text>
-          <text>{{ authorDetail.CollectNum }}</text>
-          <text>被收藏</text>
-          <text>{{ authorDetail.FollowNum }}</text>
-          <text>粉丝</text>
+        <view class="name-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
+          <text>{{ authorDetail.SpecialName }}</text>
+          <text>{{ authorDetail.NickName }}</text>
         </view>
       </view>
     </view>
-    <view class="column-list-content">
-      <column-list-content :authorDetail="authorDetail" :mySpecialList="specialList" />
+    <view class="info-lable-card">
+      <view class="info-card-lable">
+        <text v-for="item in dataProcessing(authorDetail.Label)" :key="item">{{ item }}</text>
+      </view>
+      <view class="info-card-fans">
+        <text>{{ authorDetail.SpecialArticleNum }}</text>
+        <text>文章</text>
+        <text>{{ authorDetail.CollectNum }}</text>
+        <text>被收藏</text>
+        <text>{{ authorDetail.FollowNum }}</text>
+        <text>粉丝</text>
+      </view>
+      <view style="color: #fff; margin-top: 20rpx"> {{ authorDetail.Introduction }}</view>
+    </view>
+    <view class="column-list-content" v-if="specialList && specialList.length > 0">
+      <column-list-content :authorDetail="authorDetail" :mySpecialList="specialList" @upDateCollectHandler="upDateCollectHandler" />
     </view>
+    <Loading />
   </view>
 </template>
 
@@ -92,13 +95,25 @@ export default {
     },
     // 点击关注作者
     async followAuthor() {
-      let Status = this.authorDetail.IsFollow == 1 ? 2 : 1;
-      const res = await purchaserApi.yanxuanSpecialFollow({
-        FollowUserId: this.authorDetail.UserId,
-        Status,
-      });
-      if (res.Ret === 200) {
-        this.authorDetail.IsFollow = Status;
+      await this.$store.dispatch("checkHandle");
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        //已授权已绑定
+        let Status = this.authorDetail.IsFollow == 1 ? 2 : 1;
+        const res = await purchaserApi.yanxuanSpecialFollow({
+          FollowUserId: this.authorDetail.UserId,
+          Status,
+        });
+        if (res.Ret === 200) {
+          this.authorDetail.IsFollow = Status;
+          Status == 1 &&
+            uni.showModal({
+              title: "已关注专栏",
+              content: "请关注【查研观向小助手】 公众号，及时获取专栏下内容更新提醒",
+              confirmText: "知道了",
+              showCancel: false,
+              confirmColor: "#3385FF",
+            });
+        }
       }
     },
     // 左上角的返回按钮
@@ -111,6 +126,16 @@ export default {
         },
       });
     },
+    // 更新收藏
+    upDateCollectHandler(item) {
+      this.specialList.forEach((key) => {
+        if (key.Id === item.Id) {
+          console.log(key);
+          key.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
+          key.IsCollect = item.IsCollect == 1 ? 0 : 1;
+        }
+      });
+    },
   },
   onLoad(opacity) {
     this.detailUserId = Number(opacity.id) || 0;
@@ -131,19 +156,16 @@ export default {
   .position-content-bg {
     background-color: #fff;
   }
-  .top-content {
-    width: 100%;
-    height: 625rpx;
 
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
   .position-regular {
-    position: fixed;
+    position: sticky;
+    height: 350rpx;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     .name-author {
       z-index: 99;
       display: flex;
@@ -225,29 +247,34 @@ export default {
     }
   }
   .column-list-content {
-    position: absolute;
+    // position: absolute;
     width: 682rpx;
+    margin: 30rpx auto 0;
     border-radius: 12rpx 12rpx 0 0;
-    top: 580rpx;
-    right: 50%;
-    transform: translateX(50%);
-    z-index: 9;
+    // top: 580rpx;
+    // right: 50%;
+    // transform: translateX(50%);
+    // z-index: 9;
     overflow: hidden;
   }
   .info-lable-card {
-    position: absolute;
-    top: 165px;
-    left: 0;
-    padding: 30rpx 35rpx;
+    background-image: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/test-bottom-1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 0 30rpx 35rpx;
     .info-card-lable {
       display: flex;
       flex-wrap: wrap;
       text {
+        display: flex;
+        align-items: center;
         height: 45rpx;
-        padding: 6rpx 12rpx 6rpx 12rpx;
+        padding: 0 12rpx;
         border-radius: 150rpx;
-        background-color: #8994a1;
+        background-color: rgba(255, 255, 255, 0.4);
         margin: 20rpx 20rpx 0rpx 0;
+        color: #fff;
+        font-size: 28rpx;
       }
     }
     .info-card-fans {

pages-purchaser/components/columnListContent.vue

@@ -1,13 +1,5 @@
 <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' }">
-        {{ authorDetail.Introduction }}
-        <view class="expan-btn-sl" v-if="isShowBtn && !isExpand">......</view>
-      </view>
-      <view class="expan-btn" @click.stop="handleExpand" v-if="isShowBtn">{{ isExpand ? "收起" : "展开" }}</view>
-    </view>
     <block v-if="mySpecialList && mySpecialList.length">
       <view class="content-item" v-for="item in mySpecialList" :key="item.Id">
         <view class="type-time">
@@ -15,18 +7,20 @@
           <view class="time"> {{ item.PublishTime }}</view>
         </view>
         <view class="title-item"> {{ item.Title }}</view>
-        <view class="text-conten">
-          <mp-html @ready="textContenReady($event, item)" class="text-conten-my" :content="richTextClamp(8) + item.Content + '</div>'" />
+        <view class="text-conten" v-if="item.Content">
+          <mp-html :content="richTextSlicing(item.Content)" />
+        </view>
+        <view class="look-all-box" v-if="item.Content.length > 150 || item.ContentHasImg">
+          <view class="look-all" @click="goDetail(item)"> 查看全文 </view>
         </view>
-        <view class="look-all" v-if="item.isShowBtn || item.ContentHasImg" @click="goDetail(item)"> 查看全文 </view>
         <block v-if="item.Docs && item.Docs.length > 0">
           <view @click="goFilePages(key)" class="file-item" v-for="(key, index) in item.Docs" :key="index"> <image :src="key.DocIcon"></image>{{ key.DocName }}.{{ key.DocSuffix }} </view>
         </block>
         <view class="image-conten">
-          <image v-for="key in dataProcessing(item.ImgUrl)" :key="key" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png" @click="previewImageMediahandler"></image>
+          <image v-for="key in dataProcessing(item.ImgUrl)" :key="key" :src="key" @click="previewImageMediahandler(key)"></image>
         </view>
         <view class="lable-conten">
-          <text v-for="key in dataProcessing(item.Tags)" :key="key">{{ key }}</text>
+          <view class="item" v-for="key in dataProcessing(item.Tags)" :key="key">{{ key }}</view>
         </view>
         <view class="collect-conten">
           <image @click="collectHandler(2, item)" v-if="item.IsCollect == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
@@ -37,14 +31,9 @@
     </block>
     <view class="nodata" v-else>
       <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+      <view class="nodata-text">还没有发布过内容</view>
     </view>
-    <view class="introduce-detail-one" v-show="showText">
-      <mp-html
-        @ready="textContenReadyOne($event, item)"
-        content="有专栏详情页面，情页面，暂时都不设置行业权限。专栏详情页未登录也可查看，收藏操作需先登录，内容详情页面也需要登录后才查容详情页面也需要登录后"
-      />
-    </view>
-    <view v-show="loadTimeLine" class="loadTimeLine"></view>
+    <Loading />
   </view>
 </template>
 
@@ -62,72 +51,42 @@ export default {
     },
   },
   data() {
-    return {
-      loadTimeLine: true, //时间线的遮罩
-      richTextHeight: 1000,
-      isExpand: true,
-      isShowBtn: true,
-      showText: true,
-    };
+    return {};
   },
   methods: {
-    previewImageMediahandler() {
+    previewImageMediahandler(key) {
       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) => {
-        if (res[0][0].height > this.richTextHeight) {
-          this.isExpand = false;
-          this.isShowBtn = true;
-        } else {
-          this.isExpand = true;
-          this.isShowBtn = false;
-        }
-        setTimeout(() => {
-          this.loadTimeLine = false;
-        });
+        urls: [key], //查看图片的数组
       });
     },
     // 数据处理
     dataProcessing(item) {
       return item ? item.split(",") : [];
     },
-    // 渲染文本的事件
-    textContenReady(e, item) {
-      let isShow = e.height >= 153 ? true : false;
-      this.$set(item, "isShowBtn", isShow);
-    },
     //
-    richTextClamp(val) {
-      return `<div style="line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
+    richTextSlicing(val) {
+      let str = val.length >= 150 ? val.slice(0, 150) + " ..." : val;
+      return str;
     },
     // 去往详情
     goDetail(item) {
       uni.navigateTo({ url: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + item.Id });
     },
-    textContenReadyOne(e, item) {
-      this.richTextHeight = e.height;
-      this.showText = false;
-      this.getConentsHeight();
-    },
     // 收藏取消收藏
     async collectHandler(type, item) {
-      const res = await purchaserApi.yanxuanSpecialCollect({
-        Id: item.Id,
-        Status: type,
-      });
-      if (res.Ret === 200) {
-        this.$util.toast(res.Msg);
-        item.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
-        item.IsCollect = item.IsCollect == 1 ? 0 : 1;
+      await this.$store.dispatch("checkHandle");
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        //已授权已绑定
+        const res = await purchaserApi.yanxuanSpecialCollect({
+          Id: item.Id,
+          Status: type,
+        });
+        if (res.Ret === 200) {
+          this.$util.toast(res.Msg);
+          // item.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
+          // item.IsCollect = item.IsCollect == 1 ? 0 : 1;
+          this.$emit("upDateCollectHandler", item);
+        }
       }
     },
     // 去往预览文件
@@ -145,9 +104,6 @@ export default {
           });
         },
       });
-      // uni.navigateTo({
-      //   url: "/pages-purchaser/filePreviewPage/filePreviewPage?url=" + item.DocUrl,
-      // });
     },
   },
 };
@@ -158,29 +114,16 @@ export default {
   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;
-    }
+  .text-conten {
+    width: 100%;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 8;
   }
+
   .introduce-detail {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -265,14 +208,17 @@ export default {
     }
     .lable-conten {
       display: flex;
+      flex-wrap: wrap;
       margin: 20rpx 0;
       font-size: 24rpx;
-      text {
+      .item {
+        display: flex;
+        align-content: center;
         height: 34rpx;
         border-radius: 44rpx;
-        padding: 3rpx 35rpx 3rpx 35rpx;
+        padding: 0 35rpx;
         background-color: #f0f1f3;
-        margin-right: 20rpx;
+        margin: 0 20rpx 20rpx 0;
       }
     }
     .collect-conten {
@@ -286,8 +232,11 @@ export default {
         margin-right: 8rpx;
       }
     }
+    .look-all-box {
+      display: flex;
+      justify-content: flex-end;
+    }
     .look-all {
-      float: right;
       width: 108rpx;
       height: 42rpx;
       border-radius: 150rpx;
@@ -299,5 +248,11 @@ export default {
       margin: 20rpx 0;
     }
   }
+  .nodata-text {
+    color: #999;
+    text-align: center;
+    margin-top: -80rpx;
+    font-size: 24rpx;
+  }
 }
 </style>

pages-purchaser/components/imageUpload.vue

@@ -1,375 +1,573 @@
 <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 class="con">
+    <template v-if="viewWidth">
+      <movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
+        <movable-view
+          v-for="(item, index) in imageList"
+          :key="item.id"
+          class="view"
+          direction="all"
+          :y="item.y"
+          :x="item.x"
+          :damping="40"
+          :disabled="item.disable"
+          @change="onChange($event, item)"
+          @touchstart="touchstart(item)"
+          @mousedown="touchstart(item)"
+          @touchend="touchend(item)"
+          @mouseup="touchend(item)"
+          :style="{
+            width: viewWidth + 'px',
+            height: viewWidth + 'px',
+            'z-index': item.zIndex,
+            opacity: item.opacity,
+          }"
+        >
+          <view
+            class="area-con"
+            :style="{
+              width: childWidth,
+              height: childWidth,
+              borderRadius: borderRadius + 'rpx',
+              transform: 'scale(' + item.scale + ')',
+            }"
+          >
+            <image class="pre-image" :src="item.src" mode="aspectFill"></image>
+            <view class="del-con" @click="delImages(item, index)" @touchstart.stop="delImageMp(item, index)" @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
+              <view class="del-wrap">
+                <image
+                  class="del-image"
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC"
+                >
+                </image>
+              </view>
+            </view>
+          </view>
+        </movable-view>
+        <view class="add" v-if="imageList.length < number" :style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }" @click="addImages">
+          <view class="add-wrap" :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
+            <image
+              style="width: 54rpx; height: 54rpx"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAABIUlEQVRoQ+2a2w2DMAxFeQzWrsMUbadAsEw3S1CqVgppKwLX8BEOP4iHTXx8uUgWdVXoVhdaV0VhSmf7vr/H8V3XzY6V3P9iD+nYOI5P7/01LMI596AwoZV0TIBXIUWFXhKLFBWYSFGhhxQN6SFFQ5i4ogITKSr0cEVDekjRECauqMBEigq9U7piOk2yAti27SUe5ljlTfPEQ6KZecTvwl4P3ytvOv06R2HDMNzes7+6aRrvnHvtf50L13Lp50rx88zcvNlS3JpwKQ67XyK04nq2nFbk/LqVjin0TvmBNgQ2S4UUDcliHgpMpKjQwxUN6SFFQ5i4ogITKSr0cEVDekjRECauqMAsVoph+hVPtYr5+03p9tbYQ96xrYtT4ootbAJGVxxVTapVswAAAABJRU5ErkJggg=="
+            >
+            </image>
+          </view>
+        </view>
+      </movable-area>
+    </template>
   </view>
 </template>
 
 <script>
-import { uploadurl } from "@/config/api";
-import { get } from "@/config/db";
 export default {
-  name: "robby-image-upload",
-  props: ["value", "enableDel", "enableAdd", "enableDrag", "serverUrl", "formData", "header", "limit", "fileKeyName", "showUploadProgress", "serverUrlDeleteImage"],
+  emits: ["input", "update:modelValue"],
+  props: {
+    // 排序图片
+    value: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    // 排序图片
+    modelValue: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    // 从 list 元素对象中读取的键名
+    keyName: {
+      type: String,
+      default: null,
+    },
+    // 选择图片数量限制
+    number: {
+      type: Number,
+      default: 6,
+    },
+    // 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
+    // imageWidth > 0 则 cols 无效
+    imageWidth: {
+      type: Number,
+      default: 0,
+    },
+    // 图片列数
+    cols: {
+      type: Number,
+      default: 3,
+    },
+    // 图片圆角，单位 rpx
+    borderRadius: {
+      type: Number,
+      default: 0,
+    },
+    // 图片周围空白填充，单位 rpx
+    padding: {
+      type: Number,
+      default: 10,
+    },
+    // 拖动图片时放大倍数 [0, ∞)
+    scale: {
+      type: Number,
+      default: 1.1,
+    },
+    // 拖动图片时不透明度
+    opacity: {
+      type: Number,
+      default: 0.7,
+    },
+    // 自定义添加
+    addImage: {
+      type: Function,
+      default: null,
+    },
+    // 删除确认
+    delImage: {
+      type: Function,
+      default: null,
+    },
+  },
   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,
+      width: 0,
+      add: {
+        x: 0,
+        y: 0,
+      },
+      colsValue: 0,
+      viewWidth: 0,
+      tempItem: null,
+      timer: null,
+      changeStatus: true,
+      preStatus: true,
+      first: true,
     };
   },
-  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;
+    areaHeight() {
+      let height = "";
+      // return '355px'
+      if (this.imageList.length < this.number) {
+        height = (Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth).toFixed() + "px";
+      } else {
+        height = (Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth).toFixed() + "px";
       }
+      console.log("areaHeight", height);
+      return height;
     },
-    posMoveImageLeft: function () {
-      return this.moveLeft + "px";
+    childWidth() {
+      return this.viewWidth - this.rpx2px(this.padding) * 2 + "px";
     },
-    posMoveImageTop: function () {
-      return this.moveTop + "px";
+  },
+  watch: {
+    value: {
+      handler(n) {
+        if (!this.first && this.changeStatus) {
+          console.log("watch", n);
+          let flag = false;
+          for (let i = 0; i < n.length; i++) {
+            if (flag) {
+              this.addProperties(this.getSrc(n[i]));
+              continue;
+            }
+            if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
+              flag = true;
+              this.imageList.splice(i);
+              this.addProperties(this.getSrc(n[i]));
+            }
+          }
+        }
+      },
+      deep: true,
     },
-    isShowDel: function () {
-      if (this.enableDel === false) {
-        return false;
-      } else {
-        return true;
-      }
+    modelValue: {
+      handler(n) {
+        if (!this.first && this.changeStatus) {
+          console.log("watch", n);
+          let flag = false;
+          for (let i = 0; i < n.length; i++) {
+            if (flag) {
+              this.addProperties(this.getSrc(n[i]));
+              continue;
+            }
+            if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
+              flag = true;
+              this.imageList.splice(i);
+              this.addProperties(this.getSrc(n[i]));
+            }
+          }
+        }
+      },
+      deep: true,
     },
-    isShowAdd: function () {
-      if (this.enableAdd === false) {
-        return false;
-      }
-
-      if (this.limit && this.imageList && this.imageList.length >= this.limit) {
-        return false;
+  },
+  created() {
+    this.width = uni.getSystemInfoSync().windowWidth;
+  },
+  mounted() {
+    const query = uni.createSelectorQuery().in(this);
+    query.select(".con").boundingClientRect((data) => {
+      this.colsValue = this.cols;
+      this.viewWidth = data.width / this.cols;
+      if (this.imageWidth > 0) {
+        this.viewWidth = this.rpx2px(this.imageWidth);
+        this.colsValue = Math.floor(data.width / this.viewWidth);
       }
-
-      return true;
-    },
-    isDragable: function () {
-      if (this.enableDrag === false) {
-        return false;
-      } else {
-        return true;
+      let list = this.value;
+      // #ifdef VUE3
+      list = this.modelValue;
+      // #endif
+      for (let item of list) {
+        this.addProperties(this.getSrc(item));
       }
-    },
+      this.first = false;
+    });
+    query.exec();
   },
   methods: {
-    selectImage: function () {
-      var _self = this;
-      if (!_self.imageList) {
-        _self.imageList = [];
+    getSrc(item) {
+      if (this.keyName !== null) {
+        return item[this.keyName];
       }
-
-      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;
+      return item;
+    },
+    onChange(e, item) {
+      if (!item) return;
+      item.oldX = e.detail.x;
+      item.oldY = e.detail.y;
+      if (e.detail.source === "touch") {
+        if (item.moveEnd) {
+          item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY - item.absY * this.viewWidth, 2));
+        }
+        let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth);
+        if (x >= this.colsValue) return;
+        let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth);
+        let index = this.colsValue * y + x;
+        if (item.index != index && index < this.imageList.length) {
+          this.changeStatus = false;
+          for (let obj of this.imageList) {
+            if (item.index > index && obj.index >= index && obj.index < item.index) {
+              this.change(obj, 1);
+            } else if (item.index < index && obj.index <= index && obj.index > item.index) {
+              this.change(obj, -1);
+            } else if (obj.id != item.id) {
+              obj.offset = 0;
+              obj.x = obj.oldX;
+              obj.y = obj.oldY;
+              setTimeout(() => {
+                this.$nextTick(() => {
+                  obj.x = obj.absX * this.viewWidth;
+                  obj.y = obj.absY * this.viewWidth;
+                });
+              }, 0);
             }
           }
-
-          //检查服务器地址是否设置，设置即表示图片要上传到服务器
-          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: uploadurl,
-                    header: {
-                      "Content-Type": "multipart/form-data",
-                      Authorization: get("access_token"),
-                    },
-                    filePath: imagePathArr[i],
-                    name: "file",
-                    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,
-                          });
-                        }
-                        resolve(res.data);
-                      } else {
-                        reject("fail to upload image:" + remoteUrlIndex);
-                      }
-                    },
-                    fail: function (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(JSON.parse(result[i]).Data.ResourceUrl);
-              }
-
-              _self.$emit("add", {
-                currentImages: imagePathArr,
-                allImages: _self.imageList,
+          item.index = index;
+          item.absX = x;
+          item.absY = y;
+          if (!item.moveEnd) {
+            setTimeout(() => {
+              this.$nextTick(() => {
+                item.x = item.absX * this.viewWidth;
+                item.y = item.absY * this.viewWidth;
               });
-              _self.$emit("input", _self.imageList);
-            });
+            }, 0);
           }
-        },
+          // console.log('bbb', JSON.parse(JSON.stringify(item)));
+          this.sortList();
+        }
+      }
+    },
+    change(obj, i) {
+      obj.index += i;
+      obj.offset = 0;
+      obj.x = obj.oldX;
+      obj.y = obj.oldY;
+      obj.absX = obj.index % this.colsValue;
+      obj.absY = Math.floor(obj.index / this.colsValue);
+      setTimeout(() => {
+        this.$nextTick(() => {
+          obj.x = obj.absX * this.viewWidth;
+          obj.y = obj.absY * this.viewWidth;
+        });
+      }, 0);
+    },
+    touchstart(item) {
+      this.imageList.forEach((v) => {
+        v.zIndex = v.index + 9;
       });
+      item.zIndex = 99;
+      item.moveEnd = true;
+      this.tempItem = item;
+      this.timer = setTimeout(() => {
+        item.scale = this.scale;
+        item.opacity = this.opacity;
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, 200);
     },
-    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,
+    touchend(item) {
+      this.previewImage(item);
+      item.scale = 1;
+      item.opacity = 1;
+      item.x = item.oldX;
+      item.y = item.oldY;
+      item.offset = 0;
+      item.moveEnd = false;
+      setTimeout(() => {
+        this.$nextTick(() => {
+          item.x = item.absX * this.viewWidth;
+          item.y = item.absY * this.viewWidth;
+          this.tempItem = null;
+          this.changeStatus = true;
+        });
+        // console.log('ccc', JSON.parse(JSON.stringify(item)));
+      }, 0);
+      // console.log('ddd', JSON.parse(JSON.stringify(item)));
+    },
+    previewImage(item) {
+      if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
+        clearTimeout(this.timer);
+        this.timer = null;
+        const list = this.value || this.modelValue;
+        let srcList = list.map((v) => this.getSrc(v));
+        console.log(list, srcList);
+        uni.previewImage({
+          urls: srcList,
+          current: item.src,
+          success: () => {
+            this.preStatus = false;
+            setTimeout(() => {
+              this.preStatus = true;
+            }, 600);
+          },
+          fail: (e) => {
+            console.log(e);
           },
-          success: (res) => {},
         });
+      } else if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
       }
-
-      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;
-        },
+    mouseenter() {
+      //#ifdef H5
+      this.imageList.forEach((v) => {
+        v.disable = false;
       });
+      //#endif
     },
-    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) {
-      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;
+    mouseleave() {
+      //#ifdef H5
+      if (this.tempItem) {
+        this.imageList.forEach((v) => {
+          v.disable = true;
+          v.zIndex = v.index + 9;
+          v.offset = 0;
+          v.moveEnd = false;
+          if (v.id == this.tempItem.id) {
+            if (this.timer) {
+              clearTimeout(this.timer);
+              this.timer = null;
+            }
+            v.scale = 1;
+            v.opacity = 1;
+            v.x = v.oldX;
+            v.y = v.oldY;
+            this.$nextTick(() => {
+              v.x = v.absX * this.viewWidth;
+              v.y = v.absY * this.viewWidth;
+              this.tempItem = null;
+            });
+          }
+        });
+        this.changeStatus = true;
       }
-
-      //设置选中图片当前左上角的坐标
-      this.moveLeft = e.target.offsetLeft;
-      this.moveTop = e.target.offsetTop;
+      //#endif
     },
-    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;
+    addImages() {
+      if (typeof this.addImage === "function") {
+        this.addImage.bind(this.$parent)();
+      } else {
+        let checkNumber = this.number - this.imageList.length;
+        uni.chooseImage({
+          count: checkNumber,
+          sourceType: ["album", "camera"],
+          success: (res) => {
+            let count = checkNumber <= res.tempFilePaths.length ? checkNumber : res.tempFilePaths.length;
+            for (let i = 0; i < count; i++) {
+              this.addProperties(res.tempFilePaths[i]);
+            }
+            this.sortList();
+          },
+        });
       }
-
-      //设置移动图片位置
-      this.moveLeft = touch.clientX - this.deltaLeft;
-      this.moveTop = touch.clientY - this.deltaTop;
     },
-    stop: function (e) {
-      if (!this.isDragable) {
-        return;
+    delImages(item, index) {
+      if (typeof this.delImage === "function") {
+        this.delImage.bind(this.$parent)(() => {
+          this.delImageHandle(item, index);
+        });
+      } else {
+        this.delImageHandle(item, index);
       }
-      if (this.dragIndex !== null && this.targetImageIndex !== null) {
-        if (this.targetImageIndex < 0) {
-          this.targetImageIndex = 0;
+    },
+    delImageHandle(item, index) {
+      this.imageList.splice(index, 1);
+      for (let obj of this.imageList) {
+        if (obj.index > item.index) {
+          obj.index -= 1;
+          obj.x = obj.oldX;
+          obj.y = obj.oldY;
+          obj.absX = obj.index % this.colsValue;
+          obj.absY = Math.floor(obj.index / this.colsValue);
+          this.$nextTick(() => {
+            obj.x = obj.absX * this.viewWidth;
+            obj.y = obj.absY * this.viewWidth;
+          });
         }
+      }
+      this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + "px";
+      this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + "px";
+      this.sortList();
+    },
+    delImageMp(item, index) {
+      //#ifdef MP
+      this.delImages(item, index);
+      //#endif
+    },
+    sortList() {
+      console.log("sortList");
+      const result = [];
+      let source = this.value;
+      // #ifdef VUE3
+      source = this.modelValue;
+      // #endif
 
-        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;
+      let list = this.imageList.slice();
+      list.sort((a, b) => {
+        return a.index - b.index;
+      });
+      for (let s of list) {
+        let item = source.find((d) => this.getSrc(d) == s.src);
+        if (item) {
+          result.push(item);
+        } else {
+          if (this.keyName !== null) {
+            result.push({
+              [this.keyName]: s.src,
+            });
+          } else {
+            result.push(s.src);
+          }
         }
       }
 
-      this.dragIndex = null;
-      this.targetImageIndex = null;
-      this.deltaLeft = 0;
-      this.deltaTop = 0;
-      this.showMoveImage = false;
-
-      this.$emit("input", this.imageList);
+      this.$emit("input", result);
+      this.$emit("update:modelValue", result);
+    },
+    addProperties(item) {
+      console.log(item);
+      let absX = this.imageList.length % this.colsValue;
+      let absY = Math.floor(this.imageList.length / this.colsValue);
+      let x = absX * this.viewWidth;
+      let y = absY * this.viewWidth;
+      this.imageList.push({
+        src: item,
+        x,
+        y,
+        oldX: x,
+        oldY: y,
+        absX,
+        absY,
+        scale: 1,
+        zIndex: 9,
+        opacity: 1,
+        index: this.imageList.length,
+        id: this.guid(16),
+        disable: false,
+        offset: 0,
+        moveEnd: false,
+      });
+      this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + "px";
+      this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + "px";
+    },
+    nothing() {},
+    rpx2px(v) {
+      return (this.width * v) / 750;
+    },
+    guid(len = 32) {
+      const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
+      const uuid = [];
+      const radix = chars.length;
+      for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+      uuid.shift();
+      return `u${uuid.join("")}`;
     },
   },
 };
 </script>
 
-<style>
-.dragging {
-  transform: scale(1.2);
-}
+<style lang="scss" scoped>
+.con {
+  // padding: 30rpx;
 
-.imageUploadList {
-  display: flex;
-  flex-wrap: wrap;
-}
+  .area {
+    width: 100%;
 
-.imageItem,
-.imageUpload {
-  width: 160upx;
-  height: 160upx;
-  margin: 20upx 16upx 20upx 0;
-}
+    .view {
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-.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;
-}
+      .area-con {
+        position: relative;
+        overflow: hidden;
 
-.imageItem image,
-.moveImage {
-  width: 160upx;
-  height: 160upx;
-  border-radius: 8upx;
-}
+        .pre-image {
+          width: 100%;
+          height: 100%;
+        }
 
-.imageUpload {
-  line-height: 130upx;
-  text-align: center;
-  font-size: 150upx;
-  color: #d9d9d9;
-  border: 1px solid #d9d9d9;
-  border-radius: 8upx;
-}
+        .del-con {
+          position: absolute;
+          top: 0rpx;
+          right: 0rpx;
+          padding: 0 0 20rpx 20rpx;
+
+          .del-wrap {
+            width: 36rpx;
+            height: 36rpx;
+            background-color: rgba(0, 0, 0, 0.4);
+            border-radius: 0 0 0 10rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-.moveImage {
-  position: absolute;
+            .del-image {
+              width: 20rpx;
+              height: 20rpx;
+            }
+          }
+        }
+      }
+    }
+
+    .add {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .add-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #eeeeee;
+      }
+    }
+  }
 }
 </style>

pages-purchaser/components/infoCard.vue

@@ -2,11 +2,9 @@
   <view class="info-card-detail" :style="{ 'background-image': pagesType == '专栏详情' ? 'url(' + authorDetail.BgImg + ')' : '' }">
     <view class="name-author">
       <view class="author-img">
-        <view class="img-box">
-          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-            <image :src="authorDetail.HeadImg"></image>
-          </button>
-        </view>
+        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+          <image :src="authorDetail.HeadImg"></image>
+        </button>
         <view class="set-btn" v-if="pagesType == '专栏详情'" @click.stop="editMyColumn"> 编辑专栏</view>
       </view>
       <view class="name-box">
@@ -25,6 +23,7 @@
       <text>{{ authorDetail.FollowNum }}</text>
       <text>粉丝</text>
     </view>
+    <view style="color: #fff; margin-top: 20rpx"> {{ authorDetail.Introduction }}</view>
   </view>
 </template>
 
@@ -55,36 +54,29 @@ export default {
       let token = this.$db.get("access_token");
       let authHeader = token || "";
       let that = this;
-      wx.cropImage({
-        src: e.detail.avatarUrl,
-        cropScale: "1:1",
-        success(res) {
-          console.log(res.tempFilePath);
-          uni.uploadFile({
-            url: uploadurl,
-            filePath: res.tempFilePath,
-            header: {
-              "Content-Type": "multipart/form-data",
-              Authorization: authHeader,
-            },
-            name: "file",
-            success: async (resImg) => {
-              let data = JSON.parse(resImg.data);
-              const resUp = await purchaserApi.yanxuanSpecialAuthorImg({
-                HeadImg: data.Data.ResourceUrl,
-                UserId: that.authorDetail.UserId,
-              });
-              if (resUp.Ret === 200) {
-                this.$parent.authorDetail.HeadImg = data.Data.ResourceUrl;
-              }
-            },
+      uni.uploadFile({
+        url: uploadurl,
+        filePath: e.detail.avatarUrl,
+        header: {
+          "Content-Type": "multipart/form-data",
+          Authorization: authHeader,
+        },
+        name: "file",
+        success: async (resImg) => {
+          let data = JSON.parse(resImg.data);
+          const resUp = await purchaserApi.yanxuanSpecialAuthorImg({
+            HeadImg: data.Data.ResourceUrl,
+            UserId: that.authorDetail.UserId,
           });
+          if (resUp.Ret === 200) {
+            that.$parent.authorDetail.HeadImg = data.Data.ResourceUrl;
+          }
         },
       });
     },
     editMyColumn() {
       if (this.pagesType == "专栏详情") {
-        this.$parent.isEditInfo = false;
+        this.$emit("editColumnHandler");
       }
     },
   },
@@ -102,7 +94,7 @@ export default {
   color: #fff;
   .name-author {
     display: flex;
-
+    background: rgba(0, 0, 0, 0);
     .author-img {
       position: relative;
       display: flex;
@@ -110,18 +102,15 @@ export default {
       width: 126rpx;
       height: 138rpx;
       text-align: center;
-      .img-box {
-        width: 110rpx;
-        height: 110rpx;
-        display: flex;
-        justify-content: center;
-        align-content: center;
+      background: rgba(0, 0, 0, 0);
+      .avatar-wrapper {
+        background: rgba(0, 0, 0, 0);
+      }
+      image {
+        background: rgba(0, 0, 0, 0);
+        width: 111rpx;
+        height: 111rpx;
         border-radius: 50%;
-        overflow: hidden;
-        image {
-          width: 111rpx;
-          height: 111rpx;
-        }
       }
       .set-btn {
         position: absolute;
@@ -157,8 +146,10 @@ export default {
     display: flex;
     flex-wrap: wrap;
     text {
+      display: flex;
+      align-items: center;
       height: 45rpx;
-      padding: 6rpx 12rpx 6rpx 12rpx;
+      padding: 0 12rpx;
       border-radius: 150rpx;
       background-color: #8994a1;
       margin: 20rpx 20rpx 0rpx 0;

pages-purchaser/components/purchaser-report-list-mixins.js

@@ -1,51 +1,60 @@
-import { Reports, Research, Report } from "@/config/api.js";
+import { Reports, Research, Report, purchaserApi } from "@/config/api.js";
 export default {
   data() {
-    return {
-
-    };
+    return {};
   },
   methods: {
-		//收藏
-		async collectClick(item) {
-		  await this.$store.dispatch("showLoginModal");
-		  const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: "月度收藏榜" });
-		  if (res.Ret === 200) {
-		    item.IsCollect = !item.IsCollect;
-		    item.IsCollect
-		      ? (item.CollectNum += 1) &&
-		        uni.showToast({
-		          title: "收藏成功",
-		          icon: "none",
-		          duration: 2000,
-		        })
-		      : (item.CollectNum -= 1);
-		    !item.IsCollect &&
-		      uni.showToast({
-		        title: "已取消收藏",
-		        icon: "none",
-		        duration: 2000,
-		      });
-		  }
-		},
-		//去往作者详情
-		authorDetails(item) {
-		  uni.navigateTo({
-		    url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
-		  });
-		},
-		//去往文章详情页面
-		goDetail(item) {
-		 if (item.IsSpecial == 1) {
-			uni.navigateTo({ url: "/pages-purchaser/specialColumn/specialColumn" });
-			return;
-		  }
-		  this.$store.commit("setRouterReport", "月度收藏榜");
-		  uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
-		},
-		//去往主题详情
-		themeDetails(item, source) {
-		  uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source });
-		},
-  }
+    //收藏
+    async collectClick(item) {
+      await this.$store.dispatch("showLoginModal");
+      const res =
+        item.IsSpecial == 1
+          ? await purchaserApi.yanxuanSpecialCollect({
+              Id: item.ArticleId,
+              Status: item.IsCollect ? 2 : 1,
+            })
+          : await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: "月度收藏榜" });
+      if (res.Ret === 200) {
+        item.IsCollect = !item.IsCollect;
+        item.IsCollect
+          ? (item.CollectNum += 1) &&
+            uni.showToast({
+              title: "收藏成功",
+              icon: "none",
+              duration: 2000,
+            })
+          : (item.CollectNum -= 1);
+        !item.IsCollect &&
+          uni.showToast({
+            title: "已取消收藏",
+            icon: "none",
+            duration: 2000,
+          });
+      }
+    },
+    //去往作者详情
+    authorDetails(item) {
+      if (item.IsSpecial == 1) {
+        uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + item.UserId });
+        return;
+      }
+      uni.navigateTo({
+        url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
+      });
+    },
+    //去往文章详情页面
+    goDetail(item) {
+      if (item.IsSpecial == 1) {
+        uni.navigateTo({ url: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + item.ArticleId });
+        return;
+      }
+      this.$store.commit("setRouterReport", "月度收藏榜");
+      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
+    },
+    //去往主题详情
+    themeDetails(item, source) {
+      if (item.IsSpecial == 1) return;
+      uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source });
+    },
+  },
 };

pages-purchaser/contentAllPage/contentAllPage.vue

@@ -6,21 +6,26 @@
         <view class="line-active" v-if="tabActive == item.value"> </view>
       </view>
     </view>
-    <view class="content-ul">
+    <view class="content-ul" v-if="specialCenter && specialCenter.length > 0">
       <view class="content-li" v-for="item in specialCenter" :key="item.Id" @click="toExamineHandler(item)">
         <view class="type-time">
           <view class="type"> {{ item.Type == 1 ? "笔 记" : "观 点" }} </view>
-          <view class="time"> {{ item.PublishTime }}</view>
+          <view class="time"> {{ item.Type == 1 ? item.ModifyTime : item.PublishTime }}</view>
         </view>
         <view class="title-item"> {{ item.Title }}</view>
         <view class="btn-box">
           <view class="reject-box" v-if="tabActive == 1" @click.stop="deleteHandler(item)"> 删除</view>
           <view class="cancell-box" v-if="tabActive == 3" @click.stop="unpublishHandler(item)"> 取消发布</view>
           <view class="reject-box" v-if="tabActive == 4" @click.stop="rejectHandler(item)"> 驳回理由</view>
-          <view class="edit-box" v-if="tabActive != 2" @click.stop="modifyHandler(item)"> 修改 </view>
+          <view class="edit-box" v-if="tabActive == 1 || tabActive == 4" @click.stop="modifyHandler(item)"> 修改 </view>
         </view>
       </view>
     </view>
+    <view class="nodata" v-else>
+      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+      <view class="nodata-text">暂无内容</view>
+    </view>
+    <Loading />
   </view>
 </template>
 
@@ -40,10 +45,10 @@ export default {
     };
   },
   methods: {
-    
     // top标签点击事件
     tabClickHandler(item) {
       if (this.tabActive === item.value) return;
+      this.specialCenter = [];
       this.tabActive = item.value;
       this.getDataList();
     },
@@ -54,7 +59,6 @@ export default {
         Status: this.tabActive,
       });
       if (res.Ret === 200) {
-        console.log(res);
         this.specialCenter = res.Data || [];
       }
     },
@@ -113,13 +117,22 @@ export default {
 
     // 删除
     async deleteHandler(item) {
-      const resCancel = await purchaserApi.yanxuanSpecialDel({
-        Id: item.Id,
+      uni.showModal({
+        content: "确定要删除此内容吗?",
+        confirmColor: "#3385FF",
+        cancelColor: "#606266",
+        success: async (res) => {
+          if (res.confirm) {
+            const resCancel = await purchaserApi.yanxuanSpecialDel({
+              Id: item.Id,
+            });
+            if (resCancel.Ret == 200) {
+              this.$util.toast("已删除");
+              this.getDataList();
+            }
+          }
+        },
       });
-      if (resCancel.Ret == 200) {
-        this.$util.toast("已删除");
-        this.getDataList();
-      }
     },
   },
   onLoad() {
@@ -191,14 +204,18 @@ export default {
       .btn-box {
         display: flex;
         justify-content: flex-end;
+        padding-top: 5rpx;
         view {
-          padding: 4rpx 24rpx 4rpx 24rpx;
+          display: flex;
+          align-items: center;
+          height: 48rpx;
+          padding: 0 24rpx;
           border-radius: 150rpx;
           margin-left: 10rpx;
         }
         .cancell-box {
           color: #376cbb;
-          border: 1rpx solid #376cbb;
+          border: 2rpx solid #376cbb;
         }
         .edit-box {
           color: #fff;
@@ -206,7 +223,7 @@ export default {
         }
         .reject-box {
           color: #d54941;
-          border: 1rpx solid #d54941;
+          border: 2rpx solid #d54941;
         }
       }
     }

pages-purchaser/lastestReport/lastestReport.vue

@@ -16,7 +16,7 @@
               <view>
                 <text class="title" @click="goDetail(item)" :style="{ display: 'inline', marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }">{{ item.Title }}</text>
                 <block v-if="item.SpecialTags">
-                  <text style="color: #90aeda" v-for="it in item.SpecialTags.split(',')" class="purchaser-content-row-object" :key="it">#{{ it }}</text>
+                  <text style="color: #90aeda" @click="themeDetails(key, '月度收藏榜')" v-for="it in item.SpecialTags.split(',')" class="li-industry" :key="it">#{{ it }}</text>
                 </block>
                 <text class="li-industry" @click="themeDetails(key, '月度收藏榜')" v-for="key in item.List" :key="key.IndustrialManagementId"> # {{ key.IndustryName }} </text>
               </view>

pages-purchaser/noteAndViewpoint/noteAndViewpoint.vue

@@ -3,13 +3,14 @@
     <view class="content-item">
       <view class="author-name">
         <view class="img-box">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
+          <image :src="detailDataForm.HeadImg" @click="goDetailPages"></image>
         </view>
         <text style="margin-left: 10rpx">{{ detailDataForm.NickName }}</text>
       </view>
       <view class="type-time">
-        <view class="type"> 笔 记</view>
-        <view class="time">{{ detailDataForm.NickName }}</view>
+        <view class="type"> {{ detailDataForm.Type == 1 ? "笔 记" : "观 点" }} </view>
+
+        <view class="time">{{ detailDataForm.PublishTime }}</view>
       </view>
       <view class="title-item"> {{ detailDataForm.Title }}</view>
       <view class="text-conten">
@@ -22,10 +23,10 @@
         </view>
       </block>
       <view class="image-conten">
-        <image v-for="key in dataProcessing(detailDataForm.ImgUrl)" :key="key" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png" @click="previewImageMediahandler"></image>
+        <image v-for="key in dataProcessing(detailDataForm.ImgUrl)" :key="key" :src="key" @click="previewImageMediahandler(key)"></image>
       </view>
       <view class="lable-conten">
-        <text v-for="key in dataProcessing(detailDataForm.Tags)" :key="key">{{ key }}</text>
+        <view class="item" v-for="key in dataProcessing(detailDataForm.Tags)" :key="key">{{ key }}</view>
       </view>
       <view class="collect-conten">
         <image @click="collectHandler(2)" v-if="detailDataForm.IsCollect == 1" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
@@ -33,6 +34,7 @@
         {{ detailDataForm.CollectNum }}
       </view>
     </view>
+    <Loading />
   </view>
 </template>
 
@@ -46,9 +48,9 @@ export default {
     };
   },
   methods: {
-    previewImageMediahandler() {
+    previewImageMediahandler(key) {
       uni.previewImage({
-        urls: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"], //查看图片的数组
+        urls: [key], //查看图片的数组
       });
     },
     // 获取专栏详情
@@ -58,6 +60,10 @@ export default {
       });
       if (res.Ret === 200) {
         this.detailDataForm = res.Data;
+        let str = this.detailDataForm.Type == 1 ? "笔记" : "观点";
+        wx.setNavigationBarTitle({
+          title: `${str}详情`,
+        });
       }
     },
     // 数据处理
@@ -66,18 +72,21 @@ export default {
     },
     // 收藏
     async collectHandler(type) {
-      const res = await purchaserApi.yanxuanSpecialCollect({
-        Id: this.detailDataForm.Id,
-        Status: type,
-      });
-      if (res.Ret === 200) {
-        this.$util.toast(res.Msg);
-        this.getDetaliData();
+      await this.$store.dispatch("checkHandle");
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        const res = await purchaserApi.yanxuanSpecialCollect({
+          Id: this.detailDataForm.Id,
+          Status: type,
+        });
+        if (res.Ret === 200) {
+          this.$util.toast(res.Msg);
+          this.getDetaliData();
+        }
       }
     },
     // 去往预览文件
     goFilePages(item) {
-        wx.downloadFile({
+      wx.downloadFile({
         // 示例 url，并非真实存在
         url: item.DocUrl,
         success: function (res) {
@@ -90,16 +99,22 @@ export default {
           });
         },
       });
-      // uni.navigateTo({
-      //   url: "/pages-purchaser/filePreviewPage/filePreviewPage?url=" + item.DocUrl,
-      // });
+    },
+    goDetailPages() {
+      uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + this.detailDataForm.UserId });
     },
   },
   onLoad(options) {
     this.detailId = Number(options.id) || 0;
-    console.log(this.detailId);
     this.detailId > 0 && this.getDetaliData();
   },
+  /** 用户点击分享 */
+  onShareAppMessage: function (res) {
+    return {
+      title: (this.detailDataForm.Type == 1 ? "笔记" : "观点") + "详情",
+      path: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + this.detailId,
+    };
+  },
 };
 </script>
 
@@ -158,14 +173,17 @@ export default {
     }
     .lable-conten {
       display: flex;
+      flex-wrap: wrap;
       margin: 20rpx 0;
       font-size: 24rpx;
-      text {
+      .item {
+        display: flex;
+        align-items: center;
         height: 34rpx;
         border-radius: 44rpx;
-        padding: 3rpx 35rpx 3rpx 35rpx;
+        padding: 0 35rpx;
         background-color: #f0f1f3;
-        margin-right: 20rpx;
+        margin: 0 20rpx 20rpx 0;
       }
     }
     .collect-conten {

pages-purchaser/specialColumn/specialColumn.vue

@@ -10,16 +10,25 @@
       <view class="item-li" v-for="item in specialList" :key="item.Id" @click="goDetailPages(item)">
         <view class="item-title"> {{ item.SpecialName }}</view>
         <view class="item-name-time">
-          <view class="name"> {{ item.RealName }}</view>
-          <view class="time"> {{ item.ModifyTime }}更新</view>
+          <view class="name">
+            <image :src="item.HeadImg"></image>
+            <text> {{ item.NickName }}</text>
+          </view>
+          <view class="time"> {{ item.LatestPublishDate }}</view>
         </view>
         <view class="item-content"> 专栏介绍： {{ item.Introduction }} </view>
       </view>
     </view>
     <view class="set-up-info" v-if="tabActive == 2">
       <block v-if="(authorDetail.NickName || authorDetail.SpecialName) && isEditInfo">
-        <info-card :authorDetail="authorDetail" pagesType="专栏详情" />
-        <column-list-content :authorDetail="authorDetail" :mySpecialList="mySpecialList" />
+        <info-card :authorDetail="authorDetail" pagesType="专栏详情" @editColumnHandler="editColumnHandler" />
+        <view class="column-list-content">
+          <column-list-content :authorDetail="authorDetail" :mySpecialList="mySpecialList" @upDateCollectHandler="upDateCollectHandler" />
+        </view>
+        <view class="write-note-button">
+          <view class="draft" @click="goContentPage"> 内容中心</view>
+          <view class="release" @click="goReleaseContent"> 发布新内容</view>
+        </view>
       </block>
       <block v-else>
         <view class="info-name info-box">
@@ -28,8 +37,8 @@
             <text class="seting-txt">请设置您的专栏信息</text>
           </block>
           <text class="seting-txt" v-else>编辑专栏</text>
-          <input v-model="columnName" placeholder="请输入专栏名称" />
-          <input v-model="columnNickname" placeholder="请输入昵称" />
+          <input :maxlength="12" v-model="columnName" placeholder="请输入专栏名称" />
+          <input :maxlength="12" v-model="columnNickname" placeholder="请输入昵称" />
         </view>
         <view class="set-up-lable info-box">
           <view class="top-box">
@@ -46,16 +55,12 @@
             </view>
           </view>
         </view>
-        <view class="set-up-info info-box">
+        <view class="set-up-info info-box" style="height: 480rpx">
           <view class="lable-txt"> 专栏介绍 </view>
-          <u-input v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
+          <u-input :maxlength="30" v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
         </view>
-        <view class="my-btn" @click="infoDetermineHandler"> 进入我的专栏 </view>
+        <view class="my-btn" @click="infoDetermineHandler"> {{ isEditInfo ? "进入我的专栏" : "保存" }} </view>
       </block>
-      <view class="write-note-button">
-        <view class="draft" @click="goContentPage"> 内容中心</view>
-        <view class="release" @click="goReleaseContent"> 发布新内容</view>
-      </view>
     </view>
     <u-modal
       v-model="addlableShow"
@@ -74,6 +79,7 @@
         <input v-model="addLableName" placeholder="请输入标签名称（最多8个字）" :maxlength="8" />
       </view>
     </u-modal>
+    <Loading />
   </view>
 </template>
 
@@ -113,25 +119,24 @@ export default {
       if (!this.addLableName) return this.$util.toast("未添加标签");
       this.columnLableList.push(this.addLableName);
       this.addLableName = "";
-      console.log("confirm");
     },
     // 添加标签的取消事件
     cancelModal() {
       this.addLableName = "";
-      console.log("cancel");
     },
     // 信息填写完成 进入我的专栏
     async infoDetermineHandler() {
       if (this.columnName && this.columnNickname && this.columnIntroduce) {
         const res = await purchaserApi.yanxuanSpecialAuthorSave({
-          SpecialName: this.columnNickname,
-          NickName: this.columnName,
+          SpecialName: this.columnName,
+          NickName: this.columnNickname,
           Introduction: this.columnIntroduce,
           Label: this.columnLableList.join(","),
           UserId: this.authorDetail.UserId,
         });
         if (res.Ret === 200) {
           this.getAuthorDetail();
+          this.isEditInfo = true;
         }
       } else {
         let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
@@ -174,10 +179,34 @@ export default {
     goReleaseContent() {
       uni.navigateTo({ url: "/pages-purchaser/writeNote/writeNote" });
     },
+    // 编辑专栏
+    editColumnHandler() {
+      this.columnName = this.authorDetail.SpecialName;
+      this.columnNickname = this.authorDetail.NickName;
+      this.columnIntroduce = this.authorDetail.Introduction;
+      this.columnLableList = this.authorDetail.Label ? this.authorDetail.Label.split(",") : [];
+      this.isEditInfo = false;
+    },
+    // 更新收藏
+    upDateCollectHandler(item) {
+      this.mySpecialList.forEach((key) => {
+        if (key.Id === item.Id) {
+          key.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
+          key.IsCollect = item.IsCollect == 1 ? 0 : 1;
+        }
+      });
+    },
   },
   onLoad() {
     this.getColumnList();
   },
+  /** 用户点击分享 */
+  onShareAppMessage: function (res) {
+    return {
+      title: "研选专栏",
+      path: "/pages-purchaser/specialColumn/specialColumn",
+    };
+  },
 };
 </script>
 
@@ -194,7 +223,7 @@ export default {
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 9;
+    z-index: 99;
     margin-top: 1rpx;
     background-color: #fff;
     height: 96rpx;
@@ -228,6 +257,7 @@ export default {
       border-top: 10rpx solid #8fa4c4;
       margin-bottom: 20rpx;
       .item-title {
+        margin-top: 20rpx;
         font-size: 34rpx;
         font-weight: 500;
       }
@@ -238,6 +268,16 @@ export default {
         height: 80rpx;
         font-size: 28rpx;
         color: #999;
+        .name {
+          display: flex;
+          align-items: center;
+          image {
+            width: 48rpx;
+            height: 48rpx;
+            border-radius: 50%;
+            margin-right: 10rpx;
+          }
+        }
       }
       .item-content {
         text-overflow: -o-ellipsis-lastline;
@@ -252,6 +292,7 @@ export default {
   }
   .set-up-info {
     padding: 30rpx;
+    overflow: hidden;
     .info-name {
       width: 100%;
       padding: 40rpx;
@@ -303,6 +344,9 @@ export default {
       background-color: #fff;
       margin-bottom: 30rpx;
     }
+    .ipt {
+      height: 300rpx;
+    }
   }
   .u-input {
     margin-top: 10rpx;
@@ -354,7 +398,7 @@ export default {
   .write-note-button {
     position: fixed;
     width: 100%;
-    bottom: 50rpx;
+    bottom: 10rpx;
     left: 0rpx;
     z-index: 99;
     display: flex;
@@ -383,5 +427,8 @@ export default {
       background-color: #376cbb;
     }
   }
+  .column-list-content {
+    margin-top: 20rpx;
+  }
 }
 </style>

pages-purchaser/toExamine/toExamine.vue

@@ -4,13 +4,13 @@
     <view class="content-item">
       <view class="author-name">
         <view class="img-box">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
+          <image :src="detailDataForm.HeadImg" @click="goDetailPages"></image>
         </view>
         <text style="margin-left: 10rpx">{{ detailDataForm.NickName }}</text>
       </view>
       <view class="type-time">
-        <view class="type"> 笔 记</view>
-        <view class="time">{{ detailDataForm.NickName }}</view>
+        <view class="type"> {{ detailDataForm.Type == 1 ? "笔 记" : "观 点" }} </view>
+        <view class="time">{{ detailDataForm.PublishTime }}</view>
       </view>
       <view class="title-item"> {{ detailDataForm.Title }}</view>
       <view class="text-conten">
@@ -22,13 +22,13 @@
         </view>
       </block>
       <view class="image-conten">
-        <image v-for="key in detailDataForm.ImgUrl.split(',')" :key="key" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png" @click="previewImageMediahandler"></image>
+        <image v-for="key in dataProcessing(detailDataForm.ImgUrl)" :key="key" :src="key" @click="previewImageMediahandler(key)"></image>
       </view>
       <view class="lable-conten">
-        <text v-for="key in detailDataForm.Tags.split(',')" :key="key">{{ key }}</text>
+        <view class="item" v-for="key in dataProcessing(detailDataForm.Tags)" :key="key">{{ key }}</view>
       </view>
     </view>
-    <view class="bottom-btn">
+    <view class="bottom-btn" v-if="isShow">
       <view @click="rejectTextShow = true">驳回</view>
       <view @click="passRhrouhg">通过</view>
     </view>
@@ -49,6 +49,7 @@
         <input v-model="rejectText" placeholder="请输入驳回理由" />
       </view>
     </u-modal>
+    <Loading />
   </view>
 </template>
 
@@ -62,12 +63,13 @@ export default {
       rejectText: "",
       detailDataForm: "",
       detailId: 0,
+      isShow: false,
     };
   },
   methods: {
-    previewImageMediahandler() {
+    previewImageMediahandler(key) {
       uni.previewImage({
-        urls: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png"], //查看图片的数组
+        urls: [key], //查看图片的数组
       });
     },
     passRhrouhg() {
@@ -90,6 +92,10 @@ export default {
         },
       });
     },
+    // 数据处理
+    dataProcessing(item) {
+      return item ? item.split(",") : [];
+    },
     // 弹框关闭事件
     cancelModal() {
       this.rejectTextShow = false;
@@ -131,14 +137,13 @@ export default {
           });
         },
       });
-      // uni.navigateTo({
-      //   url: "/pages-purchaser/filePreviewPage/filePreviewPage?url=" + item.DocUrl,
-      // });
+    },
+    goDetailPages() {
+      uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + this.detailDataForm.UserId });
     },
   },
   onLoad(options) {
     this.detailId = Number(options.id) || 0;
-    console.log(this.detailId);
     this.detailId > 0 && this.getDetaliData();
   },
 };
@@ -199,14 +204,17 @@ export default {
     }
     .lable-conten {
       display: flex;
+      flex-wrap: wrap;
       margin: 20rpx 0;
       font-size: 24rpx;
-      text {
+      .item {
+        display: flex;
+        align-items: center;
         height: 34rpx;
         border-radius: 44rpx;
-        padding: 3rpx 35rpx 3rpx 35rpx;
+        padding: 0 35rpx;
         background-color: #f0f1f3;
-        margin-right: 20rpx;
+        margin: 0 20rpx 20rpx 0;
       }
     }
     .collect-conten {

pages-purchaser/writeNote/writeNote.vue

@@ -9,12 +9,18 @@
       </view>
     </view>
     <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 style="display: flex">
+        <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-button">
+        <view class="draft" @click="draftBtnHandler"> 存草稿</view>
+        <view class="release" @click="releaseBtnHandler"> 发布</view>
+      </view>
     </view>
     <view class="write-note-content">
       <view class="title-note"> <input v-model="articleTitle" placeholder="请输入标题" /></view>
-      <view class="content-note">
-        <editor id="editor" v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
+      <view class="content-note" :style="{ height: editorHeight + 'rpx' }">
+        <editor @focus="editorFocus" :adjust-position="false" id="editor" v-model="advice_content" placeholder="请输入正文（更轻松的创作，上传文档，请先登录查研观向网页版）" @input="contentChange" />
         <view class="new-lable" @click="showPopup = true">
           <view style="flex-shrink: 0">+ 标签（至少添加一个）</view>
           <view v-for="item in industryCompanyLable" :key="item" class="lable-li active">
@@ -25,11 +31,7 @@
       </view>
     </view>
     <view class="write-note-img">
-      <robbyImageUpload ref="robbyImageUpload" class="image-add-upload" v-model="fileList" :server-url="uploadUrl" :header="header" :limit="6" />
-    </view>
-    <view class="write-note-button">
-      <view class="draft" @click="draftBtnHandler"> 草稿箱</view>
-      <view class="release" @click="releaseBtnHandler"> 发布</view>
+      <robbyImageUpload v-model="fileList" :addImage="addImage" :delImage="delImage"></robbyImageUpload>
     </view>
     <van-popup :show="showPopup" position="bottom" custom-style="height: 85%;" round custom-class="lable-class-popup">
       <viwe class="add-lable-box">
@@ -39,7 +41,7 @@
         </view>
         <view class="input-box">
           <icon type="search" size="15" class="sea_ico" />
-          <input v-model="columnName" placeholder="专栏名称" @confirm="searchHandle" />
+          <input v-model="columnName" :placeholder="lableActive == 2 ? '搜索公司标签' : '搜索行业标签'" @input="searchHandle" />
           <view v-if="lableActive == 2" style="color: #376cbb" @click="addCompanyLableHandler">+ &nbsp;创建</view>
         </view>
         <view class="text-box"> 已选标签 <view class="one-lable-text"> 至少添加一个标签 </view></view>
@@ -58,7 +60,7 @@
           </block>
         </view>
         <view class="text-box"> 标签</view>
-        <view class="lable-ul">
+        <view class="lable-ul lable-ul-two">
           <!-- 这里就不用计算属性了 不知道会不会有隐藏的问题 -->
           <block v-if="lableActive == 1">
             <view :class="['lable-li']" @click="industryLabelHandler(item)" v-for="item in industryLabel" :key="item">{{ item }}</view>
@@ -73,6 +75,7 @@
         </view>
       </viwe>
     </van-popup>
+    <Loading />
   </view>
 </template>
 
@@ -111,13 +114,10 @@ export default {
       detailId: 0,
       detailDataForm: {},
       editorCtx: null,
+      editorHeight: 800,
     };
   },
-  computed: {
-    uploadUrl() {
-      return uploadurl;
-    },
-  },
+  computed: {},
   methods: {
     // 初始获取导航栏
     initNavBar() {
@@ -130,25 +130,23 @@ export default {
     },
     // 添加标签完成事件
     addCompleteHandler() {
+      this.columnName = "";
       this.industryCompanyLable = [...this.selectedLableList, ...this.companySelectedLable];
       this.showPopup = false;
-      this.$nextTick(() => {
-        this.selectedLableList = [];
-        this.companySelectedLable = [];
-      });
     },
     // 左上角的返回按钮
     goHandler() {
       let { Title, Content, ImgUrl, Tags } = this.detailDataForm;
-      if (Title && Tags && (Title != this.articleTitle || (this.advice_content != Content && this.fileList.join(",") != ImgUrl) || this.industryCompanyLable.join(",") != Tags)) {
-        this.draftBtnHandler();
+      if (Title && (Title != this.articleTitle || this.advice_content != Content || this.fileList.join(",") != ImgUrl || this.industryCompanyLable.join(",") != Tags)) {
+        this.savePromptHandler();
         return;
-      } else if (Title && Tags) {
+      } else if (Title) {
         uni.navigateBack();
         return;
       }
+
       if (this.articleTitle || this.advice_content || this.fileList > 0 || this.industryCompanyLable.length > 0) {
-        this.draftBtnHandler();
+        this.savePromptHandler();
       } else {
         uni.navigateBack();
       }
@@ -156,7 +154,8 @@ export default {
     // 创建标签公司Lable
     addCompanyLableHandler() {
       if (!this.columnName) return;
-      this.companySelectedLable.push(this.columnName);
+      if (this.companySelectedLable.includes(this.columnName.replace(/\s+/g, ""))) return;
+      this.companySelectedLable.push(this.columnName.replace(/\s+/g, ""));
     },
     // 行业公司标签的点击事件
     industryOfCompanyHanler(item) {
@@ -199,68 +198,107 @@ export default {
       }
     },
     // 草稿箱
-    draftBtnHandler() {
+    async draftBtnHandler() {
+      if (!this.articleTitle) return this.$util.toast("标题不能为空");
+      const resSave = await purchaserApi.yanxuanSpecialSave({
+        Content: this.advice_content,
+        Title: this.articleTitle,
+        Type: this.topLableActive,
+        Tags: this.industryCompanyLable.join(","),
+        ImgUrl: this.fileList.join(","),
+        DoType: 1,
+        Id: this.detailId,
+      });
+      if (resSave.Ret === 200) {
+        this.$util.toast("已保存至草稿箱");
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 300);
+      }
+    },
+    // 发布
+    releaseBtnHandler() {
+      if (!this.articleTitle || !this.advice_content || !this.industryCompanyLable.length > 0) {
+        let str = !this.articleTitle ? "请输入标题" : !this.advice_content ? "请输入内容" : "请至少添加一个标签";
+        return this.$util.toast(str);
+      }
       uni.showModal({
-        title: "是否保存当前修改",
-        content: "保存的草稿可在【内容中心】查看",
+        title: "确认发布",
+        content: "内容将提交给管理员审核后发布，确定要提交审核吗？",
         confirmColor: "#3385FF",
         cancelColor: "#606266",
-        cancelText: "不保存",
-        confirmText: "保存",
         success: async (res) => {
           if (res.confirm) {
-            const resSave = await purchaserApi.yanxuanSpecialSave({
+            const resCheck = await purchaserApi.yanxuanSpecialCheck({
               Content: this.advice_content,
-              title: this.articleTitle,
-              Type: this.topLableActive,
-              Tags: this.industryCompanyLable.join(","),
-              ImgUrl: this.$refs.robbyImageUpload.imageList.join(","),
-              DoType: 1,
-              Id: this.detailId,
+              ImgUrl: this.fileList,
             });
-            if (resSave.Ret === 200) {
-              this.$util.toast("已保存至草稿箱");
-              uni.navigateBack();
+            if (resCheck.Ret === 200) {
+              const resSave = await purchaserApi.yanxuanSpecialSave({
+                Content: this.advice_content,
+                Title: this.articleTitle,
+                Type: this.topLableActive,
+                Tags: this.industryCompanyLable.join(","),
+                ImgUrl: this.fileList.join(","),
+                DoType: 2,
+                Id: this.detailId,
+              });
+              if (resSave.Ret === 200) {
+                uni.showModal({
+                  content: "提交成功，审核结果将通过公众号消息提醒您，请留意【查研观向小助手】公众号",
+                  confirmText: "知道了",
+                  showCancel: false,
+                  confirmColor: "#3385FF",
+                  success: function (r) {
+                    if (r.confirm) {
+                      uni.navigateBack();
+                    }
+                  },
+                });
+              }
             }
           }
         },
       });
     },
-    // 发布
-    releaseBtnHandler() {
+    searchHandle() {
+      this.lableActive == 1 ? this.getIndustryList() : this.getCompanySearch();
+    },
+    savePromptHandler() {
       uni.showModal({
-        title: "确认发布",
-        content: "内容将提交给管理员审核后发布，确定要提交审核吗？",
+        title: "是否保存当前修改",
+        content: "保存的草稿可在【内容中心】查看",
         confirmColor: "#3385FF",
         cancelColor: "#606266",
+        cancelText: "不保存",
+        confirmText: "保存",
         success: async (res) => {
           if (res.confirm) {
             const resSave = await purchaserApi.yanxuanSpecialSave({
               Content: this.advice_content,
-              title: this.articleTitle,
+              Title: this.articleTitle,
               Type: this.topLableActive,
               Tags: this.industryCompanyLable.join(","),
-              ImgUrl: this.$refs.robbyImageUpload.imageList.join(","),
-              DoType: 2,
+              ImgUrl: this.fileList.join(","),
+              DoType: 1,
               Id: this.detailId,
             });
             if (resSave.Ret === 200) {
-              this.$util.toast("发布成功");
-
-              uni.navigateBack();
+              this.$util.toast("已保存至草稿箱");
+              setTimeout(() => {
+                uni.navigateBack();
+              }, 300);
             }
+          } else {
+            uni.navigateBack();
           }
         },
       });
     },
-    searchHandle() {
-      this.lableActive == 1 ? this.getIndustryList() : this.getCompanySearch();
-    },
-
     // 获取行业标签
     async getIndustryList() {
       const res = await purchaserApi.yanxuanSpecialIndustrySearch({
-        Keyword: this.columnName,
+        Keyword: this.columnName.replace(/\s+/g, ""),
       });
       if (res.Ret === 200) {
         this.industryLabel = res.Data;
@@ -270,18 +308,30 @@ export default {
     // 获取公司标签
     async getCompanySearch() {
       const res = await purchaserApi.yanxuanSpecialCompanySearch({
-        Keyword: this.columnName,
+        Keyword: this.columnName.replace(/\s+/g, ""),
       });
       if (res.Ret === 200) {
         this.companyLable = res.Data;
       }
     },
-    deleteImage(e) {
-      this.fileList = [...e.allImages];
+    delImage(done) {
+      uni.showModal({
+        content: "是否删除?",
+        success: (res) => {
+          if (res.confirm) {
+            // 执行 done() 删除
+            done();
+          }
+        },
+      });
     },
     addImage(e) {
-      // console.log(e);
-      this.fileList = [...e.allImages];
+      this.$util.upload.Single(uploadurl, (res) => {
+        let data = JSON.parse(res.data);
+        if (data.Ret === 200) {
+          this.fileList.push(data.Data.ResourceUrl);
+        }
+      });
     },
     // 获取专栏详情
     async getDetaliData() {
@@ -297,14 +347,26 @@ export default {
           this.editorCtx.setContents({
             html: this.detailDataForm.Content, //this.EditGoodsDetail.content为赋值内容。
           });
-          // this.editorCtx.insertText({
-          //   text: ,
-          // });
         }, 200);
+
         this.fileList = this.detailDataForm.ImgUrl ? this.detailDataForm.ImgUrl.split(",") : [];
-        this.industryCompanyLable = this.detailDataForm.Tags.split(",");
+
+        this.industryCompanyLable = this.detailDataForm.Tags ? this.detailDataForm.Tags.split(",") : [];
+        this.industryCompanyLable.forEach((item) => {
+          if (this.industryLabel.includes(item)) {
+            this.selectedLableList.push(item);
+          } else {
+            this.companySelectedLable.push(item);
+          }
+        });
       }
     },
+    editorFocus() {
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+    },
   },
   onLoad(options) {
     uni
@@ -325,14 +387,16 @@ export default {
 
 <style lang="scss" scope>
 .write-note {
+  padding-top: 200rpx;
+  overflow: hidden;
   .nav-bar-wrap {
-    position: sticky;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     display: flex;
     align-items: center;
-    z-index: 99;
+    z-index: 999;
     background-color: #fff;
     .content-box {
       position: relative;
@@ -368,6 +432,10 @@ export default {
       display: flex;
       align-items: center;
       border-bottom: 2rpx solid #f3f5f9;
+      input {
+        height: 100%;
+        width: 100%;
+      }
     }
     .content-note {
       width: 100%;
@@ -411,35 +479,15 @@ export default {
     }
   }
   .write-note-button {
-    position: fixed;
-    width: 100%;
-    bottom: 50rpx;
-    left: 0rpx;
-    z-index: 99;
     display: flex;
-    padding: 0 35rpx;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
     .draft {
-      margin-right: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 216rpx;
-      height: 72rpx;
-      color: #376cbb;
-      background-color: #e5efff;
-      border-radius: 9rpx;
+      padding: 8rpx 18rpx;
+      margin-right: 10rpx;
+      color: #6698e1;
     }
     .release {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 72rpx;
-      border-radius: 9rpx;
-      color: #ffff;
-      background-color: #376cbb;
+      padding: 8rpx 18rpx;
+      color: #376cbb;
     }
   }
   .lable-class-popup {
@@ -521,7 +569,6 @@ export default {
     .lable-ul {
       display: flex;
       flex-wrap: wrap;
-      max-height: 500rpx;
       overflow: hidden;
       overflow-y: auto;
       .lable-li {
@@ -539,9 +586,13 @@ export default {
         color: #fff;
       }
     }
+    .lable-ul-two {
+      height: 500rpx;
+    }
   }
   .write-note-top {
     display: flex;
+    justify-content: space-between;
     background-color: #fff;
     padding: 15rpx 35rpx;
     .write-text {
@@ -552,9 +603,14 @@ export default {
       width: 148rpx;
       height: 64rpx;
       padding: 10rpx 32rpx 10rpx 32rpx;
-      border-radius: 0rpx 6rpx 6rpx 0rpx;
       border: 1rpx solid #e7e7e7;
     }
+    view:nth-child(1) {
+      border-radius: 6rpx 0rpx 0rpx 6rpx;
+    }
+    view:nth-child(2) {
+      border-radius: 0rpx 6rpx 6rpx 0rpx;
+    }
     .act-top-lable {
       background-color: #376cbb;
       color: #fff;

pages.json

@@ -525,7 +525,7 @@
         {
           "path": "noteAndViewpoint/noteAndViewpoint",
           "style": {
-            "navigationBarTitleText": "笔记详情",
+            "navigationBarTitleText": "",
             "enablePullDownRefresh": false
           }
         },

pages/purchaser/purchaser.vue

@@ -34,8 +34,8 @@
             </text>
             <view class="purchaser-content-row-title" :style="{ marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }" @click="goDetail(item)">
               {{ item.Title }}
-              <block v-if="item.SpecialTags">
-                <text style="color: #90aeda" v-for="it in item.SpecialTags.split(',')" class="purchaser-content-row-object" :key="it">#{{ it }}</text>
+              <block v-if="item.SpecialTags" >
+                <text style="color: #90aeda" @click.stop="themeDetails(it, '月度收藏榜')" v-for="it in item.SpecialTags.split(',')" class="purchaser-content-row-object" :key="it">#{{ it }}</text>
               </block>
               <text v-for="it in item.List" class="purchaser-content-row-object" :key="it.IndustrialManagementId" @click.stop="themeDetails(it, '月度收藏榜')">#{{ it.IndustryName }}</text>
             </view>
@@ -101,7 +101,6 @@ export default {
     getBannerData() {
       //获取banner信息
       purchaserApi.getPurchaserBanner().then((res) => {
-        console.log(res);
         if (res.Ret === 200) {
           this.researchBanner = res.Data.ListB[0] || {};
           this.bannerDataList = res.Data.ListA || [];
@@ -123,7 +122,7 @@ export default {
     //去往文章详情页面
     goDetail(item) {
       if (item.IsSpecial == 1) {
-        uni.navigateTo({ url: "/pages-purchaser/specialColumn/specialColumn" });
+        uni.navigateTo({ url: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + item.ArticleId });
         return;
       }
 
@@ -132,6 +131,7 @@ export default {
     },
     //去往主题详情
     themeDetails(item, source) {
+      if (item.IsSpecial == 1) return;
       uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source });
     },
     // 跳转研选已结束活动

reportPages/authorPages/authorPages.vue

@@ -31,9 +31,7 @@
         <text style="display: inline; margin-right: 20rpx" @click="goDetail(item)">
           {{ item.Title }}
         </text>
-        <text class="item-industry" v-for="key in item.List" :key="key.IndustryName" @click="themeDetails(key)"
-          >&nbsp;&nbsp;&nbsp;#{{ key.IndustryName }}</text
-        >
+        <text class="item-industry" v-for="key in item.List" :key="key.IndustryName" @click="themeDetails(key)">&nbsp;&nbsp;&nbsp;#{{ key.IndustryName }}</text>
       </view>
       <view class="item-more">
         <text>{{ item.PublishDate }}</text>
@@ -81,6 +79,7 @@ export default {
       confirmText: "知道了",
       isCancelBtn: false,
       accounts: "",
+      authorId: 0,
     };
   },
   methods: {
@@ -164,8 +163,16 @@ export default {
     },
   },
   onLoad(options) {
+    this.authorId = options.id;
     this.departmentIdDetail(options.id);
   },
+  /** 用户点击分享 */
+  onShareAppMessage: function (res) {
+    return {
+      title: "研选作者",
+      path: "/reportPages/authorPages/authorPages?id=" + this.authorId,
+    };
+  },
 };
 </script>
 

reportPages/researchTheme/researchTheme.vue

@@ -8,12 +8,7 @@
         </text>
       </view>
       <view class="read-more">
-        <text
-          class="text-box text_oneLine"
-          @click="scrollGo(item.IndustrialSubjectId)"
-          v-for="item in themeList.ListSubject"
-          :key="item.IndustrialSubjectId"
-        >
+        <text class="text-box text_oneLine" @click="scrollGo(item.IndustrialSubjectId)" v-for="item in themeList.ListSubject" :key="item.IndustrialSubjectId">
           {{ item.SubjectName }}
         </text>
       </view>
@@ -75,6 +70,9 @@ export default {
       confirmText: "知道了",
       isCancelBtn: false,
       accounts: "",
+      themeId: 0,
+      sourceShare: "",
+      pageRouterShare: "",
     };
   },
   methods: {
@@ -166,11 +164,21 @@ export default {
   onLoad(options) {
     let source = options.source || "";
     let pageRouter = options.pageRouter || "";
+    this.themeId = options.id;
+    this.pageRouterShare = pageRouter;
+    this.sourceShare = source;
     this.researchThemeDetail(options.id, source, pageRouter);
   },
   onShow() {
     this.$store.commit("setRouterReport", "主题详情");
   },
+  /** 用户点击分享 */
+  onShareAppMessage: function (res) {
+    return {
+      title: "研选主题",
+      path: "/reportPages/authorPages/authorPages?id=" + this.authorId + "&source=" + this.sourceShare + "&pageRouter=" + this.pageRouterShare,
+    };
+  },
 };
 </script>