property/user_ui/components/box/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<view v-if="type=='wygj'" class="wygjbox">
			<view class="wytop">
				<image :src="wytit" class="imga"></image>
				<image :src="head" class="imgb"></image>
			</view>
			<view class="wylist flexc" v-for="(ite,idx) in phoneList" :key="idx" @click="getPhone(ite.content)">
				<image :src="ite.title.indexOf('投诉')!=-1?phicob:phicoa"></image>
				<view>
					<view class="co6 mb4">{{ite.title}}</view>
					<view class="co27">{{ite.content}}</view>
				</view>
			</view>
			<image :src="closeimg" class="closeimg" @click="getClose"></image>
		</view>
		<!-- 信息弹窗 -->
		<view class="bgbox" style="z-index: 100;" v-if="initFace=='Y'"></view>
		<view class="fixedbox" style="z-index: 101;" v-if="initFace=='Y'">
			<image :src="tiptit" class="imga"></image>
			<view  class="boxs">
				<view class="ztit">您的信息暂未完善，请前去完善</view>
				<view class="ztit">解锁更多内容</view>
			</view>
			<view class="fixedbtn flexcj">
				<view class="btns btn2 flex1" @click="getXxwsFn">去完善</view>
			</view>
			<image :src="closeimg" class="closeimg" @click="getClose"></image>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	import {uploadmore} from '@/utils/common.js'
	export default{
		components:{},
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
			initFace:{
				type: [String,Number],
				default () {
					return 'N'
				}
			},
			phoneList:{
				type: Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				baseUrl:config.baseUrl,
				closeimg:require("@/static/images/close.png"),
				head:require("@/static/images/head.png"),
				phicoa:require("@/static/images/phicoa.png"),
				phicob:require("@/static/images/phicob.png"),
				wytit:require("@/static/images/wytit.png"),
				tiptit:require("@/static/images/tiptit.png"),
				// rimg: require('@/work/static/people/rimg.png'),
				// headbg: require('@/work/static/service/headbg.png'),
				datainfo:{
					iszc:""
				},
				tabval:0,

			}
		},
		mounted() {
			this.baseUrl=baseUrl
		},
		watch:{
			type(val){
				// this.filelist=[];
				// this.shtext='';
				// this.isty='2';
				// this.phofile=[];
			}
		},
		methods:{
			
			getClose(){
				this.$emit('getClose')
			},
			getSure(){
				this.$emit('getSure')
			},
			getXxwsFn(){
				this.$emit('getXxwsFn')
			},
			getPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>	
.wygjbox{position: fixed;left:166rpx;right: 166rpx;background: linear-gradient(0deg, #FFFFFF, #FEF6E1);border-radius: 20rpx;padding: 26rpx 38rpx 12rpx;z-index: 10;top: 40%;transform: translateY(-50%);
	.wytop{display: flex;align-items: flex-end;margin-bottom: 52rpx;
		.imga{width: 230rpx;height: 74rpx;margin-right: 26rpx;}
		.imgb{width: 86rpx;height: 86rpx;}
	}
	.wylist{padding-left: 34rpx;margin-bottom: 28rpx;
		image{width: 34rpx;height: 34rpx;margin-right: 16rpx;flex: 0 0 auto;}
		view{font-weight: 500;font-size: 26rpx;}
	}
}
.closeimg{width: 34rpx;height: 34rpx;position: absolute;bottom: -52rpx;left: 50%;margin-left: -16rpx;}
.fixedbox{position: fixed;left: 160rpx;right: 160rpx;background: #fff;border-radius: 20rpx;top: 50%;transform: translateY(-50%);z-index: 10;padding: 32rpx 28rpx 40rpx;box-sizing: border-box;background: linear-gradient(0deg, #FFFFFF, #FEF6E1);
	.imga{width: 230rpx;height: 70rpx;display: block;margin: 0 auto 36rpx;}
	.boxs{
		.ztit{font-weight: 500;font-size: 26rpx;color: #343434;text-align: center;line-height: 48rpx;text-align: center;
		}
}
	.fixedbtn{margin: 36rpx 2rpx 0;
		.btns{width: 192rpx;height: 70rpx;border-radius: 36rpx;font-weight: bold;
font-size: 26rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
			&.btn1{color: #00A9F0;border: 2rpx solid #00A9F0;margin-right: 24rpx;}
			&.btn2{background: #FFF5EC;color: #F7801F;border: 2rpx solid #F7801F;}
		}
		
	}
	.closeimg{bottom: -58rpx;}
}
</style>