ec.uniapp-master/pages/user/agreement/agreement.vue

<template>
	<view class="agreement_index">
		<image src="https://picsum.photos/seed/picsum/200/300" class="logo"></image>
		<view class="item" @tap="chageAgreement('privite')">
			<view class="txt">隐私协议</view>
			<view class="rigth lf-iconfont icon-xiangyou lf-font-24"></view>
		</view>
		<view class="item" @tap="chageAgreement('serve')">
			<view class="txt">服务协议</view>
			<view class="rigth lf-iconfont icon-xiangyou lf-font-24"></view>
		</view>
		<view class="item" @click="dial">
			<view class="txt">客服电话</view>
			<view class="rigth">
				<text class="lf-m-r-14">0351-8378888</text>
				<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
			</view>
		</view>
		<view class="mask" v-if="showAgreement"></view>
		<view class="greement-box" v-if="showAgreement">
			<view class="title mx-1px-bottom">{{message}}</view>
			<view class="content">
				<u-parse :content="contents" />
			</view>
			<view class="btn mx-1px-top" @tap="chageAgreement">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		pageLogin,
		getUrl,
		config,
		is
	} from '@/common/js/utils.js';
	import uParse from '@/components/gaoyia-parse/parse.vue';
	export default{
		components: {
			uParse
		},
		data() {
			return{
				showAgreement:false,
				message:'隐私协议',
				contents:''
			}
			
		},
		onLoad(){
		this.getGreementInfo();	
		},
		methods:{
			chageAgreement(type) {
				if(type == 'privite'){
					this.message = '隐私协议';
					this.contents = this.agreement.privacy_agreement
				} else{
					this.message = '服务协议';
					this.contents = this.agreement.service_agreement
				}
				this.showAgreement = !this.showAgreement
			},
			// 获取用户协议
			getGreementInfo() {
				this.$http.get({
					api: 'api/user/agreement'
				}).then(res => {
						res = res.data;
			
						if (res.status) {
							this.agreement =  res.data;
						}
			
				});
			},
			dial(){
				uni.makePhoneCall({
					phoneNumber: '1343344444'
				})
			}
		}
	}
	
</script>

<style rel="stylesheet/less" lang="less">
    @import "agreement";
</style>