209930090122

src/components/imFloat/imFloat.vue

@@ -106,7 +106,7 @@
                                             </el-popover>
                                         </div>
                                         <div class="emoji-item" @click="showQuick">
-                                            <el-popover placement="top" :width="400" trigger="click">
+                                            <el-popover placement="top" :width="400" trigger="click" @show="getQuick">
                                                 <template #reference>
                                                     <div class="item-btn">
                                                         <el-image style="width:25px;height:25px;" src="https://jymini.oss-cn-guangzhou.aliyuncs.com/pc/quick.svg"></el-image>
@@ -122,11 +122,11 @@
                                                         <div class="search-btn-txt"><el-button type="primary" @click="addQuick">添加</el-button></div>
                                                     </div>
                                                     <div class="quick-table-body">
-                                                        <el-table :data="quickData.list" style="width: 100%" max-height="250" border>
+                                                        <el-table :data="quickData.list" style="width: 100%" height="300" border>
                                                             <el-table-column prop="content" label="内容"></el-table-column>
                                                             <el-table-column prop="content" label="操作" width="80">
                                                                 <template #default="scope">
-                                                                    <el-button size="small" @click="table_view(scope.row)">发送</el-button>
+                                                                    <el-button size="small" @click="sendQuick(scope.row.content)">发送</el-button>
                                                                 </template>
                                                             </el-table-column>
                                                         </el-table>
@@ -137,6 +137,7 @@
                                                             background
                                                             layout="prev, pager, next"
                                                             :total="quickData.total"
+                                                            @size-change="quickPageChange" @current-change="quickPageChange"
                                                         />
                                                     </div>
                                                 </div>
@@ -191,19 +192,76 @@
                         </div>
                     </el-container>
                     <el-aside width="400px" v-if="chatItem">
-                        <el-container>
-                            <el-main>
-                                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
-                                    <el-tab-pane label="用户信息" name="user">
-                                        
-                                    </el-tab-pane>
-                                    <el-tab-pane label="团购订单" name="order">
-                                        
-                                    </el-tab-pane>
-                                    <el-tab-pane label="差价订单" name="price">
-                                        
-                                    </el-tab-pane>
-                                </el-tabs>
+                        <el-container class="flex-column">
+                            <div class="aside-tabs">
+                                <div :class="orderData.tab=='user'?'aside-tab-items active':'aside-tab-items'" @click="handleClick('user')">用户信息</div>
+                                <div :class="orderData.tab=='order'?'aside-tab-items active':'aside-tab-items'" @click="handleClick('order')">团购订单</div>
+                                <div :class="orderData.tab=='price'?'aside-tab-items active':'aside-tab-items'" @click="handleClick('price')">差价订单</div>
+                            </div>
+                            <el-main class="nopadding">
+                                <template v-if="orderData.tab == 'price'">
+                                    <el-container>
+                                        <el-header>
+                                            <div class="order-search-input">
+                                                <el-input v-model="orderData.order" placeholder="搜索订单编号..." style="width: 100%;" />
+                                                <el-button>搜索</el-button>
+                                            </div>
+                                        </el-header>
+                                        <el-main>
+                                        </el-main>
+                                        <el-footer style="text-align: right;">
+                                            <div class="order-page">
+                                                <el-pagination small background :default-page-size="priceData.size" layout="prev, pager, next" @size-change="orderPageChange" @current-change="orderPageChange" :total="priceData.total" />
+                                            </div>
+                                        </el-footer>
+                                    </el-container>
+                                </template>
+                                <template v-if="orderData.tab == 'order'">
+                                    <el-container v-loading="orderData.loading">
+                                        <el-header>
+                                            <div class="order-search-input">
+                                                <el-input v-model="orderData.order" placeholder="搜索订单编号..." style="width: 100%;" />
+                                                <el-button>搜索</el-button>
+                                            </div>
+                                        </el-header>
+                                        <el-main>
+                                            <div class="order-list-chat" v-if="orderData.list.length > 0">
+                                                <div class="m-order-s" v-for="(item,index) in orderData.list" :key="index">
+                                                    <div class="m-order-item">
+                                                        <div class="order-img"><el-image style="width: 80px;height: 80px;" :src="item.img" fit="fit"></el-image></div>
+                                                        <div class="order-info">
+                                                            <div class="title">{{item.product.product_name}}</div>
+                                                            <div class="desc">{{item.order_sn}}</div>
+                                                            <div class="price">{{this.$TOOL.money(item.price)}}</div>
+                                                        </div>
+                                                        <div class="order-status-btn">
+                                                            <div class="status info" v-if="item.status=='0'">未支付</div>
+                                                            <div class="status primary" v-if="item.status=='1'">待使用</div>
+                                                            <div class="status success" v-if="item.status=='2'">已完成</div>
+                                                            <div class="status danger" v-if="item.status=='3'">已退款</div>
+                                                            <div class="status warn" v-if="item.status=='4'">退款中</div>
+                                                            <div class="status warn" v-if="item.status=='5'">已关闭</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="order-btn-group">
+                                                        <div class="status info cus" @click="viewOrder(item)">查看详情</div>
+                                                        <div class="status primary cus" @click="sendAddress(item)">收集地址</div>
+                                                        <div class="status warn cus" v-if="item.product.product_type==11" @click="submitPrice(item)">补差价</div>
+                                                        <div class="status danger cus" @click="sendOrder(item)">发送订单</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="order-list-chat" v-else>
+                                                <el-empty description="没有订单" />
+                                            </div>
+                                        </el-main>
+                                        <el-footer style="text-align: right;">
+                                            <div class="order-page">
+                                                <el-pagination small background :default-page-size="orderData.size" layout="prev, pager, next" @size-change="orderPageChange" @current-change="orderPageChange" :total="orderData.total" />
+                                            </div>
+                                        </el-footer>
+                                    </el-container>
+                                </template>
                             </el-main>
                         </el-container>
                     </el-aside>
@@ -263,10 +321,6 @@ export default {
 				allLoaded: false
 			},
             msgLoad:false,
-            orderList:[],
-            orderLoad:false,
-            orderTotal:0,
-            orderPage:1,
             emojiUrl,
             loading:false,
             visible: false,           // 聊天窗口可见性
@@ -297,6 +351,21 @@ export default {
                 list:[],
                 popState:false,
                 total:0
+            },
+            orderData:{
+                page:1,
+                size:10,
+                list:[],
+                loading:false,
+                total:0,
+                tab:"user"
+            },
+            priceData:{
+                page:1,
+                size:10,
+                list:[],
+                loading:false,
+                total:0,
             }
         }
     },
@@ -342,17 +411,46 @@ export default {
         this.$refs.messageListRef.removeEventListener('scroll', this.handleScroll)
     },
     methods: {
+        handleClick(event){
+            this.orderData.tab = event;
+            switch (event) {
+                case "user":
+                    break;
+                case "order":
+                    this.orderData.page = 1;
+                    this.orderData.list = [];
+                    this.getOrderList();
+                    break;
+                case "price":
+                    break;
+            }
+        },
+        viewOrder(data){
+            data.order = data.out_order_no;
+            this.$refs.orderDetail.open("add").setData(data)
+        },
+        quickPageChange(e){
+            this.quickData.page = e;
+            this.getQuick()
+        },
+        async getQuick(){
+            var resp = await this.$API.merQuick.list.get({"page":this.quickData.page,"pageSize":this.quickData.size});
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.quickData.total = resp.data.total;
+            this.quickData.list = resp.data.rows;
+        },
         addQuick(){
             this.$nextTick(() => {
                 this.$refs.quickTxt.open("add")
             })
         },
-        handleClick(event){
-            this.activeName = event;
-            // this.getConfig();
+        sendQuick(text){
+            this.inputMessage = text;
+            this.sendMessage()
         },
         orderSuccess(type,data){
-            console.log(data)
             switch(type) {
                 case "address":
                     this.sendAddress(data)
@@ -381,7 +479,7 @@ export default {
             this.uploadImg = "";
         },
         orderPageChange(e){
-            this.orderPage = e;
+            this.orderData.page = e;
             this.getOrderList()
         },
         hideWindow(){
@@ -389,15 +487,13 @@ export default {
             this.msgPage = 1;
             this.unreadCount = 0;
             this.checkChat = null;
-            this.orderList = [];
-            this.orderPage = 1;
             this.visible = false;
         },
         handleScroll(e){
             const { scrollTop, clientHeight, scrollHeight } = e.target
             const isBottom = scrollTop + clientHeight >= scrollHeight - 5   // 5px 缓冲区
             const isTop = scrollTop <= 5
-            console.log("滚动",this.history.allLoaded)
+            // console.log("滚动",this.history.allLoaded)
             if (isBottom && !this.history.allLoaded) {
                 console.log('到达底部')
                 // 加载更多等操作
@@ -764,14 +860,14 @@ export default {
             return true;
         },
         async getOrderList(){
-            this.orderLoad = true;
-            var resp = await this.$API.order.list.get({"page":this.orderPage,"pageSize":this.orderSize,"openid":this.chatItem.openid});
-            this.orderLoad = false;
+            this.orderData.loading = true;
+            var resp = await this.$API.order.list.get({"page":this.orderData.page,"pageSize":this.orderData.size,"openid":this.chatItem.openid});
+            this.orderData.loading = false;
             if (resp.code == 0) {
                 return ;
             }
-            this.orderList = resp.data.rows;
-            this.orderTotal = resp.data.total;
+            this.orderData.list = resp.data.rows;
+            this.orderData.total = resp.data.total;
         }
     }
 }
@@ -779,17 +875,25 @@ export default {
 
 <style scoped lang="scss">
 @import '@/style/index.scss';
-.quick-search{display: flex;align-items: center;justify-content: space-between;gap: 10px;}
+.aside-tabs{display: flex;height: 65px;align-items: center;gap: 10px;border-bottom: 1px solid var(--el-border-color-light);padding: 13px 15px;}
+.aside-tabs .aside-tab-items{font-size: 14px;cursor: pointer;padding: 0 20px;}
+.aside-tabs .aside-tab-items.active{color: var(--el-color-primary);}
+.quick-search{display: flex;align-items: center;justify-content: space-between;}
 .quick-search .search-input{flex: 1;display: flex;align-items: center;gap: 5px;}
 .quick-search .search-btn-txt{font-size: 14px;color: #409eff;cursor: pointer;}
 .quick-table .quick-table-body{margin: 10px 0;}
 .border-none{border: 0;}
 .msg-title{font-size: 18px;font-weight: bold;}
 .loading-text{background-color: #f8f8f8;text-align: center;font-size: 12px;}
-.m-order-s{background-color: #f8f8f8;border-radius: 5px;display: flex;font-size: 14px;position: relative;margin-bottom: 10px;}
-.m-order-s .order-img image{width: 60px;height: 60px;}
-.m-order-s .order-info {padding: 10px;}
-.m-order-s .order-info .title{font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+.order-list-chat{height: 100%;flex-direction: column;flex: 1;display: flex;}
+.m-order-s{background-color: #fff;border-radius: 5px;margin-bottom: 10px;border: 1px solid #f8f8f8;}
+.m-order-s .m-order-item{display: flex;font-size: 14px;position: relative;background-color: #f8f8f8;}
+.m-order-s .order-btn-group{display: flex;align-items: center;padding: 10px;gap: 10px;}
+.order-search-input{display: flex;align-items: center;gap: 10px;flex: 1;}
+.m-order-s .order-img{display: flex;}
+.m-order-s .order-img image{width: 80px;height: 80px;}
+.m-order-s .order-info {padding: 5px 10px 10px;flex: 1;}
+.m-order-s .order-info .title{font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
 .m-order-s .order-info .desc{font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;}
 .m-order-s .order-info .price{font-size: 14px;color: #f00;}
 .m-order-s .order-status-btn{position: absolute;right: 0;bottom: 0;display: flex;align-items: center;gap: 5px;}