activitys-uniapp/components/alert/pointAuth.vue

<template>
	<view>
		<u-popup :custom-style="popupStyle" class="auth-point" v-model="show" mode="center" width="80%" border-radius="18" >
			<image class="auth-bg" mode="aspectFill" src="../../static/poster/bg_shouyetc.png">
				<view class="auth-msg">
					<view class="info-item" v-for="(item,index) in vuex_active_setting.helpExplainList" :key="index">
						{{item.helpExplain}}
					</view>
				</view>
				<u-button  @click="toAuth" :custom-style="customStyle" shape="circle" >去授权</u-button>
			</image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"pointAuth",
		data() {
			return {
				show: false,
				popupStyle: {
					'u-mode-center-box': 'red'
				},
				authUrl: '',
				customStyle: {
					color: 'white',
					background: "#E72226",
					width: '400rpx',
					margin: '25rpx auto'
				}
			};
		},

		methods: {
			showAuth(url){
				this.authUrl = url;
				this.show = true;
			},
			hide(){
				this.show = false;
			},
			close(){
				this.$emit('close')
			},
			toAuth(){
				let params={
					url:encodeURIComponent(this.authUrl),
					title:'移动积分授权'
				}
				this.$jump('/pages/webview/webview'+this.$u.queryParams(params));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-bg{
		width: 100%;
		height: 266rpx;
	}
	.auth-msg{
		padding: 40rpx 20rpx 20rpx 20rpx;
		.info-item{
			font-size: 26rpx;
			color: #353535;
			position: relative;
			padding: 10rpx 30rpx 10rpx 30rpx;
			margin-left: 30rpx;
		}
		.info-item::before{
			content: "";
			position: absolute;
			left: -20rpx;
			top: 10rpx;
			width: 25rpx;
			height: 25rpx;
			background: url(../../static/icon/item-dot.png) no-repeat center/contain;
		}
	}
</style>