tab2.2

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
     "pages/help/index/index",
-    "pages/savemoney/index/index",
+    "pages/shop/index/index",
     "pages/order/index/index",
     "pages/my/index/index",
     "pages/index/index",
@@ -11,7 +11,8 @@
     "pages/help/success/index",
     "pages/help/community/index",
     "pages/help/address/index/index",
-    "pages/help/address/edit/index"
+    "pages/help/address/edit/index",
+    "pages/shop/detail/index"
   ],
   "window": {
     "navigationBarTextStyle": "black",
@@ -31,7 +32,7 @@
         "selectedIconPath": "assets/icon/tabs/tab1-active@2x.png"
       },
       {
-        "pagePath": "pages/savemoney/index/index",
+        "pagePath": "pages/shop/index/index",
         "text": "省钱",
         "iconPath": "assets/icon/tabs/tab2@2x.png",
         "selectedIconPath": "assets/icon/tabs/tab2-active@2x.png"

pages/shop/detail/index.js

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

pages/shop/detail/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/shop/detail/index.wxml

@@ -0,0 +1,71 @@
+<view class="swiper-container">
+  <swiper class="swiper" >
+    <swiper-item class="item">
+      <image class="image" src="/assets/imgs/for_test/1.png" mode="aspectFit"/>
+    </swiper-item>
+    <swiper-item class="item">
+      <image class="image" src="/assets/imgs/for_test/2.png" mode="aspectFit"/>
+    </swiper-item>
+  </swiper>
+  <view class="nav">
+    <image src="/assets/icon/shop/image@2x.png" class="icon"/>
+    <label class="text">1/2</label>
+    <image src="/assets/icon/shop/right-arrow@2x.png" class="right-arrow"/>
+  </view>
+</view>
+<view class="page-container shop-info">
+  <view class="name">椰岛造型</view>
+  <view class="time">营业时间 10:00-22:00</view>
+  <view class="spliter"></view>
+  <view class="address">
+    <view class="left">
+      <view class="l1">温江区光华大道三段1588号1栋合生汇…</view>
+      <view class="l2">距离958m</view>
+    </view>
+    <view class="right">
+      <view class="icon-con">
+        <image class="icon" src="/assets/icon/shop/location@2x.png"/>
+      </view>
+      <view class="text">导航</view>
+    </view>
+    <view class="right">
+      <view class="icon-con">
+        <image class="icon" src="/assets/icon/shop/phone@2x.png"/>
+      </view>
+      <view class="text">导航</view>
+    </view>
+  </view>
+</view>
+
+<view class="page-container group-buy">
+  <view class="head">
+    <image class="h-icon" src="/assets/icon/shop/group-buy@2x.png"/>
+    <view class="h-right">
+      <image class="avatar" src="/assets/imgs/for_test/avatar.png"/>
+      <label class="text">刚刚参与团购</label>
+    </view>
+  </view>
+  <view class="item" wx:for="{{2}}" wx:key="index">
+    <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 class="bottom">
+        <view class="b-left">
+          <view class="bl-money">
+            <label class="money">88</label>
+            <label class="money-disable">188</label>
+          </view>
+          <view class="promation">
+            <image class="icon" src="/assets/icon/shop/arrow-down@2x.png"/>
+            <label>消费金抵扣</label>
+          </view>
+        </view>
+        <button class="button" size="mini" type="primary">抢购</button>
+      </view>
+    </view>
+  </view>
+</view>

pages/shop/detail/index.wxss

@@ -0,0 +1,180 @@
+.swiper-container{
+  height:600rpx;
+  position: relative;
+}
+.swiper-container .nav{
+  position: absolute;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 60rpx;
+  color: #fff;
+  font-size: 24rpx;
+  right: 20rpx;
+  bottom: 54rpx;
+  padding: 8rpx 16rpx;
+}
+.swiper-container .nav .icon{
+  width:28rpx;height:28rpx;
+  vertical-align: middle;
+}
+.swiper-container .nav .right-arrow{
+  width:16rpx;height:16rpx;
+  vertical-align: middle;
+}
+.swiper-container .nav .text{
+  vertical-align: middle;
+  margin:0 2rpx 0 8rpx;
+}
+.swiper{height: 100%;}
+.swiper .image{
+  width:100%;
+  height:100%;
+}
+
+
+.shop-info{}
+.shop-info .address{
+  display: flex;
+}
+.shop-info .name{
+  font-weight: 500;
+  font-size: 44rpx;
+}
+.shop-info .time{
+  font: 25rpx;
+  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{
+  flex:1;
+}
+.shop-info .address .l1{
+  font-size: 26rpx;
+  white-space: nowrap;
+  margin-top:6rpx;
+}
+.shop-info .address .l2{
+  font-size: 24rpx;
+  color: #888888;
+  margin-top:40rpx
+}
+.shop-info .address .right{
+  font-size:22rpx;
+  color: #888888;
+  text-align: center;
+  margin-left: 44rpx;
+}
+.shop-info .address .icon-con{
+  padding:8rpx;
+  background: rgba(153, 153, 153, 0.1);
+  display: inline-block;
+  border-radius: 50%;
+}
+.shop-info .address .icon{
+  width:30rpx;height:30rpx;
+}
+.shop-info .address .right .text{
+  margin-top:26rpx;
+}
+
+.page-container.shop-info{
+  margin:0;
+  margin-top:-34rpx;
+  position: relative;
+}
+.page-container.group-buy{
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.group-buy .head{
+  display: flex;
+  justify-content: space-between;
+}
+.group-buy .h-icon{
+  width:144rpx;height:36rpx;
+}
+.group-buy .h-right{
+  font-size:24rpx;
+  color: #555555;
+  display: flex;
+  align-items: center;
+}
+.group-buy .h-right .avatar{
+  width:32rpx;height:32rpx;
+  margin-right:10rpx;
+}
+.group-buy .item{
+  display: flex;
+  margin:40rpx 0;
+}
+.group-buy .item .image{
+  width:200rpx;height: 200rpx;
+}
+.group-buy .item .right{
+  flex:1;
+  margin-left:24rpx;
+}
+.group-buy .item .right .title{
+  font-size: 30rpx;
+  font-weight: 500;
+}
+.group-buy .item .right .tags{
+  display: flex;
+  gap: 10rpx;
+  margin-top:20rpx;
+}
+.group-buy .item .right .tag{
+  font-size:20rpx;
+  padding:6rpx 10rpx;
+  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;
+}
+.group-buy .item .right .money-disable::before{
+  content:"¥";
+}
+.group-buy .item .promation{
+  border-radius: 6rpx;
+  background-color: #FFECEC;
+  color: #FF3A3A;
+  font-size: 20rpx;
+  display: inline-flex;
+  padding:4px 6px;
+  align-items: center;
+  margin-top:20rpx;
+}
+.group-buy .item .promation .icon{
+  width:24rpx;height:24rpx;
+}
+.group-buy .item .right .bottom{
+  display: flex;
+  margin-top:30rpx;
+  align-items: flex-end;
+}
+.group-buy .item .b-left{
+  flex:1;
+}
+.group-buy .item .button{
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  font-weight: normal;
+  line-height: 1;
+  padding:14rpx 36rpx;
+}

pages/shop/index/index.js

@@ -13,6 +13,11 @@ Page({
     this.setData({tabIndex})
     
   },
+  goToDetail(){
+    wx.navigateTo({
+      url: '/pages/shop/detail/index',
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/shop/index/index.wxml

@@ -12,7 +12,7 @@
 </view>
 
 <view class="shop-list">
-  <view class="page-container item" wx:for="{{3}}">
+  <view class="page-container 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>