增加跳转企业微信客服示例

pages/index/indexs.vue

@@ -2,11 +2,9 @@
 	<view class="content min-page bg-f7">
 		<view class="contentbox">
 			<template v-if="shopExtend.length">
-				<image class="bg" :src="shopExtend[0].value" mode="aspectFill"
+				<image class="bg" :src="shopExtend[0].value" mode="aspectFill" v-if="!isJsonArrayString(shopExtend[0].value)"></image>
-					v-if="!isJsonArrayString(shopExtend[0].value)"></image>
 				<swiper class="swiper" autoplay circular v-else>
-					<swiper-item class="swiper-item" v-for="(item, index) in JSON.parse(shopExtend[0].value)"
+					<swiper-item class="swiper-item" v-for="(item, index) in JSON.parse(shopExtend[0].value)" :key="index">
-						:key="index">
 						<image class="swiper-bg" :src="item"></image>
 					</swiper-item>
 				</swiper>
@@ -29,7 +27,7 @@
 				<image :src="imgs.code" class="code"></image>
 			</view>
 		</view>
-
+		<!-- <button type="primary" @click="openContact">打开客服</button> -->
 		<view class="new-menus-box">
 			<view class="new-menus layout2" v-if="allConfig.takeout">
 				<view class="diner" @click="scanCodehandle(0)">
@@ -60,7 +58,6 @@
 
 				<view class="u-font-28 color-999">一键分享，快速拼单</view>
 			</view>
-
 		</view>
 
 		<view class="points" @click="toIntegralMall">
@@ -122,28 +119,36 @@
 </template>
 
 <script setup>
-	import attractPopup from '@/components/attract-popup.vue';
+import attractPopup from '@/components/attract-popup.vue';
-	import {
+import { homeData } from '@/common/api/market/index.js';
-		homeData
+import { getMemberConfig, getRechargeConfig } from '@/common/api/index/index.js';
-	} from '@/common/api/market/index.js';
+import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
-	import {
+import { isJsonArrayString } from '@/utils/util.js';
-		getMemberConfig,
-		getRechargeConfig
-	} from '@/common/api/index/index.js';
-	import {
-		ref,
-		reactive,
-		defineProps,
-		defineEmits,
-		onMounted
-	} from 'vue';
-	import {
-		isJsonArrayString
-	} from '@/utils/util.js';
 
-	const attractPopupRef = ref(null);
+function openContact() {
+	wx.openCustomerServiceChat({
+		corpId: 'wwc76ab19fa6df267f',
+		extInfo: {
+			url: 'https://work.weixin.qq.com/kfid/kfc40ac2dc5e20c2e8e'
+		},
+		// 成功回调
+		success: (res) => {
+			console.log('跳转企业微信客服成功', res);
+		},
+		// 失败回调
+		fail: (err) => {
+			console.error('跳转企业微信客服失败', err);
+			uni.showToast({
+				title: '跳转客服失败，请稍后重试',
+				icon: 'none'
+			});
+		}
+	});
+}
 
-	const imgs = {
+const attractPopupRef = ref(null);
+
+const imgs = {
 	recharge: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/2f22c0ced494497e8d6f981832b191c9.png',
 	share: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/bcb8d461e96d445ba40256079da775b3.png',
 	vip: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/cfc3bf5ba12747c6ada4d5a388aceca3.png',
@@ -155,79 +160,75 @@
 	code: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/044dcaf913054f03a9db7983f048b1e6.png',
 	defaultAvatar: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/b98d2c7110e847f996e8d7ba4342f0a5.png',
 	taocan: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/1eb9aa9b865b47b39ab9d7ac404601a9.png'
-	};
+};
-	// 定义接收的属性
+// 定义接收的属性
-	const props = defineProps({
+const props = defineProps({
 	shopExtend: {
 		type: Array,
 		default: []
 	}
-	});
+});
 
-	function toGroupBuying() {
+function toGroupBuying() {
 	uni.navigateTo({
 		url: '/groupBuying/index/index'
-		})
+	});
-	}
+}
 
-	function toFenxiao() {
+function toFenxiao() {
 	uni.navigateTo({
 		url: '/distribution/shop-detail/index?shopId=' + uni.cache.get('shopId')
 	});
-	}
+}
 
-	function toIntegralMall() {
+function toIntegralMall() {
 	uni.navigateTo({
 		url: '/scoreShop/index/index?shopId=' + uni.cache.get('shopId')
 	});
-	}
+}
 
-	import {
+import { productStore } from '@/stores/user.js';
-		productStore
+import { onShow } from '@dcloudio/uni-app';
-	} from '@/stores/user.js';
-	import {
-		onShow
-	} from '@dcloudio/uni-app';
 
-	// 显示弹窗
+// 显示弹窗
-	const popupShow = ref(false);
+const popupShow = ref(false);
-	const scanCodehandle = (i) => {
+const scanCodehandle = (i) => {
 	popupShow.value = true;
-	};
+};
 
-	// 预点单
+// 预点单
-	function beforehandOrderHandle() {
+function beforehandOrderHandle() {
 	popupShow.value = false;
 	uni.cache.set('dinersNum', 1);
 	uni.cache.set('tableCode', shopUserInfo.id);
 	uni.navigateTo({
 		url: '/pages/product/index?type=beforehand'
 	});
-	}
+}
 
-	// 扫码点餐
+// 扫码点餐
-	async function scanOrderHandle() {
+async function scanOrderHandle() {
 	popupShow.value = false;
 	const store = productStore();
 	await store.scanCodeactions();
-	}
+}
 
-	function toTaocan() {
+function toTaocan() {
 	uni.navigateTo({
 		url: '/userPackage/index/index'
-		})
+	});
-	}
+}
 
-	const memberindex = (url) => {
+const memberindex = (url) => {
 	uni.pro.navigateTo(url, {
 		shopId: uni.cache.get('shopId'),
 		type: 'index'
 	});
-	};
+};
-	const shopUserInfo = reactive({});
+const shopUserInfo = reactive({});
-	Object.assign(shopUserInfo, uni.cache.get('shopUserInfo') || {});
+Object.assign(shopUserInfo, uni.cache.get('shopUserInfo') || {});
 
-	function tomember() {
+function tomember() {
 	if (isMember.value) {
 		const shopId = uni.cache.get('shopId');
 		if (!shopUserInfo.isVip) {
@@ -245,9 +246,9 @@
 			icon: 'none'
 		});
 	}
-	}
+}
 
-	function toCharge() {
+function toCharge() {
 	if (isCharge.value) {
 		const shopId = uni.cache.get('shopId');
 		uni.navigateTo({
@@ -259,8 +260,8 @@
 			icon: 'none'
 		});
 	}
-	}
+}
-	const getQueryString = (url, name) => {
+const getQueryString = (url, name) => {
 	//解码
 	var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
 	var r = url.substr(1).match(reg);
@@ -268,12 +269,12 @@
 		return r[2];
 	}
 	return null;
-	};
+};
 
-	// 获取会员配置
+// 获取会员配置
-	const isMember = ref(0);
+const isMember = ref(0);
-	const isCharge = ref(0);
+const isCharge = ref(0);
-	async function getVipConfig() {
+async function getVipConfig() {
 	try {
 		const res1 = await getMemberConfig({
 			shopId: uni.cache.get('shopId')
@@ -287,43 +288,43 @@
 	} catch (error) {
 		console.log(error);
 	}
-	}
+}
 
-	const allConfig = reactive({
+const allConfig = reactive({
 	takeout: 0,
 	group: 0,
 	pointsMall: 0,
 	distribution: 0,
 	couponNum: 0,
 	pointNum: 0
-	});
+});
 
-	function getHomeData() {
+function getHomeData() {
 	homeData().then((res) => {
 		Object.assign(allConfig, res);
-			imgs.defaultAvatar = res.userAvatar ? res.userAvatar : imgs.defaultAvatar
+		imgs.defaultAvatar = res.userAvatar ? res.userAvatar : imgs.defaultAvatar;
 	});
-	}
+}
-	onMounted(() => {
+onMounted(() => {
 	updateData();
-	});
+});
 
-	function updateData() {
+function updateData() {
 	Object.assign(shopUserInfo, uni.cache.get('shopUserInfo') || {});
 	getVipConfig();
 	getHomeData();
-	}
+}
-	defineExpose({
+defineExpose({
 	updateData
-	});
+});
 </script>
 
 <style scoped lang="scss">
-	page {
+page {
 	background: #f6f8fa;
-	}
+}
 
-	.swiper {
+.swiper {
 	width: 100%;
 	height: 100%;
 
@@ -336,9 +337,9 @@
 			height: 100%;
 		}
 	}
-	}
+}
 
-	.content {
+.content {
 	.contentbox {
 		position: relative;
 		width: 100%;
@@ -426,9 +427,9 @@
 			}
 		}
 	}
-	}
+}
 
-	.popup-content {
+.popup-content {
 	width: 90vw;
 	background-color: #fff;
 	border-radius: 8px;
@@ -467,9 +468,9 @@
 			width: 248upx;
 		}
 	}
-	}
+}
 
-	.menus {
+.menus {
 	display: flex;
 	padding: 32rpx 40rpx;
 	margin-top: 150rpx;
@@ -483,9 +484,9 @@
 		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
 		flex: 1;
 	}
-	}
+}
 
-	.userInfo {
+.userInfo {
 	display: flex;
 	padding: 22rpx 24rpx;
 	margin: 0 4rpx;
@@ -510,9 +511,9 @@
 		width: 33px;
 		height: 33px;
 	}
-	}
+}
 
-	.new-menus-box {
+.new-menus-box {
 	margin: 0 16rpx 0 16rpx;
 
 	.new-menus {
@@ -544,7 +545,8 @@
 				background: #ededed;
 			}
 
-				.takeout {}
+			.takeout {
+			}
 		}
 
 		&.layout1 {
@@ -569,9 +571,9 @@
 			}
 		}
 	}
-	}
+}
 
-	.groupBuying {
+.groupBuying {
 	padding: 16rpx 38rpx;
 	border-top: 2rpx solid #ededed;
 	background-color: #fff;
@@ -583,21 +585,21 @@
 		width: 40px;
 		height: 40px;
 	}
-	}
+}
 
-	.title {
+.title {
 	color: #333333;
 	font-size: 36rpx;
 	font-weight: 700;
-	}
+}
 
-	.desc {
+.desc {
 	margin-top: 16rpx;
 	font-size: 28rpx;
 	color: #999;
-	}
+}
 
-	.points {
+.points {
 	margin-top: 10px;
 	background-color: #fff;
 	padding: 16rpx 68rpx;
@@ -610,16 +612,16 @@
 		width: 98px;
 		height: 98px;
 	}
-	}
+}
 
-	.taocan {
+.taocan {
 	.img {
 		width: 117px;
 		height: 117px;
 	}
-	}
+}
 
-	.bottom_menus {
+.bottom_menus {
 	display: flex;
 	gap: 14rpx;
 	margin-top: 10px;
@@ -649,5 +651,5 @@
 			white-space: nowrap;
 		}
 	}
-	}
+}
 </style>