Commit b2fa0663 authored by xd's avatar xd

Merge branch 'master' of http://114.67.93.201/xulili/ybf

parents c8338800 57fe2206
<template>
<div class="container">
<div class="titleBars">
<img class="titleBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="titleBar-title">
收益
</div>
</div>
<div class="top">
<div class="">
佣金总收益
</div>
</div>
<div class="list">
<!-- 搜索框 -->
<van-search
v-model="inputValue"
:placeholder="time"
shape="round"
@search="onSearch"
right-icon="notes-o"
left-icon="none"
@click="timeShow = true"
readonly
>
</van-search>
<van-popup v-model="timeShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="oldTime"
type="date"
@cancel="timeShow = false"
@confirm="handleOldTime"
@change="timeChange"
/>
</van-popup>
<!-- 任务列表 -->
<van-tabs
type="card"
@click="onClick"
title-active-color="#fff"
title-inactive-color="#2D476A"
class="tab"
background="#F8F8F8"
>
<van-tab title="优惠券核销" @click="getList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="商品购买" @click="getGoodsList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in ShoppingList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="拉新会员" @click="getNewMemberList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in newMemberList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
</van-tabs>
</div>
<div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['1']" />
<div class="menuBar-title">活动</div>
</div>
<div class="menuBar-menu" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title menuBar-title-ac">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title">任务</div>
</div>
<div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
<div class="menuBar-title">我的</div>
</div>
</div>
</div>
</template>
<script>
import { getProfitList,getGoodsList,getNewMemberList } from '@/api/test/active'
export default {
data() {
return {
time: new Date(),
inputValue: "",
timeShow: false,
oldTime: new Date(),
writeOff: false,
finished: false,
writeOffList: [
{
action: "现金券核销",
src: "",
name: "Solomon"
}
],
ShoppingList: [
{
action: "商品购买",
src: "",
name: "Solomon"
}
],
newMemberList: [
{
action: "拉新会员",
src: "",
name: "Solomon"
}
],
// 图标
menuBarInfo: {
list: {
main: [
{
name: "",
iconUaUrl: "",
iconAcUrl: ""
}
]
},
icon: {
now: {
"1": "",
"2": "",
"3": "",
"4": "",
"5": ""
},
ua: {
"1": "/mainSale/icon-menuBar-1-ua.png",
"2": "/mainSale/icon-menuBar-2-ua.png",
"3": "/mainSale/icon-menuBar-3-ua.png",
"4": "/mainSale/icon-menuBar-4-ua.png",
"5": "/mainSale/icon-menuBar-5-ua.png"
},
ac: {
"1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png"
}
}
}
};
},
created() {
this.checkNowMenuBar();
this.getList()
},
methods: {
getList() {
let data = {
}
getProfitList(data).then(res => {
console.log(res,"收益列表");
})
},
getGoodsList() {
let data = {
}
getGoodsList(data).then(res => {
console.log(res,"商品购买列表");
})
},
getNewMemberList() {
let data = {
}
getNewMemberList(data).then(res => {
console.log(res,"拉新会员列表");
})
},
onSearch() {},
timeFormat(time) {
let year = 1900 + time.getYear();
let month = "0" + (time.getMonth() + 1);
let date = "0" + time.getDate();
return year + "-" + month.substring(month.length-2, month.length) + "-" + date.substring(date.length-2, date.length)
+ " "
},
timeChange(e) {
let newTime = e.getValues();
this.inputValue = `${newTime[0]}-${newTime[1]}-${newTime[2]}`;
},
onClick(name, title) {
this.$toast(title);
},
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
},
menuCase() {
this.$router.push({ path: "/case" });
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
// 导航
checkNowMenuBar() {
let inData = "3";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
},
menuBarClick(inData) {
this.$router.push(inData);
},
listTaskClick() {
this.$router.push("Task");
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
handleOldTime(value) {
this.inputValue = this.timeFormat(value)
this.timeShow = false
}
},
mounted() {
this.time = this.timeFormat(this.time);
}
};
</script>
<style scoped>
.container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px;
}
.container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px;
}
.tab {
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.content >>> .van-cell__value {
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
line-height: 44px;
}
.custom-title {
margin-left: 12px;
font-size: 16px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.content img {
width: 44px;
height: 44px;
border-radius: 50%;
vertical-align: middle;
}
.tab >>> .van-tabs__nav--card .van-tab {
border-right: none;
}
.tab >>> .van-tab.van-tab--active {
background-color: #75b2fd;
}
.tab >>> .van-tabs__nav--card {
margin: 0;
border: none;
height: 40px;
}
.list >>> .van-icon,
.van-icon-notes-o {
color: #2d476a;
}
.list {
height: 469px;
background: rgba(255, 255, 255, 1);
margin-top: 12px;
}
.money {
width: 120px;
height: 32px;
line-height: 32px;
background: rgba(248, 248, 248, 1);
border-radius: 16px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: rgba(208, 2, 27, 1);
margin: 0 auto;
margin-top: 8px;
}
.detail {
font-size: 10px;
color: rgba(117, 178, 253, 1);
margin-top: 8px;
}
.top p {
color: rgba(45, 71, 106, 1);
font-size: 12px;
}
.top img {
width: 32px;
height: 32px;
}
.container {
height: auto;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.top {
/* border: 1px solid blue; */
height: 120px;
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 24px;
display: flex;
}
.left,
.right {
flex: 1;
width: 100%;
text-align: center;
}
.right {
border-left: 1px solid #eee;
}
.main-menuBar {
/*border: 1px solid darkviolet;*/
box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
width: 100%;
height: 82px;
position: fixed;
bottom: 0px;
left: 0px;
background-color: #fafafa;
padding: 0px 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menuBar-menu {
/*background-color: greenyellow;*/
width: 48px;
height: 47px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.menuBar-icon {
width: 24px;
height: 24px;
object-fit: cover;
}
.menuBar-title {
width: auto;
height: 12px;
font-size: 10px;
font-weight: bold;
color: rgba(67, 119, 188, 0.4);
text-align: center;
}
.menuBar-title-ac {
color: rgba(67, 119, 188, 1);
}
.titleBars{
height: 32px;
width: 100%;
/* border: 2px solid red; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
margin-bottom: 4px;
}
.titleBar-icon {
height: 28px;
width: 28px;
/* border: 2px solid orange; */
}
.titleBar-title{
height: 100%;
width: auto;
/* border: 2px solid green; */
font-size: 18px;
line-height: 32px;
text-align: center;
}
</style>
<template>
<div class="container">
<div class="titleBars">
<img class="titleBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="titleBar-title">
收益
</div>
</div>
<div class="top">
<div class="">
佣金总收益
</div>
</div>
<div class="list">
<!-- 搜索框 -->
<van-search
v-model="inputValue"
:placeholder="time"
shape="round"
@search="onSearch"
right-icon="notes-o"
left-icon="none"
@click="timeShow = true"
readonly
>
</van-search>
<van-popup v-model="timeShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="oldTime"
type="date"
@cancel="timeShow = false"
@confirm="handleOldTime"
@change="timeChange"
/>
</van-popup>
<!-- 任务列表 -->
<van-tabs
type="card"
@click="onClick"
title-active-color="#fff"
title-inactive-color="#2D476A"
class="tab"
background="#F8F8F8"
>
<van-tab title="优惠券核销" @click="getList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="商品购买" @click="getGoodsList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in ShoppingList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
<van-tab title="拉新会员" @click="getNewMemberList">
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.action"
class="content"
v-for="(item, index) in newMemberList"
:key="index"
>
<template slot="title">
<img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{ item.name }}</span>
</template>
</van-cell>
</van-list>
</van-tab>
</van-tabs>
</div>
<div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['1']" />
<div class="menuBar-title">活动</div>
</div>
<div class="menuBar-menu" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title menuBar-title-ac">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title">任务</div>
</div>
<div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
<div class="menuBar-title">我的</div>
</div>
</div>
</div>
</template>
<script>
import { getProfitList,getGoodsList,getNewMemberList } from '@/api/test/active'
export default {
data() {
return {
time: new Date(),
inputValue: "",
timeShow: false,
oldTime: new Date(),
writeOff: false,
finished: false,
writeOffList: [
{
action: "现金券核销",
src: "",
name: "Solomon"
}
],
ShoppingList: [
{
action: "商品购买",
src: "",
name: "Solomon"
}
],
newMemberList: [
{
action: "拉新会员",
src: "",
name: "Solomon"
}
],
// 图标
menuBarInfo: {
list: {
main: [
{
name: "",
iconUaUrl: "",
iconAcUrl: ""
}
]
},
icon: {
now: {
"1": "",
"2": "",
"3": "",
"4": "",
"5": ""
},
ua: {
"1": "/mainSale/icon-menuBar-1-ua.png",
"2": "/mainSale/icon-menuBar-2-ua.png",
"3": "/mainSale/icon-menuBar-3-ua.png",
"4": "/mainSale/icon-menuBar-4-ua.png",
"5": "/mainSale/icon-menuBar-5-ua.png"
},
ac: {
"1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png"
}
}
}
};
},
created() {
this.checkNowMenuBar();
this.getList()
},
methods: {
getList() {
let data = {
}
getProfitList(data).then(res => {
console.log(res,"收益列表");
})
},
getGoodsList() {
let data = {
}
getGoodsList(data).then(res => {
console.log(res,"商品购买列表");
})
},
getNewMemberList() {
let data = {
}
getNewMemberList(data).then(res => {
console.log(res,"拉新会员列表");
})
},
onSearch() {},
timeFormat(time) {
let year = 1900 + time.getYear();
let month = "0" + (time.getMonth() + 1);
let date = "0" + time.getDate();
return year + "-" + month.substring(month.length-2, month.length) + "-" + date.substring(date.length-2, date.length)
+ " "
},
timeChange(e) {
let newTime = e.getValues();
this.inputValue = `${newTime[0]}-${newTime[1]}-${newTime[2]}`;
},
onClick(name, title) {
this.$toast(title);
},
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
},
menuCase() {
this.$router.push({ path: "/case" });
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
// 导航
checkNowMenuBar() {
let inData = "3";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
},
menuBarClick(inData) {
this.$router.push(inData);
},
listTaskClick() {
this.$router.push("Task");
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
handleOldTime(value) {
this.inputValue = this.timeFormat(value)
this.timeShow = false
}
},
mounted() {
this.time = this.timeFormat(this.time);
}
};
</script>
<style scoped>
.container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px;
}
.container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px;
}
.tab {
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.content >>> .van-cell__value {
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
line-height: 44px;
}
.custom-title {
margin-left: 12px;
font-size: 16px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.content img {
width: 44px;
height: 44px;
border-radius: 50%;
vertical-align: middle;
}
.tab >>> .van-tabs__nav--card .van-tab {
border-right: none;
}
.tab >>> .van-tab.van-tab--active {
background-color: #75b2fd;
}
.tab >>> .van-tabs__nav--card {
margin: 0;
border: none;
height: 40px;
}
.list >>> .van-icon,
.van-icon-notes-o {
color: #2d476a;
}
.list {
height: 469px;
background: rgba(255, 255, 255, 1);
margin-top: 12px;
}
.money {
width: 120px;
height: 32px;
line-height: 32px;
background: rgba(248, 248, 248, 1);
border-radius: 16px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: rgba(208, 2, 27, 1);
margin: 0 auto;
margin-top: 8px;
}
.detail {
font-size: 10px;
color: rgba(117, 178, 253, 1);
margin-top: 8px;
}
.top p {
color: rgba(45, 71, 106, 1);
font-size: 12px;
}
.top img {
width: 32px;
height: 32px;
}
.container {
height: auto;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.top {
/* border: 1px solid blue; */
height: 120px;
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 24px;
display: flex;
}
.left,
.right {
flex: 1;
width: 100%;
text-align: center;
}
.right {
border-left: 1px solid #eee;
}
.main-menuBar {
/*border: 1px solid darkviolet;*/
box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
width: 100%;
height: 82px;
position: fixed;
bottom: 0px;
left: 0px;
background-color: #fafafa;
padding: 0px 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menuBar-menu {
/*background-color: greenyellow;*/
width: 48px;
height: 47px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.menuBar-icon {
width: 24px;
height: 24px;
object-fit: cover;
}
.menuBar-title {
width: auto;
height: 12px;
font-size: 10px;
font-weight: bold;
color: rgba(67, 119, 188, 0.4);
text-align: center;
}
.menuBar-title-ac {
color: rgba(67, 119, 188, 1);
}
.titleBars{
height: 32px;
width: 100%;
/* border: 2px solid red; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
margin-bottom: 4px;
}
.titleBar-icon {
height: 28px;
width: 28px;
/* border: 2px solid orange; */
}
.titleBar-title{
height: 100%;
width: auto;
/* border: 2px solid green; */
font-size: 18px;
line-height: 32px;
text-align: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment