企微聊天 添加侧边栏、聊天窗布局优化

src/components/LemonUI/components/contact.vue

@@ -154,7 +154,7 @@ export default {
     height 20px
     font-size 12px
     border-radius 5px
-    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
+    background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
     color white
     margin-left 5px
   +e(hei)
@@ -165,7 +165,7 @@ export default {
     height 20px
     font-size 12px
     border-radius 5px
-    background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%);
+    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
     color white
     margin-left 5px
 </style>

src/components/LemonUI/components/index.vue

@@ -577,6 +577,18 @@ export default {
           </div>
         </div>,
       );
+
+      // 拓展
+      nodes.push(
+        <div
+          class={cls}
+          style="flex: unset;width: 40%;border: 1px solid #efefef"
+          v-show={this._menuIsMessages() && defIsShow && curact.id}
+        >
+          {useScopedSlot(this.$scopedSlots["message-extend"], null, curact)}
+        </div>,
+      );
+
       nodes.push(
         <div class={cls} v-show={!curact.id && this.currentIsDefSidebar}>
           {this.$slots.cover}

src/layout/index.vue

@@ -339,6 +339,7 @@ export default {
 }
 
 ::v-deep .qw-im {
+  background-color: #fff;
   z-index: 2000;
   position: fixed;
   right: 30px;
@@ -355,6 +356,7 @@ export default {
 }
 
 ::v-deep .im-dialog {
+  margin-top: unset !important;
   max-width: 100vw;
   max-height: 100vh;
   .el-dialog__header {

src/views/qw/qwChat/qq.vue

@@ -83,20 +83,20 @@
 <!--          <div @click="openDrawer('right')" style="position: absolute;right: 14px;top: 10px;">-->
 <!--            <i class="el-icon-more" style="cursor: pointer"/>-->
 <!--          </div>-->
-          <div>
-            <el-button
-              type="primary"
-              size="small"
-              style="position: absolute;right: 14px;top: 10px;z-index: 1000"
-              @click="showDetail(contact.extId)"
-            >详情</el-button>
+<!--          <div>-->
+<!--            <el-button-->
+<!--              type="primary"-->
+<!--              size="small"-->
+<!--              style="position: absolute;right: 14px;top: 10px;z-index: 1000"-->
+<!--              @click="showDetail(contact.extId)"-->
+<!--            >详情</el-button>-->
+<!--          </div>-->
+        </template>
+        <template #message-extend="contact">
+          <div v-if="contact.extId" style="width: 100%;height: 100%;overflow: auto">
+            <userDetail :ext-id="contact.extId" :extend="true" ref="userDetail" />
           </div>
         </template>
-<!--        <template #message-side="contact">-->
-<!--          <div style="width: 500px;height: 100%;background-color: #0fd547;border: 1px solid #ccc;">-->
-<!--            <userDetail ref="userDetail" />-->
-<!--          </div>-->
-<!--        </template>-->
       </lemon-imui>
     </div>
 
@@ -192,8 +192,8 @@ export default {
       roomMembers:[],
       roomAdmins:[],
       roomInfo:null,
-      windowWidth: document.documentElement.clientWidth*0.6,  //实时屏幕宽度
-      windowHeight: document.documentElement.clientHeight*0.7,   //实时屏幕高度
+      windowWidth: document.documentElement.clientWidth * 0.8,  //实时屏幕宽度
+      windowHeight: document.documentElement.clientHeight * 0.85,   //实时屏幕高度
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -960,10 +960,6 @@ export default {
   align-items: center;
   justify-content: center;
 }
-.lemon-wrapper{
-  border:1px solid #ddd;
-  //height: !important;
-}
 .lemon-drawer{
   border:1px solid #ddd;
   border-left:0;

src/views/qw/qwChat/userDetail/courseManage.vue

@@ -43,7 +43,7 @@
     </div>
 
     <!-- 列表 -->
-    <div class="infinite-list-wrapper" style="overflow:auto">
+    <div :class="extend ? 'infinite-list-wrapper-extend' : 'infinite-list-wrapper'" style="overflow:auto">
       <ul class="video-list" v-infinite-scroll="loadMoreVideo">
         <li v-for="item in videoList" :key="item.videoId" class="video-item">
           <div class="video-thumbnail">
@@ -92,6 +92,10 @@ export default {
     userId: {
       type: Number,
       default: () => null
+    },
+    extend: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -291,6 +295,13 @@ export default {
   padding: 0 10px;
   background-color: #f5f7fa;
 }
+.infinite-list-wrapper-extend {
+  height: calc(100vh - 330px);
+  overflow-y: auto;
+  padding: 0 10px;
+  background-color: #f5f7fa;
+}
+
 
 .video-list {
   list-style: none;

src/views/qw/qwChat/userDetail/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%;">
+  <div :style="{backgroundColor: '#f0f2f5', paddingBottom: !extend && '20px', minHeight: '100%'}">
     <!-- 客户详情 -->
     <div v-if="showDetail">
-      <div style="padding: 20px; background-color: #fff;">
+      <div v-if="!extend" style="padding: 20px; background-color: #fff;">
         客户详情
       </div>
       <!--  基本信息 -->
-      <el-descriptions class="detail-description" title="基本信息" :column="3" size="medium" border>
+      <el-descriptions :class="extend ? 'detail-description-extend' : 'detail-description'" title="基本信息" :column="extend ? 2 : 3" size="medium" border>
         <template slot="extra">
           <el-button size="mini" round @click="updateQwDetail">修改用户信息</el-button>
         </template>
+        <el-descriptions-item label="姓名">{{qwUserInfo.name || '未知'}}</el-descriptions-item>
         <el-descriptions-item label="性别">{{qwUserDetail.sex || '未知'}}</el-descriptions-item>
         <el-descriptions-item label="年龄">{{qwUserDetail.age || '未知'}}</el-descriptions-item>
         <el-descriptions-item label="行为习惯">{{qwUserDetail.habits || '无'}}</el-descriptions-item>
@@ -20,11 +21,11 @@
         <el-descriptions-item label="体质">{{qwUserDetail.constitution || '无'}}</el-descriptions-item>
         <el-descriptions-item label="使用药品">{{qwUserDetail.medicine || '无'}}</el-descriptions-item>
         <el-descriptions-item label="咨询产品">{{qwUserDetail.consultProduct || '无'}}</el-descriptions-item>
-        <el-descriptions-item label="是否已经购买产品">{{qwUserDetail.isBuy || '无'}}</el-descriptions-item>
+        <el-descriptions-item label="是否已购产品">{{qwUserDetail.isBuy || '无'}}</el-descriptions-item>
       </el-descriptions>
 
       <!-- 看课记录 -->
-      <div style="background-color: #FFF;margin: 10px">
+      <div :style="{backgroundColor: '#FFF',margin: !extend ? '10px' : '5px 0'}">
         <div style="padding: 10px;font-weight: bold">
           看课记录
         </div>
@@ -71,7 +72,7 @@
       </div>
 
       <!-- 购买记录 -->
-      <div style="background-color: #FFF;margin: 10px" v-if="qwUserInfo.fsUserId">
+      <div :style="{backgroundColor: '#FFF',margin: !extend ? '10px' : '5px 0'}" v-if="qwUserInfo.fsUserId">
         <div style="padding: 10px;font-weight: bold">
           用户订单
         </div>
@@ -79,7 +80,7 @@
       </div>
 
       <!-- 已看过课程 -->
-      <div style="background-color: #FFF;margin: 10px" v-if="qwUserInfo.fsUserId">
+      <div :style="{backgroundColor: '#FFF',margin: extend ? '5px 0' : '10px'}" v-if="qwUserInfo.fsUserId">
         <div style="padding: 10px;font-weight: bold">
           用户看课记录
         </div>
@@ -99,6 +100,7 @@
     <!-- 课程管理 -->
     <course-manage
       v-if="showCourseManage"
+      :extend="extend"
       :userId="qwUserInfo.id"
       @back="handleBack"
     />
@@ -114,6 +116,16 @@ import {getQwExternalContactDetails, getQwUserInfo, queryCourseWatchStatistics}
 
 export default {
   name: "userDetail",
+  props: {
+    extId: {
+      type: String,
+      default: null
+    },
+    extend: {
+      type: Boolean,
+      default: false
+    }
+  },
   components: {
     userStorerDetails,
     userCourseWatchLog,
@@ -131,7 +143,7 @@ export default {
     };
 
     return {
-      extId: null,
+      localExtId: this.extId,
       qwUserInfo: {},
       qwUserDetail: {},
       showDetail: true,
@@ -149,9 +161,21 @@ export default {
       showCourseManage: false,
     }
   },
+  created() {
+    if (this.extId) {
+      this.getDetail(this.extId)
+    }
+  },
+  watch: {
+    extId(newVal) {
+      if (newVal) {
+        this.getDetail(newVal);
+      }
+    }
+  },
   methods: {
     getDetail(extId) {
-      this.extId = extId
+      this.localExtId = extId
       this.getQwExternalContactDetails()
       this.getQwUserInfo()
       this.queryCourseWatchStatistics()
@@ -159,7 +183,7 @@ export default {
     queryCourseWatchStatistics() {
       const data = {
         type: 0,
-        qwExternalContactId: this.extId
+        qwExternalContactId: this.localExtId
       }
       queryCourseWatchStatistics(data).then(response => {
         this.courseWatch7day = response.data.data
@@ -167,7 +191,7 @@ export default {
     },
     getQwExternalContactDetails() {
       const query = {
-        qwExternalContactId: this.extId
+        qwExternalContactId: this.localExtId
       }
       getQwExternalContactDetails(query).then(response => {
         this.qwUserInfo = response.data
@@ -181,7 +205,7 @@ export default {
     },
     getQwUserInfo() {
       const query = {
-        qwExternalContactId: this.extId
+        qwExternalContactId: this.localExtId
       }
       getQwUserInfo(query).then(response => {
         this.qwUserDetail = response.moreInfo
@@ -192,7 +216,7 @@ export default {
       this.showUpdate = true
     },
     handleBack() {
-      this.getQwUserInfo()
+      this.getDetail(this.localExtId)
       this.showDetail = true
       this.showUpdate = false
       this.showCourseManage = false
@@ -301,4 +325,11 @@ export default {
   padding: 10px;
   background-color: #FFF;
 }
+.detail-description-extend {
+  padding: 10px;
+  background-color: #FFF;
+}
+::v-deep .detail-description-extend .el-descriptions__title {
+  font-size: 14px;
+}
 </style>

src/views/qw/qwChat/userDetail/userCourseWatchLog.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="apcontainer">
-    <el-tabs type="card" v-model="activeName" @tab-click="handleClickX">
-      <el-tab-pane label="全部" name="00"></el-tab-pane>
-      <el-tab-pane v-for="(item,index) in logTypeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
-    </el-tabs>
     <el-table border v-loading="loading" :data="courseWatchLogList">
       <el-table-column label="记录编号" align="center" prop="logId" />
       <el-table-column label="用户账号" align="center" prop="userName" />
-      <el-table-column label="企微客户" align="center" prop="externalUserName" v-if="queryParams.sourceType == 2"/>
       <el-table-column label="会员昵称" align="center" prop="fsNickName">
         <template slot-scope="scope">
           <div style="display: flex;white-space: nowrap">
@@ -27,21 +22,12 @@
       <el-table-column label="项目" align="center" prop="projectName" />
       <el-table-column label="课程名称" align="center" prop="courseName" />
       <el-table-column label="小节名称" align="center" prop="videoName" />
-      <el-table-column label="企微员工名称" align="center" prop="qwUserName" v-if="queryParams.sourceType == 2"/>
       <el-table-column label="记录类型" align="center" prop="logType">
         <template slot-scope="scope">
           <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
         </template>
       </el-table-column>
       <el-table-column label="播放时长" align="center" prop="duration" />
-      <el-table-column label="所属销售" align="center" prop="companyUserName" />
-      <el-table-column label="所属公司" align="center" prop="companyName" />
-      <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
-      <el-table-column label="所属发送方式" align="center" prop="sendType">
-        <template slot-scope="scope">
-          <dict-tag :options="sendTypeOptions" :value="scope.row.sendType"/>
-        </template>
-      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" />
       <el-table-column label="更新时间" align="center" prop="updateTime" />
       <el-table-column label="完课时间" align="center" prop="finishTime" />
@@ -61,26 +47,13 @@
 
 <script>
 import { listCourseWatchLog } from "@/api/course/courseWatchLog";
+import {mapState} from "vuex";
 export default {
   name: "CourseWatchLog",
   data() {
-    const sendTypeOptions = [
-      {
-        dictLabel: "个微",
-        dictValue: "1",
-        listClass: ''
-      },
-      {
-        dictLabel: "企微",
-        dictValue: "2",
-        listClass: ''
-      },
-    ];
     return {
       activeName:"00",
       logTypeOptions:[],
-      // 发送方式
-      sendTypeOptions: sendTypeOptions,
       // 遮罩层
       loading: true,
       // 总条数
@@ -91,30 +64,28 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        companyUserId: null,
         userId: null,
         logType: null,
       },
     };
   },
+  computed: {
+    ...mapState({
+      companyUserId: state => state.user.user.userId,
+    })
+  },
   created() {
     this.getDicts("sys_course_watch_log_type").then(response => {
       this.logTypeOptions = response.data;
     });
+    this.queryParams.companyUserId = this.companyUserId
   },
   methods: {
     getUserWatchLog(id) {
       this.queryParams.userId = id
       this.getList()
     },
-    handleClickX(tab,event){
-      this.activeName=tab.name;
-      if(tab.name=="00"){
-        this.queryParams.logType=null;
-      }else{
-        this.queryParams.logType=tab.name;
-      }
-      this.getList()
-    },
     /** 查询短链课程看课记录列表 */
     getList() {
       this.loading = true;

src/views/qw/qwChat/userDetail/userInfoEdit.vue

@@ -11,11 +11,6 @@
     </div>
     <!-- 表单内容 -->
     <div class="user-form">
-      <div class="form-row">
-        <div class="form-label">姓名</div>
-        <div class="form-input">
-        </div>
-      </div>
       <div class="form-row">
         <div class="form-label">性别</div>
         <div class="form-input">
@@ -127,11 +122,11 @@
         </div>
       </div>
       <div class="form-row">
-        <div class="form-label">是否已经购买产品</div>
+        <div class="form-label">是否已购产品</div>
         <div class="form-input">
           <input
             v-model="formData.isBuy"
-            placeholder="请输入是否已经购买产品"
+            placeholder="请输入是否已购产品"
             class="input"
             type="text"
           />

src/views/qw/qwChat/userDetail/userStorerDetails.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="aacontainer">
-    <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
-      <el-tab-pane label="全部订单" name="10"></el-tab-pane>
-      <el-tab-pane v-for="(item,index) in orderOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
-    </el-tabs>
     <el-table v-loading="loading" :data="orderList" border>
       <el-table-column label="订单号" align="center" prop="orderCode" width="180px"/>
       <el-table-column label="所属店铺" align="center" prop="storeName" width="180px"/>
@@ -49,14 +45,18 @@
       </el-table-column>
       <el-table-column label="处方编号" align="center" prop="prescribeCode" width="170px"/>
       <el-table-column label="发货时间" align="center" prop="deliveryTime" />
-      <el-table-column label="推广佣金" align="center" prop="tuiMoney" />
-      <el-table-column label="推广佣金状态" align="center" prop="tuiMoneyStatus" >
-        <template slot-scope="scope">
-              <dict-tag :options="tuiOptions" :value="scope.row.tuiMoneyStatus"/>
-         </template>
-      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime"  width="150px"/>
       <el-table-column label="修改时间" align="center" prop="updateTime"  width="150px"/>
+      <el-table-column label="操作" fixed="right" width="100px" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDetails(scope.row)"
+            v-hasPermi="['store:storeOrder:query']"
+          >查看</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -66,20 +66,23 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-drawer
+      size="75%"
+      :title="show.title" :visible.sync="show.open"
+    >
+      <product-order  ref="order" />
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import {
-  listStoreOrder,
-  getStoreOrder,
-  delStoreOrder,
-  addStoreOrder,
-  updateStoreOrder,
-  exportStoreOrder,
-} from "@/api/store/storeOrder";
+import {listStoreOrder} from "@/api/store/storeOrder";
+import productOrder from "@/views/store/components/productOrder.vue";
+import {mapState} from "vuex";
 export default {
   name: "userInquir",
+  components: {productOrder},
   props:["data"],
   data() {
     return {
@@ -94,6 +97,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        companyUserId: null,
         userId: null,
         status: null,
       },
@@ -102,10 +106,18 @@ export default {
        payStatusOptions:[],
        refundOptions:[],
        orderTypeOptions:[],
-       tuiOptions:[],
        orOptions:[],
+      show: {
+        title: "订单详情",
+        open: false
+      }
     };
   },
+  computed: {
+    ...mapState({
+      companyUserId: state => state.user.user.userId,
+    })
+  },
   created() {
     this.getDicts("sys_inquiry_pay").then(response => {
         this.PayOptions = response.data;
@@ -122,12 +134,10 @@ export default {
     this.getDicts("sys_refund_status").then(response => {
         this.refundOptions = response.data;
       });
-    this.getDicts("sys_tui_money_status").then(response => {
-          this.tuiOptions = response.data;
-        });
     this.getDicts("sys_company_or").then(response => {
           this.orOptions = response.data;
         });
+    this.queryParams.companyUserId = this.companyUserId
   },
   methods: {
     getUserDetails(id) {
@@ -144,13 +154,12 @@ export default {
       });
 
     },
-    handleClickX(tab, event) {
-      if (tab.name == "10") {
-        this.queryParams.status = null;
-      } else {
-        this.queryParams.status = tab.name;
-      }
-      this.handleQuery();
+    handleDetails(row){
+      this.show.open=true;
+      const orderId = row.id ;
+      setTimeout(() => {
+        this.$refs.order.getOrder(orderId);
+      }, 500);
     },
   }
 };