pet-front/otherPages/binding/list/index.vue

<template>
	<view class="box w-100 h100">
		<view class="header-info">
			<view class="base flex-rowl">
				<up-image width="120rpx" height="120rpx" :src="state.baseInfo.upgrade_image" shape="circle"></up-image>
				<view class="flex-colt">
					<view class="size-32 mb16">
						{{state.baseInfo.info.userName}}
					</view>
					<view class="title size-22 color-fff">
						{{state.baseInfo.partner_level}}
					</view>
					<view class="color-a55 size-24 mt16" v-html="state.baseInfo.level_details">
					</view>
				</view>
			</view>
			<view class="tips flex-between">
				<view class="flex-between tips-item">
					<view class="flex-colc item">
						<view class="size-30 color-a55 fw700">
							推广攻略
						</view>
						<view class="size-22 color-a55 mt20">
							快速定位宠友群体
						</view>
					</view>
					<image :src="icon1" mode=""></image>
				</view>
				<view class="flex-between tips-item">
					<view class="flex-colc item">
						<view class="size-30 color-a55 fw700">
							推广教程
						</view>
						<view class="size-22 color-a55 mt20">
							快速定位宠友群体
						</view>
					</view>
					<image :src="icon2" mode=""></image>
				</view>
			</view>
		</view>
		<view class="cards bg-fff">
			<YCard :data="state.code" @emitCopy="copyCode" />
			<YCard :data="cardData1" @emitShare="shareHandle" @savePoster="savePoster" />
			<YCard :data="cardData2" @emitCopy="copyCode" />
		</view>
	</view>
</template>

<script setup>
	import {
		binBaseInfo,
		bindCode
	} from "@/api/home.js"
	import {
		onMounted,
		reactive,
		ref
	} from "vue"
	import YCard from "../components/y-card.vue"
	const icon1 = ref('/static/images/levelImage/gl.png')
	const icon2 = ref('/static/images/levelImage/jc.png')
	const shareRef = ref('share')

	const cardData = {
		methodNum: "方法一",
		title: "邀请码邀请",
		des: "用户输入邀请码,直接完成绑定。",
		inputBg: "#FDD6CE",
		titleColour: "#BC796C",
		copy: true,
		bgUrl: '/static/images/levelImage/bg1.png',
		code: 'jsk6623'
	}
	const cardData1 = {
		methodNum: "方法二",
		title: "分享海报邀请码",
		des: "扫码进去猫妈狗爸完成绑定",
		titleColour: "#5D81A4",
		copy: false,
		bgUrl: '/static/images/levelImage/bg2.png'
	}
	const cardData2 = {
		methodNum: "方法三",
		title: "分享链接邀请码",
		des: "复制链接给好友,进入直接绑定。",
		inputBg: "#FDD69A",
		titleColour: "#B36F3C",
		copy: true,
		bgUrl: '/static/images/levelImage/bg3.png',
		code: 'https://fanyi.baidu.com/mtpe-individual/multimodal?query=%E6%94%BB%E7%95%A5%0A&lang=zh2en&ext_channel=Aldtype'
	}
	const state = reactive({
		info: {},
		baseInfo: {},
		code: {},
		posterUrl: ""
	})
	onMounted(() => {
		const info = uni.getStorageSync("baseInfo")
		if (info) {
			const baseInfo = JSON.parse(info)
			state.info = baseInfo
		}
		getBaseInfo()
	})

	// 获取基本信息

	const getBaseInfo = () => {
		binBaseInfo(state.info.userId).then(res => {
			state.baseInfo = res.data
		})
		bindCode(state.info.userId).then(res => {
			state.code = {
				...cardData,
				code: res.data.code
			}
			state.posterUrl = res.data.url
		})
	}

	// 保存海报
	const savePoster = () => {
		uni.navigateTo({
			url: "/otherPages/binding/share/index?url=" + state.posterUrl
		})
	}



	const copyCode = (v) => {
		console.log(v, "ppp");
	}

	const shareHandle = () => {
		console.log("分享海报");
	}
</script>

<style scoped lang="scss">
	.box {
		background: linear-gradient(180deg, #ffbf60, #f3b962 50%, #ffe6bf);

		.header-info {
			padding: 23rpx 36rpx;

			.base {
				image {
					width: 139rpx;
					height: 139rpx;
					background-color: red;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.title {
				border: 4rpx solid #fff;
				border-radius: 30rpx;
				padding: 0 10rpx;
				background-color: #FFA848;
			}

			.tips {

				margin-top: 45rpx;

				.tips-item {
					width: 309rpx;
					background-color: #FFF4E6;
					border-radius: 16rpx;
					padding: 12rpx 0;

					.item {
						width: 176rpx;
						padding-left: 17rpx;
					}
				}

				image {
					width: 72rpx;
					height: 78rpx;
					margin: 0 30rpx 0 0;
					// background-color: red;
				}
			}
		}

		.cards {
			border-radius: 16rpx;
			width: 750rpx;
			padding: 26rpx 33rpx;
			height: 100vh;

		}
	}
</style>