客服

+// components/tips/service.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+  lifetimes: {
+
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    disp:false,
+    animation:'',
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    show(){
+      this.setData({
+        disp:true,
+        animation:'discountShow',
+      })
+      this.triggerEvent('event',{act:'show'})
+    },
+    hide(){
+      this.setData({
+        animation:'discountHide',
+      })
+      this.triggerEvent('event',{act:'hide'})
+      setTimeout(()=>{
+        this.setData({
+          disp:false,
+        })
+      },300)
+    },
+    call(){
+      this.triggerEvent('event',{act:'call'})
+      wx.makePhoneCall({
+        phoneNumber: '400-000-9690'
+      })
+    },
+  }
+})

+{
+  "component": true,
+  "usingComponents": {}
+}

+<!--components/tips/service.wxml-->
+<view class="mask" bindtap="hide" wx:if="{{disp}}" style="z-index: 99999">
+    <view class="boost {{animation}}" catchtap="catchtap" wx:if="{{animation}}">
+        <view class="header flex-vc" bindtap="hide">
+            <view class="title">操作指引</view>
+        </view>
+        <view class="content" bindtap="hide">
+            <button class="item flex-ll button-none" open-type="contact">
+                <view class="iconx-view">
+                    <view class="iconx iconx-msg"></view>
+                </view>
+                <view class="info">
+                    <view class="info-title">周到安排在线客服</view>
+                    <view class="info-desc">线上会话内容将被安全保护，推荐使用</view>
+                </view>
+            </button>
+            <button class="item flex-ll button-none" bindtap="call">
+                <view class="iconx-view">
+                    <view class="iconx iconx-phone"></view>
+                </view>
+                <view class="info">
+                    <view class="info-title">电话客服</view>
+                    <view class="info-desc">400-000-9690</view>
+                </view>
+            </button>
+        </view>
+        <view class="cancle" bindtap="hide">取消</view>
+    </view>
+</view>
+<view bindtap="show"><slot></slot></view>

+/* components/tips/service.wxss */
+@import "../../app.wxss";
+@keyframes discountShow
+{
+    from {bottom: -586rpx;}
+    to {bottom: 0rpx;}
+}
+@keyframes discountHide
+{
+    from {bottom: 0rpx;}
+    to {bottom: -586rpx;}
+}
+.boost{
+    width:100%;
+    height:586rpx;
+    background:rgba(255,255,255,1);
+    border-radius:40rpx 40rpx 0rpx 0rpx;
+    padding: 30rpx 40rpx;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+}
+.boost.discountShow{
+    animation: discountShow 0.6s;
+}
+.boost.discountHide{
+    animation: discountHide 0.6s;
+    bottom: -738rpx;
+}
+.title{
+    height:44rpx;
+    font-size:32rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(51,51,51,1);
+    line-height:44rpx;
+}
+.content{
+    margin-top: 40rpx;
+}
+.item{
+    height: 178rpx;
+    border-bottom: 2rpx solid #F5F5F5;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    display: -webkit-flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    -webkit-flex-direction: row;
+}
+.item:last-child{
+    border-bottom-width: 0;
+}
+.iconx-view{
+    width: 100rpx;
+    min-width: 100rpx;
+}
+.iconx{
+    background-size: 100% 100%;
+    width:40rpx;
+    height:40rpx;
+    /*margin-right: 60rpx;*/
+    /*margin-top: 69rpx;*/
+    min-width: 40rpx;
+}
+.iconx-msg{
+    background-image: url("http://nosqn.colorcun.com/icon-msg.png");
+}
+.iconx-phone{
+    background-image: url("http://nosqn.colorcun.com/icon-phone.png");
+}
+.info{
+    width: calc(100% - 100rpx);
+}
+.info-title{
+    height:48rpx;
+    font-size:34rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(51,51,51,1);
+    line-height:48rpx;
+    text-align: left;
+}
+.info-desc{
+    height:40rpx;
+    font-size:28rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(153,153,153,1);
+    line-height:40rpx;
+    margin-top: 10rpx;
+    text-align: left;
+}
+.cancle{
+    width:100%;
+    height:84rpx;
+    background:rgba(245,245,245,1);
+    border-radius:42rpx;
+    font-size:36rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(102,102,102,1);
+    line-height:84rpx;
+    text-align: center;
+}

@@ -16,6 +16,7 @@
     "activity-enter":"/components/activity/enter",
     "activity-enter":"/components/activity/enter",
     "showModal":"/components/tips/showModal/showModal",
     "showModal":"/components/tips/showModal/showModal",
     "as-phone":"/components/actionSheet/phone",
     "as-phone":"/components/actionSheet/phone",
-    "seller-discount":"/components/reserve/seller/discount"
+    "seller-discount":"/components/reserve/seller/discount",
+    "service":"/components/tips/service"
   }
   }
 }
 }

@@ -196,6 +196,7 @@
 
 
     <view class="detail-info Medium tuiding">
     <view class="detail-info Medium tuiding">
         <view class="flex-rr">
         <view class="flex-rr">
+            <service id="service"><view class="item">联系客服</view></service>
             <view class="item" bindtap="callSeller">联系商家</view>
             <view class="item" bindtap="callSeller">联系商家</view>
             <navigator url="./cancel?id={{detail.id}}"
             <navigator url="./cancel?id={{detail.id}}"
                        wx:if="{{(detail.hasRunning || detail.status==0) && checkout.status!=3}}"
                        wx:if="{{(detail.hasRunning || detail.status==0) && checkout.status!=3}}"

@@ -6,5 +6,5 @@
     <view class="desc">请客订包间，就用周到安排</view>
     <view class="desc">请客订包间，就用周到安排</view>
     <button class="launchApp"
     <button class="launchApp"
             bindtap="gotoHome"
             bindtap="gotoHome"
-            open-type="launchApp" type="primary" app-parameter="wechat" binderror="launchAppError">打开APP</button>
+            open-type="launchApp" type="primary" app-parameter="wechat" binderror="launchAppError">立即使用</button>
 </view>
 </view>