first commit
This commit is contained in:
PC-202306242200\Administrator
304
pages/users/users_share/info.vue
Normal file
304
pages/users/users_share/info.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user