Commit 3920e360 authored by xd's avatar xd

收益 任务列表完成

parent 80cd1b5a
......@@ -61,8 +61,8 @@ const routes = [
component: () => import('@/views/goods/goodGrounding')
},
{
path: '/goodGrounding',
name: 'goodGrounding',
path: '/profitList',
name: 'profitList',
component: () => import('@/views/profit/index')
},
{
......@@ -79,6 +79,11 @@ const routes = [
path: '/task',
name: 'Task',
component: () => import('@/views/mainSale/me/task/index')
},
{
path: '/taskList',
name: 'taskList',
component: () => import('@/views/task/taskList')
}
// {
// path: '/about',
......
<template>
<div class="container">
<div class="active">
<!-- <div class="active">
<div class="list">
<div class="left">
<img src="../../../public/img/counter.png" alt="">
......@@ -28,12 +28,58 @@
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
</div> -->
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell clickable @click="radio = '1'">
<div class="list">
<div class="left">
<img src="../../../public/img/counter.png" alt="" />
</div>
<div class="right">
<h3>欧亚一号专柜</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<van-radio slot="right-icon" name="1" />
</van-cell>
<van-cell clickable @click="radio = '2'">
<div class="list">
<div class="left">
<img src="../../../public/img/counter.png" alt="" />
</div>
<div class="right">
<h3>欧亚一号专柜</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<van-radio slot="right-icon" name="2" />
</van-cell>
<van-cell clickable @click="radio = '3'">
<div class="list">
<div class="left">
<img src="../../../public/img/counter.png" alt="" />
</div>
<div class="right">
<h3>欧亚一号专柜</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<van-radio slot="right-icon" name="3" />
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
</template>
<script>
export default {};
export default {
data() {
return {
radio: ""
};
}
};
</script>
<style scoped>
......@@ -62,7 +108,7 @@ export default {};
.active {
background-color: #fff;
padding: 12px 12px 0 12px;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.list {
height: 94px;
......@@ -70,19 +116,20 @@ export default {};
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238,238,238,1);
border-bottom: 1px solid rgba(238, 238, 238, 1);
margin-bottom: 14px;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,.right {
.left,
.right {
height: 80px;
}
.left {
width: 80px;
background:rgba(248,248,248,1);
background: rgba(248, 248, 248, 1);
}
.left img {
width: 100%;
......@@ -94,12 +141,12 @@ export default {};
}
h3 {
font-size: 14px;
font-weight:bold;
color:rgba(45,71,106,1);
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
p {
margin-top: 10px;
font-size:12px;
color:rgba(45,71,106,0.8);
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
</style>
<template>
<div>
<div class="container">
<div class="top">
<div class="left">
<img src="../../../public/img/money.png" alt="" />
<p>佣金收益</p>
<div class="money">21321.00</div>
<div class="detail">查看明细</div>
</div>
<div class="right">
<img src="../../../public/img/task.png" alt="" />
<p>任务达成</p>
<div class="money">5/10</div>
<div class="detail">查看明细</div>
</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="timeShow = false"
@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="优惠券核销">
<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="商品购买">
<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="拉新会员">
<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-tabs>
</div>
</div>
</template>
<script>
export default {
}
data() {
return {
time: new Date(),
inputValue: "",
timeShow: false,
oldTime: "",
writeOff: false,
finished: false,
writeOffList:[
{
action: "现金券核销",
src: '',
name: "Solomon"
}
],
ShoppingList:[
{
action: "商品购买",
src: '',
name: "Solomon"
}
],
newMemberList:[
{
action: "拉新会员",
src: '',
name: "Solomon"
}
]
};
},
methods: {
onSearch() {},
timeFormat(time) {
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
return year + " " + "/" + " " + month + " " + "/" + " " + day;
},
timeChange(e) {
let newTime = e.getValues();
this.time = `${newTime[0]}-${newTime[1]}-${newTime[2]}`;
},
onClick(name, title) {
this.$toast(title);
},
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
}
},
mounted() {
this.time = this.timeFormat(this.time);
}
};
</script>
<style>
<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-top: 8px;
margin-left: 20px;
}
.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: 100%;
background-color: #f8f8f8;
}
.top {
height: 160px;
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;
}
</style>
<template>
<div class="container">
<van-tabs
type="card"
@click="onClick"
title-active-color="#fff"
title-inactive-color="#2D476A"
class="tab"
background="#F8F8F8"
>
<van-tab title="人员拉新" >
<van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell
:value="item.number"
class="content"
v-for="(item, index) in newMemberList"
:key="index"
is-link
>
<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="顾客流失"> </van-tab>
<van-tab title="拉接受问询"> </van-tab>
<van-tab title="回复问询"> </van-tab>
<van-tab title="推券"> </van-tab>
<van-tab title="推活动"> </van-tab>
<van-tab title="推商品"> </van-tab>
</van-tabs>
</div>
</template>
<script>
export default {
data() {
return {
writeOff: false,
finished: false,
newMemberList:[
{
number: 100,
src: '',
name: "Solomon"
}
]
};
},
methods: {
onClick() {},
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
}
},
};
</script>
<style scoped>
.container >>> .van-tabs__wrap, .van-tabs__wrap--scrollable {
height: 40px;
}
.container >>> .van-tab,.van-tab--active,.van-ellipsis {
line-height: 40px;
}
.content >>> .van-icon-arrow:before {
margin-top: 10px;
color: #2D476A;
}
.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;
}
.tab >>> .van-tabs__nav,
.van-tabs__nav--card {
margin: 0;
}
</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