Skip to content

严立 / mini-shimao

Go to a project
Commit e61124d2 by wjw
Options

ww-营地和积分列表修改

parent be4586cf
Inline Side-by-side
Showing with 330 additions and 38 deletions
pages/campsite/home/home.js
......@@ -12,6 +12,18 @@ Page({
winSide: true,
sideHeight: 1250,
swiperImage: [
{
id: 0,
url: ''
},
{
id: 0,
url: ''
}
],
bannerImage: '',
detailImage: [],
detailImageUrl: [
App.globalData.appResourcesBase + 'campsite/campsite-1.png',
......@@ -88,4 +100,25 @@ Page({
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
// 跳转到购买年卡/月卡/次卡界面
onBuyCoupon: function (event) {
console.log(event)
let { type } = event.currentTarget.dataset
wx.navigateTo({
url: '/pages/pay/order-input/order-input?type=' + type
})
},
// 跳转到购买饮品界面
onBuySnacks() {
wx.navigateTo({
url: '/pages/commodity/menu-snacks/menu-snacks',
})
},
// 跳转到购买文创界面
onBuySnacks() {
wx.navigateTo({
url: '/pages/commodity/menu-art/menu-art',
})
}
})
\ No newline at end of file
pages/campsite/home/home.wxml
<view class="container">
<view class="appointment">
<!-- <view class="appointment">
<l-button l-class="appointment-button" bind:lintap="onServic">电话预约</l-button>
</view>
</view> -->
<view class="appointment-side col con-b align-c" hidden="{{winSide}}">
<button class="appointment-side-top" bindtap="onBackTop">
<image src="{{imageBase + 'top.png'}}"></image>
</button>
<button class="appointment-side-phone" bind:tap="onServic">
<!-- <button class="appointment-side-phone" bind:tap="onServic">
<image src="{{imageBase + 'phone.png'}}"></image>
</button>
</button> -->
</view>
<!-- 头部背景图 -->
<image class="banner" src="bannerImage"></image>
<!-- 分享按钮 -->
<view class="share col con-c align-c">
<image class="icon-share" src="/image/icon/share-3.png"></image>
</view>
<!-- 位置按钮 -->
<view class="location col con-c align-c">
<image class="icon-location" src="/image/icon/location-3.png"></image>
</view>
<!-- 入园购票 -->
<view class="buy-coupon">
<view class="buy-coupon-title row align-c">
<image></image>
<image></image>
</view>
<view class="buy-coupon-type row con-b">
<image bindtap="onBuyCoupon" data-type="2"></image>
<image bindtap="onBuyCoupon" data-type="1"></image>
<image bindtap="onBuyCoupon" data-type="1"></image>
</view>
</view>
<!-- 饮品预订 文创周边-->
<view class="buy-other row con-b">
<!-- 饮品预订 -->
<view class="buy-snacks row" bindtap="onBuySnacks">
<view class="buy-left col con-c">
<image></image>
</view>
<view class="buy-right col con-c">
<image></image>
<image class="snacks-img"></image>
</view>
</view>
<!-- 文创周边 -->
<view class="buy-art row" bindtap="onBuyArt">
<view class="buy-left col con-c">
<image></image>
</view>
<view class="buy-right col con-c">
<image></image>
<image class="art-img"></image>
</view>
</view>
</view>
<!-- 滚动图片 -->
<!-- 单张图片 -->
<view class="swiper" wx:if="{{swiperImage.length === 1}}">
</view>
<!-- 多张图片 -->
<swiper class="swiper" indicator-dots indicator-color="#F6DADA" indicator-active-color="#E57C99" autoplay circular wx:else>
<block>
<swiper-item>
<image mode="widthFix" src=""></image>
</swiper-item>
</block>
</swiper>
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block>
</view>
\ No newline at end of file
pages/campsite/home/home.wxss
......@@ -50,3 +50,128 @@
.container > image {
width: 750rpx;
}
.banner {
width: 750rpx;
height: 1676rpx;
background-color: #ccc;
}
.share {
position: absolute;
top: 710rpx;
right: 136rpx;
width: 64rpx;
height: 64rpx;
background: #F28FA2;
box-shadow: 8rpx 8rpx 20rpx 0rpx rgba(242,143,162,0.3);
border-radius: 50%;
}
.location {
position: absolute;
top: 710rpx;
right: 40rpx;
width: 64rpx;
height: 64rpx;
background: #F28FA2;
box-shadow: 8rpx 8rpx 20rpx 0rpx rgba(242,143,162,0.3);
border-radius: 50%;
}
.icon-share, .icon-location {
width: 40rpx;
height: 40rpx;
}
.buy-coupon {
position: absolute;
top: 804rpx;
width: 670rpx;
height: 312rpx;
padding: 40rpx 32rpx;
background: rgba(255, 255, 255, 0.65);
box-shadow: 8rpx 10rpx 52rpx 0rpx rgba(238,211,153,0.3);
border-radius: 4rpx;
}
.buy-coupon-title image:nth-child(1) {
width: 120rpx;
height: 34rpx;
background-color: red;
}
.buy-coupon-title image:nth-child(2) {
width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
background-color: red;
}
.buy-coupon-type {
margin-top: 32rpx;
}
.buy-coupon-type image {
width: 170rpx;
height: 166rpx;
background-color: aqua;
}
.buy-other {
position: absolute;
top: 1140rpx;
width: 670rpx;
}
.buy-snacks, .buy-art {
width: 322rpx;
height: 154rpx;
background: rgba(255, 255, 255, 0.65);
box-shadow: 8rpx 8rpx 52rpx 0rpx rgba(238,211,153,0.3);
border-radius: 4rpx;
}
.buy-left, .buy-right {
position: relative;
margin-left: 32rpx;
}
.buy-left image{
width: 120rpx;
height: 34rpx;
}
.buy-right image:first-child {
width: 132rpx;
height: 136rpx;
}
.snacks-img {
position: absolute;
top: 28rpx;
left: 42rpx;
width: 50rpx;
height: 76rpx;
}
.art-img {
position: absolute;
top: 30rpx;
left: 12rpx;
width: 86rpx;
height: 70rpx;
}
.swiper {
width: 750rpx;
height: 1160rpx;
background-color: lightblue;
}
.wx-swiper-dots{
position:relative;
left: 0;
right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 64rpx;
}
\ No newline at end of file
pages/mine/accumulate/accumulate.js
let App = getApp()
Page({
data: {
showMenu: false
showMenu: false,
menu: '全 部',
menuList: [
{id: 0, name: '全 部'},
{id: 1, name: '获 取'},
{id: 2, name: '已使用'}
],
pageNo: '1',
pageSize: '-1',
type: '', // "" 全部 0 获取 1消费(0 发放 1 兑换)
accumulateList: [],
selectedList: []
},
onLoad: function (options) {
this.getAccumulate()
},
// 获取积分列表
getAccumulate: function () {
App.wxRequest({
url: '/api/v1/smUser/getIntegralDetails',
data: {
'pageNo': this.data.pageNo,
'pageSize': this.data.pageSize,
type: ''
},
success: (response) => {
let accumulateList = response.data
let selectedList = accumulateList
this.setData({
accumulateList,
selectedList
})
}
})
},
// 显示菜单
onShowMenu: function () {
this.setData({
showMenu: true
})
},
// 隐藏菜单
onHideMenu: function () {
this.setData({
showMenu: false
})
},
/**
* 查询今日放映
* @function
* @param type 0全部 1获取 2已使用
* @returns
*/
onTabMenu: function (event) {
let { index } = event.currentTarget.dataset
let menu = this.data.menuList[index].name
let selectedList = []
if (index === 0) {
selectedList = this.data.accumulateList
} else {
selectedList = selectedList.filter(v => v.type === index-1)
}
this.setData({
menu,
selectedList
})
this.onHideMenu()
}
})
\ No newline at end of file
pages/mine/accumulate/accumulate.wxml
<navigation class="navigation" titleText="我的积分" color="#FFFFFF" backIcon="/image/back-w.png"></navigation>
<view class="container con-s">
<view class="container con-s" bindtap="onHideMenu">
<!-- 积分背景图 -->
<image class="banner" src=""></image>
......@@ -12,52 +12,38 @@
<text>积分用于兑换积分商品，积分商城即将上线，敬请期待</text>
</view>
<view class="banner-menu row align-c">
<text>全部</text>
<view class="banner-menu row con-b align-c" catchtap="onShowMenu">
<text>{{menu}}</text>
<image src="/image/icon/arrow-b-2.png"></image>
<view class="banner-menu-down col" wx:if="{{showMenu}}">
<text>全部</text>
<text>获取</text>
<text>已使用</text>
<block wx:for="{{menuList}}" wx:key="id">
<text class="{{menu === item.name ? 'selected' : ''}}" catchtap="onTabMenu" data-index="{{index}}">{{item.name}}</text>
</block>
</view>
</view>
<!-- 积分列表 -->
<!-- 无积分 -->
<!-- <view class="accumulate-empty" wx:if="{{true}}">
<view class="accumulate-empty" wx:if="{{accumulateList.length === 0}}">
<text>暂无积分明细</text>
</view> -->
</view>
<!-- 有积分 -->
<view class="accumulate-wrapper col align-c">
<block>
<view class="accumulate row con-b align-c">
<view class="accumulate-left col con-b">
<view class="accumulate-type">
<text>消费</text>
</view>
<view class="accumulate-time">
<text>2020-08-26 11:47</text>
</view>
</view>
<view class="accumulate-right {{item.type === '0' ? 'accumulate-type-color' : ''}}">
<text wx:if="{{item.type === '0'}}">+</text>
<text wx:else>-</text>
<text>50</text>
</view>
</view>
<view class="accumulate-wrapper col align-c" wx:else>
<block wx:for="{{accumulateList}}" wx:key="index">
<view class="accumulate row con-b align-c">
<view class="accumulate-left col con-b">
<view class="accumulate-type">
<text>消费</text>
<text wx:if="item.type === '0'">获取</text>
<text wx:else>消费</text>
</view>
<view class="accumulate-time">
<text>2020-08-26 11:47</text>
<text>{{item.createDate}}</text>
</view>
</view>
<view class="accumulate-right {{item.type === '0' ? 'accumulate-type-color' : ''}}">
<text wx:if="{{item.type === '0'}}">+</text>
<text wx:else>-</text>
<text>50</text>
<text>{{item.integral}}</text>
</view>
</view>
</block>
......
pages/mine/accumulate/accumulate.wxss
page {
height: 100vh;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
}
.container {
position: relative;
height: 100vh;
}
.banner {
......@@ -31,10 +31,10 @@ page {
position: absolute;
top: 254rpx;
right: 40rpx;
width: 140rpx;
width: 166rpx;
height: 56rpx;
padding-left: 24rpx;
color: #000;
padding: 0 24rpx;
color: #15191F;
font-size: 26rpx;
background: rgba(255, 255, 255, 0.95);
border-radius: 4rpx;
......@@ -51,7 +51,7 @@ page {
z-index: 99999999;
left: 0;
top: 64rpx;
width: 140rpx;
width: 166rpx;
height: 180rpx;
background: rgba(255, 255, 255, 0.95);
box-shadow: 10px 4px 40px 0px rgba(181,164,164,0.3);
......@@ -67,6 +67,10 @@ page {
border-radius: 4rpx;
}
.selected {
color: #15191F !important;
}
.accumulate-tips {
width: 670rpx;
margin-top: 8rpx;
......
project.config.json
......@@ -194,6 +194,12 @@
"pathName": "pages/mine/home/home",
"query": "",
"scene": null
},
{
"id": -1,
"name": "pages/campsite/home/home",
"pathName": "pages/campsite/home/home",
"scene": null
}
]
}
......
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 sign in to comment