客服

CoreCms.Net.Uni-App/CoreShop/pages/index/default/default.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
     <!-- 页面主体 -->
     <view>
         <!--提示框组件-->
@@ -13,7 +13,7 @@
         <!--版权组件-->
         <copyright></copyright>
         <!--客服组件-->
-        <button class="floatingButton" hover-class="none" open-type="contact" bindcontact="showChat" :session-from="kefupara">
+        <button class="floatingButton" hover-class="none" open-type="contact" bindcontact="showChat" :session-from="kefupara" @click="kefuClick">
             <u-icon name="server-man" color="#e54d42" size="60"></u-icon>
         </button>
         <!--返回顶部组件-->
@@ -93,6 +93,19 @@
             about() {
 
             },
+			kefuClick(){
+				console.log('点击客服')
+				console.log(this.userInfo);
+				if(this.userInfo==null){
+					uni.showToast({
+						title:"未登录"
+					})
+					return;
+				}
+				uni.navigateTo({
+				    url: '/pages/index/default/kefu'
+				});
+			},
             goSearch() {
                 uni.navigateTo({
                     url: '/pages/search/search'

CoreCms.Net.Uni-App/CoreShop/pages/index/default/kefu.vue

@@ -0,0 +1,100 @@
+<template>
+    
+    <view>
+       	<web-view   :webview-styles="webviewStyles" :src="url"></web-view>
+    </view>
+</template>
+<script>
+    import { mapMutations, mapActions, mapState } from 'vuex';
+   
+    import { goods } from '@/common/mixins/mixinsHelper.js';
+    export default {
+        mixins: [goods],
+        components: {
+          
+        },
+        data() {
+            return {
+				url:"",
+				kefuUrlTemplate: "", // 后台传入的客服地址模板
+				webviewStyles: {
+					top:0,
+					width:'100%',
+					height:'100%'
+				}
+            };
+        },
+        computed: {
+            ...mapState({
+                hasLogin: state => state.hasLogin,
+                userInfo: state => state.userInfo,
+            }),
+            hasLogin: {
+                get() {
+                    return this.$store.state.hasLogin;
+                },
+                set(val) {
+                    this.$store.commit('hasLogin', val);
+                }
+            },
+            userInfo: {
+                get() {
+                    return this.$store.state.userInfo;
+                },
+                set(val) {
+                    this.$store.commit('userInfo', val);
+                }
+            },
+ 
+        },
+		onReady() {
+			 
+			},
+        onLoad(e) {
+         console.log(this.userInfo);
+		 // 后台传入的客服地址模板
+		 const kefuUrlTemplate = "http://kefu.zpc-xy.com/chat/mobile?noCanClose=1&token=18b7482b8b1301e9b2309522859ff8cb&openid={openid}&nickName={nickName}&phone={phone}&avatar={avatar}";
+		 
+		 // 使用新的方法生成客服链接
+		 this.url = this.generateKefuUrl(kefuUrlTemplate);
+		 console.log('生成的客服链接:', this.url);
+        },
+        methods: {
+            about() {
+
+            },
+            
+            // 生成客服链接的方法
+            generateKefuUrl(urlTemplate) {
+                if (!this.userInfo) {
+                    console.error('用户信息不存在');
+                    return '';
+                }
+                
+                if (!urlTemplate) {
+                    console.error('客服地址模板不存在');
+                    return '';
+                }
+                
+                // 获取用户数据并映射
+                const openid = this.userInfo.id || '';
+                const phone = this.userInfo.mobile || '';
+                const nickName = this.userInfo.nickName || '';
+                const avatar = this.userInfo.avatarImage || '';
+                
+                // 替换URL模板中的占位符，并对每个参数进行URL编码转义
+                let finalUrl = urlTemplate
+                    .replace('{openid}', openid)
+                    .replace('{phone}', phone)
+                    .replace('{nickName}',nickName)
+                    .replace('{avatar}',avatar);
+                
+                return finalUrl;
+            },
+ 
+        },
+    };
+</script>
+
+<style lang="scss">
+</style>