mabao/pages/service_packs/introduce.vue

<template>
	<view class="container">
		<view class="body">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/竖占位图.png" class="img"></image>
		</view>
		<view class="footer">
			<view class="cu-bar bg-white tabbar border shop" style="width: 100%;">
				<button class="action" @click="show = true" style="width: 33%;">
					<view class="cuIcon-service text-green">
					</view>
					客服
				</button>
				<view class="submit" @click="next" style="background-color: #0B73B9; color: #FFFFFF;">选购服务包</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14"  height="300rpx">
			<u-button open-type="contact" :custom-style="customStyle">会话客服</u-button>
			<u-button @click="playphone" :custom-style="customStyle">电话客服</u-button>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user']),
			...mapGetters({
				hasLogin: 'verifyJwt'
			})
		},
		data() {
			return {
				show: false,
				customStyle:{
					width:'600rpx',
					marginTop:"35rpx"
				}
			}
		},
		methods: {
			next(e) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/service_packs/choicepacks'
					});
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}
			},
			playphone(){
				uni.makePhoneCall({
					phoneNumber:"123456"
				})
				this.show = false
			}

		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
	}

	.body {
		width: 100%;
		height: 100%;

		.img {
			width: 94%;
			height: 88vh;
			margin: 3% 3%;
		}
	}

	.footer {
		width: 100%;
		height: auto;
		display: flex;
		position: fixed;
		bottom: 0;
	}
</style>