pet-front/otherPages/workbenchManage/bindUser/index.vue

<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28">
				<up-image width="139rpx" height="139rpx" :src="userInfo?.userImage" shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20" :style="{color:'#000'}">{{ userInfo?.userName}}</view>
					<view class="label1">
						初级合伙人
					</view>
					<view class="flex font24">
						<view :style="{color:'#A55822'}">当前分成比例：
							<text :style="{color:'#C12525'}">25%</text>
						</view>
						<view :style="{color:'#A55822'}">晋级后分成比例：
							<text :style="{color:'#C12525'}">30%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-evenly mt60">
				<view class="header-card card-left box-size">
					<view class="flex-between flex">
						<view class="mr20">
							<view class="mb20 ml20" :style="{color:'#A55822',fontWeight:'bold',fontSize:'30rpx'}">推广攻略
							</view>
							<view :style="{color:'#A55822',fontSize:'22rpx'}">快速定位宠友群体</view>
						</view>
						<up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon1.png"
							width="71rpx" height="85rpx"></up-image>
					</view>
				</view>
				<view class="header-card card-right box-size">
					<view class="flex flex-between">
						<view class="mr20">
							<view class="mb20 ml20" :style="{color:'#A55822',fontWeight:'bold',fontSize:'30rpx'}">推广教程
							</view>
							<view :style="{color:'#A55822',fontSize:'22rpx'}">推广问题一目了然</view>
						</view>
						<up-image :show-loading="true" src="https://cdn.catmdogd.com/Work/image/work/icon2.png"
							width="71rpx" height="85rpx"></up-image>
					</view>
				</view>
			</view>
		</view>
		<view class="bind-main">
			<view class="bind-main-one mb10">
				<view class="mb20 font32">邀请码邀请</view>
				<view class="mb20">用户输入邀请码，直接完成绑定</view>
				<up-input disabled v-model="userInfo.invitationCode">
					<template #suffix>
						<up-button @click="copyMessage(code)" text="复制" type="success" size="small" shape="circle"></up-button>
					</template>
				</up-input>
			</view>
			<view class="bind-main-two mb10">
				<view class="mb20 font32">分享海报邀请</view>
				<view class="mb20">扫码进入猫妈狗爸完成绑定</view>
				<up-button text="保存海报" type="primary" shape="circle" plain style="background: transparent;"></up-button>
			</view>
			<view class="bind-main-three">
				<view class="mb20 font32">分享链接邀请</view>
				<view class="mb20">复制链接给好友，进入直接绑定</view>
				<up-input disabled v-model="url">
					<template #suffix>
						<up-button @click="copyMessage(url)" text="复制" type="success" size="small" shape="circle"></up-button>
					</template>
				</up-input>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from "vue";
	import {
		useStore
	} from "vuex"


	const store = useStore();
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const code = ref('asdasaadsdsa')
	const url = ref('https://uview-plus.jiangruyi.com/components/button.html');

	//复制
	const copyMessage = (value) => {
		uni.setClipboardData({
			data: value,
			success: function(res) {
				uni.getClipboardData({
					success: function(res) {
						uni.showToast({
							icon: 'none',
							title: "复制成功",
						});
					},
				});
			},
		});
	}
</script>


<style scoped lang="scss">
	@import "index";
</style>