新增预约弹出框

src/pages/business/detail.vue

@@ -44,7 +44,7 @@
 		      error || !loaded
 		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
 		        : goods.logo
-		    " mode="scaleToFill" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"></image> -->
+		    " mode="scaleToFill" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"></image> -->
       <image class="img" src="../../static/logo.png"></image>
       <view>
         <view class="item-text">{{ item.name }}</view>
@@ -68,7 +68,24 @@
         </view>
       </view>
     </view>
-    <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
+    <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
+
+    <u-popup :show="reserve_show" @close="reserve_show = false" @open="open" round='20' mode='center'>
+      <view class="draw-box">
+        <view class="draw-title"> 预约服务  </view>
+        <view class="draw-item">
+          <view class="item-text">时间</view>
+          <u--input placeholder="请输入内容"  border="surround" v-model="value"></u--input>
+        </view>
+        <view class="draw-item">
+          <view class="item-text">联系方式</view>
+          <u--input placeholder="请输入联系方式"  border="surround" v-model="value" ></u--input>
+        </view>
+
+        <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
+      </view>
+    </u-popup>
+
   </view>
 </template>
 
@@ -93,7 +110,10 @@
           region: null, //地区编码
           longitude: null, //经度
           latitude: null, //纬度
-        }
+        },
+
+        reserve_show:false,
+        value:''
       };
     },
     onLoad(option) {
@@ -130,30 +150,41 @@
         getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
           this.merchant = res.data.merchant
           this.goods = res.data.goods,
-          this.list3 = res.data.merchant.banners.map(h => h.url)
+            this.list3 = res.data.merchant.banners.map(h => h.url)
         })
-      },
-      // 点击拨打电话
-      handlerMakeCall(){
-        uni.makePhoneCall({
-          phoneNumber:this.merchant.mobile
-        })
-      },
-      // 点击跳转到商品详情
-      handlerSkipGoodsDetail(item,index){
-        uni.navigateTo({
-          url:`/pages/business/service/detail?id=${item.id}`
-        })
-      },
-      // 预约
-      handlerService(item,index){
+      },
+      // 点击拨打电话
+      handlerMakeCall() {
+        uni.makePhoneCall({
+          phoneNumber: this.merchant.mobile
+        })
+      },
+      // 点击跳转到商品详情
+      handlerSkipGoodsDetail(item, index) {
+        uni.navigateTo({
+          url: `/pages/business/service/detail?id=${item.id}`
+        })
+      },
+      // 预约
+      handlerService(item, index) {
         console.log('点击预约');
+        this.reserve_show = true
+      },
+      // 购买
+      handlerSkipBuy(item, index) {
+        uni.navigateTo({
+          url: '/pages/order/order'
+        })
+      },
+
+      open(){},
+      // 点击选择时间
+      handlerSelectTime(){
+        console.log('e',e);
       },
-      // 购买
-      handlerSkipBuy(item,index){
-        uni.navigateTo({
-          url:'/pages/order/order'
-        })
+      // 点击预约确定按钮
+      handlerDrawConfirmBtn(){
+        this.reserve_show = false
       }
     }
   };
@@ -305,6 +336,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .list-price {
         .item-l {
           color: #E35240;
@@ -327,25 +359,54 @@
       }
 
       .btn-box {
-        display: flex;
-        margin-left: 30rpx;
-        .btn{
-          font-size: 28rpx;
-          height: 70rpx;
-        }
-        .btn1{
-          border-radius: 40rpx 0 0 40rpx;
-          border: 2rpx solid #EC5729;
-          color: #EC5729;
-          background-color: #fff;
-        }
-        .btn2{
-          color: #fff;
-          background-color: #EC5729;
-          border-radius: 0 40rpx 40rpx 0;
+        display: flex;
+        margin-left: 30rpx;
+
+        .btn {
+          font-size: 28rpx;
+          height: 70rpx;
+        }
+
+        .btn1 {
+          border-radius: 40rpx 0 0 40rpx;
+          border: 2rpx solid #EC5729;
+          color: #EC5729;
+          background-color: #fff;
+        }
+
+        .btn2 {
+          color: #fff;
+          background-color: #EC5729;
+          border-radius: 0 40rpx 40rpx 0;
         }
       }
 
     }
+  }
+
+  .draw-box{
+    width: 560rpx;
+    padding: 20rpx;
+    .draw-title{
+      font-size: 30rpx;
+      font-weight: bold;
+      color: #000;
+      margin-bottom: 30rpx;
+    }
+    .draw-item{
+      margin-bottom: 20rpx;
+      .item-text{
+        font-size:28rpx;
+        color: #000;
+        padding-left: 20rpx;
+      }
+    }
+    .draw-btn{
+      width: 90%;
+      background-color: #5992BB !important;
+      color: #fff;
+      font-size:28rpx;
+      border-radius: 20rpx;
+    }
   }
 </style>