smart-tourism/smart-ui-app/components/help.vue

<template>
	<u-popup v-model="show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
		<view class="u-popup">
			<view class="tttt" style="font-weight: bolder;">拨打求助电话</view>
			<view style="text-align: center;"><image src="../static/help.jpg" mode="widthFix" class="pic"></image></view>
			<view class="help">
				<text class="icon">&#xe94d;</text>
				<text>求助电话：{{ aboutUs.helpPhone }}</text>
			</view>
			<view class="tk">
				<view class="vvv">1，当你或者你的亲人景区不慎走失</view>
				<view class="vvv">2，你在谢通门遇到困难</view>
			</view>
			<button class="btn" @click="call()" v-if="user.mobile&&user.mobile.length > 0">拨打电话</button>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>获取手机号并拨打</button>
		</view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			aboutUs: {},
			user: {}
		};
	},
	onLoad() {},
	methods: {
		init(show = true) {
			if (!this.$hasLogin()) {
				uni.showModal({
					title: '提示',
					content: '您还未登陆,请先登陆!',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/login'
							});
						}
					}
				});
				return;
			}
			this.show = show;
			this.aboutUs = uni.getStorageSync('aboutUs');
			this.user = this.$getUser();
		},
		call() {
			this.$http.call(this.aboutUs);
		},
		// 绑定用户手机号
		getPhoneNumber(e) {
			let item = {};
			uni.login({
				provider: 'weixin',
				success: res => {
					this.disabled = false;
					item.code = res.code;
					item.encryptedData = e.target.encryptedData;
					item.iv = e.target.iv;
					this.$http.request({
						url: this.$http.urls.bindWxMobile,
						data: item,
						method: 'POST',
						success: r => {
							this.user.mobile = r.data.data.mobile;
							uni.setStorageSync('user', this.user);
							this.$forceUpdate();
							this.$http.call(this.aboutUs);
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-popup {
	overflow: hidden;
}
.pic {
	border-radius: 7px;
	width: 50%;
	margin: 0 auto;
}
.help {
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin: 10px 0px 5px 0px;
	color: #626262;
	font-size:15px;
	.icon {
		padding-right: 3px;
		font-weight: bold;
	}
}
.tk {
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	background-color: white;
	color: #626262;
	margin-top: 10px;
	.vvv {
		padding: 5px 5px 5px 5px;
		font-size: 13px;
	}
}

.btn {
	margin-top: 20px !important;
}
</style>