<template>
	<view class="my">
		<image src="https://v2.api-m.com/api/wallpaper?return=302" mode="aspectFill" class="my_bg"></image>
		<view class="header_cell">
			<view style="margin-top: 40rpx;" class="user_info">
				<view class="flex justify-center align-center">
					<image src="https://v2.api-m.com/api/head?return=302" mode="aspectFill" class="user_photo"></image>
					<view>
						<view class="text-black text-bold">
							<text class="text-xl" style="font-weight: bold;">微信用户</text>
						</view>

					</view>
				</view>

			</view>
			<view style="margin-top: 90rpx;border-radius: 26rpx;" class="vip_cell flex justify-between align-center">
				<view>
					<view class="text-xl" style="font-weight: bold;color: rgb(241, 198, 142);">
						邀请朋友一起来搜索吧 !
					</view>
				</view>
				<button open-type="share" class="cu-btn round invate_btn">邀 请</button>
			</view>
		</view>
		<view class="cell_2 flex  align-center mt30">
			<button @click="guanzhu(1)" class="kefu">
				<text style="color: #1382ff;font-size: 60rpx;" class=" cuIcon-appreciatefill"></text>
				<text style="display: block;margin-top: -60rpx;margin-bottom: 15rpx;font-size: 30rpx;">关于我们</text>
			</button>
			<!-- #ifdef H5 -->
			 <button @click="imgShow(2)" class="kefu">
			 	<text style="color: #1382ff;font-size: 60rpx;" class=" cuIcon-servicefill"></text>
			 	<text style="display: block;margin-top: -60rpx;margin-bottom: 15rpx;font-size: 30rpx;">联系我们</text>
			 </button>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			 <button open-type="contact" class="kefu">
			 	<text style="color: #1382ff;font-size: 60rpx;" class=" cuIcon-servicefill"></text>
			 	<text style="display: block;margin-top: -60rpx;margin-bottom: 15rpx;font-size: 30rpx;">联系我们</text>
			 </button>
			<!-- #endif -->
			
		</view>
		<!-- <view style="width: 100%; margin-top: 30rpx;">
			<ad-custom unit-id="adunit-ff28399b17818338"  ad-intervals="30" ></ad-custom>
		</view> -->
		<view class="mt30 grid text-center col-4 bg-white"
			style="padding: 30rpx 0; border-radius: 15rpx;row-gap: 30rpx;">
			<!-- #ifdef H5 -->
			<view @click="modeImgShow(1)">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view @click="myBlog()">
			<!-- #endif -->
				<view class="cell_3_icon flex justify-center align-center"><text
						class="text-olive cuIcon-choiceness"></text></view>
				<view>我的博客</view>
			</view>
			<!-- #ifdef H5 -->
			<view @click="modeImgShow(2)">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view @click="shuiyin()">
			<!-- #endif -->
				<view class="cell_3_icon flex justify-center align-center"><text
						class="text-cyan cuIcon-selection"></text></view>
				<view>水印去除</view>
			</view>
			<!-- <view  @click="imgShow(1)">
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-copy"></text>
				</view>
				<view>最新动态</view>
			</view> -->
			<view @click="mzModalShow()">
				<view class="cell_3_icon flex justify-center align-center"><text
						class="text-olive cuIcon-creative"></text></view>
				<view>免责声明</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="metergasis">
			<!-- #ifdef H5 -->
			<view style="line-height: 60rpx;width: 90%;height: 150rpx;background-color: #fff;color: #666666;margin: 20rpx;text-align: center;">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="width: 90%;height: 300rpx;background-color: #fff;color: #666666;margin: 20rpx;text-align: center;">
			<!-- #endif -->
				求资源的，搜索不到的，点击下面，反馈客服 !
			</view>
		</view>
		<button @click="guanzhu(1)" class="select">
			反馈客服
		</button>
		<!--免责声明弹窗-->
		<view class="cu-modal" :class="modalName=='mzModal'?'show':''">
			<view style="border-radius: 30rpx;" class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view style="color: black;font-size: 38rpx;margin-top: 50rpx;" class="content">声明</view>
				</view>
				<view class=" bg-white">
					<view style="font-size: 33rpx;color: #6a6a6a;padding: 40rpx 60rpx 60rpx 60rpx;">
						创作者上传至《南音资源库》小程序的素材内容由创作者负责，部分来源于网络和他处购买如有侵权，请在界面中的联系我们进行删除处理 !
					</view>

					<button @tap="hideModal" style="margin-bottom: 50rpx;width: 55%;height: 90rpx;font-size: 38rpx;"
						class="cu-btn bg-green">确认</button>
				</view>
			</view>
		</view>
		<!--弹窗-->
		<view class="cu-modal" :class="modalName=='imgModal'?'show':''">
			<view style="border-radius: 30rpx; background-color: white;" class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view style="color: black;font-size: 38rpx;margin-top: 40rpx;" class="content">{{modelTip}}</view>
					<view class="action" @tap="modalName = null">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class=" bg-white">
					<image style="width: 75%;margin-top: 20rpx;" mode="widthFix" show-menu-by-longpress="true"
						:src="modelSrc"></image>
					<view class="tipinfo">Tip：长按图片识别 / 保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {

	} from "@/api/app/index.js"
	let videoAd = null;
	export default {
		data() {
			return {
				modalName: null,
				modelTip: "",
				modelSrc: ""
			};
		},
		onShareAppMessage() {
		    return {
		    	title: "南音资源库,有你想要的 !",
		    	imageUrl: "https://img.yidaima.cn/dj-share.png",
		    	path: 'pages/index',
		    }
		},
		onShareTimeline(){
		    return {
		      title: "南音资源库,有你想要的 !",
		      query:{
		      },
		      imageUrl:'https://img.yidaima.cn/dj-share.png'
		    }
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			imgShow(type) {
				this.$tab.navigateTo('/pages/mine/imgShow?type='+type)
			},
			modeImgShow(val){
				if(val == 1){
					this.modelTip="我的博客"
					this.modelSrc="http://imgs.emoboy.vip/appimg/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A0%81.jpg"
				}else{
					this.modelTip="去水印"
					this.modelSrc="http://imgs.emoboy.vip/appimg/%E6%B0%B4%E5%8D%B0.jpg"
				}
				
				this.modalName = 'imgModal'
			},
			shuiyin() {
				uni.navigateToMiniProgram({
					appId: 'wx17b46f75e762c184',
					path: 'pages/tool/shuiyin', //需要打开的目标路径
					extraData: {
					},
					envVersion: 'release', //小程序版本：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
					}
				})
			},
			myBlog(){
				uni.navigateToMiniProgram({
					appId: 'wx17b46f75e762c184',
					path: '', //需要打开的目标路径
					extraData: {
					},
					envVersion: 'release', //小程序版本：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
					}
				})
			},
			copy(){
				uni.showToast({
				    title: '敬请期待',
				    //将值设置为 success 或者直接不用写icon这个参数 error none
				    icon: 'none',
				    //显示持续时间为 2秒
				    duration: 2000
				})
			},
			mzModalShow() {
				this.modalName = "mzModal"
			},
			hideModal() {
				this.modalName = null
			},
			guanzhu(type) {
				this.$tab.navigateTo('/pages/mine/guanzhu?type=' + type)
			},


		}
	};
</script>

<style lang="less" scoped>
	.tipinfo {
		width: 60%;
		height: 80rpx;
		border-radius: 60rpx;
		text-align: center;
		/* border: 3rpx solid #ae67d6; */
		margin-left: 20%;
		line-height: 80rpx;
		margin-bottom: 40rpx;
		color: #ae67d6;
		font-size: 30rpx;
		font-weight: 600;
	}
	.select {
		width: 60%;
		margin-left: 20%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #78B7E0;
		color: white;
		border-radius: 15rpx;
		font-size: 35rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.kefu {
		width: 49%;
		background-color: white;
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin-bottom: 100rpx;
		color: #b3b3b3;
		font-size: 24upx;
		margin: 40rpx 40rpx 0rpx 40rpx;
	}

	.no-list-data2 {
		text-align: center;
		margin-bottom: 100rpx;
		color: #b3b3b3;
		font-size: 24upx;
		margin: 10rpx 40rpx 40rpx 40rpx;
	}

	button::after {
		border: none;
	}

	.blogui-img {
		height: 100%;
		width: 100%;
	}

	/* 功能列表 */
	.metergasis-li-rgth {
		width: 50upx;
		height: 50upx;
		overflow: hidden;
		flex-shrink: 0;
		position: absolute;
		right: 0upx;
		top: 50%;
		transform: translate(0%, -50%);
	}

	.metergasis-li-h {
		grid-row: 1;
		margin-left: 30upx;
		font-size: 30upx;
	}

	.metergasis-li-h2 {
		grid-row: 1;
		margin-left: 30upx;
		font-size: 25upx;
		color: #ADADAD;
		margin-left: auto;
		margin-right: 10rpx;
	}

	.metergasis-li-img {
		height: 52upx;
		width: 52upx;
		border-radius: 100upx;
		flex-shrink: 0;
	}

	.metergasis-li {
		padding: 24upx 32upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.metergasis {
		background-color: #FFFFFF;
		border-radius: 16upx;
		margin: 2upx 0upx;
		padding: 2upx;
		margin-top: 30rpx;
	}

	.my {
		padding: 30rpx;

		.mt30 {
			margin-top: 30rpx;
		}

		.my_bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
		}

		.header_cell {
			margin-top: 100rpx;

			.user_info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user_photo {
					width: 120rpx;
					height: 120rpx;
					box-shadow: 0px 0px 10rpx 1px rgba(0, 0, 0, 0.1);
					border-radius: 50%;
					background-color: white;
					margin-right: 20rpx;
				}
			}

			.auth_btn {
				margin: 50rpx auto;
				text-align: center;

				&>button {
					box-shadow: 3px 3px 10rpx 1px rgba(0, 0, 0, 0.2);
					padding-left: 50rpx;
					padding-right: 50rpx;
				}
			}

			.vip_cell {
				margin-top: 40rpx;
				width: 690rpx;
				height: 150rpx;
				background-image: url('https://img.yidaima.cn/feast/bolang.gif');
				background-size: 100% 100%;
				color: white;
				padding: 0 30rpx;

				.invate_btn {
					background-color: rgb(241, 198, 142);
					box-shadow: 3px 3px 10rpx 1px rgba(241, 198, 142, 0.5);
					width: 150rpx;
					color: rgb(99, 71, 56);
					font-weight: bold;
				}
			}
		}

		.cell_1_icon {
			width: 100rpx;
			height: 100rpx;
			background-color: #f4f2f7;
			border-radius: 50%;
			font-size: 50rpx;
			margin: 0 auto;
			margin-bottom: 15rpx;
		}

		.cell_2 {
			&>view {
				background-color: white;
				border-radius: 15rpx;
				text-align: center;
				width: 48%;
				padding: 30rpx 0;
			}

			.cell_2_icon {
				font-size: 60rpx;
				margin-bottom: 15rpx;
			}
		}

		.cell_3_icon {
			font-size: 50rpx;
			margin-bottom: 20rpx;
		}

		.cell_4 {

			&>view,
			navigator {
				padding: 20rpx 0;
			}
		}
	}
</style>