375 lines
8.7 KiB
Vue
375 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="width-auto" style="position: relative">
|
|||
|
|
<view class="title">
|
|||
|
|
{{$t('ENU_MENU_512')}}
|
|||
|
|
</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>
|
|||
|
|
{{$t('MN_T_1')}}：{{userInfo.memberCode}}
|
|||
|
|
</view>
|
|||
|
|
<u-button size="mini" style="padding: 0;width: 0;"
|
|||
|
|
@click="copy(userInfo.memberCode)">{{ $t("MY_CK_27")}}</u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="name-s">{{$t('CK_KS_14')}}：{{userInfo.memberName}}
|
|||
|
|
<view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="name-s">{{$t('PER_DA_9')}}：{{userInfo.payTime.substring(0,10)}}
|
|||
|
|
<view></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="name-s" style="margin-bottom: 10px">
|
|||
|
|
{{$t('w_0306')}}：{{userInfo.consumeAchieve | numFilter}}
|
|||
|
|
<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>
|
|||
|
|
{{$t('MN_T_1')}}：{{userInfo1.memberCode}}
|
|||
|
|
</view>
|
|||
|
|
<u-button size="mini" style="padding: 0;width: 0;"
|
|||
|
|
@click="copy(userInfo1.memberCode)">{{ $t("MY_CK_27")}}</u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="name-s">{{$t('CK_KS_14')}}：{{userInfo1.memberName}}</view>
|
|||
|
|
<view class="name-s">{{$t('PER_DA_9')}}：{{userInfo1.payTime.substring(0,10)}}</view>
|
|||
|
|
<view class="name-s" style="margin-bottom: 10px">
|
|||
|
|
{{$t('w_0306')}}：{{userInfo1.consumeAchieve | numFilter}}</view>
|
|||
|
|
</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>
|
|||
|
|
<view class="code">{{$t('N_I_101')}}</view>
|
|||
|
|
<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>
|
|||
|
|
{{$t('MN_T_1')}}：{{userInfo2.memberCode}}
|
|||
|
|
</view>
|
|||
|
|
<u-button size="mini" style="padding: 0;width: 0;"
|
|||
|
|
@click="copy(userInfo2.memberCode)">{{ $t("MY_CK_27")}}</u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="name-s">{{$t('CK_KS_14')}}：{{userInfo2.memberName}}</view>
|
|||
|
|
<view class="name-s">{{$t('PER_DA_9')}}：{{userInfo2.payTime.substring(0,10)}}</view>
|
|||
|
|
<view class="name-s" style="margin-bottom: 10px">
|
|||
|
|
{{$t('w_0306')}}：{{userInfo2.consumeAchieve | numFilter}}</view>
|
|||
|
|
</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>
|
|||
|
|
<view class="code">{{$t('N_I_101')}}</view>
|
|||
|
|
<view class="code" style="font-size: 28rpx">{{$t('S_C_19')}}</view>
|
|||
|
|
</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>
|