305 lines
8.1 KiB
Vue
305 lines
8.1 KiB
Vue
<template>
|
||
<view class="xkl-com-bg">
|
||
<view style="height: 20rpx"></view>
|
||
<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; font-size: 30rpx">
|
||
<view style="display: flex; align-items: center">
|
||
<u-image width="100rpx" height="100rpx" :src="shopinfo.avatar" shape="circle"></u-image>
|
||
<view style="width: 20rpx"></view>
|
||
<view>
|
||
<view>{{ shopinfo.nickname }}</view>
|
||
<view style="height: 10rpx"></view>
|
||
<view>{{ shopinfo.account }}</view>
|
||
</view>
|
||
</view>
|
||
<u-divider></u-divider>
|
||
<view style="display: flex; justify-content: space-between">
|
||
<view>
|
||
<view>推广人数：{{ shopinfo.childCount || 0 }}</view>
|
||
<view>订单金额：{{ shopinfo.numberCount || 0 }}</view>
|
||
<view>订单数量：{{ shopinfo.orderCount || 0 }}</view>
|
||
</view>
|
||
<view style="width: 20rpx"></view>
|
||
<view>
|
||
<view>手机号：{{ shopinfo.phone || '-' }}</view>
|
||
<view style="height: 10rpx"></view>
|
||
<view>等级：{{ shopinfo.levelRatio }}</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 16rpx"></view>
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<view>注册时间：{{ shopinfo.createTime }}</view>
|
||
<view>
|
||
<u-button @click="show = true" type="primary" size="small" color="#f33c2b" :plain="true" text="修改等级"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 20rpx"></view>
|
||
<view style="background-color: #ffffff; border-radius: 10rpx; padding: 30rpx; font-size: 30rpx">
|
||
<view style="display: flex; align-items: center">
|
||
<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType === 1 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(1)">
|
||
本周
|
||
</view>
|
||
<view style="width: 30rpx"></view>
|
||
<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType == 2 ? 'xkl_cur' : 'xkl_no'" @click="checkweek(2)">上周</view>
|
||
<view style="width: 30rpx"></view>
|
||
<view>
|
||
<uni-datetime-picker v-model="single" type="daterange" @change="maskClick">
|
||
<view style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx" :class="search.weekType === '' ? 'xkl_cur' : 'xkl_no'">
|
||
<text v-if="search.startTime">{{ search.startTime }} - {{ search.endTime }}</text>
|
||
<text v-else>自定义时间</text>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
</view>
|
||
<!-- <view
|
||
@click="screen.showcalendar = true"
|
||
style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx"
|
||
:class="search.week === '' ? 'xkl_cur' : 'xkl_no'"
|
||
>
|
||
<text v-if="search.startTime">{{ search.startTime }} - {{ search.endTime }}</text>
|
||
<text v-else>自定义时间</text>
|
||
</view> -->
|
||
</view>
|
||
<view style="margin-top: 30rpx; display: flex; align-items: center">
|
||
<view
|
||
v-for="(item, index) in getDateRanges()"
|
||
:key="index"
|
||
style="background-color: #ffffff; border-radius: 12rpx; padding: 10rpx; margin-right: 30rpx"
|
||
:class="search.week === item.name ? 'xkl_cur' : 'xkl_no'"
|
||
@click="checkTime(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<u-divider></u-divider>
|
||
<view style="height: 20rpx"></view>
|
||
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
|
||
</view>
|
||
<u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
|
||
<view style="height: 100rpx"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { shareUserInfo, shareUserInfoStats, editLevel, levelRatioList } from '@/api/user.js';
|
||
export default {
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true
|
||
});
|
||
return {
|
||
show: false,
|
||
screen: {
|
||
showcalendar: false
|
||
},
|
||
shopinfo: {
|
||
nickname: '',
|
||
username: '',
|
||
money: '',
|
||
mobile: '',
|
||
vip: '',
|
||
device_num: '',
|
||
id: ''
|
||
},
|
||
team_device_num: 0,
|
||
chartData: {},
|
||
opts: {
|
||
padding: [15, 10, 0, 15],
|
||
enableScroll: false,
|
||
legend: {},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
showTitle: false
|
||
},
|
||
yAxis: {
|
||
disabled: true,
|
||
gridType: 'dash',
|
||
dashLength: 2
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: 'curve',
|
||
width: 2,
|
||
activeType: 'none'
|
||
}
|
||
}
|
||
},
|
||
search: {
|
||
uid: '',
|
||
start_time: '',
|
||
end_time: '',
|
||
weekType: 1
|
||
},
|
||
dateTime: currentDate,
|
||
single: '',
|
||
team: {},
|
||
columns: []
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
console.log(option.id, 'option.id');
|
||
|
||
if (option && option.id) {
|
||
this.search.uid = option.id;
|
||
}
|
||
|
||
levelRatioList().then((res) => {
|
||
console.log(res.data);
|
||
this.columns = [res.data];
|
||
});
|
||
},
|
||
onReady() {
|
||
this.getServerData();
|
||
},
|
||
async onPullDownRefresh() {
|
||
this.search.weekType = 1;
|
||
this.getServerData();
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
confirm(e) {
|
||
editLevel({
|
||
uid: this.search.uid,
|
||
levelRatio: e.value[0].level
|
||
}).then((res) => {
|
||
this.show = false
|
||
shareUserInfo({ uid: this.search.uid }).then((res) => {
|
||
uni.showToast({
|
||
title:'修改成功',
|
||
icon:"none"
|
||
})
|
||
this.shopinfo = res.data;
|
||
});
|
||
});
|
||
},
|
||
getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
if (type === 'start') {
|
||
year = year - 60;
|
||
} else if (type === 'end') {
|
||
year = year + 2;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}`;
|
||
},
|
||
bindDateChange(e) {
|
||
this.dateTime = e.detail.value;
|
||
},
|
||
getDateRanges() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth(); // 月份从 0 开始，所以当前月份是 month + 1
|
||
|
||
// 定义日期范围
|
||
const ranges = {
|
||
firstRange: {
|
||
name: '1号-10号',
|
||
start: new Date(year, month, 1), // 1号
|
||
end: new Date(year, month, 10) // 10号
|
||
},
|
||
secondRange: {
|
||
name: '11号-20号',
|
||
start: new Date(year, month, 11), // 11号
|
||
end: new Date(year, month, 20) // 20号
|
||
},
|
||
thirdRange: {
|
||
name: '21号-月底',
|
||
start: new Date(year, month, 21) // 21号
|
||
}
|
||
};
|
||
|
||
// 计算当前月份的最后一天
|
||
const lastDayOfMonth = new Date(year, month + 1, 0);
|
||
ranges.thirdRange.end = lastDayOfMonth; // 月底
|
||
|
||
// 格式化日期为 yyyy-mm-dd
|
||
function formatDate(date) {
|
||
const yyyy = date.getFullYear();
|
||
const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 1 开始
|
||
const dd = String(date.getDate()).padStart(2, '0');
|
||
return `${yyyy}-${mm}-${dd}`;
|
||
}
|
||
|
||
return [
|
||
{
|
||
name: ranges.firstRange.name,
|
||
start: formatDate(ranges.firstRange.start),
|
||
end: formatDate(ranges.firstRange.end)
|
||
},
|
||
{
|
||
name: ranges.secondRange.name,
|
||
start: formatDate(ranges.secondRange.start),
|
||
end: formatDate(ranges.secondRange.end)
|
||
},
|
||
{
|
||
name: ranges.thirdRange.name,
|
||
start: formatDate(ranges.thirdRange.start),
|
||
end: formatDate(ranges.thirdRange.end)
|
||
}
|
||
];
|
||
},
|
||
checkTime(e) {
|
||
this.search.startTime = e.start;
|
||
this.search.endTime = e.end;
|
||
this.screen.showcalendar = false;
|
||
this.search.weekType = '';
|
||
this.getServerData();
|
||
},
|
||
checkweek(week) {
|
||
this.search.weekType = week;
|
||
this.search.startTime = '';
|
||
this.search.endTime = '';
|
||
this.getServerData();
|
||
},
|
||
maskClick(e) {
|
||
this.search.startTime = e[0];
|
||
this.search.endTime = e[e.length - 1];
|
||
this.search.weekType = '';
|
||
this.getServerData();
|
||
},
|
||
getServerData() {
|
||
shareUserInfo({ uid: this.search.uid }).then((res) => {
|
||
this.shopinfo = res.data;
|
||
});
|
||
shareUserInfoStats(this.search).then((res) => {
|
||
this.team = res.data;
|
||
let _list = [
|
||
{
|
||
name: '订单数量',
|
||
data: res.data.stats7.map((item) => {
|
||
return item.num;
|
||
})
|
||
},
|
||
{
|
||
name: '订单金额',
|
||
data: res.data.stats7.map((item) => {
|
||
return item.payPrice;
|
||
})
|
||
},
|
||
];
|
||
this.chartData.categories = res.data.dayStr;
|
||
this.chartData.series = _list;
|
||
// this.chartData.console.log(res);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.xkl_cur {
|
||
border: 1px solid #f33c2b;
|
||
color: #f33c2b;
|
||
}
|
||
|
||
.xkl_no {
|
||
border: 1px solid #999999;
|
||
color: #999999;
|
||
}
|
||
</style>
|