You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
4.2 KiB
198 lines
4.2 KiB
<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>
|