|
@@ -0,0 +1,322 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="friend_local">
|
|
|
|
|
+ <div class="top_parent">
|
|
|
|
|
+ <div class="btnBox">
|
|
|
|
|
+ <div class="t1 flex_r flex_jb flex_ac">
|
|
|
|
|
+ <span>缘起:{{ higherInfo.nickname }}</span>
|
|
|
|
|
+ <div class="btn" @click="goto('/pagesB/orderingfood/activationcode')">
|
|
|
|
|
+ 生成激活码
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="t2">
|
|
|
|
|
+ <span>电话:{{ higherInfo.mobile }}</span>
|
|
|
|
|
+ <span class="copyBalance" @tap="copyAccount(higherInfo.mobile)">复制</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="top_table_box flex_r flex_jb flex_ac">
|
|
|
|
|
+ <div class="total_Box">
|
|
|
|
|
+ <div class="total_con flex_c flex_ac flex_jc">
|
|
|
|
|
+ <div class="total_text">
|
|
|
|
|
+ <span class="total_num dinB">{{ myChayoyTotal.headcount || 0 }}</span>
|
|
|
|
|
+ <span>人</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="total_text">社区总数</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="total_con2">
|
|
|
|
|
+ <div class="total_text">推广用户:{{myChayoyTotal.direct || 0}}</div>
|
|
|
|
|
+ <div class="total_text">转介绍用户:{{myChayoyTotal.indirect || 0}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="top_table flex_r flex_wrap">
|
|
|
|
|
+ <div class="tb_item tb_th">新增用户</div>
|
|
|
|
|
+ <div class="tb_item tb_th">今日</div>
|
|
|
|
|
+ <div class="tb_item tb_th">本周</div>
|
|
|
|
|
+ <div class="tb_item tb_th">本月</div>
|
|
|
|
|
+ <div class="tb_item">推广用户</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyDirect.day }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyDirect.week }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyDirect.month }}</div>
|
|
|
|
|
+ <div class="tb_item">转介绍用户</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyIndirect.day }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyIndirect.week }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyIndirect.month }}</div>
|
|
|
|
|
+ <div class="tb_item">总计</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyTotal.day }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyTotal.week }}</div>
|
|
|
|
|
+ <div class="tb_item">{{ myChayoyTotal.month }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tabs_box">
|
|
|
|
|
+ <div class="tabs">
|
|
|
|
|
+ <div class="tab" @click="getTeamList(i.level)" :class="{ active: type == i.level }" v-for="i in classID" :key="i.level">
|
|
|
|
|
+ {{ i.name }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="user_info flex_r flex_jb" v-for="(i, s) in users" :key="s">
|
|
|
|
|
+ <img class="userimg" :src="i.head_pic" />
|
|
|
|
|
+ <div class="u_info">
|
|
|
|
|
+ <div class="p1">{{ i.nickname || classID[type] }}</div>
|
|
|
|
|
+ <div class="p1">手机号:{{ i.mobile }}</div>
|
|
|
|
|
+ <div class="p3">加入时间:{{ $day(i.reg_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script>
|
|
|
|
|
+import uniCopy from "@/utils/copy";
|
|
|
|
|
+import { post } from "@/request/api.js";
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: "friend_local",
|
|
|
|
|
+ props: {},
|
|
|
|
|
+ components: {},
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ higherInfo: {},
|
|
|
|
|
+ myChayoyTotal: {},
|
|
|
|
|
+ myChayoyDirect: {},
|
|
|
|
|
+ myChayoyIndirect: {},
|
|
|
|
|
+ codeNum: 0,
|
|
|
|
|
+ classID: {},
|
|
|
|
|
+ type: "",
|
|
|
|
|
+ users: [],
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ getTableData() {
|
|
|
|
|
+ post("v1/my/chayou").then((res) => {
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ this.higherInfo = res.data.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ post("v1/my/myChayoyTotal").then((res) => {
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ this.myChayoyTotal = res.data.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ post("v1/my/myChayoyDirect").then((res) => {
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ this.myChayoyDirect = res.data.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ post("v1/my/myChayoyIndirect").then((res) => {
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ this.myChayoyIndirect = res.data.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getPurview() {
|
|
|
|
|
+ post("local/waitActivation").then((res) => {
|
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
|
+ for (const i in res.data) {
|
|
|
|
|
+ this.codeNum += res.data[i].codes?.length;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getTeamNum() {
|
|
|
|
|
+ post("local/getTeamNum").then((res) => {
|
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
|
+ this.classID = res.data.tab;
|
|
|
|
|
+ this.getTeamList(this.classID[0].level);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getTeamList(level) {
|
|
|
|
|
+ this.type = level;
|
|
|
|
|
+ post("v1/my/mychayou", { level, page: 1, rows: 1000 }).then(
|
|
|
|
|
+ (res) => {
|
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
|
+ this.users = res.data[0].data.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
|
|
+ },
|
|
|
|
|
+ // 复制账号
|
|
|
|
|
+ copyAccount(e) {
|
|
|
|
|
+ uniCopy({
|
|
|
|
|
+ content: e,
|
|
|
|
|
+ success: (res) => {},
|
|
|
|
|
+ error: (e) => {},
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(da) {
|
|
|
|
|
+ this.getTableData();
|
|
|
|
|
+ // this.getPurview()
|
|
|
|
|
+ this.getTeamNum();
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow() {},
|
|
|
|
|
+ mounted() {},
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped lang='scss'>
|
|
|
|
|
+// .friend_local {
|
|
|
|
|
+// padding: 28rpx 32rpx;
|
|
|
|
|
+// }
|
|
|
|
|
+
|
|
|
|
|
+.top_parent {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ padding: 60rpx 32rpx 86rpx;
|
|
|
|
|
+ background-color: #18bb88;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .t1 {
|
|
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ padding: 3rpx 16rpx 5rpx;
|
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
|
+ background-color: #d3aa79;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .copyBalance {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background: #d3aa79;
|
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ padding: 2rpx 18rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .t2 {
|
|
|
|
|
+ span {
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.top_table_box {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ padding: 23rpx 28rpx;
|
|
|
|
|
+ margin-bottom: 26rpx;
|
|
|
|
|
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
|
|
|
|
|
+ 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.top_table_box {
|
|
|
|
|
+ margin-top: -20rpx;
|
|
|
|
|
+ margin-bottom: 60rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .total_Box {
|
|
|
|
|
+ width: 180rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .total_con {
|
|
|
|
|
+ width: 138rpx;
|
|
|
|
|
+ height: 128rpx;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ border: 6rpx solid #1cbe8c;
|
|
|
|
|
+ border-radius: 66rpx;
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .total_text span {
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .total_num {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ margin-right: 4rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .total_con2 {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #555;
|
|
|
|
|
+
|
|
|
|
|
+ .total_text {
|
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.top_table {
|
|
|
|
|
+ width: calc(100% - 200rpx);
|
|
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
|
|
+ border-left: none;
|
|
|
|
|
+ border-top: none;
|
|
|
|
|
+
|
|
|
|
|
+ .tb_item {
|
|
|
|
|
+ width: 23.33%;
|
|
|
|
|
+ color: #555;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ border-right: none;
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ padding: 8rpx 0;
|
|
|
|
|
+
|
|
|
|
|
+ &:nth-child(4n + 1) {
|
|
|
|
|
+ width: 30%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tb_th {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tabs_box {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ padding: 0 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tabs {
|
|
|
|
|
+ // color: #666;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ margin-right: 36rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .active {
|
|
|
|
|
+ color: #18bb88;
|
|
|
|
|
+ border-bottom: 4rpx solid rgba($color: #18bb88, $alpha: 0.6);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.user_info {
|
|
|
|
|
+ padding: 25rpx 28rpx;
|
|
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
|
|
+ // margin-top: 28rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .userimg {
|
|
|
|
|
+ width: 130rpx;
|
|
|
|
|
+ height: 130rpx;
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .u_info {
|
|
|
|
|
+ width: calc(100% - 130rpx);
|
|
|
|
|
+ padding: 4rpx 0 4rpx 30rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .p1 {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p3 {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|