代码优化

vedio/components/home/my.vue

@@ -32,7 +32,8 @@
 						<image style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
 							src="https://mints-web.oss-cn-beijing.aliyuncs.com/images/ic_my_vip.png"></image>
 						<view style="font-size: 36rpx;font-weight: 777;color: white;">
-							{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}</view>
+							{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
+						</view>
 					</view>
 
 					<view v-if="userBean.expireTime<=0" style="font-size: 28rpx;color: #b5b5b5;margin-top: 20rpx;">
@@ -89,13 +90,13 @@
 		<!-- </z-paging> -->
 		<coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
 		</coin-popup>
-
+		<kefu-popup :show="showKefuPop" @close="showKefuPop = false" />
 	</view>
 
 </template>
 <script>
 	import common from '@/mixins/common';
-
+	import kefuPopup from '@/components/kefu-popup/kefu-popup.vue';
 	import {
 		getToLocal
 	} from "@/utils/utils.js"
@@ -115,9 +116,13 @@
 	export default {
 		name: 'index',
 		mixins: [common],
+		components: {
+			kefuPopup
+		},
 		data() {
 			return {
 				showMask: false,
+				showKefuPop: false,
 				maskImage1: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find1.png',
 				maskImage2: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find2.png',
 				statusBarHeight: app.globalData.statusBarHeight,
@@ -181,15 +186,7 @@
 				navigateTo(`/pagesA/cdkey/cdkey`)
 			},
 			handlePhone() {
-				wx.makePhoneCall({
-					phoneNumber: '4000969950',
-					success: function(res) {
-						console.log('拨打电话成功！');
-					},
-					fail: function(res) {
-						console.log('拨打电话失败！');
-					}
-				})
+				this.showKefuPop = true
 			},
 			paySuccess(largeType) {
 				// largeType=vip   开通vip

vedio/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 v-if="false" class="button2" open-type="im" data-im-id="93264117800">客服在线</button>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'kefuPopup',
+		props: {
+			show: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				test: ""
+			};
+		},
+		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

vedio/pages.json

@@ -41,7 +41,7 @@
 			"path": "vipPay/vipPay",
 			"style": {
 				"navigationStyle": "default",
-				"navigationBarBackgroundColor": "#2196f3",
+				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 			}
 		}, {
@@ -49,7 +49,7 @@
 			"style": {
 				"navigationBarTitleText": "兑换会员",
 				"navigationStyle": "default",
-				"navigationBarBackgroundColor": "#2196f3",
+				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 			}
 		}]