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">
						{{ baseInfo.partner_level }}
					</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"
					@click="configPopupRef.open('pet_attention_details')">
					<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"
					@click="configPopupRef.open('pet_attention_details')">
					<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>
		
		<!-- 
			:style="{'background-image' : `url(${configList.background_popularize_one.paramValueImage})`}" -->
		
		<view class="bind-main">
			<view class="bind-main-one mb10"
			:style="{'background-image' : `url('${configList.background_popularize_one.paramValueImage}')`}">
				<view class="mb20 font32">邀请码邀请</view>
				<view class="mb20">用户输入邀请码，直接完成绑定</view>
				<up-input disabled v-model="dataF.code">
					<template #suffix>
						<up-button @click="copyMessage(dataF.code)" text="复制" type="success" size="small" shape="circle"></up-button>
					</template>
				</up-input>
			</view>
			<view class="bind-main-two mb10"
			:style="{'background-image' : `url('${configList.background_popularize_two.paramValueImage}')`}">
				<view class="mb20 font32">分享海报邀请</view>
				<view class="mb20">扫码进入猫妈狗爸完成绑定</view>
				<up-button @click="toSharing" text="保存海报" type="primary" shape="circle" plain style="background: transparent;"></up-button>
			</view>
			<view class="bind-main-three"
			:style="{'background-image' : `url('${configList.background_popularize_three.paramValueImage}')`}">
				<view class="mb20 font32">分享链接邀请</view>
				<view class="mb20">复制链接给好友，进入直接绑定</view>
				<up-input disabled v-model="dataF.code">
					<template #suffix>
						<up-button @click="copyMessage(dataF.code)" text="复制" type="success" size="small" shape="circle"></up-button>
					</template>
				</up-input>
			</view>
		</view>
		
		<configPopup ref="configPopupRef" />
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		onMounted,
	} from "vue";
	import {
		useStore
	} from "vuex"
	
	import {
		binBaseInfo,
		bindCode,
	} from "@/api/home.js"
	
	import configPopup from '@/components/configPopup.vue'
	
	const store = useStore();
	
	
	const dataF = ref({})
	const baseInfo = ref({})


	const configPopupRef = ref(null)
	
	const configList = computed(() => {
		return store.getters.configList
	})

	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	
	//复制
	const copyMessage = (value) => {
		uni.setClipboardData({
			data: value,
			success: function(res) {
				uni.getClipboardData({
					success: function(res) {
						uni.showToast({
							icon: 'none',
							title: "复制成功",
						});
					},
				});
			},
		});
	}
	
	const getBaseInfo = () => {
		binBaseInfo(baseInfo.value.userId).then(res => {
			baseInfo.value = res.data
		})
		bindCode(baseInfo.value.userId).then(res => {
			dataF.value = res.data
		})
	}
	
	function toSharing(){
		uni.navigateTo({
			url: `/otherPages/workbenchManage/bindUser/sharing`
		})
	}
	
	onMounted(() => {
		baseInfo.value = JSON.parse(uni.getStorageSync("baseInfo"))
		getBaseInfo()
	})
</script>


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