mabao/pages/service_packs/introduce.vue

<template>
	<view class="container">
		<view class="body">
			<image :src="imghos+nodeEl"  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"
				},
				nodeEl: "",
				imghos: "",
				phone: ""
			}
		},
		onLoad() {
			this.imghos = this.$imgHost2
			this.$util.getAgreement().then(res => {
				this.nodeEl = res.data.poster
				this.phone = res.data.phone
			}).catch(err => {

			})
		},
		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: this.phone
				})
				this.show = false
			}

		}
	}
</script>

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

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

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

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