refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/product/customerservice/index.vue

@@ -3,89 +3,81 @@
 		<chat></chat>
 	</view>
 </template>
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		},
-		onLoad (e) {
-			// 腾讯云智服客服插件需在 manifest.json 的 mp-weixin.plugins 中注册后方可使用，
-			// 未注册时 requirePlugin 会抛出 "has not registered any plugins"，此处做容错处理。
-			let chat
-			try {
-				chat = requirePlugin('myPlugin')
-			} catch (err) {
-				uni.showToast({
-					title: '客服功能暂未配置',
-					icon: 'none',
-					duration: 2000
-				})
-				return
-			}
-			const params = JSON.parse((decodeURIComponent(e.params)))
-			chat.init({
-				sign: params.mpSign,  //必传，公司渠道唯一标识，腾讯云智服后台系统创建「小程序插件」渠道后，在「渠道管理」获取
-				token: params.token, //非必填
-				uid: params.uuid,   //用户唯一标识，如果没有则不填写，默认为空
-				title: params.storageName, //非必填，如果未填写，默认获取配置标题
-				isRMB: '', //商品是否显示人民币￥,默认显示，false不显示
-				data: {    //参数c1,c2,c3,c4,c5用于传递用户信息，参数d1,d2,d3,d4,d5,d6用于传递商品信息，默认为空
-				  c1: '',
-				  c2: '',
-				  c3: '',
-				  c4: '',
-				  c5: '',
-				  d1: params.goodsName, //商品描述
-				  d2: params.price, //价格
-				  d3: '', //原价格
-				  d4: params.goodsImg, //展示商品图片链接
-				  d5: '', //商品跳转链接
-				  d6: params.goodsId, //商品id
-				  data: ''//加密串,非必填
-				},
-				viewUrl(res){  //需要跳转外部链接，则需要配置一个web-view
-				if (res) {
-				  wx.navigateTo({
-					url: '/pages/webview/index?href=' + res
-				  })
-				}
-				},
-				setTitle(res){  //设置标题
-				if (res) {
-				  wx.setNavigationBarTitle({
-					title: res
-				  })
-				}
-				},
-				setBarColor(res) {   //设置导航栏背景色
-				if (res) {
-				  wx.setNavigationBarColor({
-					frontColor: '#ffffff',
-					backgroundColor: res
-				  })
-				}
-				},
-				success(res){  //初始化成功时调用
-				if (res.data == 'success') {
-				  console.log('success');
-				}
-				},
-				fail(res){    //初始化失败时调用
-				if (res.data == 'initError') {
-				  console.log(res.message);
-				}
-				},
-				leave(res){       //离开会话页面
-				if (res) {
-				  console.log(res);
-				}
-				}
-			})
-		}
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+
+onLoad((e: any) => {
+	// 腾讯云智服客服插件需在 manifest.json 的 mp-weixin.plugins 中注册后方可使用，
+	// 未注册时 requirePlugin 会抛出 "has not registered any plugins"，此处做容错处理。
+	let chat
+	try {
+		chat = requirePlugin('myPlugin')
+	} catch (err) {
+		uni.showToast({
+			title: '客服功能暂未配置',
+			icon: 'none',
+			duration: 2000
+		})
+		return
 	}
-</script>
+	const params = JSON.parse(decodeURIComponent(e.params))
+	chat.init({
+		sign: params.mpSign,
+		token: params.token,
+		uid: params.uuid,
+		title: params.storageName,
+		isRMB: '',
+		data: {
+		  c1: '',
+		  c2: '',
+		  c3: '',
+		  c4: '',
+		  c5: '',
+		  d1: params.goodsName,
+		  d2: params.price,
+		  d3: '',
+		  d4: params.goodsImg,
+		  d5: '',
+		  d6: params.goodsId,
+		  data: ''
+		},
+		viewUrl(res: string){
+		if (res) {
+		  wx.navigateTo({
+			url: '/pages/webview/index?href=' + res
+		  })
+		}
+		},
+		setTitle(res: string){
+		if (res) {
+		  wx.setNavigationBarTitle({
+			title: res
+		  })
+		}
+		},
+		setBarColor(res: string) {
+		if (res) {
+		  wx.setNavigationBarColor({
+			frontColor: '#ffffff',
+			backgroundColor: res
+		  })
+		}
+		},
+		success(res: any){
+		if (res.data == 'success') {
+		  console.log('success');
+		}
+		},
+		fail(res: any){
+		if (res.data == 'initError') {
+		  console.log(res.message);
+		}
+		},
+		leave(res: any){
+		if (res) {
+		  console.log(res);
+		}
+		}
+	})
+})
+</script>