Skip to content

严立 / mini-shimao

Go to a project
Commit 4aa686d9 by 严立
Options

首页，畅玩，营地静态完成

parent c649cc7d
Inline Side-by-side
Showing with 2325 additions and 232 deletions
app.js
...@@ -13,5 +13,9 @@ App({ ...@@ -13,5 +13,9 @@ App({
onError: function (msg) { onError: function (msg) {
},
globalData: {
} }
}) })
app.json
{ {
"pages": [ "pages": [
"pages/play/play",
"pages/home/home",
"pages/index/index",
"pages/mine/mine",
"pages/home-strategy/home-strategy",
"pages/campsite/campsite"
"pages/home/home",
"pages/play/play",
"pages/campsite/campsite",
"pages/mine/mine",
"pages/index/index",
"pages/appointment/appointment",
"pages/activity/activity",
"pages/activity-detail/activity-detail",
"pages/activity-entry/activity-entry",
"pages/notice/notice",
"pages/notice-detail/notice-detail",
"pages/shop-detail/shop-detail",
"pages/strategy/strategy",
"pages/sites/sites"
], ],
"usingComponents": { "usingComponents": {
"navigation": "../component/navigation/navigation", "navigation": "../component/navigation/navigation",
......
component/swiper-point/swiper-point.js
...@@ -6,18 +6,48 @@ Component({ ...@@ -6,18 +6,48 @@ Component({
bannerActiveIndex: { bannerActiveIndex: {
type: Number, type: Number,
value: 0 value: 0
},
bannerStyle: {
type: Number,
value: 0
} }
}, },
data: { data: {
lineStyle: [ style: [
'./image/style-00-00.png', {
'./image/style-00-01.png', style: 'width: 200rpx; height: 50rpx',
'./image/style-00-02.png', styleImage: [
'./image/a-1.png',
'./image/a-2.png',
'./image/a-3.png',
]
}, {
style: 'width: 540rpx; height: 50rpx',
styleImage: [
'./image/b-1.png',
'./image/b-2.png',
'./image/b-3.png',
]
}
], ],
lineStyle: [],
containerStyle: '',
}, },
methods: { lifetimes: {
attached: function () {
console.log(this.data.bannerStyle)
this.setStyle()
},
},
methods: {
setStyle: function () {
this.setData({
lineStyle: this.data.style[this.data.bannerStyle].styleImage,
containerStyle: this.data.style[this.data.bannerStyle].style
})
}
} }
}) })
component/swiper-point/swiper-point.wxml
<!--component/swiper-point/swiper-point.wxml--> <!--component/swiper-point/swiper-point.wxml-->
<view class="swiper-point"> <view class="swiper-point">
<view class="swiper-point-group"> <view class="swiper-point-group" style="{{containerStyle}}">
<block wx:for="{{lineStyle}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <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> <image src="{{item}}" mode="widthFix" class="{{index === bannerActiveIndex ? '' : 'inactive-line'}}"></image>
</block> </block>
......
component/swiper-point/swiper-point.wxss
...@@ -13,8 +13,6 @@ ...@@ -13,8 +13,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 200rpx;
height: 50rpx;
} }
.inactive-line { .inactive-line {
......
image/back.png
image/back.png

1.87 KB | W: | H:

image/back.png

257 Bytes | W: | H:

image/back.png
image/back.png
image/back.png
image/back.png
  • 2-up
  • Swipe
  • Onion skin
image/logo-b.png
image/logo-b.png

3.14 KB | W: | H:

image/logo-b.png

2.9 KB | W: | H:

image/logo-b.png
image/logo-b.png
image/logo-b.png
image/logo-b.png
  • 2-up
  • Swipe
  • Onion skin
image/logo-w.png
image/logo-w.png

3.26 KB | W: | H:

image/logo-w.png

2.98 KB | W: | H:

image/logo-w.png
image/logo-w.png
image/logo-w.png
image/logo-w.png
  • 2-up
  • Swipe
  • Onion skin
image/more.png
image/more.png

456 Bytes | W: | H:

image/more.png

257 Bytes | W: | H:

image/more.png
image/more.png
image/more.png
image/more.png
  • 2-up
  • Swipe
  • Onion skin
image/ornament-0.png
image/ornament-0.png

11.5 KB | W: | H:

image/ornament-0.png

3.03 KB | W: | H:

image/ornament-0.png
image/ornament-0.png
image/ornament-0.png
image/ornament-0.png
  • 2-up
  • Swipe
  • Onion skin
image/ornament-1.png
image/ornament-1.png

3.53 KB | W: | H:

image/ornament-1.png

1.08 KB | W: | H:

image/ornament-1.png
image/ornament-1.png
image/ornament-1.png
image/ornament-1.png
  • 2-up
  • Swipe
  • Onion skin
npm/base64.js 0 → 100644
let Base64 = {
keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function (e) {
var t = "";
var n, r, i, s, o, u, a;
var f = 0;
e = Base64._utf8_encode(e);
while (f < e.length) {
n = e.charCodeAt(f++);
r = e.charCodeAt(f++);
i = e.charCodeAt(f++);
s = n >> 2;
o = (n & 3) << 4 | r >> 4;
u = (r & 15) << 2 | i >> 6;
a = i & 63;
if (isNaN(r)) {
u = a = 64
} else if (isNaN(i)) {
a = 64
}
t = t + this.keyStr.charAt(s) + this.keyStr.charAt(o) + this.keyStr.charAt(u) + this.keyStr.charAt(a)
}
return t
},
decode: function (e) {
var t = "";
var n, r, i;
var s, o, u, a;
var f = 0;
e = e.replace(/[^A-Za-z0-9+/=]/g, "");
while (f < e.length) {
s = this.keyStr.indexOf(e.charAt(f++));
o = this.keyStr.indexOf(e.charAt(f++));
u = this.keyStr.indexOf(e.charAt(f++));
a = this.keyStr.indexOf(e.charAt(f++));
n = s << 2 | o >> 4;
r = (o & 15) << 4 | u >> 2;
i = (u & 3) << 6 | a;
t = t + String.fromCharCode(n);
if (u != 64) {
t = t + String.fromCharCode(r)
}
if (a != 64) {
t = t + String.fromCharCode(i)
}
}
t = Base64._utf8_decode(t);
return t
},
_utf8_encode: function (e) {
e = e.replace(/rn/g, "n");
var t = "";
for (var n = 0; n < e.length; n++) {
var r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r)
} else if (r > 127 && r < 2048) {
t += String.fromCharCode(r >> 6 | 192);
t += String.fromCharCode(r & 63 | 128)
} else {
t += String.fromCharCode(r >> 12 | 224);
t += String.fromCharCode(r >> 6 & 63 | 128);
t += String.fromCharCode(r & 63 | 128)
}
}
return t
},
_utf8_decode: function (e) {
var t = "";
var n = 0;
var r = 0;
var c1 = 0
var c2 = 0
var c3 = 0
while (n < e.length) {
r = e.charCodeAt(n);
if (r < 128) {
t += String.fromCharCode(r);
n++
} else if (r > 191 && r < 224) {
c2 = e.charCodeAt(n + 1);
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
n += 2
} else {
c2 = e.charCodeAt(n + 1);
c3 = e.charCodeAt(n + 2);
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
n += 3
}
}
return t
}
}
// // 定义字符串
// var string = "{name: mm,exp:1549106019}";
// // 加密
// var encodedString = Base64.encode(string);
// console.log(encodedString); // 输出: "SGVsbG8gV29ybGQh"
// // 解密
// var decodedString = Base64.decode(encodedString);
// console.log(decodedString); // 输出: "Hello World!"
export default Base64
\ No newline at end of file
npm/miment.js 0 → 100644
export default !function (t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.miment = e() }(this, function () { "use strict"; function t() { var e = arguments[0]; "string" == typeof e && /^[\d-: ]*$/.test(e) && (arguments[0] = e.replace(/-/g, "/")); var s = new (Function.prototype.bind.apply(Date, [Date].concat(Array.prototype.slice.call(arguments)))); return Object.setPrototypeOf(s, t.prototype), Object.setPrototypeOf(t.prototype, Date.prototype), s } Object.setPrototypeOf = Object.setPrototypeOf || function (t, e) { return t.__proto__ = e, t }; var e = ["日", "一", "二", "三", "四", "五", "六"]; function s(t, e, s) { switch (e) { case "YY": case "YYYY": t = s ? t : this.getFullYear() + t, this.setFullYear(t); break; case "MM": t = s ? t - 1 : this.getMonth() + t, this.setMonth(t); break; case "DD": t = s ? t : this.getDate() + t, this.setDate(t); break; case "hh": t = s ? t : this.getHours() + t, this.setHours(t); break; case "mm": t = s ? t : this.getMinutes() + t, this.setMinutes(t); break; case "ss": t = s ? t : this.getSeconds() + t, this.setSeconds(t); break; case "SSS": t = s ? t : this.getMilliseconds() + t, this.setMilliseconds(t); break; case "ww": case "WW": s ? (this.setMonth(0), this.setDate(1), this.setDate(7 * t), i.call(this)) : this.setDate(this.getDate() + 7 * t) } } function i() { return this.setDate(this.getDate() - this.getDay()), this } return t.prototype.format = function () { var s = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "YYYY-MM-DD hh:mm:ss", i = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], r = void 0, n = void 0, a = void 0, o = void 0, h = void 0, c = void 0, u = void 0, l = void 0; if (i) { var Y = void 0, f = void 0; this.__distance_begin__ > this.__distance_end__ ? (Y = t(this.__distance_begin__), f = t(this.__distance_end__)) : (Y = t(this.__distance_end__), f = t(this.__distance_begin__)), r = Y.getFullYear() - f.getFullYear(), n = Y.getMonth() - f.getMonth(), a = Y.getDate() - f.getDate(), o = Y.getHours() - f.getHours(), h = Y.getMinutes() - f.getMinutes(), c = Y.getSeconds() - f.getSeconds(), u = Math.abs(Y.getDay() - f.getDay()), (l = Math.abs(Y.getMilliseconds() - f.getMilliseconds())) < 0 && (l += 1e3, c--), c < 0 && (c += 60, h--), h < 0 && (h += 60, o--), o < 0 && (o += 24, a--), a < 0 && (a += f.daysInMonth(), n--), n < 0 && (n += 12, r--) } else r = this.getFullYear(), n = this.getMonth() + 1, a = this.getDate(), o = this.getHours(), h = this.getMinutes(), c = this.getSeconds(), u = this.getDay(), l = this.getMilliseconds(); return s = s.replace("YYYY", r).replace("MM", String(n)[1] ? n : "0" + n).replace("DD", String(a)[1] ? a : "0" + a).replace("hh", String(o)[1] ? o : "0" + o).replace("mm", String(h)[1] ? h : "0" + h).replace("ss", String(c)[1] ? c : "0" + c).replace("SSS", l).replace("ww", u), s = i ? s.replace("WW", u) : s.replace("WW", e[u]) }, t.prototype.stamp = function () { return this.valueOf() }, t.prototype.json = function () { return { year: this.getFullYear(), month: this.getMonth() + 1, date: this.getDate(), hour: this.getHours(), minute: this.getMinutes(), second: this.getSeconds(), day: this.getDay(), millisecond: this.getMilliseconds() } }, t.prototype.get = function (t) { var e = String(function (t) { switch (t) { case "YYYY": return this.getFullYear(); case "MM": return this.getMonth() + 1; case "DD": return this.getDate(); case "hh": return this.getHours(); case "mm": return this.getMinutes(); case "ss": return this.getSeconds(); case "ww": case "WW": return this.getDay(); case "SSS": return this.getMilliseconds() }return "00" }.call(this, t)); return e[1] || "SSS" === t || "millisecond" === t ? e : "0" + e }, t.prototype.diff = function (e, s) { return s ? t(e).valueOf() - t(s).valueOf() : this.valueOf() - t(e).valueOf() }, t.prototype.isBefore = function (e) { return this.valueOf() < t(e).valueOf() }, t.prototype.isAfter = function (e) { return this.valueOf() > t(e).valueOf() }, t.prototype.isBetween = function (e, s) { e = t(e).valueOf(), s = t(s).valueOf(); var i = this.valueOf(); return e > i && s < i || e < i && s > i }, t.prototype.daysInMonth = function () { return t(this.getFullYear(), this.getMonth() + 1, 0).getDate() }, t.prototype.add = function (t, e) { return t || (t = 0), s.call(this, t, e), this }, t.prototype.sub = function (t, e) { return t || (t = 0), s.call(this, -t, e), this }, t.prototype.set = function (t, e) { return t || (t = 0), s.call(this, t, e, !0), this }, t.prototype.distance = function (e, s) { var i = void 0, r = void 0; s ? (i = t(e).valueOf(), r = t(s).valueOf()) : (i = this.valueOf(), r = t(e).valueOf()); var n = t(i - r); return n.__distance_begin__ = i, n.__distance_end__ = r, n }, t.prototype.startOf = function () { switch (arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "DD") { case "mm": return t(this.format("YYYY-MM-DD hh:mm:00")); case "hh": return t(this.format("YYYY-MM-DD hh:00:00")); case "DD": return t(this.format("YYYY-MM-DD 00:00:00")); case "ww": case "WW": return t(this.firstDayOfWeek().format("YYYY-MM-DD 00:00:00")); case "MM": return t(this.format("YYYY-MM-01 00:00:00")); case "YY": case "YYYY": return t(this.format("YYYY-01-01 00:00:00")) } }, t.prototype.endOf = function () { switch (arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "DD") { case "mm": return t(this.format("YYYY-MM-DD hh:mm:59")); case "hh": return t(this.format("YYYY-MM-DD hh:59:59")); case "DD": return t(this.format("YYYY-MM-DD 23:59:59")); case "ww": case "WW": return t(this.firstDayOfWeek().add(6, "DD").format("YYYY-MM-DD 23:59:59")); case "MM": return t(this.lastDay().format("YYYY-MM-DD 23:59:59")); case "YY": case "YYYY": return t(this.set(12, "MM").lastDay().format("YYYY-MM-DD 23:59:59")) } }, t.prototype.firstDay = function () { return t(this.getFullYear(), this.getMonth(), 1) }, t.prototype.lastDay = function () { return t(this.getFullYear(), this.getMonth() + 1, 0) }, t.prototype.firstDayOfWeek = i, t });
\ No newline at end of file
pages/activity-detail/activity-detail.js 0 → 100644
Page({
data: {
// banner 列表数据
banner: [],
bannerIndex: 0,
bannerHeight: 300,
info: {},
},
onLoad: function (options) {
this.queryDetail()
},
/**
* 获取 banner 渲染数据
* @function
* @param {string} - funcToken
* @returns
*/
queryDetail: function () {
let response = {
banner: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/banner-1.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/banner-2.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/banner-3.png',
],
title: '艺术花坊国际花艺设计基础知识交流分享会',
date: '6月30日 - 7月12日 10:00 - 18:30',
address: '艺术花坊五号展厅',
quota: '50人',
describe: '跟随老师结合各类花材，运用色彩，将生活灵感巧妙实践于花艺作品中。体验者全程鲜花实操亲自参与鲜花制作，用花木来抒发情怀，从而点缀生活中的美。',
contact: '18000000000'
}
this.setData({
banner: response.banner,
info: {
title: response.title,
date: response.date,
address: response.address,
quota: response.quota,
describe: response.describe,
contact: response.contact,
}
})
},
onContact: function () {
wx.navigateTo({
url: '/pages/activity-entry/activity-entry'
})
},
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
eventSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
})
\ No newline at end of file
pages/activity-detail/activity-detail.wxml 0 → 100644
<navigation class="navigation" titleText="主题活动" backIcon="/image/back.png"></navigation>
<view class="container">
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange">
<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 bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-2.png" mode="widthFix"></image>
</view>
</view>
<view class="detail">
<view class="detail-title row">
<text>{{info.title}}</text>
</view>
<view class="detail-other col">
<view class="row align-c">
<text>活动时间</text>
<text>{{info.date}}</text>
</view>
<view class="row align-c">
<text>活动地址</text>
<text>{{info.address}}</text>
</view>
<view class="row align-c">
<text>报名名额</text>
<text>{{info.quota}}</text>
</view>
</view>
<view class="detail-describe">
<text>{{info.describe}}</text>
</view>
</view>
<view class="contact">
<l-button size="long" bindtap="onContact">立即报名</l-button>
</view>
</view>
\ No newline at end of file
pages/activity-detail/activity-detail.wxss 0 → 100644
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 800rpx;
background: #ffffff;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 680rpx;
left: 0;
}
.banner-wave {
z-index: 1100;
position: relative;
top: 740rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.banner-wave image {
width: 750rpx;
height: 60rpx;
}
/* 详情样式 */
.detail {
padding-bottom: 200rpx;
}
.detail-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.detail-other {
margin-top: 32rpx;
padding: 0 40rpx 48rpx 40rpx;
}
.detail-other view {
margin-top: 24rpx;
}
.detail-other view text:nth-child(1) {
width: 120rpx;
height: 42rpx;
margin-right: 32rpx;
font-size: 30rpx;
font-weight: lighter;
color: #959DA9;
line-height: 42rpx;
}
.detail-other view text:nth-child(2) {
width: 518rpx;
height: 40rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
}
.detail-describe {
width: 670rpx;
min-height: 200rpx;
margin: 0 auto;
padding-top: 48rpx;
border-top: 1rpx #E2E7EF solid;
font-size: 30rpx;
color: #15191F;
line-height: 50rpx;
}
/* 立即报名 */
.contact {
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 160rpx;
padding: 32rpx 40rpx;
border-top: 1rpx #E2E7EF solid;
background: #ffffff;
}
\ No newline at end of file
pages/activity-entry/activity-entry.js 0 → 100644
Page({
data: {
formType: 1,
entryComplete: false,
},
onLoad: function (options) {
console.log(options)
this.setData({
formType: Number(options.type)
})
},
onServic: function () {
wx.makePhoneCall({
phoneNumber: '18000000000'
})
},
onSubmit: function () {
this.setData({
entryComplete: true
})
},
onEntryComplete: function () {
this.setData({
entryComplete: false,
})
wx.navigateBack({
delta: 1
})
},
})
\ No newline at end of file
pages/activity-entry/activity-entry.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/activity-entry/activity-entry.wxml 0 → 100644
<navigation class="navigation" titleText="活动报名" backIcon="/image/back.png"></navigation>
<view class="entry-complete row con-c align-c" wx:if="{{entryComplete}}">
<view class="entry-complete-tip">
<image src="./image/tip-1.png"></image>
<l-button l-class="button" plain="{{true}}" bind:lintap="onEntryComplete">我知道了</l-button>
</view>
</view>
<!-- 入园预约 -->
<view class="container">
<view class="form-title row con-s align-c">
<text>报名活动</text>
</view>
<view class="entry-tip row align-c">
<view class="row align-c">
<image src="./image/entry-1.png"></image>
</view>
<view class="col">
<text class="entry-tip-title">艺术花坊插花交流分享会</text>
<text class="entry-tip-date">6月30日-7月15日 10:00-12:00</text>
</view>
</view>
<view class="form-title row con-s align-c">
<text>报名信息</text>
</view>
<view class="form">
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">姓 名</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">手 机 号</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" placeholder-class="input-tip" placeholder="请输入手机号"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">报名人数</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">报名时间</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
</view>
</view>
</view>
<view class="entry-operation">
<l-button size="long" bind:lintap="onSubmit">确认报名</l-button>
</view>
</view>
\ No newline at end of file
pages/activity-entry/activity-entry.wxss 0 → 100644
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.container {
margin-top: 100rpx;
}
/* 预约完成 */
.entry-complete {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
}
.entry-complete-tip {
position: relative;
width: 606rpx;
height: 840rpx;
}
.entry-complete-tip image {
width: 606rpx;
height: 840rpx;
}
.entry-complete .button {
position: absolute;
bottom: 64rpx;
left: 88rpx;
width: 432rpx;
height: 80rpx;
border: 1rpx #15191f solid;
border-radius: 4rpx;
color: #15191f;
background: #fefcf9;
}
/* 预约提示 */
.entry-tip {
position: relative;
width: 670rpx;
height: 216rpx;
margin-top: 56rpx;
padding: 40rpx 32rpx;
border-radius: 4rpx;
background: #F5F6F8;
}
.entry-tip image {
width: 140rpx;
height: 136rpx;
margin-right: 32rpx;
}
.entry-tip-title {
width: 434rpx;
height: 42rpx;
font-size: 30rpx;
font-weight: bold;
color: #15191F;
line-height: 42rpx;
}
.entry-tip-date {
width: 434rpx;
height: 36rpx;
margin-top: 16rpx;
font-size: 26rpx;
color: #656E7B;
line-height: 36rpx;
}
.ornament-wave {
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 50rpx;
}
/* 表单 */
.form-title {
width: 750rpx;
margin-top: 80rpx;
padding: 0 40rpx;
font-size: 30rpx;
color: #959DA9;
}
.input-label {
width: 160rpx;
height: 80rpx;
line-height: 42rpx;
color: #1E2025;
}
.input-wrap {
width: 510rpx;
height: 80rpx;
margin: 36rpx 0;
padding: 0 24rpx;
border: 1rpx #DBDFE5 solid;
border-radius: 4rpx;
}
.input-tip {
font-size: 30rpx;
color: #C2C7CF;
line-height: 32rpx;
}
.quota {
position: relative;
top: -20rpx;
right: 0;
}
.quota text:nth-child(1) {
font-size: 30rpx;
color: #1E2025;
}
.quota text:nth-child(2) {
font-size: 30rpx;
color: #86C5E1;
}
/* 操作按钮 */
.entry-operation {
width: 750rpx;
padding: 30rpx 40rpx;
background: #ffffff;
}
.entry-operation-button {
margin-bottom: 40rpx;
}
\ No newline at end of file
pages/activity/activity.js 0 → 100644
import iMiment from '../../npm/miment.js'
Page({
data: {
activity: [],
other: [],
},
onLoad: function () {
this.queryActivity()
this.queryOther()
},
queryActivity: function () {
let response = [
{
id: '1',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-1.png',
title: '夏日音乐节',
date: '6月30日-7月12日 10:00-12:00',
describe: '古典、电影、摇滚、民乐...无论你喜好哪种口味，都能在这里找到你的菜！',
}, {
id: '2',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-2.png',
title: '茶艺手作体验空间',
date: '7月25日-8月25日 10:00-12:00',
describe: '茶文化，以人为本，借此一叶一盏修心修德，茶席可看作茶人于 尘世间安身之处，寄托理想之所',
}, {
id: '3',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-3.png',
title: '书画艺术作品鉴赏分享活动',
date: '7月25日-8月25日 10:00-12:00',
describe: '历史画作历经数千年的沧桑巨变发展到今天，艺术魅力依然光彩照人，一起来感受它们的妙不可言',
}
]
this.setData({
activity: response
})
},
queryOther: function () {
let response = [
{
id: '1',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-other-1.png',
title: 'SPA养心体验',
date: '7月25日-8月25日',
describe: '',
}, {
id: '2',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-other-2.png',
title: '花艺鉴赏活动',
date: '7月25日-8月25日',
describe: '',
}, {
id: '3',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/activity/activity-other-3.png',
title: '划船比赛',
date: '7月25日-8月25日',
describe: '',
},
]
this.setData({
other: response
})
},
onActivityDetail: function (funcItem) {
wx.navigateTo({
url: '/pages/activity-detail/activity-detail'
})
}
})
\ No newline at end of file
pages/activity/activity.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/activity/activity.wxml 0 → 100644
<navigation class="navigation" titleText="主题活动" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="title row">
<image src="./image/title.png"></image>
</view>
<view class="list">
<block wx:for="{{activity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="item" data-id="{{item.id}}" bindtap="onActivityDetail">
<view class="item-cover" wx:if="{{item.cover !== ''}}">
<image src="{{item.cover}}" mode="aspectFill"></image>
</view>
<view class="item-info col">
<text class="item-title">{{item.title}}</text>
<text class="item-date">{{item.date}}</text>
<text class="item-describe">{{item.describe}}</text>
</view>
</view>
</block>
</view>
<view class="other row">
<block wx:for="{{other}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="other-item col" bindtap="onActivityDetail">
<view>
<image src="{{item.cover}}"></image>
</view>
<view class="other-item-info col">
<text>{{item.title}}</text>
<text>{{item.date}}</text>
</view>
</view>
</block>
</view>
</view>
\ No newline at end of file
pages/activity/activity.wxss 0 → 100644
.navigation {
position: relative;
top: 0;
left: 0;
}
.container {
background: linear-gradient(#ffffff, #F2F2F2);
}
.title {
width: 750rpx;
height: 96rpx;
margin-top: 60rpx;
padding: 0 40rpx;
}
.title image {
width: 184rpx;
height: 96rpx;
}
/* 活动列表 */
.list {
padding: 0 40rpx 50rpx 40rpx;
}
.item {
width: 670rpx;
height: 644rpx;
margin-top: 48rpx;
border-radius: 4rpx;
background: #ffffff;
}
.item-info {
padding: 0 32rpx;
}
.item-title {
width: 606rpx;
height: 48rpx;
margin-top: 30rpx;
font-size: 34rpx;
font-weight: bold;
color: #15191F;
line-height: 48rpx;
}
.item-date {
width: 606rpx;
height: 36rpx;
margin-top: 24rpx;
font-size: 26rpx;
color: #15191F;
line-height: 36rpx;
}
.item-describe {
width: 606rpx;
height: 72rpx;
margin-top: 16rpx;
font-size: 26rpx;
color: #959DA9;
line-height: 36rpx;
}
.item-cover image {
width: 670rpx;
height: 376rpx;
}
/* 往期活动 */
.other {
width: 710rpx;
margin-left: 40rpx;
margin-bottom: 50rpx;
overflow: scroll;
}
.other-item {
width: 286rpx;
height: 476rpx;
margin-right: 32rpx;
background: #ffffff;
border-radius: 4rpx;
}
.other-item-info {
padding: 0 32rpx;
}
.other-item-info text {
height: 36rpx;
margin-top: 12rpx;
font-size: 26rpx;
font-weight: bold;
color: #15191F;
line-height: 36rpx;
}
.other-item image {
width: 286rpx;
height: 340rpx;
}
\ No newline at end of file
pages/appointment/appointment.js 0 → 100644
Page({
data: {
formType: 1,
appointmentComplete: false,
},
onLoad: function (options) {
console.log(options)
this.setData({
formType: Number(options.type)
})
},
onServic: function () {
wx.makePhoneCall({
phoneNumber: '18000000000'
})
},
onSubmit: function () {
this.setData({
appointmentComplete: true
})
},
onAppointmentComplete: function () {
this.setData({
appointmentComplete: false,
})
},
})
\ No newline at end of file
pages/appointment/appointment.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/appointment/appointment.wxml 0 → 100644
<navigation class="navigation" backIcon="/image/back-w.png"></navigation>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
<view class="appointment-complete-tip">
<image wx:if="{{formType === 1}}" src="./image/tip-1.png"></image>
<image wx:if="{{formType === 2}}" src="./image/tip-2.png"></image>
<l-button l-class="button" plain="{{true}}" bind:lintap="onAppointmentComplete">我知道了</l-button>
</view>
</view>
<!-- 入园预约 -->
<view wx:if="{{formType === 1}}" class="container">
<view class="appointment-tip">
<image class="background-image" src="./image/banner-1.png"></image>
<image class="ornament-wave" src="/image/ornament-2.png" mode="widthFix"></image>
</view>
<view class="form-title row con-s align-c">
<text>填写预约信息</text>
</view>
<view class="form">
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">姓 名</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">手 机 号</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" placeholder-class="input-tip" placeholder="请输入手机号"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">预约人数</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">预约日期</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
</view>
</view>
<view class="quota row con-e align-c">
<text>剩余名额：</text>
<text>100</text>
</view>
</view>
<view class="appointment-operation">
<l-button l-class="appointment-operation-button" size="long" bind:lintap="onSubmit">确认预约</l-button>
<l-button size="long" plain="{{true}}" bind:lintap="onServic">电话咨询</l-button>
</view>
</view>
<!-- 看房预约 -->
<view wx:if="{{formType === 2}}" class="container">
<view class="appointment-tip">
<image class="background-image" src="./image/banner-2.png"></image>
<image class="ornament-wave" src="/image/ornament-2.png" mode="widthFix"></image>
</view>
<view class="form-title row con-s align-c">
<text>填写预约信息</text>
</view>
<view class="form">
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">姓 名</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">手 机 号</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input" placeholder-class="input-tip" placeholder="请输入手机号"></input>
</view>
</view>
<view class="row align-c">
<view class="input-label row align-c">
<text space="ensp">看房日期</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
</view>
</view>
</view>
<view class="appointment-operation">
<l-button size="long" bind:lintap="onSubmit">确认预约</l-button>
</view>
</view>
\ No newline at end of file
pages/appointment/appointment.wxss 0 → 100644
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
/* 预约完成 */
.appointment-complete {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
}
.appointment-complete-tip {
position: relative;
width: 606rpx;
height: 840rpx;
}
.appointment-complete-tip image {
width: 606rpx;
height: 840rpx;
}
.appointment-complete .button {
position: absolute;
bottom: 64rpx;
left: 88rpx;
width: 432rpx;
height: 80rpx;
border: 1rpx #15191f solid;
border-radius: 4rpx;
color: #15191f;
background: #fefcf9;
}
/* 预约提示 */
.appointment-tip {
position: relative;
width: 750rpx;
height: 552rpx;
}
.appointment-tip image {
width: 750rpx;
height: 552rpx;
}
.ornament-wave {
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 50rpx;
}
/* 表单 */
.form-title {
width: 750rpx;
margin-top: 40rpx;
padding: 0 40rpx;
font-size: 30rpx;
color: #959DA9;
}
.input-label {
width: 160rpx;
height: 80rpx;
line-height: 42rpx;
color: #1E2025;
}
.input-wrap {
width: 510rpx;
height: 80rpx;
margin: 36rpx 0;
padding: 0 24rpx;
border: 1rpx #DBDFE5 solid;
border-radius: 4rpx;
}
.input-tip {
font-size: 30rpx;
color: #C2C7CF;
line-height: 32rpx;
}
.quota {
position: relative;
top: -20rpx;
right: 0;
}
.quota text:nth-child(1) {
font-size: 30rpx;
color: #1E2025;
}
.quota text:nth-child(2) {
font-size: 30rpx;
color: #86C5E1;
}
/* 操作按钮 */
.appointment-operation {
width: 750rpx;
padding: 30rpx 40rpx;
background: #ffffff;
}
.appointment-operation-button {
margin-bottom: 40rpx;
}
\ No newline at end of file
pages/home/component/strategy-item/strategy-item.js
...@@ -13,6 +13,15 @@ Component({ ...@@ -13,6 +13,15 @@ Component({
}, },
lifetimes: {
attached: function () {
// console.log(this.data.data)
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/** /**
* 组件的方法列表 * 组件的方法列表
*/ */
......
pages/home/component/strategy-item/strategy-item.wxml
<!-- demo.wxml --> <!-- demo.wxml -->
<view class="component-strategy-item"> <view class="component-strategy-item">
<image src="{{data.image}}" mode="widthFix"></image> <image wx:if="{{data.index === 1}}" class="short" src="{{data.image}}" mode="aspectFill"></image>
<image wx:else src="{{data.image}}" mode="widthFix"></image>
<text class="component-strategy-item-title">{{data.title}}</text> <text class="component-strategy-item-title">{{data.title}}</text>
<text class="component-strategy-item-content">{{data.date}}</text> <text class="component-strategy-item-content">{{data.date}}</text>
</view> </view>
\ No newline at end of file
pages/home/component/strategy-item/strategy-item.wxss
...@@ -8,7 +8,12 @@ ...@@ -8,7 +8,12 @@
} }
.component-strategy-item image { .component-strategy-item image {
width: 100%; width: 328rpx;
}
.component-strategy-item .short {
width: 328rpx;
height: 354rpx;
} }
.component-strategy-item-title { .component-strategy-item-title {
......
pages/home/home.js
import iLinuiUtil from "../../miniprogram_npm/lin-ui/utils/device-util"
let logicData = { let logicData = {
pageScrollLock: false, pageScrollLock: false,
pageScrollTimer: 0, pageScrollTimer: 0,
...@@ -7,84 +5,165 @@ let logicData = { ...@@ -7,84 +5,165 @@ let logicData = {
Page({ Page({
data: { data: {
imitateScrollBase: 0, // 滑动起始位置 // 导航栏相关属性
imitateScrollLocation: 0, // 当前位置 navigationStatusHeight: 0,
imitateScrollPageHeight: 0, // 页面整体高度 navigationCapsuleTop: 0,
imitateScrollSmoothness: 2, // 滚动速率 navigationAnimationShow: 0,
isNavigationLogoWhite: true,
// banner 列表数据
banner: [],
bannerIndex: 0,
bannerHeight: 300,
navigationStyle: 'position: absolute; top: -navigationHeightrpx; left: 0;', // notice 列表数据
navigationAnimationShow: 0, notice: [],
navigationHeight: 120, // strategy 列表数据
strategy: [],
strategyList: [],
},
onLoad: function (options) {
this.setData({
navigationStatusHeight: wx.getSystemInfoSync().statusBarHeight,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
})
banner: [ this.queryBanner()
'../../image/banner-0.png', this.queryStrategy()
'../../image/banner-1.png', // 游客攻略瀑布列表
'../../image/banner-2.png' wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
], },
bannerIndex: 0,
bannerHeight: 300, /**
* 获取 banner 渲染数据
* @function
* @param {string} - funcToken
* @returns
*/
queryBanner: function () {
let funcUrl = [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/banner/banner-0.jpg',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/banner/banner-1.jpg',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/banner/banner-2.jpg',
]
this.setData({
banner: funcUrl
})
},
strategyList: [{ /**
* 获取 strategy 渲染数据
* @function
* @param {string} - funcToken
* @returns
*/
queryStrategy: function () {
let response = [{
id: '1', id: '1',
image: '/pages/home/image/strategy-01.png', index: 0,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-01.jpg',
title: '碧海银湖里的自然系饮食|原味舒食。', title: '碧海银湖里的自然系饮食|原味舒食。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '2', id: '2',
image: '/pages/home/image/strategy-02.png', index: 1,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-02.jpg',
title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米', title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '3', id: '3',
image: '/pages/home/image/strategy-03.png', index: 2,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-03.jpg',
title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。', title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '4', id: '4',
image: '/pages/home/image/strategy-04.png', index: 3,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-04.jpg',
title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。', title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '5', id: '5',
image: '/pages/home/image/strategy-05.png', index: 4,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-05.jpg',
title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。', title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '6', id: '6',
image: '/pages/home/image/strategy-06.png', index: 5,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-06.jpg',
title: '懂生活的你，必定喜欢懂品质的碧海银湖。', title: '懂生活的你，必定喜欢懂品质的碧海银湖。',
date: '2020-07-10' date: '2020-07-10'
}], }]
isNavigationLogoWhite: true, this.setData({
strategyList: response
})
}, },
onLoad: function (options) {
// 游客攻略瀑布列表
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
// wx.hideTabBar()
// wx.showTabBar()
wx.getSystemInfo({ /**
success: (result) => { * 获取 notice 渲染数据
console.log(result) * @function
this.setData({ * @param {string} - funcToken
imitateScrollPageHeight: result.screenHeight * @returns
*/
queryNotice: function () {
},
onNotice: function (event) {
wx.navigateTo({
url: '/pages/notice/notice'
}) })
}, },
onAppointmentInto: function () {
wx.navigateTo({
url: '/pages/appointment/appointment?type=1'
}) })
}, },
onAppointmentHouse: function () {
console.log('onAppointmentHouse')
wx.navigateTo({
url: '/pages/appointment/appointment?type=2'
})
},
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
/**
* 攻略点击事件
* @function
* @param {object} - funcItem
* @returns
*/
onStrategyDetail: function (funcItem) { onStrategyDetail: function (funcItem) {
console.log(funcItem.detail.item.id) console.log(funcItem.detail.item.id)
wx.navigateTo({ wx.navigateTo({
url: '/pages/home-strategy/home-strategy?id=' + funcItem.detail.item.id url: '/pages/strategy/strategy?id=' + funcItem.detail.item.id
}) })
}, },
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function(funcEvent) { onPageScroll: function(funcEvent) {
console.log('onPageScroll')
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
logicData.pageScrollLock = true logicData.pageScrollLock = true
...@@ -96,15 +175,17 @@ Page({ ...@@ -96,15 +175,17 @@ Page({
}) })
} }
let funcOpacity = (funcEvent.scrollTop - this.data.bannerHeight) / 10 let funcOpacity = (funcEvent.scrollTop - this.data.bannerHeight) / 40
this.setData({ this.setData({
navigationAnimationShow: funcOpacity navigationAnimationShow: funcOpacity
}) })
console.log(funcOpacity)
} }
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) { if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
this.setData({ this.setData({
isNavigationLogoWhite: true isNavigationLogoWhite: true,
navigationAnimationShow: 0
}) })
} }
...@@ -114,10 +195,4 @@ Page({ ...@@ -114,10 +195,4 @@ Page({
clearTimeout(logicData.pageScrollTimer) clearTimeout(logicData.pageScrollTimer)
}, 40) }, 40)
}, },
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
}) })
\ No newline at end of file
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, 1)'}}"></navigation> <navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation>
<view class="container"> <view class="container">
<!-- <view class="container" bindtouchstart='imitateScrollBase' bindtouchmove='imitateScrollMove'> --> <image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationCapsuleTop + 'px'}}"></image>
<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}}" style="{{'top: ' + navigationCapsuleTop + 'px'}}"></image>
<image class="navigation-bar-image" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}"></image>
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{true}}" interval="2000" duration="500" bindchange="onSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item"> <swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image> <image class="banner-swiper-image" src="{{item}}"></image>
...@@ -22,25 +21,30 @@ ...@@ -22,25 +21,30 @@
<image src="/image/ornament-0.png" mode="widthFix"></image> <image src="/image/ornament-0.png" mode="widthFix"></image>
</view> </view>
<view class="banner-notice"> <view class="banner-notice row align-c" bindtap="onNotice">
<l-list l-class="banner-notice-item" title="温泉公寓现已接受预定" image="/pages/home/image/inform.png"></l-list> <image src="./image/inform.png"></image>
<text>最新动态</text>
<text>温泉公寓现已接受预定</text>
<image src="../../image/more-g.png"></image>
</view> </view>
</view> </view>
<view class="detail"> <view class="detail">
<!-- 预约公告 --> <!-- 预约公告 -->
<view class="night row con-b"> <view class="night row con-b">
<view> <image src="./image/into.png" mode="aspectFit"></image>
<view class="title row align-c"> <view class="night-content" bindtap="onAppointmentInto">
<view class="night-info-title row align-c">
<image src="./image/night.png"></image> <image src="./image/night.png"></image>
<text>夜间入园预约</text> <text>夜间入园预约</text>
</view> </view>
<view class="describe"> <view class="night-info-describe">
<text>20:00后入园需提前预约，每日限流200人</text> <text>20:00后入园需提前预约，每日限流200人</text>
</view> </view>
</view> </view>
<view> <view class="night-info-more row align-c">
<l-list title="去预约" l-class="list" l-content-class="list-title"></l-list> <text>去预约</text>
<image src="../../image/more-w.png"></image>
</view> </view>
</view> </view>
...@@ -59,12 +63,16 @@ ...@@ -59,12 +63,16 @@
<!-- 预约看房 --> <!-- 预约看房 -->
<view class="appointment detail-item"> <view class="appointment detail-item">
<image src="./image/title-appointment.png"></image> <image src="./image/title-appointment.png"></image>
<view class="appointment-content"> <view class="appointment-content" bindtap="onAppointmentHouse">
<image class="background-image" src="./image/appointment.png" mode="aspectFit"></image> <image class="background-image" src="./image/appointment.png" mode="aspectFit"></image>
<view class="operation col"> <view class="row con-b align-c">
<text>温泉公寓</text> <view class="col">
<text>体验海洋温泉，享受湿地与海景双重景观</text> <text class="appointment-info-title">看房预约</text>
<button>立即预约</button> <text class="appointment-info-describe">体验海洋温泉，享受湿地与海景双重景观</text>
</view>
<view class="appointment-info-more">
<image src="../../image/more-w.png"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -73,7 +81,7 @@ ...@@ -73,7 +81,7 @@
<view class="strategy detail-item"> <view class="strategy detail-item">
<image src="./image/title-strategy.png"></image> <image src="./image/title-strategy.png"></image>
<view class="strategy-content"> <view class="strategy-content">
<image class="background-image" src="./image/strategy.png" mode="aspectFit"></image> <image class="background-image" src="https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-00.jpg" mode="aspectFit"></image>
<view class="operation col"> <view class="operation col">
<text>凉爽一夏，在银湖湾听海踏浪</text> <text>凉爽一夏，在银湖湾听海踏浪</text>
</view> </view>
......
pages/home/home.wxss
.navigation { .navigation {
z-index: 5; z-index: 1100;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -9,11 +9,10 @@ ...@@ -9,11 +9,10 @@
.navigation-bar-image { .navigation-bar-image {
z-index: 1100; z-index: 1100;
position: fixed; position: fixed;
top: 0; top: 60rpx;
left: 0; left: 50rpx;
width: 200rpx; width: 200rpx;
height: 60rpx; height: 60rpx;
margin: 60rpx 0 0 50rpx;
} }
...@@ -68,8 +67,28 @@ ...@@ -68,8 +67,28 @@
border-radius: 4rpx; border-radius: 4rpx;
} }
.banner-notice-item { .banner-notice text:nth-child(2) {
border: none !important; width: 120rpx;
height: 42rpx;
margin-left: 16rpx;
font-size: 30rpx;
font-weight: bold;
color: #15191F;
line-height: 42rpx;
}
.banner-notice text:nth-child(3) {
width: 366rpx;
height: 36rpx;
margin-left: 24rpx;
font-size: 26rpx;
color: #15191F;
line-height: 36rpx;
}
.banner-notice image {
width: 40rpx;
height: 40rpx;
} }
.detail { .detail {
...@@ -87,44 +106,59 @@ ...@@ -87,44 +106,59 @@
height: 46rpx; height: 46rpx;
} }
/* 入园预约 */
.night { .night {
position: relative;
width: 670rpx; width: 670rpx;
height: 150rpx; height: 150rpx;
padding: 28rpx 32rpx; padding: 28rpx 32rpx;
background: #ffffff;
box-shadow: 0 16rpx 48rpx 0 rgba(0, 0, 0, .07); box-shadow: 0 16rpx 48rpx 0 rgba(0, 0, 0, .07);
border-radius: 4rpx; border-radius: 4rpx;
} }
.night .content { .night > image {
color: #000000 !important; position: absolute;
top: 0;
left: 0;
width: 670rpx;
height: 150rpx;
} }
.night .title image { .night-content {
z-index: 3;
}
.night-info-title {
height: 42rpx;
font-size: 30rpx;
font-weight: bold;
color: #ffffff;
line-height: 42rpx;
}
.night-info-title image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-right: 16rpx; margin-right: 16rpx;
} }
.night .title text { .night-info-describe {
font-weight: 800;
}
.night .describe {
margin-top: 20rpx; margin-top: 20rpx;
font-size: 22rpx; font-size: 22rpx;
color: #959DA9; color: #ffffff;
} }
.night .list { .night-info-more {
height: 94rpx; z-index: 3;
margin: 0; font-size: 26rpx;
padding: 0; color: #ffffff;
border: none; line-height: 36rpx;
} }
.night .list-title { .night-info-more image {
margin: 0 8rpx 4rpx 0; width: 32rpx;
height: 32rpx;
margin-left: 8rpx;
} }
/* 智慧导览 */ /* 智慧导览 */
...@@ -165,40 +199,39 @@ ...@@ -165,40 +199,39 @@
z-index: 3; z-index: 3;
position: relative; position: relative;
width: 670rpx; width: 670rpx;
height: 402rpx; height: 188rpx;
margin-top: 32rpx; margin-top: 32rpx;
padding: 48rpx 0 0 40rpx;
border-radius: 4rpx; border-radius: 4rpx;
overflow: hidden;
} }
.appointment-content .operation { .appointment-info-title {
height: 402rpx; width: 136rpx;
margin: 0 40rpx;
padding-top: 148rpx;
}
.appointment-content .operation text:nth-child(1) {
height: 40rpx; height: 40rpx;
font-size: 38rpx; font-size: 34rpx;
font-weight: 800; font-weight: bold;
color: #ffffff; color: #ffffff;
line-height: 40rpx;
} }
.appointment-content .operation text:nth-child(2) { .appointment-info-describe {
width: 468rpx;
height: 40rpx; height: 40rpx;
margin-top: 30rpx; margin-top: 12rpx;
font-size: 26rpx; font-size: 26rpx;
color: #ffffff; color: #ffffff;
line-height: 40rpx;
} }
.appointment-content .operation button { .appointment-info-more {
z-index: -1; margin-right: 32rpx;
width: 220rpx; }
height: 68rpx;
margin-top: 26rpx; .appointment-info-more image {
font-size: 26rpx; z-index: 1900;
color: #ffffff; width: 32rpx;
background:rgba(134, 197, 225, 1); height: 32rpx;
border-radius: 4rpx;
} }
/* 游客攻略 */ /* 游客攻略 */
......
pages/home/image/appointment.png
pages/home/image/appointment.png

35.5 KB | W: | H:

pages/home/image/appointment.png

60.4 KB | W: | H:

pages/home/image/appointment.png
pages/home/image/appointment.png
pages/home/image/appointment.png
pages/home/image/appointment.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/night.png
pages/home/image/night.png

2.77 KB | W: | H:

pages/home/image/night.png

3.89 KB | W: | H:

pages/home/image/night.png
pages/home/image/night.png
pages/home/image/night.png
pages/home/image/night.png
  • 2-up
  • Swipe
  • Onion skin
pages/mine/mine.wxml
<navigation class="navigation" titleText="我的" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="我的"></navigation>
<view class="container"> <view class="container">
<view class="mine"> <view class="mine">
<image class="background-image" src="./image/mine.png"></image> <image class="background-image" src="./image/mine.png"></image>
<view class="row align-c"> <view class="row align-c">
<view class="mine-avatar"> <view class="mine-avatar">
<l-avatar size="112" icon="user" /> <l-avatar size="112" src="/pages/mine/image/avatar.png"/>
</view> </view>
<view class="mine-info col"> <view class="mine-info col">
<view class="row align-c"> <view class="row align-c">
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<image src="./image/inform.png"></image> <image src="./image/inform.png"></image>
</view> </view>
<view> <view>
<text>18030242524</text> <text>180****2524</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
</view> </view>
<view class="menu"> <view class="menu">
<l-list l-content-class="menu-title" title="我的活动"></l-list> <l-list l-class="menu-item" l-content-class="menu-title" title="我的活动"></l-list>
<l-list l-content-class="menu-title" title="我的预约"></l-list> <l-list l-class="menu-item" l-content-class="menu-title" title="我的预约"></l-list>
<l-list l-content-class="menu-title" title="服务中心"></l-list> <l-list l-class="menu-item" l-content-class="menu-title" title="服务中心"></l-list>
</view> </view>
</view> </view>
\ No newline at end of file
pages/mine/mine.wxss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.mine-info view:nth-child(2) { .mine-info view:nth-child(2) {
margin-top: 20rpx; margin-top: 14rpx;
} }
.mine-info view:nth-child(2) text { .mine-info view:nth-child(2) text {
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.status-symbol text:nth-child(2) { .status-symbol text:nth-child(2) {
margin-top: 14rpx; margin-top: 10rpx;
font-size: 22rpx; font-size: 22rpx;
color: #483522; color: #483522;
} }
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
width: 110rpx; width: 110rpx;
height: 52rpx; height: 52rpx;
border-radius: 2rpx; border-radius: 2rpx;
border:1px solid rgba(72,53,34,1); border: 1rpx solid rgba(72, 53, 34, 1) !important;
} }
.status-operation text { .status-operation text {
...@@ -64,10 +64,16 @@ ...@@ -64,10 +64,16 @@
.menu { .menu {
width: 750rpx; width: 750rpx;
margin-top: 60rpx; margin-top: 38rpx;
padding: 0 48rpx; padding: 0 48rpx;
} }
.menu-item {
height: 92rpx;
border-style: none !important;
}
.menu-title { .menu-title {
font-weight: bolder; font-weight: bolder;
font-size: 30rpx;
} }
\ No newline at end of file
pages/notice-detail/notice-detail.js 0 → 100644
Page({
data: {
notice: {}
},
onLoad: function (options) {
this.queryNotice()
},
queryNotice: function () {
let response = {
title: '温泉洋房现已接受预定',
date: '2020-06-15',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/notice/item-0.png',
describe: [
'既能体验海洋公园，又能享受湿地与海景双重景观的49间温泉洋房开放啦！并接受广大游客的预订。',
'房间宽敞明亮，阳光充足。从布局、餐饮、家具设计到色彩环境，都有专业的健康和美学设计，不同主题的房间满足您个性化的需求。包含室外泳池和音乐广场，随心舒适，让您随时随地惬意的自在享受。',
'游客可在首页-预约看房打电话进行温泉洋房预定。预定电话：0431-96518'
]
}
this.setData({
notice: response
})
}
})
\ No newline at end of file
pages/notice-detail/notice-detail.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/notice-detail/notice-detail.wxml 0 → 100644
<navigation class="navigation" titleText="动态详情" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="title row con-s">
<text>{{notice.title}}</text>
</view>
<view class="date row con-s">
<text>{{notice.date}}</text>
</view>
<view class="cover">
<image src="{{notice.cover}}" mode="center"></image>
</view>
<view class="describe">
<block wx:for="{{notice.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view>
<text>{{item}}</text>
</view>
</block>
</view>
</view>
\ No newline at end of file
pages/notice-detail/notice-detail.wxss 0 → 100644
.navigation {
position: relative;
top: 0;
left: 0;
}
.title {
width: 670rpx;
margin-top: 60rpx;
font-size: 46rpx;
font-weight: bolder;
color: #15191F;
}
.date {
width: 670rpx;
margin-top: 40rpx;
font-size: 32rpx;
color: #959DA9;
}
.cover {
width: 670rpx;
margin-top: 60rpx;
}
.cover image {
width: 670rpx;
height: 288rpx;
/* margin-top: 14rpx; */
}
.describe {
width: 670rpx;
font-size: 30rpx;
color: #15191F;
}
.describe view {
margin-top: 50rpx;
}
pages/notice/notice.js 0 → 100644
import iMiment from '../../npm/miment.js'
Page({
data: {
notice: []
},
onLoad: function () {
this.queryNotice()
},
queryNotice: function () {
let response = [
{
id: '1',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/notice/item-0.png',
title: '温泉洋房现已接受预定',
date: '2020-08-03',
describe: '经过精心筹备，碧海银湖温泉洋房现已对外开放，既能体验海洋温泉，又能享受湿地与海景双重景观',
}, {
id: '2',
cover: '',
title: '新冠疫情期间入住规定与注意事项，请游客周知',
date: '2020-07-24',
describe: '世界卫生组织于2020年3月11日宣布新冠肺炎疫情已构成全球大流行，为了保护游客的健康和安全，景区制定以下细则。',
}
]
for (let i = 0, l = response.length; i < l; i++) {
response[i].date = iMiment(response[i].date).format('MM/DD')
}
this.setData({
notice: response
})
},
onNoticeDetail: function (funcItem) {
console.log(funcItem)
wx.navigateTo({
url: '/pages/notice-detail/notice-detail'
})
}
})
\ No newline at end of file
pages/notice/notice.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/notice/notice.wxml 0 → 100644
<navigation class="navigation" titleText="最新动态" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="title row con-b align-e">
<image src="./image/title-auxiliary.png"></image>
<image src="./image/title.png"></image>
</view>
<view class="notice-list">
<block wx:for="{{notice}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="notice-item" data-id="{{item.id}}" bindtap="onNoticeDetail">
<view class="notice-title row con-b">
<text>{{item.title}}</text>
<text>{{item.date}}</text>
</view>
<view class="notice-describe">
<text>{{item.describe}}</text>
</view>
<view class="notice-cover" wx:if="{{item.cover !== ''}}">
<image src="{{item.cover}}" mode="center"></image>
</view>
</view>
</block>
</view>
</view>
\ No newline at end of file
pages/notice/notice.wxss 0 → 100644
.navigation {
position: relative;
top: 0;
left: 0;
}
.title {
width: 750rpx;
height: 150rpx;
margin-top: 60rpx;
padding: 0 40rpx 50rpx 40rpx;
border-bottom: 1rpx #2C3035 solid;
}
.title image:nth-child(1) {
width: 130rpx;
height: 94rpx;
}
.title image:nth-child(2) {
width: 320rpx;
height: 122rpx;
}
/* 通知列表 */
.notice-item {
margin-top: 50rpx;
padding: 0 40rpx 50rpx 40rpx;
border-bottom: 1rpx #2C3035 solid;
}
.notice-title text {
font-size: 34rpx;
font-weight: bolder;
color: #15191F;
}
.notice-title text:nth-child(2) {
min-width: 150rpx;
text-align: right;
}
.notice-describe {
width: 670rpx;
margin-top: 24rpx;
}
.notice-describe text {
font-size: 22rpx;
color: #959DA9;
}
.notice-cover image {
width: 670rpx;
height: 376rpx;
margin-top: 40rpx;
}
\ No newline at end of file
pages/play/play.js
...@@ -7,28 +7,8 @@ let logicData = { ...@@ -7,28 +7,8 @@ let logicData = {
Page({ Page({
data: { data: {
testData: [ banner: [],
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png', bannerIndex: 0,
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-food.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
],
navigationBackground: 'rgba(0, 0, 0, 0)',
navigationFixed: false,
navigationFixedBoundary: 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: [ tab: [
{ {
...@@ -54,10 +34,15 @@ Page({ ...@@ -54,10 +34,15 @@ Page({
} }
], ],
tabIndex: 0, tabIndex: 0,
tabDetail: [],
navigationBackground: 'rgba(0, 0, 0, 0)',
navigationFixed: false,
navigationFixedBoundary: 0,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
detailImage: [],
detailImageUrl: [],
detailIndex: 0,
}, },
/** /**
...@@ -65,47 +50,136 @@ Page({ ...@@ -65,47 +50,136 @@ Page({
*/ */
onLoad: function (options) { onLoad: function (options) {
this.setData({ this.setData({
detailImageUrl: [this.data.testData[0]]
})
this.downloadDetail(this.data.detailIndex)
this.setData({
navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth
}) })
this.queryBanner()
this.queryDetail()
}, },
handleChange: function (e) { queryBanner: function () {
let response = [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-0.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-1.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/banner-2.png',
]
this.setData({ this.setData({
currentIndex: e.detail.current, banner: response
}) })
}, },
downloadDetail: function (funcIndex) { queryDetail: function () {
wx.downloadFile({ let response = [
url: this.data.detailImageUrl[funcIndex], {
success: (response) => { describe: [
let funcDetailImage = this.data.detailImage 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-healthy.png'
funcDetailImage.push(response.tempFilePath) ],
shop: [{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '元养水韵SPA馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00',
price: '¥20~¥50/人'
}]
}, {
describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-food.png'
],
shop: [{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
},
{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
}]
}, {
describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-food.png'
],
shop: [{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
},
{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
}]
}, {
describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-food.png'
],
shop: [{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
},
{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
price: '¥20~¥50/人'
}]
}, {
describe: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-healthy.png'
],
shop: [{
id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png',
name: '元养水韵SPA馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00',
price: '¥20~¥50/人'
}]
},
]
this.setData({ this.setData({
detailImage: funcDetailImage, tabDetail: response
detailIndex: this.data.detailIndex + 1
}) })
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
}, },
fail: (response) => {
console.log(response) onActivity: function () {
} wx.navigateTo({
url: '/pages/activity/activity'
}) })
}, },
onTabSelection: function (funcEvent) { onTabSelection: function (funcEvent) {
this.setData({ this.setData({
tabIndex: funcEvent.currentTarget.dataset.index, tabIndex: funcEvent.currentTarget.dataset.index
detailImageUrl: [this.data.testData[funcEvent.currentTarget.dataset.index]]
}) })
this.downloadDetail(0)
}, },
onPageScroll: function(funcEvent) { onPageScroll: function(funcEvent) {
...@@ -115,7 +189,6 @@ Page({ ...@@ -115,7 +189,6 @@ Page({
// logicData.pageScrollLock = true // logicData.pageScrollLock = true
// 判断标签吸顶边距 // 判断标签吸顶边距
console.log(funcEvent.scrollTop - this.data.navigationFixedBoundary)
if (funcEvent.scrollTop - this.data.navigationFixedBoundary > -20 && !this.data.navigationFixed) { if (funcEvent.scrollTop - this.data.navigationFixedBoundary > -20 && !this.data.navigationFixed) {
console.log('show') console.log('show')
this.setData({ this.setData({
...@@ -149,4 +222,17 @@ Page({ ...@@ -149,4 +222,17 @@ Page({
// clearTimeout(logicData.pageScrollTimer) // clearTimeout(logicData.pageScrollTimer)
// }, 20) // }, 20)
}, },
onShopDetail: function (funcItem) {
console.log(funcItem)
wx.navigateTo({
url: '/pages/shop-detail/shop-detail'
})
},
eventBannerChange: function (event) {
this.setData({
bannerIndex: event.detail.current
})
},
}) })
\ No newline at end of file
pages/play/play.wxml
<navigation class="navigation" background="{{navigationBackground}}"></navigation> <navigation class="navigation" background="{{navigationBackground}}"></navigation>
<view class="container"> <view class="container">
<!-- CapsuleBar 背景图片 --> <image class="navigation-bar-image" src="./image/title.png" style="{{'top: ' + (navigationCapsuleTop - 8) + 'px'}}"></image>
<image class="navigation-bar-image" src="./image/title.png"></image>
<!-- 吸顶板块标签 -->
<!-- <view class="tab tab-fixed row con-b align-c" hidden="{{!navigationFixed}}">
<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="banner"> <view class="banner">
<swiper autoplay circular interval="{{interval}}" next-margin="64rpx" bindchange="handleChange"> <swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item> <swiper-item>
<image src="{{item}}" class="{{currentIndex !== index ? 'banner-content': 'banner-content-active'}}"/> <image src="{{item}}" class="{{bannerIndex !== index ? 'banner-content': 'banner-content-active'}}"/>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>
<!-- 更多活动 --> <!-- 更多活动 -->
<view class="activity row con-e align-c"> <view class="activity row con-e align-c" bindtap="onActivity">
<text>查看全部活动</text> <text>查看全部活动</text>
<image src="/image/more.png"></image> <image src="/image/more.png"></image>
</view> </view>
...@@ -55,29 +39,42 @@ ...@@ -55,29 +39,42 @@
<view class="tab-blank" hidden="{{!navigationFixed}}"></view> <view class="tab-blank" hidden="{{!navigationFixed}}"></view>
<view class="detail"> <view class="detail">
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tabDetail[tabIndex].describe}}" 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>
<!-- <view class="detail-info col">
<view class="detail-info-title">
<text>元养水韵SPA馆</text>
</view> </view>
<view class="detail-info-describe">
<text>舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一</text> <view class="shop">
<block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="shop-item">
<view class="shop-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="shop-info col">
<view class="shop-logo">
<image src="{{item.logo}}"></image>
</view>
<view class="shop-title">
<text>{{item.name}}</text>
</view> </view>
<view class="detail-info-tip col"> <view class="shop-describe">
<text>{{item.describe}}</text>
</view>
<view class="shop-tip col">
<view class="row align-c"> <view class="row align-c">
<text class="tip-title">时间</text> <text class="tip-title">时间</text>
<text class="tip-describe">10:00~18:00</text> <text class="tip-describe">{{item.time}}</text>
</view> </view>
<view class="row align-c"> <view class="row align-c">
<text class="tip-title">票价</text> <text class="tip-title">票价</text>
<text class="tip-describe">¥20~¥50/人</text> <text class="tip-describe">{{item.price}}</text>
</view>
</view> </view>
<view class="shop-operation">
<l-button width="534" height="96" size="large" data-id="{{item.id}}" bindtap="onShopDetail">立即预定</l-button>
</view> </view>
<view class="detail-operation">
<l-button width="534" height="96" size="large">立即预定</l-button>
</view> </view>
</view> --> </view>
</block>
</view> </view>
</view> </view>
\ No newline at end of file
pages/play/play.wxss
...@@ -81,7 +81,7 @@ swiper-item { ...@@ -81,7 +81,7 @@ swiper-item {
} }
.tab-fixed { .tab-fixed {
z-index: 1900; z-index: 1700;
position: fixed; position: fixed;
top: 64px; top: 64px;
left: 0; left: 0;
...@@ -141,31 +141,67 @@ swiper-item { ...@@ -141,31 +141,67 @@ swiper-item {
margin-bottom: -10rpx; margin-bottom: -10rpx;
} }
.detail-info { /* 商店详情 */
.shop {
width: 750rpx;
min-height: 500rpx;
}
.shop-item {
position: relative;
width: 750rpx;
height: 1160rpx;
background: #f3f6fc;
}
.shop-cover,
.shop-cover image {
width: 750rpx;
height: 436rpx;
}
.shop-info {
position: absolute;
top: 230rpx;
left: 0;
width: 654rpx; width: 654rpx;
height: 562rpx; height: 770rpx;
margin: 0 48rpx; margin: 0 48rpx;
padding: 0 60rpx 60rpx 60rpx; padding: 40rpx 60rpx 0 60rpx;
border-radius: 0 0 4rpx 4rpx;
background: #ffffff; background: #ffffff;
} }
.detail-info-title { .shop-logo,
.shop-logo image {
width: 574rpx;
height: 120rpx;
}
.shop-title {
width: 304rpx;
height: 52rpx;
margin-top: 50rpx;
font-size: 38rpx; font-size: 38rpx;
font-weight: bolder; font-weight: bold;
color: #15191F;
line-height: 52rpx;
} }
.detail-info-describe { .shop-describe {
margin-top: 40rpx; width: 534rpx;
height: 72rpx;
font-size: 26rpx; font-size: 26rpx;
font-weight: lighter;
color: #959DA9;
line-height: 36rpx;
} }
.detail-info-tip { .shop-tip {
margin-top: 80rpx; margin-top: 80rpx;
font-size: 26rpx; font-size: 26rpx;
} }
.detail-info-tip > view { .shop-tip > view {
margin-top: 16rpx; margin-top: 16rpx;
} }
...@@ -180,6 +216,6 @@ swiper-item { ...@@ -180,6 +216,6 @@ swiper-item {
color: #15191F; color: #15191F;
} }
.detail-operation { .shop-operation {
margin-top: 64rpx; margin-top: 64rpx;
} }
\ No newline at end of file
pages/shop-detail/shop-detail.js 0 → 100644
Page({
data: {
// banner 列表数据
banner: [],
bannerIndex: 0,
bannerHeight: 300,
info: {},
},
onLoad: function (options) {
this.queryDetail()
},
/**
* 获取 banner 渲染数据
* @function
* @param {string} - funcToken
* @returns
*/
queryDetail: function () {
let response = {
banner: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-1.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-2.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/shop/banner-3.png',
],
name: '元养水韵',
title: '元养水韵SPA馆',
date: '周一至周日 10:00 - 22:00',
describe: '元养水韵SPA馆，是个女性私享的空间。遵循定制化服务理念，每一位芳疗师会根据你的需要针对性地提供面部、头部、身体的SPA服务，柔软中带有力度能最大化地释放你的疲惫。其中，以泰国皇室经典SPA、面部养颜护理摩纳哥-蒙特卡洛足浴、能量中泰式理疗SPA等服务最为出色。每一位芳疗师都采用最正宗的泰国王室御用手法，足不出国就能体现最正宗的SPA体验。',
contact: '18000000000'
}
this.setData({
banner: response.banner,
info: {
name: response.name,
title: response.title,
date: response.date,
describe: response.describe,
contact: response.contact,
}
})
},
onContact: function () {
wx.makePhoneCall({
phoneNumber: this.data.info.contact
})
},
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
eventSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
})
\ No newline at end of file
pages/shop-detail/shop-detail.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/shop-detail/shop-detail.wxml 0 → 100644
<navigation class="navigation" titleText="{{info.name}}" backIcon="/image/back.png"></navigation>
<view class="container">
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange">
<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 bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-2.png" mode="widthFix"></image>
</view>
</view>
<view class="detail">
<view class="detail-title row">
<text>{{info.title}}</text>
</view>
<view class="detail-other col">
<view class="row align-c">
<text>开放时间</text>
<text>{{info.date}}</text>
</view>
</view>
<view class="detail-describe">
<text>{{info.describe}}</text>
</view>
</view>
<view class="contact">
<l-button size="long" bindtap="onContact">电话预约</l-button>
</view>
</view>
\ No newline at end of file
pages/shop-detail/shop-detail.wxss 0 → 100644
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 800rpx;
background: #ffffff;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 680rpx;
left: 0;
}
.banner-wave {
z-index: 1100;
position: relative;
top: 740rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.banner-wave image {
width: 750rpx;
height: 60rpx;
}
/* 详情样式 */
.detail {
padding-bottom: 200rpx;
}
.detail-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.detail-other {
margin-top: 32rpx;
padding: 0 40rpx 48rpx 40rpx;
}
.detail-other view {
margin-top: 24rpx;
}
.detail-other view text:nth-child(1) {
width: 120rpx;
height: 42rpx;
margin-right: 32rpx;
font-size: 30rpx;
font-weight: lighter;
color: #959DA9;
line-height: 42rpx;
}
.detail-other view text:nth-child(2) {
width: 518rpx;
height: 40rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
}
.detail-describe {
width: 670rpx;
min-height: 200rpx;
margin: 0 auto;
padding-top: 48rpx;
border-top: 1rpx #E2E7EF solid;
font-size: 30rpx;
color: #15191F;
line-height: 50rpx;
}
/* 立即报名 */
.contact {
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 160rpx;
padding: 32rpx 40rpx;
border-top: 1rpx #E2E7EF solid;
background: #ffffff;
}
\ No newline at end of file
pages/sites/sites.js 0 → 100644
// pages/sites/sites.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
pages/sites/sites.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/sites/sites.wxml 0 → 100644
<!--pages/sites/sites.wxml-->
<text>pages/sites/sites.wxml</text>
pages/sites/sites.wxss 0 → 100644
/* pages/sites/sites.wxss */
\ No newline at end of file
pages/strategy/strategy.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
utils/download.js 0 → 100644
const Config = {
lastUpdated: 1574179200000, // 2019-11-20 00:00:00
downloadUrl: 'https://bbs-resource-bucket.oss-cn-beijing.aliyuncs.com/',
downloadFileList: [
'miniapp-share-00.png',
'miniapp-share-01.png',
'miniapp-share-02.png',
]
}
const FileSystemManager = wx.getFileSystemManager()
const output = {
/**
* 函数描述：检查是否需要下载资源
* 参数说明：
* 逻辑描述：
* 1.读取更新缓存时间，如果不存在该缓存，则表示当前没有进行过资源下载，直接进入资源下载。
* 2.如果资源更新时间小于本次预设更新时间，则表示资源已经过期，进入资源下载。
*
* 返回结果：
*/
check: function (funcKey, funcTimestamp, funcUrl) {
let funResTimestamp = wx.getStorageSync('download' + funcKey)
if (!funResTimestamp) {
output.downloadFile()
return false
}
if (funResTimestamp < Config.lastUpdated) {
output.downloadFile()
return false
}
console.log('[download] resource ready')
return true
},
downloadTempFile: function (funcThis, funcUrl, funcKey, funcMessage) {
function downloadFile () {
wx.downloadFile({
url: funcUrl[funcIndex],
success: (response) => {
// 增加索引
// 添加下载图片到完成数组
funcIndex = funcIndex + 1
funcImage.push(response.tempFilePath)
// 设置图片返回参数
let funcData = {}
funcData[funcKey] = funcImage
funcThis.setData(funcData)
// 判断接下去是否还有图片需要下载
// 如果没有就触发下载完成事件
if (funcUrl[funcIndex]) {
downloadFile()
} else {
funcThis.onFinishDownload(funcMessage)
}
},
fail: (response) => {
console.log(response)
}
})
}
let funcIndex = 0
let funcImage = []
downloadFile()
},
/**
* 函数描述：下载预定义资源文件
* 参数说明：
* 逻辑描述：
* 1.遍历文件列表数组，下载文件，并且保存文件到本地。
* 2.监听下载过程，当一个文件下载完成就计数，以此判断是否下载完全。
* 3.如果下载列表为空，则直接更新最后下载日期
*
* 返回结果：
*/
downloadFile: function () {
console.log('[download] downloading...')
let funFileNumber = 0
for (let i = 0; i < Config.downloadFileList.length; i++) {
let funDownloadTask = wx.downloadFile({
url: Config.downloadUrl + Config.downloadFileList[i],
filePath: wx.env.USER_DATA_PATH + '/' + Config.downloadFileList[i],
success: function (res) {
},
fail: function () {
i = i - 1
}
})
funDownloadTask.onProgressUpdate(function (res) {
if (res.progress === 100) {
funFileNumber = funFileNumber + 1
if (funFileNumber === Config.downloadFileList.length) {
console.log('[download] resource ready')
wx.setStorage({
key: 'updateTimeResource',
data: Math.ceil(new Date().getTime())
})
}
}
})
}
wx.setStorage({
key: 'updateTimeResource',
data: Math.ceil(new Date().getTime())
})
},
/**
* 函数描述：使用预定义文件
* 参数说明：
* 逻辑描述：
* 1.尝试获取本地资源中的预定义文件，如果正常获取，则返回本地文件路径。否则返回网络链接地址。
*
* 返回结果：
*/
usePredefine: function (funFileUrl) {
if (funFileUrl.indexOf(wx.env.USER_DATA_PATH) >= 0) {
try {
if (!FileSystemManager.accessSync(funFileUrl)) {
return funFileUrl
}
}
catch (res) {
return Config.downloadUrl + funFileUrl.match(new RegExp('[\\w-]+.(jpg|gif|png)$'))[0]
}
} else {
return funFileUrl
}
},
/**
* 函数描述：下载临时资源文件
* 参数说明：
* 逻辑描述：
* 1.获取本地资源列表，匹配该资源下载路径是否已经存在于列表中。如果存在，则返回本地资源路径。
* 2.如果资源列表中不存在该资源，则返回下载路径。让界面正常显示资源，再异步下载资源，以便下次调用。
*
* 返回结果：
*/
useTemporary: function (funDownloadUrl) {
let funResourceList = wx.getStorageSync('resourceList')
if (!funResourceList) {
funResourceList = []
}
for (let i = 0; i < funResourceList.length; i++) {
if (funResourceList[i].downloadUrl === funDownloadUrl) {
return wx.env.USER_DATA_PATH + '/' + funResourceList[i].name
}
}
let funFileName = funDownloadUrl.replace(new RegExp(Config.downloadUrl, 'g'), '')
let funDownloadTask = wx.downloadFile({
url: funDownloadUrl,
filePath: wx.env.USER_DATA_PATH + '/' + funFileName,
success: function (res) {
funResourceList.push({ downloadUrl: funDownloadUrl, name: funFileName })
wx.setStorageSync('resourceList', funResourceList)
},
fail: function (res) {
console.log('fail downloadTemporary')
}
})
return funDownloadUrl
},
}
module.exports = output
\ 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 sign in to comment