Skip to content

7
7-Eleven
Commit a723c89f by 谢中龙
Options

导购

parent 36be4393
Showing with 1735 additions and 5 deletions
src/app.js
......@@ -123,8 +123,8 @@ App({
// brandId: 2711,
// brandId: 2005,
// brandId: 1001,
// brandId: 1002,
brandId: 3001,
brandId: 1002,
// brandId: 3001,
// brandId: 3002,
}
})
src/app.json
......@@ -53,6 +53,15 @@
"pages/friendShareList/friendShareList",
"pages/goToHome/goToHome"
]
},
{
"root": "shoppingGuid/page",
"pages": [
"pages/home/home",
"pages/kpi/kpi",
"pages/achievement/achievement",
"pages/welfare/welfare"
]
}
],
"usingComponents": {
......
src/config/index.js
const PROJECT_ENV = 'prod' // 生产 prod, 开发 dev, 测试 test, 预生产 pre
const PROJECT_ENV = 'test' // 生产 prod, 开发 dev, 测试 test, 预生产 pre
const needMock = '' //
// appid_dev_wx wxc3b64b09b1d3dfc2
......
src/project.config.json
......@@ -13,7 +13,7 @@
},
"compileType": "miniprogram",
"libVersion": "2.8.2",
"appid": "wx313ec36b710125d4",
"appid": "wxac09792264c49b5c",
"projectname": "%E5%BE%AE%E5%95%86%E5%9F%8E",
"debugOptions": {
"hidedInDevtools": []
......@@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": 16,
"current": 48,
"list": [
{
"id": -1,
......@@ -341,6 +341,30 @@
"pathName": "pages/my_11/my",
"query": "",
"scene": null
},
{
"id": -1,
"name": "导购首页",
"pathName": "shoppingGuid/page/pages/home/home",
"query": ""
},
{
"id": -1,
"name": "KPI",
"pathName": "shoppingGuid/page/pages/kpi/kpi",
"query": ""
},
{
"id": -1,
"name": "业绩",
"pathName": "shoppingGuid/page/pages/achievement/achievement",
"query": ""
},
{
"id": -1,
"name": "福利",
"pathName": "shoppingGuid/page/pages/welfare/welfare",
"query": ""
}
]
}
......
src/shoppingGuid/component/tabBar/tabBar.js 0 → 100644
// subPackage/component/tabBar/tabBar.js
var app = getApp()
const wxService = require('../../../utils/wxService')
const utils = require('../../../utils/util')
const utilLink = require('../../../utils/currentLinkRouter')
const envInfo = require('../../../config/index').envInfo
Component({
/**
* 组件的属性列表
*/
properties: {
index : {
type : Number,
value : 0
}
},
attached(){
this.data.tabBar.forEach(item => {
item.isActive = false;
});
this.data.tabBar[this.data.index].isActive = true;
this.setData({
tabBar: this.data.tabBar
});
},
/**
* 组件的初始数据
*/
data: {
tabBar : [
{
activeUrl: '/assets/imgs/shoppingGuide/home_active.png',
pageUrl: '/shoppingGuid/page/pages/home/home',
defaultUrl: '/assets/imgs/shoppingGuide/home_default.png',
isActive : true
},
{
activeUrl: '/assets/imgs/shoppingGuide/kpi_active.png',
pageUrl: '/shoppingGuid/page/pages/kpi/kpi',
defaultUrl: '/assets/imgs/shoppingGuide/kpi_default.png',
isActive: false
},
{
activeUrl: '/assets/imgs/shoppingGuide/welfare_active.png',
pageUrl: '/shoppingGuid/page/pages/welfare/welfare',
defaultUrl: '/assets/imgs/shoppingGuide/welfare_default.png',
isActive: false
},
{
activeUrl: '/assets/imgs/shoppingGuide/achievement_active.png',
pageUrl: '/shoppingGuid/page/pages/achievement/achievement',
defaultUrl: '/assets/imgs/shoppingGuide/achievement_default.png',
isActive: false
},
]
},
/**
* 组件的方法列表
*/
methods: {
//点击
onTapToPage(e){
let item = e.currentTarget.dataset.item;
let index = e.currentTarget.dataset.index;
//如果点击是本页面，则不进行任何跳转
if(this.data.index == index){
return ;
}
wx.redirectTo({
url: item.pageUrl,
});
}
}
})
src/shoppingGuid/component/tabBar/tabBar.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/shoppingGuid/component/tabBar/tabBar.wxml 0 → 100644
<!--subPackage/component/tabBar/tabBar.wxml-->
<view class='bottom-tab-bar'>
<view class='tab-bar-item'
bindtap='onTapToPage'
wx:key="tabkey"
wx:for="{{tabBar}}"
wx:for-index="idx"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">
<image src='{{item.isActive ? item.activeUrl : item.defaultUrl}}' mode='widthFix'></image>
</view>
</view>
src/shoppingGuid/component/tabBar/tabBar.wxss 0 → 100644
/* subPackage/component/tabBar/tabBar.wxss */
.bottom-tab-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
border-top: solid 1px #ddd;
left: 0;
background: #ffffff;
display: flex;
}
.bottom-tab-bar .tab-bar-item{
flex: 0;
min-width: 25%;
max-width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-tab-bar .tab-bar-item image{
width: 100rpx;
}
\ No newline at end of file
src/shoppingGuid/page/pages/achievement/achievement.js 0 → 100644
// shoppingGuid/page/pages/achievement/achievement.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/shoppingGuid/page/pages/achievement/achievement.json 0 → 100644
{
"navigationBarTitleText": "业绩",
"usingComponents": {
"tab-bar": "../../../component/tabBar/tabBar"
}
}
\ No newline at end of file
src/shoppingGuid/page/pages/achievement/achievement.wxml 0 → 100644
<!--shoppingGuid/page/pages/achievement/achievement.wxml-->
<!-- 业绩界面 -->
<view class='main-container'>
<!-- 个人信息 -->
<view class='info'>
<view class='center'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/default_logo_icon.png' mode='aspectFit'></image>
<view class='rg-name'>
<view>会员名称</view>
<view>235525352525204</view>
</view>
</view>
</view>
<!-- 今日排行 -->
<view class='today-top'>
<view class='items'>
<view class='number'>10</view>
<view>我的今日招募排名</view>
</view>
<view class='items'>
<view class='number2'>6</view>
<view>今日招募</view>
</view>
</view>
<!-- 招募总量 -->
<view class='total'>
<text>招募总量：</text>
<text class='total-colors'>135</text>
</view>
<!-- b本月 -->
<view class='month'>
<view class='header'>本月业绩</view>
<view class='month-data'>
<view class='data-item'>
<text class='data-item-title'>本月业绩（元）</text>
<text class='data-item-number'>11356.59</text>
</view>
<view class='data-item'>
<text class='data-item-title'>本月新增回应</text>
<text class='data-item-number'>32</text>
</view>
<view class='data-item'>
<text class='data-item-title'>本月新增订单</text>
<text class='data-item-number'>228</text>
</view>
</view>
</view>
<!-- 数据筛选 -->
<view class='data-filter'>
<view class='data-filter-item active'>本月</view>
<view class='data-filter-item'>上月</view>
<view class='data-filter-item'>3个月</view>
</view>
<!-- 订单数据概览 -->
<view class='order-data'>
<view class='order-data-title'>订单数据概览</view>
<view class='statistic-data'>
<text>总销售额（￥）</text>
<text class='number'>342653.36</text>
</view>
<view class='statistic-data'>
<text>退货额（￥） </text>
<text class='number'>234435</text>
</view>
<view class='statistic-data'>
<text>退款率</text>
<text class='number'>6%</text>
</view>
</view>
</view>
<!-- tabbar -->
<tab-bar index="{{3}}"></tab-bar>
src/shoppingGuid/page/pages/achievement/achievement.wxss 0 → 100644
/* shoppingGuid/page/pages/achievement/achievement.wxss */
page{
background: #f2f2f2;
padding-bottom: 106rpx;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.main-container{
width: 100%;
height: auto;
}
.info{
width: 100%;
height: 150rpx;
background: #ffffff;
margin-bottom: 10rpx;
position: relative;
}
.info .center{
width: 94%;
position: absolute;
height: 150rpx;
left: 3%;
background: #0091FF ;
top: 10rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding: 30rpx;
display: flex;
align-items: center;
}
.info .center image{
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.info .center .rg-name{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
padding-left: 10rpx;
font-size: 28rpx;
}
.today-top{
display: flex;
padding: 30rpx;
background: #ffffff;
margin-bottom: 20rpx;
}
.today-top .items{
flex: 1;
font-size: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.today-top .items .number{
color: #0091FF;
font-weight: bold;
font-size: 28rpx;
margin-bottom: 8rpx;
}
.today-top .items .number2{
color: #333;
font-weight: bold;
margin-bottom: 8rpx;
font-size: 28rpx;
}
.today-top .items:first-child{
border-right: solid 4rpx #eeeeee;
}
/* 招募总量： */
.total{
display: flex;
width: 100%;
background: #ffffff;
padding: 30rpx;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.total .total-colors{
color: #FA6400 ;
font-size: 28rpx;
font-weight: 550;
}
/* 本月业绩 */
.month{
width: 100%;
background: #ffffff;
padding: 30rpx;
font-size: 28rpx;
}
.month .header{
padding: 0 20rpx;
padding-bottom: 20rpx;
color: #333333;
border-bottom: solid 1px #eeeeee;
}
.month .month-data{
padding: 20rpx;
display: flex;
margin-top: 20rpx;
}
.month .month-data .data-item{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.month .month-data .data-item .data-item-title{
font-size: 24rpx;
color: #999999;
margin-bottom: 8rpx;
}
.month .month-data .data-item .data-item-number{
font-size: 40rpx;
color: #FA6400 ;
font-weight: 550;
}
.data-filter{
width: 100%;
height: 80rpx;
background: -webkit-linear-gradient(left,rgb(0,145,255),rgba(0,145,255,0.8),rgba(0,145,255,0.3));
display: flex;
align-items: center;
padding: 0 30rpx;
}
.data-filter .data-filter-item{
height: 50rpx;
width: 120rpx;
border-radius: 25rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #ffffff;
}
.data-filter .data-filter-item.active{
background: #ffffff;
color: rgb(0,145,255);
}
/* 订单数据概览 */
.order-data{
width: 100%;
height: auto;
padding: 0 30rpx;
background: #ffffff;
font-size: 24rpx;
margin-bottom: 20rpx;
color: #333333;
}
.order-data .order-data-title{
padding: 30rpx 20rpx;
font-size: 28rpx;
border-bottom: solid 1px #eeeeee;
}
.statistic-data{
padding: 30rpx 20rpx;
font-size: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #eeeeee;
color: #666666;
}
.statistic-data .number{
font-weight: bold;
}
.statistic-data:last-child{
border-bottom: none;
}
/* 图表 */
src/shoppingGuid/page/pages/home/home.js 0 → 100644
// shoppingGuid/page/pages/home/home.js
const wxService = require('../../../../utils/wxService')
wxService.page({
/**
* 页面的初始数据
*/
data: {
navBar: [{ name: '招募榜', type: 1, isActive: true }, { name: '门店榜单', type: 2, isActive: false }],
current : 1,
staff : [],
store : []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
// 点击事件
onTopBarTap(e){
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.navBar.forEach(nav => {
nav.isActive = false;
});
this.data.navBar[index].isActive = true;
this.data.current = this.data.navBar[index].type;
this.setData({
navBar: this.data.navBar,
current: this.data.current
});
},
// 回到商城
onTapToMall(){
wx.redirectTo({
url: '/pages/userCenter/userCenter',
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
})
\ No newline at end of file
src/shoppingGuid/page/pages/home/home.json 0 → 100644
{
"navigationBarTitleText": "导购首页",
"usingComponents": {
"tab-bar" : "../../../component/tabBar/tabBar"
}
}
\ No newline at end of file
src/shoppingGuid/page/pages/home/home.wxml 0 → 100644
<!--shoppingGuid/page/pages/home/home.wxml-->
<!-- 导购首页 -->
<view class='main-container'>
<!-- top -->
<view class='top-icons'>
<view class='icon-item'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_qrcode.png' mode='aspectFit'></image>
<view class='icon-title'>招募码</view>
</view>
<view class='icon-item' bindtap='onTapToMall'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_go_mall.png' mode='aspectFit'></image>
<view class='icon-title'>前往商城</view>
</view>
<view class='icon-item'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_member.png' mode='aspectFit'></image>
<view class='icon-title'>会员</view>
</view>
</view>
<!--招募榜 -->
<view class='header-tab'>
<view class='header-tab-item'
wx:for="{{navBar}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTopBarTap'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">
<view class='item-text {{item.isActive ? "active" : ""}}'>{{item.name}}</view>
</view>
</view>
<view class='list-container'>
<!-- 招募榜 -->
<view class='list' wx:if="{{current == 1}}">
<view class='title'>
<image src='/assets/imgs/shoppingGuide/home_top20.png' mode='widthFix'></image>
</view>
<view class='table-list'>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>1394585xxxx</text>
</view>
<view class='rg'>已招募<text>34</text>人</view>
</view>
</view>
</view>
<!-- 门店榜单 -->
<view class='list' wx:if="{{current == 2}}">
<view class='title'>
<image src='/assets/imgs/shoppingGuide/home_top20.png' mode='widthFix'></image>
</view>
<view class='table-list'>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>张江店</text>
</view>
<view class='rg'>已招募<text>560</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>浦东一店</text>
</view>
<view class='rg'>已招募<text>460</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>世纪大道店</text>
</view>
<view class='rg'>已招募<text>500</text>人</view>
</view>
<view class='table-list-item'>
<view class='lf'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_default_logo.png' mode='aspectFit'></image>
<text>龙阳店</text>
</view>
<view class='rg'>已招募<text>389</text>人</view>
</view>
</view>
</view>
</view>
</view>
<!-- 整体布局 -->
<!-- tabbar -->
<tab-bar index="{{0}}"></tab-bar>
src/shoppingGuid/page/pages/home/home.wxss 0 → 100644
/* shoppingGuid/page/pages/home/home.wxss */
page{
background: #ffffff;
padding-bottom: 106rpx;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* *,*::after,*::before{
box-sizing: border-box;
} */
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.main-container{
width: 100%;
height: auto;
}
.top-icons{
display: flex;
padding: 30rpx;
justify-content: space-between;
align-items: center;
}
.top-icons .icon-item{
flex: 0;
min-width: 30%;
max-width: 30%;
height: 240rpx;
border-radius: 10rpx;
box-shadow: 0 0 6rpx 2rpx rgba(0,145,255,0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top-icons .icon-item:active{
background: #f2f2f2;
}
.top-icons .icon-item image{
width: 100rpx;
height: 100rpx;
}
.top-icons .icon-item .icon-title{
font-size: 30rpx;
color: #000000;
margin-top: 16rpx;
}
/* 找模榜 */
.header-tab{
width: 100%;
height: 80rpx;
margin-top: 40rpx;
background: -webkit-linear-gradient(left,rgb(0,145,255),rgba(0,145,255,0.8),rgba(0,145,255,0.3));
display: flex;
}
.header-tab .header-tab-item{
flex: 0;
min-width: 50%;
max-width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 28rpx;
}
.header-tab .header-tab-item .item-text{
height: 50rpx;
width: auto;
padding: 0 20rpx;
display: flex;
align-items: center;
}
.header-tab .header-tab-item .item-text.active{
background: #ffffff;
color: rgb(0,145,255);
border-radius: 25rpx;
}
.list-container{
width: 100%;
height: auto;
padding:0 30rpx;
}
.list{
width: 100%;
height: auto;
box-shadow: 0 0 6rpx 2rpx rgba(0,145,255,0.2);
/* padding-bottom: 20rpx; */
}
.list .title{
width: 100%;
padding: 30rpx 20rpx;
}
.list .title image{
width: 140rpx;
}
.list .table-list{
width: 100%;
height: auto;
padding: 0 20rpx;
}
.list .table-list .table-list-item{
width: 100%;
border-bottom: solid 2rpx #eee;
padding: 20rpx;
display: flex;
font-size: 28rpx;
color: #333333;
}
.list .table-list .table-list-item:last-child{
border-bottom: none;
}
.list .table-list .table-list-item .lf{
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
}
.list .table-list .table-list-item .lf image{
flex: 0;
min-width: 64rpx;
max-width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.list .table-list .table-list-item .rg{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.list .table-list .table-list-item .rg text{
color: red;
font-weight: bold;
}
\ No newline at end of file
src/shoppingGuid/page/pages/kpi/kpi.js 0 → 100644
// shoppingGuid/page/pages/kpi/kpi.js
const wxService = require('../../../../utils/wxService')
wxService.page({
/**
* 页面的初始数据
*/
data: {
navBar: [
{ name: '销售任务', type: 1, isActive: true },
{ name: '招募任务', type: 2, isActive: false },
// { name: '内容任务', type: 3, isActive: false },
// { name: '维护任务', type: 4, isActive: false }
],
current: 1,
list : [{},{},{},{},{},{},{},{}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
// 点击事件
//分类点击
onTopBarTap(e){
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.navBar.forEach(nav => {
nav.isActive = false;
});
this.data.navBar[index].isActive = true;
this.data.current = this.data.navBar[index].type;
this.setData({
navBar: this.data.navBar,
current: this.data.current
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
})
\ No newline at end of file
src/shoppingGuid/page/pages/kpi/kpi.json 0 → 100644
{
"navigationBarTitleText": "KPI",
"usingComponents": {
"tab-bar": "../../../component/tabBar/tabBar"
}
}
\ No newline at end of file
src/shoppingGuid/page/pages/kpi/kpi.wxml 0 → 100644
<!--shoppingGuid/page/pages/kpi/kpi.wxml-->
<!-- KPI界面 -->
<view class='main-container'>
<view class='header-tab'>
<view class='header-tab-item'
wx:for="{{navBar}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTopBarTap'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">
<view class='item-text {{item.isActive ? "active" : ""}}'>{{item.name}}</view>
</view>
</view>
<!-- list -->
<view class='list' wx:if="{{current == 1}}">
<view class='list-item'
wx:for="{{list}}"
wx:for-index="idx"
wx:key="listItem"
data-item="{{item}}"
wx:for-item="item">
<view class='status-bar'>
<view class='status'>
已完成:<text>133</text>
</view>
<view class='percent'>133%</view>
</view>
<view class='task-time'>
<image src='/assets/imgs/shoppingGuide/kpi_task_time.png' mode='widthFix'></image>
<text>9月1日～10月1日</text>
</view>
<view class='task-info'>
<view class='lf'>
<image src='/assets/imgs/shoppingGuide/kpi_task_name.png' mode='widthFix'></image>
<text>新品上市任务</text>
</view>
<view class='rg'> 目标：100000 </view>
</view>
</view>
</view>
<!-- 招募任务 -->
<view class='list' wx:if="{{current == 2}}">
<view class='list-item'
wx:for="{{list}}"
wx:for-index="idx"
wx:key="listItem"
data-item="{{item}}"
wx:for-item="item">
<view class='status-bar'>
<view class='status'>
已完成:<text>133</text>
</view>
<view class='percent'>133%</view>
</view>
<view class='task-time'>
<image src='/assets/imgs/shoppingGuide/kpi_task_time.png' mode='widthFix'></image>
<text>9月1日～10月1日</text>
</view>
<view class='task-info'>
<view class='lf'>
<image src='/assets/imgs/shoppingGuide/kpi_task_name.png' mode='widthFix'></image>
<text>普通会员招募</text>
</view>
<view class='rg'> 目标：100 </view>
</view>
</view>
</view>
</view>
<!-- tabbar -->
<tab-bar index="{{1}}"></tab-bar>
\ No newline at end of file
src/shoppingGuid/page/pages/kpi/kpi.wxss 0 → 100644
/* shoppingGuid/page/pages/kpi/kpi.wxss */
page{
background: #ffffff;
padding-bottom: 106rpx;
padding-top: 82rpx;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* *,*::after,*::before{
box-sizing: border-box;
} */
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.main-container{
width: 100%;
height: auto;
}
.header-tab{
width: 100%;
height: 80rpx;
background: -webkit-linear-gradient(left,rgb(0,145,255),rgba(0,145,255,0.8),rgba(0,145,255,0.3));
display: flex;
position: fixed;
top: 0;
z-index: 2;
left: 0;
}
.header-tab .header-tab-item{
flex: 1;
width: auto;
/* min-width: 25%;
max-width: 25%; */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 28rpx;
}
.header-tab .header-tab-item .item-text{
height: 50rpx;
width: auto;
padding: 0 20rpx;
display: flex;
align-items: center;
}
.header-tab .header-tab-item .item-text.active{
background: #ffffff;
color: rgb(0,145,255);
border-radius: 25rpx;
}
.list{
width: 100%;
padding: 30rpx;
}
.list .list-item{
width: 100%;
height: auto;
padding: 20rpx;
box-shadow: 0 0 6rpx 4rpx rgba(0,0,0,0.1);
margin-bottom: 30rpx;
position: relative;
border-radius: 10rpx;
}
.list .list-item:active{
background: #f2f2f2;
}
.list .list-item .status-bar{
position: absolute;
width: 50%;
height: 60rpx;
background-color: rgba(0, 145, 255, 0.1);
right: 0;
top: 0;
border-top-right-radius: 10rpx;
border-bottom-left-radius: 30rpx;
display: flex;
font-size: 24rpx;
color: #0091FF;
}
.list .list-item .status-bar .percent{
flex: 0;
min-width: 120rpx;
max-width: 120rpx;
height: 100%;
background: #0091FF;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-top-right-radius: 10rpx;
}
.list .list-item .status-bar .status{
flex: 1;
padding-left: 20rpx;
display: flex;
align-items: center;
font-size: 24rpx;
}
.task-time{
display: flex;
color: #999999;
align-items: center;
font-size: 24rpx;
margin-top: 16rpx;
}
.task-time image{
width: 28rpx;
margin-right: 10rpx;
}
.task-info{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
font-size: 24rpx;
color: #333333;
}
.task-info .lf{
display: flex;
align-items: center;
}
.task-info .lf image{
width: 28rpx;
margin-right: 10rpx;
}
.task-info .rg{
display: flex;
justify-content: flex-end;
}
\ No newline at end of file
src/shoppingGuid/page/pages/welfare/welfare.js 0 → 100644
// shoppingGuid/page/pages/welfare/welfare.js
const wxService = require('../../../../utils/wxService')
wxService.page({
/**
* 页面的初始数据
*/
data: {
navBar : [
{ name: '导购学院', type: 1, isActive: true },
{ name: '推荐商品', type: 2, isActive: false },
{ name: '优惠券福利', type: 3, isActive: false},
],
current : 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
//点击事件
//分类点击
onTopBarTap(e) {
let index = e.currentTarget.dataset.index,
item = e.currentTarget.dataset.item;
this.data.navBar.forEach(nav => {
nav.isActive = false;
});
this.data.navBar[index].isActive = true;
this.data.current = this.data.navBar[index].type;
this.setData({
navBar: this.data.navBar,
current: this.data.current
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/shoppingGuid/page/pages/welfare/welfare.json 0 → 100644
{
"navigationBarTitleText": "福利",
"usingComponents": {
"tab-bar": "../../../component/tabBar/tabBar"
}
}
\ No newline at end of file
src/shoppingGuid/page/pages/welfare/welfare.wxml 0 → 100644
<!--shoppingGuid/page/pages/welfare/welfare.wxml-->
<!-- 福利界面 -->
<view class='main-container'>
<view class='top-container'>
<view class='top-item {{item.isActive ? "active" : ""}}'
wx:for="{{navBar}}"
wx:key="nav"
bindtap='onTopBarTap'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-index="idx"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 导购 -->
<view class='guid' wx:if="{{current == 1}}">
<view class='guid-item'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/walfare_defalut_cover.jpg' mode='widthFix'></image>
<view class='guid-item-title'>
客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！
</view>
</view>
<view class='guid-item'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/walfare_defalut_cover.jpg' mode='widthFix'></image>
<view class='guid-item-title'>
客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！
</view>
</view>
<view class='guid-item'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/walfare_defalut_cover.jpg' mode='widthFix'></image>
<view class='guid-item-title'>
客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！
</view>
</view>
</view>
<!-- 推荐商品 -->
<view class='recommand-product' wx:if="{{current == 2}}">
<view class='product-item'>
<view class='img'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/demo_product_img.jpg' mode='aspectFit'></image>
</view>
<view class='product-info'>
<view class='pro-main-title'>商品主标题</view>
<view class='pro-second-title'>商品副标题，这个是商品的副标题，只显示一行</view>
<view class='price-btn'>
<view class='price'>
<view class='normal theme-text-color'>
￥<text >998</text>
</view>
<view class='plus'>
￥<text>918</text>
<image src='/assets/imgs/shoppingGuide/plus.png' mode='widthFix'></image>
</view>
</view>
<view class='rg-btn'>
<button class='theme-color'>立即推荐</button>
</view>
</view>
</view>
</view>
<view class='product-item'>
<view class='img'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/demo_product_img.jpg' mode='aspectFit'></image>
</view>
<view class='product-info'>
<view class='pro-main-title'>商品主标题</view>
<view class='pro-second-title'>商品副标题，这个是商品的副标题，只显示一行</view>
<view class='price-btn'>
<view class='price'>
<view class='normal theme-text-color'>
￥<text >998</text>
</view>
<view class='plus'>
￥<text>918</text>
<image src='/assets/imgs/shoppingGuide/plus.png' mode='widthFix'></image>
</view>
</view>
<view class='rg-btn'>
<button class='theme-color'>立即推荐</button>
</view>
</view>
</view>
</view>
<view class='product-item'>
<view class='img'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/demo_product_img.jpg' mode='aspectFit'></image>
</view>
<view class='product-info'>
<view class='pro-main-title'>商品主标题</view>
<view class='pro-second-title'>商品副标题，这个是商品的副标题，只显示一行</view>
<view class='price-btn'>
<view class='price'>
<view class='normal theme-text-color'>
￥<text >998</text>
</view>
<view class='plus'>
￥<text>918</text>
<image src='/assets/imgs/shoppingGuide/plus.png' mode='widthFix'></image>
</view>
</view>
<view class='rg-btn'>
<button class='theme-color'>立即推荐</button>
</view>
</view>
</view>
</view>
<!-- 没有你想要的,去商城看看 -->
<view class='go-mall theme-text-color'>没有你想要的？去商城看看>>></view>
</view>
<!-- 优惠券福利 -->
<view class='coupons' wx:if="{{current == 3}}">
<view class='coupon-item' style='background-image:url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png)'>
<view class='coupon-item-lf'>
<view class='coupon-price'>
￥ <text>5</text>
</view>
<view>抵用券</view>
</view>
<view class='coupon-item-rg'>
<view class='qrcode'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/walare_qrcode.png' mode='aspectFit'></image>
</view>
<view class='coupon-title'>满10减5抵用券</view>
<view class='op'>
<view class='text-btn'>
<text class='theme-text-color'>查看详情</text>
</view>
<button class='info-btn'>定向发送</button>
</view>
</view>
</view>
<view class='coupon-item' style='background-image:url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png)'>
<view class='coupon-item-lf'>
<view class='coupon-price'>
￥ <text>5</text>
</view>
<view>抵用券</view>
</view>
<view class='coupon-item-rg'>
<view class='qrcode'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/walare_qrcode.png' mode='aspectFit'></image>
</view>
<view class='coupon-title'>满10减5抵用券</view>
<view class='op'>
<view class='text-btn'>
<text class='theme-text-color'>查看详情</text>
</view>
<button class='info-btn'>定向发送</button>
</view>
</view>
</view>
<view class='coupon-item' style='background-image:url(https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png)'>
<view class='coupon-item-lf'>
<view class='coupon-price'>
￥ <text>5</text>
</view>
<view>抵用券</view>
</view>
<view class='coupon-item-rg'>
<view class='qrcode'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/walare_qrcode.png' mode='aspectFit'></image>
</view>
<view class='coupon-title'>满10减5抵用券</view>
<view class='op'>
<view class='text-btn'>
<text class='theme-text-color'>查看详情</text>
</view>
<button class='info-btn'>定向发送</button>
</view>
</view>
</view>
</view>
</view>
<!-- tabbar -->
<tab-bar index="{{2}}"></tab-bar>
\ No newline at end of file
src/shoppingGuid/page/pages/welfare/welfare.wxss 0 → 100644
/* shoppingGuid/page/pages/welfare/welfare.wxss */
page{
background: #f2f2f2;
padding-bottom: 106rpx;
padding-top: 92rpx;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
view{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.main-container{
width: 100%;
height: auto;
}
.top-container{
position: fixed;
z-index: 2;
width: 100%;
height: 90rpx;
top: 0;
left: 0;
background: #ffffff;
display: flex;
}
.top-container .top-item{
flex: 0;
min-width: 33.3%;
max-width: 33.3%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
.top-container .top-item.active{
color: #0091FF;
}
/* 导购学院 */
.guid{
padding: 30rpx;
width: 100%;
}
.guid .guid-item{
background: #ffffff;
border-radius: 16rpx;
padding-bottom: 10rpx;
margin-bottom: 20rpx;
}
.guid .guid-item image{
display: block;
width: 100%;
}
.guid .guid-item .guid-item-title{
padding: 20rpx;
color: #333333;
font-size: 24rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
max-height:100rpx;
}
/* 推荐商品 */
.recommand-product{
padding: 30rpx;
width: 100%;
}
.recommand-product .product-item{
width: 100%;
height: 220rpx;
background: #ffffff;
margin-bottom: 20rpx;
border-radius: 10rpx;
display: flex;
box-shadow: 2rpx 2rpx 6rpx 4rpx rgba(0,0,0,0.1);
}
.recommand-product .product-item .img{
flex: 0;
min-width: 220rpx;
max-width: 220rpx;
height: 100%;
}
.recommand-product .product-item .img image{
width: 100%;
height: 100%;
display: block;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
.recommand-product .product-item .product-info{
flex: 1;
height: 100%;
padding: 20rpx;
}
.recommand-product .product-item .product-info .pro-main-title{
font-size: 28rpx;
color: #333333;
font-weight: bold;
margin-bottom: 10rpx;
}
.pro-second-title{
font-size: 24rpx;
color: #666666;
margin-bottom: 10rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.price{
flex: 1;
}
.price-btn{
display: flex;
align-items: center;
width: 100%;
}
.price-btn .rg-btn{
flex: 0;
min-width: 160rpx;
max-width: 160rpx;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.price-btn .rg-btn button{
font-size: 24rpx;
height: 50rpx;
color: #ffffff;
display: flex;
align-items: center;
}
.price .normal{
font-size: 32rpx;
font-weight: bold;
}
.price .plus{
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.price .plus image{
width: 70rpx;
margin-left: 10rpx;
}
/* 优惠券 */
.coupons{
padding: 30rpx;
width: 100%;
}
.coupons .coupon-item{
width: 100%;
height: 180rpx;
/* background: #ffffff; */
display: flex;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin-bottom: 10rpx;
}
.coupons .coupon-item .coupon-item-lf{
flex: 0;
min-width: 180rpx;
max-width: 180rpx;
height: 180rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #0091FF ;
font-size: 24rpx;
justify-content: center;
}
.coupon-price{
margin-bottom: 6rpx;
}
.coupon-price text{
font-size: 40rpx;
font-weight: bold;
}
.coupons .coupon-item .coupon-item-rg{
flex: 1;
padding: 30rpx;
position: relative;
}
.coupons .coupon-item .coupon-item-rg .qrcode{
position: absolute;
right: 30rpx;
top: 30rpx;
width: 40rpx;
height: 40rpx;
}
.coupons .coupon-item .coupon-item-rg .qrcode image{
width: 100%;
height: 100%;
display: block;
}
.coupons .coupon-item .coupon-item-rg .coupon-title{
font-size: 28rpx;
color: #333333;
font-weight: bold;
margin-bottom: 15rpx;
margin-top: 15rpx;
}
.coupons .coupon-item .coupon-item-rg .op{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.coupons .coupon-item .coupon-item-rg .op .text-btn{
flex: 1;
font-size: 24rpx;
}
.coupons .coupon-item .coupon-item-rg .op .info-btn{
width: 160rpx;
height: 50rpx;
background: #0091FF ;
color: #ffffff;
display: flex;
align-items: center;
font-size: 24rpx;
}
/* 没有你想要的 */
.go-mall{
width: 100%;
height: auto;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
\ No newline at end of file
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