Commit 2bbcc989 authored by xd's avatar xd

解决冲突

parents c28154b7 bc2aa7b0
......@@ -48,14 +48,15 @@
</div>
</div>
<script>
getAgentAuth()
$(function () {
showQRInfo()
});
const showQRInfo = () => {
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
let storecode = "181"
let pageUri = `pages/user/register/register?storeCode=
${storecode}`;
let pageUri = `pages/user/register/register?storeCode=${storecode}`;
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
$.ajax({
......
......@@ -12,31 +12,6 @@ const routes = [
name: 'home',
component: Home
},
{
path: '/turntableDetail',
name: 'turntableDetail',
component: () => import('../views/active/turntableDetail.vue')
},
{
path: '/couponDetail',
name: 'couponDetail',
component: () => import('../views/active/couponDetail.vue')
},
{
path: '/createActive',
name: 'createActive',
component: () => import('../views/active/createActive.vue')
},
{
path: '/activeList',
name: 'activeList',
component: () => import('../views/active/activeList.vue')
},
{
path: '/createBigWheelActive',
name: 'createBigWheelActive',
component: () => import('../views/active/createBigWheelActive.vue')
},
{
path: '/discount',
name: 'Discount',
......@@ -47,91 +22,6 @@ const routes = [
name: 'register',
component: () => import('@/views/sideNav/register/index')
},
{
path: '/mainSale',
name: 'MainSale',
component: () => import('@/views/mainSale/active/main/index')
},
{
path: '/changeCounter',
name: 'changeCounter',
component: () => import('@/views/counter/changeCounter')
},
{
path: '/counterInfo',
name: 'counterInfo',
component: () => import('@/views/counter/counterInfo')
},
{
path: '/counterMaintain',
name: 'counterMaintain',
component: () => import('@/views/counter/counterMaintain')
},
{
path: '/goodManage',
name: 'goodManage',
component: () => import('@/views/goods/goodManage')
},
{
path: '/goodGrounding',
name: 'goodGrounding',
component: () => import('@/views/goods/goodGrounding')
},
{
path: '/profitList',
name: 'profitList',
component: () => import('@/views/profit/index')
},
{
path: '/actTemplate',
name: 'ActTemplate',
component: () => import('@/views/mainSale/active/template/index')
},
{
path: '/me',
name: 'Me',
component: () => import('@/views/mainSale/me/main/index')
},
{
path: '/task',
name: 'Task',
component: () => import('@/views/mainSale/me/task/index')
},
{
path: '/taskList',
name: '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: '/newInfo',
name: 'newInfo',
component: () => import('@/views/message/newInfo')
},
{
path: '/voucherInfo',
name: 'VoucherInfo',
component: () => import('@/views/voucherInfo/index')
},
{
path: '/qrCode',
name: 'qrCode',
component: () => import('@/views/qrCode/index')
},
{
path: '/manInfo',
name: 'ManInfo',
......@@ -141,7 +31,8 @@ const routes = [
path: '/goodPost',
name: 'GoodPost',
component: () => import('@/views/sideNav/goodPost/index')
},
}
// {
// path: '/about',
// name: 'about',
......@@ -167,6 +58,7 @@ router.beforeEach((to, from ,next) => {
if(sessionStorage.getItem('zConfigWx') === 'Pass'){
next()
} else {
// next()
configWx(to)
}
......
......@@ -84,7 +84,7 @@ Vue.prototype.getAgentAuth = function () {
let config = res.data
wx.config({
beta: true,
debug: false, //调试的时候可以开启
debug: true, //调试的时候可以开启
appId: config.jsApiSignature.appId, // 必填,公众号的唯一标识
timestamp: config.jsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: config.jsApiSignature.nonceStr, // 必填,生成签名的随机串
......@@ -96,11 +96,11 @@ Vue.prototype.getAgentAuth = function () {
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.config: end.`)
wx.ready(function () {
zlog('%c--->getAgentAuth: getJsSdkSignature: Ready.', 'color: red;')
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.ready: IN.`)
alert(`--->zCommon.js: getJsSdkSignature: then: wx.ready: IN.`)
// JS-SDK配置信息验证失败时会进入此方法
wx.error(function (res) {
// alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res));
alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res));
})
// 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口
......@@ -109,7 +109,7 @@ Vue.prototype.getAgentAuth = function () {
jsApiList: ['agentConfig', 'sendChatMessage'],
success: function (res) {
if (res.errMsg != "checkJsApi:ok") {
// alert("JS-SDK接口检测失败:" + JSON.stringify(res));
alert("JS-SDK接口检测失败:" + JSON.stringify(res));
return false;
} else {
wxRequest('/workWx/auth/base/getAgentJsSdkSignature', qs.stringify(postData), header)
......@@ -135,7 +135,7 @@ Vue.prototype.getAgentAuth = function () {
// 回调
//1、发起申请申请时后,审批状态发生变化时
//2、发起申请申请时后,在“审批中”状态,有任意审批人进行审批操作时
// alert('wx.agentConfig 回调'+res.errMsg);
alert('wx.agentConfig 回调'+res.errMsg);
},
fail: function (res) {
// alert('回调失败:'+res.errMsg)
......@@ -144,7 +144,6 @@ Vue.prototype.getAgentAuth = function () {
}
}
})
}
})
.catch(err => {
......
<template>
<div class="container">
<div class="title">
<span>会员分裂</span>
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right">
<h3>砍价</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list">
<div class="left"></div>
<div class="right">
<h3>集赞</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list list3">
<div class="left"></div>
<div class="right">
<h3>推荐有礼</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
</div>
<div class="fg">复购</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right">
<h3>大转盘抽奖</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list list3">
<div class="left"></div>
<div class="right">
<h3>砸金蛋抽奖</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.container {
height: auto;
background-color: rgba(248, 248, 248, 1);
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.title {
height: 44px;
background: rgba(248, 248, 248, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
}
.fg {
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
height: 44px;
line-height: 44px;
}
.icon {
font-weight: 800;
}
.active {
background-color: #fff;
padding: 12px 12px 0 12px;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
}
.list {
height: 94px;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238,238,238,1);
margin-bottom: 14px;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,.right {
height: 80px;
}
.left {
width: 80px;
background:rgba(248,248,248,1);
}
.right {
width: 76%;
padding-left: 10px;
background-color: #fff;
}
h3 {
font-size: 14px;
font-weight:bold;
color:rgba(45,71,106,1);
}
p {
margin-top: 10px;
font-size:12px;
color:rgba(45,71,106,0.8);
}
</style>
<template>
<div class="container">
<div>
<div class="topb">
</div>
<div class="title">
<span class="bt">服装店幸运抽奖</span>
<div class="tb">
<img src="../../../public/img/zp.png" alt="" />
大转盘抽奖
</div>
</div>
<div class="wtitle">
<img src="../../../public/img/water.png" alt="" />
<span class="wan">玩法介绍</span>
</div>
<div class="content">
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
</div>
</div>
<div class="creat" @click="createActive">创建同款活动</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
createActive() {
this.$router.push({
name: 'createActive'
})
}
},
};
</script>
<style>
</style>
<style scoped>
p {
font-size: 12px;
font-weight: 400;
color: rgba(45, 71, 106, 0.8);
margin-top: 14px;
}
.wan {
position: absolute;
left: 77px;
top: 8px;
font-size: 16px;
font-weight: bold;
}
.wtitle {
width: 200px;
height: 24px;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 268px;
z-index: 999;
}
.wtitle img {
width: 100%;
}
.topb {
width: 100%;
height: 200px;
background:url(../../../public/img/zpbg.png) no-repeat;
background-size: cover;
}
.title {
width: 100%;
height: 50px;
font-size: 18px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
line-height: 50px;
padding-left: 16px;
position: relative;
}
.container {
background-color: rgba(248, 248, 248, 1);
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 100%;
}
.bt {
font-size: 16px;
margin-left: 96px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.tb {
position: absolute;
height: 24px;
line-height: 24px;
left: 16px;
top: 14px;
border-radius: 2px;
border: 1px solid rgba(45, 71, 106, 1);
font-size: 10px;
font-weight: 500;
color: rgba(45, 71, 106, 1);
width: 88px;
text-align: center;
}
.tb img {
width: 12px;
height: 12px;
}
.content {
margin: 36px 16px 16px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
position: relative;
padding: 16px 16px 30px 16px;
}
.creat {
width: 343px;
height: 40px;
line-height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
margin-bottom: 16px;
}
</style>
<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="title"
placeholder="请输入活动标题"
class="right"
style="font-size:14px;"
/>
</template>
</van-cell>
<van-cell title="消费后领券" style="font-size:14px;">
<template slot="default">
<van-switch v-model="coupon" size="20px" class="right" />
</template>
</van-cell>
<van-cell title="新客专享" style="font-size:14px;">
<template slot="default">
<van-switch v-model="newCustomer" size="20px" class="right" />
</template>
</van-cell>
<van-cell title="领券条件" style="font-size:14px;">
<template slot="default">
<div class="condition">
<span class="phone">手机号必填</span>
<van-switch v-model="condition" size="20px" />
</div>
</template>
</van-cell>
</van-cell-group>
<div class="title">券设置</div>
<van-cell-group class="all">
<van-cell title="活动标题" style="font-size:14px;">
<template slot="default">
<van-field
v-model="title2"
placeholder="请输入活动标题"
class="right"
style="font-size:14px;"
/>
</template>
</van-cell>
<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">
<div class="npbr">
<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"
/>
</div>
</template>
</van-cell>
<van-cell title="使用门槛" style="font-size:14px;">
<template slot="default">
<div class="npbr">
<van-field
class="right noborder"
readonly
clickable
:value="limit"
placeholder="输入使用门槛"
@touchstart.native.stop="show2 = true"
/>
<van-number-keyboard
v-model="limit"
:show="show2"
:maxlength="6"
@blur="show2 = false"
/>
</div>
</template>
</van-cell>
<van-cell title="活动开始时间" style="font-size:14px;">
<template slot="default">
<div class="npbr">
<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="date"
@cancel="startShow = false"
@confirm="handleStartTime"
@change="startTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="活动结束时间" style="font-size:14px;">
<template slot="default">
<div class="npbr">
<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="date"
@cancel="endShow = false"
@confirm="handleEndTime"
@change="endTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<div class="des">描述</div>
<van-field
class="area"
v-model="message"
rows="3"
autosize
type="textarea"
placeholder="请输入描述"
show-word-limit
/>
</van-cell-group>
<div class="creat">创建活动</div>
</div>
</template>
<script>
export default {
data() {
return {
title: "",
title2: "",
coupon: "",
newCustomer: "",
condition: "",
type: "",
show: false,
show2: false,
cashCoupon: "",
limit: "",
startTime: new Date(),
startTime1: "",
endTime: new Date(),
endTime1: "",
startShow: false,
endShow: false,
message: ""
};
},
methods: {
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)
+ " "
},
startTimeChange(e) {
let startTimeArr = e.getValues();
this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
},
handleStartTime(value) {
this.startTime1 = this.timeFormat(value)
this.startShow = false
},
handleEndTime(value) {
this.endTime1 = this.timeFormat(value)
this.endShow = false
},
endTimeChange(e) {
let endTimeArr = e.getValues();
this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
}
},
mounted() {}
};
</script>
<style></style>
<style scoped>
.condition {
display: flex;
justify-content: flex-end;
align-items: center;
}
.phone {
margin-right: 10px;
}
.all >>> input {
text-align: right;
}
.noborder >>> .van-cell:not(:last-child)::after {
display: none !important;
}
.npbr .van-cell:not(:last-child)::after {
display: none !important;
}
.creat {
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;
}
.container {
height: auto;
display: flex;
flex-direction: column;
background: rgba(248, 248, 248, 1);
min-height: 100%;
}
.area >>> .van-field__control {
background: #f8f8f8;
padding: 12px;
}
.des {
padding: 5px 18px 0px;
font-size: 14px;
color: #2d476a;
}
.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;
}
.van-cell__title {
color: #2d476a !important;
}
</style>
<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">
<div class="nobr">
<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="date"
@cancel="basicInfo.startShow = false"
@confirm="handleBasicSTime"
@change="startTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="活动结束时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="basicInfo.endTime1"
placeholder="请选择结束时间"
readonly="readonly"
@click="basicInfo.endShow = true"
/>
<van-popup
v-model="basicInfo.endShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="basicInfo.endTime"
type="date"
@cancel="basicInfo.endShow = false"
@confirm="handleBasicETime"
@change="endTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="领券条件" style="font-size:14px;">
<template slot="default">
<div class="condition">
<span class="phone">手机号必填</span>
<van-switch v-model="condition" size="20px" />
</div>
</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">
<div class="jpsl">
<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"
/>
</div>
</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">
<div class="jpsl">
<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"
/>
</div>
</template>
</van-cell>
<van-cell style="font-size:14px;" class="cs gl">
<template slot="title">
<span class="custom-title">中奖概率</span>
</template>
<template slot="default">
<div class="jpsl">
<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"
/>
</div>
</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">
<div class="jpsl">
<van-field
class="right noborder"
readonly
clickable
:value="LuckyDraw.addNumber"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show3 = true"
/>
<van-number-keyboard
v-model="LuckyDraw.addNumber"
:show="LuckyDraw.show3"
@blur="LuckyDraw.show3 = false"
/>
</div>
</template>
</van-cell>
</van-cell-group>
<div class="title">奖品设置</div>
<van-cell-group
class="all sz"
v-for="(list, index) in prizeList"
:key="index"
>
<van-icon
v-if="prizeList.length > 1"
name="close"
size="20"
class="close"
@click="removePrice(index)"
/>
<van-cell center>
<template slot="title">
<span class="custom-title">奖项名称</span>
</template>
<template slot="default">
<van-field
class="right"
v-model="prizeList[index].name"
placeholder="请输入奖项名称"
/>
</template>
</van-cell>
<div class="yhType">
<div class="yhbr">
<div class="top">
<span style="color:#2d476a;">优惠券类型</span>
<van-radio-group v-model="prizeList[index].type" class="right">
<van-radio name="1" style="float:left;margin-right:10px;"
>代金券</van-radio
>
<van-radio name="2" style="float:right;">折扣券</van-radio>
</van-radio-group>
</div>
<div class="mj">
<div class="l-yh">
<div class="je">
<van-field
class="tm"
readonly
clickable
:value="prizeList[index].discountsMoney"
@touchstart.native.stop="
prizeList[index].discountsShow = true
"
placeholder="输入金额"
/>
<van-number-keyboard
v-model="prizeList[index].discountsMoney"
:show="prizeList[index].discountsShow"
@blur="prizeList[index].discountsShow = false"
/>
</div>
<span class="word">元优惠</span>
</div>
<div class="r-yh">
<van-checkbox v-model="prizeList[index].full"></van-checkbox>
<span class="word"></span>
<div class="je">
<van-field
class="tm"
readonly
clickable
:value="prizeList[index].fullMoney"
@touchstart.native.stop="prizeList[index].fullShow = true"
placeholder="输入金额"
/>
<van-number-keyboard
v-model="prizeList[index].fullMoney"
:show="prizeList[index].fullShow"
@blur="prizeList[index].fullShow = false"
/>
</div>
<span class="word end">元可用</span>
</div>
</div>
</div>
</div>
<van-cell title="开始时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].startTime1"
placeholder="选择活动开始时间"
readonly="readonly"
@click="prizeList[index].startShow = true"
/>
<van-popup
v-model="prizeList[index].startShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="prizeList[index].startTime"
type="date"
@cancel="prizeList[index].startShow = false"
@confirm="handleStartTime(prizeList[index].startTime,index)"
@change="startTimeChange2(prizeList[index].startTime, index)"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="结束时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="prizeList[index].endShow = true"
/>
<van-popup
v-model="prizeList[index].endShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="prizeList[index].endTime"
type="date"
@cancel="prizeList[index].endShow = false"
@confirm="handleEndTime(prizeList[index].endTime,index)"
@change="endTimeChange2(prizeList[index].endTime, index)"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="奖品数量" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right noborder"
readonly
clickable
:value="prizeList[index].prize"
placeholder="请输入数量"
@touchstart.native.stop="prizeList[index].prizeShow = true"
/>
<van-number-keyboard
v-model="prizeList[index].prize"
:show="prizeList[index].prizeShow"
:maxlength="6"
@blur="prizeList[index].prizeShow = false"
/>
</div>
</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>
<div class="jpsl">
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="prizeList[index].limit"
placeholder="请输入次数"
@touchstart.native.stop="prizeList[index].limitShow = true"
/>
<van-number-keyboard
v-model="prizeList[index].limit"
:show="prizeList[index].limitShow"
@blur="prizeList[index].limitShow = false"
/>
</template>
</div>
</van-cell>
<div class="add" @click="addPrice">添加奖项</div>
</van-cell-group>
<div class="detail">
<div class="border">
<div class="des">活动描述</div>
<van-field
class="area"
v-model="message"
rows="2"
autosize
type="textarea"
placeholder="请输入描述"
show-word-limit
/>
</div>
</div>
<div class="detail" style="margin-top:0;">
<div class="des">活动图片</div>
<van-uploader v-model="fileList" multiple :max-count="9" />
</div>
<div class="creat">创建活动</div>
</div>
</template>
<script>
export default {
data() {
return {
basicInfo: {
title: "",
startTime: new Date(),
startTime1: "",
endTime: new Date(),
endTime1: "",
startShow: false,
endShow: false
},
LuckyDraw: {
name: "",
number: "",
winningNumber: "",
probability: "",
quantity: "",
addNumber: "",
show: false,
show2: false,
show3: false
},
prizeList: [
{
name: "",
type: "",
discountsMoney: "",
discountsShow: false,
full: "",
fullMoney: "",
fullShow: false,
validity: "",
startTime: new Date(),
startTime1: "",
startShow: false,
endTime: new Date(),
endTime1: "",
endShow: false,
prize: "",
prizeShow: false,
limit: "",
limitShow: false
}
],
title: "",
title2: "",
coupon: "",
newCustomer: "",
condition: "",
type: "",
startShow: false,
endShow: false,
message: "",
fileList: [],
pTime: new Date(),
confirmTime: new Date()
};
},
methods: {
startTimeChange(e) {
let startTimeArr = e.getValues();
this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
},
startTimeChange2(e, index) {
console.log(111);
this.prizeList[index].startTime1 = this.timeFormat(e);
console.log(this.prizeList[index].startTime1,"2222");
},
////////
handlePSTime(index) {
this.prizeList[index].startTime1 = this.timeFormat(this.confirmTime);
this.prizeList[index].startShow = false;
},
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) +
" "
);
},
endTimeChange(e) {
let endTimeArr = e.getValues();
this.basicInfo.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
},
handleBasicETime(value) {
this.basicInfo.endShow = false;
this.basicInfo.endTime1 = this.timeFormat(value);
},
endTimeChange2(e, index) {
this.prizeList[index].endTime1 = this.timeFormat(e);
},
///点击确定不修改处理
handleStartTime(e,index) {
console.log(e,"e");
this.prizeList[index].startTime1 = this.timeFormat(e)
this.prizeList[index].startShow = false
},
handleEndTime(e,index) {
console.log(e,"e");
this.prizeList[index].endTime1 = this.timeFormat(e)
this.prizeList[index].endShow = false
},
//////
handlePETime(index) {
this.prizeList[index].endTime1 = this.timeFormat(this.confirmTime);
this.prizeList[index].endShow = false;
},
// 数字大写转小写
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;
},
addPrice() {
this.prizeList.push({
name: "",
type: "",
discountsMoney: "",
discountsShow: false,
full: "",
fullMoney: "",
fullShow: false,
validity: "",
startTime: new Date(),
startTime1: "",
startShow: false,
endTime: new Date(),
endTime1: "",
endShow: false,
prize: "",
prizeShow: false,
limit: "",
limitShow: false
});
},
removePrice(index) {
this.prizeList.splice(index, 1);
},
handleBasicSTime(value) {
this.basicInfo.startShow = false;
this.basicInfo.startTime1 = this.timeFormat(value);
}
},
mounted() {
this.pTime = this.timeFormat(this.pTime);
console.log(this.pTime, "time");
}
};
</script>
<style></style>
<style scoped>
.l-yh,.r-yh {
width: 55%;
display: flex;
align-items: center;
}
.l-yh {
width: 45%;
}
.bfb {
position: absolute;
right: 3px;
top: 0;
}
.all >>> input {
text-align: right;
}
.small {
font-size: 10px;
}
.creat,
.add {
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: 0 auto;
margin-top: 80px;
margin-bottom: 16px;
}
.add {
margin: 12px auto;
}
.area {
background-color: #f8f8f8;
width: 100%;
}
.des {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
margin-bottom: 12px;
}
.phone {
margin-right: 10px;
}
.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;
}
.nobr >>> .van-cell:not(:last-child)::after {
display: none !important;
}
.right >>> .van-cell:not(:last-child)::after {
display: none !important;
}
.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;
}
.validity >>> .van-cell__value {
flex: 2;
}
.container {
background: rgba(248, 248, 248, 1);
height: auto;
display: flex;
flex-direction: column;
background: rgba(248, 248, 248, 1);
min-height: 100%;
}
.van-cell__title {
color: #2d476a !important;
}
.type {
height: 84px;
}
.mj {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
}
.sz {
position: relative;
padding-top: 10px;
}
.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;
}
.jpsl >>> .van-cell:not(:last-child)::after {
display: none;
}
.all {
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
padding-bottom: 1px;
}
.detail {
margin-top: 12px;
background-color: #fff;
/* height: 135px; */
padding: 12px 16px 0 16px;
}
.border {
border-bottom: 1px solid #ebedf0;
padding-bottom: 9px;
}
.close {
position: absolute;
z-index: 999;
top: 0;
}
.condition {
display: flex;
justify-content: flex-end;
align-items: center;
}
.van-cell:not(:last-child)::after {
right: 14px;
}
.yhType {
padding: 14px;
}
.yhbr {
border-bottom: 1px solid #f8f8f8;
font-size: 14px;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
<template>
<div class="container">
<div>
<div class="topb">
<!-- <img src="../../../public/img/zpbg.png" alt="" /> -->
</div>
<div class="title">
<span class="bt">服装店幸运抽奖</span>
<div class="tb">
<img src="../../../public/img/zp.png" alt="" />
大转盘抽奖
</div>
</div>
<div class="wtitle">
<img src="../../../public/img/water.png" alt="" />
<span class="wan">玩法介绍</span>
</div>
<div class="content">
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
</div>
</div>
<div class="creat" @click="createActive">创建同款活动</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
createActive() {
this.$router.push({
name: "createBigWheelActive"
});
}
}
};
</script>
<style></style>
<style scoped>
p {
font-size: 12px;
font-weight: 400;
color: rgba(45, 71, 106, 0.8);
margin-top: 14px;
}
.wan {
position: absolute;
left: 77px;
top: 8px;
font-size: 16px;
font-weight: bold;
}
.wtitle {
width: 200px;
height: 24px;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 268px;
z-index: 999;
}
.wtitle img {
width: 100%;
}
.topb {
width: 100%;
height: 200px;
background:url(../../../public/img/zpbg.png) no-repeat;
background-size: cover;
}
.topb img {
width: 100%;
}
.title {
width: 100%;
height: 50px;
font-size: 18px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
line-height: 50px;
padding-left: 16px;
position: relative;
}
.container {
height: auto;
background-color: rgba(248, 248, 248, 1);
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 100%;
}
.bt {
font-size: 16px;
margin-left: 96px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.tb {
position: absolute;
height: 24px;
line-height: 24px;
left: 16px;
top: 14px;
border-radius: 2px;
border: 1px solid rgba(45, 71, 106, 1);
font-size: 10px;
font-weight: 500;
color: rgba(45, 71, 106, 1);
width: 88px;
text-align: center;
align-items: center;
}
.tb img {
width: 12px;
height: 12px;
vertical-align: middle;
}
.content {
margin: 36px 16px 16px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
position: relative;
padding: 16px 16px 30px 16px;
}
.creat {
width: 343px;
height: 40px;
line-height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
margin-bottom: 16px;
}
</style>
<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>
import { getCaseDetail } from '@/api/test/active'
export default {
data() {
return {
}
},
methods: {
getDeatil() {
let data = {
}
getCaseDetail(data).then(res => {
console.log(res,"案例详情");
})
}
},
};
</script>
<style scoped>
.pic {
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: auto;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
min-height: 100%;
}
.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>
<template>
<div class="container">
<div class="kj">
<div class="title">热门案例</div>
<div class="ct al" @click="handleDetail">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj" @click="handleDetail">
<div class="title">技巧</div>
<div class="ct jq">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj last" @click="handleDetail">
<div class="title">服务</div>
<div class="ct fw">
<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>
import { getCaseList } from '@/api/test/active'
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();
this.getList()
},
methods: {
getList() {
let data = {
}
getCaseList(data).then( res => {
console.log(res,"案例列表")
})
},
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: 100%;
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: 100%;
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;
}
.al,.fw,.jq {
background:url(../../../public/img/cswiper.png)no-repeat;
background-size: cover;
}
</style>
<template>
<div class="container">
<van-radio-group v-model="radio" class="nobr">
<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 {
data() {
return {
radio: ""
};
}
};
</script>
<style scoped>
.container {
height: auto;
background-color: #fff;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.title {
height: 44px;
background: rgba(248, 248, 248, 1);
line-height: 44px;
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
}
.fg {
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
height: 44px;
line-height: 44px;
}
.icon {
font-weight: 800;
}
.active {
background-color: #fff;
padding: 12px 12px 0 12px;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.list {
height: 94px;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238, 238, 238, 1);
margin-bottom: 14px;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,
.right {
height: 80px;
}
.left {
width: 80px;
background: rgba(248, 248, 248, 1);
}
.left img {
width: 100%;
}
.right {
width: 76%;
padding: 10px;
background-color: #fff;
}
h3 {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
p {
margin-top: 10px;
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
.nobr >>> [class*=van-hairline]::after {
display: none;
}
.nobr >>> .van-cell:not(:last-child)::after {
display: none;
}
</style>
<template>
<div class="container">
<div class="img">
<van-swipe :autoplay="3000">
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
</van-swipe>
</div>
<div class="list">
<div class="left">
<img src="../../../public/img/counter.png" alt="" />
</div>
<div class="right">
<h3>欧亚一号专柜</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<van-cell-group class="gn">
<van-cell title="专柜信息" is-link value="详细信息" />
<van-cell title="访问专柜首页" is-link value="详细信息" />
<van-cell title="专柜收款码" is-link value="详细信息" />
<van-cell title="推送门店信息" is-link value="详细信息" />
</van-cell-group>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style scoped>
.gn >>> .van-cell__title{
font-size:14px;
font-weight:bold;
color:rgba(45,71,106,1);
}
.gn {
margin-top: 12px;
width: 100%;
}
.container {
background: #f8f8f8;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
min-height: 100%;
}
.img {
width: 100%;
height: 200px;
background-color: pink;
}
.img img {
width: 100%;
}
.list {
height: 80px;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238, 238, 238, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
border-radius: 2px;
z-index: 100;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,
.right {
height: 80px;
}
.left {
width: 80px;
background: rgba(248, 248, 248, 1);
position: absolute;
top: 188px;
left: 10px;
}
.left img {
width: 100%;
}
.right {
width: 76%;
padding: 10px;
background-color: #fff;
margin-left: 94px;
}
h3 {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
p {
margin-top: 10px;
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
</style>
<template>
<div class="container">
<div class="img">
<van-uploader class="upload" v-model="bannerList" :max-count="4">
<div class="circle">
<span class="add">+</span>
</div>
</van-uploader>
<div class="tj">
点击添加专柜主题图
</div>
</div>
<div class="banner">
<van-uploader class="upload" v-model="bannerList" :max-count="4">
</van-uploader>
</div>
<van-cell-group class="gn">
<van-cell title="专柜LOGO" center class="logo">
<template slot="default">
<van-uploader v-model="fileList" :max-count="1" class="input" >
<div class="cube" style="width:54px;height:50px;">
<van-icon name="photo" size="40" />
<div class="mb">点击替换</div>
</div>
</van-uploader>
</template>
</van-cell>
<van-cell title="专柜名称">
<template slot="default">
<van-field v-model="name" placeholder="输入名称" class="input" />
</template>
</van-cell>
<van-cell title="所在楼层">
<template slot="default">
<van-field v-model="floor" placeholder="输入楼层" class="input" />
</template>
</van-cell>
<!-- <van-cell title="专柜介绍" is-link value="点击输入" /> -->
<div class="detail">
<div class="border">
<div class="des">活动描述</div>
<van-field
v-model="message"
rows="4"
autosize
type="textarea"
placeholder="请输入描述"
show-word-limit
/>
</div>
</div>
</van-cell-group>
<div class="creat">保存信息</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
floor: "",
fileList: [],
bannerList:[],
message: ""
};
}
};
</script>
<style >
</style>
<style scoped>
.logo >>> .van-uploader__preview-delete{
top: 0;
}
.des {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
margin-bottom: 12px;
}
.detail {
background-color: #fff;
padding: 12px 16px 0 16px;
}
.border >>> .van-field__control {
text-align: left !important;
background-color: #f8f8f8;
}
.border >>> .van-cell {
padding: 0;
}
.banner >>> .upload[data-v-6ea3d66a] {
padding-top: 10px;
z-index: 100;
width: 100%;
position: static;
transform: unset;
padding: 10px 9px 0;
}
.img >>> .van-uploader__preview {
display: none;
}
.banner {
width: 100%;
background-color: #fff;
height: 96px;
}
.banner >>> .van-uploader__upload-icon {
display: none;
}
.creat {
margin: 20px 0;
width: 343px;
height: 40px;
line-height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
bottom: 0;
}
.cube {
width:54px;
height: 50px;
background: rgba(248, 248, 248, 1);
border-radius: 8px;
position: relative;
text-align: center;
}
.tj {
height: 32px;
line-height: 32px;
background: rgba(117, 178, 253, 0.8);
text-align: center;
font-size: 12px;
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
}
.add {
font-size: 60px;
font-weight: 500;
color: #fff;
}
.circle {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
line-height: 60px;
text-align: center;
}
.upload {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.van-cell__value,
.van-cell__value--alone {
text-align: right;
}
.input {
padding: 0;
}
.gn >>> .van-field__control {
text-align: right;
}
.gn >>> .van-cell__title {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.gn {
margin-top: 12px;
width: 100%;
padding-bottom: 12px;
}
.input >>> .van-uploader__input-wrapper {
width: 100%;
}
.container {
min-height: 100%;
height: auto;
background: #F8F8F8;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.img {
width: 100%;
height: 200px;
position: relative;
background:url(../../../public/img/cswiper.png)no-repeat;
background-size: cover;
}
.mb {
position: absolute;
width: 100%;
height: 16px;
bottom: 0;
line-height: 16px;
background-color: #8EBFFB;
font-size: 6px;
color: #fff;
}
.mb img {
height: 100%;
}
.cfx {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<template>
<div class="container">
<div class="list">
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
</div>
</div>
<van-cell-group class="option">
<van-cell class="nop">
<div class="type">
<div class="t-l">佣金类型</div>
<div class="t-r">
<van-radio-group v-model="type" @change="handleChooseChange">
<van-radio name="1" style="float:left;">固定金额</van-radio>
<van-radio name="2" style="float:right;">成交价比例</van-radio>
</van-radio-group>
<div class="fr" v-if="type == 1">
<span class="fr" style="margin-top:18px;"></span>
<van-field
class="price"
readonly
clickable
:value="price"
placeholder="请输入金额"
@touchstart.native.stop="show2 = true"
/>
<van-number-keyboard
v-model="price"
:show="show2"
@blur="show2 = false"
/>
</div>
<div class="fr" v-if="type == 2">
<span class="fr" style="margin-top:18px;">%</span>
<van-field
class="price"
readonly
clickable
:value="percent"
placeholder="请输入百分比"
@touchstart.native.stop="show3 = true"
/>
<van-number-keyboard
v-model="percent"
:show="show3"
@blur="show3 = false"
/>
</div>
</div>
</div>
</van-cell>
<van-cell title="活动开始时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
v-model="startTime1"
placeholder="选择活动开始时间"
readonly="readonly"
@click="startShow = true"
class="nop"
/>
<van-popup v-model="startShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="startTime"
type="datetime"
@cancel="startShow = false"
@confirm="handleStartTime"
@change="startTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="活动结束时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
v-model="endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="endShow = true"
class="nop"
/>
<van-popup v-model="endShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="endTime"
type="datetime"
@cancel="endShow = false"
@confirm="handleEndTime"
@change="endTimeChange"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="上架数量" style="font-size:14px;" class="nob">
<template slot="default">
<van-field
class="nop"
readonly
clickable
:value="number"
placeholder="请输入数量"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="number"
:show="show"
@blur="show = false"
/>
</template>
</van-cell>
</van-cell-group>
<div class="creat">立即上架</div>
</div>
</template>
<script>
export default {
data() {
return {
startTime: new Date(),
startTime1: "",
endTime: new Date(),
endTime1: "",
startShow: false,
endShow: false,
number: "",
type: "1",
show: false,
show2: false,
show3: false,
price: "",
percent: ""
};
},
methods: {
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) +
" "
);
},
startTimeChange(e) {
let startTimeArr = e.getValues();
this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
},
endTimeChange(e) {
let endTimeArr = e.getValues();
this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
},
handleStartTime(value) {
this.startTime1 = this.timeFormat(value);
this.startShow = false;
},
handleEndTime(value) {
this.endTime1 = this.timeFormat(value);
this.endShow = false;
},
handleChooseChange(e) {
this.price = ''
this.percent = ''
}
}
};
</script>
<style scoped>
.jpsl >>> .van-cell:not(:last-child)::after {
display: none;
}
.price {
width: 88px;
height: 36px;
line-height: 36px;
/* text-align: center; */
background: #f8f8f8;
float: right;
margin-top: 12px;
border-radius: 10px;
color: rgba(45, 71, 106, 0.6);
padding: 0;
}
.nop {
padding: 0;
}
.t-l {
width: 120px;
}
.t-r {
width: 70%;
}
.type {
padding: 14px;
display: flex;
justify-content: space-between;
font-size: 14px;
}
h3 {
font-size: 14px;
color: rgba(208, 2, 27, 1);
margin-top: 18px;
}
.container {
height: 100%;
background-color: #f8f8f8;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.name {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.good {
height: 108px;
border-bottom: 1px solid rgba(238, 238, 238, 1);
width: 100%;
padding: 12px 0;
display: flex;
justify-content: space-between;
}
.list {
padding: 0 16px;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.left,
.right,
.center {
height: 80px;
}
.left {
width: 80px;
border-radius: 4px;
}
.left img {
width: 100%;
}
.center {
width: 70%;
}
.phone {
float: left;
}
.option {
margin-top: 10px;
}
.option >>> .van-field__control {
text-align: right;
}
.nob >>> .van-cell:not(:last-child)::after {
border: none;
}
.price >>> .van-field__control {
text-align: center;
}
.creat {
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%;
position: absolute;
bottom: 16px;
}
</style>
<template>
<div>
<div class="container">
<div class="search">
<van-search
v-model="inputValue"
placeholder="客官你要搜索点什么"
shape="round"
@search="onSearch"
>
</van-search>
</div>
<van-tabs
type="card"
@click="onClick"
title-active-color="#fff"
title-inactive-color="#2D476A"
class="tab"
background="#F8F8F8"
>
<van-tab title="已上架">
<div class="list">
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD" >下架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">下架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">下架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">下架</div>
</div>
</div>
</div>
</van-tab>
<van-tab title="未上架">
<div class="list">
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD" @click="handleUpperShelf">上架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">上架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">上架</div>
</div>
</div>
<div class="good">
<div class="left">
<img src="../../../public/img/goods.png" />
</div>
<div class="center">
<div class="name">商品名称商品名称商品名称商品名称商品</div>
<h3>¥888</h3>
</div>
<div class="right">
<div class="sj" color="#75B2FD">上架</div>
</div>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: "",
lower: 2,
higger: 1
};
},
methods: {
onSearch() {},
onClick(name, title) {
this.$toast(title);
if (title == "已上架") {
this.higger = 1;
this.lower = 2;
} else {
this.higger = 2;
this.lower = 1;
}
},
handleUpperShelf() {
this.$router.push("goodGrounding");
}
}
};
</script>
<style scoped>
.tab >>> .van-tabs__nav--card .van-tab {
border-right: none;
}
.tab >>> .van-tab.van-tab--active {
background-color: #75B2FD;
}
.sj {
width: 64px;
height: 32px;
background: rgba(117, 178, 253, 1);
border-radius: 8px;
line-height: 32px;
text-align: center;
font-size: 14px;
color: #fff;
margin-top: 20px;
}
h3 {
font-size: 14px;
color: rgba(208, 2, 27, 1);
margin-top: 18px;
}
.name {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.good {
height: 108px;
border-bottom: 1px solid rgba(238, 238, 238, 1);
width: 100%;
padding: 12px 0;
display: flex;
justify-content: space-between;
}
.list {
padding: 0 16px;
box-sizing: border-box;
}
.left,
.right,
.center {
height: 80px;
}
.left {
width: 80px;
border-radius:4px;
}
.left img {
width: 100%;
}
.center {
width: 50%;
}
.right {
width: 20%;
}
.tab >>> .van-tabs__nav--card {
margin: 0;
border: none;
height: 40px;
}
.container {
height: auto;
min-height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.search {
padding: 12px 16px;
}
.active {
background-color: #75b2fd;
}
</style>
......@@ -2,7 +2,7 @@
<div class="main">
<div class="lists">
<div v-for="(item, index) of list.main" :key="index">
<div class="list" @click="listClick(item.redirect)">
<div class="list" @click="listClick(item,item.redirect)">
<div>
<img class="list-logo" :src="item.logoUrl" alt/>
</div>
......@@ -12,6 +12,11 @@
</div>
</div>
</div>
<div>
<span>店员id</span>
<span>{{ zcache.userId }}</span>
<span>{{ info }}</span>
</div>
</div>
</div>
</template>
......@@ -63,13 +68,13 @@
logoUrl: "/mainSale/4.png"
}
]
}
};
},
info: ''
}
},
mounted() {
alert('111')
this.zReadyUserId();
this.zTestGetNowUrlInfo();
this.zTestGetNowUrlInfo()
},
created() {
},
......@@ -125,10 +130,11 @@
zlog("%c--->zTestPreAuthCode: Url =", "background: orange", url);
this.zcache.preAuthCodeUrl = url;
window.location.href = url;
// window.location.href = url;
},
// 测试-获取用户信息
zTestGetUserInfoByOldToken() {
alert('获取用户信息')
let postData = {
code: this.zcache.code,
};
......@@ -143,15 +149,24 @@
headers: headerData,
})
.then(res => {
console.log(res,'用户信息');
this.info = res.data + ''
alert('获取用户信息接口成功')
this.zcache.userInfoResNew = "RESOK:" + res.data.data.userId;
sessionStorage.setItem("userId", String(res.data.data.userId));
this.zcache.userId = String(res.data.data.userId);
alert(this.zcache.userId)
alert('获取到了用户信息')
})
.catch(err => {
this.zcache.userInfoResNew = "RESERR.";
});
},
listClick(inData) {
listClick(item,inData) {
console.log(item,'item');
console.log(inData,'inData');
this.$router.push({
name: inData,
params: {userId: this.zcache.userId}
......
<template>
<div class="main">
<div class="main-manInfos">
<div class="manInfo-logos">
<img class="logos-logo" :src="test.manInfo.logoUrl">
</div>
<div class="manInfo-name" @click="manInfoClick">{{test.manInfo.barFrom}}的专柜:{{test.manInfo.barName}}</div>
<div class="manInfo-switch" @click="switchBarClick">
<div class="switch-text">切换</div>
<img class="switch-icon" :src="test.manInfo.icon['1']">
</div>
</div>
<div class="main-tips">
<div class="tips-tip">店铺粉丝 {{test.barInfo.fans}}</div>
<div class="tips-tip">个人粉丝 {{test.barInfo.personalFans}}</div>
<div class="tips-tip">今日新增 {{test.barInfo.newFans}}</div>
</div>
<div class="main-menus">
<div class="menus-row">
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['1']">
<div class="menu-text">优惠券核销</div>
</div>
<div class="menu" @click="menu02Click">
<img class="menu-logo" :src="test.menuInfo.icon['2']">
<div class="menu-text">任务列表</div>
</div>
<div class="menu" @click="menu03Click">
<img class="menu-logo" :src="test.menuInfo.icon['3']">
<div class="menu-text">活动列表</div>
</div>
</div>
<div class="menus-row">
<div class="menu" @click="menu04Click">
<img class="menu-logo" :src="test.menuInfo.icon['4']">
<div class="menu-text">专柜维护</div>
</div>
<div class="menu" @click="menu05Click">
<img class="menu-logo" :src="test.menuInfo.icon['5']">
<div class="menu-text">活动模版</div>
</div>
<div class="menu" @click="menu06Click">
<img class="menu-logo" :src="test.menuInfo.icon['6']">
<div class="menu-text">商品管理</div>
</div>
</div>
</div>
<div class="main-actives">
<div class="actives-banners">
<!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->
<div class="actives-banner-title">现有开展活动</div>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['1']">
</div>
<div class="active-infos">
<div class="active-title">大转盘</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['2']">
</div>
<div class="active-infos">
<div class="active-title">现金券发放</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['3']">
</div>
<div class="active-infos">
<div class="active-title">集卡</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-mores">
<div class="mores-title">查看更多</div>
<img class="mores-icon" :src="test.cache.arrowRightDark">
</div>
</div>
<div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']">
<div class="menuBar-title menuBar-title-ac">活动</div>
</div>
<div class="menuBar-menu" @click="menuCase()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']">
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']">
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']">
<div class="menuBar-title">任务</div>
</div>
<div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']">
<div class="menuBar-title">我的</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "discountIndex",
data() {
return {
test: {
cache: {
imgUrl: "/hi.jpg",
actDsc: "由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。",
nowMenuBar: "1",
arrowRightDark: "/mainSale/icon-arrow-right-dark.png",
},
manInfo: {
bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
logoUrl: "/photo.png",
barFrom: "alice",
barName: "only",
icon: {
"1": "/mainSale/icon-arrow-right-light.png",
}
},
barInfo: {
fans: "299",
personalFans: "77",
newFans: "11",
},
menuInfo: {
icon: {
"1": "/mainSale/icon-menu-01.png",
"2": "/mainSale/icon-menu-02.png",
"3": "/mainSale/icon-menu-03.png",
"4": "/mainSale/icon-menu-04.png",
"5": "/mainSale/icon-menu-05.png",
"6": "/mainSale/icon-menu-06.png",
}
},
activeInfo: {
icon: {
"0": "/mainSale/icon-active-title.png",
"1": "/mainSale/icon-active-1.png",
"2": "/mainSale/icon-active-2.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: {}
};
},
created() {
this.checkNowMenuBar()
},
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]
},
manInfoClick(){
this.$router.push("counterInfo")
},
switchBarClick(){
this.$router.push("changeCounter")
},
testButtonClick() {
},
menu01Click() {
},
menu02Click() {
this.$router.push("Task")
},
menu03Click() {
this.$router.push("activeList")
},
menu04Click() {
this.$router.push("counterMaintain")
},
menu05Click() {
this.$router.push("ActTemplate")
},
menu06Click() {
this.$router.push("goodManage")
},
buttonMainMarketingClick() {
// this.$router.push("home")
},
menuBarClick(inData) {
this.$router.push(inData)
},
menuCase() {
this.$router.push({path:"/case"})
},
menuProfit() {
this.$router.push({path:"/profitList"})
},
menuTask() {
this.$router.push({path:"/taskList"})
},
}
};
</script>
<style scoped>
.testCube {
width: 60px;
height: 10px;
background-color: lightcoral;
border: 1px solid white;
}
.main {
background-color: rgb(237, 239, 243);
width: 100%;
height: auto;
/*padding: ;*/
padding-bottom: 94px;
display: flex;
flex-direction: column;
justify-content: start;
overflow: auto;
}
.main-manInfos {
width: 100%;
height: 72px;
background-color: #4377BC;
padding: 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.manInfo-logos {
width: 48px;
height: 48px;
/*border: 1px solid white;*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.logos-logo {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
border: 2px solid white;
}
.manInfo-name {
width: 100%;
height: 18px;
padding: 0px 12px;
margin-right: 60px;
color: white;
font-size: 14px;
line-height: 16px;
font-weight: bold;
}
.manInfo-switch {
/*border: 1px solid greenyellow;*/
width: 100px;
height: 18px;
font-size: 14px;
line-height: 18px;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.switch-icon {
width: 5px;
height: 8px;
}
.switch-text {
color: white;
padding-right: 4px;
font-size: 14px;
line-height: 16px;
font-weight: normal;
}
.main-tips {
width: 100%;
height: 48px;
background-color: #F8F8F8;
padding: 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tips-tip {
/*border: 1px solid darkorange;*/
width: 30%;
height: 16px;
color: #4377BC;
font-size: 12px;
font-weight: normal;
line-height: 16px;
text-align: center;
}
.main-menus {
/*border: 1px solid lightseagreen;*/
width: 100%;
height: 240px;
display: flex;
flex-direction: column;
justify-content: start;
}
.menus-row {
width: 100%;
height: 120px;
padding: 12px 16px 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menu {
width: 108px;
height: 108px;
background-color: #F8F8F8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-logo {
width: 48px;
height: 48px;
object-fit: cover;
}
.menu-text {
font-size: 14px;
font-weight: bold;
color: #2D476A;
}
.main-actives {
/*border: 1px solid lightcoral;*/
width: 100%;
height: 380px;
/*margin-bottom: 94px;*/
margin-top: 36px;
padding: 0px 12px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: start;
}
.actives-banners {
border-bottom: 1px solid #EEEEEE;
width: 100%;
height: 25px;
display: flex;
flex-direction: row;
justify-content: center;
}
.actives-banner-small {
width: 220px;
height: 30px;
object-fit: cover;
position: relative;
bottom: 7px;
}
.actives-banner-title {
background: url(/mainSale/icon-active-title.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 220px;
height: 30px;
font-size: 16px;
line-height: 16px;
color: #2D476A;
text-align: center;
position: relative;
bottom: 7px;
}
.actives-banner-main {
width: 148px;
height: 24px;
border-radius: 40px;
margin: 0px 4px;
font-size: 16px;
font-weight: bold;
line-height: 18px;
text-align: center;
color: #2D476A;
background: linear-gradient(#FFFFFF, 50%, #E4F9FF);
box-shadow: 0px 1px 1px 0px #96CEDC;
position: relative;
bottom: 12px;
}
.actives-main {
border-bottom: 1px solid #EEEEEE;
width: 100%;
height: 105px;
padding: 12px 0px;
display: flex;
flex-direction: row;
justify-content: start;
}
.active-logos {
background-color: #F8F8F8;
width: 80px;
height: 80px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.active-logo {
width: 56px;
height: 56px;
}
.active-infos {
width: 100%;
height: 80px;
padding-left: 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
.active-title {
height: 16px;
font-size: 14px;
font-weight: bold;
line-height: 14px;
margin-bottom: 8px;
}
.active-dsc {
height: 36px;
width: 100%;
font-size: 12px;
font-weight: normal;
}
.actives-mores {
width: 100%;
height: 40px;
/*border: 1px solid red;*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mores-title {
width: auto;
height: 14px;
margin-right: 4px;
font-size: 12px;
font-weight: normal;
line-height: 14px;
color: #2D476A;
}
.mores-icon {
width: 10px;
height: 14px;
}
.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>
<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: "couponDetail"
}
],
},
};
},
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>
<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" @click="listTaskClick">
<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" @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">任务</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-dark.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);
},
listTaskClick() {
this.$router.push("Task");
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
menuCase() {
this.$router.push({ path: "/case" });
}
}
};
</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>
<template>
<div class="main">
<div class="org">
<div class="org-titles">
<div class="org-title">
集团任务
</div>
</div>
<div class="org-infos">
<div class="org-info-title">{{list.orgMsgs[0].title}}</div>
<div class="org-info-content">{{list.orgMsgs[0].content}}</div>
<div class="org-info-other">
<div class="org-author">{{list.orgMsgs[0].author}}</div>
<div class="org-date">{{list.orgMsgs[0].date}}</div>
</div>
</div>
</div>
<div class="my">
<div class="my-titles">
<div class="my-title">
我的任务
</div>
<div class="my-title">
查看更多
<img class="my-title-icon" :src="cache.icon.arrowRightDark">
</div>
</div>
<div class="my-infos">
<div v-for="(item, index) of list.myMsgs" :key="index">
<div class="my-info" :style="index === 0?cache.style.noBorderTop:''">
<img class="my-logo" :src="item.logoUrl">
<div class="my-contents">
<div class="content-title">{{item.title}}</div>
<div class="content-tasks">
<div class="task-title">{{item.type}}</div>
<div v-if="item.type === '月销售'" class="task-money">¥{{item.content}}</div>
<div v-if="item.type === '月拉新'" class="task-money">{{item.nowNum}}/{{item.taskNum}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my"></div>
</div>
</template>
<script>
export default {
name: "task",
data() {
return {
cache: {
icon: {
arrowRightDark: "/mainSale/icon-arrow-right-dark.png",
},
style: {
noBorderTop: "border-top: none;",
},
},
list: {
orgMsgs: [
{
title: "备战春节",
content: "备战春节,完成业务指标完成业务指标......",
author: "亿百分",
date: "2019/12/24",
},
{
title: "备战元宵节",
content: "备战元宵节,完成业务指标XXXXXXXXXX......",
author: "亿百分",
date: "2019/12/24",
},
],
myMsgs: [
{
logoUrl: "/mainSale/test-city.png",
title: "营业员1",
type: "月销售",
content: "123.00",
},
{
logoUrl: "/mainSale/test-city.png",
title: "冬季男装",
type: "月销售",
content: "123456.00",
},
{
logoUrl: "/mainSale/test-city.png",
title: "会员拉新",
type: "月拉新",
taskNum: "500",
nowNum: "300",
},
],
}
};
},
created() {
},
methods: {}
};
</script>
<style scoped>
.main {
/*border: 1px solid red;*/
background-color: #F8F8F8;
width: 100%;
height: auto;
min-height: 100%;
padding-bottom: 94px;
display: flex;
flex-direction: column;
justify-content: start;
overflow: auto;
}
.org {
/*border: 1px solid orange;*/
width: 100%;
height: auto;
}
.org-titles {
/*border: 1px solid deeppink;*/
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 16px;
}
.org-title {
/*border: 1px solid dodgerblue;*/
width: auto;
height: 14px;
font-size: 12px;
font-weight: normal;
line-height: 14px;
color: rgba(45, 71, 106, 1);
}
.org-infos {
/*border: 1px solid green;*/
width: 100%;
height: auto;
padding: 16px;
background-color: rgba(255, 255, 255, 1);
border-top: 1px solid #EEEEEE;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.org-info-title {
/*border: 1px solid deeppink;*/
width: auto;
max-width: 100%;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: rgba(45, 71, 106, 1);
}
.org-info-content {
width: 100%;
height: auto;
/*border: 1px solid crimson;*/
margin: 12px 16px 12px 0px;
padding: 12px;
background-color: rgba(248, 248, 248, 1);
font-size: 12px;
font-weight: normal;
word-wrap: break-word;
color: rgba(45, 71, 106, 0.8);
}
.org-info-other {
/*border: 1px solid red;*/
width: 100%;
height: 25px;
padding-top: 12px;
border-top: 1px solid rgba(238, 238, 238, 1);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.org-author {
width: auto;
height: 12px;
font-size: 12px;
font-weight: normal;
line-height: 12px;
color: rgba(45, 71, 106, 1);
}
.org-date {
width: auto;
height: 12px;
font-size: 12px;
font-weight: normal;
line-height: 12px;
color: rgba(45, 71, 106, 1);
}
.my {
/*border: 1px solid orange;*/
width: 100%;
height: auto;
}
.my-titles {
/*border: 1px solid deeppink;*/
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 16px;
}
.my-title {
/*border: 1px solid dodgerblue;*/
width: auto;
height: 14px;
font-size: 12px;
font-weight: normal;
line-height: 14px;
color: rgba(45, 71, 106, 1);
}
.my-title-icon {
width: 5px;
height: 8px;
object-fit: cover;
}
.my-infos {
/*border: 1px solid red;*/
width: 100%;
height: auto;
padding: 0px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #FFFFFF;
box-shadow: 0px 2px 4px 0px #DDDDDD;
}
.my-info {
border-top: 1px solid #EEEEEE;
width: 100%;
height: auto;
padding: 12px 0px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.my-logo {
width: 80px;
height: 80px;
border-radius: 4px;
}
.my-contents {
border: 0px solid red;
width: 100%;
height: 80px;
padding: 0px 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.content-title {
width: auto;
max-width: 100%;
word-wrap: unset;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #2D476A;
padding-bottom: 16px;
}
.content-tasks {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.task-title {
width: auto;
font-size: 12px;
font-weight: normal;
line-height: 12px;
color: #2D476A;
}
.task-money {
width: auto;
font-size: 12px;
font-weight: normal;
line-height: 12px;
color: #D0021B;
}
</style>
<template>
<div class="container">
<div class="title">
<span>集团消息</span>
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right">
<h3>砍价</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list">
<div class="left"></div>
<div class="right">
<h3>集赞</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list list3">
<div class="left"></div>
<div class="right">
<h3>推荐有礼</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
</div>
<div class="title">
<span>工作消息</span>
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right">
<h3>大转盘抽奖</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list">
<div class="left"></div>
<div class="right">
<h3>大转盘抽奖</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list list3">
<div class="left"></div>
<div class="right">
<h3>砸金蛋抽奖</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.container {
height: auto;
background-color: rgba(248, 248, 248, 1);
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.title {
height: 44px;
background: rgba(248, 248, 248, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
}
.fg {
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
height: 44px;
line-height: 44px;
}
.icon {
font-weight: 800;
}
.active {
background-color: #fff;
padding: 12px 12px 0 12px;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.list {
height: 94px;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238, 238, 238, 1);
margin-bottom: 14px;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,
.right {
height: 80px;
}
.left {
width: 80px;
background: rgba(248, 248, 248, 1);
}
.right {
width: 76%;
padding-left: 10px;
background-color: #fff;
}
h3 {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
p {
margin-top: 10px;
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
</style>
<template>
<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="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 {
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;
}
.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>
<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>
......@@ -88,9 +88,11 @@ export default {
};
},
created() {
this.zcache.userId = this.$route.params.userId;
this.zReadyGetUserFromId();
alert(`--->sideNav/discount/index.vue: JSON.stringify(this.$route)= ${JSON.stringify(this.$route)}`)
alert(`--->sideNav/discount/index.vue: this.$route.path= ${this.$route.path}`)
this.getAgentAuth();
this.zcache.userId = this.$route.params.userId;
this.zReadyGetUserFromId()
},
mounted() {
},
......@@ -122,7 +124,7 @@ export default {
basicInfo.state +
basicInfo.tail;
zlog("%c--->zTestPreAuthCode: Url =", "background: orange", url);
// window.location.href = url
window.location.href = url
},
zReadyGetUserFromId() {
let postData = {
......
......@@ -11,10 +11,15 @@
</div>
<button class="button-send" @click="sendMessage">邀请</button>
</div>
<div>
<span>顾客id</span>
<span>{{ userId }}</span>
</div>
</div>
</div>
</template>
<script>
import { getUserInfoByUserId } from "@/api/sidebar/voucher";
export default {
name: 'register',
data() {
......@@ -25,16 +30,54 @@
dsc: "推荐完成注册,完成会员拉新",
logoUrl: "/mainSale/4.png"
}
]
],
storeId: '',
userId: ''
}
},
created() {
this.getAgentAuth();
this.zReadyGetUserFromId();
this.getCustomerId()
},
mounted(){
},
methods:{
// 获取客户Id
getCustomerId() {
alert('获取顾客信息')
wx.invoke('getCurExternalContact', {
}, function(res){
if(res.err_msg == "getCurExternalContact:ok"){
console.log(res,'顾客信息');
alert('成功获取顾客信息')
this.userId = res.userId ; //返回当前外部联系人userId
}else {
//错误处理
alert('获取用户信息失败')
}
})
},
// 获取店铺Id
zReadyGetUserFromId() {
alert('获取店铺信息')
let postData = {
param: this.$route.params.userId
// param: 'ZhouHeQiang'
};
// alert(`--->userInfoFromId: postData = ${JSON.stringify(postData)}`);
getUserInfoByUserId(postData)
.then(res => {
console.log(res,'店铺信息');
res = JSON.stringify(res)
alert(res)
})
.catch(err => {
alert('获取店铺信息失败')
});
},
sendMessage(){
wx.invoke(
"sendChatMessage",
......
<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>
<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-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-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-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-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-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-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-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>
</template>
<script>
export default {
data() {
return {
writeOff: false,
finished: false,
newMemberList: [
{
number: 100,
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();
},
methods: {
onClick() {},
onLoad() {
// fetchSomeThing().catch(() => {
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>
<style scoped>
.container {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
}
.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;
}
.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