Skip to content

Y
ybf
Commit 8d6981df authored by xd's avatar xd
Browse files
Options

大转盘活动创建未完成

parent 0957108e
Show whitespace changes
Inline Side-by-side
Showing with 1642 additions and 375 deletions
ybf_wx/src/router/index.js
View file @ 8d6981df
...@@ -25,6 +25,11 @@ const routes = [ ...@@ -25,6 +25,11 @@ const routes = [
name: 'activeList', name: 'activeList',
component: () => import('../views/active/activeList.vue') component: () => import('../views/active/activeList.vue')
}, },
{
path: '/createBigWheelActive',
name: 'createBigWheelActive',
component: () => import('../views/active/createBigWheelActive.vue')
},
{ {
path: '/discount', path: '/discount',
name: 'Discount', name: 'Discount',
...@@ -84,7 +89,22 @@ const routes = [ ...@@ -84,7 +89,22 @@ const routes = [
path: '/taskList', path: '/taskList',
name: 'taskList', name: 'taskList',
component: () => import('@/views/task/taskList') component: () => import('@/views/task/taskList')
} },
{
path: '/newMemberTask',
name: 'newMemberTask',
component: () => import('@/views/task/newMemberTask')
},
{
path: '/case',
name: 'case',
component: () => import('@/views/case/index')
},
{
path: '/caseDetail',
name: 'caseDetail',
component: () => import('@/views/case/caseDetail')
},
// { // {
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
......
ybf_wx/src/views/active/createActive.vue
View file @ 8d6981df
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<van-field <van-field
class="right" class="right"
v-model="startTime1" v-model="startTime1"
placeholder="选择活动结束时间" readonly="readonly" placeholder="选择活动开始时间" readonly="readonly"
@click="startShow = true" @click="startShow = true"
/> />
<van-popup v-model="startShow" position="bottom" :overlay="true"> <van-popup v-model="startShow" position="bottom" :overlay="true">
......
ybf_wx/src/views/active/createBigWheelActive.vue 0 → 100644
View file @ 8d6981df
<template>
<div class="container">
<div class="title">基础设置</div>
<van-cell-group class="all">
<van-cell title="活动标题" style="font-size:14px;">
<template slot="default">
<van-field
v-model="basicInfo.title"
placeholder="请输入活动标题"
class="right"
style="font-size:14px;"
/>
</template>
</van-cell>
<van-cell title="活动开始时间" style="font-size:14px;">
<template slot="default">
<van-field
class="right"
v-model="basicInfo.startTime1"
placeholder="选择活动开始时间"
readonly="readonly"
@click="basicInfo.startShow = true"
/>
<van-popup
v-model="basicInfo.startShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="basicInfo.startTime"
type="datetime"
@cancel="basicInfo.startShow = false"
@confirm="basicInfo.startShow = false"
@change="startTimeChange"
/>
</van-popup>
</template>
</van-cell>
<van-cell title="活动结束时间" style="font-size:14px;">
<template slot="default">
<van-field
class="right"
v-model="basicInfo.endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="endShow = true"
/>
<van-popup
v-model="basicInfo.endShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="basicInfo.endTime"
type="datetime"
@cancel="basicInfo.endShow = false"
@confirm="basicInfo.endShow = false"
@change="endTimeChange"
/>
</van-popup>
</template>
</van-cell>
<van-cell title="领券条件" style="font-size:14px;">
<template slot="default">
<span class="phone">手机号必填</span>
<van-switch v-model="condition" size="20px" />
</template>
</van-cell>
</van-cell-group>
<div class="title">抽奖设置</div>
<van-cell-group class="all">
<van-cell style="font-size:14px;" center class="cs">
<template slot="title">
<span class="custom-title">每天抽奖</span>
<span class="small">（单人最多可抽奖次数）</span>
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.number"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show = true"
/>
<van-number-keyboard
v-model="LuckyDraw.number"
:show="LuckyDraw.show"
@blur="LuckyDraw.show = false"
/>
</template>
</van-cell>
<van-cell style="font-size:14px;" class="cs">
<template slot="title">
<span class="custom-title">最多中奖</span>
<span class="small">（单人最多可中奖次数）</span>
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.winningNumber"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show2 = true"
/>
<van-number-keyboard
v-model="LuckyDraw.winningNumber"
:show="LuckyDraw.show2"
@blur="LuckyDraw.show2 = false"
/>
</template>
</van-cell>
<van-cell style="font-size:14px;" class="cs gl">
<template slot="title">
<span class="custom-title">中奖概率</span>
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.probability"
@touchstart.native.stop="LuckyDraw.show3 = true"
/>
<span class="bfb">%</span>
<van-number-keyboard
v-model="LuckyDraw.probability"
:show="LuckyDraw.show3"
@blur="LuckyDraw.show3 = false"
/>
</template>
</van-cell>
<van-cell style="font-size:14px;" class="task">
<template slot="title">
<span class="custom-title">做任务奖次数</span>
<div style="font-size:10px;">
（开启后提醒顾客领取任务，如发朋友圈、加好友等，增加抽奖次数）
</div>
</template>
<template slot="default">
<van-switch v-model="LuckyDraw.quantity" size="20px" class="right" />
</template>
</van-cell>
<van-cell style="font-size:14px;" class="cs">
<template slot="title">
<span class="custom-title">增加次数</span>
<span class="small">（点击“增加次数”按钮增加几次次数）</span>
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.winningNumber"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show2 = true"
/>
<van-number-keyboard
v-model="LuckyDraw.winningNumber"
:show="LuckyDraw.show2"
@blur="LuckyDraw.show2 = false"
/>
</template>
</van-cell>
</van-cell-group>
<div class="title">奖品设置</div>
<van-cell-group class="all sz">
<van-cell
title="奖项名称"
style="font-size:14px;"
:value="LuckyDraw.name"
class="name"
>
</van-cell>
<van-cell title="优惠券类型" style="font-size:14px;" class="type">
<template slot="default">
<van-radio-group v-model="type" class="right">
<van-radio name="1" style="float:left;">代金券</van-radio>
<van-radio name="2" style="float:right;">折扣券</van-radio>
</van-radio-group>
</template>
</van-cell>
<div class="mj">
<div class="je">
<van-field
class="tm"
readonly
clickable
:value="LuckyDraw.probability"
@touchstart.native.stop="LuckyDraw.show3 = true"
placeholder="输入金额"
/>
<van-number-keyboard
v-model="LuckyDraw.probability"
:show="LuckyDraw.show3"
@blur="LuckyDraw.show3 = false"
/>
</div>
<span class="word">元优惠</span>
<van-checkbox v-model="limit2"></van-checkbox>
<span class="word">满</span>
<div class="je">
<van-field
class="tm"
readonly
clickable
:value="LuckyDraw.probability"
@touchstart.native.stop="LuckyDraw.show3 = true"
placeholder="输入金额"
/>
<van-number-keyboard
v-model="LuckyDraw.probability"
:show="LuckyDraw.show3"
@blur="LuckyDraw.show3 = false"
/>
</div>
<span class="word end">元可用</span>
</div>
<van-cell title="券有效期" style="font-size:14px;" >
<template slot="default">
<van-radio-group v-model="type" class="right">
<van-radio name="1" style="float:left;">指定日期</van-radio>
<van-radio name="2" style="float:right;">有效天数</van-radio>
</van-radio-group>
</template>
</van-cell>
<van-cell title="开始时间" style="font-size:14px;">
<template slot="default">
<van-field
class="right"
v-model="startTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="startShow = true"
/>
<van-popup v-model="startShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="startTime"
type="datetime"
@cancel="startShow = false"
@confirm="startShow = false"
@change="startTimeChange"
/>
</van-popup>
</template>
</van-cell>
<van-cell title="结束时间" style="font-size:14px;">
<template slot="default">
<van-field
class="right"
v-model="endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="endShow = true"
/>
<van-popup v-model="endShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="endTime"
type="datetime"
@cancel="endShow = false"
@confirm="endShow = false"
@change="endTimeChange"
/>
</van-popup>
</template>
</van-cell>
<van-cell title="奖品数量" style="font-size:14px;">
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="cashCoupon"
placeholder="请输入数量"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="cashCoupon"
:show="show"
:maxlength="6"
@blur="show = false"
/>
</template>
</van-cell>
<van-cell style="font-size:14px;" center class="cs">
<template slot="title">
<span class="custom-title">每日上限</span>
<span class="small">（此奖项每天最多可抽中的数量）</span>
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.number"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show = true"
/>
<van-number-keyboard
v-model="LuckyDraw.number"
:show="LuckyDraw.show"
@blur="LuckyDraw.show = false"
/>
</template>
</van-cell>
<div class="des">描述</div>
<van-field
class="area"
v-model="message"
rows="2"
autosize
type="textarea"
placeholder="请输入描述"
show-word-limit
/>
</van-cell-group>
<div class="add">添加奖项</div>
<div class="creat">创建活动</div>
</div>
</template>
<script>
export default {
data() {
return {
basicInfo: {
title: "",
startTime: "",
startTime1: "",
endTime: "",
endTime1: "",
startShow: false,
endShow: false
},
LuckyDraw: {
name: "一等奖",
number: "",
winningNumber: "",
probability: "",
quantity: "",
addNumber: "",
show: false,
show2: false,
show3: false
},
prizeList: {},
title: "",
title2: "",
coupon: "",
newCustomer: "",
condition: "",
type: "",
show: false,
show2: false,
cashCoupon: "",
limit: "",
limit2: "",
startTime: new Date(),
startTime1: "",
endTime: "",
endTime1: "",
startShow: false,
endShow: false,
message: ""
};
},
methods: {
startTimeChange(e) {
let startTimeArr = e.getValues();
this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]} ${startTimeArr[3]}:${startTimeArr[4]}:00`;
},
endTimeChange(e) {
let endTimeArr = e.getValues();
this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]} ${endTimeArr[3]}:${endTimeArr[4]}:00`;
},
numberToUpperCase(textIndex) {
let newString = "";
let newTextIndex = textIndex + "";
function sum(value, index) {
var newValue = "";
if (textIndex === 9) {
return !index ? "十" : "";
}
let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
switch (~~value) {
case 1:
newValue = !index ? (isSeat ? "" : "一") : "十一";
break;
case 2:
newValue = !index ? (isSeat ? "" : "二") : "十二";
break;
case 3:
newValue = !index ? (isSeat ? "" : "三") : "十三";
break;
case 4:
newValue = !index ? (isSeat ? "" : "四") : "十四";
break;
case 5:
newValue = !index ? (isSeat ? "" : "五") : "十五";
break;
case 6:
newValue = !index ? (isSeat ? "" : "六") : "十六";
break;
case 7:
newValue = !index ? (isSeat ? "" : "七") : "十七";
break;
case 8:
newValue = !index ? (isSeat ? "" : "八") : "十八";
break;
case 9:
newValue = !index ? (isSeat ? "" : "九") : "九十";
break;
case 0:
newValue = "十";
break;
default:
break;
}
return newValue;
}
for (let i = 0; i < newTextIndex.length; i++) {
newString += sum(newTextIndex.substring(i, i + 1), i);
}
return newString;
}
},
mounted() {}
};
</script>
<style></style>
<style scoped>
.bfb {
position: absolute;
right: 3px;
top: 0;
}
.all >>> input {
text-align: right;
}
.small {
font-size: 10px;
}
.creat,.add{
margin-top: 80px;
width: 96%;
height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
text-align: center;
line-height: 40px;
font-size: 16px;
font-weight: bold;
color: #fff;
margin-left: 2%;
margin-bottom: 16px;
}
.add {
margin-top: 12px;
}
.van-field__body textarea {
background: rgba(248, 248, 248, 1);
}
.des {
padding: 6px 16px;
font-size: 14px;
}
.phone {
float: left;
}
.title {
background-color: #f8f8f8;
height: 36px;
line-height: 36px;
font-size: 12px;
padding-left: 16px;
color: #2d476a;
}
[data-v-08d4afe1] .van-cell {
height: 100%;
font-size: 14px;
}
.right {
padding: 0;
}
.right >>> .van-cell:not(:last-child)::after {
display: none;
}
.noborder >>> .van-cell:not(:last-child)::after {
border: none;
}
.gl >>> .van-field__control {
margin-right: 18px;
}
.name >>> .van-cell__value {
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
}
.cs >>> .van-cell__title {
flex: 3;
}
.task >>> .van-cell__title {
flex: 7;
}
.container {
background: rgba(248, 248, 248, 1);
}
.van-cell__title {
color: #2d476a !important;
}
.type {
height: 92px;
}
.mj {
width: 90%;
height: 40px;
position: absolute;
top: 86px;
left: 50%;
transform: translate(-50%);
display: flex;
justify-content: flex-end;
align-items: center;
}
.sz {
position: relative;
}
.je {
width: 88px;
height: 36px;
display: flex;
align-items: center;
background: rgba(248, 248, 248, 1);
border-radius: 10px;
}
.word {
margin: 0 7px;
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
}
.end {
margin-right: 0;
}
.tm {
background-color: transparent;
}
.je >>> .van-cell:not(:last-child)::after {
display: none;
}
.all {
box-shadow:0px 1px 3px 0px rgba(221,221,221,1);
}
</style>
ybf_wx/src/views/case/caseDetail.vue 0 → 100644
View file @ 8d6981df
<template>
<div class="container">
<div class="ct">
<div class="head">
<h3>我的一次成功销售案例</h3>
<div>
<span>作者： </span>
<span>亿百分</span>
<span style="margin-left:24px;">2019 / 12 /24</span>
</div>
</div>
<div class="nr">
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<div class="pic">
<img src="/img/article.png" alt="">
</div>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.pic {
height: 166px;
width: 100%;
margin-bottom: 14px;
}
.pic img {
width: 100%;
}
.nr {
margin-top: 12px;
}
.nr p {
font-size: 12px;
font-weight: 400;
color: #576C88;
margin-bottom: 14px;
}
.container {
background: #f8f8f8;
height: 100%;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.ct {
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 16px;
}
.head {
height: 74px;
width: 100%;
border-bottom: 1px solid rgba(238, 238, 238, 1);
}
.head h3 {
font-size: 18px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.head span {
font-size: 12px;
font-weight: 500;
color: rgba(45, 71, 106, 1);
}
</style>
ybf_wx/src/views/case/index.vue 0 → 100644
View file @ 8d6981df
<template>
<div class="container">
<div class="kj">
<div class="title">热门案例</div>
<div class="ct" @click="handleDetail">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj" @click="handleDetail">
<div class="title">技巧</div>
<div class="ct">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj last" @click="handleDetail">
<div class="title">服务</div>
<div class="ct">
<div class="ck">查看详情</div>
</div>
</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">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title menuBar-title-ac">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title">收益</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>
export default {
data() {
return {
// 图标
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();
},
methods: {
handleDetail() {
this.$router.push({
path:'caseDetail'
})
},
// 导航
checkNowMenuBar() {
let inData = "2";
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");
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
}
}
};
</script>
<style scoped>
.kj {
width: 344px;
height: 229px;
background: rgba(248, 248, 248, 1);
padding: 12px;
margin-bottom: 10px;
}
.container {
padding: 16px;
}
.title {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.ct {
width: 320px;
height: 180px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
border-radius: 10px;
margin-top: 12px;
position: relative;
}
.ck {
position: absolute;
width: 100%;
bottom: 0;
height: 32px;
line-height: 32px;
text-align: center;
background: rgba(117, 178, 253, 0.8);
border-radius: 0px 0px 10px 10px;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.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);
}
.last {
margin-bottom: 80px;
}
</style>
ybf_wx/src/views/goods/goodManage.vue
View file @ 8d6981df
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<h3>￥888</h3> <h3>￥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD" @click="handleUpperShelf">上架</div> <div class="sj" color="#75B2FD" >下架</div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<h3>￥888</h3> <h3>￥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD">上架</div> <div class="sj" color="#75B2FD">下架</div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<h3>￥888</h3> <h3>￥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD">上架</div> <div class="sj" color="#75B2FD">下架</div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<h3>￥888</h3> <h3>￥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD">上架</div> <div class="sj" color="#75B2FD">下架</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<h3>￥888</h3> <h3>￥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD">上架</div> <div class="sj" color="#75B2FD" @click="handleUpperShelf">上架</div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
......
ybf_wx/src/views/mainSale/active/main/index.vue
View file @ 8d6981df
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']"> <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']">
<div class="menuBar-title menuBar-title-ac">活动</div> <div class="menuBar-title menuBar-title-ac">活动</div>
</div> </div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']"> <div class="menuBar-menu" @click="menuCase()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']">
<div class="menuBar-title">案例</div> <div class="menuBar-title">案例</div>
</div> </div>
<div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']"> <div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']">
...@@ -235,6 +235,9 @@ ...@@ -235,6 +235,9 @@
menuBarClick(inData) { menuBarClick(inData) {
this.$router.push(inData) this.$router.push(inData)
}, },
menuCase() {
this.$router.push({path:"/case"})
},
menuProfit() { menuProfit() {
this.$router.push({path:"/profitList"}) this.$router.push({path:"/profitList"})
}, },
......
ybf_wx/src/views/mainSale/me/main/index.vue
View file @ 8d6981df
<template> <template>
<div class="main"> <div class="main">
<div class="backgrounds"> <div class="backgrounds">
<img class="background-img" :src="cache.icon.testImg"> <img class="background-img" :src="cache.icon.testImg" />
</div> </div>
<div class="infos"> <div class="infos">
<div class="info"> <div class="info">
<div class="info-logos"> <div class="info-logos">
<img class="info-logo" :src="cache.icon.testImg"> <img class="info-logo" :src="cache.icon.testImg" />
</div> </div>
<div class="info-msgs"> <div class="info-msgs">
<div class="msg"> <div class="msg">
...@@ -26,41 +26,40 @@ ...@@ -26,41 +26,40 @@
</div> </div>
</div> </div>
<div class="lists"> <div class="lists">
<div class="list"> <div class="list">
<div class="list-title">我的客户</div> <div class="list-title">我的客户</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
<div class="list" @click="listTaskClick"> <div class="list" @click="listTaskClick">
<div class="list-title">任务列表</div> <div class="list-title">任务列表</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
<div class="list list-latest"> <div class="list list-latest">
<div class="list-title">我的收益</div> <div class="list-title">我的收益</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
</div> </div>
<div class="main-menuBar"> <div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')"> <div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['1']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['1']" />
<div class="menuBar-title">活动</div> <div class="menuBar-title">活动</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div> <div class="menuBar-title">案例</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title">收益</div> <div class="menuBar-title">收益</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title">任务</div> <div class="menuBar-title">任务</div>
</div> </div>
<div class="menuBar-menu" @click="menuBarClick('Me')"> <div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
<div class="menuBar-title menuBar-title-ac">我的</div> <div class="menuBar-title menuBar-title-ac">我的</div>
</div> </div>
</div> </div>
...@@ -68,15 +67,15 @@ ...@@ -68,15 +67,15 @@
</template> </template>
<script> <script>
export default { export default {
name: "me", name: "me",
data() { data() {
return { return {
cache:{ cache: {
icon:{ icon: {
testImg: "/mainSale/test-city.png", testImg: "/mainSale/test-city.png",
arrowRightLight: "/mainSale/icon-arrow-right-light.png", arrowRightLight: "/mainSale/icon-arrow-right-light.png",
arrowRightDark: "/mainSale/icon-arrow-right-dark.png", arrowRightDark: "/mainSale/icon-arrow-right-dark.png"
} }
}, },
menuBarInfo: { menuBarInfo: {
...@@ -85,10 +84,9 @@ ...@@ -85,10 +84,9 @@
{ {
name: "", name: "",
iconUaUrl: "", iconUaUrl: "",
iconAcUrl: "", iconAcUrl: ""
} }
], ]
}, },
icon: { icon: {
now: { now: {
...@@ -96,49 +94,57 @@ ...@@ -96,49 +94,57 @@
"2": "", "2": "",
"3": "", "3": "",
"4": "", "4": "",
"5": "", "5": ""
}, },
ua: { ua: {
"1": "/mainSale/icon-menuBar-1-ua.png", "1": "/mainSale/icon-menuBar-1-ua.png",
"2": "/mainSale/icon-menuBar-2-ua.png", "2": "/mainSale/icon-menuBar-2-ua.png",
"3": "/mainSale/icon-menuBar-3-ua.png", "3": "/mainSale/icon-menuBar-3-ua.png",
"4": "/mainSale/icon-menuBar-4-ua.png", "4": "/mainSale/icon-menuBar-4-ua.png",
"5": "/mainSale/icon-menuBar-5-ua.png", "5": "/mainSale/icon-menuBar-5-ua.png"
}, },
ac: { ac: {
"1": "/mainSale/icon-menuBar-1-ac.png", "1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-2-ac.png", "2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-3-ac.png", "3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-4-ac.png", "4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png", "5": "/mainSale/icon-menuBar-5-ac.png"
}
} }
},
} }
}; };
}, },
created() { created() {
this.checkNowMenuBar() this.checkNowMenuBar();
}, },
methods: { methods: {
checkNowMenuBar() { checkNowMenuBar() {
let inData = '5' let inData = "5";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData] this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
}, },
menuBarClick(inData) { menuBarClick(inData) {
this.$router.push(inData) this.$router.push(inData);
}, },
listTaskClick(){ listTaskClick() {
this.$router.push('Task') this.$router.push("Task");
}, },
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
menuCase() {
this.$router.push({ path: "/case" });
} }
}; }
};
</script> </script>
<style scoped> <style scoped>
.main { .main {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
background-color: rgba(248, 248, 248, 1); background-color: rgba(248, 248, 248, 1);
width: 100%; width: 100%;
...@@ -151,28 +157,28 @@ ...@@ -151,28 +157,28 @@
justify-content: start; justify-content: start;
overflow: auto; overflow: auto;
} }
.backgrounds{ .backgrounds {
/*border: 1px solid dodgerblue;*/ /*border: 1px solid dodgerblue;*/
width: 100%; width: 100%;
height: 124px; height: 124px;
overflow: hidden; overflow: hidden;
background-color: rgba(10, 10, 10, 0.5); background-color: rgba(10, 10, 10, 0.5);
} }
.background-img{ .background-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
filter: blur(2px); filter: blur(2px);
} }
.infos{ .infos {
/*border: 1px solid orange;*/ /*border: 1px solid orange;*/
width: 100%; width: 100%;
height: 44px; height: 44px;
margin-top: 12px; margin-top: 12px;
} }
.info{ .info {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
width: 100%; width: 100%;
height: 148px; height: 148px;
...@@ -185,22 +191,20 @@ ...@@ -185,22 +191,20 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: start; align-items: start;
}
} .info-logos {
.info-logos{
/*background-color: #96CEDC;*/ /*background-color: #96CEDC;*/
width: 100%; width: 100%;
height: 48px; height: 48px;
}
} .info-logo {
.info-logo{
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
border: 1px solid white; border: 1px solid white;
object-fit: cover; object-fit: cover;
} }
.info-msgs{ .info-msgs {
width: 100%; width: 100%;
height: 80px; height: 80px;
margin-bottom: 12px; margin-bottom: 12px;
...@@ -213,8 +217,8 @@ ...@@ -213,8 +217,8 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.msg{ .msg {
width: 50%; width: 50%;
height: 100%; height: 100%;
/*border: 1px solid red;*/ /*border: 1px solid red;*/
...@@ -224,12 +228,12 @@ ...@@ -224,12 +228,12 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
} }
.msg-latest{ .msg-latest {
border-right: none; border-right: none;
align-items: flex-end; align-items: flex-end;
} }
.msg-title{ .msg-title {
width: 120px; width: 120px;
height: 14px; height: 14px;
font-size: 12px; font-size: 12px;
...@@ -237,8 +241,8 @@ ...@@ -237,8 +241,8 @@
line-height: 14px; line-height: 14px;
color: rgba(45, 71, 106, 1); color: rgba(45, 71, 106, 1);
text-align: center; text-align: center;
} }
.msg-num{ .msg-num {
width: 120px; width: 120px;
height: 32px; height: 32px;
border-radius: 16px; border-radius: 16px;
...@@ -248,24 +252,23 @@ ...@@ -248,24 +252,23 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.msg-num-red{ .msg-num-red {
color: rgba(208, 2, 27, 1); color: rgba(208, 2, 27, 1);
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
.msg-num-blue{ .msg-num-blue {
color: rgba(117, 178, 253, 1); color: rgba(117, 178, 253, 1);
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
.lists{ .lists {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -273,8 +276,8 @@ ...@@ -273,8 +276,8 @@
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1); box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
} }
.list{ .list {
/*border: 1px solid dodgerblue;*/ /*border: 1px solid dodgerblue;*/
width: 100%; width: 100%;
height: 44px; height: 44px;
...@@ -285,26 +288,26 @@ ...@@ -285,26 +288,26 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.list-latest{ .list-latest {
border-bottom: none; border-bottom: none;
} }
.list-title{ .list-title {
width: auto; width: auto;
height: 16px; height: 16px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
color: rgba(45, 71, 106, 1); color: rgba(45, 71, 106, 1);
} }
.list-icon{ .list-icon {
margin-right: 16px; margin-right: 16px;
width: 8px; width: 8px;
height: 13px; height: 13px;
object-fit: cover; object-fit: cover;
} }
.main-menuBar { .main-menuBar {
/*border: 1px solid darkviolet;*/ /*border: 1px solid darkviolet;*/
box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1); box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
width: 100%; width: 100%;
...@@ -312,37 +315,36 @@ ...@@ -312,37 +315,36 @@
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background-color: #FAFAFA; background-color: #fafafa;
padding: 0px 14px; padding: 0px 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.menuBar-menu { .menuBar-menu {
/*background-color: greenyellow;*/ /*background-color: greenyellow;*/
width: 48px; width: 48px;
height: 47px; height: 47px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.menuBar-icon { .menuBar-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
object-fit: cover; object-fit: cover;
} }
.menuBar-title { .menuBar-title {
width: auto; width: auto;
height: 12px; height: 12px;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
color: rgba(67, 119, 188, 0.4); color: rgba(67, 119, 188, 0.4);
text-align: center; text-align: center;
} }
.menuBar-title-ac { .menuBar-title-ac {
color: rgba(67, 119, 188, 1); color: rgba(67, 119, 188, 1);
} }
</style> </style>
ybf_wx/src/views/profit/index.vue
View file @ 8d6981df
...@@ -46,37 +46,74 @@ ...@@ -46,37 +46,74 @@
background="#F8F8F8" background="#F8F8F8"
> >
<van-tab title="优惠券核销"> <van-tab title="优惠券核销">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab title="商品购买"> <van-tab title="商品购买">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab title="拉新会员"> <van-tab title="拉新会员">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </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> </div>
</template> </template>
...@@ -90,29 +127,67 @@ export default { ...@@ -90,29 +127,67 @@ export default {
oldTime: "", oldTime: "",
writeOff: false, writeOff: false,
finished: false, finished: false,
writeOffList:[ writeOffList: [
{ {
action: "现金券核销", action: "现金券核销",
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
], ],
ShoppingList:[ ShoppingList: [
{ {
action: "商品购买", action: "商品购买",
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
], ],
newMemberList:[ newMemberList: [
{ {
action: "拉新会员", action: "拉新会员",
src: '', src: "",
name: "Solomon" 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();
},
methods: { methods: {
onSearch() {}, onSearch() {},
timeFormat(time) { timeFormat(time) {
...@@ -132,6 +207,27 @@ export default { ...@@ -132,6 +207,27 @@ export default {
// fetchSomeThing().catch(() => { // fetchSomeThing().catch(() => {
this.writeOff = false; 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" });
} }
}, },
mounted() { mounted() {
...@@ -141,28 +237,31 @@ export default { ...@@ -141,28 +237,31 @@ export default {
</script> </script>
<style scoped> <style scoped>
.container >>> .van-tabs__wrap, .van-tabs__wrap--scrollable { .container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px; height: 40px;
} }
.container >>> .van-tab,.van-tab--active,.van-ellipsis { .container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px; line-height: 40px;
} }
.tab { .tab {
box-shadow:0px 1px 3px 0px rgba(221,221,221,1); box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
} }
.content >>> .van-cell__value { .content >>> .van-cell__value {
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
line-height: 44px; line-height: 44px;
} }
.custom-title { .custom-title {
margin-left: 12px; margin-left: 12px;
font-size:16px; font-size: 16px;
font-weight:bold; font-weight: bold;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
} }
.content img{ .content img {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
...@@ -198,8 +297,8 @@ export default { ...@@ -198,8 +297,8 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: rgba(208, 2, 27, 1); color: rgba(208, 2, 27, 1);
margin: 0 auto;
margin-top: 8px; margin-top: 8px;
margin-left: 20px;
} }
.detail { .detail {
font-size: 10px; font-size: 10px;
...@@ -234,4 +333,44 @@ export default { ...@@ -234,4 +333,44 @@ export default {
.right { .right {
border-left: 1px solid #eee; 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);
}
</style> </style>
ybf_wx/src/views/task/newMemberTask.vue 0 → 100644
View file @ 8d6981df
<template>
<div class="container">
<div class="person">
<span class="pic">
<img src="/img/photo.png" alt="" />
</span>
<span class="name">营业员1</span>
<div class="fr sx">
<span>月度</span>
<van-icon name="arrow-down" />
</div>
</div>
<div class="title">月度拉新任务情况统计</div>
<div class="title">9月新增客户</div>
<van-list
v-model="writeOff"
:finished="finished"
@load="onLoad"
class="list"
>
<van-cell
:value="item.time"
class="content"
v-for="(item, index) in list"
:key="index"
>
<template slot="title">
<img src="/img/photo.png" alt="" />
<div class="info">
<div class="custom-title">{{ item.name }}</div>
<div>18866664444</div>
</div>
</template>
</van-cell>
</van-list>
</div>
</template>
<script>
export default {
data() {
return {
writeOff: false,
finished: false,
list: [
{
time: "2019 / 12 /27",
src: "",
name: "Solomon"
}
]
};
},
methods: {
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
}
}
};
</script>
<style scoped>
.fr >>> .van-icon-arrow-down:before {
margin-top: 3px;
}
.content >>> .van-cell__value {
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
line-height: 44px;
}
.container {
background-color: #f8f8f8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.sx {
width: 52px;
height: 20px;
border-radius: 2px;
display: flex;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 1);
font-size: 10px;
font-weight: 500;
color: #fff;
text-align: center;
}
.list {
width: 100%;
display: flex;
}
.info {
display: inline-block;
margin-left: 12px;
}
.person {
flex: 1;
height: 72px;
background: rgba(67, 119, 188, 1);
width: 100%;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pic {
/* display: inline-block; */
width: 48px;
height: 48px;
}
.pic img {
width: 100%;
border-radius: 50%;
}
.name {
font-size: 14px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
margin-right: 175px;
}
.title {
height: 44px;
line-height: 44px;
padding-left: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
}
.content img {
width: 44px;
height: 44px;
border-radius: 50%;
}
</style>
ybf_wx/src/views/task/taskList.vue
View file @ 8d6981df
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
class="tab" class="tab"
background="#F8F8F8" background="#F8F8F8"
> >
<van-tab title="人员拉新" > <van-tab title="人员拉新">
<van-list v-model="writeOff" :finished="finished" @load="onLoad"> <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell <van-cell
:value="item.number" :value="item.number"
...@@ -31,6 +31,28 @@ ...@@ -31,6 +31,28 @@
<van-tab title="推活动"> </van-tab> <van-tab title="推活动"> </van-tab>
<van-tab title="推商品"> </van-tab> <van-tab title="推商品"> </van-tab>
</van-tabs> </van-tabs>
<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">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title menuBar-title-ac">任务</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> </div>
</template> </template>
...@@ -40,50 +62,112 @@ export default { ...@@ -40,50 +62,112 @@ export default {
return { return {
writeOff: false, writeOff: false,
finished: false, finished: false,
newMemberList:[ newMemberList: [
{ {
number: 100, number: 100,
src: '', src: "",
name: "Solomon" 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();
},
methods: { methods: {
onClick() {}, onClick() {},
onLoad() { onLoad() {
// fetchSomeThing().catch(() => { // fetchSomeThing().catch(() => {
this.writeOff = false; this.writeOff = false;
// }) // })
}
}, },
// 导航
checkNowMenuBar() {
let inData = "4";
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");
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
menuCase() {
this.$router.push({ path: "/case" });
}
}
}; };
</script> </script>
<style scoped> <style scoped>
.container >>> .van-tabs__wrap, .van-tabs__wrap--scrollable { .container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px; height: 40px;
} }
.container >>> .van-tab,.van-tab--active,.van-ellipsis { .container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px; line-height: 40px;
} }
.content >>> .van-icon-arrow:before { .content >>> .van-icon-arrow:before {
margin-top: 10px; margin-top: 10px;
color: #2D476A; color: #2d476a;
} }
.content >>> .van-cell__value { .content >>> .van-cell__value {
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
line-height: 44px; line-height: 44px;
} }
.custom-title { .custom-title {
margin-left: 12px; margin-left: 12px;
font-size:16px; font-size: 16px;
font-weight:bold; font-weight: bold;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
} }
.content img{ .content img {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
...@@ -104,4 +188,44 @@ export default { ...@@ -104,4 +188,44 @@ export default {
.van-tabs__nav--card { .van-tabs__nav--card {
margin: 0; margin: 0;
} }
.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);
}
</style> </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