xt / xcx-book · Commits

Go to a project

Commit eabab85c4c17c609401a6713b8f3efa211e5b5e9

Authored by vking
1 parent 1f596c1f
build: skipped

online

Inline Side-by-side
Showing 10 changed files with 390 additions and 90 deletions
@@ -28,7 +28,8 @@ @@ -28,7 +28,8 @@
28 "pages/reserve/activity", 28 "pages/reserve/activity",
29 "pages/reserve/discount", 29 "pages/reserve/discount",
30 "pages/reserve/indexList", 30 "pages/reserve/indexList",
31 - "pages/reserve/share" 31 + "pages/reserve/share",
  32 + "pages/reserve/submit"
32 ], 33 ],
33 "subpackages": [ 34 "subpackages": [
34 { 35 {
1 // components/seller-card/seller-card.js 1 // components/seller-card/seller-card.js
2 import util from '../../utils/util'; 2 import util from '../../utils/util';
  3 +
3 Component({ 4 Component({
4 - options: {  
5 - multipleSlots: true // 在组件定义时的选项中启用多slot支持  
6 - }, 5 + options: {
  6 + multipleSlots: true // 在组件定义时的选项中启用多slot支持
  7 + },
7 /** 8 /**
8 * 组件的属性列表 9 * 组件的属性列表
9 */ 10 */
10 properties: { 11 properties: {
11 - seller:Object,  
12 - detail:{  
13 - type:Object,  
14 - value:{},  
15 - observer:function(){  
16 - console.log('observer',arguments);  
17 - this.init();  
18 - }  
19 - },  
20 - hasMaster:{ //预订人+手机  
21 - type:Boolean,  
22 - value:false  
23 - },  
24 - hasListShare:{ //首页列表的预订人+分享  
25 - type:Boolean,  
26 - value:false  
27 - },  
28 - hasShowStatus:{ //右上角显示状态  
29 - type:Boolean,  
30 - value:false 12 + seller: Object,
  13 + detail: {
  14 + type: Object,
  15 + value: {},
  16 + observer: function () {
  17 + console.log('observer', arguments);
  18 + this.init();
31 } 19 }
  20 + },
  21 + hasMaster: { //预订人+手机
  22 + type: Boolean,
  23 + value: false
  24 + },
  25 + hasListShare: { //首页列表的预订人+分享
  26 + type: Boolean,
  27 + value: false
  28 + },
  29 + hasShowStatus: { //右上角显示状态
  30 + type: Boolean,
  31 + value: false
  32 + },
  33 + hasAddress: { //显示地址，默认显示
  34 + type: Boolean,
  35 + value: true
  36 + },
  37 + hasOnlineReserve:{ //是否为在线预订卡片
  38 + type: Boolean,
  39 + value: false
  40 + },
32 }, 41 },
33 42
34 /** 43 /**
35 * 组件的初始数据 44 * 组件的初始数据
36 */ 45 */
37 data: { 46 data: {
38 - rdateStr:"",  
39 - tableSubInfo:"",  
40 - masterMan:"", 47 + rdateStr: "",
  48 + tableSubInfo: "",
  49 + masterMan: "",
41 }, 50 },
42 - attached(){ 51 + attached() {
43 52
44 - },  
45 - detached(){ 53 + },
  54 + detached() {
46 55
47 - }, 56 + },
48 /** 57 /**
49 * 组件的方法列表 58 * 组件的方法列表
50 */ 59 */
51 methods: { 60 methods: {
52 - init(){  
53 - if(this.data.detail && this.data.detail.ddate){  
54 - let masterMan=(this.data.detail.rname||'');  
55 - if(this.data.detail.phone){  
56 - masterMan+=' （'+  
57 - this.data.detail.phone  
58 - .replace(/([\d]{2}).*([\d]{4})/,function($0,$1,$2){  
59 - return $1+'*'+$2  
60 - })  
61 - +'）';  
62 - }  
63 - let tableSubInfo=''  
64 - let tableFirst='';  
65 - if(this.data.detail.tableFirst){  
66 - tableSubInfo=(this.data.detail.tableFirst||'')+' '+(this.data.detail.tableSubInfo||'');  
67 - tableFirst=this.data.detail.tableFirst  
68 - }else{  
69 - tableFirst=this.data.detail.tables[0].name  
70 - tableSubInfo=this.data.detail.tables[0].name;  
71 - if(this.data.detail.tables.length>1){  
72 - tableSubInfo+=' 等'+(this.data.detail.tables.length)+'个'  
73 - +(this.data.detail.tables[0].tid==2?'包间':'');  
74 - tableFirst+='等';  
75 - }  
76 - }  
77 - let obj={  
78 - rdateStr:util.unixtoTime(this.data.detail.ddate,'MM月DD日 HH:II'),  
79 - tableSubInfo:tableSubInfo,  
80 - tableFirst:tableFirst,  
81 - masterMan:masterMan,  
82 - }  
83 - if(this.data.hasShowStatus){  
84 - let ns=new Date()/1000  
85 - obj.showStatusStr='已预订'  
86 - if(this.data.detail.status==4){  
87 - obj.showStatusStr='已取消'  
88 - }else if(this.data.detail.status>=2 || ns>this.data.detail.ddate){  
89 - obj.showStatusStr='已完成'  
90 - }  
91 - }  
92 - this.setData(obj) 61 + init() {
  62 + if (this.data.detail && this.data.detail.ddate) {
  63 + let masterMan = (this.data.detail.rname || '');
  64 + if (this.data.detail.phone) {
  65 + masterMan += ' （' +
  66 + this.data.detail.phone
  67 + .replace(/([\d]{2}).*([\d]{4})/, function ($0, $1, $2) {
  68 + return $1 + '*' + $2
  69 + })
  70 + + '）';
  71 + }
  72 + let tableSubInfo = ''
  73 + let tableFirst = '';
  74 + if (this.data.detail.tableFirst) {
  75 + tableSubInfo = (this.data.detail.tableFirst || '') + ' ' + (this.data.detail.tableSubInfo || '');
  76 + tableFirst = this.data.detail.tableFirst
  77 + } else {
  78 + tableFirst = this.data.detail.tables[0].name
  79 + tableSubInfo = this.data.detail.tables[0].name;
  80 + if (this.data.detail.tables.length > 1) {
  81 + tableSubInfo += ' 等' + (this.data.detail.tables.length) + '个'
  82 + + (this.data.detail.tables[0].tid == 2 ? '包间' : '');
  83 + tableFirst += '等';
  84 + }
  85 + }
  86 + let obj = {
  87 + rdateStr: util.unixtoTime(this.data.detail.ddate, 'MM月DD日 HH:II'),
  88 + tableSubInfo: tableSubInfo,
  89 + tableFirst: tableFirst,
  90 + masterMan: masterMan,
  91 + }
  92 + if (this.data.hasShowStatus) {
  93 + let ns = new Date() / 1000
  94 + obj.showStatusStr = '已预订'
  95 + if (this.data.detail.status == 4) {
  96 + obj.showStatusStr = '已取消'
  97 + } else if (this.data.detail.status >= 2 || ns > this.data.detail.ddate) {
  98 + obj.showStatusStr = '已完成'
  99 + }
  100 + }
  101 + this.setData(obj)
  102 + }
  103 + },
  104 + lookLocation: function () {
  105 + //console.log(this.data.seller.lat,this.data.seller.long,this.data.detail.map_address)
  106 + wx.openLocation({
  107 + latitude: Number(this.data.seller.lat),
  108 + longitude: Number(this.data.seller.long),
  109 + scale: 17,
  110 + address: this.data.seller.map_address,
  111 + success: function (res) {
  112 + console.log(res)
93 } 113 }
  114 + })
94 }, 115 },
95 - lookLocation:function(){  
96 - //console.log(this.data.seller.lat,this.data.seller.long,this.data.detail.map_address)  
97 - wx.openLocation({  
98 - latitude:Number(this.data.seller.lat),  
99 - longitude:Number(this.data.seller.long),  
100 - scale:17,  
101 - address:this.data.seller.map_address,  
102 - success:function (res) {  
103 - console.log(res)  
104 - }  
105 - })  
106 - },  
107 } 116 }
108 }) 117 })
1 <!--components/seller-card/seller-card.wxml--> 1 <!--components/seller-card/seller-card.wxml-->
2 -<view class="card"> 2 +<view class="card {{hasOnlineReserve?'online':''}}">
3 <view class="seller flex-lr"> 3 <view class="seller flex-lr">
4 <view class="flex-ll"> 4 <view class="flex-ll">
5 <view class="avatar" wx:if="{{seller.seller_image}}"> 5 <view class="avatar" wx:if="{{seller.seller_image}}">
6 <image src="{{seller.seller_image}}"></image> 6 <image src="{{seller.seller_image}}"></image>
7 </view> 7 </view>
8 - <view class="name Medium">{{seller.sellername}}</view> 8 + <view class="card-class name Medium">{{seller.sellername}}</view>
9 </view> 9 </view>
10 <view wx:if="{{hasShowStatus}}" style="font-size: 30rpx;"> 10 <view wx:if="{{hasShowStatus}}" style="font-size: 30rpx;">
11 {{showStatusStr}} 11 {{showStatusStr}}
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 <view class="value">{{tableFirst}}</view> 25 <view class="value">{{tableFirst}}</view>
26 </view> 26 </view>
27 </view> 27 </view>
28 - <view class="seller address flex-ll" catchtap="lookLocation"> 28 + <view class="seller address flex-ll" catchtap="lookLocation" wx:if="{{hasAddress}}">
29 <view class="gps-icon"> 29 <view class="gps-icon">
30 <image src="http://qn.colorcun.com/custom/lite-yd/image/gps-icon.png"></image> 30 <image src="http://qn.colorcun.com/custom/lite-yd/image/gps-icon.png"></image>
31 </view> 31 </view>
@@ -15,6 +15,7 @@ @@ -15,6 +15,7 @@
15 min-width: 60rpx; 15 min-width: 60rpx;
16 border-radius: 50%; 16 border-radius: 50%;
17 margin-right: 20rpx; 17 margin-right: 20rpx;
  18 + overflow: hidden;
18 } 19 }
19 .seller .more{ 20 .seller .more{
20 width: 14rpx; 21 width: 14rpx;
@@ -31,7 +32,6 @@ @@ -31,7 +32,6 @@
31 font-size: 36rpx; 32 font-size: 36rpx;
32 color:#AD7644; 33 color:#AD7644;
33 } 34 }
34 -  
35 .context{ 35 .context{
36 background-color: #E6EBEE; 36 background-color: #E6EBEE;
37 width: 100%; 37 width: 100%;
@@ -95,3 +95,13 @@ @@ -95,3 +95,13 @@
95 .opt{ 95 .opt{
96 padding-top: 0; 96 padding-top: 0;
97 } 97 }
  98 +
  99 +.online .seller .name{
  100 + color: #353535;
  101 +}
  102 +.online .context{
  103 + background-color: #F5F5F5;
  104 +}
  105 +.online .context .line{
  106 + background-color: #ECEBEB;
  107 +}
@@ -83,5 +83,5 @@ Page({ @@ -83,5 +83,5 @@ Page({
83 user: this.user 83 user: this.user
84 }) 84 })
85 } 85 }
86 - } 86 + },
87 }) 87 })
  1 +// pages/reserve/submit.js
  2 +import util from '../../utils/util';
  3 +import App from '../../utils/api';
  4 +const _u = {
  5 + name: '',
  6 + sex: 1,
  7 + phone: '',
  8 + remark: '',
  9 +}
  10 +Page({
  11 + user: _u,
  12 + /**
  13 + * 页面的初始数据
  14 + */
  15 + data: {
  16 + seller:null,
  17 + user:_u,
  18 + },
  19 +
  20 + /**
  21 + * 生命周期函数--监听页面加载
  22 + */
  23 + options:null,
  24 + onLoad: function (options) {
  25 + this.options=options
  26 + this.GetSellerDetail();
  27 + App.Customer.GetCustomerInfo().then(res=>{
  28 + this.user = res.data
  29 + this.setData({
  30 + user: res.data,
  31 + })
  32 + })
  33 + },
  34 +
  35 + /**
  36 + * 生命周期函数--监听页面初次渲染完成
  37 + */
  38 + onReady: function () {
  39 +
  40 + },
  41 +
  42 + /**
  43 + * 生命周期函数--监听页面显示
  44 + */
  45 + onShow: function () {
  46 +
  47 + },
  48 +
  49 + /**
  50 + * 生命周期函数--监听页面隐藏
  51 + */
  52 + onHide: function () {
  53 +
  54 + },
  55 +
  56 + /**
  57 + * 生命周期函数--监听页面卸载
  58 + */
  59 + onUnload: function () {
  60 +
  61 + },
  62 +
  63 + /**
  64 + * 页面相关事件处理函数--监听用户下拉动作
  65 + */
  66 + onPullDownRefresh: function () {
  67 +
  68 + },
  69 +
  70 + /**
  71 + * 页面上拉触底事件的处理函数
  72 + */
  73 + onReachBottom: function () {
  74 +
  75 + },
  76 + GetSellerDetail() {
  77 + let options = this.options
  78 + App.Customer.GetSellerDetail({
  79 + sid: options.sid,
  80 + }).then(res => {
  81 + if (res.ret == 200) {
  82 + let seller = res.data
  83 + this.setData({
  84 + seller: seller,
  85 + })
  86 + }
  87 + })
  88 + },
  89 + changeInput(e) {
  90 + let key = util.attr(e, 'key');
  91 + let val = ''
  92 + if (key == 'sex') {
  93 + val = util.attr(e, 'val');
  94 + } else {
  95 + val = util.val(e);
  96 + }
  97 + this.user[key] = val;
  98 + if (key == 'sex') {
  99 + this.setData({
  100 + user: this.user
  101 + })
  102 + }
  103 + },
  104 + saved() {
  105 + if(!this.user.name){
  106 + return util.toast('请填写姓名','none')
  107 + }
  108 + if(!this.user.phone){
  109 + return util.toast('请填写手机','none')
  110 + }
  111 + App.Customer.SetCustomerInfo({
  112 + ...this.user
  113 + }).then(res=>{
  114 + App.Customer.GetCustomerInfo({},'clear')
  115 + wx.navigateBack()
  116 + })
  117 + },
  118 +})
  1 +{
  2 + "usingComponents": {
  3 + "nav":"/components/nav/nav",
  4 + "formids":"/components/formids/formids",
  5 + "card":"/components/seller-card/seller-card"
  6 + }
  7 +}
  1 +<!--pages/reserve/submit.wxml-->
  2 +<nav hasBack>预订详情</nav>
  3 +<view class="pages">
  4 + <card hasShowStatus hasAddress="{{false}}" hasOnlineReserve
  5 + seller="{{seller}}" detail="{{detail}}">
  6 + <view slot="opt" class="back flex-rr">
  7 + <formids
  8 + id="userinfo-share-{{detail.id}}"
  9 + binduserinfo="userinfo"
  10 + bindshare="share"
  11 + share="{{detail}}">
  12 + <view class="opt-button">修改</view>
  13 + </formids>
  14 + </view>
  15 + </card>
  16 + <view class="userinfo">
  17 + <view class="item flex-lr">
  18 + <view class="item-label">姓名</view>
  19 + <view class="Medium flex-rr">
  20 + <input class="name input" placeholder="请填写用餐人姓名"
  21 + bindinput="changeInput"
  22 + data-key="name"
  23 + value="{{user.name}}"
  24 + placeholder-class="input-pl" maxlength="4"/>
  25 + <view class="flex-rr switch">
  26 + <view
  27 + bindtap="changeInput"
  28 + data-key="sex"
  29 + data-val="1"
  30 + class="switch-item {{user.sex==1?'checked':''}}">先生</view>
  31 + <view
  32 + bindtap="changeInput"
  33 + data-key="sex"
  34 + data-val="2"
  35 + class="switch-item {{user.sex==2?'checked':''}}">女士</view>
  36 + <view
  37 + bindtap="changeInput"
  38 + data-key="sex"
  39 + data-val="3"
  40 + class="switch-item {{user.sex==3?'checked':''}}">公司</view>
  41 + </view>
  42 + </view>
  43 + </view>
  44 + <view class="item flex-lr">
  45 + <view class="item-label">手机</view>
  46 + <view class="Medium">
  47 + <input class="phone input" placeholder="请填写联系方式"
  48 + bindinput="changeInput"
  49 + data-key="phone"
  50 + type="number"
  51 + value="{{user.phone}}"
  52 + placeholder-class="input-pl"/>
  53 + </view>
  54 + </view>
  55 + <view class="item flex-lr">
  56 + <view class="item-label">备注</view>
  57 + <view class="Medium">
  58 + <input class="cusdem input" placeholder="您的特殊要求，我们会尽量安排（20字）"
  59 + bindinput="changeInput"
  60 + data-key="remark"
  61 + value="{{user.cusdem}}"
  62 + placeholder-class="input-pl" maxlength="20"/>
  63 + </view>
  64 + </view>
  65 + </view>
  66 + <formids bindclick="saved">
  67 + <view class="share-but">提交预订</view>
  68 + </formids>
  69 +</view>
  1 +/* pages/reserve/submit.wxss */
  2 +.pages{
  3 + padding: 30rpx;
  4 + width: calc(100% - 60rpx);
  5 +}
  6 +.back{
  7 + height: 120rpx;
  8 + line-height: 120rpx;
  9 + width: 100%;
  10 +}
  11 +.opt-button{
  12 + height: 40rpx;
  13 + width: 120rpx;
  14 + border: 2rpx solid #C0A369;
  15 + color: #C0A369;
  16 + text-align: center;
  17 + line-height: 40rpx;
  18 + font-size: 26rpx;
  19 + margin-right: 40rpx;
  20 +}
  21 +
  22 +.userinfo{
  23 + font-size: 30rpx;
  24 +}
  25 +.item{
  26 + height: 124rpx;
  27 + line-height: 124rpx;
  28 + border-bottom: 2rpx solid #F5F5F5;
  29 + padding-top: 20rpx;
  30 +}
  31 +.item-label{
  32 + width: 100rpx;
  33 + min-width: 100rpx;
  34 + font-weight: bold;
  35 +}
  36 +.item view:last-child{
  37 + font-size: 34rpx;
  38 +}
  39 +.switch{
  40 + width: 252rpx;
  41 + height: 50rpx;
  42 + line-height: 50rpx;
  43 + border: 2rpx solid #C0A369;
  44 + margin-left: 16rpx;
  45 + font-size: 28rpx;
  46 +}
  47 +.Medium{
  48 + width: 100%;
  49 +}
  50 +.input{
  51 + width: 100%;
  52 +}
  53 +.switch .switch-item{
  54 + width: 84rpx;
  55 + height: 50rpx;
  56 + line-height: 50rpx;
  57 + text-align: center;
  58 + color: #C0A369;
  59 + border-right: 2rpx solid #C0A369;
  60 +}
  61 +.switch .switch-item:last-child{
  62 + border-width: 0;
  63 +}
  64 +.switch .checked{
  65 + background-color:#C0A369;
  66 + color: #FEFEFE;
  67 +}
  68 +.share-but{
  69 + color:#FEFEFE;
  70 + background: #262628;
  71 + width: 100%;
  72 + line-height: 80rpx;
  73 + font-size: 34rpx;
  74 + text-align: center;
  75 + margin-top: 160rpx;
  76 +}
  77 +.input-pl{
  78 + font-size: 28rpx;
  79 +}
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 "list": [] 45 "list": []
46 }, 46 },
47 "miniprogram": { 47 "miniprogram": {
48 - "current": 39, 48 + "current": 55,
49 "list": [ 49 "list": [
50 { 50 {
51 "id": 0, 51 "id": 0,
@@ -455,6 +455,13 @@ @@ -455,6 +455,13 @@
455 "pathName": "pages/reserve/share", 455 "pathName": "pages/reserve/share",
456 "query": "id=1&act=quanzi", 456 "query": "id=1&act=quanzi",
457 "scene": null 457 "scene": null
  458 + },
  459 + {
  460 + "id": 55,
  461 + "name": "pages/reserve/submit",
  462 + "pathName": "pages/reserve/submit",
  463 + "query": "sid=1",
  464 + "scene": null
458 } 465 }
459 ] 466 ]
460 } 467 }