xt / xcx-book · Commits

Go to a project

Commit c261e162497ec34b138d6ff5f7f66c95c7a7a926

Authored by wangfan
1 parent 50ac1429
build: skipped

manager-invitation

Inline Side-by-side
Showing 3 changed files with 304 additions and 90 deletions
// pages/manager-invitation/review.js
import util from '../../utils/util';
import App from '../../utils/api';
const {regeneratorRuntime} = global
Page({
/**
* 页面的初始数据
*/
data: {
height:667,
tpls:[
{id:1,code:1,name:'商务',},
{id:2,code:2,name:'温馨',},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//导航栏自适应
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if(reg.test(systemInfo.system)){
pt = systemInfo.statusBarHeight;
h = 44;
}else{
pt = systemInfo.statusBarHeight;
h = 48;
}
this.setData({
statusBarHeight: pt,
titleBarHeight:h,
height:getApp().system.windowHeight
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
/**
* 页面的初始数据
*/
data: {
height: 667,
current: 1,
tpls: [
{
id: 1,
code: 1,
name: '商务',
},
{
id: 2,
code: 2,
name: '温馨',
},
],
seller:{
name:'一键订示例餐厅',
room:'天香阁',
date:util.unixtoTime(new Date()/1000,'YYYY/MM/DD 星期WW HH:II'),
addr:'粤江西路啤酒文化创意艺术区B09'
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//导航栏自适应
let systemInfo = wx.getSystemInfoSync();
let reg = /ios/i;
let pt = 20;//导航状态栏上内边距
let h = 44;//导航状态栏高度
if (reg.test(systemInfo.system)) {
pt = systemInfo.statusBarHeight;
h = 44;
} else {
pt = systemInfo.statusBarHeight;
h = 48;
}
this.setData({
statusBarHeight: pt,
titleBarHeight: h,
height: systemInfo.windowHeight
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
swiperChange(e){
this.setData({
current:e.detail.current,
})
},
switchTabs(e){
this.setData({
current:util.attr(e,'current'),
})
}
})
\ No newline at end of file
... ...
... ... @@ -3,12 +3,14 @@
indicator-dots="{{false}}"
autoplay="{{false}}"
duration="{{500}}"
bindchange="swiperChange"
current="{{current}}"
style="height:{{height}}px;"
>
<block wx:for="{{[1,2,3]}}">
<block wx:for="{{tpls}}" wx:key="tpls.key">
<swiper-item>
<view class="pages bg-{{item}}" style="height:{{height}}px;">
{{$item}}
<view class="pages bg-{{item.id}} flex-vc" style="height:{{height}}px;">
<template is="tpl-{{item.id}}" data="{{...seller}}"></template>
</view>
</swiper-item>
</block>
... ... @@ -17,7 +19,55 @@
class="flex-vc"
style="position:fixed;top:{{statusBarHeight}}px;left:0;height: {{titleBarHeight}}px; line-height: {{titleBarHeight}}px;">
<view class="tabs flex-ll">
<view class="item active">AAA</view>
<view class="item">BBB</view>
<block wx:for="{{tpls}}" wx:key="tpls.key">
<view class="item {{index==current?'active':''}}" bindtap="switchTabs" data-current="{{index}}">{{item.name}}</view>
</block>
</view>
</view>
<view class="editor flex-vc">修改内容</view>
<!--//商务-->
<template name="tpl-1">
<view class="flex-vc shangwu">
<view class="invit-logo">
<image src="http://qn.colorcun.com/custom/lite-yd-cook/image/detail_owner_invitation-1-1.png"></image>
</view>
<view class="seller flex-vc">
<view class="title">餐厅</view>
<view class="content name">{{name}}</view>
<view class="title">包间</view>
<view class="content">{{room}}</view>
<view class="title">时间</view>
<view class="content">{{date}}</view>
<view class="title">店铺地址</view>
<view class="content flex-cc addr">
<image src="http://qn.colorcun.com/manager-invitation/wx/address.png" class="invit-addr"></image>
{{addr}}第三方斯蒂芬
</view>
</view>
</view>
</template>
<!--//温馨-->
<template name="tpl-2">
<view class="wenxin-top"></view>
<view class="wenxin-bottom"></view>
<view class="flex-vc wenxin">
<view class="invit-logo">
<image src="http://qn.colorcun.com/manager-invitation/wx/%E6%B8%A9%E9%A6%A8-%E9%A2%84%E8%AE%A2%E5%AE%89%E6%8E%92.png"></image>
</view>
<view class="wenxin-mask">
<view class="wenxin-mask-bg"></view>
<view class="wenxin-mask-img"></view>
</view>
<view class="wenxin-baitou"></view>
<view class="wenxin-line"></view>
<view class="seller flex-vc">
<view class="content">{{date}}</view>
<view class="content">{{name}}{{room}}</view>
<view class="content flex-cc addr">
<image src="http://qn.colorcun.com/manager-invitation/wx/address.png" class="invit-addr"></image>
{{addr}}
</view>
</view>
</view>
</template>
... ...
/* pages/manager-invitation/review.wxss */
.pages{
font-size: 200rpx;
background-size: 100%;
font-size: 34rpx;
}
.tabs{
}
... ... @@ -9,6 +11,8 @@
color:#999999;
margin-left: 20rpx;
padding: 0 10rpx;
height: 66rpx;
line-height: 66rpx;
}
.tabs .item.active{
font-size: 36rpx;
... ... @@ -17,11 +21,143 @@
border-bottom: 2rpx solid #E9D9B7;
}
.bg-1{
background-color: #61A5D1;
background-image: url("http://qn.colorcun.com/custom/lite-yd/image/invit-bg.png");
background-color: #353334;
color:#fefefe;
}
.bg-2{
background-color: #1AAD19;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E5%BA%95%E9%83%A8.png");
background-color: #F4AFB2;
}
.bg-3{
background-color: #AD7644;
image{
width: 100%;
height: 100%;
}
.invit-logo{
width: 400rpx;
height: 170rpx;
}
.seller{
margin-top: 80rpx;
}
.seller .title{
font-size: 28rpx;
color:#999999;
margin-bottom: 18rpx;
height: 40rpx;
line-height: 40rpx;
}
.seller .content{
margin-bottom: 40rpx;
font-size: 36rpx;
line-height: 50rpx;
text-align: center;
align-items:flex-start;
}
.seller .addr{
width: 80%;
}
.seller .invit-addr{
width: 22rpx;
height: 28rpx;
margin-right: 10rpx;
margin-top: 10rpx;
min-width: 22rpx;
}
.editor{
position: fixed;
bottom: 0;
height:98rpx;
left: 0;
line-height: 98rpx;
font-size: 30rpx;
color: #353535;
background-color: #ECD9B7;
width: 100%;
}
.shangwu{
}
.wenxin{
}
.wenxin-top{
position: fixed;
top:0;
left:0;
width:100%;
height: 80rpx;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E9%A1%B6%E9%83%A8%E8%8A%B1%E8%BE%B9.png");
background-size: 100%;
}
.wenxin-bottom{
position: fixed;
bottom:0;
left:0;
width:100%;
height: 64rpx;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E8%8A%B1%E8%BE%B9-%E5%BA%95%E9%83%A8.png");
background-size: 100%;
}
.wenxin .invit-logo{
width: 340rpx;
height: 184rpx;
}
.wenxin-mask{
margin-top: 10rpx;
width: 568rpx;
height: 560rpx;
position: relative;
}
.wenxin-mask-bg{
margin: 60rpx auto;
width: 468rpx;
height: 468rpx;
border-radius: 50%;
overflow: hidden;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/hunshazhao2.png");
background-size: 100%;
}
.wenxin-mask-img{
position: absolute;
left: 0;
top:0;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E8%8A%B1%E7%8E%AF%E7%A9%BA.png");
width: 100%;
height: 560rpx;
background-size: 100%;
}
.wenxin-baitou{
margin-top: 20rpx;
width: 404rpx;
height: 42rpx;
background-size: 100%;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E6%B0%B8%E7%BB%93%E5%90%8C%E5%BF%83-%E7%99%BD%E5%A4%B4%E5%81%95%E8%80%81.png");
}
.wenxin-line{
margin-top: 30rpx;
width: 600rpx;
height: 14rpx;
background-size: 100%;
background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E5%88%86%E5%89%B2%E5%B0%96%E5%A4%B4.png");
}
.wenxin .seller{
margin-top: 30rpx;
color:#fefefe;
}
.wenxin .seller .title{
display: none;
}
.wenxin .seller .content{
margin-bottom: 20rpx;
font-size: 36rpx;
line-height: 50rpx;
text-align: center;
align-items:flex-start;
}
.wenxin .seller .content.addr{
width: 100%;
}
\ No newline at end of file
... ...