代码优化

scan/components/kefu-popup/kefu-popup.vue

+<template>
+	<view>
+		<uni-popup type="bottom" ref="kefuPop" :maskClick="false" :isMaskClick="false">
+			<view class="container">
+				<image @click="onClose" style="width: 50rpx; height: 50rpx;margin-left:auto;margin-right: 30rpx;
+				margin-bottom: 30rpx;" src="https://mints-web.oss-cn-beijing.aliyuncs.com/images/ic_close_white.png"></image>
+				<view class="content">
+					<button class="button1" type="default" size="default" @click="tapMakePhoneCall">客服电话</button>
+					<button class="button2" open-type="im" data-im-id="dy1d1fub8mqd">客服在线</button>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'kefuPopup',
+		props: {
+			show: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				imId: "dy1d1fub8mqd"
+			};
+		},
+		methods: {
+			handleShow() {
+				this.$refs.kefuPop.open('bottom');
+			},
+			onClose() {
+				this.$refs.kefuPop.close('bottom');
+				this.$emit('close');
+			},
+			tapMakePhoneCall() {
+				let that=this
+				tt.makePhoneCall({
+					phoneNumber: "4000969950",
+					success(res) {
+						// 调用成功 makePhoneCall:ok
+						that.onClose()
+						console.log("调用成功", res.errMsg);
+					},
+					fail(res) {
+						that.onClose()
+						// 调用失败 makePhoneCall:fail
+						console.log("调用失败", res.errMsg);
+					},
+				});
+			},
+			imCallback(e) {
+				console.log("跳转IM客服成功", e.detail);
+				this.onClose()
+			},
+			onimError(e) {
+				console.log("拉起IM客服失败", e.detail);
+				this.onClose()
+			}
+		},
+		watch: {
+			show: {
+				handler: function(newVal, oldVal) {
+					if (newVal) {
+						this.handleShow();
+					}
+				},
+				immediate: true
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.content {
+		border-radius: 20rpx;
+		background-color: white;
+		display: flex;
+		width: 100%;
+		padding: 30rpx 0;
+		flex-direction: column;
+		align-items: center;
+
+		.title {
+			color: black;
+			font-size: 40rpx;
+			font-weight: bold;
+			margin-bottom: 30rpx;
+		}
+
+		.button1 {
+			width: 600rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			margin: 20rpx 20rpx;
+			border-radius: 10rpx;
+			background-color: orange;
+			color: white;
+			font-size: 36rpx;
+			box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
+		}
+
+		.button2 {
+			width: 600rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			margin: 20rpx 20rpx;
+			border-radius: 10rpx;
+			background-color: white;
+			border: 1px orange solid;
+			color: orange;
+			font-size: 36rpx;
+			box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
+		}
+	}
+</style>
\ No newline at end of file

scan/components/my/my.vue

@@ -79,12 +79,14 @@
 					<view style="font-size: 26rpx;color: #3B3B3B;margin-top: 25rpx;">设置</view>
 				</view>
 			</view>
-		</scroll-view>
+		</scroll-view>
+		<kefu-popup :show="showKefuPop" @close="showKefuPop = false" />
 	</view>
 
 </template>
 <script>
-	import common from '@/mixins/common';
+	import common from '@/mixins/common';
+	import kefuPopup from '@/components/kefu-popup/kefu-popup.vue';
 	import {
 		navigateTo,
 		message,
@@ -95,11 +97,15 @@
 
 	export default {
 		name: 'my',
-		mixins: [common],
+		mixins: [common],
+		components: {
+			kefuPopup
+		},
 		data() {
 			return {
 				statusBarHeight: app.globalData.statusBarHeight,
-				userBean: {},
+				userBean: {},
+				showKefuPop: false,
 				backgroundImg: 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_banner_vip.png'
 			};
 		},
@@ -128,15 +134,7 @@
 				navigateTo(`/pagesA/vipPay/vipPay`)
 			},
 			handlePhone() {
-				tt.makePhoneCall({
-					phoneNumber: '4000969950',
-					success: function(res) {
-						console.log('拨打电话成功！');
-					},
-					fail: function(res) {
-						console.log('拨打电话失败！');
-					}
-				})
+				this.showKefuPop=true
 			}
 		}
 	};

scan/pagesA/vipPay/vipPay.vue

@@ -54,7 +54,7 @@
 			</view>
 
 			<view class="section">
-				<button class="apply-button" @click="handlePay">立即开通</button>
+				<button class="apply-button" @click="handlePay">立即试用</button>
 			</view>
 
 			<image @click="handlePay" style="width: 100%;"
@@ -176,7 +176,7 @@
 						that.ttPay(largeType, res.orderId, ttData);
 					},
 					fail(res) {
-						message.notify(res.errMsg);
+						// message.notify(res.errMsg);
 						console.log('requestOrder res.errMsg',res)
 					},
 				});