tab2,tab3.1

app.json

@@ -12,7 +12,8 @@
     "pages/help/community/index",
     "pages/help/address/index/index",
     "pages/help/address/edit/index",
-    "pages/shop/detail/index"
+    "pages/shop/detail/index",
+    "pages/shop/success/index"
   ],
   "window": {
     "navigationBarTextStyle": "black",

app.wxss

@@ -4,6 +4,7 @@ page{
   line-height: 1;
   background-color:#F5F5F5;
   color: #222222;
+  padding-bottom:80rpx;
 }
 
 button{
@@ -105,6 +106,13 @@ checkbox .wx-checkbox-input{
   border-radius: 50%;
 }
 
+page-container .content{
+  border-radius: 24rpx 24rpx 0 0;
+  background-color: #F5F5F5;
+  min-height: 200rpx;
+  /* padding:20rpx; */
+}
+
 .page-container{
   background-color: #fff;
   border-radius: 20rpx;
@@ -114,3 +122,45 @@ checkbox .wx-checkbox-input{
 .page-container.shadow{
   box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
 }
+
+
+.tags{
+  display: flex;
+  gap: 10rpx;
+}
+.tags .tag{
+  font-size:20rpx;
+  padding:6rpx 10rpx;
+  color: #888888;
+  border: 0.5px solid rgba(153, 153, 153, 0.5);
+  border-radius: 6rpx;
+}
+.spliter{
+  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
+}
+.money,.money-promation,.money-normal,.money-disable{
+  font-size: 36rpx;
+  font-weight: 500;
+}
+.money::before,.money-promation::before,.money-normal::before,.money-disable::before{
+  content: "¥";
+  font-size: 80%;
+}
+.money{
+  color:#EB0000;
+}
+.money-promation{
+  color:#FF8400;
+}
+.money-promation::before{
+  content: "-¥";
+}
+.money-normal{
+  color:unset;
+}
+.money-disable{
+  color:#888888;
+  text-decoration: line-through;
+  font-size: 28rpx;
+  font-weight:normal;
+}

components/navbar/index.json

@@ -1,4 +1,5 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {},
+  "styleIsolation": "shared"
 }

components/shopItem/index.js

@@ -0,0 +1,24 @@
+// components/shop/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/shopItem/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "shared"
+}

components/shopItem/index.wxml

@@ -0,0 +1,18 @@
+<view class="page-container shop-item">
+  <image class="logo" src="/assets/imgs/for_test/jd.png"/>
+  <view class="content">
+    <view class="line1">京东养车</view>
+    <view class="line2">
+      <view class="line2-1">燎原路228号御景湾</view>
+      <view class="line2-2">100m</view>
+    </view>
+    <view class="line-coupon">
+      <label class="money">22.9</label>
+      <label class="money-disable">22.9</label>【5座】标准洗车
+    </view>
+    <view class="line-coupon">
+      <label class="money">22.9</label>
+      <label class="money-disable">22.9</label>【5座】标准洗车
+    </view>
+  </view>
+</view>

components/shopItem/index.wxss

@@ -0,0 +1,49 @@
+.shop-item{
+  display: flex;
+}
+.shop-item .logo{
+  width:180rpx;height:180rpx;
+}
+.shop-item .content{
+  flex:1;
+  margin-left:18rpx;
+}
+.shop-item .line1{
+  font-size:34rpx;
+  font-weight: 600;
+}
+.shop-item .line2{
+  font-size: 26rpx;
+  display: flex;
+  color:#888888;
+  margin-top:26rpx;
+  padding-bottom:16rpx;
+}
+.shop-item .line2-1{
+  flex:1;
+}
+.shop-item .line-coupon{
+  font-size: 26rpx;
+  margin-top: 20rpx;
+  position: relative;
+}
+.shop-item .line-coupon::before{
+  content: '惠';
+  width:34rpx;height:34rpx;
+  font-size:22rpx;
+  border-radius: 8rpx;
+  background-color: #FF8400;
+  color: #fff;
+  display: inline-block;
+  text-align: center;
+  line-height: 34rpx;
+  vertical-align: top;
+  margin-right: 8rpx;
+}
+.shop-item .money{
+  font-size: 32rpx;
+}
+.shop-item .money-disable{
+  font-size: 28rpx;
+  margin-left:10rpx;
+}

pages/order/index/index.js

@@ -5,7 +5,11 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    tabIndex:0
+  },
+  changeTab(event){
+    const tabIndex = event.currentTarget.dataset.index;
+    this.setData({tabIndex})
   },
 
   /**

pages/order/index/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "nav-bar":"/components/navbar"
+  },
+  "navigationStyle": "custom"
 }

pages/order/index/index.wxml

@@ -1,2 +1,14 @@
-<!--pages/order/index/index.wxml-->
+<nav-bar class="nav-bar"/>
-<text>pages/order/index/index.wxml</text>
+<view class="tab-bar">
+  <view class="item-container {{tabIndex==0?'current':''}}" bind:tap="changeTab" data-index="0">
+    <view class="item">跑腿服务</view>
+  </view>
+  <view class="item-container {{tabIndex==1?'current':''}}" bind:tap="changeTab" data-index="1">
+    <view class="item">团购省钱</view>
+  </view>
+</view>
+
+<view class="list-empty">
+  <image class="icon" src="/assets/icon/order/empty@2x.png"/>
+  <view class="text">暂无相关订单</view>
+</view>

pages/order/index/index.wxss

@@ -1 +1,47 @@
-/* pages/order/index/index.wxss */
+.nav-bar{
+  background-color: #fff;
+}
+.tab-bar{
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  font-size: 34rpx;
+  font-weight: 600;
+}
+.tab-bar .item-container{
+  padding:0 110rpx;
+}
+.tab-bar .item{
+  position: relative;
+  padding:40rpx 0;
+  color: #7C8695;
+  transition-duration: .4s;
+}
+.tab-bar .item::before{
+  opacity: 0;
+  content: "";
+  height:8rpx;
+  width:100%;
+  position: absolute;
+  bottom:0;
+  background-color: #1A4DEB;
+  transition-duration: .4s;
+}
+.tab-bar .current .item{
+  color: #000;
+}
+.tab-bar .current .item::before{
+  opacity: 1;
+}
+
+.list-empty{
+  text-align: center;
+  margin-top:380rpx;
+}
+.list-empty .icon{
+  width:160rpx;height:160rpx;
+}
+.list-empty .text{
+  font-size:30rpx;
+  color:#7C8695
+}

pages/shop/detail/index.js

@@ -5,7 +5,18 @@ Page({
    * 页面的初始数据
    */
   data: {
+    isShowConfirm:false
+  },
 
+  showConfirm(){
+    this.setData({
+      isShowConfirm:true
+    })
+  },
+  goToSuccess(){
+    wx.navigateTo({
+      url: '/pages/shop/success/index',
+    })
   },
 
   /**

pages/shop/detail/index.wxml

@@ -1,10 +1,10 @@
 <view class="swiper-container">
   <swiper class="swiper" >
     <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/1.png" mode="aspectFit"/>
+      <image class="image" src="/assets/imgs/for_test/1.jpg" mode="aspectFit"/>
     </swiper-item>
     <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/2.png" mode="aspectFit"/>
+      <image class="image" src="/assets/imgs/for_test/2.jpg" mode="aspectFit"/>
     </swiper-item>
   </swiper>
   <view class="nav">
@@ -64,8 +64,44 @@
             <label>消费金抵扣</label>
           </view>
         </view>
-        <button class="button" size="mini" type="primary">抢购</button>
+        <button class="button" size="mini" type="primary" bind:tap="showConfirm">抢购</button>
       </view>
     </view>
   </view>
 </view>
+
+
+<page-container show="{{isShowConfirm}}" round close-on-slide-down>
+  <view class="content pc-content">
+    <view class="page-container">
+      <view class="info">
+        <image class="image" src="/assets/imgs/for_test/woman.png"/>
+        <view class="right">
+          <view class="title">【督导】洗剪吹+修眉</view>
+          <view class="tags">
+            <view class="tag">周一至周五可用</view>
+            <view class="tag">随时退</view>
+          </view>
+        </view>
+      </view>
+      <view class="kv">
+        <view class="key">团购价</view>
+        <view class="value">
+          <label class="money-normal">88.0</label>
+        </view>
+      </view>
+      <view class="spliter"></view>
+      <view class="kv">
+        <view class="key">消费金抵扣</view>
+        <view class="value">
+          <label class="money-promation">9.0</label>
+        </view>
+      </view>
+      <view class="kv">
+        <view class="key"></view>
+        <view class="value">合计：<label class="money">79.0</label></view>
+      </view>
+    </view>
+    <button class="button" type="primary" bind:tap="goToSuccess">立即购买</button>
+  </view>
+</page-container>

pages/shop/detail/index.wxss

@@ -44,7 +44,6 @@
   margin-top:20rpx;
 }
 .shop-info .spliter{
-  border-bottom: 1px solid rgba(153, 153, 153, 0.2);
   margin:16rpx 0 30rpx 0;
 }
 .shop-info .address .left{
@@ -122,33 +121,19 @@
   font-weight: 500;
 }
 .group-buy .item .right .tags{
-  display: flex;
-  gap: 10rpx;
   margin-top:20rpx;
 }
-.group-buy .item .right .tag{
+.group-buy .item .right .bl-money{
-  font-size:20rpx;
+  display: flex;
-  padding:6rpx 10rpx;
+  align-items: center;
-  color: #888888;
-  border: 0.5px solid rgba(153, 153, 153, 0.5);
-  border-radius: 6rpx;
-  
 }
 .group-buy .item .right .money{
   color:#EB0000;
   font-size: 32rpx;
 }
-.group-buy .item .right .money::before{
-  content:"¥";
-  font-size: 24rpx;
-}
 .group-buy .item .right .money-disable{
-  color: #888888;
-  text-decoration: line-through;
   margin-left: 10rpx;
-}
+  font-size: 24rpx;
-.group-buy .item .right .money-disable::before{
-  content:"¥";
 }
 .group-buy .item .promation{
   border-radius: 6rpx;
@@ -178,3 +163,35 @@
   line-height: 1;
   padding:14rpx 36rpx;
 }
+
+.pc-content .info{
+  display: flex;
+  padding-bottom:10rpx
+}
+.pc-content .info .image{
+  width:160rpx;height:160rpx;
+}
+.pc-content .info .right{
+  flex:1;
+  margin-left:40rpx;
+}
+.pc-content .info .tags{
+  margin-top:20rpx;
+}
+.pc-content .info .title{
+  font-size: 36rpx;
+}
+.pc-content .kv{
+  display: flex;
+  margin:30rpx;
+}
+.pc-content .kv .key{
+  flex:1;
+  font-size:29rpx;
+}
+.pc-content .kv .value{
+  font-size: 26rpx;
+}
+.pc-content .button{
+  margin:20rpx 20rpx 50rpx;
+}

pages/shop/index/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "nav-bar":"/components/navbar"
+    "nav-bar":"/components/navbar",
+    "shop-item":"/components/shopItem"
   },
   "navigationStyle": "custom"
 }

pages/shop/index/index.wxml

@@ -12,7 +12,7 @@
 </view>
 
 <view class="shop-list">
-  <view class="page-container item" wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
+  <shop-item wx:for="{{3}}" bind:tap="goToDetail" wx:key="index">
     <image class="logo" src="/assets/imgs/for_test/jd.png"/>
     <view class="content">
       <view class="line1">京东养车</view>
@@ -21,13 +21,13 @@
         <view class="line2-2">100m</view>
       </view>
       <view class="line-coupon">
-        <label class="money">¥22.9</label>
+        <label class="money">22.9</label>
-        <label class="money-disable">¥22.9</label>【5座】标准洗车
+        <label class="money-disable">22.9</label>【5座】标准洗车
       </view>
       <view class="line-coupon">
-        <label class="money">¥22.9</label>
+        <label class="money">22.9</label>
-        <label class="money-disable">¥22.9</label>【5座】标准洗车
+        <label class="money-disable">22.9</label>【5座】标准洗车
-      </view>
       </view>
     </view>
+  </shop-item>
 </view>

pages/shop/index/index.wxss

@@ -13,8 +13,8 @@
 }
 .consume .money{
   font-size: 70rpx;
-  font-weight: 600;
   margin-top:40rpx;
+  color:#fff;
 }
 .consume .tips{
   position:absolute;
@@ -42,56 +42,3 @@
 .btns .item:not([type=primary]){
   background-color: #fff;
 }
-
-.shop-list .item{
-  display: flex;
-}
-.shop-list .item .logo{
-  width:180rpx;height:180rpx;
-}
-.shop-list .item .content{
-  flex:1;
-  margin-left:18rpx;
-}
-.shop-list .item .line1{
-  font-size:34rpx;
-  font-weight: 600;
-}
-.shop-list .item .line2{
-  font-size: 26rpx;
-  display: flex;
-  color:#888888;
-  margin-top:26rpx;
-  padding-bottom:16rpx;
-}
-.shop-list .item .line2-1{
-  flex:1;
-}
-.shop-list .item .line-coupon{
-  font-size: 26rpx;
-  margin-top: 20rpx;
-  position: relative;
-}
-.shop-list .item .line-coupon::before{
-  content: '惠';
-  width:34rpx;height:34rpx;
-  font-size:22rpx;
-  border-radius: 8rpx;
-  background-color: #FF8400;
-  color: #fff;
-  display: inline-block;
-  text-align: center;
-  line-height: 34rpx;
-  vertical-align: top;
-  margin-right: 8rpx;
-}
-.shop-list .item .money{
-  font-size: 32rpx;
-  color:#EB0000;
-  font-weight:500
-}
-.shop-list .item .money-disable{
-  font-size: 28rpx;
-  color: #888888;
-  text-decoration: line-through;
-}

pages/shop/success/index.js

@@ -0,0 +1,66 @@
+// pages/shop/success/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/shop/success/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "shop-item":"/components/shopItem"
+  }
+}

pages/shop/success/index.wxml

@@ -0,0 +1,8 @@
+<view class="success">
+  <icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
+  <view class="text">支付成功</view>
+  <button class="button" plain>前往查看订单</button>
+</view>
+<view class="shop-list">
+  <shop-item wx:for="{{3}}" wx:key="index"/>
+</view>

pages/shop/success/index.wxss

@@ -0,0 +1,24 @@
+.success{
+  background-color: #fff;
+  text-align: center;
+  padding:100rpx 0;
+}
+.success .text{
+  font-size: 36rpx;
+  font-weight: 500;
+  margin-top:30rpx;
+}
+.success .button{
+  margin:100rpx 112rpx 0;
+  border: 1rpx solid rgba(124, 134, 149, 0.5);
+  border-radius: 60rpx;
+}
+
+.shop-list{
+  margin-top:-20rpx;
+  border-radius: 30rpx 30rpx 0 0;
+  position: relative;
+  z-index: 1;
+  background-color: #F5F5F5;
+  padding-top:20rpx;
+}