Skip to content

Y
ybf
Commit 94d7af76 authored by xd's avatar xd
Browse files
Options

冲突

parents d1ced4d8 34bad990
Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 14 deletions
ybf_wx/public/mainSale/test-city.png 0 → 100644
View file @ 94d7af76
This diff is collapsed.
ybf_wx/src/router/index.js
View file @ 94d7af76
...@@ -54,6 +54,16 @@ const routes = [ ...@@ -54,6 +54,16 @@ const routes = [
path: '/goodManage', path: '/goodManage',
name: 'goodManage', name: 'goodManage',
component: () => import('@/views/goods/goodManage') component: () => import('@/views/goods/goodManage')
},
{
path: '/actTemplate',
name: 'ActTemplate',
component: () => import('@/views/mainSale/active/template/index')
},
{
path: '/me',
name: 'Me',
component: () => import('@/views/mainSale/me/main/index')
} }
// { // {
// path: '/about', // path: '/about',
......
ybf_wx/src/views/mainSale/active/main/index.vue
View file @ 94d7af76
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<img class="menu-logo" :src="test.menuInfo.icon['2']"> <img class="menu-logo" :src="test.menuInfo.icon['2']">
<div class="menu-text">任务列表</div> <div class="menu-text">任务列表</div>
</div> </div>
<div class="menu"> <div class="menu" @click="menu03Click">
<img class="menu-logo" :src="test.menuInfo.icon['3']"> <img class="menu-logo" :src="test.menuInfo.icon['3']">
<div class="menu-text">活动列表</div> <div class="menu-text">活动列表</div>
</div> </div>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<img class="menu-logo" :src="test.menuInfo.icon['4']"> <img class="menu-logo" :src="test.menuInfo.icon['4']">
<div class="menu-text">专柜维护</div> <div class="menu-text">专柜维护</div>
</div> </div>
<div class="menu"> <div class="menu" @click="menu05Click">
<img class="menu-logo" :src="test.menuInfo.icon['5']"> <img class="menu-logo" :src="test.menuInfo.icon['5']">
<div class="menu-text">活动模版</div> <div class="menu-text">活动模版</div>
</div> </div>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</div> </div>
<div class="main-actives"> <div class="main-actives">
<div class="actives-banners"> <div class="actives-banners">
<!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">--> <!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->
<div class="actives-banner-title">现有开展活动</div> <div class="actives-banner-title">现有开展活动</div>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">--> <!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
...@@ -87,20 +87,21 @@ ...@@ -87,20 +87,21 @@
</div> </div>
</div> </div>
<div class="main-menuBar"> <div class="main-menuBar">
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="test.cache.imgUrl"> <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']">
<div class="menuBar-title">活动</div> <div class="menuBar-title menuBar-title-ac">活动</div>
</div> </div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl"> <div class="menuBar-menu"><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"><img class="menuBar-icon" :src="test.cache.imgUrl"> <div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']">
<div class="menuBar-title">收益</div> <div class="menuBar-title">收益</div>
</div> </div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl"> <div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']">
<div class="menuBar-title">任务</div> <div class="menuBar-title">任务</div>
</div> </div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl"> <div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']">
<div class="menuBar-title">我的</div> <div class="menuBar-title">我的</div>
</div> </div>
</div> </div>
...@@ -115,7 +116,8 @@ ...@@ -115,7 +116,8 @@
test: { test: {
cache: { cache: {
imgUrl: "/hi.jpg", imgUrl: "/hi.jpg",
actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。" actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。",
nowMenuBar: "1",
}, },
manInfo: { manInfo: {
bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg", bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
...@@ -149,17 +151,79 @@ ...@@ -149,17 +151,79 @@
"2": "/mainSale/icon-active-2.png", "2": "/mainSale/icon-active-2.png",
"3": "/mainSale/icon-active-3.png", "3": "/mainSale/icon-active-3.png",
} }
},
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",
}
},
} }
}, },
dis: {} dis: {}
}; };
}, },
created() {
this.checkNowMenuBar()
},
methods: { methods: {
checkNowMenuBar() {
let inData = '1'
this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua
this.test.menuBarInfo.icon.now[inData] = this.test.menuBarInfo.icon.ac[inData]
},
testButtonClick() { testButtonClick() {
}, },
menu01Click() {
},
menu02Click() {
},
menu03Click() {
this.$router.push("activeList")
},
menu04Click() {
},
menu05Click() {
this.$router.push("ActTemplate")
},
menu06Click() {
},
buttonMainMarketingClick() { buttonMainMarketingClick() {
// this.$router.push("home") // this.$router.push("home")
}, },
menuBarClick(inData) {
this.$router.push(inData)
},
} }
}; };
...@@ -366,6 +430,7 @@ ...@@ -366,6 +430,7 @@
justify-content: center; justify-content: center;
} }
.actives-banner-small { .actives-banner-small {
...@@ -394,9 +459,9 @@ ...@@ -394,9 +459,9 @@
position: relative; position: relative;
bottom: 7px; bottom: 7px;
} }
.actives-banner-main { .actives-banner-main {
width: 148px; width: 148px;
height: 24px; height: 24px;
...@@ -473,7 +538,7 @@ ...@@ -473,7 +538,7 @@
.actives-mores { .actives-mores {
width: 100%; width: 100%;
height: 40px; height: 40px;
border: 1px solid red; /*border: 1px solid red;*/
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -536,7 +601,11 @@ ...@@ -536,7 +601,11 @@
height: 12px; height: 12px;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
color: #4377BC; color: rgba(67, 119, 188, 0.4);
text-align: center; text-align: center;
} }
.menuBar-title-ac {
color: rgba(67, 119, 188, 1);
}
</style> </style>
ybf_wx/src/views/mainSale/active/template/index.vue 0 → 100644
View file @ 94d7af76
<template>
<div class="lists">
<div v-for="(item, index) of list.active" :key="index">
<div class="list" @click="listClick(index)">
<div class="list-logos">
<img class="list-logo" :src="item.logoUrl">
</div>
<div class="list-infos">
<div class="list-title">{{item.name}}</div>
<div class="list-dsc">{{item.dsc}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
// ZKit
const log = console.log.bind(console)
export default {
name: "discountIndex",
data() {
return {
list: {
active: [
{
name: "大转盘活动",
logoUrl: "/mainSale/icon-active-1.png",
dsc: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
reDirect: "turntableDetail"
},
{
name: "送券活动",
logoUrl: "/mainSale/icon-active-2.png",
dsc: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
reDirect: "turntableDetail"
}
],
},
};
},
created() {
},
methods: {
listClick(inIndex){
log('--->click: inIndex =', inIndex)
log('--->click: reDirect =', this.list.active[inIndex].reDirect)
this.$router.push(this.list.active[inIndex].reDirect)
},
}
};
</script>
<style scoped>
.lists {
padding: 4px 16px 20px 16px;
}
.list {
padding: 12px 0px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
border-bottom: 1px solid #EEEEEE;
}
.list-logos {
width: 80px;
height: 80px;
background-color: #F8F8F8;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.list-logo {
width: 56px;
height: 56px;
}
.list-infos {
width: 251px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
margin-left: 12px;
}
.list-title {
font-size: 14px;
height: 16px;
line-height: 16px;
font-weight: bold;
color: #2D476A;
width: 100%;
text-align: left;
margin-bottom: 8px;
}
.list-dsc {
font-size: 12px;
height: 14px;
line-height: 14px;
font-weight: normal;
color: #2D476A;
width: 100%;
text-align: left;
overflow: auto;
}
</style>
ybf_wx/src/views/mainSale/me/main/index.vue 0 → 100644
View file @ 94d7af76
<template>
<div class="main">
<div class="backgrounds">
<img class="background-img" :src="cache.icon.testImg">
</div>
<div class="infos">
<div class="info">
<div class="info-logos">
<img class="info-logo" :src="cache.icon.testImg">
</div>
<div class="info-msgs">
<div class="msg">
<div class="msg-title">未完成任务</div>
<div class="msg-num">
<div class="msg-num-red">15</div>
</div>
</div>
<div class="msg msg-latest">
<div class="msg-title">未完成任务</div>
<div class="msg-num">
<div class="msg-num-blue">5</div>
</div>
</div>
</div>
</div>
</div>
<div class="lists">
<div class="list">
<div class="list-title">我的客户</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</div>
<div class="list">
<div class="list-title">任务列表</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</div>
<div class="list list-latest">
<div class="list-title">我的收益</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</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">案例</div>
</div>
<div class="menuBar-menu">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']">
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu">
<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 menuBar-title-ac">我的</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "me",
data() {
return {
cache:{
icon:{
testImg: "/mainSale/test-city.png",
arrowRightLight: "/mainSale/icon-arrow-right-light.png",
arrowRightDark: "/mainSale/icon-arrow-right-light.png",
}
},
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: {
checkNowMenuBar() {
let inData = '5'
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData]
},
menuBarClick(inData) {
this.$router.push(inData)
},
}
};
</script>
<style scoped>
.main {
/*border: 1px solid red;*/
background-color: rgba(248, 248, 248, 1);
width: 100%;
height: auto;
min-height: 100%;
/*padding: ;*/
padding-bottom: 94px;
display: flex;
flex-direction: column;
justify-content: start;
overflow: auto;
}
.backgrounds{
/*border: 1px solid dodgerblue;*/
width: 100%;
height: 124px;
overflow: hidden;
background-color: rgba(10, 10, 10, 0.5);
}
.background-img{
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px);
}
.infos{
/*border: 1px solid orange;*/
width: 100%;
height: 44px;
margin-top: 12px;
}
.info{
/*border: 1px solid red;*/
width: 100%;
height: 148px;
padding: 0px 16px;
position: relative;
bottom: 106px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
}
.info-logos{
/*background-color: #96CEDC;*/
width: 100%;
height: 48px;
}
.info-logo{
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid white;
object-fit: cover;
}
.info-msgs{
width: 100%;
height: 80px;
margin-bottom: 12px;
background-color: rgba(255, 255, 255, 1);
border-radius: 2px;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 14px 19px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.msg{
width: 50%;
height: 100%;
/*border: 1px solid red;*/
border-right: 1px solid rgba(238, 238, 238, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.msg-latest{
border-right: none;
align-items: flex-end;
}
.msg-title{
width: 120px;
height: 14px;
font-size: 12px;
font-weight: bold;
line-height: 14px;
color: rgba(45, 71, 106, 1);
text-align: center;
}
.msg-num{
width: 120px;
height: 32px;
border-radius: 16px;
background-color: rgba(248, 248, 248, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.msg-num-red{
color: rgba(208, 2, 27, 1);
font-size: 18px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
.msg-num-blue{
color: rgba(117, 178, 253, 1);
font-size: 18px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
.lists{
/*border: 1px solid red;*/
width: 100%;
height: auto;
padding: 0px 0px 0px 16px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.list{
/*border: 1px solid dodgerblue;*/
width: 100%;
height: 44px;
border-bottom: 1px solid rgba(221, 221, 221, 1);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.list-latest{
border-bottom: none;
}
.list-title{
width: auto;
height: 16px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: rgba(45, 71, 106, 1);
}
.list-icon{
margin-right: 16px;
width: 8px;
height: 13px;
object-fit: cover;
}
.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>
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