xt / xcx-book · Commits

Go to a project

Commit 8ff77a4caaa544086c77d23166c167fc73a26415

Authored by vking
1 parent 4f7544a1
build: skipped

pay

Inline Side-by-side
Showing 8 changed files with 546 additions and 1 deletions
@@ -89,7 +89,8 @@ @@ -89,7 +89,8 @@
89 "pages/book/smsbatch/list", 89 "pages/book/smsbatch/list",
90 "pages/book/smsbatch/result", 90 "pages/book/smsbatch/result",
91 "pages/book/roomtype/roomtype", 91 "pages/book/roomtype/roomtype",
92 - "pages/book/b_reserve" 92 + "pages/book/b_reserve",
  93 + "pages/checkout/index"
93 ] 94 ]
94 } 95 }
95 ], 96 ],
@@ -152,6 +153,10 @@ @@ -152,6 +153,10 @@
152 "haowu": { 153 "haowu": {
153 "version": "3.2.0", 154 "version": "3.2.0",
154 "provider": "wx56c8f077de74b07c" 155 "provider": "wx56c8f077de74b07c"
  156 + },
  157 + "vktool": {
  158 + "version": "2.1.8",
  159 + "provider": "wxd3dc4206c76f14fc"
155 } 160 }
156 }, 161 },
157 "navigateToMiniProgramAppIdList": [ 162 "navigateToMiniProgramAppIdList": [
  1 +// pack-book/pages/checkout/index.js
  2 +import util from '../../../utils/util';
  3 +import App from '../../../utils/api';
  4 +import RS from '../../../utils/reserveStatus';
  5 +Page({
  6 +
  7 + /**
  8 + * 页面的初始数据
  9 + */
  10 + data: {
  11 + qnConf:{
  12 + accessKey:'uva-aaonM8dukeR6phc9yuPBrOXk9brrNW_PxLD7',
  13 + secretKey:'oZMMVN6phk49lG0J1xwmi1Ju0ETT15EnAEWcU9Cs',
  14 + token:'',
  15 + bucket:'colorcun-attr',//存储空间
  16 + fileType:'image',//image|video|audio|file def:file
  17 + region:'华东',//存储区域
  18 + domain:'http://nosqn.colorcun.com/',//你绑定的域名,非必填项
  19 + },
  20 + upConf:{
  21 + prefixPath:'paylist/images/', //上传到七牛后有一个路径前缀，可为空
  22 + loading:'leaf',// none|leaf|circle|ring, def leaf 上传的loading效果; none为无，可自行在page wxml中添加
  23 + group:'def', //一个页面上多个组件的区分标识
  24 + security:false, // 开启非法检测，默认 false
  25 +
  26 + //上传图片
  27 + count:5, //最多可以选择的图片张数
  28 + sizeType:['compressed'], //['original', 'compressed'] 所选的图片的尺寸,超大图片 compressed 会引起开卡顿
  29 + sourceType:['album', 'camera'], //['album', 'camera'] 选择图片的来源
  30 +
  31 + },
  32 + files:[], //组件数据放入这里展示到页面上
  33 + hasAddFile:true,//出现上传加号
  34 + },
  35 +
  36 + /**
  37 + * 生命周期函数--监听页面加载
  38 + */
  39 + onLoad: function (options) {
  40 + this.options=options
  41 + this.setData({
  42 + [`upConf.prefixPath`]:'paylist/'+options.rid+'/'
  43 + })
  44 + },
  45 +
  46 + /**
  47 + * 生命周期函数--监听页面初次渲染完成
  48 + */
  49 + onReady: function () {
  50 +
  51 + },
  52 +
  53 + /**
  54 + * 生命周期函数--监听页面显示
  55 + */
  56 + onShow: function () {
  57 + this.getDetail();
  58 + },
  59 +
  60 + /**
  61 + * 生命周期函数--监听页面隐藏
  62 + */
  63 + onHide: function () {
  64 +
  65 + },
  66 +
  67 + /**
  68 + * 生命周期函数--监听页面卸载
  69 + */
  70 + onUnload: function () {
  71 +
  72 + },
  73 +
  74 + /**
  75 + * 页面相关事件处理函数--监听用户下拉动作
  76 + */
  77 + onPullDownRefresh: function () {
  78 +
  79 + },
  80 +
  81 + /**
  82 + * 页面上拉触底事件的处理函数
  83 + */
  84 + onReachBottom: function () {
  85 +
  86 + },
  87 + detail:null,
  88 + getDetail(){
  89 + App.Reserve.Detail({
  90 + openid: getApp().openid,
  91 + rid: this.options.rid
  92 + }).then(async res => {
  93 + this.detail=this.formatDatail(res.data)
  94 + this.detail.ddate_solt=Number(this.detail.ddate_solt);
  95 + this.setData({
  96 + detail: this.detail
  97 + })
  98 + })
  99 + },
  100 + formatDatail(detail) {
  101 + detail=RS.reserve(detail);
  102 + let formatDate='YYYY-MM-DD '+detail.soltName
  103 + if(detail.type==1 && detail.is_set_ddate==1){
  104 + formatDate +=' HH:II'
  105 + }
  106 + detail.rdateStr = util.unixtoTime(detail.ddate, formatDate);
  107 + detail.orderRemark='';
  108 + if(detail.order_info){
  109 + if(detail.order_info.is_wine==1 || detail.order_info.is_pack==1){
  110 + detail.orderRemark='*顾客'
  111 + let orderRemark=[]
  112 + if(detail.order_info.is_wine==1){
  113 + orderRemark.push('有酒水要退')
  114 + }
  115 + if(detail.order_info.is_pack==1){
  116 + orderRemark.push('菜品需要打包')
  117 + }
  118 + detail.orderRemark+=orderRemark.join('，')
  119 + }
  120 + }
  121 + return detail;
  122 + },
  123 + displayTables(){
  124 + if(this.data.tabs){
  125 + this.setData({
  126 + tabs:'',
  127 + })
  128 + return;
  129 + }
  130 + let tables=this.detail.tables
  131 + let tabs={}
  132 + tables.some(t=>{
  133 + if(!tabs[t.tid]){
  134 + tabs[t.tid]=t.name
  135 + }else{
  136 + tabs[t.tid]+="、"+t.name
  137 + }
  138 + })
  139 + this.setData({
  140 + tabs:tabs,
  141 + })
  142 + },
  143 + setPrice(e){
  144 + this.price=e.detail.value.replace(/[^\.\d]/g,'')
  145 + this.setData({
  146 + price:this.price
  147 + })
  148 + return this.price
  149 + },
  150 + qnevent(e){
  151 + console.log('qnevent',e.detail);
  152 + this.setData({
  153 + files:e.detail.data,
  154 + hasAddFile:e.detail.data.length<this.data.upConf.count
  155 + })
  156 + },
  157 + displayImage(e){
  158 + let path=util.attr(e,'path')
  159 + wx.previewImage({
  160 + urls:[path],
  161 + })
  162 + },
  163 + deleteImage(e){
  164 + let index=util.attr(e,'index')
  165 + let files=this.data.files
  166 + files.splice(index,1)
  167 + this.setData({
  168 + files:files,
  169 + })
  170 + util.toast('图片已删除','none')
  171 + },
  172 +})
  1 +{
  2 + "backgroundTextStyle":"light",
  3 + "navigationBarBackgroundColor": "#fff",
  4 + "navigationBarTextStyle":"white",
  5 + "usingComponents": {
  6 + "nav":"/components/nav/nav",
  7 + "qnupload": "plugin://vktool/qnupload"
  8 + }
  9 +
  10 +}
  1 +<!--pack-book/pages/checkout/index.wxml-->
  2 +<wxs src="../../../utils/util.wxs" module="util" />
  3 +<nav hasHome backgroundColor="#199095" color="#fefefe">{{title||'提前买单'}}</nav>
  4 +<view class="pages flex-vc">
  5 + <block wx:if="{{detail.order_info.status>1}}">
  6 + <view class="block payinfo">
  7 + <view class="title flex-lr">
  8 + <view>消费信息</view>
  9 + </view>
  10 + <view class="center">
  11 + <view class="item flex-lr">
  12 + <view class="item-label">应收金额</view>
  13 + <view class="item-value order_info-price">¥ {{detail.order_info.price}}</view>
  14 + </view>
  15 + <view class="item flex-lr" wx:if="{{detail.order_info.bill_list}}">
  16 + <view class="item-label">消费清单</view>
  17 + <view class="item-value order_info-bill_list">查看消费清单</view>
  18 + </view>
  19 + <view class="bg-img pay-tips-icon bg-pay{{detail.order_info.status}}"></view>
  20 + </view>
  21 + </view>
  22 + <view class="block userinfo">
  23 + <view class="title flex-lr">
  24 + <view>顾客信息</view>
  25 + <view class="orderRemark">{{detail.orderRemark}}</view>
  26 + </view>
  27 + <view class="center">
  28 + <view class="item flex-lr">
  29 + <view class="item-label">桌位信息</view>
  30 + <view class="item-value flex-rr">
  31 + 【{{util.reserveTidName(detail.tables[0].tid)}}】{{detail.tables[0].name}}
  32 + <view class="bg-img bg-x1" wx:if="{{detail.tables.length>1}}"></view>
  33 + </view>
  34 + </view>
  35 + <view class="item flex-lr">
  36 + <view class="item-label">买单顾客</view>
  37 + <view class="item-value">{{detail.rname}} {{util.reserveSexName(detail.sex)}}</view>
  38 + </view>
  39 + <view class="item flex-lr">
  40 + <view class="item-label">顾客电话</view>
  41 + <view class="item-value">{{detail.phone}}</view>
  42 + </view>
  43 + <view class="item flex-lr">
  44 + <view class="item-label">到店时间</view>
  45 + <view class="item-value">{{detail.rdateStr}}</view>
  46 + </view>
  47 + <view class="item flex-lr">
  48 + <view class="item-label">申请时间</view>
  49 + <view class="item-value">{{util.unixtoTime(detail.order_info.create_time,'YYYY-MM-DD HH:II')}}</view>
  50 + </view>
  51 + </view>
  52 + </view>
  53 + </block>
  54 + <block wx:if="{{detail.order_info.status==1}}">
  55 + <view class="pay-image-view flex-vc">
  56 + <view class="bg-img bg-pay"></view>
  57 + <view class="pay-txt">顾客申请买单</view>
  58 + </view>
  59 + <view class="block orderinput">
  60 + <view class="center">
  61 + <view class="item {{tabs?'auto-height':''}}">
  62 + <view class="flex-lr" bindtap="{{detail.tables.length>1?'displayTables':''}}">
  63 + <view class="item-label">桌位信息</view>
  64 + <view class="item-value flex-rr">
  65 + <view wx:if="{{!tabs}}">【{{util.reserveTidName(detail.tables[0].tid)}}】{{detail.tables[0].name}}</view>
  66 + <view class="bg-img bg-{{tabs?'x2':'x1'}}" wx:if="{{detail.tables.length>1}}"></view>
  67 + </view>
  68 + </view>
  69 + <view class="tabs-view" wx:if="{{tabs}}">
  70 + <view class="tabs-item" wx:for="{{tabs}}" wx:key="tabs">【{{util.reserveTidName(index)}}】{{item}}</view>
  71 + </view>
  72 + </view>
  73 + <view class="item flex-lr">
  74 + <view class="item-label">应收金额</view>
  75 + <view class="item-value flex-rr" style="position: relative">
  76 +
  77 + <input class="item-value-input"
  78 + bindinput="setPrice" type="digit" maxlength="8"
  79 + placeholder-style="font-size:32rpx" placeholder="点击填写金额"/>
  80 + <view wx:if="{{price}}"
  81 + style="right:{{price.length*25}}rpx;"
  82 + class="item-value-input hasPrice">￥</view>
  83 + </view>
  84 + </view>
  85 + </view>
  86 + </view>
  87 + <view class="orderRemark orderRemark-view" wx:if="{{detail.orderRemark}}">{{detail.orderRemark}}</view>
  88 + <view class="block orderimage">
  89 + <view class="title flex-lr">
  90 + <view>消费清单（选填）</view>
  91 + </view>
  92 + <view class="center">
  93 + <block wx:for="{{files}}" wx:key="files.key">
  94 + <qnupload qnConf="{{qnConf}}" upConf="{{upConf}}"
  95 + file="{{item}}" files="{{files}}"
  96 + bindevent="qnevent" class="qnupload">
  97 + <view class="upload flex-vc uploaded"
  98 + catchtap="displayImage" data-path="{{item.path}}"
  99 + style="background-image: url('{{item.path}}')">
  100 + <view class="bg-add bg-img" style="background-image: none"></view>
  101 + <view class="upload-txt"></view>
  102 + <view class="image-delete flex-vc" catchtap="deleteImage" data-index="{{index}}">
  103 + <view class="bg-img bg-c2"></view>
  104 + </view>
  105 + </view>
  106 + </qnupload>
  107 + </block>
  108 + <qnupload wx:if="{{hasAddFile}}"
  109 + qnConf="{{qnConf}}" upConf="{{upConf}}"
  110 + file="{{item}}" files="{{files}}"
  111 + bindevent="qnevent" class="qnupload">
  112 + <view class="upload flex-vc">
  113 + <view class="bg-add bg-img"></view>
  114 + <view class="upload-txt">添加图片</view>
  115 + </view>
  116 + </qnupload>
  117 + </view>
  118 + </view>
  119 + <view class="block userinfo">
  120 + <view class="title flex-lr">
  121 + <view>顾客信息</view>
  122 + </view>
  123 + <view class="center">
  124 + <view class="item flex-lr">
  125 + <view class="item-label">买单顾客</view>
  126 + <view class="item-value">{{detail.rname}} {{util.reserveSexName(detail.sex)}}</view>
  127 + </view>
  128 + <view class="item flex-lr">
  129 + <view class="item-label">顾客电话</view>
  130 + <view class="item-value">{{detail.phone}}</view>
  131 + </view>
  132 + <view class="item flex-lr">
  133 + <view class="item-label">到店时间</view>
  134 + <view class="item-value">{{detail.rdateStr}}</view>
  135 + </view>
  136 + <view class="item flex-lr">
  137 + <view class="item-label">申请时间</view>
  138 + <view class="item-value">{{util.unixtoTime(detail.order_info.create_time,'YYYY-MM-DD HH:II')}}</view>
  139 + </view>
  140 + </view>
  141 + </view>
  142 + </block>
  143 +</view>
  1 +/* pack-book/pages/checkout/index.wxss */
  2 +page{
  3 + background:rgba(245,245,245,1);
  4 +}
  5 +.bg-img{
  6 + background-image: url("http://nosqn.colorcun.com/checkout/images/css_sprites.png");
  7 + zoom: 33.5%;
  8 +}
  9 +.bg-add {
  10 + width: 48px; height: 48px;
  11 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -141px -111px;
  12 +}
  13 +.bg-c1 {
  14 + width: 36px; height: 36px;
  15 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -209px -111px;
  16 +}
  17 +.bg-x2 {
  18 + width: 42px; height: 24px;
  19 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -265px -111px;
  20 +}
  21 +.bg-x1 {
  22 + width: 42px; height: 24px;
  23 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -141px -179px;
  24 + margin-left: 20rpx;
  25 +}
  26 +.bg-pay3 {
  27 + width: 165px; height: 81px;
  28 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -10px -10px;
  29 +}
  30 +.bg-pay1 {
  31 + width: 165px; height: 81px;
  32 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -195px -10px;
  33 +}
  34 +.bg-pay {
  35 + width: 111px; height: 99px;
  36 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -10px -111px;
  37 +}
  38 +.bg-c2 {
  39 + width: 30px; height: 30px;
  40 + background: url('http://nosqn.colorcun.com/checkout/images/css_sprites.png') -10px -230px;
  41 +}
  42 +
  43 +.pay-image-view{
  44 + margin-top: 40rpx;
  45 +}
  46 +.pay-txt{
  47 + margin-top: 12rpx;
  48 + height:44rpx;
  49 + font-size:32rpx;
  50 + font-weight:500;
  51 + color:rgba(53,53,53,1);
  52 + line-height:44rpx;
  53 +}
  54 +.block{
  55 + background:rgba(250,250,250,1);
  56 + border-radius:10rpx;
  57 + width: calc(100% - 40rpx);
  58 + margin-top: 20rpx;
  59 +}
  60 +.block .title{
  61 + height: 116rpx;
  62 + line-height: 116rpx;
  63 + font-size:32rpx;
  64 + font-weight:500;
  65 + color:rgba(53,53,53,1);
  66 + padding: 0 20rpx;
  67 + box-sizing: border-box;
  68 +}
  69 +.orderRemark{
  70 + font-size:28rpx;
  71 + font-weight:500;
  72 + color:rgba(253,86,86,1);
  73 +}
  74 +.orderRemark-view{
  75 + width: calc(100% - 40rpx);
  76 + height:40rpx;
  77 + line-height:40rpx;
  78 + margin: 10rpx auto;
  79 + font-weight:500;
  80 +}
  81 +.block .center{
  82 + padding: 0 40rpx 36rpx;
  83 + background:rgba(255,255,255,1);
  84 + box-sizing: border-box;
  85 + position: relative;
  86 +}
  87 +.center .item{
  88 + padding-top: 24rpx;
  89 + height:40rpx;
  90 + font-size:28rpx;
  91 + font-weight:400;
  92 + color:rgba(112,112,112,1);
  93 + line-height:40rpx;
  94 +}
  95 +.item-value{
  96 + font-weight:500;
  97 + color:rgba(53,53,53,1);
  98 +}
  99 +.pay-tips-icon{
  100 + position: absolute;
  101 + top:calc(50% - 84rpx);
  102 + left:calc(50% - 111rpx);
  103 +}
  104 +.order_info-price{
  105 + font-size:32rpx;
  106 + font-weight:500;
  107 + color:rgba(53,53,53,1);
  108 +}
  109 +.order_info-bill_list{
  110 + font-size:24rpx;
  111 + font-weight:500;
  112 + color:rgba(36,164,168,1);
  113 + height:34rpx;
  114 + line-height: 34rpx;
  115 + border-bottom: 2rpx solid #24A4A8;
  116 +}
  117 +
  118 +.orderinput{
  119 + margin-top: 40rpx;
  120 +}
  121 +.orderinput .center{
  122 + padding-bottom: 0;
  123 +}
  124 +.orderinput .item{
  125 + font-size:32rpx;
  126 + font-weight:400;
  127 + height: 116rpx;
  128 + line-height: 116rpx;
  129 + box-sizing: border-box;
  130 + border-bottom: 2rpx solid rgba(238,238,238,1);
  131 + padding-top: 0;
  132 +}
  133 +.orderinput .auto-height{
  134 + height: auto;
  135 +}
  136 +.orderinput .item:last-child{
  137 + border-bottom-width: 0;
  138 +}
  139 +.item-value-input{
  140 + text-align: right;
  141 + font-size:44rpx;
  142 + font-weight:500;
  143 + color:rgba(53,53,53,1);
  144 +}
  145 +.tabs-view{
  146 + font-size:32rpx;
  147 + font-weight:400;
  148 + color:rgba(53,53,53,1);
  149 + padding: 0 20rpx 36rpx;
  150 +}
  151 +.tabs-item{
  152 + line-height: 44rpx;
  153 +}
  154 +.hasPrice{
  155 + position: absolute;
  156 + top:0;
  157 + right:30rpx;
  158 + height: 44rpx;
  159 + line-height: 44rpx;
  160 +}
  161 +.orderimage .center{
  162 + padding: 40rpx 0 36rpx 56rpx;
  163 +}
  164 +@import "upload.wxss";
  1 +.qnupload{
  2 + display: inline-block;
  3 + width: 180rpx;
  4 + height: 180rpx;
  5 + margin-right: 30rpx;
  6 +}
  7 +.upload{
  8 + border: 2px #E0E0E0 dashed ;
  9 + box-sizing: border-box;
  10 + position: relative;
  11 + width: 100%;
  12 + height: 100%;
  13 + background-size: cover;
  14 + background-repeat: no-repeat;
  15 + background-position: 50% 50%;
  16 +}
  17 +.uploaded{
  18 + border-width: 0;
  19 +}
  20 +.upload-txt{
  21 + height:34rpx;
  22 + font-size:24rpx;
  23 + font-family:PingFangSC-Medium,PingFang SC;
  24 + font-weight:500;
  25 + color:rgba(153,153,153,1);
  26 + line-height:34rpx;
  27 + margin-top: 10rpx;
  28 +}
  29 +.image-delete{
  30 + right: 0;
  31 + top:0;
  32 + position: absolute;
  33 + width:40rpx;
  34 + height:40rpx;
  35 + background:rgba(13,13,13,0.5);
  36 +}
@@ -646,6 +646,13 @@ @@ -646,6 +646,13 @@
646 "pathName": "pack-checkout/pages/index", 646 "pathName": "pack-checkout/pages/index",
647 "query": "rid=61685&sid=80", 647 "query": "rid=61685&sid=80",
648 "scene": null 648 "scene": null
  649 + },
  650 + {
  651 + "id": 81,
  652 + "name": "pack-book/pages/checkout/index",
  653 + "pathName": "pack-book/pages/checkout/index",
  654 + "query": "rid=62202",
  655 + "scene": null
649 } 656 }
650 ] 657 ]
651 } 658 }
@@ -61,6 +61,14 @@ module.exports = { @@ -61,6 +61,14 @@ module.exports = {
61 enspace={morning: 1, noon: 2, night: 3}[enspace] 61 enspace={morning: 1, noon: 2, night: 3}[enspace]
62 return names[enspace]||names[4] 62 return names[enspace]||names[4]
63 }, 63 },
  64 + reserveTidName:function(enspace){
  65 + var names=['','散座','包间','卡座'];
  66 + return names[(enspace*1)]||''
  67 + },
  68 + reserveSexName:function(enspace){
  69 + var names=['','先生','女士',''];
  70 + return names[(enspace*1)]||''
  71 + },
64 getRoomName:function(rooms=[]){ 72 getRoomName:function(rooms=[]){
65 if(rooms.length<1) return "" 73 if(rooms.length<1) return ""
66 var name=rooms[0].name 74 var name=rooms[0].name