Feat(客服)：新增进入客服页自动发送商品信息功能

assets/css/v12-style.less

@@ -3,8 +3,8 @@
 @dark-color: #333333;
 @white-color: #fff;
 
-@colors: #C52733, #333333, #fff;
-@classnames: primary, dark, white;
+@colors: #C52733, #333333, #fff, #666;
+@classnames: primary, dark, white, secondary-dark;
 /*=====================================*/ 
 
 each(@colors, {
@@ -19,15 +19,28 @@ each(@colors, {
   }
 });
 
+/*===================字体大小======================*/ 
 .generateFontSize(@i) when (@i <= 80) {
   .v12-font-@{i} {
     font-size: @i * 1rpx !important;
   }
-  .generateFontSize(@i + 4);
+  .generateFontSize(@i + 2);
 }
 
 .generateFontSize(0);
 
+.v12-font-bold{
+  font-weight: bold !important;
+}
+.generateFontWeight(@n, @i: 100) when (@i <= @n) {
+  .v12-font-weight-@{i} {
+    font-weight: @i !important;
+  }
+  .generateFontWeight(@n, (@i + 100))
+}
+.generateFontWeight(900);
+
+/*==================内外边距====================*/ 
 .generateMarginAndPadding(@n, @i:0) when (@i<= @n)  {
   @baseNum: @i * 8rpx;
   .v12-mt-@{i} {
@@ -75,10 +88,24 @@ each(@colors, {
   .generateMarginAndPadding(@n, (@i + 1))
 }
 .generateMarginAndPadding(40);
-.v12-font-bold{
-  font-weight: bold !important;
-}
 
+/*==================圆角====================*/ 
+.generateRadius(@n, @i: 0) when (@i <= @n) {
+  @baseRadius: @i * 1rpx;
+  .v12-radius-@{i} {
+    border-radius: @baseRadius
+  }
+  .generateRadius(@n, (@i + 1))
+}
+.generateRadius(100);
+/*=========================================*/ 
+
+.v12-d-flex{
+  display: flex !important;
+}
+.v12-flex-column {
+  flex-direction: column;
+}
 .v12-align-center{
   display: flex;
   align-items: center;
@@ -87,6 +114,10 @@ each(@colors, {
   display: flex;
   justify-content: center;
 }
+.v12-justify-between{
+  display: flex;
+  justify-content: space-between;
+}
 .v12-d-grid-columns-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;

pages/shop/GoodsCon/index.vue

@@ -663,8 +663,18 @@ export default {
   },
   methods: {
     goRoom() {
+      const params = {
+        goodsId: this.productId,
+        goodsName: this.attr.productSelect.store_name,
+        skuStr: this.attrValue,
+        price: this.attr.productSelect.price,
+        seckillId: this.activityId,
+        cover: this.attr.productSelect.image,
+        goodsData: '',
+        seckillData: ''
+      }
       uni.navigateTo({
-        url: `/pkg_common/views/room?id=${this.storeInfo.merId}&name=${this.storeInfo.merName}`
+        url: `/pkg_common/views/room?id=${this.storeInfo.merId}&name=${this.storeInfo.merName}&params=${JSON.stringify(params)}`
       })
     },
     goodsDetail: function (item) {

pkg_common/views/room.vue

@@ -13,6 +13,7 @@
             <view class="msg" v-if="item.msg_type===1">
               <image class="img" :src="item.msg_content" @click="preview(item.msg_content)"></image>
             </view>
+            
           </view>
         </view>
 
@@ -23,6 +24,24 @@
             <view class="msg" v-if="item.msg_type===1">
               <image class="img" :src="item.msg_content" @click="preview(item.msg_content)"></image>
             </view>
+            <view class="msg v12-d-flex" style="box-sizing: content-box" v-if="item.msg_type===2">
+              <view class="goods-logo">
+                <image class="img v12-radius-8" :src="params.cover"></image>
+              </view>
+              <view class="conent v12-ml-3 v12-justify-between v12-flex-column">
+                <view class="">
+                  <view class="goodsName one-t v12-font-26">
+                    {{ params.goodsName }}
+                  </view>
+                  <view class="goodsSku v12-secondary-dark-text v12-font-22 v12-font-weight-400 one-t">
+                    {{ params.skuStr }}
+                  </view>
+                </view>
+                <view class="price v12-primary-text v12-font-24">
+                  ￥{{ params.price }}
+                </view>
+              </view>
+            </view>
           </view>
           <image class="cover" :src="item.header || webUrl+'/20221114155314348118.png'"/>
         </view>
@@ -67,12 +86,14 @@ export default {
 
       roomId: null, //房间ID
       content: "", //消息内容
-      list: [], //消息列表
+      list: [], //消息列表,
+      params: {}
     }
   },
   onLoad(options) {
     this.storeId = options.id;
     this.merName = options.name;
+    this.params = options.params && JSON.parse(options.params) || {}
     if (this.merName!="undefined" && this.merName!="null") {
       uni.setNavigationBarTitle({
         title: this.merName
@@ -165,6 +186,11 @@ export default {
         console.log('WebSocket连接已打开！', res);
         this.socketOpen = true;
         this.createRoom();
+        if(Object.values(this.params).length > 0) {
+          this.content = JSON.stringify(this.params)
+          // this.list.push(this.params)
+          this.userSend(2)
+        }
       });
 
       uni.onSocketError(err => {
@@ -185,7 +211,7 @@ export default {
       this.content = event.detail.value;
     },
 
-    userSend() {
+    userSend(msg_type) {
       if (this.content.length === 0) return;
 
       let param = {
@@ -195,7 +221,7 @@ export default {
         username: this.userInfo.nickname,
         header: this.userInfo.avatar,
         room_id: this.roomId,
-        msg_type: 0,
+        msg_type: msg_type === 2 ? msg_type : 0,
         content: this.content,
         token: this.token
       }
@@ -204,6 +230,7 @@ export default {
     },
 
     createRoom() {
+      
       let param = {
         type: "join",
         user_type: 0,
@@ -265,6 +292,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+.goodsName,.goodsSku{
+  max-width: 400rpx;
+}
 .common-room {
   min-height: 100vh;
   background: #F5F5F5;
@@ -314,8 +344,8 @@ export default {
       word-wrap: break-word;
 
       .img {
-        max-width: 214rpx;
-        max-height: 214rpx;
+        max-width: 140rpx;
+        max-height: 140rpx;
         vertical-align: middle;
       }
     }