angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
web-base-h5/components/distribution/placement.vue

375 lines
8.6 KiB
Vue
Raw Permalink Normal View History

## 初始化；
2025-03-23 09:29:40 +08:00
<template>
<view class="width-auto" style="position: relative">
<view class="title">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'安置图'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<!-- <view class="right-lines">
<scroll-view class="left_scrol_style" scroll-x="false" scroll-y="true">
<view class="flex-s">
<view class="item-s" v-for="item in list">
<view>
<view class="bg-color" >
<image style="width: 100%;height: 100%;" :src="item.value" mode=""></image>
</view>
<view style="color: #333;text-align: center;">{{item.name}}</view>
</view>
</view>
</view>
</scroll-view>
</view> -->
<view class="data-list">
<view class="user-data" @click="mouseOvers(1)">
<view class="mouseOvers" v-if="check1">
<view class="name-s" style="display: flex;align-items: center;">
<view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'会员编号'}}：{{userInfo.memberCode}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<u-button size="mini" style="padding: 0;width: 0;"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@click="copy(userInfo.memberCode)">{{ '复制'}}</u-button>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="name-s">{{'会员姓名'}}：{{userInfo.memberName}}
## 初始化；
2025-03-23 09:29:40 +08:00
<view></view>
</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="name-s">{{'创建日期'}}：{{userInfo.payTime.substring(0,10)}}
## 初始化；
2025-03-23 09:29:40 +08:00
<view></view>
</view>
<view class="name-s" style="margin-bottom: 10px">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'消费业绩'}}：{{userInfo.consumeAchieve | numFilter}}
## 初始化；
2025-03-23 09:29:40 +08:00
<view></view>
</view>
</view>
<view class="border-color">
<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
<!-- <img :src="this.myChart.imageUrl"> -->
</view>
<view class="code">{{this.myChart.memberCode}}</view>
<view class="code">({{this.myChart.memberName}})</view>
</view>
</view>
<view class="data-list1" v-if="this.myChart.leftMember">
<view class="user-data" @click="mouseOvers(2)">
<view class="mouseOvers" v-if="check2">
<view class="name-s" style="display: flex;align-items: center;">
<view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'会员编号'}}：{{userInfo1.memberCode}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<u-button size="mini" style="padding: 0;width: 0;"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@click="copy(userInfo1.memberCode)">{{ '复制'}}</u-button>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="name-s">{{'会员姓名'}}：{{userInfo1.memberName}}</view>
<view class="name-s">{{'创建日期'}}：{{userInfo1.payTime.substring(0,10)}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="name-s" style="margin-bottom: 10px">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'消费业绩'}}：{{userInfo1.consumeAchieve | numFilter}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="border-color">
<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
<!-- <img :src="this.myChart.leftMember.lastImageUrl ||''"> -->
</view>
<view class="code">{{this.myChart.leftMember.lastMemberCode}}</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="code">{{'最末安置'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="code" style="font-size: 28rpx">左区</view>
</view>
</view>
<view class="data-list2" v-if="this.myChart.rightMember">
<view class="user-data" @click="mouseOvers(3)">
<view class="mouseOvers" v-if="check3" style="margin-left: -260rpx">
<view class="name-s" style="display: flex;align-items: center;">
<view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'会员编号'}}：{{userInfo2.memberCode}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<u-button size="mini" style="padding: 0;width: 0;"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@click="copy(userInfo2.memberCode)">{{ '复制'}}</u-button>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="name-s">{{'会员姓名'}}：{{userInfo2.memberName}}</view>
<view class="name-s">{{'创建日期'}}：{{userInfo2.payTime.substring(0,10)}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="name-s" style="margin-bottom: 10px">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'消费业绩'}}：{{userInfo2.consumeAchieve | numFilter}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="border-color" v-if="this.myChart.rightMember">
<image class="theimg" src="../../static/images/avatar.png" mode=""></image>
<!-- <img :src="this.myChart.rightMember.lastImageUrl"> -->
</view>
<view class="code">{{this.myChart.rightMember.lastMemberCode}}</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="code">{{'最末安置'}}</view>
<view class="code" style="font-size: 28rpx">{{'右区'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
</view>
</view>
</template>
<script>
import * as echarts from "echarts";
import {
getPlaceMent,
getTreeDetail,getAvatarInfo
} from "@/config/distribute.js";
export default {
name: "recommendTime",
data() {
return {
myChart: {},
check1: false,
index1: 0,
check2: false,
index2: 0,
check3: false,
index3: 0,
userInfo: {},
userInfo1: {},
userInfo2: {},
list: [{
"name": "市代",
"color": "linear-gradient(180deg, #EA728D 0%, #F3CF4F 100%)"
},
{
"name": "区代",
"color": "linear-gradient(180deg, #14E3A3 0%, #EBDF3C 84%)"
},
{
"name": "SVIP",
"color": "#EC6C00"
},
{
"name": "VIP",
"color": "#009B58"
},
{
"name": "创客",
"color": "#48B2FD"
},
{
"name": "优客",
"color": "#ED1D25"
},
{
"name": "嗨粉",
"color": "#B6007A"
},
{
"name": "海粉",
"color": "#0015CE"
},
],
}
},
created() {
this.getInit();
this.userInfo = uni.getStorageSync('User')
},
filters: {
numFilter(value) {
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2)
return realVal
}
},
methods: {
copy(data) {
uni.setClipboardData({
data: data,
success: () => {
uni.showToast({
title: "复制成功"
})
}
})
},
mouseOvers(data) {
if (data == 1) {
this.check1 = true
this.check2 = false
this.check3 = false
if (this.index1 == 0) {
getTreeDetail({
"memberCode": this.myChart.memberCode
}).then((res) => {
this.userInfo = res.data
})
}
this.index1++;
}
if (data == 2) {
this.check1 = false
this.check2 = true
this.check3 = false
if (this.index2 == 0) {
getTreeDetail({
"memberCode": this.myChart.leftMember.lastMemberCode
}).then((res) => {
this.userInfo1 = res.data
})
}
this.index2++;
}
if (data == 3) {
this.check1 = false
this.check2 = false
this.check3 = true
if (this.index3 == 0) {
getTreeDetail({
"memberCode": this.myChart.rightMember.lastMemberCode
}).then((res) => {
this.userInfo2 = res.data
})
}
this.index3++;
}
},
mouseOut(data) {
if (data == 1) {
this.check1 = false
}
if (data == 2) {
this.check2 = false
}
if (data == 3) {
this.check3 = false
}
},
getInit() {
getAvatarInfo().then(res=>{
this.list = res.data
})
getPlaceMent().then((res) => {
this.myChart = res.data
})
}
}
}
</script>
<style scoped lang="scss">
.flex-s {
width: fit-content;
display: flex;
width: 100%;
// justify-content: center;
align-items: center;
background-color: #fff;
flex-wrap: wrap;
// height: 80rpx;
// line-height: 80rpx;
}
/*左侧分类视图*/
.left_scrol_style {
white-space: nowrap;
width: 100%;
}
.title {
padding: 20rpx 30rpx;
height: 80rpx;
line-height: 80rpx;
border-bottom: 10rpx solid #f3f3f3;
margin-top: 10rpx;
}
.name-s {
color: #333;
font-size: 20rpx;
margin-bottom: 20rpx;
word-break: break-all;
}
.mouseOvers {
padding: 10px 5px;
width: 265rpx;
//height: 144px;
border-radius: 8px 8px 8px 8px;
opacity: 1;
border: 1px solid #ED1D25;
position: absolute;
margin-left: 80px;
z-index: 111;
}
.user-data {
position: relative;
}
.code {
color: #333;
font-size: 20rpx;
margin-top: 4px;
margin-bottom: 15px;
text-align: center;
}
.data-list {
margin: 100rpx 0 0 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.data-list2 {
margin:350rpx 20rpx 0 0 ;
position: absolute;
right: 20rpx;
}
.data-list1 {
margin: 350rpx 0 0 20rpx;
position: absolute;
left: 20rpx;
}
.border-color {
width: 120rpx;
height: 120rpx;
margin-left: 8px;
border-radius: 50%;
img {
width: 120rpx;
height: 120rpx;
}
.theimg{
width: 100%;
height: 100%;
}
}
.width-auto {
position: relative;
height: 1200rpx;
background-color: #fff;
border-radius: 20rpx;
margin: 20rpx auto;
}
.right-lines {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
position: absolute;
color: #999;
font-size: 24rpx;
flex-wrap: wrap;
}
.item-s {
padding-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
// width: 100%;
line-height: 30px;
margin-left: 20rpx;
// margin-right: 20rpx;
flex-wrap: wrap;
}
.bg-color {
width: 68rpx;
height: 68rpx;
border-radius: 4px;
}
</style>