Skip to content

7
7-Eleven
Commit 1425ec2b by 谢中龙
Options

我的会员

parent 5b116aaf
Showing with 359 additions and 211 deletions
src/app.wxss
......@@ -21,6 +21,16 @@
color: #cb3c3c;
}
.empty{
width: 100%;
height: 200rpx;
display: flex;
color: #999999;
justify-content: center;
align-items: center;
font-size: 24rpx;
}
/* 按钮样式 */
.btn {
width: 100%;
......
src/shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo.js
// shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo.js
Page({
const wxService = require('../../../../utils/wxService')
wxService.page({
/**
* 页面的初始数据
*/
data: {
info : {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
let id = options.id;
this.getCollegeInfo(id);
},
//获取导购学院详情
getCollegeInfo(id){
wxService.post(`/merchant/guideCollege/byIdQuery?id=${id}`).then(res => {
let data = res.data.data;
this.setData({
info : data,
});
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo.json
{
"navigationBarTitleText": "导购学院详情",
"usingComponents": {}
"navigationBarTitleText": "导购学院内容详情",
"usingComponents": {
"x-html": "/component/html2wxml/wxHtml"
}
}
\ No newline at end of file
src/shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo.wxml
<!--shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo.wxml-->
<view class='top-image'>
<!-- top image -->
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/daogou.jpg' mode='widthFix'></image>
<image src='{{info.titleUrl}}' mode='widthFix'></image>
</view>
<!-- 内容标题 -->
<view class='content-title'>商品陈列，还能这么玩？！</view>
<view class='content-title'>{{info.title}}</view>
<!-- 富文本内容展示区 -->
<view class='full-text'>
正文正文
从小丘向西走一百二十多步，隔着竹林，可以听到流水的声音，好像人身上佩带的珮环相互碰击发出的声音，心里十分高兴。砍倒竹子，开辟出一条道路（走过去），沿路走下去看见一个小潭，潭水格外清凉。小潭以整块石头为底，靠近岸边的地方，石底有些部分翻卷出来，露出水面，成为水中的高地，成为水中的小岛，成为水中的不平岩石，成为水中的悬崖。青翠的树木，翠绿的藤蔓，遮掩缠绕，摇动下垂，参差不齐，随风飘拂。潭中的鱼大约有一百来条，都好像在空中游动，什么依靠都没有，阳光直照（到水底），（鱼的）影子映在石头上。呆呆地（停在那里）一动不动，忽然间(又)向远处游去了，来来往往，轻快敏捷，好像和游玩的人互相取乐。向小石潭的西南方望去，看到溪水像北斗星那样曲折，水流像蛇那样蜿蜒前行，一段明的看得见，一段暗的看不见。
两岸的地势像狗的牙齿那样相互交错，不能知道溪水的源头。我坐在潭边，四下里竹林和树木包围着，寂静寥落，空无一人。使人感到心情凄凉，寒气入骨，幽静深远，弥漫着忧伤的气息。因为这里的环境太凄清，不可长久停留，于是记下了这里的情景就离开了。
一同去游览的人有：吴武陵，龚古，我的弟弟宗玄。跟着同去的有姓崔的两个年轻人：一个名叫恕己，一个名叫奉壹。
<x-html html="{{info.article}}"/>
</view>
src/shoppingGuid/page/pages/home/home.js
......@@ -94,6 +94,12 @@ wxService.page({
url: '/pages/userCenter/userCenter',
})
},
//跳转到会员
onTapToMember(){
wx.redirectTo({
url: '/shoppingGuid/page/pages/selectUsers/selectUsers',
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
......
src/shoppingGuid/page/pages/home/home.wxml
......@@ -12,7 +12,7 @@
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_go_mall.png' mode='aspectFit' />
<view class='icon-title'>前往商城</view>
</view>
<view class='icon-item'>
<view class='icon-item' bindtap='onTapToMember'>
<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/home_member.png' mode='aspectFit' />
<view class='icon-title'>会员</view>
</view>
......
src/shoppingGuid/page/pages/selectUsers/selectUsers.js
......@@ -6,17 +6,21 @@ wxService.page({
* 页面的初始数据
*/
data: {
navBar: [{ name: '自动标签', type: 1, isActive: true }, { name: '手动标签', type: 2, isActive: false }],
current: 1,
isOpen : false,
groups : [],
tags : []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 一进来先获取一下自动标签的数据
this.getMemberTagGroups();
},
/**
* 生命周期函数--监听页面显示
*/
......@@ -24,13 +28,6 @@ wxService.page({
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
//点击事件
onTapExpandOrInpand(e){
this.setData({
......@@ -44,6 +41,36 @@ wxService.page({
url: '/shoppingGuid/page/pages/userList/userList?id=' + id,
});
},
//tab 切换
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
});
},
//获取标签分组
getMemberTagGroups(){
wxService.post(`/marketing/memberTagGroup/findPage?pageSize=10000&pageNo=1&type=${this.data.current}`).then(res => {
console.log(res)
let groups = res.data.data.content ? res.data.data.content : [];
groups.forEach(item => {
item.isActive = false;
});
this.data.groups = groups;
this.setData({
groups: this.data.groups
});
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
......@@ -58,11 +85,4 @@ wxService.page({
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
});
\ No newline at end of file
src/shoppingGuid/page/pages/selectUsers/selectUsers.json
{
"navigationBarTitleText": "选择会员",
"navigationBarTitleText": "我的会员",
"usingComponents": {}
}
\ No newline at end of file
src/shoppingGuid/page/pages/selectUsers/selectUsers.wxml
......@@ -8,17 +8,27 @@
</view>
<!-- tags -->
<view class='tags-types'>
<view class='tag-items active'>自动标签</view>
<view class='tag-items'>手动标签</view>
<view class='tag-items'>临时标签</view>
<view class='tag-items {{item.isActive ? "active" : ""}}'
wx:for="{{navBar}}"
wx:key="topbar"
wx:for-index="idx"
bindtap='onTopBarTap'
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 标签s -->
<view class='tags'>
<view class='flex'>
<view class='lf'>
<view class='tag-item active'>消费行为</view>
<view class='tag-item'>访问行为</view>
<view class='tag-item'>核销行为</view>
<view class='tag-item {{item.isActive ? "active" : ""}}'
wx:for="{{groups}}"
wx:key="groups"
wx:for-index="idx"
data-index="{{idx}}"
data-item="{{item}}"
wx:if="{{idx < 3}}"
wx:for-item="item">{{item.name}}</view>
</view>
<view class='rg' bindtap='onTapExpandOrInpand'>展开></view>
</view>
......@@ -27,11 +37,13 @@
<!-- -->
<!-- 浮层 -->
<view class='tag-hover {{isOpen ? "show" : ""}}'>
<view class='hover-items avtive'>最近7天生日会员</view>
<view class='hover-items'>常联系</view>
<view class='hover-items'>新会员</view>
<view class='hover-items'>高价值</view>
<view class='hover-items'>会员更中意别家</view>
<view class='hover-items {{item.isActive ? "active" : ""}}'
wx:for="{{groups}}"
wx:key="allGroups"
wx:for-index="idx"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-item="item">{{item.name}}</view>
</view>
<!-- 具体的数据 -->
<view class='list'>
......
src/shoppingGuid/page/pages/userList/userList.json
{
"navigationBarTitleText": "会员列表",
"navigationBarTitleText": "标签会员列表",
"usingComponents": {}
}
\ No newline at end of file
src/shoppingGuid/page/pages/welfare/welfare.js
......@@ -11,14 +11,35 @@ wxService.page({
{ name: '推荐商品', type: 2, isActive: false },
{ name: '优惠券福利', type: 3, isActive: false},
],
current : 1
current : 1,
guidCollege : {
pageSize : 10,
pageNum : 1,
totalPage : 0,
list : [],
currentPage : 1,
noData : false,
},
//推荐商品
recommandProducts : [],
recommandProductsNoData: false,
//优惠券
coupons : {
pageSize: 10,
pageNum: 1,
totalPage: 0,
list: [],
currentPage: 1,
noData : false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//首次进来先加载导购学院的列表
this.getGuidCollegeList();
},
/**
......@@ -39,6 +60,22 @@ wxService.page({
this.data.navBar[index].isActive = true;
this.data.current = this.data.navBar[index].type;
// tab 切换时 如果发现对应的列表没有加载过，则去加载
if (this.data.current == 1){
if (this.data.guidCollege.list.length == 0){
this.getGuidCollegeList();
}
}
else if (this.data.current == 2){
if (this.data.recommandProducts.length == 0) {
this.getRecommandProductList();
}
}
else if(this.data.current == 3){
if(this.data.coupons.list.length == 0){
this.getCouponActivityList();
}
}
this.setData({
navBar: this.data.navBar,
......@@ -47,39 +84,160 @@ wxService.page({
},
//跳转导购学院详情
onTapToGuidCollegeInfo(e){
let id = 22;
let item = e.currentTarget.dataset.item;
let id = item.id;
wx.navigateTo({
url: '/shoppingGuid/page/pages/guidCollegeInfo/guidCollegeInfo?id=' + id,
});
},
//定向发送优惠券
onTapToSendConpon(e){
let id = 22;
wx.navigateTo({
url: '/shoppingGuid/page/pages/selectUsers/selectUsers?id=' + id,
});
let item = e.currentTarget.dataset.item;
let id = item.id;
// wx.navigateTo({
// url: '/shoppingGuid/page/pages/selectUsers/selectUsers?id=' + id + '&type=coupon',
// });
},
//立即推荐商品给用户
onTapToRecommandProduct(e){
let id = 22;
wx.navigateTo({
url: '/shoppingGuid/page/pages/selectUsers/selectUsers?id=' + id,
});
let item = e.currentTarget.dataset.item;
let id = item.id;
// wx.navigateTo({
// url: '/shoppingGuid/page/pages/selectUsers/selectUsers?id=' + id + '&type=product',
// });
},
//去商城
onTapToMall(){
wx.redirectTo({
url: '/pages/userCenter/userCenter',
})
},
//获取导购学院列表
getGuidCollegeList(){
wx.showLoading({
title: '加载中',
mask: true
})
wxService.post(
`/merchant/guideCollege/getPageInfoList?pageSize=${this.data.guidCollege.pageSize}&pageNum=${this.data.guidCollege.pageNum}`,
{
title : ''
}
).then(res => {
if (res) {
wx.hideLoading();
const { result, data } = res.data
if (result == 0) {
this.data.guidCollege.list = this.data.guidCollege.list.concat(data.content);
this.data.guidCollege.totalPage = data.totalPages;
if (this.data.guidCollege.list.length == 0) {
this.data.guidCollege.noData = true;
}
this.setData({
guidCollege: this.data.guidCollege
});
}
}
})
},
//获取推荐商品列表
getRecommandProductList(){
wx.showLoading({
title: '加载中',
mask: true
})
wxService.post(`/merchant/share/productBonus/buyer/findPage?pageNo=1&pageSize=20`, {}).then(res => {
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
let list = data.content;
list.forEach(item => {
item.productImgUrl = item.productImgUrl ?
item.productImgUrl : 'https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/1571636466%281%29.jpg';
});
if(list.length == 0){
this.data.recommandProductsNoData = true;
}
this.setData({
recommandProducts: list,
recommandProductsNoData: this.data.recommandProductsNoData
})
}
}
})
},
//获取优惠券券活动
getCouponActivityList(){
wx.showLoading({
title: '加载中',
mask: true
});
let pageNum = this.data.coupons.pageNum,
pageSize = this.data.coupons.pageSize;
wxService.post(`/marketing/shoppingguide/coupon/page4c?pageSize=${pageSize}&pageNo=${pageNum}`,
{couponName: ''}
).then(res => {
if (res) {
//https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png 正常
//https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg_cantUse.png //不可使用
const { result, data } = res.data
wx.hideLoading();
if (result == 0) {
let list = data.content ? data.content : [];
list.forEach(item => {
item.canUse = (item.couponSetting.status == 0 || item.couponSetting.status == 2) ? false : true;
item.imageBg = 'https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/coupon_bg.png';
item.typeText = item.couponSetting.typeDesc;
item.price = parseFloat(item.couponSetting.faceAmount / 100).toFixed(2);
item.couponType = item.couponSetting.type;
});
this.data.coupons.list = this.data.coupons.list.concat(list);
if(this.data.coupons.list.length == 0){
this.data.coupons.noData = true;
}
this.setData({
coupons: this.data.coupons
});
}
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('pull done')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(this.data.current == 1){ // 导购学院
if (this.data.guidCollege.totalPage > this.data.guidCollege.pageNum){
this.data.guidCollege.pageNum = this.data.guidCollege.pageNum + 1;
this.getGuidCollegeList();
}
else{
// wx.showToast({
// title: '没有更多数据啦~',
// icon : 'none'
// });
}
}
else if (this.data.current == 2){ //推荐商品
}
else if (this.data.current == 3){ //优惠券福利
}
},
/**
......
src/shoppingGuid/page/pages/welfare/welfare.wxml
......@@ -14,150 +14,97 @@
<!-- 导购 -->
<view class='guid' wx:if="{{current == 1}}">
<view class='guid-item' bindtap='onTapToGuidCollegeInfo'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/walfare_defalut_cover.jpg' mode='widthFix'></image>
<view class='guid-item-title'>
客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！客户进店第一句话要怎么展开快看这里！
</view>
<view class='guid-item'
bindtap='onTapToGuidCollegeInfo'
wx:for="{{guidCollege.list}}"
wx:key="guidCollege"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-index="idx"
wx:for-item="item">
<image src="{{item.titleUrl}}" mode='widthFix'></image>
<view class='guid-item-title'>{{item.title}}</view>
</view>
<!-- 空时 -->
<view class='empty' wx:if="{{guidCollege.noData}}">暂无数据~</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='product-item'
wx:for="{{recommandProducts}}"
wx:key="recommandProducts"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-index="idx"
wx:for-item="item" >
<view class='img'>
<image src='https://xiedemo.oss-cn-shanghai.aliyuncs.com/demo_product_img.jpg' mode='aspectFit'></image>
<image src='{{item.productImgUrl}}' mode='aspectFit'></image>
</view>
<view class='product-info'>
<view class='pro-main-title'>商品主标题</view>
<view class='pro-second-title'>商品副标题，这个是商品的副标题，只显示一行</view>
<view class='pro-main-title'>{{item.productName}}</view>
<!-- <view class='pro-second-title'>商品副标题，这个是商品的副标题，只显示一行</view> -->
<view class='price-btn'>
<view class='price'>
<view class='normal theme-text-color'>
￥<text >998</text>
<image src='/assets/imgs/7_1_0/integral-icon.png' mode='aspectFit'></image>
<text >{{item.point}}</text>
</view>
<view class='plus'>
<!-- <view class='plus'>
￥<text>918</text>
<image src='/assets/imgs/shoppingGuide/plus.png' mode='widthFix'></image>
</view>
</view> -->
</view>
<view class='rg-btn'>
<button class='theme-color'>立即推荐</button>
<button class='theme-color' data-item="{{item}}" bindtap='onTapToRecommandProduct'>立即推荐</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 class='coupon'>
<image src='/assets/imgs/7_1_0/rmb.png' mode='aspectFit'></image>
<text
wx:for="{{item.shareBonuses}}"
wx:key="shareBonuses"
wx:for-index="idx"
wx:for-item="coupon">{{coupon.couponSettingTitle}}</text>
</view>
</view>
</view>
<!-- 空时 -->
<view class='empty' wx:if="{{recommandProductsNoData}}">暂无数据~</view>
<!-- 没有你想要的,去商城看看 -->
<view class='go-mall theme-text-color'>没有你想要的？去商城看看>>></view>
<view class='go-mall theme-text-color' bindtap='onTapToMall'>没有你想要的？去商城看看>>></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' bindtap='onTapToSendConpon'>定向发送</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' style='background-image:url({{item.imageBg}})'
wx:for="{{coupons.list}}"
wx:key="coupons"
data-index="{{idx}}"
data-item="{{item}}"
wx:for-index="idx"
wx:for-item="item">
<view class='coupon-item-lf'>
<view class='coupon-price'>
￥ <text>5</text>
{{item.couponType != 2 ? '￥' : ''}} <text>{{item.price}}</text>
</view>
<view>抵用券</view>
<view>{{item.typeText}}</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='coupon-title'>{{item.title}}</view>
<view class='op'>
<view class='text-btn'>
<text class='theme-text-color'>查看详情</text>
<text class='theme-text-color'>数量：{{item.stock}}</text>
</view>
<button class='info-btn'>定向发送</button>
<button class='info-btn' data-item="{{item}}" bindtap='onTapToSendConpon'>定向发送</button>
</view>
</view>
</view>
<!-- 空时 -->
<view class='empty' wx:if="{{coupons.noData}}">暂无数据~</view>
</view>
</view>
<!-- tabbar -->
......
src/shoppingGuid/page/pages/welfare/welfare.wxss
......@@ -165,6 +165,38 @@ view{
.price .normal{
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
}
.price .normal image{
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.coupon{
font-size: 24rpx;
display: flex;
align-items: center;
margin-top: 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;
}
.coupon image{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.coupon text{
margin-right: 10rpx;
}
.price .plus{
......@@ -216,7 +248,7 @@ view{
}
.coupon-price text{
font-size: 40rpx;
font-size: 38rpx;
font-weight: bold;
}
......
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