更新

src/layout/enterprise/contextxx.vue

@@ -37,7 +37,7 @@ export default {
     ...mapActions(['query', 'fetch']),
     ...personalChat({ getChatList: 'query' }),
     async search() {
-      let res = await this.query({ seller_id: this.user.uid });
+      let res = await this.query({ receiver_id: this.user.uid });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
         this.onMessage();

src/layout/market/context.vue

@@ -69,27 +69,51 @@
           </el-button>
         </div>
       </el-col>
-      <el-col :span="24" class="anniu"><el-button @click="onSubmit" type="primary">洽谈交易</el-button></el-col>
+      <el-col :span="24" class="anniu">
+        <el-button type="primary" @click="btnPhone()" v-if="this.user.uid != detailInfo.userid">对接聊天</el-button>
+
+        <el-button v-if="this.user.uid != detailInfo.userid" @click="onSubmit()" type="success">洽谈交易</el-button>
+
+        <!-- <el-button @click="onSubmit" type="success">对接聊天</el-button><el-button @click="onSubmit" type="primary">洽谈交易</el-button></el-col -->
+      </el-col>
+      <el-dialog title="对接聊天" :visible.sync="dialogTableVisible">
+        <el-col :span="24" class="two">
+          <chat :room="room"></chat>
+        </el-col>
+      </el-dialog>
     </el-col>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+import chat from '@/layout/market/parts/chat.vue';
+const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
 export default {
   name: 'context',
   props: {
     detailInfo: null,
   },
-  components: {},
+  components: {
+    chat,
+  },
   data: () => ({
     dialogTableVisible: false,
     dialogFormVisible: false,
     scope: '123',
     introduction: '123',
+    room: {},
   }),
   created() {},
-  computed: {},
+  computed: {
+    ...mapState(['user']),
+  },
   methods: {
+    // ...mapProduct(['fetch']),
+    ...personalRoom(['create', 'countDelete']),
+    ...transaction({ buyProduct: 'create' }),
     scopeMore() {
       this.scope = '';
     },
@@ -109,6 +133,34 @@ export default {
       console.log(this.policyInfo);
       this.$emit('onSubmit', this.detailInfo);
     },
+    async btnPhone() {
+      this.dialogTableVisible = true;
+      console.log(this.room.id);
+
+      if (!this.room.id) {
+        //TODO 请求房间号
+        let obj = {};
+        if (!this.user.uid) {
+          this.$message.error('游客身份无法与卖家对话,请先注册');
+          return;
+        } else {
+          obj.buyer_id = this.user.uid;
+          obj.buyer_name = this.user.name;
+        }
+        if (!this.detailInfo.userid) {
+          this.$message.error('缺少卖家信息,请联系卖家或管理员');
+          return;
+        } else {
+          obj.seller_id = this.detailInfo.uid;
+          obj.seller_name = this.detailInfo.contact_user;
+        }
+        console.log(obj);
+        let res = await this.create(obj);
+        if (this.$checkRes(res)) {
+          this.$set(this, `room`, res.data);
+        }
+      }
+    },
   },
 };
 </script>
@@ -300,4 +352,12 @@ p {
   float: left;
   text-align: center;
 }
+
+/deep/.el-dialog__body {
+  padding: 15px 20px;
+  color: #606266;
+  font-size: 14px;
+  height: 660px;
+  word-break: break-all;
+}
 </style>

src/layout/market/parts/chat.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="chats">
+    <el-row>
+      <el-col :span="24" class="info chat_frame" id="chat">
+        <template v-for="(i, index) in talk">
+          <template v-if="isSender(i, index)">
+            <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
+              <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
+              <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
+            </el-col>
+          </template>
+          <template v-else>
+            <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
+              <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
+              <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
+            </el-col>
+          </template>
+        </template>
+      </el-col>
+      <el-col :span="24" style="text-align:right">
+        <el-button type="primary" size="mini" @click="sendMessage" style="margin-bottom:10px">发送</el-button>
+        <wang-editor v-model="content" ref="editor"></wang-editor>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import wangEditor from '@/components/wang-editor.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
+export default {
+  name: 'chats',
+  props: {
+    room: { type: Object },
+  },
+  components: { wangEditor },
+  data: () => {
+    return {
+      content: '',
+      talk: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...personalChat(['create', 'query']),
+    async search() {
+      let res = await this.query({ personroom_id: this.room.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `talk`, res.data);
+        this.turnBottom();
+      }
+    },
+    async sendMessage() {
+      if (this.content != '') {
+        let obj = { personroom_id: this.room.id, content: this.content, sender_id: this.user.uid, sender_name: this.user.name, send_time: '13:00' };
+        let keys = Object.keys(this.room);
+        let fres = keys.find(f => this.room[f] == this.user.uid);
+        obj.receiver_id = fres === 'buyer_id' ? this.room['seller_id'] : this.room['buyer_id'];
+        obj.receiver_name = fres === 'buyer_id' ? this.room['seller_name'] : this.room['buyer_name'];
+        let res = await this.create(obj);
+        this.$refs.editor.setContent();
+        this.$set(this, `content`, '');
+        this.$forceUpdate();
+        if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
+          this.talk.push(res.data);
+          this.turnBottom();
+        }
+      } else this.$message.error('请输入信息后发送');
+    },
+    channel() {
+      //TODO 修改订阅地址
+      if (!this.room.id) {
+        console.warn('未获取到房间id,无法进行订阅');
+        return;
+      }
+      this.$stomp({
+        [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.talk.push(body);
+        this.turnBottom();
+      }
+    },
+    turnBottom() {
+      this.$nextTick(() => {
+        document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
+      });
+    },
+    isSender(data) {
+      return this.user.uid == data.sender_id;
+    },
+  },
+  watch: {
+    room: {
+      handler(val) {
+        if (val.id) this.search();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chat_frame {
+  height: 350px;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  overflow-y: auto;
+}
+.info {
+  float: left;
+  width: 100%;
+  padding: 15px;
+}
+/deep/.info p {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.senderTime {
+  float: left;
+  width: 100%;
+  text-align: left;
+}
+.receverTime {
+  float: right;
+  width: 100%;
+}
+.receverTime span:first-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
+.receverTime span:last-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
+</style>

src/layout/market/zhuanjia.vue

@@ -48,26 +48,46 @@
             <span v-else @click="resumeMore1()">收起</span>
           </el-button>
         </div>
-        <el-col :span="24" class="anniu"><el-button @click="onSubmit" type="primary">洽谈交易</el-button></el-col>
+        <el-col :span="24" class="anniu">
+          <el-button type="primary" @click="btnPhone()" v-if="this.user.uid != zhuanjiainfo.userid">对接聊天</el-button>
+          <el-button v-if="this.user.uid != zhuanjiainfo.userid" @click="zjsubmit()" type="success">洽谈交易</el-button></el-col
+        >
       </el-col>
+      <el-dialog title="对接聊天" :visible.sync="dialogTableVisible">
+        <el-col :span="24" class="two">
+          <chat :room="room"></chat>
+        </el-col>
+      </el-dialog>
     </el-col>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+import chat from '@/layout/market/parts/chat.vue';
+const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
 export default {
   name: 'context',
   props: {
     zhuanjiainfo: null,
   },
-  components: {},
+  components: { chat },
   data: () => ({
+    dialogTableVisible: false,
+    dialogFormVisible: false,
+    room: {},
     scope: '123',
     resume: '123',
   }),
   created() {},
-  computed: {},
+  computed: {
+    ...mapState(['user']),
+  },
   methods: {
+    ...personalRoom(['create', 'countDelete']),
+    ...transaction({ buyProduct: 'create' }),
     scopeMore() {
       this.scope = '';
     },
@@ -83,9 +103,38 @@ export default {
     resumeMore1() {
       this.resume = '123';
     },
-    onSubmit() {
-      console.log(this.zhuanjiainfo.id);
-      this.$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: this.zhuanjiainfo.id } });
+    zjsubmit() {
+      console.log(this.policyInfo);
+      this.$emit('zjsubmit', this.zhuanjiainfo);
+    },
+
+    async btnPhone() {
+      this.dialogTableVisible = true;
+      console.log(this.room.id);
+      if (!this.room.id) {
+        //TODO 请求房间号
+        let obj = {};
+        if (!this.user.uid) {
+          this.$message.error('游客身份无法与卖家对话,请先注册');
+          return;
+        } else {
+          obj.buyer_id = this.user.uid;
+          obj.buyer_name = this.user.name;
+        }
+        if (!this.zhuanjiainfo.userid) {
+          this.$message.error('缺少卖家信息,请联系卖家或管理员');
+          return;
+        } else {
+          obj.seller_id = this.zhuanjiainfo.id;
+          obj.seller_name = this.zhuanjiainfo.name;
+        }
+        console.log(obj);
+
+        let res = await this.create(obj);
+        if (this.$checkRes(res)) {
+          this.$set(this, `room`, res.data);
+        }
+      }
     },
   },
 };
@@ -259,4 +308,12 @@ p {
   float: left;
   text-align: center;
 }
+
+/deep/.el-dialog__body {
+  padding: 15px 20px;
+  color: #606266;
+  font-size: 14px;
+  height: 660px;
+  word-break: break-all;
+}
 </style>

src/views/market/marketlists.vue

@@ -73,7 +73,7 @@
           <context :detailInfo="detailInfo" @onSubmit="onSubmit"></context>
         </el-col>
         <el-col :span="19" v-else-if="display == '3'" class="info">
-          <zhuanjia :zhuanjiainfo="zhuanjiainfo"></zhuanjia>
+          <zhuanjia :zhuanjiainfo="zhuanjiainfo" @zjsubmit="zjsubmit"></zhuanjia>
         </el-col>
       </el-col>
     </el-col>
@@ -264,7 +264,32 @@ export default {
       } else {
       }
     },
+
+    async zjsubmit() {
+      console.log(this.zhuanjiainfo);
+      let form = {};
+      form.userid = this.user.uid;
+      form.username = this.user.name;
+      form.product_id = this.zhuanjiainfo.id;
+      form.product_name = this.zhuanjiainfo.name;
+      form.market_userid = this.zhuanjiainfo.id;
+      form.market_username = this.zhuanjiainfo.name;
+      form.status = '0';
+      let res = await this.transactioncreate(form);
+      this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
+    },
     async onSubmit() {
+      let form = {};
+      form.userid = this.user.uid;
+      form.username = this.user.name;
+      form.product_id = this.detailInfo.id;
+      form.product_name = this.detailInfo.name;
+      form.market_userid = this.detailInfo.userid;
+      form.market_username = this.detailInfo.contact_user;
+      form.status = '0';
+      let res = await this.transactioncreate(form);
+      this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
+
       // console.log(this.user.uid);
       // let form = {};
       // form.userid = this.user.uid;
@@ -286,7 +311,7 @@ export default {
       // shenhe.product_id = this.detailInfo.userid;
       // console.log(shenhe);
       // let ress = await this.tranauditcreate(shenhe);
-      this.$router.push({ path: '/live/hall/dock/dockDetail', query: { id: this.detailInfo.id } });
+      // this.$router.push({ path: '/live/hall/dock/dockDetail', query: { id: this.detailInfo.id } });
     },
   },
 };

src/views/market/parts/chat.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="chats">
+    <el-row>
+      <el-col :span="24" class="info chat_frame" id="chat">
+        <template v-for="(i, index) in talk">
+          <template v-if="isSender(i, index)">
+            <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
+              <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
+              <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
+            </el-col>
+          </template>
+          <template v-else>
+            <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
+              <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
+              <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
+            </el-col>
+          </template>
+        </template>
+      </el-col>
+      <el-col :span="24" style="text-align:right">
+        <el-button type="primary" size="mini" @click="sendMessage" style="margin-bottom:10px">发送</el-button>
+        <wang-editor v-model="content" ref="editor"></wang-editor>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import wangEditor from '@/components/wang-editor.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
+export default {
+  name: 'chats',
+  props: {
+    room: { type: Object },
+  },
+  components: { wangEditor },
+  data: () => {
+    return {
+      content: '',
+      talk: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...personalChat(['create', 'query']),
+    async search() {
+      let res = await this.query({ personroom_id: this.room.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `talk`, res.data);
+        this.turnBottom();
+      }
+    },
+    async sendMessage() {
+      if (this.content != '') {
+        let obj = { personroom_id: this.room.id, content: this.content, sender_id: this.user.uid, sender_name: this.user.name, send_time: '13:00' };
+        let keys = Object.keys(this.room);
+        let fres = keys.find(f => this.room[f] == this.user.uid);
+        obj.receiver_id = fres === 'buyer_id' ? this.room['seller_id'] : this.room['buyer_id'];
+        obj.receiver_name = fres === 'buyer_id' ? this.room['seller_name'] : this.room['buyer_name'];
+        let res = await this.create(obj);
+        this.$refs.editor.setContent();
+        this.$set(this, `content`, '');
+        this.$forceUpdate();
+        if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
+          this.talk.push(res.data);
+          this.turnBottom();
+        }
+      } else this.$message.error('请输入信息后发送');
+    },
+    channel() {
+      //TODO 修改订阅地址
+      if (!this.room.id) {
+        console.warn('未获取到房间id,无法进行订阅');
+        return;
+      }
+      this.$stomp({
+        [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.talk.push(body);
+        this.turnBottom();
+      }
+    },
+    turnBottom() {
+      this.$nextTick(() => {
+        document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
+      });
+    },
+    isSender(data) {
+      return this.user.uid == data.sender_id;
+    },
+  },
+  watch: {
+    room: {
+      handler(val) {
+        if (val.id) this.search();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chat_frame {
+  height: 350px;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  overflow-y: auto;
+}
+.info {
+  float: left;
+  width: 100%;
+  padding: 15px;
+}
+/deep/.info p {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.senderTime {
+  float: left;
+  width: 100%;
+  text-align: left;
+}
+.receverTime {
+  float: right;
+  width: 100%;
+}
+.receverTime span:first-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
+.receverTime span:last-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
+</style>