activitys-uniapp/components/alert/pointAuth.vue

<template>
	<view>
		<u-popup :custom-style="popupStyle"
			close-icon-size="50"
			:mask-close-able="false"
			@close="close" class="auth-point" :closeable="true" close-icon-color="#fff"
			close-icon="close-circle" v-model="show" mode="center" width="80%" height="680rpx" border-radius="16">
			<view class="">
				<image class="auth-bg" mode="aspectFill" src="../../static/poster/bg_shouyetc.png">
					<view class="auth-msg" style="display: flex;flex-direction: column;">
						<view class="margin-bottom-20 flex justify-start"
							style="font-size: 26rpx;color: #353535;font-family: PingFang-SC-Medium;line-height: 45rpx;"
							v-for="(item,index) in vuex_active_setting.helpExplainList" :key="index">
							<view class="center">
								<u-icon name="/static/icon/titles.png" size="30"></u-icon>
							</view>
							<view class="center margin-left-10">
								<text>{{item.helpExplain}}</text>
							</view>
						</view>
					</view>
					<u-button v-if="!isCopy" @click="toAuth" :custom-style="customStyle" shape="circle">点击复制授权链接</u-button>
					<u-button  v-else :disabled="true" :custom-style="disableStyle"  shape="circle">已复制请用浏览器打开</u-button>
				</image>
			</view>
		</u-popup>
	</view>
</template>

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

		methods: {
			showAuth(url) {
				this.authUrl = url;
				this.show = true;
				this.isCopy = false;
			},
			hide() {
				this.show = false;
			},
			close() {
				this.$emit('close')
			},
			toAuth() {
				uni.setClipboardData({
				    data: this.authUrl,
					showToast: false,
				    success: ()=> {
				        this.isCopy =true;
				    }
				});
				// console.log(this.authUrl);
				// this.authUrl = this.authUrl.replace(this.$config.transformDomains,this.$config.baseURL+'/phoneAuth');
				// let params = {
				// 	url: encodeURIComponent(this.authUrl),
				// 	title: '移动积分授权'
				// }
				// console.log(this.authUrl);
				// this.$jump('/pages/webview/webview' + this.$u.queryParams(params));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-bg {
		width: 100%;
		height: 266rpx;
	}

	.auth-msg {
		padding: 40rpx 40rpx 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}
</style>

<!-- <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: true,
				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> -->