Skip to content

严立 / mini-shimao

Go to a project
Commit bff0d91a by 严立
Options

首页，畅玩，营地完成

parent 9a71aea9
Expand all
Inline Side-by-side
Showing with 1500 additions and 204 deletions
app.js
App({
onLaunch: function () {
// console.log('wx.env', wx.env)
},
onShow: function (options) {
......
app.json
{
"pages": [
"pages/home/home",
"pages/index/index",
"pages/play/play",
"pages/home-strategy/home-strategy",
"pages/index/index",
"pages/campsite/campsite",
"pages/mine/mine"
],
"usingComponents": {
"navigation": "../component/navigation/navigation",
"swiper-point": "../component/swiper-point/swiper-point",
"l-button": "../miniprogram_npm/lin-ui/button/index",
"l-card": "../miniprogram_npm/lin-ui/card/index",
"l-capsule-bar": "../miniprogram_npm/lin-ui/capsule-bar/index",
"l-icon": "../miniprogram_npm/lin-ui/icon/index",
"l-list": "../miniprogram_npm/lin-ui/list/index",
"l-button": "../miniprogram_npm/lin-ui/button/index",
"l-price": "../miniprogram_npm/lin-ui/price/index",
"l-tabs": "../miniprogram_npm/lin-ui/tabs/index",
"l-tabpanel": "../miniprogram_npm/lin-ui/tabpanel/index",
"l-water-flow": "../miniprogram_npm/lin-ui/water-flow/index"
},
"window": {
"navigationStyle": "custom",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
"backgroundTextStyle": "light"
},
"tabBar": {
"color": "#a0a7b2",
......
component/navigation/navigation.js 0 → 100644
// pages/navBar/navBar.js
Component({
/**
* 组件的属性列表
*/
properties: {
background: {
type: String,
value: 'rgba(255, 255, 255, 0)'
},
color: {
type: String,
value: 'rgba(0, 0, 0, 1)'
},
titleText: {
type: String,
value: ''
},
titleImg: {
type: String,
value: ''
},
backIcon: {
type: String,
value: ''
},
homeIcon: {
type: String,
value: ''
},
fontSize: {
type: Number,
value: 16
},
iconHeight: {
type: Number,
value: 19
},
iconWidth: {
type:Number,
value: 58
}
},
observers: {
'background': function () {
this.setStyle()
},
},
lifetimes: {
attached: function(){
var that = this;
that.setNavSize();
that.setStyle();
},
},
data: {
},
methods: {
// 通过获取系统信息计算导航栏高度
setNavSize: function() {
var that = this
, sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight
, isiOS = sysinfo.system.indexOf('iOS') > -1
, navHeight;
if (!isiOS) {
navHeight = 48;
} else {
navHeight = 44;
}
that.setData({
status: statusHeight,
navHeight: navHeight
})
},
setStyle: function() {
console.log('setStyle')
var that = this, containerStyle, textStyle, iconStyle;
containerStyle = [
'background:' + that.data.background
].join(';');
textStyle = [
'color:' + that.data.color,
'font-size:' + that.data.fontSize + 'px'
].join(';');
iconStyle = [
'width: ' + that.data.iconWidth + 'px',
'height: ' + that.data.iconHeight + 'px'
].join(';');
that.setData({
containerStyle: containerStyle,
textStyle: textStyle,
iconStyle: iconStyle
})
},
// 返回事件
back: function(){
wx.navigateBack({
delta: 1
})
this.triggerEvent('back', {back: 1})
},
home: function() {
this.triggerEvent('home', {});
}
}
})
component/navigation/navigation.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/navigation/navigation.wxml 0 → 100644
<view class='nav' style='height: {{status + navHeight}}px'>
<view class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
<image src='{{backIcon}}'></image>
</view>
<view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>
<image src='{{homeIcon}}'></image>
</view>
<view class='nav-icon' wx:if="{{titleImg}}">
<image src='{{titleImg}}' style='{{iconStyle}}'></image>
</view>
<view class='nav-title' wx:if="{{titleText && !titleImg}}">
<text style='{{textStyle}}'>{{titleText}}</text>
</view>
</view>
</view>
\ No newline at end of file
component/navigation/navigation.wxss 0 → 100644
.nav {
z-index: 2000;
/* position: fixed;
top: 0;
left: 0;
border: 1rpx red solid; */
}
.navbar{
position: relative
}
.back-icon, .home-icon{
width: 28px;
height: 100%;
position: absolute;
transform: translateY(-50%);
top: 50%;
display: flex;
}
.back-icon{
left: 16px;
}
.home-icon{
left: 44px
}
.back-icon image{
width: 28px;
height: 28px;
margin: auto;
}
.home-icon image{
width: 20px;
height: 20px;
margin: auto;
}
.nav-title, .nav-icon{
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
font-weight: bold;
}
\ No newline at end of file
component/swiper-point/swiper-point.js 0 → 100644
Component({
/**
* 组件的属性列表
*/
properties: {
bannerActiveIndex: {
type: Number,
value: 0
}
},
data: {
lineStyle: [
'./image/style-00-00.png',
'./image/style-00-01.png',
'./image/style-00-02.png',
],
},
methods: {
}
})
component/swiper-point/swiper-point.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/swiper-point/swiper-point.wxml 0 → 100644
<!--component/swiper-point/swiper-point.wxml-->
<view class="swiper-point">
<view class="swiper-point-group">
<block wx:for="{{lineStyle}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image src="{{item}}" mode="widthFix" class="{{index === bannerActiveIndex ? '' : 'inactive-line'}}"></image>
</block>
</view>
</view>
\ No newline at end of file
component/swiper-point/swiper-point.wxss 0 → 100644
.swiper-point {
z-index: 1100;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
.swiper-point-group {
display: flex;
flex-direction: row;
align-items: center;
width: 200rpx;
height: 50rpx;
}
.inactive-line {
opacity: .5;
}
\ No newline at end of file
image/more.png 0 → 100644
image/more.png

456 Bytes
pages/campsite/campsite.js
......@@ -12,7 +12,6 @@ Page({
},
onLoad: function (options) {
console.log(this.data.detailImage)
this.downloadDetail(this.data.detailIndex)
},
......
pages/home-strategy/home-strategy.js 0 → 100644
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
/**
* 页面的初始数据
*/
data: {
navigationBackground: 'rgba(0, 0, 0, 0)',
banner: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
],
bannerIndex: 0,
detailImage: [],
detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy.png',
],
detailIndex: 0,
relation: [
{
'cover': '/image/strategy-0.png',
'title': '元养水韵SPA馆',
'time': '营业时间 12:00-14:00',
'price': '¥10-¥5000/人',
'describe': '',
}, {
'cover': '/image/strategy-1.png',
'title': '原味舒食生态餐厅原味舒',
'time': '营业时间 10:00-17:00',
'price': '¥20-¥50/人',
'describe': '',
},
]
},
onLoad: function (options) {
this.downloadDetail(this.data.detailIndex)
},
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
downloadDetail: function (funcIndex) {
wx.downloadFile({
url: this.data.detailImageUrl[funcIndex],
success: (response) => {
let funcDetailImage = this.data.detailImage
funcDetailImage.push(response.tempFilePath)
this.setData({
detailImage: funcDetailImage,
detailIndex: this.data.detailIndex + 1
})
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
},
fail: (response) => {
console.log(response)
}
})
},
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 40 && this.data.navigationBackground !== 'rgba(255, 255, 255, 1)') {
this.setData({
navigationBackground: 'rgba(255, 255, 255, 1)'
})
}
if (funcEvent.scrollTop <= 40) {
this.setData({
navigationBackground: 'rgba(0, 0, 0, 0)'
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
})
\ No newline at end of file
pages/home-strategy/home-strategy.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/home-strategy/home-strategy.wxml 0 → 100644
<navigation class="navigation" titleText="攻略详情" background="{{navigationBackground}}" backIcon="/image/back.png"></navigation>
<view class="container">
<view id="banner" class="banner">
<swiper
class="banner-swiper"
autoplay
circular
interval="2000"
duration="500"
indicator-color="rgba(0, 0, 0, 0)"
indicator-active-color="rgba(0, 0, 0, 0)"
bindchange="onSwiperChange"
>
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
</view>
<view class="detail">
<image mode="widthFix" src="/image/home-strategy.png"></image>
<view class="relation">
<view class="relation-title">
<text>文中提及</text>
</view>
<block wx:for="{{relation}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="relation-item row con-b">
<image mode="widthFix" src="{{item.cover}}"></image>
<view class="relation-item-info col">
<text>{{item.title}}</text>
<text>{{item.time}}</text>
<text>{{item.price}}</text>
</view>
<view class="relation-item-more row align-c">
<image src="/image/more.png"></image>
</view>
</view>
</block>
</view>
</view>
</view>
pages/home-strategy/home-strategy.wxss 0 → 100644
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.banner {
position: relative;
width: 750rpx;
height: 870rpx;
background: #ffffff;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 870rpx;
}
.banner-swiper-point {
position: relative;
top: 760rpx;
left: 0;
}
.detail {
width: 750rpx;
}
.detail > image {
min-width: 100%;
}
/* 攻略相关 */
.relation-title {
margin: 0 40rpx 90rpx 40rpx;
}
.relation-title text {
width: 120rpx;
height: 42rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: bold;
color:rgba(21,25,31,1);
}
.relation-item {
position: relative;
width: 670rpx;
height: 238rpx;
margin: 0 40rpx 104rpx 40rpx;
background:rgba(245, 246, 248, 1);
border-radius: 4rpx;
}
.relation-item > image {
position: absolute;
top: -24rpx;
left: 24rpx;
width: 176rpx;
height: 214rpx;
}
.relation-item {
padding: 32rpx 32rpx 48rpx 230rpx;
}
.relation-item-info text:nth-child(1) {
font-size: 30rpx;
font-weight: bold;
color:rgba(21, 25, 31, 1);
}
.relation-item-info text:nth-child(2) {
margin-top: 38rpx;
font-size: 26rpx;
color: #656E7B;
}
.relation-item-info text:nth-child(3) {
margin-top: 20rpx;
font-size: 26rpx;
color: #656E7B;
}
.relation-item-more {
height: 100%;
}
.relation-item-more image {
width: 32rpx;
height: 32rpx;
}
\ No newline at end of file
pages/home/component/strategy-item/strategy-item.wxml
<!-- demo.wxml -->
<view class="component-strategy-item">
<image src="{{data.image}}" mode="aspectFit"></image>
<image src="{{data.image}}" mode="widthFix"></image>
<text class="component-strategy-item-title">{{data.title}}</text>
<text class="component-strategy-item-content">{{data.date}}</text>
</view>
\ No newline at end of file
pages/home/component/strategy-item/strategy-item.wxss
......@@ -9,9 +9,6 @@
.component-strategy-item image {
width: 100%;
margin: -20rpx 0;
line-height: 1;
font-size: 0;
}
.component-strategy-item-title {
......
pages/home/home.js
import iLinuiUtil from "../../miniprogram_npm/lin-ui/utils/device-util"
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
navigationStyle: 'position: absolute; top: -navigationHeightrpx; left: 0;',
navigationAnimationShow: 0,
navigationHeight: 120,
banner: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
],
bannerIndex: 0,
bannerHeight: 300,
strategyList: [{
image: '/pages/home/image/strategy-00.png',
title: '碧海银湖40万方海岛精灵乐园，秘境度假中心。',
......@@ -30,26 +46,65 @@ Page({
title: '懂生活的你，必定喜欢懂品质的碧海银湖。',
date: '2020-07-10'
}],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500
isNavigationLogoWhite: true,
},
onLoad: function (options) {
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {
console.log('渲染成功')
})
// 游客攻略瀑布列表
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
// wx.hideTabBar()
// wx.showTabBar()
},
onShow: function () {
const query = wx.createSelectorQuery()
query.select('#banner').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
this.setData({
bannerHeight: res[0].height * 0.9
})
})
},
onHide: function () {
onStrategyDetail: function (funcItem) {
console.log(funcItem)
wx.navigateTo({
url: '/pages/home-strategy/home-strategy'
})
},
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: false
})
}
let funcOpacity = (funcEvent.scrollTop - this.data.bannerHeight) / 10
this.setData({
navigationAnimationShow: funcOpacity
})
}
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: true
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
onUnload: function () {
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
})
\ No newline at end of file
pages/home/home.wxml
<!--home.wxml-->
<navigation class="navigation" background="{{'rgba(255, 255, 255, 1)'}}"></navigation>
<view class="container">
<view class="banner">
<swiper class="banner-swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}"></image>
<image class="navigation-bar-image" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}"></image>
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{true}}" interval="2000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item>
<image class="banner-content" src="{{item}}"></image>
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="notice">
<l-list title="温泉公寓现已接受预定" image="/pages/home/image/inform.png"></l-list>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-0.png" mode="widthFix"></image>
</view>
<view class="banner-notice">
<l-list l-class="banner-notice-item" title="温泉公寓现已接受预定" image="/pages/home/image/inform.png"></l-list>
</view>
</view>
<view class="module">
<view class="detail">
<!-- 预约公告 -->
<view class="night row con-b">
<view>
......@@ -30,7 +44,7 @@
</view>
<!-- 智慧导览 -->
<view class="guide module-item">
<view class="guide detail-item">
<image src="./image/title-guide.png"></image>
<view class="guide-content">
<image class="background-image" src="./image/guide.png" mode="aspectFit"></image>
......@@ -42,7 +56,7 @@
</view>
<!-- 预约看房 -->
<view class="appointment module-item">
<view class="appointment detail-item">
<image src="./image/title-appointment.png"></image>
<view class="appointment-content">
<image class="background-image" src="./image/appointment.png" mode="aspectFit"></image>
......@@ -55,7 +69,7 @@
</view>
<!-- 游客攻略 -->
<view class="strategy module-item">
<view class="strategy detail-item">
<image src="./image/title-strategy.png"></image>
<view class="strategy-content">
<image class="background-image" src="./image/strategy.png" mode="aspectFit"></image>
......@@ -65,7 +79,7 @@
</view>
</view>
<view>
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item"></l-water-flow>
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</view>
</view>
</view>
pages/home/home.wxss
.navigation {
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 200rpx;
height: 60rpx;
margin: 60rpx 0 0 50rpx;
}
.banner {
z-index: 9;
position: relative;
width: 100%;
width: 750rpx;
height: 870rpx;
background: #ffffff;
}
.banner-swiper,
.banner-content {
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 870rpx;
}
.banner-swiper-point {
position: relative;
top: 620rpx;
left: 0;
}
.banner-wave {
z-index: 1100;
position: relative;
top: 712rpx;
left: 0;
width: 100%;
height: 100%;
height: 160rpx;
}
.module {
padding: 0 40rpx;
.banner-wave image {
width: 100%;
height: 150rpx;
}
.notice {
position: absolute;
.banner-notice {
z-index: 1100;
position: relative;
top: 620rpx;
left: 40rpx;
bottom: 38rpx;
width: 670rpx;
height: 92rpx;
padding: 4rpx 32rpx;
......@@ -26,11 +68,30 @@
border-radius: 4rpx;
}
.banner-notice-item {
border: none !important;
}
.detail {
margin-top: 40rpx;
padding: 0 40rpx;
background: linear-gradient(#ffffff, #F2F2F2);
}
.detail-item {
margin-top: 58rpx;
}
.detail-item > image {
width: 184rpx;
height: 46rpx;
}
.night {
width: 670rpx;
height: 150rpx;
padding: 28rpx 32rpx;
background: rgba(255, 255, 255, 1);
background: #ffffff;
box-shadow: 0 16rpx 48rpx 0 rgba(0, 0, 0, .07);
border-radius: 4rpx;
}
......@@ -66,23 +127,14 @@
margin: 0 8rpx 4rpx 0;
}
.module-item {
margin-top: 58rpx;
}
.module-item > image {
width: 184rpx;
height: 46rpx;
}
/* 智慧导览 */
.guide-content {
z-index: 3;
position: relative;
width: 670rpx;
height: 240rpx;
margin-top: 32rpx;
border-radius: 4rpx;
background: linear-gradient(90deg,rgba(94, 178, 206, 1) 0%, rgba(185, 222, 234, .57) 100%);
}
.guide-content .operation {
......@@ -98,6 +150,7 @@
}
.guide-content .operation button {
z-index: -1;
width: 220rpx;
height: 68rpx;
margin-top: 36rpx;
......@@ -109,6 +162,7 @@
/* 预约看房 */
.appointment-content {
z-index: 3;
position: relative;
width: 670rpx;
height: 402rpx;
......@@ -137,6 +191,7 @@
}
.appointment-content .operation button {
z-index: -1;
width: 220rpx;
height: 68rpx;
margin-top: 26rpx;
......@@ -148,6 +203,7 @@
/* 游客攻略 */
.strategy-content {
z-index: 3;
position: relative;
width: 670rpx;
height: 320rpx;
......
pages/home/image/strategy-00.png
pages/home/image/strategy-00.png

72.6 KB | W: | H:

pages/home/image/strategy-00.png

53.6 KB | W: | H:

pages/home/image/strategy-00.png
pages/home/image/strategy-00.png
pages/home/image/strategy-00.png
pages/home/image/strategy-00.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png

79.1 KB | W: | H:

pages/home/image/strategy-04.png

80.7 KB | W: | H:

pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png

60.9 KB | W: | H:

pages/home/image/strategy-05.png

78 KB | W: | H:

pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
  • 2-up
  • Swipe
  • Onion skin
pages/index/index.js
import iLinuiUtil from "../../miniprogram_npm/lin-ui/utils/device-util"
Page({
data: {
banner: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500
capsuleBarHeight: iLinuiUtil.getNavigationBarHeight(),
},
onLoad: function (options) {
......
pages/index/index.json
{
"navigationStyle": "custom",
"usingComponents": {}
}
\ No newline at end of file
pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<view class="banner">
<swiper class="banner-swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item>
<image class="banner-content" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="notice">
<l-list desc="温泉公寓现已接受预定" image="/pages/index/image/inform.png"></l-list>
</view>
</view>
</view>
<navigation></navigation>
\ No newline at end of file
pages/index/index.wxss
.banner {
position: relative;
width: 100%;
height: 870rpx;
}
.banner-swiper,
.banner-content {
width: 100%;
height: 100%;
}
.notice {
position: absolute;
left: 40rpx;
bottom: 38rpx;
width: 670rpx;
height: 92rpx;
padding: 4rpx 32rpx;
background:rgba(255, 255, 255, 1);
box-shadow: 0 16rpx 48rpx 0 rgba(0, 0, 0, .05);
border-radius: 4rpx;
}
\ No newline at end of file
.container{
width:100%;
}
.navigation-bar-image{
width:100%;
position:fixed;
top:0;
left:0;
}
\ No newline at end of file
pages/mine/mine.js
// pages/mine/mine.js
import iRequest from '../../utils/request/corvus.js'
Page({
/**
......@@ -14,53 +15,34 @@ Page({
onLoad: function (options) {
},
getUserInfo: function (funcEvent) {
console.log(funcEvent)
// 用户拒绝授权
if (funcEvent.detail.errMsg === 'getUserInfo:fail auth deny') {
return
}
// 用户授权获取用户信息
if (funcEvent.detail.errMsg === 'getUserInfo:ok') {
wx.login({
success: function (result) {
let param = {
'code': result.code,
}
iRequest.request({ url: 'v1/login/getSmallSession', params: param, method: 'get' })
.then(function (response) {
console.log(response)
})
.catch(function (response) {
console.log(response)
})
},
fail: function (response) {
console.log(response)
}
})
}
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/mine/mine.wxml
<!--pages/mine/mine.wxml-->
<text>pages/mine/mine.wxml</text>
<!-- <l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo"></l-button> -->
<text>mine</text>
\ No newline at end of file
pages/play/play.js
// pages/amusement/amusement.js
import deviceUtil from "../../miniprogram_npm/lin-ui/utils/device-util.js"
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
/**
* 页面的初始数据
*/
data: {
navigationBackground: 'rgba(0, 0, 0, 0)',
banner: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
],
interval: 2000,
duration: 1000,
circular: true,
currentIndex: 0,
capsuleBarHeight: deviceUtil.getNavigationBarHeight(),
tab: [
{
'text': '文艺',
'defaultImage': '/pages/play/image/literatue.png',
'activeImage': '/pages/play/image/literatue-s.png',
}, {
'text': '健康',
'defaultImage': '/pages/play/image/healthy.png',
'activeImage': '/pages/play/image/healthy-s.png',
}, {
'text': '休闲',
'defaultImage': '/pages/play/image/food.png',
'activeImage': '/pages/play/image/food-s.png',
}, {
'text': '美食',
'defaultImage': '/pages/play/image/relaxation.png',
'activeImage': '/pages/play/image/relaxation-s.png',
}, {
'text': '住宿',
'defaultImage': '/pages/play/image/hotel.png',
'activeImage': '/pages/play/image/hotel-s.png',
}
],
tabIndex: 0,
detailImage: [],
detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
],
detailIndex: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.downloadDetail(this.data.detailIndex)
},
/**
......@@ -35,32 +84,64 @@ Page({
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
downloadDetail: function (funcIndex) {
wx.downloadFile({
url: this.data.detailImageUrl[funcIndex],
success: (response) => {
let funcDetailImage = this.data.detailImage
funcDetailImage.push(response.tempFilePath)
this.setData({
detailImage: funcDetailImage,
detailIndex: this.data.detailIndex + 1
})
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
},
fail: (response) => {
console.log(response)
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onTabSelection: function (funcEvent) {
this.setData({
tabIndex: funcEvent.currentTarget.dataset.index
})
},
}
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 40 && this.data.navigationBackground !== 'rgba(255, 255, 255, 1)') {
this.setData({
navigationBackground: 'rgba(255, 255, 255, 1)'
})
}
if (funcEvent.scrollTop <= 40) {
this.setData({
navigationBackground: 'rgba(0, 0, 0, 0)'
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
})
\ No newline at end of file
pages/play/play.json
{
"usingComponents": {}
"usingComponents": {}
}
\ No newline at end of file
pages/play/play.wxml
<!--pages/amusement/amusement.wxml-->
<text>pages/amusement/amusement.wxml</text>
<navigation class="navigation" background="{{navigationBackground}}"></navigation>
<view class="container">
<!-- CapsuleBar 背景图片 -->
<image class="navigation-bar-image" src="./image/title.png"></image>
<!-- 以下部分放置页面内容 -->
<view class="banner">
<swiper autoplay circular interval="{{interval}}" next-margin="64rpx" bindchange="handleChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item>
<image src="{{item}}" class="{{currentIndex !== index ? 'banner-content': 'banner-content-active'}}"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 更多活动 -->
<view class="activity row con-e align-c">
<text>查看全部活动</text>
<image src="/image/more.png"></image>
</view>
<view class="ornament-wave">
<image src="/image/ornament-1.png"></image>
</view>
<!-- 板块标签 -->
<view class="tab row con-b align-c">
<block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection">
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}">
<image src="{{tabIndex === index ? item.activeImage : item.defaultImage}}"></image>
</view>
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-text-active' : 'tab-item-text-inactive'}}">
<text>{{item.text}}</text>
</view>
</view>
</block>
</view>
<view class="detail">
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block>
<view class="detail-info col">
<view class="detail-info-title">
<text>元养水韵SPA馆</text>
</view>
<view class="detail-info-describe">
<text>舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一</text>
</view>
<view class="detail-info-tip col">
<view class="row align-c">
<text class="tip-title">时间</text>
<text class="tip-describe">10:00~18:00</text>
</view>
<view class="row align-c">
<text class="tip-title">票价</text>
<text class="tip-describe">¥20~¥50/人</text>
</view>
</view>
<view class="detail-operation">
<l-button width="534" height="96" size="large">立即预定</l-button>
</view>
</view>
</view>
</view>
\ No newline at end of file
pages/play/play.wxss
/* pages/amusement/amusement.wxss */
\ No newline at end of file
page {
background: #f5f6f8;
}
.navigation {
z-index: 1900;
}
.navigation-bar-image {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 130rpx;
height: 96rpx;
}
.banner,
swiper {
position: relative;
width: 100%;
min-height: 480rpx;
margin-top: 100rpx;
}
swiper-item {
position: relative;
left: 56rpx;
width: 638rpx !important;
height: 480rpx !important;
}
.banner-content {
width: 638rpx;
height: 408rpx;
margin-top: 36rpx;
padding: 0 24rpx;
border-radius:4px;
}
.banner-content-active {
width: 638rpx;
height: 480rpx;
border-radius:4px;
transition: all 0.2s ease-in 0s;
}
/* 更多活动 */
.activity {
width: 100%;
height: 34rpx;
margin-top: 32rpx;
padding: 0 56rpx;
font-size: 26rpx;
font-weight: bolder;
color: #1E2025;
}
.activity image {
width: 32rpx;
height: 32rpx;
}
/* 装饰波浪 */
.ornament-wave {
width: 750rpx;
height: 60rpx;
margin-top: 20rpx;
}
.ornament-wave image {
width: 750rpx;
height: 60rpx;
}
/* 标签选择 */
.tab {
width: 100%;
padding: 40rpx 40rpx 0 40rpx;
background: #ffffff;
}
.tab .tab-item-active {
width: 100rpx;
height: 100rpx;
margin-bottom: 16rpx;
border-radius: 50%;
background: #E3EEFF;
}
.tab .tab-item-inactive {
width: 100rpx;
height: 100rpx;
margin-bottom: 16rpx;
border-radius: 50%;
background: #f5f6f8;
}
.tab .tab-item-text-active {
color: #15191F;
}
.tab .tab-item-text-inactive {
color: #959DA9;
}
.tab-item text {
font-size: 24rpx;
text-align: center;
}
.tab-item image {
width: 52rpx;
height: 52rpx;
}
/* 标签详情 */
.detail {
width: 750rpx;
padding-bottom: 90rpx;
background: #ebeff7;
}
.detail image {
width: 100%;
height: 100%;
margin-bottom: -10rpx;
}
.detail-info {
width: 654rpx;
height: 562rpx;
margin: 0 48rpx;
padding: 0 60rpx 60rpx 60rpx;
border-radius: 0 0 4rpx 4rpx;
background: #ffffff;
}
.detail-info-title {
font-size: 38rpx;
font-weight: bolder;
}
.detail-info-describe {
margin-top: 40rpx;
font-size: 26rpx;
}
.detail-info-tip {
margin-top: 80rpx;
font-size: 26rpx;
}
.detail-info-tip > view {
margin-top: 16rpx;
}
.tip-title {
margin-right: 48rpx;
font-size: 26rpx;
color: #959DA9;
}
.tip-describe {
font-size: 26rpx;
color: #15191F;
}
.detail-operation {
margin-top: 64rpx;
}
\ No newline at end of file
project.config.json
......@@ -8,6 +8,7 @@
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true,
"coverView": true,
......@@ -15,14 +16,19 @@
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"useIsolateContext": true,
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
"libVersion": "2.10.0",
......
utils/option.js 0 → 100644
const output = {
// 测试环境
baseUrl: 'https://sm-web.meiqicloud.com/api/',
// 正式环境
// baseUrl: 'https://xsslc.cndrealty.com/',
}
export default output
\ No newline at end of file
utils/request/corvus.js 0 → 100644
import iOption from '../option.js'
import iInterceptors from './interceptors.js'
/**
* Corvus
* @constructor
* @param {object} option - { base: '', method: 'post', header: {}, timeout: 10000, dataType: '', responseType: ''}
* @return
*/
function Corvus (option) {
let This = this
// 默认配置参数
This.option = {
base: iOption.baseUrl,
method: 'post',
header: { 'content-type': 'application/json' },
timeout: 5000,
dataType: 'json',
responseType: 'text'
}
if (Object.prototype.toString.call(option) === '[object Object]') {
This.option = Object.assign(This.option, option)
}
// 对实例参数做正确性校验
// 请求方式存在，且为post或者get之一，则设置。
if (This.option.method !== 'post' && This.option.method !== 'get') {
console.log('[corvus] "method" is invalid!')
return
}
// 请求头部存在，且不为空对象，则设置。
if (Object.prototype.toString.call(This.option.header) !== '[object Object]') {
console.log('[Corvus] "header" is invalid!')
return
}
// 基础路径存在，则设置。
if (!This.option.base || Object.prototype.toString.call(This.option.base) !== '[object String]') {
console.log('[corvus] "baseURL" is invalid!')
return
}
}
Corvus.prototype.request = function (option) {
let This = this
option = Object.assign(JSON.parse(JSON.stringify(This.option)), option)
option = iInterceptors.request(option)
let funcPromise = new Promise(function (funcResolve, funcReject) {
wx.request({
url: option.base + option.url,
header: option.header,
method: option.method,
data: option.params,
success: function (funcResult) {
if (iInterceptors.response(option, funcResult)) {
funcResolve(funcResult)
}
},
fail: function (funcResult) {
iInterceptors.response(option, funcResult)
funcReject('[axios] "request end!')
},
})
})
return funcPromise
}
export default new Corvus()
\ No newline at end of file
utils/request/header.js 0 → 100644
/**
* xmlHttpResqust 表头设置函数
* @function
* @param {object} funXmlHttpRequest
* @param {string} funType - 发送数据类型标识
* @returns
*/
let output = function (funType) {
switch (funType) {
case 'form':
return { 'Content-Type': 'application/x-www-form-urlencoded;' }
case 'formData':
return { 'Content-Type': 'multipart/form-data;' }
case 'json':
return { 'Content-Type': 'application/json;' }
default:
return { 'Content-Type': 'text/plain;' }
}
}
export default output
\ No newline at end of file
utils/request/interceptors.js 0 → 100644
import iMd5 from '../md5.js'
let Output = {
/**
* 请求拦截器。对请求进行配置修改或者拦截。
* 此处为全局拦截器，所有实例对象均会触发。实例的自定义拦截逻辑需要在interceptors.request函数中定义。
* @function
* @param {object} option - 请求的url以及params
* @returns {object || boolean}
*/
request: function (option) {
let App = getApp()
// 网络断开场景
// if (!App.globalData.networkStatus) {
// console.log('offline')
// }
// if (option.url !== 'api/app/weixin/v1/pay/findStatus' && option.url !== 'vx/appletapi/v1/gongZheng/getState') {
// wx.showLoading({ title: '正在获取数据', mask: true })
// }
// let funcToken = App.globalData.encryptedData.token
// let funcSecret = '4b16f0e4b729a04d756e2af1bf2132693d22fad6746330c00f1e3408bb4cdb3547ce13ee48591a47ecd4ce8f6f02602e599bf3586095b67a8ba6382885e89628'
// let funcMd5 = iMd5(funcToken + JSON.stringify(option.params) + funcSecret)
// option.header = Object.assign(option.header, { 'sign': funcMd5 })
// option.header = Object.assign(option.header, { 'T_XSSL_Token': App.globalData.encryptedData.token })
return option
},
/**
* 响应拦截器。对响应数据做统一处理。
* 此处为全局拦截器，所有实例对象均会触发。实例的自定义拦截逻辑需要在interceptors.response函数中定义。
* @function
* @param {object} funResult - 响应回来的数据
* @returns {object || undefined}
*/
response: function (funcOption, funcResult) {
console.log('api: ', funcOption.url)
console.log('params: ', funcOption.params)
console.log('status: ', funcResult.statusCode)
console.log('data: ', funcResult.data ? funcResult.data : funcResult)
console.log('■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■')
return
console.log('funcResult', funcResult)
let App = getApp()
if (funcResult.errMsg === 'request:fail ') {
wx.hideLoading()
App.imState.mutations({
stateWinTip: true,
stateTipContent: '哎呀，好像没网了，请检查网络。'
})
return false
}
if (funcOption.url !== 'api/app/weixin/v1/pay/findStatus' && funcOption.url !== 'api/app/weixin/v1/pay/findStatus') {
wx.hideLoading()
}
if (funcResult.statusCode === 504) {
App.imState.mutations({
stateWinTip: true,
stateTipContent: '服务器错误'
})
return false
}
if (funcResult.data.code === 101) {
App.imState.mutations({
stateWinTip: true,
stateTipContent: '登录失效，请重新登录'
})
let funcTimer = setTimeout(function () {
clearTimeout(funcTimer)
wx.redirectTo({
url: '../sign-in/sign-in'
})
}, 2000)
return false
}
return true
},
}
export default Output
\ No newline at end of file
utils/resource.js 0 → 100644
const output = {
image: '../../image/',
local: wx.env.USER_DATA_PATH + '/',
}
export default output
\ No newline at end of file
utils/rule/rule-key.js 0 → 100644
let Output = {
/**
* 姓名校验
* @function
* @param {string} value
* @returns {string}
*/
'name': function (value) {
let funMessage = ''
if (value !== '') {
let funRegExp = new RegExp('^[\u4e00-\u9fa5a-zA-Z ]+$', 'g')
let funcRegExp = funRegExp.test(value)
if (!funcRegExp) {
funMessage = '姓名仅支持字母、汉字'
}
} else {
funMessage = '姓名不能为空'
}
return funMessage
},
/**
* 电子邮箱
* @function
* @param {string} value
* @returns {string}
*/
'email': function (value) {
console.log(value)
let funMessage = ''
if (value !== '') {
let funRegExp = new RegExp('^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$', 'g')
let funcRegExp = funRegExp.test(value)
if (!funcRegExp) {
funMessage = '请输入正确的邮箱'
}
} else {
funMessage = '邮箱不能为空'
}
return funMessage
},
/**
* 手机号码
* @function
* @param {string} value
* @returns {string}
*/
'phone': function (value) {
let funMessage = ''
if (value !== '') {
let funRegExp = new RegExp('^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0-9])[0-9]{8}$', 'g')
let funcRegExp = funRegExp.test(value)
if (!funcRegExp) {
funMessage = '请输入正确的手机号码'
}
} else {
funMessage = '手机号码不能为空'
}
return funMessage
},
'region': function (value) {
let funMessage = ''
if (value.length === 0) {
funMessage = '请选择所在地区'
}
return funMessage
},
/**
* 身份证
* @function
* @param {string} value
* @returns {string}
*/
'identity': function (value) {
let funMessage = ''
if (value !== '') {
let funRegExp = new RegExp('^[1-9][0-9]{5}(18|19|20)[0-9]{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$', 'g')
let funcRegExp = funRegExp.test(value)
if (!funcRegExp) {
funMessage = '请输入正确的身份证号码'
}
} else {
funMessage = '身份证号码不能为空'
}
return funMessage
},
/**
* 地址
* @function
* @param {string} value
* @returns {string}
*/
'address': function (value) {
let funMessage = ''
if (value === '') {
funMessage = '请填写地址'
}
return funMessage
},
/**
* 顾问
* @function
* @param {string} value
* @returns {string}
*/
'adviser': function (value) {
let funMessage = ''
// let funcScene = wx.getStorageSync('scene')
// if (funcScene.type !== 2 && value.name === '未知') {
// funMessage = '请选择顾问'
// }
return funMessage
},
}
export default Output
\ No newline at end of file
utils/rule/rule-xss.js 0 → 100644
let Output = function (funcValue) {
let funRegExp = new RegExp('.*?script[^>]*?.*?(<\/.*?script.*?>)*', 'g')
let funcRegExp = funRegExp.test(funcValue)
if (funcRegExp) {
return true
}
return false
}
export default Output
\ No newline at end of file
utils/rule/rule.js 0 → 100644
import iRuleKey from './rule-key.js'
import iRuleXss from './rule-xss.js'
let Output = {
/**
* 单条数据验证
* @function
* @param {string} type - 字段类型
* @param {string} value - 字段数值
* @returns {string}
*/
item: function (type, value) {
if (iRuleKey[type] !== undefined) {
if (!iRuleXss(value)) {
return iRuleKey[type](value)
} else {
console.log('[rule] type "' + type + '" is xss!')
return '数值不符合格式'
}
} else {
console.log('[rule] type "' + type + '" is undefined!')
return ''
}
},
/**
* 列表数据验证
* @function
* @param {object | array} data - 数据对象或者对象数组
* @returns {string}
*/
list: function (data) {
let funcMessage = ''
if (Object.prototype.toString.call(data) === '[object Object]') {
let keys = Object.keys(data)
for (let i = 0, len = keys.length; i < len; i++) {
funcMessage = Output.item(keys[i], data[keys[i]])
if (funcMessage !== '') {
return funcMessage
}
}
}
if (Object.prototype.toString.call(data) === '[object Array]') {
for (let i = 0, len = data.length; i < len; i++) {
let keys = Object.keys(data[i])
for (let j = 0, lenKeys = keys.length; j < lenKeys; j++) {
funcMessage = Output.item(keys[j], data[i][keys[j]])
if (funcMessage !== '') {
return funcMessage
}
}
}
}
return ''
}
}
export default Output
\ No newline at end of file
utils/storage.js 0 → 100644
/**
* unionId:
* scene: // 场景信息
* value: { scene: 0, value: '' }
* scene: 0 - 正常进入，1 - 无房源公众号进入，2 - 有房源扫码进入
* customerInfo：用户信息
* value:
*
*/
\ No newline at end of file
utils/util.js deleted 100644 → 0
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
wxss/samcss-layout.wxss
/* SAMCSS-layout */
page {
min-height: 100%;
background: #f2f2f2;
.navigation {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.container {
......
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