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
1 // pages/manager-invitation/review.js 1 // pages/manager-invitation/review.js
  2 +import util from '../../utils/util';
  3 +import App from '../../utils/api';
  4 +const {regeneratorRuntime} = global
2 Page({ 5 Page({
3 6
4 - /**  
5 - * 页面的初始数据  
6 - */  
7 - data: {  
8 - height:667,  
9 - tpls:[  
10 - {id:1,code:1,name:'商务',},  
11 - {id:2,code:2,name:'温馨',},  
12 - ]  
13 - },  
14 -  
15 - /**  
16 - * 生命周期函数--监听页面加载  
17 - */  
18 - onLoad: function (options) {  
19 -  
20 - },  
21 -  
22 - /**  
23 - * 生命周期函数--监听页面初次渲染完成  
24 - */  
25 - onReady: function () {  
26 -  
27 - },  
28 -  
29 - /**  
30 - * 生命周期函数--监听页面显示  
31 - */  
32 - onShow: function () {  
33 - //导航栏自适应  
34 - let systemInfo = wx.getSystemInfoSync();  
35 - let reg = /ios/i;  
36 - let pt = 20;//导航状态栏上内边距  
37 - let h = 44;//导航状态栏高度  
38 - if(reg.test(systemInfo.system)){  
39 - pt = systemInfo.statusBarHeight;  
40 - h = 44;  
41 - }else{  
42 - pt = systemInfo.statusBarHeight;  
43 - h = 48;  
44 - }  
45 - this.setData({  
46 - statusBarHeight: pt,  
47 - titleBarHeight:h,  
48 - height:getApp().system.windowHeight  
49 - })  
50 - },  
51 -  
52 - /**  
53 - * 生命周期函数--监听页面隐藏  
54 - */  
55 - onHide: function () {  
56 -  
57 - },  
58 -  
59 - /**  
60 - * 生命周期函数--监听页面卸载  
61 - */  
62 - onUnload: function () {  
63 -  
64 - },  
65 -  
66 - /**  
67 - * 页面相关事件处理函数--监听用户下拉动作  
68 - */  
69 - onPullDownRefresh: function () {  
70 -  
71 - },  
72 -  
73 - /**  
74 - * 页面上拉触底事件的处理函数  
75 - */  
76 - onReachBottom: function () {  
77 -  
78 - },  
79 -  
80 - /**  
81 - * 用户点击右上角分享  
82 - */  
83 - onShareAppMessage: function () {  
84 - 7 + /**
  8 + * 页面的初始数据
  9 + */
  10 + data: {
  11 + height: 667,
  12 + current: 1,
  13 + tpls: [
  14 + {
  15 + id: 1,
  16 + code: 1,
  17 + name: '商务',
  18 + },
  19 + {
  20 + id: 2,
  21 + code: 2,
  22 + name: '温馨',
  23 + },
  24 + ],
  25 + seller:{
  26 + name:'一键订示例餐厅',
  27 + room:'天香阁',
  28 + date:util.unixtoTime(new Date()/1000,'YYYY/MM/DD 星期WW HH:II'),
  29 + addr:'粤江西路啤酒文化创意艺术区B09'
  30 + }
  31 + },
  32 +
  33 + /**
  34 + * 生命周期函数--监听页面加载
  35 + */
  36 + onLoad: function (options) {
  37 +
  38 + },
  39 +
  40 + /**
  41 + * 生命周期函数--监听页面初次渲染完成
  42 + */
  43 + onReady: function () {
  44 +
  45 + },
  46 +
  47 + /**
  48 + * 生命周期函数--监听页面显示
  49 + */
  50 + onShow: function () {
  51 + //导航栏自适应
  52 + let systemInfo = wx.getSystemInfoSync();
  53 + let reg = /ios/i;
  54 + let pt = 20;//导航状态栏上内边距
  55 + let h = 44;//导航状态栏高度
  56 + if (reg.test(systemInfo.system)) {
  57 + pt = systemInfo.statusBarHeight;
  58 + h = 44;
  59 + } else {
  60 + pt = systemInfo.statusBarHeight;
  61 + h = 48;
85 } 62 }
  63 + this.setData({
  64 + statusBarHeight: pt,
  65 + titleBarHeight: h,
  66 + height: systemInfo.windowHeight
  67 + })
  68 + },
  69 +
  70 + /**
  71 + * 生命周期函数--监听页面隐藏
  72 + */
  73 + onHide: function () {
  74 +
  75 + },
  76 +
  77 + /**
  78 + * 生命周期函数--监听页面卸载
  79 + */
  80 + onUnload: function () {
  81 +
  82 + },
  83 +
  84 + /**
  85 + * 页面相关事件处理函数--监听用户下拉动作
  86 + */
  87 + onPullDownRefresh: function () {
  88 +
  89 + },
  90 +
  91 + /**
  92 + * 页面上拉触底事件的处理函数
  93 + */
  94 + onReachBottom: function () {
  95 +
  96 + },
  97 +
  98 + /**
  99 + * 用户点击右上角分享
  100 + */
  101 + onShareAppMessage: function () {
  102 +
  103 + },
  104 + swiperChange(e){
  105 + this.setData({
  106 + current:e.detail.current,
  107 + })
  108 + },
  109 + switchTabs(e){
  110 + this.setData({
  111 + current:util.attr(e,'current'),
  112 + })
  113 + }
86 }) 114 })
@@ -3,12 +3,14 @@ @@ -3,12 +3,14 @@
3 indicator-dots="{{false}}" 3 indicator-dots="{{false}}"
4 autoplay="{{false}}" 4 autoplay="{{false}}"
5 duration="{{500}}" 5 duration="{{500}}"
  6 + bindchange="swiperChange"
  7 + current="{{current}}"
6 style="height:{{height}}px;" 8 style="height:{{height}}px;"
7 > 9 >
8 - <block wx:for="{{[1,2,3]}}"> 10 + <block wx:for="{{tpls}}" wx:key="tpls.key">
9 <swiper-item> 11 <swiper-item>
10 - <view class="pages bg-{{item}}" style="height:{{height}}px;">  
11 - {{$item}} 12 + <view class="pages bg-{{item.id}} flex-vc" style="height:{{height}}px;">
  13 + <template is="tpl-{{item.id}}" data="{{...seller}}"></template>
12 </view> 14 </view>
13 </swiper-item> 15 </swiper-item>
14 </block> 16 </block>
@@ -17,7 +19,55 @@ @@ -17,7 +19,55 @@
17 class="flex-vc" 19 class="flex-vc"
18 style="position:fixed;top:{{statusBarHeight}}px;left:0;height: {{titleBarHeight}}px; line-height: {{titleBarHeight}}px;"> 20 style="position:fixed;top:{{statusBarHeight}}px;left:0;height: {{titleBarHeight}}px; line-height: {{titleBarHeight}}px;">
19 <view class="tabs flex-ll"> 21 <view class="tabs flex-ll">
20 - <view class="item active">AAA</view>  
21 - <view class="item">BBB</view> 22 + <block wx:for="{{tpls}}" wx:key="tpls.key">
  23 + <view class="item {{index==current?'active':''}}" bindtap="switchTabs" data-current="{{index}}">{{item.name}}</view>
  24 + </block>
22 </view> 25 </view>
23 </view> 26 </view>
  27 +<view class="editor flex-vc">修改内容</view>
  28 +<!--//商务-->
  29 +<template name="tpl-1">
  30 + <view class="flex-vc shangwu">
  31 + <view class="invit-logo">
  32 + <image src="http://qn.colorcun.com/custom/lite-yd-cook/image/detail_owner_invitation-1-1.png"></image>
  33 + </view>
  34 + <view class="seller flex-vc">
  35 + <view class="title">餐厅</view>
  36 + <view class="content name">{{name}}</view>
  37 + <view class="title">包间</view>
  38 + <view class="content">{{room}}</view>
  39 + <view class="title">时间</view>
  40 + <view class="content">{{date}}</view>
  41 + <view class="title">店铺地址</view>
  42 + <view class="content flex-cc addr">
  43 + <image src="http://qn.colorcun.com/manager-invitation/wx/address.png" class="invit-addr"></image>
  44 + {{addr}}第三方斯蒂芬
  45 + </view>
  46 + </view>
  47 + </view>
  48 +</template>
  49 +
  50 +<!--//温馨-->
  51 +<template name="tpl-2">
  52 + <view class="wenxin-top"></view>
  53 + <view class="wenxin-bottom"></view>
  54 + <view class="flex-vc wenxin">
  55 + <view class="invit-logo">
  56 + <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>
  57 + </view>
  58 + <view class="wenxin-mask">
  59 + <view class="wenxin-mask-bg"></view>
  60 + <view class="wenxin-mask-img"></view>
  61 + </view>
  62 + <view class="wenxin-baitou"></view>
  63 + <view class="wenxin-line"></view>
  64 + <view class="seller flex-vc">
  65 + <view class="content">{{date}}</view>
  66 + <view class="content">{{name}}{{room}}</view>
  67 + <view class="content flex-cc addr">
  68 + <image src="http://qn.colorcun.com/manager-invitation/wx/address.png" class="invit-addr"></image>
  69 + {{addr}}
  70 + </view>
  71 + </view>
  72 + </view>
  73 +</template>
1 /* pages/manager-invitation/review.wxss */ 1 /* pages/manager-invitation/review.wxss */
2 .pages{ 2 .pages{
3 font-size: 200rpx; 3 font-size: 200rpx;
  4 + background-size: 100%;
  5 + font-size: 34rpx;
4 } 6 }
5 .tabs{ 7 .tabs{
6 } 8 }
@@ -9,6 +11,8 @@ @@ -9,6 +11,8 @@
9 color:#999999; 11 color:#999999;
10 margin-left: 20rpx; 12 margin-left: 20rpx;
11 padding: 0 10rpx; 13 padding: 0 10rpx;
  14 + height: 66rpx;
  15 + line-height: 66rpx;
12 } 16 }
13 .tabs .item.active{ 17 .tabs .item.active{
14 font-size: 36rpx; 18 font-size: 36rpx;
@@ -17,11 +21,143 @@ @@ -17,11 +21,143 @@
17 border-bottom: 2rpx solid #E9D9B7; 21 border-bottom: 2rpx solid #E9D9B7;
18 } 22 }
19 .bg-1{ 23 .bg-1{
20 - background-color: #61A5D1; 24 + background-image: url("http://qn.colorcun.com/custom/lite-yd/image/invit-bg.png");
  25 + background-color: #353334;
  26 + color:#fefefe;
21 } 27 }
22 .bg-2{ 28 .bg-2{
23 - background-color: #1AAD19; 29 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E5%BA%95%E9%83%A8.png");
  30 + background-color: #F4AFB2;
24 } 31 }
25 -.bg-3{  
26 - background-color: #AD7644; 32 +image{
  33 + width: 100%;
  34 + height: 100%;
  35 +}
  36 +
  37 +.invit-logo{
  38 + width: 400rpx;
  39 + height: 170rpx;
  40 +}
  41 +.seller{
  42 + margin-top: 80rpx;
  43 +}
  44 +.seller .title{
  45 + font-size: 28rpx;
  46 + color:#999999;
  47 + margin-bottom: 18rpx;
  48 + height: 40rpx;
  49 + line-height: 40rpx;
  50 +}
  51 +.seller .content{
  52 + margin-bottom: 40rpx;
  53 + font-size: 36rpx;
  54 + line-height: 50rpx;
  55 + text-align: center;
  56 + align-items:flex-start;
  57 +}
  58 +.seller .addr{
  59 + width: 80%;
  60 +}
  61 +.seller .invit-addr{
  62 + width: 22rpx;
  63 + height: 28rpx;
  64 + margin-right: 10rpx;
  65 + margin-top: 10rpx;
  66 + min-width: 22rpx;
  67 +}
  68 +
  69 +.editor{
  70 + position: fixed;
  71 + bottom: 0;
  72 + height:98rpx;
  73 + left: 0;
  74 + line-height: 98rpx;
  75 + font-size: 30rpx;
  76 + color: #353535;
  77 + background-color: #ECD9B7;
  78 + width: 100%;
  79 +}
  80 +.shangwu{
  81 +
  82 +}
  83 +.wenxin{
  84 +
  85 +}
  86 +
  87 +.wenxin-top{
  88 + position: fixed;
  89 + top:0;
  90 + left:0;
  91 + width:100%;
  92 + height: 80rpx;
  93 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E9%A1%B6%E9%83%A8%E8%8A%B1%E8%BE%B9.png");
  94 + background-size: 100%;
  95 +}
  96 +.wenxin-bottom{
  97 + position: fixed;
  98 + bottom:0;
  99 + left:0;
  100 + width:100%;
  101 + height: 64rpx;
  102 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E8%8A%B1%E8%BE%B9-%E5%BA%95%E9%83%A8.png");
  103 + background-size: 100%;
  104 +}
  105 +.wenxin .invit-logo{
  106 + width: 340rpx;
  107 + height: 184rpx;
  108 +}
  109 +.wenxin-mask{
  110 + margin-top: 10rpx;
  111 + width: 568rpx;
  112 + height: 560rpx;
  113 + position: relative;
  114 +}
  115 +.wenxin-mask-bg{
  116 + margin: 60rpx auto;
  117 + width: 468rpx;
  118 + height: 468rpx;
  119 + border-radius: 50%;
  120 + overflow: hidden;
  121 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/hunshazhao2.png");
  122 + background-size: 100%;
  123 +}
  124 +.wenxin-mask-img{
  125 + position: absolute;
  126 + left: 0;
  127 + top:0;
  128 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E8%8A%B1%E7%8E%AF%E7%A9%BA.png");
  129 + width: 100%;
  130 + height: 560rpx;
  131 + background-size: 100%;
  132 +}
  133 +.wenxin-baitou{
  134 + margin-top: 20rpx;
  135 + width: 404rpx;
  136 + height: 42rpx;
  137 + background-size: 100%;
  138 + 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");
  139 +}
  140 +.wenxin-line{
  141 + margin-top: 30rpx;
  142 + width: 600rpx;
  143 + height: 14rpx;
  144 + background-size: 100%;
  145 + background-image: url("http://qn.colorcun.com/manager-invitation/wx/%E5%88%86%E5%89%B2%E5%B0%96%E5%A4%B4.png");
  146 +}
  147 +.wenxin .seller{
  148 + margin-top: 30rpx;
  149 + color:#fefefe;
  150 +}
  151 +.wenxin .seller .title{
  152 + display: none;
  153 +}
  154 +.wenxin .seller .content{
  155 + margin-bottom: 20rpx;
  156 + font-size: 36rpx;
  157 + line-height: 50rpx;
  158 + text-align: center;
  159 + align-items:flex-start;
  160 +}
  161 +.wenxin .seller .content.addr{
  162 + width: 100%;
27 } 163 }