Skip to content

严立 / mini-shimao

Go to a project
Commit 175638ba by wjw
Options

ww--ui调整

parent 879a0a9d
Inline Side-by-side
Showing with 438 additions and 28 deletions
pages/campsite/home-mirror/home-mirror.js
...@@ -8,10 +8,14 @@ let logicData = { ...@@ -8,10 +8,14 @@ let logicData = {
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
appResourcesBase: App.globalData.appResourcesBase,
showPopup: false,
winSide: true, winSide: true,
sideHeight: 1250, sideHeight: 1250,
shareImage: App.globalData.appResourcesBase + 'share/share-1.png',
childActivity: [],
bannerImage: App.globalData.appResourcesBase + 'campsite/campsite-header.png',
bottomImage: App.globalData.appResourcesBase + 'campsite/bottom.png',
detailImage: [], detailImage: [],
detailImageUrl: [ detailImageUrl: [
App.globalData.appResourcesBase + 'campsite/campsite-1.png', App.globalData.appResourcesBase + 'campsite/campsite-1.png',
...@@ -26,7 +30,11 @@ Page({ ...@@ -26,7 +30,11 @@ Page({
onLoad: function (options) { onLoad: function (options) {
this.setSideHeight() this.setSideHeight()
},
onShow: function () {
this.setShopInfo(3, 1)
this.queryDetail() this.queryDetail()
this.queryActivity()
}, },
setSideHeight: function () { setSideHeight: function () {
...@@ -34,11 +42,61 @@ Page({ ...@@ -34,11 +42,61 @@ Page({
sideHeight: this.data.sideHeight * wx.getStorageSync('unitProportion') sideHeight: this.data.sideHeight * wx.getStorageSync('unitProportion')
}) })
}, },
// 缓存商店信息
setShopInfo: function (funcShopAppId, funcShopType) {
// 获取门店基本信息
let funcShopId = App.globalData.shopId
for (let i = 0, l = funcShopId.length; i < l; i++) {
if (funcShopAppId === funcShopId[i].appId) {
let funcShopInfo = {
'id': funcShopId[i].id,
'appId': funcShopId[i].appId,
'name': funcShopId[i].title[funcShopType],
'logo': funcShopId[i].logo,
'cover': funcShopId[i].cover,
'shopType': funcShopType,
'commodityLogo': funcShopId[i].commodityLogo
}
wx.setStorageSync('shopInfoBuffer', funcShopInfo)
break
}
}
},
// 获取后台信息
queryDetail: function () { queryDetail: function () {
let that = this
App.wxRequest({
url: '/api/v1/park/getList',
success: function(res) {
let funcData = res.list.filter(v => v.name === '儿童营地')
that.setData({
detailImageUrl: funcData[0].content
})
}
})
},
// 获取活动信息
queryActivity: function () {
let that = this
let shopInfo = wx.getStorageInfoSync('shopInfoBuffer')
App.wxRequest({
url: '/api/v1/activity/getList',
data: {
'listType': '1',
'pageSize': '5',
'pageNo': '1',
'tagId': '103',
'officeId': shopInfo.id
},
success: function(res) {
let funcData = res.data.list
console.log(funcData)
that.setData({
childActivity: funcData
})
}
})
}, },
onBackTop: function () { onBackTop: function () {
wx.pageScrollTo({ wx.pageScrollTo({
scrollTop: 0 scrollTop: 0
...@@ -88,4 +146,103 @@ Page({ ...@@ -88,4 +146,103 @@ Page({
clearTimeout(logicData.pageScrollTimer) clearTimeout(logicData.pageScrollTimer)
}, 40) }, 40)
}, },
/**
* 缓存用户信息
* @function
* @param {object} - event
* @returns
*/
setShopInfo: function (funcShopAppId, funcShopType) {
// 获取门店基本信息
let funcShopId = App.globalData.shopId
for (let i = 0, l = funcShopId.length; i < l; i++) {
if (funcShopAppId === funcShopId[i].appId) {
let funcShopInfo = {
'id': funcShopId[i].id,
'appId': funcShopId[i].appId,
'name': funcShopId[i].title[funcShopType],
'logo': funcShopId[i].logo,
'cover': funcShopId[i].cover,
'shopType': funcShopType,
'commodityLogo': funcShopId[i].commodityLogo
}
wx.setStorageSync('shopInfoBuffer', funcShopInfo)
break
}
}
},
// 跳转到购买年卡/月卡/次卡界面
onBuyMembership: function (event) {
// funcShopType 使用函数区分商品类型，所以每个函数里的数值是固定的
let funcShopType = 1
let funcShopAppId = event.currentTarget.dataset.id
this.setShopInfo(funcShopAppId, funcShopType)
wx.navigateTo({
url: '/pages/commodity/project-detail/project-detail'
})
},
// 跳转到购买饮品界面
onBuySnacks(event) {
// funcShopType 使用函数区分商品类型，所以每个函数里的数值是固定的
let funcShopType = 5
let funcShopAppId = event.currentTarget.dataset.id
this.setShopInfo(funcShopAppId, funcShopType)
wx.navigateTo({
url: '/pages/commodity/menu-food/menu-food',
})
},
// 跳转到购买文创界面
onBuyArt(event) {
// funcShopType 使用函数区分商品类型，所以每个函数里的数值是固定的
let funcShopType = 4
let funcShopAppId = event.currentTarget.dataset.id
this.setShopInfo(funcShopAppId, funcShopType)
wx.navigateTo({
url: '/pages/commodity/menu-food/menu-food',
})
},
// 跳转到活动详情
onActivityDetail: function (event) {
let id = event.currentTarget.dataset.id
wx.navigateTo({
url: '/pages/play/activity-detail/activity-detail?id=' + id,
})
},
// 点击分享图标
onShare: function () {
this.setData({
showPopup: true
})
},
// 点击取消
onCancel: function () {
this.setData({
showPopup: false
})
},
// 点击下载图片
onDownload: function () {
wx.showToast({
title: '已保存到相册',
icon: 'success'
})
this.setData({
showPopup: false
})
},
// 点击位置图标
onLocation: function () {
wx.navigateTo({
url: '/pages/home/guide/guide?id=' + 10
})
},
// 点击全部活动
onAllActivity: function () {
wx.navigateTo({
url: '/pages/play/activity/activity',
})
},
}) })
\ No newline at end of file
pages/campsite/home-mirror/home-mirror.wxml
<!-- 此页面是为了让其他页面进行跳转的镜像页面 --> <!-- 此页面是为了让其他页面进行跳转的镜像页面 -->
<!-- 如果直接跳转 tabbar 的营地页面会导致路由错乱问题 --> <!-- 如果直接跳转 tabbar 的营地页面会导致路由错乱问题 -->
<navigation class="navigation" titleText="儿童营地" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="儿童营地" backIcon="/image/back.png"></navigation>
<view class="container"> <view class="container">
<view class="appointment"> <!-- <view class="appointment">
<l-button l-class="appointment-button" bind:lintap="onServic">电话预约</l-button> <l-button l-class="appointment-button" bind:lintap="onServic">电话预约</l-button>
</view> </view> -->
<view class="appointment-side col con-b align-c" hidden="{{winSide}}"> <view class="appointment-side col con-b align-c" hidden="{{winSide}}">
<button class="appointment-side-top" bindtap="onBackTop"> <button class="appointment-side-top" bindtap="onBackTop">
<image src="{{imageBase + 'top.png'}}"></image> <image src="{{imageBase + 'top.png'}}"></image>
</button> </button>
<button class="appointment-side-phone" bind:tap="onServic"> <!-- <button class="appointment-side-phone" bind:tap="onServic">
<image src="{{imageBase + 'phone.png'}}"></image> <image src="{{imageBase + 'phone.png'}}"></image>
</button> </button> -->
</view>
<!-- 头部背景图 -->
<image class="banner" src="{{bannerImage}}"></image>
<!-- 分享按钮 -->
<view class="share col con-c align-c" bindtap="onShare">
<image class="icon-share" src="/image/icon/share-3.png"></image>
</view>
<!-- 分享弹出图片 -->
<l-popup show="{{showPopup}}" animation="{{false}}">
<view class="popupImage">
<image src="{{shareImage}}"></image>
</view>
<view class="row con-b">
<view class="cancel" bindtap="onCancel">
<text>取消</text>
</view>
<view class="download" bindtap="onDownload">
<text>下载图片</text>
</view>
</view>
</l-popup>
<!-- 位置按钮 -->
<view class="location col con-c align-c" bindtap="onLocation">
<image class="icon-location" src="/image/icon/location-3.png"></image>
</view>
<!-- 入园购票 -->
<view class="buy-coupon" bindtap="onBuyMembership" data-id="{{3}}">
<view class="buy-coupon-title row align-c">
<image src="./image/ruyuangoupiao.png"></image>
<image src="/image/more.png"></image>
</view>
<view class="buy-coupon-type row con-b">
<image src="./image/single.png"></image>
<image src="./image/month.png"></image>
<image src="./image/year.png"></image>
</view>
</view> </view>
<!-- 饮品预订 文创周边-->
<view class="buy-other row con-b">
<!-- 饮品预订 -->
<view class="buy-snacks row" bindtap="onBuySnacks" data-id="{{3}}">
<view class="buy-left col con-c">
<image src="./image/yinpinyuding.png"></image>
</view>
<view class="buy-right col con-c">
<image src="./image/icon-bg.png"></image>
<image class="snacks-img" src="./image/yinpin.png"></image>
</view>
</view>
<!-- 文创周边 -->
<view class="buy-art row" bindtap="onBuyArt" data-id="{{3}}">
<view class="buy-left col con-c">
<image src="./image/wenchuangzhoubian.png"></image>
</view>
<view class="buy-right col con-c">
<image src="./image/icon-bg.png"></image>
<image class="art-img" src="./image/shanzi.png"></image>
</view>
</view>
</view>
<!-- 全部活动 -->
<view class="activity" bindtap="onAllActivity">
<image src="{{appResourcesBase + 'campsite/title.png'}}"></image>
</view>
<!-- 滚动图片 -->
<!-- 单张图片 -->
<view class="swiper" wx:if="{{childActivity.length <= 1}}">
<image mode="scaleToFill" src="{{childActivity[0].childImg}}"></image>
</view>
<!-- 多张图片 -->
<swiper class="swiper" indicator-dots indicator-color="#F6DADA" indicator-active-color="#E57C99" autoplay circular wx:else>
<block wx:for="{{childActivity}}" wx:key="id">
<swiper-item>
<image mode="scaleToFill" src="{{item.cover}}" bindtap="onActivityDetail" data-id="{{item.id}}"></image>
</swiper-item>
</block>
</swiper>
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
<image mode="widthFix" src="{{bottomImage}}"></image>
</view> </view>
\ No newline at end of file
pages/campsite/home-mirror/home-mirror.wxss
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
.appointment-side { .appointment-side {
position: fixed; position: fixed;
right: 40rpx; right: 40rpx;
bottom: 74rpx; bottom: 180rpx;
width: 112rpx; width: 80rpx;
height: 224rpx; height: 80rpx;
} }
.appointment-side-top { .appointment-side-top {
...@@ -49,4 +49,164 @@ ...@@ -49,4 +49,164 @@
.container > image { .container > image {
width: 750rpx; width: 750rpx;
}
.banner {
width: 750rpx;
height: 1676rpx;
}
.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.85);
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;
}
.buy-coupon-title image:nth-child(2) {
width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
}
.buy-coupon-type {
margin-top: 32rpx;
}
.buy-coupon-type image {
width: 170rpx;
height: 166rpx;
}
.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: 38rpx;
left: 42rpx;
width: 50rpx;
height: 76rpx;
}
.art-img {
position: absolute;
top: 42rpx;
left: 12rpx;
width: 86rpx;
height: 70rpx;
}
.activity {
position: absolute;
top: 1602rpx;
}
.activity image{
width: 160rpx;
height: 34rpx;
}
.swiper {
width: 750rpx;
height: 1160rpx;
background-color: #FCF8F0;
}
.swiper image {
width: 750rpx;
height: 1160rpx;
}
.wx-swiper-dots{
position:relative;
left: 0;
right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 64rpx;
}
/* 分享弹窗 */
.popupImage image {
width: 606rpx;
height: 977rpx;
margin-bottom: 64rpx;
}
.cancel, .download {
width: 288rpx;
height: 96rpx;
text-align: center;
line-height: 96rpx;
border-radius: 4rpx;
}
.cancel {
color: #15191F;
background-color: #fff;
}
.download {
color: #fff;
background-color: #15191F;
} }
\ No newline at end of file
pages/play/activity-detail/activity-detail.js
...@@ -93,6 +93,7 @@ Page({ ...@@ -93,6 +93,7 @@ Page({
funcItem.priceType = 3 funcItem.priceType = 3
} }
} }
funcItem.priceType = 3
wx.setStorageSync('shoppingCartBuffer', [funcItem]) wx.setStorageSync('shoppingCartBuffer', [funcItem])
this.setData({ this.setData({
......
pages/play/activity-detail/activity-detail.wxml
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
<!-- 普通价样式 --> <!-- 普通价样式 -->
<view class="row" wx:if="{{info.priceType === 3}}"> <view class="row" wx:if="{{info.priceType === 3}}">
<view class="item-price row align-c"> <view class="item-price row align-c">
<text></text>
<text>￥</text> <text>￥</text>
<text>{{info.priceText}}</text> <text>{{info.priceText}}</text>
<text>/人</text> <text>/人</text>
......
pages/play/activity-detail/activity-detail.wxss
...@@ -190,7 +190,9 @@ ...@@ -190,7 +190,9 @@
line-height: 42rpx; line-height: 42rpx;
} }
.contact .button-disable { .contact .button-disable {
width: 670rpx; position: absolute;
right: 40rpx;
width: 200rpx;
height: 96rpx; height: 96rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
background: #C8E1EC; background: #C8E1EC;
......
pages/play/activity/activity.js
...@@ -57,7 +57,7 @@ Page({ ...@@ -57,7 +57,7 @@ Page({
success: function (res) { success: function (res) {
let tmpArr = []; let tmpArr = [];
let funcData = res.data.list let funcData = res.data.list
res.data.list.forEach(item => { funcData.forEach(item => {
let tmpItem = { let tmpItem = {
id: item.id, id: item.id,
cover: item.cover, cover: item.cover,
......
pages/play/service-detail/service-detail.js
...@@ -722,13 +722,18 @@ Page({ ...@@ -722,13 +722,18 @@ Page({
break break
} }
}, },
// 跳转到服务详情
onContact: function () { onContact: function () {
wx.navigateTo({ wx.navigateTo({
url: '/pages/commodity/project-detail/project-detail' url: '/pages/commodity/project-detail/project-detail'
}) })
}, },
// 跳转到餐品购物车
onBuyFood: function () {
wx.navigateTo({
url: '/pages/commodity/menu-food/menu-food'
})
},
onPageScroll: function (funcEvent) { onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
......
pages/play/service-detail/service-detail.wxml
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
<view class="commodity-menu col" wx:if="{{winCommodityMenu}}" bindtap="onBuySnacks" data-id="{{5}}"> <view class="commodity-menu col" wx:if="{{winCommodityMenu}}" bindtap="onBuySnacks" data-id="{{5}}">
<image class="commodity-menu-bg" src="{{resourcesBase + 'play/service/service-flower.png'}}"></image> <image class="commodity-menu-bg" src="{{resourcesBase + 'play/service/service-flower.png'}}"></image>
<view> <view>
<image class="commodity-menu-icon"></image> <image class="commodity-menu-icon" src="{{imageBase + 'icon/food.png'}}"></image>
</view> </view>
<view> <view>
<text>能量补给站</text> <text>能量补给站</text>
...@@ -258,7 +258,7 @@ ...@@ -258,7 +258,7 @@
<button class="button row con-c align-c" bindtap="onContact">购买门票</button> <button class="button row con-c align-c" bindtap="onContact">购买门票</button>
</view> </view>
<view class="operation" wx:if="{{option.id === '4' || option.id === '6'}}"> <view class="operation" wx:if="{{option.id === '4' || option.id === '6'}}">
<button class="button row con-c align-c" bindtap="onContact">立即点餐</button> <button class="button row con-c align-c" bindtap="onBuyFood">立即点餐</button>
</view> </view>
<!-- 侧边返回顶部 --> <!-- 侧边返回顶部 -->
......
pages/play/service-detail/service-detail.wxss
...@@ -375,18 +375,13 @@ ...@@ -375,18 +375,13 @@
} }
.commodity-menu-icon { .commodity-menu-icon {
margin: 48rpx 0 0 54rpx;
} width: 56rpx;
height: 56rpx;
.commodity-menu-icon {
margin: 56rpx 0 0 54rpx;
width: 52rpx;
height: 37rpx;
background: #15191F;
} }
.commodity-menu view:nth-child(3) { .commodity-menu view:nth-child(3) {
margin: 26rpx 0 0 50rpx; margin: 16rpx 0 0 50rpx;
font-size: 30rpx; font-size: 30rpx;
color: #FFFFFF; color: #FFFFFF;
line-height: 42rpx; line-height: 42rpx;
......
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