Signed-off-by: 李妹妹 <1639016684@qq.com>

src/views/live/live/index.vue

@@ -139,10 +139,10 @@
       </el-table-column>
       <el-table-column label="直播状态" align="center" prop="status">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.status == 1">待直播</el-tag>
-          <el-tag v-if="scope.row.status == 2">直播中</el-tag>
-          <el-tag v-if="scope.row.status == 3">已结束</el-tag>
-          <el-tag v-if="scope.row.status == 4">直播回放中</el-tag>
+          <el-tag type="warning" v-if="scope.row.status == 1">待直播</el-tag>
+          <el-tag style="color:#3491FA;background-color:#E8F7FF;border-color: #E8F7FF;" v-if="scope.row.status == 2">直播中</el-tag>
+          <el-tag type="info" v-if="scope.row.status == 3">已结束</el-tag>
+          <el-tag style="color:#9B6DDA;background-color:#F5E8FF;border-color: #F5E8FF;" v-if="scope.row.status == 4">直播回放中</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="公司名称" align="center" prop="companyName" >
@@ -162,8 +162,8 @@
       <el-table-column label="结束时间" align="center" prop="finishTime" width="180" />
       <el-table-column label="上下架" align="center" prop="isShow">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.isShow == 1">上架</el-tag>
-          <el-tag type="danger" v-if="scope.row.isShow == 2">下架</el-tag>
+         <el-tag v-if="scope.row.isShow == 1">上架</el-tag>
+         <el-tag type="info" v-if="scope.row.isShow == 2">下架</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="审核状态" align="center" prop="isAudit">

src/views/live/liveAfteraSales/index.vue

@@ -79,7 +79,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="物流状态" prop="deliveryStatus">
+ <!--     <el-form-item label="物流状态" prop="deliveryStatus">
         <el-select   v-model="queryParams.deliveryStatus" placeholder="请选择物流状态" clearable size="small" >
           <el-option
             v-for="item in deliveryStatusOptions"
@@ -97,9 +97,49 @@
           clearable
           size="small"
           @keyup.enter.native="handleQuery"/>
-      </el-form-item>
+      </el-form-item> -->
 
+<el-form-item style="margin-left: 20px;">
+             <el-button type="text"  :icon="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"  @click="upDown">{{ isCollapsed ? '展开' : '收起' }} </el-button>
+             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+           </el-form-item>
+     <div v-if="!isCollapsed">
+<el-form-item label="客户退回" prop="searchKey">
+  <div class="filter-combobox">
+    <el-select
+        slot="prepend"
+        v-model="searchType"
+        placeholder="请选择"
+        clearable
+        @change="handleTypeChange"
+        style="width: 105px"
+      >
+        <el-option label="物流状态" value="deliveryStatus" />
+        <el-option label="物流单号" value="deliverySn" />
+      </el-select>
+      <el-select v-if="searchType=='deliveryStatus'"  style="flex: 1;"
+      v-model="queryParams.deliveryStatus" placeholder="请选择物流状态" clearable size="small" >
+          <el-option
+            v-for="item in deliveryStatusOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+            />
+        </el-select>
+      <el-input
+      v-if="searchType=='deliverySn'|| searchType==''"  style="flex: 1;"
+        v-model.trim="searchKey"
+        :placeholder="searchType=='deliverySn'?'物流/退回物流单号':''"
+        clearable
+        size="small"
+        @keyup.enter.native="handleQuery"
+        @clear="handleQuery"
+      >
+      </el-input>
 
+    </div>
+</el-form-item>
       <el-form-item label="提交时间" prop="createTime">
         <el-date-picker
           style="width:205.4px"
@@ -111,10 +151,7 @@
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>
-      <el-form-item>
-        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+      </div>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -216,6 +253,9 @@ export default {
   components: {productAfterSalesOrder, Treeselect},
   data() {
     return {
+      searchType:'',
+      searchKey:'',
+      isCollapsed:false,
       dateRange:[],
       // 遮罩层
       loading: true,
@@ -312,6 +352,7 @@ export default {
         this.liveAfterSalesList = response.rows;
         this.total = response.total;
         this.loading = false;
+         delete this.queryParams[this.searchType];
       });
     },
     // 取消按钮
@@ -349,16 +390,28 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
+   upDown() {
+        this.isCollapsed = !this.isCollapsed;
+      },
+   handleTypeChange(newType){
+     this.searchKey='';
+     this.searchType=newType
+   },
+   /** 搜索按钮操作 */
+   handleQuery() {
+     if(this.searchKey!=='' && this.searchType=='deliverySn'){
+      this.queryParams[this.searchType]=this.searchKey
+     }
+     this.queryParams.pageNum = 1;
+     this.getList();
+   },
+   /** 重置按钮操作 */
+   resetQuery() {
+     this.searchKey= '';
+     this.queryParams[this.searchType]=null;
+     this.resetForm("queryForm");
+     this.handleQuery();
+   },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
@@ -455,3 +508,25 @@ export default {
   }
 };
 </script>
+<style scoped>
+ .filter-combobox {
+   display: flex;
+   align-items: flex-start;
+   width: 100%;
+ }
+ .filter-combobox ::v-deep .el-input--medium .el-input__inner{
+   height: 32px !important;
+   line-height: 32px;
+}
+.filter-combobox ::v-deep.el-input__icon{
+   height: 32px !important;
+line-height: 32px;
+}
+::v-deep .vue-treeselect__control{
+  height: 30px !important;
+  line-height: 30px;
+}
+::v-deep .vue-treeselect__placeholder{
+  line-height: 32px;
+}
+</style>

src/views/live/liveConfig/index.vue

@@ -33,11 +33,20 @@
 
           <div class="live-info-state">
             <div class="info-state-text live-time">直播时间：{{ liveInfo.startTime }} 至 {{ liveInfo.finishTime }}</div>
-            <div class="line"></div>
-            <div class="info-state-text live-state">{{ liveInfo.status == 3 ? '已结束' : liveInfo.status == 2 ? '直播中' : '未开始'}}</div>
-            <div class="line"></div>
-            <div class="info-state-text live-active-state">{{ liveInfo.isShow == 1 ? '上架' : '下架' }}</div>
-            <div class="line"></div>
+          </div>
+          <div class="live-info-state">
+            <!-- <div class="info-state-text live-state">
+            {{ liveInfo.status == 3 ? '已结束' : liveInfo.status == 2 ? '直播中' : '未开始'}}
+            </div> -->
+            <el-tag type="warning" v-if="liveInfo.status == 1">待直播</el-tag>
+            <el-tag style="color:#3491FA;background-color:#E8F7FF;border-color: #E8F7FF;" v-if="liveInfo.status == 2">直播中</el-tag>
+            <el-tag type="info" v-if="liveInfo.status == 3">已结束</el-tag>
+            <el-tag style="color:#9B6DDA;background-color:#F5E8FF;border-color: #F5E8FF;" v-if="liveInfo.status == 4">直播回放中</el-tag>
+            <div class="info-state-text live-active-state" style="margin-left: 5px;">
+            <el-tag v-if="liveInfo.isShow == 1">上架</el-tag>
+            <el-tag type="info" v-if="liveInfo.isShow == 2">下架</el-tag>
+            </div>
+
           </div>
         </div>
       </div>
@@ -46,8 +55,9 @@
       <div class="container">
       <!-- 左边菜单 -->
         <div class="left-menu">
-          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
-            <el-menu-item :index="item.index" v-for="item in menuList">
+          <el-menu default-active="watchReward" class="el-menu-vertical-demo" @select="handleSelect">
+            <el-menu-item :index="item.index" v-for="item in menuList" >
+              <i :class="item.icon"></i>
               <span>{{item.name}}</span>
             </el-menu-item>
           </el-menu>
@@ -100,17 +110,29 @@ export default {
       liveInfo: {},
       currentComponent: WatchReward,
       menuList:[
-        { name: '观看奖励', label: '观看奖励', index: 'watchReward'},
-        { name: '直播预告', label: '直播预告', index: 'preview'},
-        { name: '红包配置', label: '红包配置', index: 'liveRedConf'},
-        { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf'},
-        { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon'},
+        // { name: '观看奖励', label: '观看奖励', index: 'watchReward'},
+        // { name: '直播预告', label: '直播预告', index: 'preview'},
+        // { name: '红包配置', label: '红包配置', index: 'liveRedConf'},
+        // { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf'},
+        // { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon'},
+        // // { name: '答题', label: '答题', index: 'answer'},
+        // { name: '直播商品', label: '直播商品', index: 'goods'},
+        // { name: '回放设置', label: '回放设置', index: 'liveReplay'},
+        // { name: '运营自动化', label: '运营自动化', index: 'task'},
+        // { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage'},
+        // { name: '身份认证', label: '身份认证', index: 'idCard'},
+        { name: '观看奖励', label: '观看奖励', index: 'watchReward',icon:'el-icon-coin'},
+        { name: '直播预告', label: '直播预告', index: 'preview',icon:'el-icon-video-play'},
+        { name: '红包配置', label: '红包配置', index: 'liveRedConf',icon:'el-icon-money'},
+        { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf',icon:'el-icon-present'},
+        { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon',icon:'el-icon-discount'},
         // { name: '答题', label: '答题', index: 'answer'},
-        { name: '直播商品', label: '直播商品', index: 'goods'},
-        { name: '回放设置', label: '回放设置', index: 'liveReplay'},
-        { name: '运营自动化', label: '运营自动化', index: 'task'},
-        { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage'},
-        { name: '身份认证', label: '身份认证', index: 'idCard'},
+        { name: '直播商品', label: '直播商品', index: 'goods',icon:'el-icon-shopping-bag-2'},
+        { name: '回放设置', label: '回放设置', index: 'liveReplay',icon:'el-icon-set-up'},
+        // { name: '观看积分', label: '观看积分', index: 'watchScore'},
+        { name: '运营自动化', label: '运营自动化', index: 'task',icon:'el-icon-coordinate'},
+        { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage',icon:'el-icon-chat-dot-round'},
+        { name: '身份认证', label: '身份认证', index: 'idCard',icon:'el-icon-postcard'},
       ],
 
     }
@@ -181,6 +203,7 @@ export default {
   display: flex;
   align-items: center;
   margin-top: 10px;
+  color: #999999;
 }
 
 .live-info-desc .line {
@@ -215,7 +238,7 @@ export default {
 
 .info-state-text {
   font-size: 14px;
-  color: #606266;
+  color: #999999;
 }
 
 .operation-wrapper {
@@ -252,7 +275,13 @@ export default {
   border-right: 1px solid #e4e7ed;
   flex-shrink: 0; /* 不收缩 */
 }
-
+.el-menu-item{
+  margin-right: 20px;
+}
+.el-menu-item.is-active,.el-menu-item:hover{
+  background-color: rgba(19,194,194,0.1);
+  border-radius: 8px 8px 8px 8px;
+}
 .right-info {
   flex: 1;
   padding: 20px;

src/views/live/liveConfig/watchReward.vue

@@ -326,8 +326,8 @@ export default {
 
 /* 开关容器样式 */
 .reward-switch {
-  margin-left: 200px;
-  margin-bottom: 20px;
+  /* margin-left: 200px;
+  margin-bottom: 20px; */
   padding: 20px;
   background-color: #fff;
   border-radius: 4px;

src/views/live/liveConsole/index.vue

@@ -4,58 +4,64 @@
     <!-- 聊天 start -->
     <el-col class="live-console-col" :span="6">
       <el-tabs class="live-console-tab-left" v-model="tabRight.activeName" @tab-click="handleClick" :stretch="true">
-        <el-tab-pane label="讨论" name="talk">
-          <el-scrollbar style="height: 500px; width: 100%;" ref="manageRightRef">
-            <el-row v-for="m in msgList" >
-              <el-row v-if="m.userId !== userId" style="margin-top: 5px" type="flex" align="top" >
-                <el-col :span="3" style="margin-left: 10px"><el-avatar :src="m.avatar"/></el-col>
-                <el-col :span="15">
-                  <el-row style="margin-left: 10px">
-                    <el-col><div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div></el-col>
-                    <el-col :span="24" style="max-width: 200px;">
-                      <div style="white-space: normal; word-wrap: break-word;background-color: #f0f2f5; padding: 8px; border-radius: 5px;font-size: 14px;width: 100%;">
-                        {{ m.msg }}
-                      </div>
-                    </el-col>
-                    <el-col>
-                      <a style="cursor: pointer;color: #ff0000;padding: 8px 8px 0 0;font-size: 12px;" @click="changeUserState(m)">{{ m.msgStatus === 1 ? '解禁' : '禁言' }}</a>
-                      <a style="cursor: pointer;color: #ff0000;padding: 8px 8px 0 0;font-size: 12px;" @click="blockUser(m)">拉黑</a>
-                    </el-col>
-                  </el-row>
+      <el-tab-pane label="讨论" name="talk">
+        <el-scrollbar style="height: 500px; width: 100%;" ref="manageRightRef">
+          <el-row v-for="m in msgList" style="margin-bottom: 20px;">
+            <el-row v-if="m.userId !== userId" type="flex" align="top" >
+              <el-col :span="24" style="display: flex; align-items: center;">
+                <el-avatar style="width: 36px;height: 36px;" :src="m.avatar!==null?m.avatar: require('@/assets/image/default-a.png')"/>
+                 <div style="font-size: 14px; color: #999;margin: 0 12px;">{{ m.nickName }}</div>
+                 <div style="display: flex; align-items: center; gap: 8px;">
+                   <a style="cursor: pointer;color: #13C2C2;font-size: 14px;" @click="changeUserState(m)">{{ m.msgStatus === 1 ? '解禁' : '禁言' }}</a>
+                   <span style="color:#13C2C2;">|</span>
+                   <a style="cursor: pointer;color: #13C2C2;font-size: 14px;" @click="blockUser(m)">拉黑</a>
+                 </div>
                 </el-col>
-              </el-row>
-              <el-row v-if="m.userId === userId" style="padding: 8px 0" type="flex" align="top" justify="end">
-                <div style="display: flex;justify-content: flex-end">
-                  <div style="display: flex;justify-content: flex-end;flex-direction: column;max-width: 200px;align-items: flex-end">
-                    <div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div>
-                    <div style="white-space: normal; word-wrap: break-word;width: 100%; background-color: #e6f7ff; padding: 8px; border-radius: 5px;font-size: 14px;">{{ m.msg }}</div>
-                  </div>
-                  <el-avatar :src="m.avatar" style="margin-left: 10px; margin-right: 10px;"/>
+            </el-row>
+            <el-row v-if="m.userId !== userId" type="flex" align="top">
+              <el-col :span="19" :offset="3">
+                <div class="msg-box">
+                  {{ m.msg }}
                 </div>
-              </el-row>
+              </el-col>
             </el-row>
-            <!-- 底部留白 -->
-            <div style="height: 20px;"></div>
-          </el-scrollbar>
+            <el-row v-if="m.userId === userId" style="padding: 8px 0;margin-right: 10px;" type="flex" align="top" justify="end">
+              <div style="display: flex;justify-content: flex-end">
+                <div style="display: flex;justify-content: flex-end;flex-direction: column;max-width: 200px;align-items: flex-end">
+                  <div style="display: flex;align-items: center;">
+                    <div style="font-size: 14px; color: #999;margin-right: 12px;">{{ m.nickName }}</div>
+                     <el-avatar :src="m.avatar?m.avatar: require('@/assets/image/default-a.png')" style="width: 36px;height: 36px;"/>
+                  </div>
+
+                 <div class="msg-box-right">
+                 {{ m.msg }}</div>
+                </div>
 
-          <!-- 消息输入区域 -->
-          <div style="padding: 10px; border-top: 1px solid #ebeef5; background-color: #fff; min-height: 120px;">
-            <el-input
-              type="textarea"
-              v-model="newMsg"
-              placeholder="请输入消息..."
-              :rows="8"
-              @keyup.enter.native="sendMessage"
-              clearable
-              resize="none"
-              style="flex: 1; margin-right: 10px;"
-            >
-            </el-input>
-            <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
-              <el-button plain @click="sendMessage">发送</el-button>
-            </div>
+              </div>
+            </el-row>
+          </el-row>
+          <!-- 底部留白 -->
+          <div style="height: 20px;"></div>
+        </el-scrollbar>
+
+        <!-- 消息输入区域 -->
+        <div class="shuru" style="padding: 20px; border-top: 1px solid #ebeef5; background-color: #fff; min-height: 120px;">
+          <el-input
+            type="textarea"
+            v-model="newMsg"
+            placeholder="请输入消息..."
+            :rows="8"
+            @keyup.enter.native="sendMessage"
+            clearable
+            resize="none"
+            style="flex: 1; margin-right: 10px;"
+          >
+          </el-input>
+          <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
+            <el-button style="background: #13C2C2;color: #fff;" @click="sendMessage">发送</el-button>
           </div>
-        </el-tab-pane>
+        </div>
+      </el-tab-pane>
       </el-tabs>
     </el-col>
     <!-- 聊天 end -->
@@ -131,32 +137,37 @@
         </div>
       </div>
       <!-- 底部导航栏 -->
-      <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickRed">
-          <i class="el-icon-money" style="font-size: 20px;"></i>
-          <span style="font-size: 12px; margin-top: 4px;">红包配置</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickLottery">
-          <i class="el-icon-present" style="font-size: 20px;"></i>
-          <span style="font-size: 12px; margin-top: 4px;">抽奖配置</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickGoods">
-          <i class="el-icon-goods" style="font-size: 20px;"></i>
-          <span style="font-size: 12px; margin-top: 4px;">商品</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickOrder">
-          <i class="el-icon-goods" style="font-size: 20px;"></i>
-          <span style="font-size: 12px; margin-top: 4px;">直播订单</span>
-        </div>
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickCoupon">
-          <i class="el-icon-goods" style="font-size: 20px;"></i>
-          <span style="font-size: 12px; margin-top: 4px;">直播优惠券</span>
-        </div>
+    <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
+      <div class="top-box" style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickRed">
+        <!-- <i class="el-icon-money" style="font-size: 20px;"></i> -->
+        <img src="@/assets/image/hbpz.png" width="48"/>
+        <span style="font-size: 12px; margin-top: 10px;">红包配置</span>
+      </div>
+      <div class="top-box" style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickLottery">
+        <!-- <i class="el-icon-present" style="font-size: 20px;"></i> -->
+        <img src="@/assets/image/cjpz.png" width="48"/>
+        <span style="font-size: 12px; margin-top: 10px;">抽奖配置</span>
+      </div>
+      <div class="top-box" style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickGoods">
+        <!-- <i class="el-icon-goods" style="font-size: 20px;"></i> -->
+        <img src="@/assets/image/sp.png" width="48"/>
+        <span style="font-size: 12px; margin-top: 10px;">商品</span>
       </div>
-      <el-radio-group v-model="tableRadio" >
+      <div class="top-box" style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickOrder">
+        <!-- <i class="el-icon-goods" style="font-size: 20px;"></i> -->
+        <img src="@/assets/image/zbdd.png" width="48"/>
+        <span style="font-size: 12px;margin-top: 10px;">直播订单</span>
+      </div>
+      <div class="top-box" style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickCoupon">
+        <!-- <i class="el-icon-goods" style="font-size: 20px;"></i> -->
+        <img src="@/assets/image/zbyhq.png" width="48"/>
+        <span style="font-size: 12px; margin-top: 10px;">直播优惠券</span>
+      </div>
+    </div>
+     <!-- <el-radio-group v-model="tableRadio" >
         <el-radio-button label="订单数">订单数</el-radio-button>
-      </el-radio-group>
-      <div  style="position: relative;width: 100%; height: 300px;">
+      </el-radio-group> -->
+      <div  style="position: relative;width: 100%; height: 270px;margin-top: 20px;">
         <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
         <div style="position: absolute; top: 10px; right: 10px; background: #fff; padding: 5px; z-index: 1;">
           <el-select v-model="searchQuery.timeOptions" placeholder="请选择" style="width: 150px"  @change="timeChange">
@@ -184,9 +195,9 @@
     <!-- 用户列表 start -->
     <el-col class="live-console-col" :span="6">
       <el-tabs class="live-console-tab-right" v-model="tabLeft.activeName" @tab-click="handleClick" :stretch="true">
-        <el-tab-pane :label="onlineLabel" name="online">
-          <el-scrollbar ref="manageLeftRef_online" style="height: 800px; width: 100%;">
-            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineDisplayList" :key="u.userId">
+        <el-tab-pane :label="onlineLabel" name="online" style="height: 100%;">
+          <el-scrollbar ref="manageLeftRef_online" style="height:100%; width: 100%;padding: 10px;">
+            <el-row  class="row-box" style="margin-bottom:10px" type="flex" align="middle" v-for="u in onlineDisplayList" :key="u.userId">
               <el-col :span="20">
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
@@ -197,18 +208,21 @@
               <el-col :span="4" >
                 <el-popover
                   width="100"
+                  style="text-align: center;"
                   trigger="click">
-                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
-                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
+                 <div style="text-align: center;">
+                   <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
+                   <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
+                   </div>
                   <i class="el-icon-more" slot="reference"></i>
                 </el-popover>
               </el-col>
             </el-row>
           </el-scrollbar>
         </el-tab-pane>
-        <el-tab-pane :label="offlineLabel" name="offline">
-          <el-scrollbar ref="manageLeftRef_offline" style="height: 800px; width: 100%;">
-            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineDisplayList" :key="u.userId">
+        <el-tab-pane :label="offlineLabel" name="offline" style="height: 100%;">
+          <el-scrollbar ref="manageLeftRef_offline" style="height:100%; width: 100%;padding: 10px;">
+            <el-row  class="row-box" style="margin-bottom:10px" type="flex" align="middle" v-for="u in offlineDisplayList" :key="u.userId">
               <el-col :span="20">
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
@@ -220,17 +234,19 @@
                 <el-popover
                   width="100"
                   trigger="click">
-                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
+                  <div style="text-align: center;">
+                    <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
+                    <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
+                    </div>
                   <i class="el-icon-more" slot="reference"></i>
-                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                 </el-popover>
               </el-col>
             </el-row>
           </el-scrollbar>
         </el-tab-pane>
-        <el-tab-pane :label="silencedUserLabel" name="silenced">
-          <el-scrollbar ref="manageLeftRef_silenced" style="height: 800px; width: 100%;">
-            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedDisplayList" :key="u.userId">
+        <el-tab-pane :label="silencedUserLabel" name="silenced" style="height: 100%;">
+          <el-scrollbar ref="manageLeftRef_silenced" style="height: 800px; width: 100%;padding: 10px;">
+            <el-row class="row-box" style="margin-bottom:10px" type="flex" align="middle" v-for="u in silencedDisplayList" :key="u.userId">
               <el-col :span="20">
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
@@ -242,8 +258,10 @@
                 <el-popover
                   width="100"
                   trigger="click">
-                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
-                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
+                 <div style="text-align: center;">
+                   <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
+                   <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
+                   </div>
                   <i class="el-icon-more" slot="reference"></i>
                 </el-popover>
               </el-col>
@@ -1237,6 +1255,62 @@ export default {
 }
 </script>
 
+<style lang="stylus" scoped>
+  .top-box{
+    justify-content: center;
+    width: 140px;
+    height: 110px;
+    background: #FFFFFF;
+    border-radius: 16px 16px 16px 16px;
+    border: 1px solid #EBF0F9;
+  }
+  .row-box{
+    padding: 10px 16px;
+   background: #FAFBFD;
+   border-radius: 8px 8px 8px 8px;
+  }
+  .msg-box{
+   word-break: break-all;
+       word-wrap: break-word;
+       white-space: pre-wrap;
+     background-color: #F7F8FA;
+     padding: 10px;
+     border-radius: 0px 12px 12px 12px;
+     font-size: 14px;
+    display: inline-block;
+  }
+  .msg-box-right{
+    margin-right: 50px;
+   word-break: break-all;
+       word-wrap: break-word;
+       white-space: pre-wrap;
+     background-color:#13C2C2;
+     padding: 10px;
+     color: #fff;
+     border-radius: 12px 0px 12px 12px;
+     font-size: 14px;
+    display: inline-block;
+  }
+  .shuru ::v-deep.el-textarea__inner{
+    background-color: #F7F8FA !important;
+    border-radius: 12px;
+  }
+  .el-icon-more{
+    color:#D9D9D9
+  }
+  .live-console-tab-right{
+    height: 100%;
+  }
+ .live-console-tab-right .el-scrollbar__view{
+    padding: 10px;
+  }
+  .live-console-tab-right .el-col-offset-1{
+    color:#666
+  }
+ .live-console-tab-right ::v-deep.el-tabs__content{
+    height: 90%;
+  }
+</style>
 <style scoped>
 .talk-list{
   display: flex;
@@ -1244,7 +1318,6 @@ export default {
   .live-console {
     width: 90vw;
     padding: 10px 0;
-    background-color: #f5f4f4;
   }
   .live-console .live-console-col {
     height: 88vh;
@@ -1284,56 +1357,5 @@ export default {
     border: none !important;
     box-shadow: none !important;
   }
-::v-deep .el-tabs__item {
-  padding: 0;
-}
-.live-console-tab-left ::v-deep .el-tabs__active-bar {
-  width: 41px!important;
-  margin-left: calc((100% / 1 - 41px) / 2);
-  height: 4px;
-  border-radius: 4px;
-}
-
-/* calc 3是tab数量 */
-.live-console-tab-right ::v-deep .el-tabs__active-bar {
-  width: 51px!important;
-  margin-left: calc((100% / 3 - 51px) / 2);
-  height: 4px;
-  border-radius: 4px;
-}
-.custom-video {
-  pointer-events: none !important; /* 完全禁止鼠标交互，避免悬停时显示工具栏 */
-  outline: none !important; /* 移除焦点轮廓 */
-}
-/* 额外的兼容性隐藏 */
-.custom-video::-webkit-media-controls {
-  display: none !important;
-}
-
-.custom-video::-webkit-media-controls-panel {
-  display: none !important;
-}
-/* 进度条容器 */
-.progress-container {
-  width: 100%;
-  height: 6px;
-  background: #eee;
-  border-radius: 3px;
-  margin: 10px 0;
-  cursor: pointer;
-}
-
-/* 进度条填充部分 */
-.progress-bar {
-  height: 100%;
-  background: #42b983;  /* Vue 绿色主题示例 */
-  border-radius: 3px;
-  width: 0%;  /* 初始进度为 0 */
-}
-
-/* 时间显示样式 */
-.time-display {
-  color: #ffffff;
-  font-size: 14px;
-}
 </style>
+

src/views/live/liveOrder/index.vue

@@ -67,7 +67,53 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="物流编号" prop="deliveryCode">
+      <el-form-item style="margin-left: 20px;">
+        <el-button type="text"  :icon="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"  @click="upDown">{{ isCollapsed ? '展开' : '收起' }} </el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+      <div v-if="!isCollapsed">
+        <el-form-item label="物流信息" prop="searchKey">
+                      <el-input
+                       v-model.trim="searchKey"
+                        :placeholder="searchType=='deliveryCode'?'请输入物流编号':searchType=='deliveryName'?'请输入物流名称':searchType=='deliverySn'?'请输入物流单号':''"
+                        clearable
+                        size="small"
+                        @keyup.enter.native="handleQuery"
+                        clearable
+                      >
+                      <el-select
+                      slot="prepend"
+                        v-model="searchType"
+                        placeholder="请选择"
+                        clearable
+                         @change="handleTypeChange"
+                         class="select-box"
+                      >
+                        <el-option label="物流编号" value="deliveryCode" />
+                        <el-option label="物流名称" value="deliveryName" />
+                        <el-option label="物流单号" value="deliverySn" />
+                      </el-select>
+                      </el-input>
+                     </el-form-item>
+ <el-form-item label="支付时间" prop="payTime">
+        <el-date-picker clearable size="small"
+          v-model="queryParams.payTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="选择支付时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="完成时间" prop="finishTime">
+        <el-date-picker clearable size="small"
+          v-model="queryParams.finishTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="选择完成时间">
+        </el-date-picker>
+      </el-form-item>
+        </div>
+ <!--     <el-form-item label="物流编号" prop="deliveryCode">
         <el-input
           v-model="queryParams.deliveryCode"
           placeholder="请输入物流编号"
@@ -93,27 +139,9 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
-      <el-form-item label="支付时间" prop="payTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.payTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择支付时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="完成时间" prop="finishTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.finishTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择完成时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+      </el-form-item> -->
+
+
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -202,6 +230,9 @@ export default {
   components: {Treeselect, liveOrderDetails },
   data() {
     return {
+      searchType:'',
+      searchKey:'',
+      isCollapsed:false,
       //字典
       orderStatusOptions: [],
       // 遮罩层
@@ -298,18 +329,31 @@ export default {
         this.liveOrderList = response.rows;
         this.total = response.total;
         this.loading = false;
+        delete this.queryParams[this.searchType];
       });
     },
     orderStatusFormatter(row, column) {
       return this.selectDictLabel(this.orderStatusOptions, row.status);
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
+   upDown() {
+         this.isCollapsed = !this.isCollapsed;
+       },
+   handleTypeChange(newType){
+     this.searchKey='';
+     this.searchType=newType
+   },
+   /** 搜索按钮操作 */
+   handleQuery() {
+     if(this.searchKey!=='' && this.searchType!==''){
+      this.queryParams[this.searchType]=this.searchKey
+     }
+     this.queryParams.pageNum = 1;
+     this.getList();
+   },
     /** 重置按钮操作 */
     resetQuery() {
+      this.searchKey= '';
+      this.queryParams[this.searchType]=null;
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -337,3 +381,20 @@ export default {
   }
 };
 </script>
+<style scoped>
+   ::v-deep .el-input-group__prepend{
+      background-color: #fff !important;
+      width: 100px;
+
+  }
+  ::v-deep .el-input-group--prepend{
+     vertical-align: middle;
+  }
+  ::v-deep .vue-treeselect__control{
+    height: 30px !important;
+    line-height: 30px;
+  }
+  ::v-deep .vue-treeselect__placeholder{
+    line-height: 32px;
+  }
+</style>