<template>
	<view class="wechat-contact-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="微信关联"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<!-- 微信卡片 -->
		<view class="card">
			<view class="wx-left">
				<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
			</view>
			<view class="wx-center">
				<view class="wx-title">微信</view>
				<view class="wx-sub">未绑定微信</view>
			</view>
			<view class="wx-right">
				<button class="bind-btn" @click="onBind">绑定</button>
			</view>
		</view>

		<!-- 操作说明 -->
		<view class="tips">
			<view class="tips-title">操作说明:</view>
			<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
			<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
			<view class="tips-line">
				若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
				<text class="highlight">igandan1000</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import wxIcon from '@/static/wechat.png';

const goBack = () => {
	uni.navigateBack();
};

const onBind = () => {
	uni.showToast({ title: '去绑定', icon: 'none' });
};
</script>

<style lang="scss" scoped>
.wechat-contact-page {
	min-height: 100vh;
	background: #f7f7f7;

}

.card {
	display: flex;
	align-items: center;
	background: #ffffff;
	
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
	.wx-left { margin-right: 24rpx; }
	.wx-center {
		flex: 1;
		.wx-title { font-size: 34rpx; color: #222222; }
		.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
	}
	.wx-right {
		.bind-btn {
			min-width: 140rpx;
			height: 64rpx;
			background: #2ecc71;
			color: #ffffff;
			border: none;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			font-size: 28rpx;
			padding: 0 24rpx;
		}
	}
}

.tips {
	padding: 30rpx;
	background: #f7f7f7;
	.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
	.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
	.highlight { color: #e53935; }
}
</style>
