Merge branch 'feature/act-code' of http://git.gicdev.com/office/haoban-3 into feature/act-code

src/api/api.js

@@ -116,6 +116,26 @@ export const getRequest = (url, params) => {
   });
 };
 
+/*
+ *
+ * 统一 delete 请求方法
+ * @url: 请求的 url
+ * @params: 请求带的参数
+ * @header: 带 token
+ *
+ */
+export const deleteRequest = (url, params) => {
+  params.requestProject = 'haoban-manage-web';
+  return Vue.axios({
+    method: 'delete',
+    url: `${local}${url}`,
+    data: {},
+    params: params,
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded'
+    } // "token": token
+  });
+};
 /**
  *
  * 统一 post 请求方法

src/components/layout/index.vue

@@ -4,7 +4,7 @@
     <aside-menu v-show="showAside" :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
     <div class="hb-layout-content" :style="{ width: showAside ? 'calc(100% - 206px)' : '100%' }">
       <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
-      <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
+      <div class="hb-layout-pager" id="hb-layout-pager-one" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
         <!-- 页面内容 -->
         <!-- <router-view v-if="activeBrand" :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view> -->
         <keep-alive>

src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue

 <template>
-  <div class="app-detail-wrap p-20">
-    <!-- <div class="p-20"></div> -->
+  <div class="app-detail-wrap p-20" v-loading="loading">
     <div class="flex p-b-40">
-      <img v-if="!singleCode" class="img-200" src="../../../../assets/data/time.png" />
-      <div class="text-ellipsis-white" :style="singleCode ? 'width:100%;' : 'width: calc(100% - 230px);'">
+      <el-image v-if="codeInfo.hmType == 2" class="img-200" :src="codeInfo.wxQrcode" />
+      <div class="text-ellipsis-white color-303133" :style="codeInfo.hmType == 1 ? 'width:100%;' : 'width: calc(100% - 230px);'">
         <div class="p-t-12 flex">
-          <div class="font-16 line-22 text-ellipsis-white height-22 font-w-500">活码名称活码名称活码名称活999</div>
-          <el-tag effect="dark" type="success" style="margin-left: 8px;">正常</el-tag>
+          <div class="font-16 line-22 text-ellipsis-white height-22 font-w-500">{{ codeInfo.name }}</div>
+          <el-tag effect="dark" :type="codeStatusLis[statusIndex].style" style="margin-left: 8px;">{{ codeStatusLis[statusIndex].value }}</el-tag>
           <!-- 正常success/正常到上限warning/待生效info/已作废danger -->
         </div>
-        <p class="font-14 m-t-10">ID：HM345675432456780</p>
+        <p class="font-14 m-t-10 ">ID：{{ codeInfo.hmId }}</p>
         <div class="flex font-14" style="padding-top:20px;">
           <div class="flex flex-1">
-            <div class="font-14 line-22">类 型：</div>
-            <el-tag>{{ singleCode ? '单人活码' : '多人活码' }}</el-tag>
+            <div class="font-14 line-22">
+              类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：
+            </div>
+            <el-tag>{{ codeInfo.hmType == 1 ? '单人活码' : '多人活码' }}</el-tag>
           </div>
-          <div class="font-14 line-22 flex-1">创建人：达摩管理员</div>
-          <div class="font-14 line-22 flex-1">创建时间：2022-05-23 11:30:08</div>
+          <div class="font-14 line-22 flex-1">创建人：{{ codeInfo.creatorName || '--' }}</div>
+          <div class="font-14 line-22 flex-1">创建时间：{{ codeInfo.createTime | formatTimeStamp }}</div>
         </div>
         <div class="flex font-14" style="padding-top:15px;">
           <div class="font-14 line-22 flex-1">所属分组：分组名称</div>
           <div class="flex flex-1">
             <div class="font-14 line-22">自动通过好友：</div>
-            <!-- 已开启/已关闭danger -->
-            <el-tag>已开启</el-tag>
+            <el-tag :type="codeInfo.passFlag == 1 ? '' : 'danger'">{{ codeInfo.passFlag == 1 ? '已开启' : '已关闭' }}</el-tag>
           </div>
           <div class="flex flex-1">
             <div class="font-14 line-22">活码标签：</div>
             <el-tag type="info">标签名称</el-tag>
           </div>
         </div>
-        <div v-if="codeStatus != 5" class="flex" style="padding-top:20px;">
-          <el-button v-if="!singleCode && codeStatus == 1" icon="el-icon-download" type="primary" style="width:120px;margin-right: 12px;" @click="downloadQR">下载二维码</el-button>
+        <div v-if="codeInfo.statusFlag != 2" class="flex" style="padding-top:20px;">
+          <el-button v-if="codeInfo.hmType == 2 && codeInfo.statusFlag == 1" icon="el-icon-download" type="primary" style="width:120px;margin-right: 12px;" @click="downloadQR">下载二维码</el-button>
           <el-button type="primary" plain style="width:98px;" @click="modifyCode">修改</el-button>
           <el-button type="danger" plain style="width:98px;margin-left: 20px; border-color: #F5222D;" @click="discardCode">作废</el-button>
         </div>
       </div>
     </div>
+    <div class="fixed-tab" v-if="scrollTop > 300">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="详情信息" name="first"> <div></div> </el-tab-pane>
+        <el-tab-pane label="数据统计" name="second">
+          <div></div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
     <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="详情信息" name="first">
-        <act-code-detail-info :brand-id="brandId"></act-code-detail-info>
+        <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId"></act-code-detail-info>
       </el-tab-pane>
       <el-tab-pane label="数据统计" name="second">
-        <act-code-detail-statistics :brand-id="brandId"></act-code-detail-statistics>
+        <act-code-detail-statistics></act-code-detail-statistics>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -50,26 +58,119 @@
 <script>
 import actCodeDetailInfo from './actCodeDetailInfo.vue';
 import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
+import { _throttle } from '@/common/js/public';
+// import { getRequest } from '@/api/api';
+import errMsg from '@/common/js/error';
 export default {
   name: 'actCodeDetail',
   components: { actCodeDetailInfo, actCodeDetailStatistics },
   props: {
-    brandId: {
+    actCode: {
       type: String,
       default: ''
     }
   },
   data() {
     return {
-      activeName: 'second',
-      singleCode: false,
-      codeStatus: 1 // 1为正常 5为已作废
+      codeInfo: {},
+      loading: false,
+      activeName: 'first',
+      codeStatusLis: [
+        { value: '', style: '' },
+        { value: '正常', style: 'success' },
+        { value: '已作废', style: 'danger' },
+        { value: '待生效', style: 'info' },
+        { value: '正常-今日已达上限', style: 'warning' }
+      ],
+      statusIndex: 1,
+      scrollTop: 0,
+      scrollStyle: 'position:fixed;top:80px;z-index:1;padding-bottom:0;height:40px;background:yellow;'
     };
   },
   methods: {
-    // downloadQR() {},
-    // modifyCode() {},
-    // discardCode() {}
+    downloadQR() {
+      window.open(this.codeInfo.wxQrcode);
+    },
+    modifyCode() {
+      // this.$router.push(`/addActCode?actCodeData=`);
+    },
+    discardCode() {
+      // const that = this;
+      // that.loading = true;
+      // deleteRequest('/hm/qrcode/del', { hmId: that.actCode })
+      //   .then(res => {
+      //     let resData = res.data;
+      //     that.loading = false;
+      //     if (resData.errorCode == 1) {
+      //       that.getActCodeInfo();
+      //       return;
+      //     }
+      //     errMsg.errorMsg(resData);
+      //   })
+      //   .cash(function(error) {
+      //     that.$message.error({
+      //       duration: 1000,
+      //       message: error.message
+      //     });
+      //   });
+    },
+    async getActCodeInfo() {
+      const that = this;
+      that.actCode = '999';
+      if (that.actCode.length <= 0) return;
+      that.loading = true;
+      // getRequest('/hm/qrcode/detail', { hmId: that.actCode })
+      //   .then(res => {
+      let res = {
+        data: {
+          errorCode: 1,
+          result: {
+            name: '测试活码好的可以',
+            hmId: '727363646474849483332',
+            statusFlag: 1,
+            overFlag: 1,
+            hmType: 2,
+            creatorName: '少见多怪',
+            createTime: 182736347383,
+            passFlag: 0,
+            welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
+            enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3',
+            wxQrcode: ''
+          }
+        }
+      };
+      let resData = res.data;
+      that.loading = false;
+      if (resData.errorCode == 1) {
+        that.statusIndex = resData.result.statusFlag == 1 && resData.result.overFlag == 1 ? 4 : resData.result.statusFlag;
+        that.codeInfo = resData.result;
+        return;
+      }
+      errMsg.errorMsg(resData);
+      // })
+      // .catch(function(error) {
+      //   that.$message.error({
+      //     duration: 1000,
+      //     message: error.message
+      //   });
+      // });
+    },
+    scrollMethod: _throttle(function() {
+      this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
+    }, 100)
+    // scrollMethod(res) { // 节流不自然
+    //   // console.log(document.getElementById('hb-layout-pager-one').scrollTop);
+    //   // if (this.scrollTop > 280) return;
+    //   this.scrollTop = document.getElementById('hb-layout-pager-one').scrollTop;
+    // }
+  },
+  mounted() {
+    let that = this;
+    that.getActCodeInfo();
+    document.getElementById('hb-layout-pager-one').addEventListener('scroll', that.scrollMethod);
+  },
+  destroyed() {
+    document.getElementById('hb-layout-pager-one').removeEventListener('scroll', this.scrollMethod);
   }
 };
 </script>
@@ -98,4 +199,13 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.fixed-tab {
+  position: fixed;
+  top: 75px;
+  z-index: 1;
+  padding-bottom: 0;
+  height: 40px;
+  background: white;
+  width: 100%;
+}
 </style>

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailInfo.vue

 <template>
   <div class="app-detail-wrap">
-    <div v-if="welcomeSpeech">
+    <div v-if="welcomeData" style="padding-bottom: 40px;">
       <div class="title flex">
         <div class="blue-block"></div>
-        <span class="font-w-500">欢迎语</span>
+        <span class="font-w-500 color-303133">欢迎语</span>
+        <span class="font-w-500 color-303133 font-14" style="padding-left:780px;">欢迎语预览</span>
+      </div>
+      <div class="flex">
+        <div class="welcome-left-view">
+          <div class="flex line-20 font-14 color-303133">
+            <div style="width: 84px;">欢迎语标题：</div>
+            <div style="width: 555px;">{{ welcomeData.title }}</div>
+          </div>
+          <div class="flex p-t-20 line-20 font-14 color-303133">
+            <div style="width: 84px;">欢迎语内容：</div>
+            <div style="width: 555px;">{{ welcomeData.welcomeContent }}</div>
+          </div>
+          <div class="link-file-view">
+            <div class="flexBoxContainer" v-for="(item, index) in welcomeData.welcomeMediaList" :key="index">
+              <div class="flexBox">
+                <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
+                <span class="popverText color-606266">
+                  {{ item.mediaTitle }}
+                  <span v-if="item.mediaType == 5">({{ item.miniProgramPage }})</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <preview-welcome :welcomeContent="welcomeData.welcomeContent" :mediaList="welcomeData.welcomeMediaList"></preview-welcome>
       </div>
     </div>
     <div>
       <div class="title flex">
         <div class="blue-block"></div>
-        <span class="font-w-500">使用成员</span>
+        <span class="font-w-500 color-303133">使用成员</span>
       </div>
       <el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark">
         <el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px">
@@ -43,10 +68,19 @@
   </div>
 </template>
 <script>
+import previewWelcome from '@/components/preview-welcome.vue';
+import { getRequest } from '@/api/api';
 export default {
   name: 'act-code-detail-info',
+  components: { previewWelcome },
   props: {
-    brandId: {
+    enterpriseId: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    welcomeId: {
       type: String,
       default() {
         return '';
@@ -55,8 +89,17 @@ export default {
   },
   data() {
     return {
-      welcomeSpeech: true,
-      useMemberData: [{ cardName: '电话电话电话' }],
+      welcomeData: null,
+      iconType: {
+        1: 'iconwenjianleixingtupian',
+        2: 'iconwenjianleixingshipin',
+        3: 'iconwenjianleixing-wenjian',
+        4: 'iconwenjianleixing-lianjie',
+        5: 'iconwenjianleixing-xiaochengxu', // 小程序
+        6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
+        7: 'icongongzhonghao1' // 带参公众号
+      },
+      useMemberData: [{ cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }, { cardName: '电话电话电话' }],
       loading: false,
       currentPage: 1,
       pageSize: 20,
@@ -84,12 +127,32 @@ export default {
       that.currentPage = val;
       that.getUseTableList();
     },
-
+    getwelcomeInfo() {
+      let that = this;
+      let para = {
+        welcomeId: this.welcomeId,
+        enterpriseId: this.enterpriseId || ''
+      };
+      getRequest('/haoban-manage3-web/welcome/get', para)
+        .then(res => {
+          let resData = res.data;
+          // that.loading = false;
+          if (resData.code == 0 && resData.result) {
+            that.welcomeData = resData.result;
+          }
+        })
+        .catch(error => {
+          // that.loading = false;
+          this.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
     getUseTableList() {
       const that = this;
       that.loading = true;
       let para = {
-        // gicEnterpriseId: that.brandId,
         pageNum: that.currentPage, // 当前页
         pageSize: that.pageSize // 一页显示个数
       };
@@ -117,8 +180,15 @@ export default {
   },
   mounted() {
     let that = this;
-    // 判断brandId
     that.getUseTableList();
+  },
+  watch: {
+    welcomeId: function(newData, oldData) {
+      const that = this;
+      if (newData.length <= 0) return;
+      that.welcomeId = newData || '';
+      that.getwelcomeInfo();
+    }
   }
 };
 </script>
@@ -133,4 +203,36 @@ export default {
   line-height: 30px;
   padding-bottom: 16px;
 }
+.line-20 {
+  line-height: 20px;
+}
+.welcome-left-view {
+  width: 639px;
+  // margin-right: 120px;
+}
+.link-file-view {
+  margin: 12px 0 0 84px;
+  background: #f7f8fa;
+  border-radius: 2px;
+  padding: 14px 20px;
+  .flexBox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 13px;
+    .popverText {
+      font-size: 12px;
+      line-height: 16px;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .flexBoxContainer:last-child {
+    .flexBox {
+      margin-bottom: 0;
+    }
+  }
+}
 </style>

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue

@@ -5,11 +5,11 @@
       <div class="flex justify-between title">
         <div class="flex">
           <div class="blue-block"></div>
-          <span class="font-w-500">概览</span>
+          <span class="font-w-500 color-303133">概览</span>
         </div>
         <div class="flex">
           <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
-          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+          <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
         </div>
       </div>
       <ul class="flex">
@@ -44,19 +44,17 @@
           <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
         </div>
       </div>
-      <!-- <member-chart key="member_added_box" :charData="memberchartData" id="member_added_box" name="新增会员" v-if="memberChartType === 1"></member-chart> -->
-
       <new-add-chart :charData="charData" id="new-add-chart"></new-add-chart>
     </div>
     <div>
       <div class="flex justify-between title">
         <div class="flex">
           <div class="blue-block"></div>
-          <span class="font-w-500">查看明细</span>
+          <span class="font-w-500 color-303133">查看明细</span>
         </div>
         <div class="flex">
           <i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
-          <div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
+          <div class="color-1890ff font-14 p-l-6" @click="explain('http://baidu.com')">指标说明</div>
         </div>
       </div>
       <data-detail :id="actCode"></data-detail>
@@ -71,12 +69,6 @@ export default {
   name: 'act-code-detail-statistics',
   components: { dataDetail, newAddChart },
   props: {
-    brandId: {
-      type: String,
-      default() {
-        return '';
-      }
-    },
     actCode: {
       type: String,
       default() {
@@ -86,7 +78,6 @@ export default {
   },
   data() {
     return {
-      welcomeSpeech: false,
       useMemberData: [{ cardName: '电话电话电话' }],
       loading: false,
       dateKey: 0,
@@ -134,14 +125,13 @@ export default {
     };
   },
   methods: {
-    explain() {
-      console.log(11);
+    explain(url) {
+      window.open(url);
     },
     getUseTableList() {
       const that = this;
       that.loading = true;
       let para = {
-        // gicEnterpriseId: that.brandId,
         pageNum: that.currentPage, // 当前页
         pageSize: that.pageSize // 一页显示个数
       };
@@ -231,7 +221,6 @@ export default {
   },
   mounted() {
     let that = this;
-    // 判断brandId
     // 默认显示近七天
     that.btnChange(0);
     that.getUseTableList();