聊天

src/layout/header/notice.vue

@@ -36,8 +36,8 @@ export default {
     async initWebSocket() {
       const shop_id = _.get(this.user, 'shop._id');
       // const url = `ws://192.168.1.197:12214/dev/point/chat/v1/api/ws`;
-      // const url = `ws://broadcast.waityou24.cn/dev/point/chat/v1/api/ws`;
-      const url = `ws://broadcast.waityou24.cn/point/chat/v1/api/ws`;
+      const url = `ws://broadcast.waityou24.cn/dev/point/chat/v1/api/ws`;
+      // const url = `ws://broadcast.waityou24.cn/point/chat/v1/api/ws`;
       const ws = new WS(url, shop_id, (res) => {
         if (res.data != 'connect success') this.onMessage(res.data);
       });

src/store/index.js

@@ -52,6 +52,7 @@ import giveCoupon from './module/shop/giveCoupon';
 
 // 订单
 import order from './module/trade/order';
+import viewOrder from './module/trade/viewOrder';
 // 订单详情
 import orderDetail from './module/trade/orderDetail';
 import sot from './module/trade/sot';
@@ -142,5 +143,6 @@ export default new Vuex.Store({
     goodsSet,
     chatRecord,
     room,
+    viewOrder,
   },
 });

src/store/module/trade/viewOrder.js

@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+const _ = require('lodash');
+Vue.use(Vuex);
+const api = {
+  url: '/point/v1/api/viewOrder',
+};
+
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.url}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.url}/${payload}`);
+    return res;
+  },
+  async getOrder({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.url}/getOrder/${payload}`);
+    return res;
+  },
+  // async getOrder({ commit }, payload) {
+  //   const id = _.get(payload, "id", _.get(payload, "_id"));
+  //   const res = await this.$axios.$post(`${api.url}/getOrder/${id}`, payload);
+  //   return res;
+  // },
+  async update({ commit }, payload) {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await this.$axios.$post(`${api.url}/${id}`, payload);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.url}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/selfShop/message/index.vue

@@ -17,24 +17,52 @@
             @onSubmit="onSubmit"
             :form="form"
             :srcList="srcList"
+            :statusList="statusList"
             :loadingRight="loadingRight"
             @onMore="onMore"
+            :delTop="delTop"
             :showMore="showMore"
+            @toOrder="toOrder"
           ></right-1>
         </el-col>
       </el-col>
     </el-row>
     <e-dialog :dialog="dialog" @toClose="toClose">
       <template v-slot:info>
-        <el-col :span="24" class="dia_one">
-          <c-upload :url="url" v-model="file" :limit="1"></c-upload>
-          <p>一次最多发送一张图片</p>
+        <el-col :span="24" class="dia_one" v-if="dialog.type == '1'">
+          <el-col :span="24">
+            <c-upload :url="url" v-model="file" :limit="1"></c-upload>
+            <p>一次最多发送一张图片</p>
+          </el-col>
+          <el-col :span="24" class="dia_one">
+            <el-button type="success" size="mini" @click="onSubmit('file')">发送</el-button>
+          </el-col>
         </el-col>
-        <el-col :span="24" class="dia_one">
-          <el-button type="success" size="mini" @click="onSubmit('file')">发送</el-button>
+        <el-col :span="24" class="dia_one" v-else-if="dialog.type == '2'">
+          <el-col :span="24">
+            <el-select
+              v-model="goods_id"
+              filterable
+              clearable
+              remote
+              placeholder="请输入商品名称，便于查询"
+              :remote-method="querySearch"
+              :loading="loading"
+              style="width: 100%"
+            >
+              <el-option v-for="item in goodsList" :key="item._id" :label="item.name" :value="item._id"> </el-option>
+            </el-select>
+            <p>请输入商品名称，便于查询</p>
+          </el-col>
+          <el-col :span="24" class="dia_one">
+            <el-button type="success" size="mini" @click="onSubmit('goods')">发送</el-button>
+          </el-col>
         </el-col>
       </template>
     </e-dialog>
+    <el-drawer title="最近购买订单列表" :visible.sync="drawer" :direction="direction" :before-close="toClose">
+      <order-1 :customer="customer" :shop="shop" @onSubmit="onSubmit"></order-1>
+    </el-drawer>
   </div>
 </template>
 
@@ -46,6 +74,10 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: room } = createNamespacedHelpers('room');
 const { mapActions: users } = createNamespacedHelpers('users');
 const { mapActions: chatRecord } = createNamespacedHelpers('chatRecord');
+const { mapActions: goods } = createNamespacedHelpers('goods');
+const { mapActions: goodsSpec } = createNamespacedHelpers('goodsSpec');
+const { mapActions: viewOrder } = createNamespacedHelpers('viewOrder');
+const { mapActions: dictData } = createNamespacedHelpers('dictData');
 
 export default {
   name: 'index',
@@ -54,9 +86,12 @@ export default {
     cUpload: () => import('@/components/usual/c-upload.vue'),
     left1: () => import('./parts/left-1.vue'),
     right1: () => import('./parts/right-1.vue'),
+    order1: () => import('./parts/order-1.vue'),
   },
   data: function () {
     return {
+      drawer: false,
+      direction: 'rtl',
       loadingRight: true,
       // 聊天房间列表
       roomList: [],
@@ -73,13 +108,19 @@ export default {
       dialog: { title: '信息管理', show: false, type: '1' },
       url: '/files/point/message/upload',
       file: [],
+      // 商品id
+      goods_id: '',
+      loading: false,
+      goodsList: [],
       // 大图预览列表
       srcList: [],
       form: {},
       // 判断显示聊天记录
       show: '0',
       message: {},
-      limit: 20,
+      limit: 10,
+      statusList: [],
+      delTop: 0,
     };
   },
   created() {
@@ -89,6 +130,10 @@ export default {
   },
   methods: {
     ...users({ userFetch: 'fetch' }),
+    ...goods({ goodsQuery: 'query', goodsFetch: 'fetch' }),
+    ...goodsSpec({ specQuery: 'query' }),
+    ...dictData({ dictQuery: 'query' }),
+    ...viewOrder({ orderQuery: 'query', orderFetch: 'getOrder' }),
     ...room({ roomQuery: 'query', roomFetch: 'fetch', roomDelete: 'delete' }),
     ...chatRecord(['query', 'delete', 'fetch', 'update', 'create', 'read']),
     // 查询
@@ -110,25 +155,40 @@ export default {
         }
       }
     },
-    onMore() {
-      this.limit = util.plus(this.limit, 20);
+    onMore(e) {
+      this.limit = util.plus(this.limit, 10);
       let data = { _id: this.form.room, customer: this.customer, shop: this.shop };
       this.toView(data);
+      this.$set(this, `delTop`, e);
+      this.loadingRight = true;
     },
     // 查看
     async toView(data) {
+      this.show = '1';
       if (this.customer._id != data.customer._id) {
         this.loadingRight = true;
+        this.$set(this, `delTop`, 0);
         this.$set(this, `customer`, data.customer);
       }
       if (data._id) {
         this.$set(this, `form`, { room: data._id });
         // 处理已读
         let list = [];
-        // let res = await this.query({ room: data._id, limit: this.limit });
-        let res = await this.query({ room: data._id });
+        let res = await this.query({ room: data._id, limit: this.limit });
+        // let res = await this.query({ room: data._id });
         if (this.$checkRes(res)) {
-          // if (res.total > this.limit) this.showMore = '1';
+          if (res.total > this.limit) this.showMore = '1';
+          for (const p1 of res.data) {
+            // 聊天类型--商品
+            if (p1.msg_type == '2') {
+              let aee = await this.goodsFetch(p1.content);
+              if (this.$checkRes(aee)) p1.goods = aee.data;
+            }
+            if (p1.msg_type == '3') {
+              let aee = await this.orderFetch(p1.content);
+              if (this.$checkRes(aee)) p1.order = aee.data;
+            }
+          }
           // 聊天记录列表
           let arr1 = res.data.reverse();
           this.$set(this, `chatRecordList`, arr1);
@@ -150,19 +210,34 @@ export default {
           if (this.$checkRes(res)) this.search();
         }
       }
-      this.show = '1';
+
       setTimeout(() => {
         this.$nextTick(() => {
           this.loadingRight = false;
         });
-      }, 1000);
+      }, 100);
     },
+    async toOrder() {
+      this.drawer = true;
+    },
+
     // 发送图片
-    toUp() {
-      this.dialog = { title: '信息管理', show: true, type: '1' };
+    toUp(value) {
+      if (value == 'file') {
+        this.dialog = { title: '信息管理', show: true, type: '1' };
+      } else if (value == 'goods') {
+        this.dialog = { title: '信息管理', show: true, type: '2' };
+      }
+    },
+    // 店铺名称远程查询
+    async querySearch(value) {
+      this.loading = true;
+      let res = await this.goodsQuery({ name: value, shop: this.shop._id });
+      if (this.$checkRes(res)) this.$set(this, 'goodsList', res.data);
+      this.loading = false;
     },
     // 提交
-    async onSubmit(value) {
+    async onSubmit(value, node) {
       var form = { speaker: this.user.shop._id, time: moment().format('YYYY-MM-DD HH:mm:ss') };
       if (this.form.room) form.room = this.form.room;
       else form.customer = this.customer_id;
@@ -176,7 +251,16 @@ export default {
         form.msg_type = '1';
         if (this.file.length == 0) this.$message({ type: `warning`, message: `请选择要发送的图片` });
         else form.content = this.file[0].url;
+      } else if (value == 'goods') {
+        form.msg_type = '2';
+        if (this.goods_id) form.content = this.goods_id;
+        else this.$message({ type: `warning`, message: `请选择要发送的商品` });
+      } else if (value == 'order') {
+        // 订单消息
+        form.msg_type = '3';
+        form.content = node;
       }
+      console.log(form);
       if (form.content) {
         let res = await this.create(form);
         if (this.$checkRes(res, '发送成功', '发送失败')) {
@@ -191,11 +275,16 @@ export default {
     // 关闭
     toClose() {
       this.file = [];
+      this.drawer = false;
       this.dialog = { title: '信息管理', show: false, type: '1' };
     },
     // 查询其他信息
     async searchOthers() {
       this.$set(this, `shop`, this.user.shop);
+      let res;
+      // 订单状态
+      res = await this.dictQuery({ code: 'order_process' });
+      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
     },
   },
   watch: {

src/views/selfShop/message/parts/left-1.vue

@@ -8,8 +8,8 @@
           </el-input>
         </el-col>
         <el-col :span="24" class="left_two" v-if="roomList.length != 0">
-          <el-col :span="24" v-for="item in roomList" :key="item._id" @click.native="toView(item)" style="cursor: pointer">
-            <el-col :span="24" class="left_two_1">
+          <el-col :span="24" v-for="item in roomList" :key="item._id" style="cursor: pointer">
+            <el-col :span="24" class="left_two_1" @click.native="toView(item)">
               <el-col :span="4" class="left_image">
                 <!-- <el-image v-if="item.customer && item.customer.icon[0].url" :src="item.customer.icon[0].url" class="left_icon"> </el-image> -->
                 <el-avatar v-if="item.customer && item.customer.icon[0].url" :size="60" :src="item.customer.icon[0].url" class="left_icon"></el-avatar>
@@ -23,13 +23,15 @@
               </el-col>
               <el-col :span="20">
                 <el-col :span="24" class="left_time">
-                  <el-col :span="10" style="text-align: left" v-if="item.customer && item.customer.name">{{ item.customer.name || '用户名称' }}</el-col>
-                  <el-col :span="10" style="text-align: left" v-else>{{ '用户不存在' }}</el-col>
-                  <el-col :span="14" style="text-align: right">{{ item.last_chat.time }}</el-col>
+                  <el-col :span="14" style="text-align: left" v-if="item.customer && item.customer.name">{{ item.customer.name || '用户名称' }}</el-col>
+                  <el-col :span="14" style="text-align: left" v-else>{{ '用户不存在' }}</el-col>
+                  <el-col :span="10" style="text-align: right; font-size: 13px">{{ item.last_chat.time }}</el-col>
                 </el-col>
                 <el-col :span="20" class="left_content">
                   <p class="left_content_test" v-if="item.last_chat.msg_type == '0'">{{ item.last_chat.content }}</p>
-                  <p class="left_content_test" v-else>[图片]</p>
+                  <p class="left_content_test" v-else-if="item.last_chat.msg_type == '1'">[图片]</p>
+                  <p class="left_content_test" v-else-if="item.last_chat.msg_type == '2'">[商品链接]</p>
+                  <p class="left_content_test" v-else-if="item.last_chat.msg_type == '3'">[订单链接]</p>
                 </el-col>
                 <el-col :span="4" class="left_badge" v-if="item.not_read != 0">
                   <el-badge :value="item.not_read" :max="99" class="left_item"> </el-badge>

src/views/selfShop/message/parts/order-1.vue

@@ -0,0 +1,236 @@
+<template>
+  <div id="order-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-collapse v-model="activeName" accordion @change="handleChange">
+          <div v-for="node in collapseList" :key="node.name" class="list">
+            <el-collapse-item :title="node.title" :name="node.name">
+              <el-col v-for="node in order" :key="node._id" class="order">
+                <el-col :span="24" class="btn">
+                  <el-button v-if="node.status == '0'" type="danger" size="mini" @click="toOrder('order', node._id)">查看详情</el-button>
+                  <el-button v-else type="danger" size="mini" @click="toOrder('detail', node._id)">查看详情</el-button>
+                  <el-button type="success" size="mini" @click="onSubmit('order', node._id)">发送链接</el-button>
+                </el-col>
+                <!--  <el-col :span="24" class="address">
+                  <p>{{ node.address.name }}, {{ node.address.phone }}</p>
+                   <p>{{ node.address.province }},{{ node.address.city }},{{ node.address.area }}, {{ node.address.address }}</p>
+                </el-col> -->
+                <el-col :span="24">
+                  <el-col :span="24" v-for="item in node.goods" :key="item._id || item.set_id">
+                    <!-- 套装 -->
+                    <el-col :span="24" v-if="item.is_set == '0'">
+                      <!-- <el-col :span="4" class="image"> </el-col>
+                      <el-col :span="24">
+                        <el-col :span="20" class="name">{{ item.name || '套装名称' }}</el-col>
+                        <el-col :span="4" class="buy"> X{{ item.buy_num }} </el-col>
+                      </el-col> -->
+                      <el-col :span="24" class="name">{{ item.name || '套装名称' }}</el-col>
+                      <el-col :span="24" v-for="i in item.goods" :key="i.spec._id">
+                        <el-col :span="24" class="bode">
+                          <el-col :span="4" class="image">
+                            <el-image v-if="i.spec.file && i.spec.file.length != 0" :src="i.spec.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                            <el-image
+                              v-else-if="i.goods.file && i.goods.file.length != 0"
+                              :src="i.goods.file[0].url"
+                              style="width: 60px"
+                              mode="widthFix"
+                            ></el-image>
+                          </el-col>
+                          <el-col :span="20">
+                            <el-col :span="20">
+                              <el-col :span="24"> {{ i.goods_name }} </el-col>
+                              <el-col :span="24"> 规格：{{ i.spec_name }} </el-col>
+                            </el-col>
+                            <el-col :span="4" class="buy">
+                              <el-col :span="24">
+                                X<span>{{ i.set_num }}</span></el-col
+                              >
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                      <el-col :span="24" class="buy"> X{{ item.buy_num }} </el-col>
+                      <el-col :span="24" class="buy"> ￥{{ item.sell_money }} </el-col>
+                    </el-col>
+                    <!-- 正常购买 -->
+                    <el-col :span="24" v-else>
+                      <!-- 未付款 -->
+                      <el-col :span="24" v-if="node.status == '0'">
+                        <el-col :span="24" v-for="i in item.goods" :key="i._id">
+                          <el-col :span="24" class="bode">
+                            <el-col :span="4" class="image">
+                              <el-image v-if="i.file && i.file.length != 0" :src="i.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                              <el-image
+                                v-else-if="i.goods.file && i.goods.file.length != 0"
+                                :src="i.goods.file[0].url"
+                                style="width: 60px"
+                                mode="widthFix"
+                              ></el-image>
+                            </el-col>
+                            <el-col :span="20">
+                              <el-col :span="20">
+                                <el-col :span="24"> {{ i.goods.name }} </el-col>
+                                <el-col :span="24"> 规格：{{ i.name }} </el-col>
+                              </el-col>
+                              <el-col :span="4" class="buy">
+                                <el-col :span="24">
+                                  X<span>{{ i.buy_num }}</span></el-col
+                                >
+                                <el-col :span="24" class="buy" style="font-size: 20px">
+                                  <p v-if="node.type == '0' && i.price">￥{{ i.price }}</p>
+                                  <p v-else-if="node.type == '0' && !i.price">￥{{ i.sell_money }}</p>
+                                  <p v-else-if="node.type == '1'">￥{{ i.group_config.money }}</p>
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                      <!-- 已付款 -->
+                      <el-col :span="24" class="bode" v-else>
+                        <el-col :span="4" class="image">
+                          <el-image v-if="item.url" :src="item.url" style="width: 60px" mode="widthFix"></el-image>
+                          <el-image v-else-if="item.goods.url" :src="item.goods.url" style="width: 60px" mode="widthFix"></el-image>
+                        </el-col>
+                        <el-col :span="20">
+                          <el-col :span="20">
+                            <el-col :span="24"> {{ item.goods.name }} </el-col>
+                            <el-col :span="24"> 规格：{{ item.name }} </el-col>
+                          </el-col>
+                          <el-col :span="4" class="buy">
+                            <el-col :span="24">
+                              X<span>{{ item.buy_num }}</span></el-col
+                            >
+                            <el-col :span="24" class="buy" style="font-size: 20px">
+                              <p v-if="node.type == '0' && item.price">￥{{ item.price }}</p>
+                              <p v-else-if="node.type == '0' && !item.price">￥{{ item.sell_money }}</p>
+                              <p v-else-if="node.type == '1'">￥{{ item.group_config.money }}</p>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                  <!-- 总额 -->
+                  <el-col :span="24" class="total">
+                    实付款
+                    <span style="color: red; font-size: 20px">￥{{ node.real_pay }}</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-collapse-item>
+          </div>
+        </el-collapse>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: order } = createNamespacedHelpers('order');
+const { mapActions: orderDetail } = createNamespacedHelpers('orderDetail');
+
+export default {
+  name: 'order-1',
+  props: {
+    customer: { type: Object },
+    shop: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {
+      activeName: '0',
+      collapseList: [
+        { title: '已付款', name: '2' },
+        { title: '已发货', name: '3' },
+        { title: '已收货', name: '4' },
+        { title: '待付款', name: '1' },
+      ],
+      order: [],
+    };
+  },
+  created() {},
+  methods: {
+    ...order({ orderQuery: 'query' }),
+    ...orderDetail(['query', 'fetch']),
+    async handleChange(data) {
+      if (data) {
+        let res;
+        let info = { customer: this.customer._id, limit: 5, shop: this.shop._id };
+        if (data == '1') {
+          info.status = '0';
+          res = await this.orderQuery(info);
+          if (this.$checkRes(res)) this.$set(this, `order`, res.data);
+        } else if (data == '2' || data == '3' || data == '4') {
+          if (data == '2') info.status = '1';
+          else if (data == '3') info.status = '2';
+          else if (data == '4') info.status = '3';
+          res = await this.query(info);
+          if (this.$checkRes(res)) this.$set(this, `order`, res.data);
+        }
+      }
+    },
+    // 查看订单详情
+    toOrder(value, content) {
+      if (value == 'order') {
+        this.$router.push({ path: `/selfShop/order`, query: { order_id: content } });
+      } else if (value == 'detail') {
+        this.$router.push({ path: `/selfShop/order`, query: { orderDetail_id: content } });
+      }
+    },
+    onSubmit(value, node) {
+      this.$emit('onSubmit', value, node);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px solid #ccc;
+    .order {
+      background: rgba(199, 243, 255, 0.8);
+      margin: 2px 0;
+      padding: 3px;
+      .address {
+        margin: 10px 0;
+      }
+      .name {
+        font-size: 20px;
+      }
+      .buy {
+        text-align: right;
+        font-size: 18px;
+      }
+      .total {
+        text-align: right;
+        font-size: 18px;
+        margin: 5px 0 10px 0;
+      }
+      .sell {
+        color: red;
+      }
+      .btn {
+        text-align: right;
+        margin: 5px 0 10px 0;
+      }
+    }
+  }
+}
+</style>

src/views/selfShop/message/parts/right-1.vue

@@ -2,14 +2,17 @@
   <div id="right-1">
     <el-row>
       <el-col :span="24" class="main" v-loading="loadingRight" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
-        <el-col :span="24" class="right_one">
+        <el-col :span="21" class="right_one">
           <p class="right_one_name">{{ customer.name }}</p>
+          <p class="right_one_address">{{ customer.phone }}{{ customer.is_leader == '0' ? '--团长' : '' }}</p>
+        </el-col>
+        <el-col :span="3" class="right_btn">
+          <el-button type="warning" size="mini" @click="toOrder()">查看订单</el-button>
         </el-col>
         <div id="scrolldIV" class="scroll-div" ref="scrollContent">
-          <!-- <el-col :span="24" class="right_two"> -->
-          <!-- <el-col :span="24" class="more" v-if="showMore == '1'">
+          <el-col :span="24" class="more" v-if="showMore == '1'">
             <span @click="onMore()">查看更多消息</span>
-          </el-col> -->
+          </el-col>
           <el-col :span="24" v-for="item in chatRecordList" :key="item._id">
             <el-col :span="24" class="right_time">{{ item.time }}</el-col>
             <el-col :span="24" class="right_left" v-if="item.speaker != user.shop._id">
@@ -23,6 +26,167 @@
                   <div class="test" v-if="item.msg_type == '0' && item.content.length > 50">{{ item.content }}</div>
                   <el-image v-else-if="item.msg_type == '1'" :src="item.content" :preview-src-list="srcList" style="max-width: 300px" mode="widthFix">
                   </el-image>
+                  <el-col class="test" :span="20" v-else-if="item.msg_type == '2'">
+                    <el-col :span="5">
+                      <el-image :src="item.goods.file[0].url" style="max-width: 100px; height: 100px"></el-image>
+                    </el-col>
+                    <el-col :span="19" class="test_name">
+                      <p class="goods_name">{{ item.goods.name }}</p>
+                      <p class="goods_time">{{ item.goods.send_time || '7日' }}内发货</p>
+                      <el-button type="primary" size="mini" @click="toDetail('goods', item.content)">查看详情</el-button>
+                    </el-col>
+                  </el-col>
+                  <el-col :span="20" class="test" v-else-if="item.msg_type == '3'">
+                    <el-col :span="24" class="no">
+                      <el-col :span="20">{{ getStatus(item.order.status) }}: {{ item.order.no }}</el-col>
+                      <el-col
+                        :span="4"
+                        v-if="
+                          item.order.status == '1' ||
+                          item.order.status == '2' ||
+                          item.order.status == '3' ||
+                          item.order.status == '2-' ||
+                          item.order.status == '0'
+                        "
+                      >
+                        <el-button v-if="item.order.status == '0'" type="danger" size="mini" @click="toOrderDetail('order', item.content)">查看详情</el-button>
+                        <el-button v-else type="danger" size="mini" @click="toOrderDetail('detail', item.content)">查看详情</el-button>
+                      </el-col>
+                    </el-col>
+                    <el-col :span="24" v-for="i in item.order.goods" :key="i._id">
+                      <!-- 已支付 -->
+                      <el-col :span="24" v-if="item.order.status == '1' || item.order.status == '2' || item.order.status == '3' || item.order.status == '2-'">
+                        <el-col :span="24" v-if="i.is_set != '0'">
+                          <el-col :span="4" class="image">
+                            <el-image v-if="i.file && i.file.length != 0" :src="i.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                            <el-image
+                              v-else-if="i.goods.file && i.goods.file.length != 0"
+                              :src="i.goods.file[0].url"
+                              style="width: 60px"
+                              mode="widthFix"
+                            ></el-image>
+                          </el-col>
+                          <el-col :span="20">
+                            <el-col :span="20">
+                              <el-col :span="24"> {{ i.goods.name }} </el-col>
+                              <el-col :span="24"> 规格：{{ i.name }} </el-col>
+                            </el-col>
+                            <el-col :span="4" class="buy">
+                              <el-col :span="24">
+                                X<span>{{ i.buy_num }}</span></el-col
+                              >
+                              <el-col :span="24" class="buy" style="font-size: 20px">
+                                <p v-if="item.order.type == '0' && i.price">￥{{ i.price }}</p>
+                                <p v-else-if="item.order.type == '0' && !i.price">￥{{ i.sell_money }}</p>
+                                <p v-else-if="item.order.type == '1'">￥{{ i.group_config.money }}</p>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                        <el-col :span="24" v-else>
+                          <el-col :span="24">{{ i.name || '套装名称' }}</el-col>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods.spec._id">
+                            <el-col :span="24" class="bode">
+                              <el-col :span="4" class="image">
+                                <el-image
+                                  v-if="goods.spec.file && goods.spec.file.length != 0"
+                                  :src="goods.spec.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                                <el-image
+                                  v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                  :src="goods.goods.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                              </el-col>
+                              <el-col :span="20">
+                                <el-col :span="20">
+                                  <el-col :span="24"> {{ goods.goods_name }} </el-col>
+                                  <el-col :span="24"> 规格：{{ goods.spec_name }} </el-col>
+                                </el-col>
+                                <el-col :span="4" class="buy">
+                                  <el-col :span="24">
+                                    X<span>{{ goods.set_num }}</span></el-col
+                                  >
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                          <el-col :span="24" class="buy"> X{{ i.buy_num }} </el-col>
+                          <el-col :span="24" class="buy"> ￥{{ i.sell_money }} </el-col>
+                        </el-col>
+                      </el-col>
+                      <!-- 未支付 -->
+                      <el-col :span="24" v-else-if="item.order.status == '0'">
+                        <el-col :span="24" v-if="i.is_set == '0'">
+                          <el-col :span="24">{{ i.name || '套装名称' }}</el-col>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods.spec._id">
+                            <el-col :span="24" class="bode">
+                              <el-col :span="4" class="image">
+                                <el-image
+                                  v-if="goods.spec.file && goods.spec.file.length != 0"
+                                  :src="goods.spec.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                                <el-image
+                                  v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                  :src="goods.goods.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                              </el-col>
+                              <el-col :span="20">
+                                <el-col :span="20">
+                                  <el-col :span="24"> {{ goods.goods_name }} </el-col>
+                                  <el-col :span="24"> 规格：{{ goods.spec_name }} </el-col>
+                                </el-col>
+                                <el-col :span="4" class="buy">
+                                  <el-col :span="24">
+                                    X<span>{{ goods.set_num }}</span></el-col
+                                  >
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                          <el-col :span="24" class="buy"> X{{ i.buy_num }} </el-col>
+                          <el-col :span="24" class="buy"> ￥{{ i.sell_money }} </el-col>
+                        </el-col>
+                        <el-col :span="24" v-else>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods._id">
+                            <el-col :span="4" class="image">
+                              <el-image v-if="goods.file && goods.file.length != 0" :src="goods.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                              <el-image
+                                v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                :src="goods.goods.file[0].url"
+                                style="width: 60px"
+                                mode="widthFix"
+                              ></el-image>
+                            </el-col>
+                            <el-col :span="20">
+                              <el-col :span="20">
+                                <el-col :span="24"> {{ goods.goods.name }} </el-col>
+                                <el-col :span="24" v-if="i.is_set == '0'">{{ goods.spec_name }}</el-col>
+                                <el-col :span="24" v-else> 规格：{{ goods.name }} </el-col>
+                              </el-col>
+                              <el-col :span="4" class="buy">
+                                <el-col :span="24">
+                                  X<span>{{ goods.buy_num }}</span></el-col
+                                >
+                                <el-col :span="24" class="buy" style="font-size: 20px">
+                                  <p v-if="item.order.type == '0' && goods.price">￥{{ goods.price }}</p>
+                                  <p v-else-if="item.order.type == '0' && !goods.price">￥{{ goods.sell_money }}</p>
+                                  <p v-else-if="item.order.type == '1'">￥{{ goods.group_config.money }}</p>
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
                 </el-col>
               </el-col>
             </el-col>
@@ -32,6 +196,167 @@
                   <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">{{ item.content }}</span>
                   <div class="test" v-if="item.msg_type == '0' && item.content.length > 50">{{ item.content }}</div>
                   <el-image v-if="item.msg_type == '1'" :src="item.content" :preview-src-list="srcList" style="width: 300px" mode="widthFix"> </el-image>
+                  <el-col class="test" :span="20" v-else-if="item.msg_type == '2'">
+                    <el-col :span="5">
+                      <el-image :src="item.goods.file[0].url" style="max-width: 100px; height: 100px"></el-image>
+                    </el-col>
+                    <el-col :span="19" class="test_name">
+                      <p class="goods_name">{{ item.goods.name }}</p>
+                      <p class="goods_time">{{ item.goods.send_time || '7日' }}内发货</p>
+                      <el-button type="primary" size="mini" @click="toDetail('goods', item.content)">查看详情</el-button>
+                    </el-col>
+                  </el-col>
+                  <el-col :span="20" class="test" v-else-if="item.msg_type == '3'">
+                    <el-col :span="24" class="no">
+                      <el-col :span="20">{{ getStatus(item.order.status) }}: {{ item.order.no }}</el-col>
+                      <el-col
+                        :span="4"
+                        v-if="
+                          item.order.status == '1' ||
+                          item.order.status == '2' ||
+                          item.order.status == '3' ||
+                          item.order.status == '2-' ||
+                          item.order.status == '0'
+                        "
+                      >
+                        <el-button v-if="item.order.status == '0'" type="danger" size="mini" @click="toOrderDetail('order', item.content)">查看详情</el-button>
+                        <el-button v-else type="danger" size="mini" @click="toOrderDetail('detail', item.content)">查看详情</el-button>
+                      </el-col>
+                    </el-col>
+                    <el-col :span="24" v-for="i in item.order.goods" :key="i._id">
+                      <!-- 已支付 -->
+                      <el-col :span="24" v-if="item.order.status == '1' || item.order.status == '2' || item.order.status == '3' || item.order.status == '2-'">
+                        <el-col :span="24" v-if="i.is_set != '0'">
+                          <el-col :span="4" class="image">
+                            <el-image v-if="i.file && i.file.length != 0" :src="i.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                            <el-image
+                              v-else-if="i.goods.file && i.goods.file.length != 0"
+                              :src="i.goods.file[0].url"
+                              style="width: 60px"
+                              mode="widthFix"
+                            ></el-image>
+                          </el-col>
+                          <el-col :span="20">
+                            <el-col :span="20">
+                              <el-col :span="24"> {{ i.goods.name }} </el-col>
+                              <el-col :span="24"> 规格：{{ i.name }} </el-col>
+                            </el-col>
+                            <el-col :span="4" class="buy">
+                              <el-col :span="24">
+                                X<span>{{ i.buy_num }}</span></el-col
+                              >
+                              <el-col :span="24" class="buy" style="font-size: 20px">
+                                <p v-if="item.order.type == '0' && i.price">￥{{ i.price }}</p>
+                                <p v-else-if="item.order.type == '0' && !i.price">￥{{ i.sell_money }}</p>
+                                <p v-else-if="item.order.type == '1'">￥{{ i.group_config.money }}</p>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                        <el-col :span="24" v-else>
+                          <el-col :span="24">{{ i.name || '套装名称' }}</el-col>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods.spec._id">
+                            <el-col :span="24" class="bode">
+                              <el-col :span="4" class="image">
+                                <el-image
+                                  v-if="goods.spec.file && goods.spec.file.length != 0"
+                                  :src="goods.spec.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                                <el-image
+                                  v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                  :src="goods.goods.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                              </el-col>
+                              <el-col :span="20">
+                                <el-col :span="20">
+                                  <el-col :span="24"> {{ goods.goods_name }} </el-col>
+                                  <el-col :span="24"> 规格：{{ goods.spec_name }} </el-col>
+                                </el-col>
+                                <el-col :span="4" class="buy">
+                                  <el-col :span="24">
+                                    X<span>{{ goods.set_num }}</span></el-col
+                                  >
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                          <el-col :span="24" class="buy"> X{{ i.buy_num }} </el-col>
+                          <el-col :span="24" class="buy"> ￥{{ i.sell_money }} </el-col>
+                        </el-col>
+                      </el-col>
+                      <!-- 未支付 -->
+                      <el-col :span="24" v-else-if="item.order.status == '0'">
+                        <el-col :span="24" v-if="i.is_set == '0'">
+                          <el-col :span="24">{{ i.name || '套装名称' }}</el-col>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods.spec._id">
+                            <el-col :span="24" class="bode">
+                              <el-col :span="4" class="image">
+                                <el-image
+                                  v-if="goods.spec.file && goods.spec.file.length != 0"
+                                  :src="goods.spec.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                                <el-image
+                                  v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                  :src="goods.goods.file[0].url"
+                                  style="width: 60px"
+                                  mode="widthFix"
+                                ></el-image>
+                              </el-col>
+                              <el-col :span="20">
+                                <el-col :span="20">
+                                  <el-col :span="24"> {{ goods.goods_name }} </el-col>
+                                  <el-col :span="24"> 规格：{{ goods.spec_name }} </el-col>
+                                </el-col>
+                                <el-col :span="4" class="buy">
+                                  <el-col :span="24">
+                                    X<span>{{ goods.set_num }}</span></el-col
+                                  >
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                          <el-col :span="24" class="buy"> X{{ i.buy_num }} </el-col>
+                          <el-col :span="24" class="buy"> ￥{{ i.sell_money }} </el-col>
+                        </el-col>
+                        <el-col :span="24" v-else>
+                          <el-col :span="24" v-for="goods in i.goods" :key="goods._id">
+                            <el-col :span="4" class="image">
+                              <el-image v-if="goods.file && goods.file.length != 0" :src="goods.file[0].url" style="width: 60px" mode="widthFix"></el-image>
+                              <el-image
+                                v-else-if="goods.goods.file && goods.goods.file.length != 0"
+                                :src="goods.goods.file[0].url"
+                                style="width: 60px"
+                                mode="widthFix"
+                              ></el-image>
+                            </el-col>
+                            <el-col :span="20">
+                              <el-col :span="20">
+                                <el-col :span="24"> {{ goods.goods.name }} </el-col>
+                                <el-col :span="24" v-if="i.is_set == '0'">{{ goods.spec_name }}</el-col>
+                                <el-col :span="24" v-else> 规格：{{ goods.name }} </el-col>
+                              </el-col>
+                              <el-col :span="4" class="buy">
+                                <el-col :span="24">
+                                  X<span>{{ goods.buy_num }}</span></el-col
+                                >
+                                <el-col :span="24" class="buy" style="font-size: 20px">
+                                  <p v-if="item.order.type == '0' && goods.price">￥{{ goods.price }}</p>
+                                  <p v-else-if="item.order.type == '0' && !goods.price">￥{{ goods.sell_money }}</p>
+                                  <p v-else-if="item.order.type == '1'">￥{{ goods.group_config.money }}</p>
+                                </el-col>
+                              </el-col>
+                            </el-col>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
                 </el-col>
                 <el-col :span="2" class="right_image">
                   <el-avatar v-if="shop.logo && shop.logo.length != 0" :src="shop.logo[0].url" class="right_icon"></el-avatar>
@@ -40,18 +365,22 @@
               </el-col>
             </el-col>
           </el-col>
-          <!-- </el-col> -->
         </div>
         <el-col :span="24" class="right_thr">
-          <el-col :span="20" class="right_thr_1">
+          <el-col :span="18" class="right_thr_1">
             <el-form ref="form" :model="form" label-width="80px">
               <el-input v-model="form.content" :autosize="{ minRows: 5, maxRows: 7 }" maxlength="-1" placeholder="消息" type="textarea" size="small"></el-input>
             </el-form>
           </el-col>
-          <el-col :span="4" class="right_thr_2">
-            <el-col :span="12" class="btn"><el-button type="success" size="mini" @click="onSubmit('content')">发送</el-button></el-col>
-            <el-col :span="12" class="icon">
-              <i class="el-icon-circle-plus-outline" style="color: #666; font-size: 50px" @click="toUp()"></i>
+          <el-col :span="6" class="right_thr_2">
+            <el-col :span="8" class="button">
+              <el-button type="success" size="mini" @click="onSubmit('content')">发送</el-button>
+            </el-col>
+            <el-col :span="8" class="icon">
+              <i class="el-icon-circle-plus-outline" style="color: #666; font-size: 50px" @click="toUp('file')"></i>
+            </el-col>
+            <el-col :span="8" class="icon">
+              <i class="el-icon-goods" style="color: #666; font-size: 50px" @click="toUp('goods')"></i>
             </el-col>
           </el-col>
         </el-col>
@@ -61,6 +390,7 @@
 </template>
 
 <script>
+import { number } from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'right-1',
@@ -70,12 +400,16 @@ export default {
     shop: { type: Object },
     form: { type: Object },
     srcList: { type: Array },
+    statusList: { type: Array },
     loadingRight: { type: Boolean },
-    // showMore: { type: String },
+    showMore: { type: String },
+    delTop: { type: Number },
   },
   components: {},
   data: function () {
-    return {};
+    return {
+      oldTop: 0,
+    };
   },
   created() {
     this.setBottom();
@@ -84,31 +418,47 @@ export default {
   methods: {
     // 滚送到底部
     setBottom() {
-      const me = this;
       setTimeout(() => {
         this.$nextTick(() => {
-          //一定要在this.$nextTick进行设置
-          me.$refs.scrollContent.scrollTop = 1000000000;
-          var container = this.$el.querySelector('scrolldIV');
-          // container.scrollTop = container.scrollHeight;
-          // console.log(container.scrollHeight);
+          // this.$refs.scrollContent.scrollTop = 1000000000;
+          var msg = document.getElementById('scrolldIV');
+          // let distanceFromBottom = msg.scrollHeight - msg.scrollTop - msg.clientHeight;
+          if (this.delTop > 0) msg.scrollTop = msg.scrollHeight - this.delTop;
+          else msg.scrollTop = msg.scrollHeight; // 滚动高度
+          this.$set(this, `oldTop`, msg.scrollTop);
         });
       }, 100);
     },
-    toUp() {
-      this.$emit('toUp');
+    getStatus(status) {
+      const res = this.statusList.find((f) => f.value === status);
+      if (res) return res.label;
+      return '';
+    },
+    // 查看订单详情
+    toOrderDetail(value, content) {
+      if (value == 'order') {
+        this.$router.push({ path: `/selfShop/order`, query: { order_id: content } });
+      } else if (value == 'detail') {
+        this.$router.push({ path: `/selfShop/order`, query: { orderDetail_id: content } });
+      }
+    },
+    toUp(value) {
+      this.$emit('toUp', value);
+    },
+    toOrder() {
+      this.$emit('toOrder');
+    },
+    toDetail(value, content) {
+      if (value == 'goods') {
+        this.$router.push({ path: `/selfShop/spec/${content}` });
+      }
     },
-    // onMore() {
-    //   this.$emit('onMore');
-    //   this.$nextTick(() => {
-    //     let msg = document.getElementById('scrolldIVs'); // 获取对象
-    //     let distanceFromBottom = msg.scrollHeight - msg.scrollTop - msg.clientHeight;
-    //     msg.scrollTop = distanceFromBottom; // 滚动高度
-    //   });
-    // },
     onSubmit(data) {
       this.$emit('onSubmit', data);
     },
+    onMore() {
+      this.$emit('onMore', this.oldTop);
+    },
   },
   updated: function () {
     this.setBottom();
@@ -146,9 +496,12 @@ export default {
     color: #666;
   }
 }
+.right_btn {
+  padding: 20px 0;
+}
 .scroll-div {
   background: rgb(246, 246, 246);
-  height: 65vh;
+  height: 62vh;
   width: 56vw;
   overflow: auto;
   margin: 0 15px;
@@ -192,6 +545,20 @@ export default {
       background: rgb(235, 249, 162);
       padding: 10px;
       word-wrap: break-word;
+      .test_name {
+        text-align: center;
+        .goods_name {
+          font-size: 18px;
+          margin: 10px 0;
+        }
+        .goods_time {
+          margin: 10px 0;
+          font-size: 16px;
+        }
+      }
+      .no {
+        margin: 4px 0;
+      }
     }
   }
 }
@@ -224,9 +591,25 @@ export default {
   padding: 3px 10px 3px 13px;
   .right_thr_2 {
     padding: 20px;
-    .btn {
+    .button {
       margin: 15px 0 0 0;
     }
   }
 }
+.buy {
+  text-align: right;
+  font-size: 18px;
+}
+.total {
+  text-align: right;
+  font-size: 18px;
+  margin: 5px 0 10px 0;
+}
+.sell {
+  color: red;
+}
+.btn {
+  text-align: right;
+  margin: 5px 0 10px 0;
+}
 </style>

src/views/selfShop/order/index.vue

@@ -124,9 +124,12 @@ export default {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
     // 查询
     async search({ skip = 0, limit = this.$limit, ...info } = {}) {
-      if (this.$route.query.id) {
-        let data = this.$route.query.id;
+      if (this.$route.query.orderDetail_id) {
+        let data = this.$route.query.orderDetail_id;
         this.toDetail_t(data);
+      } else if (this.$route.query.order_id) {
+        let data = this.$route.query.order_id;
+        this.toDetail(data);
       } else {
         if (this.active) this.$set(this, 'activeName', this.active);
         let condition = _.cloneDeep(this.searchForm);
@@ -184,12 +187,16 @@ export default {
       this.search();
     },
     toBack() {
-      this.view = 'list';
-      this.loadings = true;
-      if (this.$route.query.id) {
-        delete this.$route.query.id;
+      if (this.$route.query.orderDetail_id || this.$route.query.order_id) {
+        window.history.go('-1');
+      } else {
+        this.view = 'list';
+        this.loadings = true;
+        if (this.$route.query.id) {
+          delete this.$route.query.id;
+        }
+        this.search(this.searchQuery);
       }
-      this.search(this.searchQuery);
     },
     getAddress(i) {
       let name = i.name + ',' + i.phone;
@@ -229,9 +236,9 @@ export default {
     active() {
       return this.$route.query.activeName;
     },
-    orders_id() {
-      return this.$route.query.id;
-    },
+    // orders_id() {
+    //   return this.$route.query.id;
+    // },
   },
   metaInfo() {
     return { title: this.$route.meta.title };