Commit 58e751e1 by 袁伟伦

feat:20202022

parent db6977a7
{ {
"pages": [ "pages": [
"pages/mine/mine",
"pages/customerService/customerService",
"pages/moreProblems/moreProblems",
"pages/myAppointment/myAppointment",
"pages/myActivity/myActivity",
"pages/activityDetail/activityDetail",
"pages/myInfo/myInfo",
"pages/home/home", "pages/home/home",
"pages/play/play", "pages/play/play",
"pages/campsite/campsite", "pages/campsite/campsite",
"pages/mine/mine",
"pages/index/index", "pages/index/index",
"pages/appointment/appointment", "pages/appointment/appointment",
"pages/activity/activity", "pages/activity/activity",
...@@ -30,7 +37,13 @@ ...@@ -30,7 +37,13 @@
"l-tabs": "../miniprogram_npm/lin-ui/tabs/index", "l-tabs": "../miniprogram_npm/lin-ui/tabs/index",
"l-tabpanel": "../miniprogram_npm/lin-ui/tabpanel/index", "l-tabpanel": "../miniprogram_npm/lin-ui/tabpanel/index",
"l-toast": "../miniprogram_npm/lin-ui/toast/index", "l-toast": "../miniprogram_npm/lin-ui/toast/index",
"l-water-flow": "../miniprogram_npm/lin-ui/water-flow/index" "l-water-flow": "../miniprogram_npm/lin-ui/water-flow/index",
"l-input":"../miniprogram_npm/lin-ui/input/index",
"l-mask":"../miniprogram_npm/lin-ui/mask/index",
"l-arc-popup":"../miniprogram_npm/lin-ui/arc-popup/index",
"l-collapse":"../miniprogram_npm/lin-ui/collapse/index",
"l-collapse-item":"../miniprogram_npm/lin-ui/collapse-item/index",
"l-textarea":"../miniprogram_npm/lin-ui/textarea/index"
}, },
"window": { "window": {
"navigationStyle": "custom", "navigationStyle": "custom",
......
// pages/activityDetail/activityDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
type:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that =this;
console.log(options);
// var options = JSON.parse(options);
that.setData({
type : options.type
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<navigation class="navigation" titleText="报名详情" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="header {{type == 0 ? 'ongoingBGC' : (type == 2 ? 'endBGC':'')}}" >
<text class="status">{{status.status(type)}}</text>
</view>
<view class="body">
<view class="activityBody">
<view class="title">报名活动</view>
<view class="item">
<image class="activity-contanier-img" src="../mine/image/mine.png"></image>
<view class="my-activities-content">
<view class="my-activities-title clamp-ellipsis">日落观光游船体验活动之船行碧波共赏美景</view>
<view class="time ellipsis">6月30日-7月15日 10:00-12:00</view>
</view>
<l-icon name="right" color="rgb(172,172,174)" size="26" style="margin-right:12rpx;"/>
</view>
<view class="title">报名信息</view>
<view class="info-item">
<text>姓名</text>
<text>张笑寒</text>
</view>
<view class="info-item">
<text>手机号</text>
<text>136859705822 </text>
</view>
<view class="info-item">
<text>报名日期</text>
<text>6月30日 10:00</text>
</view>
<view class="info-item">
<text>报名人数</text>
<text>1人</text>
</view>
</view>
</view>
</view>
<wxs module="status" >
var status =function(type){
if(type == 0){
return '活动进行中'
}else if(type == 1){
return '活动未开始'
}else{
return '活动已结束'
}
}
module.exports.status = status;
</wxs>
/* pages/activityDetail/activityDetail.wxss */
.header{
width: 750rpx;
height: 380rpx;
background-color: rgb(207, 217, 196);
}
/* 进行中的背景图 */
.ongoingBGC{
background-color: rgb(199, 224, 234);
}
/* 已结束的背景色 */
.endBGC{
background-color: rgb(233, 232, 239);
}
.status{
position: absolute;
top: 260rpx;
left: 40rpx;
font-size: 40rpx;
font-weight: 500;
}
.body{
width: 750rpx;
background-color: white;
height: auto;
}
.activityBody{
width: 670rpx;
padding-top: 60rpx;
margin: auto;
}
.title{
color: rgb(168, 168, 173);
font-size: 28rpx;
letter-spacing: 1px;
margin-bottom: 45rpx;
}
.item{
width: 100%;
height: 220rpx;
background-color: rgb(246, 245, 248);
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 60rpx;
}
.activity-contanier-img{
width: 140rpx;
height: 140rpx;
}
.my-activities-content{
height: 140rpx;
width: 380rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.my-activities-title{
color:rgb(22, 21, 26);
font-weight: 550;
font-size: 28rpx;
letter-spacing: 1px;
}
.time{
font-size: 26rpx;
color: rgb(114, 115, 124);
}
/* 超出部分省略 */
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* 两行超出部分省略 */
.clamp-ellipsis{
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.info-item{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 90rpx;
color: rgb(32, 29, 32);
}
// pages/customerService/customerService.js
Page({
/**
* 页面的初始数据
*/
data: {
inputHidden:true,
data:[
{title:'进入碧海银虎园区需要提前预约吗?'},
{title:'园区餐厅有哪些?如何预订?'},
{title:'如何预订海错图门票?'},
{title:'如何预订儿童营地门票?'},
],
mask:false,//控制客服微信的遮罩层显示
phone:'13685970580',
hotline:false,//客服热线
bottom:0,
focus:false
},
//获取焦点的时候
linfocus(e){
this.setData({
bottom: e.detail.height,
})
wx.pageScrollTo({
scrollTop:0,
})
},
//失去焦点
inputBlur() {
this.setData({
inputHidden:true
})
},
//填写反馈
feedback(e){
console.log(e.detail.height);
this.setData({
focus:true,
inputHidden:false,
})
},
// 关闭遮罩层
close(){
this.setData({
mask:false
})
},
//开启微信客服
openMask(){
this.setData({
mask:true
})
},
//客服热线拨打
call(){
wx.makePhoneCall({
phoneNumber: this.data.phone,
})
},
//取消拨打
cancel(){
this.setData({
hotline:false,
})
},
showHotline(){
this.setData({
hotline:true
})
},
moreProblems(){
wx.navigateTo({
url: '../moreProblems/moreProblems',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<!--pages/customerService/customerService.wxml-->
<navigation class="navigation" titleText="客服中心" backIcon="/image/back.png"></navigation>
<view class="container">
<image class="banner-img" src="http://upload.miaomiao-bao.com/70161202008161703131621.jpg"></image>
<view class="customer-body">
<view class="customer-body-header">
<view class="customer-body-title">常见问题</view>
<view class="row" style="align-items: center;">
<text bindtap="moreProblems" style="color:rgb(43,45,46);padding-right:15rpx;font-size:26rpx;">更多问题</text>
<l-icon name="right" color="rgb(172,172,174)" size="26"/>
</view>
</view>
<view>
<l-list wx:for="{{data}}" :key="index" is-hover="{{false}}" is-link="{{false}}">
<view class="row align-c" slot="left-section">
<view class="circle"></view><text>{{item.title}}</text>
</view>
</l-list>
</view>
</view>
</view>
<view class="footer-nav">
<view class="nav-item" bindtap="showHotline">
<image class="nav-icon" src="./images/Hotline@2x.png"></image>
<view class="nav-item-title">客服热线</view>
</view>
<view class="nav-item" bindtap="openMask">
<image class="nav-icon" src="./images/Wechat@2x.png"></image>
<view class="nav-item-title">客服微信</view>
</view>
<view class="nav-item" bindtap="feedback">
<image class="nav-icon" src="./images/Feedback@2x.png"></image>
<view class="nav-item-title">填写反馈</view>
</view>
</view>
<!-- 客服微信弹出层 -->
<l-mask show="{{mask}}" center="{{true}}">
<view class='mask-content'>
<image class="mask-img" src="http://upload.miaomiao-bao.com/c92f7202008161705291762.png"></image>
<view class="mask-contanier">
<view class="logo-container">
<image class="logo" src="http://upload.miaomiao-bao.com/c83b1202008141006519147.svg"></image>
</view>
<view class="er-code-div">
<image class="er-code" src="http://upload.miaomiao-bao.com/8fe2e202008141039384300.png"></image>
</view>
<view class="title">添加客服微信</view>
<view class="operation">保存图片 > 点击微信“扫一扫” >选择相册</view>
</view>
</view>
<view class="close" bindtap="close">
<l-icon name="close" color="black" size="28"/>
</view>
</l-mask>
<!-- 客服热线 -->
<l-arc-popup show="{{hotline}}" arc-radius="30">
<view class="phone">{{phone}}</view>
<view class="call" bindtap="call">呼叫</view>
<view style="height:10rpx;background-color:rgb(246,247,249);"></view>
<view class="call" bindtap="cancel">取消</view>
</l-arc-popup>
<!-- 填写意见反馈 -->
<view class="textBox" style="bottom:{{bottom}}px" hidden="{{inputHidden}}">
<view class="textBox-container">
<l-textarea cursor-spacing='0' bind:linblur="inputBlur" focus="{{focus}}" adjust-position="{{false}}" bind:linfocus="linfocus" l-class="textArea-class" indicator="{{true}}" maxlength="200" placeholder="请留下您的宝贵意见" />
<view class="feedbackButton">提交反馈</view>
</view>
</view>
\ No newline at end of file
.banner-img{
width: 750rpx;
height: 480rpx;
}
.footer-nav{
position: fixed;
bottom: 0;
width: 750rpx;
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1px solid rgb(244, 242, 244);
}
.customer-body{
padding-bottom: 120rpx;
padding-top: 60rpx;
width: 670rpx;
margin: auto;
height: auto;
}
.customer-body-header{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 60rpx;
}
.customer-body-title{
font-size:46rpx ;
}
.circle{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: black;
margin-left: 12rpx;
margin-right: 18rpx;
}
.nav-item{
text-align: center;
}
.nav-item-title{
font-size: 24rpx;
color: rgb(169, 171, 177);
}
.nav-icon{
width: 60rpx;
height: 60rpx;
}
.mask-content{
width: 610rpx;
height: 860rpx;
background-color: white;
position: relative;
}
.mask-img{
width: 100%;
position: absolute;
bottom:0 ;
}
.mask-contanier{
width: 570rpx;
height: 820rpx;
margin: auto;
border: 2px solid black;
position: absolute;
top: 20rpx;
left: 20rpx;
border-radius: 3px;
}
.logo-container{
/* width: 300rpx; */
height: 110rpx;
overflow: hidden;
position: relative;
margin-top: 30rpx;
}
.logo{
width: 300rpx;
position: absolute;
top: -190rpx;
right: 30rpx;
}
.er-code-div{
width: 280rpx;
height: 280rpx;
margin:auto;
margin-top: 30rpx;
}
.er-code{
width: 280rpx;
height: 280rpx;
}
.title{
font-size: 38rpx;
text-align: center;
margin-top: 40rpx;
color: rgb(59, 59, 59);
}
.operation{
font-size: 26rpx;
text-align: center;
margin-top: 20rpx;
color: rgb(63, 61, 59);
}
.close{
width: 80rpx;
height: 80rpx;
background-color: rgb(172, 169, 170);
text-align: center;
margin: auto;
margin-top: 45rpx;
border-radius: 50%;
line-height: 80rpx;
}
.phone{
height: 85rpx;
text-align: center;
color: rgb(160, 157, 160);
line-height: 85rpx;
}
.call{
height: 125rpx;
text-align: center;
line-height: 125rpx;
font: 30rpx;
}
.textBox{
width: 750rpx;
height: 510rpx;
background-color: white;
position: absolute;
bottom: 0;
}
.textBox-container{
width: 660rpx;
height: 300rpx;
margin: auto;
margin-top: 50rpx;
}
.textArea-class{
height: 300rpx;
background-color: rgb(244, 246, 250);
}
.feedbackButton{
margin-top: 30rpx;
border-radius: 3px;
width: 100%;
height: 100rpx;
line-height: 100rpx;
color: white;
background-color: rgb(132, 199, 224);
text-align: center;
}
\ No newline at end of file
...@@ -8,7 +8,12 @@ Page({ ...@@ -8,7 +8,12 @@ Page({
data: { data: {
}, },
myAppoinment(){
console.log('666')
wx.navigateTo({
url: '../../pages/home/home.wxml',
})
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
...@@ -45,4 +50,11 @@ Page({ ...@@ -45,4 +50,11 @@ Page({
}, },
//点击前往修改页面
goMyInfo(){
wx.navigateTo({
url: '../myInfo/myInfo',
})
}
}) })
\ No newline at end of file
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<view class="mine-info col"> <view class="mine-info col">
<view class="row align-c"> <view class="row align-c">
<text>张笑寒</text> <text>张笑寒</text>
<image src="./image/inform.png"></image> <image src="./image/inform.png" bindtap="goMyInfo"></image>
</view> </view>
<view> <view>
<text>180****2524</text> <text>180****2524</text>
...@@ -30,8 +30,42 @@ ...@@ -30,8 +30,42 @@
</view> </view>
<view class="menu"> <view class="menu">
<l-list l-class="menu-item" l-content-class="menu-title" title="我的活动"></l-list> <l-list url="../myActivity/myActivity" 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-class="menu-item" l-content-class="menu-title" title="服务中心"></l-list> <view class="my-activities">
<view class="my-activities-item">
<view class="my-activities-top">
6月30日 10:00-12:00
</view>
<view class="my-activities-bottom">
<view class="my-activities-title">艺术花仿插画体验</view>
<view class="my-activities-content">草坪温室1号厅</view>
</view>
</view>
<view class="my-activities-item">
<view class="my-activities-top">
6月30日 10:00-12:00
</view>
<view class="my-activities-bottom" >
<view class="my-activities-title">艺术花仿插画体验</view>
<view class="my-activities-content">草坪温室1号厅</view>
</view>
</view>
</view>
<l-list l-content-class="menu-title" title="我的预约" url="../myAppointment/myAppointment"></l-list>
<!-- 我的预约 -->
<view class="my-activities">
<view class="my-activities-item">
<view class="my-activities-top">
6月30日 10:00-12:00
</view>
<view class="my-activities-bottom">
<view class="my-activities-title">夜间入院预约</view>
<view class="my-activities-content">预约人数 3人</view>
<view class="subscribe" bindtap="myAppoinment">预约凭证</view>
</view>
</view>
</view>
<l-list l-content-class="menu-title" title="服务中心" url="../customerService/customerService"></l-list>
</view> </view>
</view> </view>
\ No newline at end of file
...@@ -66,6 +66,7 @@ ...@@ -66,6 +66,7 @@
width: 750rpx; width: 750rpx;
margin-top: 38rpx; margin-top: 38rpx;
padding: 0 48rpx; padding: 0 48rpx;
overflow-x: hidden;
} }
.menu-item { .menu-item {
...@@ -77,3 +78,63 @@ ...@@ -77,3 +78,63 @@
font-weight: bolder; font-weight: bolder;
font-size: 30rpx; font-size: 30rpx;
} }
.my-activities{
width: 798rpx;
overflow-x: scroll;
height: 300rpx;
white-space: nowrap;
}
.my-activities::-webkit-scrollbar {display:none}
.my-activities-item{
margin-top:15rpx ;
height: 80%;
width: 600rpx;
margin-right: 40rpx;
display: inline-block;
position: relative;
}
.my-activities-top{
position: absolute;
top: 0;
width: 350rpx;
height: 60rpx;
background-color: rgb(2, 0, 2);
color: white;
line-height:60rpx ;
z-index: 2;
border-radius: 3px;
text-align: center;
font-size: 30rpx;
}
.my-activities-bottom{
width: 100%;
height: 220rpx;
position: absolute;
bottom: 0;
background-color: rgb(239, 242, 250);
border-radius: 3px;
}
.my-activities-title{
padding-left:50rpx ;
margin-top: 70rpx;
line-height: 2;
font-weight: bold;
}
.my-activities-content{
color: rgb(169, 174, 181);
font-size: 26rpx;
padding-left:50rpx ;
line-height: 2;
}
.subscribe{
width: 150rpx;
height: 70rpx;
position: absolute;
border: 1px solid rgb(134, 137, 145);
border-radius: 3px;
right: 50rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
top:92rpx ;
}
\ No newline at end of file
// pages/moreProblems/moreProblems.js
Page({
/**
* 页面的初始数据
*/
data: {
isExpandContent:false,
},
linexpand(e){
console.log(e)
},
linfold(e){
console.log('66');
console.log(e)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<navigation class="navigation" titleText="常见问题" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="body">
<view class="row align-c">
<view class="icon">
<image class="icon-img" src="./images/Icon/24pt/Service@2x.png"></image>
</view>
<view class="title">入住问题</view>
</view>
<view class="content">
<view class="content-item">
<l-collapse>
<l-collapse-item l-body-class="l-body-class" l-title-class="l-title-class" customTitle="{{true}}">
<view class="item-title" slot="title">
<view class="row align-c">
<view class="circle"></view>
<view>园区什么时候开放酒店预订?</view>
</view>
<l-icon name="right" size="28" color="#999"/>
</view>
<view class="text">1、本券一次使用1张限1件商品,自领取日起有效期7天。\n2、本优惠券不与其他优惠同享</view>
</l-collapse-item>
</l-collapse>
</view>
</view>
<view class="row align-c">
<view class="icon">
<image class="icon-img" src="./images/Icon/24pt/Ticket@2x.png"></image>
</view>
<view class="title">门票问题</view>
</view>
<view class="content">
<view class="content-item">
<l-collapse>
<l-collapse-item l-body-class="l-body-class" l-title-class="l-title-class" customTitle="{{true}}" linfold="">
<view class="item-title" slot="title">
<view class="row align-c">
<view class="circle"></view>
<view>进入碧海银湖园区需呀提前预约吗?</view>
</view>
<!-- <l-icon name="right" size="28" color="#999"/> -->
<l-icon name="right" size="28" color="#999"></l-icon>
</view>
<view class="text">上八点前可以直接进入,预计晚上八点之后进入园区的需要提前在“碧海银湖·理想生活”小程序上预约,并把预约信息给园区入口管理员查看
</view>
</l-collapse-item>
</l-collapse>
</view>
<view class="content-item">
<l-collapse>
<l-collapse-item l-body-class="l-body-class" l-title-class="l-title-class" customTitle="{{true}}">
<view class="item-title" slot="title">
<view class="row align-c">
<view class="circle"></view>
<view>如何预订海错图门票?</view>
</view>
<l-icon name="right" size="28" color="#999"/>
</view>
<view class="text">上八点前可以直接进入,预计晚上八点之后进入园区的需要提前在“碧海银湖·理想生活”小程序上预约,并把预约信息给园区入口管理员查看
</view>
</l-collapse-item>
</l-collapse>
</view>
<view class="content-item">
<l-collapse>
<l-collapse-item l-body-class="l-body-class" l-title-class="l-title-class" customTitle="{{true}}">
<view class="item-title" slot="title">
<view class="row align-c">
<view class="circle"></view>
<view>如何预订海错图门票?</view>
</view>
<l-icon name="right" size="28" color="#999"/>
</view>
<view class="text">上八点前可以直接进入,预计晚上八点之后进入园区的需要提前在“碧海银湖·理想生活”小程序上预约,并把预约信息给园区入口管理员查看
</view>
</l-collapse-item>
</l-collapse>
</view>
</view>
</view>
</view>
/* pages/moreProblems/moreProblems.wxss */
.body{
width: 670rpx;
padding-top: 200rpx;
}
.icon{
width: 75rpx;
height: 75rpx;
border-radius: 50%;
background-color: rgb(226, 246, 253);
display: flex;
align-items: center;
justify-content: center;
}
.icon-img{
width: 55rpx;
height: 55rpx;
}
.title{
font-size: 40rpx;
margin-left: 25rpx;
color: rgb(24, 23, 26);
font-weight: 500;
}
.content{
padding-top: 60rpx;
padding-bottom: 60rpx;
}
.content-item{
width: 100%;
height: auto;
border-bottom: 1px solid rgb(247, 246, 247);
}
.circle{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: black;
margin-right: 20rpx;
}
.item-title{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:30rpx 0 30rpx 0;
}
.text{
width: 610rpx;
margin: auto;
line-height: 2;
font-size: 28rpx;
margin-bottom: 20rpx;
}
\ No newline at end of file
// pages/myActivity/myActivity.js
Page({
/**
* 页面的初始数据
*/
data: {
navItem:[
{content:'全部',type:'0'},
{content:'未开始',type:'1'},
{content:'进行中',type:'2'},
{content:'已结束',type:'3'},
],
data:[
{time:'6月30日 10:00-12:00',type:'0',content:'云之亭广场外侧',title:'海滩夏日音乐节'},
{time:'6月30日 10:00-12:00',type:'1',content:'云之亭广场外侧',title:'海滩夏日音乐节'},
{time:'6月30日 10:00-12:00',type:'2',content:'云之亭广场外侧',title:'海滩夏日音乐节'},
],
active:0,
},
chageNav(e){
this.setData({
active:e.currentTarget.dataset.index
})
},
activityDetail(e){
wx.navigateTo({
url: '../activityDetail/activityDetail?type='+e.currentTarget.dataset.type,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<navigation class="navigation" titleText="我的活动" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="myActivity-container">
<view class="activity-nav">
<!-- 遍历头部导航 -->
<view bindtap="chageNav" data-index="{{index}}" wx:for="{{navItem}}" wx:key="index" class="navItem {{index == active? 'active':''}}">{{item.content}}</view>
</view>
<view class="activity-body">
<view class="my-activities-item {{item.type == 2?'opcity':''}}" data-type="{{item.type}}" wx:for="{{data}}" wx:key="index" bindtap="activityDetail">
<view class="my-activities-top">
{{item.time}}
</view>
<view class="my-activities-bottom">
<view class="activity-status {{item.type == 1 ?'stautsColor':''}}">{{status.status(item.type)}}</view>
<view class="activity-contanier">
<image class="activity-contanier-img" src="../mine/image/mine.png"></image>
<view class="my-activities-content">
<view class="my-activities-title clamp-ellipsis">{{item.title}}</view>
<view class="ellipsis">{{item.content}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 状态值格式化 -->
<wxs module="status" >
var status =function(type){
if(type == 0){
return '进行中'
}else if(type == 1){
return '未开始'
}else{
return '已结束'
}
}
module.exports.status = status;
</wxs>
/* pages/myActivity/myActivity.wxss */
.myActivity-container{
width: 750rpx;
/* margin-top: 60rpx;
padding-top: 90rpx; */
height: 100%;
}
.activity-nav{
width: 750rpx;
padding-top: 150rpx;
/* height: 95rpx; */
border-bottom: 1px solid rgb(238, 238, 238);
background: -webkit-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Firefox 3.6 - 15 */
background: linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* 标准的语法(必须放在最后) */
display: flex;
justify-content: space-around;
}
.navItem{
line-height: 95rpx;
color: rgb(156, 158, 163);
}
.active{
border-bottom: 3px solid rgb(0, 0, 2);
color: rgb(28, 27, 30);
}
.activity-body{
width: 750rpx;
min-height: 1000rpx;
padding-top: 50rpx;
background-color: rgb(245, 244, 247);
height: auto;
position: relative;
}
.my-activities-item{
width: 675rpx;
height: 280rpx;
position: relative;
margin: 0 auto;
margin-bottom: 50rpx;
}
.my-activities-top{
position: absolute;
top: 0;
padding:0 25rpx 0 25rpx;
height: 60rpx;
background-color: rgb(2, 0, 2);
color: white;
line-height:60rpx ;
z-index: 2;
border-radius: 3px;
font-size: 30rpx;
}
.my-activities-bottom{
width: 100%;
height: 250rpx;
position: absolute;
bottom: 0;
background-color: white;
border-radius: 3px;
}
.my-activities-title{
line-height: 2;
font-weight: bold;
}
.my-activities-content{
color: rgb(169, 174, 181);
font-size: 26rpx;
padding-left:50rpx ;
line-height: 2;
}
.subscribe{
width: 150rpx;
height: 70rpx;
position: absolute;
border: 1px solid rgb(134, 137, 145);
border-radius: 3px;
right: 50rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
top:92rpx ;
}
.activity-status{
text-align: right;
line-height: 65rpx;
padding-right: 30rpx;
color: rgb(154, 192, 227);
font-size: 28rpx;
}
.activity-contanier{
height: 160rpx;
width: 600rpx;
margin: auto;
display: flex;
align-items: center;
}
.activity-contanier-img{
width: 140rpx;
height: 140rpx;
}
.my-activities-content{
height: 140rpx;
width: 380rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.my-activities-title{
color:black;
font-weight: bold;
font-size: 30rpx;
letter-spacing: 1px;
}
/* 超出部分省略 */
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* 两行超出部分省略 */
.clamp-ellipsis{
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.opcity{
opacity: 0.5;
}
/* 未开始字体颜色 */
.stautsColor{
color: rgb(164, 183, 133) !important;
}
\ No newline at end of file
// pages/myAppointment/myAppointment.js
Page({
/**
* 页面的初始数据
*/
data: {
navItem:[
{content:'全部',type:'0'},
{content:'入园预约',type:'1'},
{content:'看房预约',type:'2'},
],
data:[ // 假数据数组,type=0入园预约,type=1 看房预约
{title:'夜间入园预约',type:'0',time:'6月30日 20:00-24:00',num:3,url:'http://upload.miaomiao-bao.com/36acd202008141719598303.jpg'},
{title:'看房预约',type:'1',time:'6月30日',num:3,url:' http://upload.miaomiao-bao.com/4c644202008141702599692.jpg'},
],
active:0,
},
// 点击导航切换,默认是全部的
chageNav(e){
this.setData({
active:e.currentTarget.dataset.index
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<!--pages/myAppointment/myAppointment.wxml-->
<navigation class="navigation" titleText="我的预约" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="myAppointment-nav">
<!-- 遍历头部导航 -->
<view bindtap="chageNav" data-index="{{index}}" wx:for="{{navItem}}" wx:key="index" class="navItem {{index == active? 'active':''}}">{{item.content}}</view>
</view>
<view class="myAppointment-body">
<view class="myAppointment-item" wx:for="{{data}}" :key="index">
<image src="{{item.url}}" class="item-img"></image>
<view class="item-content">
<view class="item-title {{item.type == 0 ?'item-num-1' : ''}}">{{item.title}}</view>
<view class="item-time {{item.type == 1 ?'item-time-1' : ''}}">预约时间 {{item.time}}</view>
<view wx:if="{{item.type == 0}}" class="item-num">预约人数 {{item.num}}人</view>
</view>
<view class="button">预约凭证</view>
</view>
</view>
</view>
/* pages/myAppointment/myAppointment.wxss */
.myAppointment-nav{
width: 750rpx;
padding-top: 150rpx;
/* height: 95rpx; */
border-bottom: 1px solid rgb(238, 238, 238);
background: -webkit-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* Firefox 3.6 - 15 */
background: linear-gradient(rgb(255,255,255), rgb(249,249,251)); /* 标准的语法(必须放在最后) */
display: flex;
justify-content: space-around;
}
.navItem{
line-height: 95rpx;
color: rgb(156, 158, 163);
}
.active{
border-bottom: 3px solid rgb(0, 0, 2);
color: rgb(28, 27, 30);
}
.myAppointment-body{
width: 750rpx;
min-height: 1000rpx;
height: auto;
/* background-color: rgb(245, 244, 249); */
padding-top: 50rpx;
}
.myAppointment-item{
width: 670rpx;
height: 360rpx;
margin: auto;
margin-bottom: 50rpx;
background-color: red;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.item-img{
width: 100%;
position: absolute;
height:360rpx;
}
.item-content{
width: 610rpx;
height: auto;
position: absolute;
bottom: 45rpx;
left: 30rpx;
}
.item-title{
font-size: 36rpx;
line-height: 70rpx;
}
.item-time{
line-height: 48rpx;
font-size: 28rpx;
color: rgb(220, 214, 220);
}
.item-num{
font-size:28rpx ;
color: rgb(220, 214, 220);
line-height: 48rpx;
}
/* 入园标题样式 */
.item-num-1{
color: rgb(244, 254, 255);
}
.item-time-1{
color: rgb(40, 50, 56);
}
.button{
width: 170rpx;
height: 70rpx;
position: absolute;
bottom: 45rpx;
right: 30rpx;
line-height: 70rpx;
text-align: center;
color: white;
background-color: rgb(186, 174, 135);
border-radius: 3px;
font-size: 28rpx;
opacity: 0.87;
}
\ No newline at end of file
// pages/myInfo/myInfo.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
{
"usingComponents": {}
}
\ No newline at end of file
<!--pages/myInfo/myInfo.wxml-->
<navigation class="navigation" titleText="个人资料" backIcon="/image/back.png"></navigation>
<view class="container">
<view class="myInfo">
<l-list is-hover="{{false}}" l-content-class="menu-title" title="头像" is-link="{{false}}">
<view style="margin-bottom:30rpx;" slot="right-section">
<l-avatar size="100" icon="user" />
</view>
</l-list>
<l-list is-hover="{{false}}" l-content-class="menu-title" title="姓名" is-link="{{false}}">
<view slot="right-section">
<input style="text-align:right;" value="张楚涵" />
</view>
</l-list>
<l-list is-hover="{{false}}" l-content-class="menu-title" title="性别" is-link="{{false}}">
<view slot="right-section">
<input style="text-align:right;" value="女" />
</view>
</l-list>
<l-list is-hover="{{false}}" l-content-class="menu-title" title="生日" is-link="{{false}}">
<view slot="right-section">
<input style="text-align:right;" value="1990-01-01" />
</view>
</l-list>
<l-list is-hover="{{false}}" l-content-class="menu-title" title="地址" is-link="{{false}}">
<view slot="right-section">
<input style="text-align:right;" value="福建省厦门市思明区" />
</view>
</l-list>
<l-list is-hover="{{false}}" l-content-class="menu-title" title="手机号" is-link="{{false}}">
<view slot="right-section">
<view class="phone">{{phone.toHide("13685970580")}}</view>
</view>
</l-list>
</view>
</view>
<!-- 使用wxs 手机号码中间四位显示为*号 -->
<wxs module="phone">
var toHide = function(array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7);
return mphone;
}
module.exports.toHide = toHide;
</wxs>
\ No newline at end of file
/* pages/myInfo/myInfo.wxss */
.myInfo{
width: 750rpx;
margin-top: 60rpx;
padding: 0 48rpx;
padding-top: 90rpx;
}
.phone{
color: rgb(177, 176, 182);
}
\ 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