tab1,tab2.1

app.json

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

app.wxss

@@ -6,6 +6,10 @@ page{
   color: #222222;
 }
 
+button{
+  border-radius: 24rpx;
+  box-sizing: border-box;
+}
 button label{
   display: inline-block;
   margin-left: 10rpx;
@@ -38,18 +42,67 @@ button[type=default]{
 button[type=primary][plain]{
   border-color: #1A4DEB;
   color:#1A4DEB;
+  padding:28rpx 25rpx;
 }
 button[type=primary][plain]:hover{
   border-color: #1A4DEB;
   color:#1A4DEB;
 }
 
-
+radio-group{
-radio-group label,radio-group radio{
+  line-height: 34rpx;
+}
+radio-group radio{
+  display: inline-block;
   vertical-align: middle;
+  overflow: hidden;
 }
 radio-group label{
-  margin-left:14rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+radio-group radio+label{
+  margin-left:10rpx;
+}
+radio-group label+label{
+  margin-left:20rpx;
+}
+
+radio{
+  width: 34rpx;
+  height: 34rpx;
+  position: relative;
+}
+radio .wx-radio-input{
+  border-radius: 50%;
+  border-color: #1A4DEB;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  line-height: 20px;
+  position: absolute;
+  top: 0;left:0;
+}
+radio .wx-radio-input.wx-radio-input-checked{
+  background-color:transparent;
+  border-color: #1A4DEB;
+}
+radio .wx-radio-input.wx-radio-input-checked::before{
+  content: '';
+  position: absolute;
+  width: 22rpx;
+  height:22rpx;
+  left:4rpx;top:4rpx;
+  border-radius: 50%;
+  background: #1A4DEB;
+  transform: none;
+  -webkit-transform:none
+}
+checkbox .wx-checkbox-input{
+  width: 40rpx; 
+  height: 40rpx; 
+  border-radius: 50%;
 }
 
 .page-container{
@@ -58,3 +111,6 @@ radio-group label{
   padding:30rpx;
   margin:20rpx;
 }
+.page-container.shadow{
+  box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.05);
+}

components/address/index.js

@@ -0,0 +1,36 @@
+// components/address/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    saveText:{
+      type:String,
+      value:"保存"
+    },
+    deleteText:{
+      type:String,
+      value:''
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    building:['一栋','二栋','三栋','四栋','五栋'],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    save(){
+      this.triggerEvent('save')
+    },
+    del(){
+      this.triggerEvent('delete')
+    }
+  }
+})

components/address/index.json

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

components/address/index.wxml

@@ -0,0 +1,38 @@
+<view class="page-container shadow editor">
+  <view class="item">
+    <label class="key">绑定小区</label>
+    <label class="value">朝阳时代西锦</label>
+  </view>
+  <view class="item">
+    <label class="key">用户姓名</label>
+    <input class="value" placeholder="请输入用户名"/>
+    <radio-group class="radio-group">
+      <label>
+        <radio class="radio" checked></radio>
+        <label>先生</label>
+      </label>
+      <label>
+        <radio class="radio"></radio>
+        <label>女士</label>
+      </label>
+    </radio-group>
+  </view>
+  <view class="item">
+    <label class="key">手机号码</label>
+    <input class="value" placeholder="请输入手机号码"/>
+  </view>
+
+  <picker range="{{building}}">
+    <view class="item">
+      <label class="key">选择楼栋</label>
+      <input class="value" placeholder="请选择" disabled/>
+      <image class="right-icon" src="/assets/icon/help/arrow-right@2x.png"/>
+    </view>
+  </picker>
+  <view class="item no-border">
+    <label class="key">详细地址</label>
+    <input class="value" placeholder="例：1 单元1301"/>
+  </view>
+  <button type="primary" bind:tap="save">{{saveText}}</button>
+  <button wx:if="{{deleteText}}" type="primary" plain bind:tap="del">{{deleteText}}</button>
+</view>

components/address/index.wxss

@@ -0,0 +1,42 @@
+.page-container.editor{
+  padding-top:0;
+  font-size: 30rpx;
+}
+.editor .item{
+  display: flex;
+  align-items: center;
+  border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
+  min-height: 130rpx;
+}
+.editor .item.no-border{
+  border:none;
+}
+
+.editor .item .key{
+}
+.editor .item .key::before{
+  content: '*';
+  color: #EB0000;
+}
+.editor .item label.value{
+  line-height: 1.5;
+  height: auto;
+  align-self: center;
+}
+.editor .item .value{
+  flex:1;
+  margin-left: 30rpx;
+  height: 100%;
+  padding:15rpx 0;
+  box-sizing: border-box;
+}
+.editor .item .right-icon{
+  width:34rpx;height:34rpx;
+}
+
+.editor .radio-group{
+  font-size: 24rpx;
+}
+.editor button+button{
+  margin-top:30rpx;
+}

components/navbar/index.wxml

@@ -1,5 +1,5 @@
 <view class="nav-bar" style="padding-top:{{statusBarHeight}}px;">
   <view class="nav-bar-content" style="height:{{navBarHeight}}px;">
-    <image class="logo" src="/assets/icon/navbar/lanfeng@2x.png"/>
+    <slot/>
   </view>
 </view>

components/navbar/index.wxss

@@ -7,7 +7,3 @@
   align-items: center;
   justify-content: center;
 }
-.nav-bar .logo{
-  width:168rpx;
-  height:42rpx; 
-}

pages/help/address/edit/index.js

@@ -0,0 +1,83 @@
+// pages/help/address/edit/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  deleteAddress(){
+    console.log('delete');
+    wx.showModal({
+      title: '确定删除此地址吗',
+      content: '',
+      complete: (res) => {
+        if (res.cancel) {
+          
+        }
+        if (res.confirm) {
+          
+        }
+      }
+    })
+  },
+  saveAddress(){
+    console.log('save');
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/help/address/edit/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "address-editor":"/components/address"
+  }
+}

pages/help/address/edit/index.wxml

@@ -0,0 +1 @@
+<address-editor saveText="保存" deleteText="删除" bind:save="saveAddress" bind:delete="deleteAddress"/>

pages/help/address/edit/index.wxss

@@ -0,0 +1 @@
+/* pages/help/address/edit/index.wxss */

pages/help/address/index.json

@@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}

pages/help/address/index.wxml

@@ -1,87 +0,0 @@
-<view class="page-container editor">
-  <!-- <view class="item">
-    <label class="key">绑定小区</label>
-    <label class="value">朝阳时代西锦</label>
-  </view>
-  <view class="item">
-    <label class="key">用户姓名</label>
-    <input class="value" placeholder="请输入用户名"/>
-    <radio-group class="radio-group">
-      <label>
-        <radio></radio>
-        <label>先生</label>
-      </label>
-      <label>
-        <radio></radio>
-        <label>女士</label>
-      </label>
-    </radio-group>
-  </view>
-  <view class="item">
-    <label class="key">手机号码</label>
-    <input class="value" placeholder="请输入手机号码"/>
-  </view> -->
-
-
-
-	<view class="weui-form">
-    <view class="weui-cells weui-cells_form">
-      <view class="weui-cell weui-cell_active ">
-        <view class="weui-cell__hd">
-          <label class="weui-label">金额</label>
-        </view>
-        <view class="weui-cell__bd weui-flex">
-          <input class="weui-input"/>
-          <view wx:if="{{true}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
-								<i class="weui-icon-clear"></i>
-							</view>
-        </view>
-      </view>
-      <view class="weui-cell weui-cell_active ">
-        <view class="weui-cell__hd">
-          <label class="weui-label">用户姓名</label>
-        </view>
-        <view class="weui-cell__bd weui-flex">
-          <input class="weui-input"/>
-          <view wx:if="{{true}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
-								<i class="weui-icon-clear"></i>
-							</view>
-        </view>
-      </view>
-      <view class="weui-cell weui-cell_active ">
-        <view class="weui-cell__hd">
-          <label class="weui-label">手机号码</label>
-        </view>
-        <view class="weui-cell__bd weui-flex">
-          <input class="weui-input"/>
-          <view wx:if="{{true}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
-								<i class="weui-icon-clear"></i>
-							</view>
-        </view>
-      </view>
-      <view class="weui-cell weui-cell_active ">
-        <view class="weui-cell__hd">
-          <label class="weui-label">选择楼栋</label>
-        </view>
-        <view class="weui-cell__bd weui-flex">
-          <input class="weui-input"/>
-          <view wx:if="{{true}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
-								<i class="weui-icon-clear"></i>
-							</view>
-        </view>
-      </view>
-
-      <view class="weui-cell weui-cell_active ">
-        <view class="weui-cell__hd">
-          <label class="weui-label">想起地址</label>
-        </view>
-        <view class="weui-cell__bd weui-flex">
-          <input class="weui-input"/>
-          <view wx:if="{{true}}" aria-role="button" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="onClear">
-								<i class="weui-icon-clear"></i>
-							</view>
-        </view>
-      </view>
-    </view>
-  </view>
-</view>

pages/help/address/index.wxss

@@ -1,33 +0,0 @@
-.editor{
-  font-size: 30rpx;
-}
-.editor .item{
-  display: flex;
-  align-items: center;
-  border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
-}
-.editor .item:last-child{
-  border:none;
-}
-
-.editor .item .key{
-}
-.editor .item .key::before{
-  content: '*';
-  color: #EB0000;
-}
-.editor .item .value{
-  flex:1;
-  margin-left: 30rpx;
-  padding: 50rpx 0;
-}
-
-
-
-
-
-.weui-form{padding:0;}
-
-.weui-label{
-  width: auto;
-}

pages/help/address/index/index.js

@@ -5,7 +5,10 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    items: [
+      { name: '1', value: 'cell standard' },
+      { name: '2', value: 'cell standard', checked: 'true' },
+    ],
   },
 
   /**
@@ -62,5 +65,11 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+
+  goToAddressEditor(){
+    wx.navigateTo({
+      url: '/pages/help/address/edit/index',
+    })
   }
 })

pages/help/address/index/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "address-editor":"/components/address"
+  }
+}

pages/help/address/index/index.wxml

@@ -0,0 +1,26 @@
+<address-editor saveText="保存并使用"/>
+
+<view class="page-container address-list">
+  <view class="head">常用地址</view>
+  <view class="item">
+    <view class="text">
+      <view class="title">朝阳时代西锦 3栋2单元1802</view>
+      <view class="sub-title">何灵 13486745777</view>
+    </view>
+    <image class="icon" src="/assets/icon/help/edit@2x.png" bind:tap="goToAddressEditor"/>
+  </view>
+  <view class="item">
+    <view class="text">
+      <view class="title">朝阳时代西锦 3栋2单元1802</view>
+      <view class="sub-title">何灵 13486745777</view>
+    </view>
+    <image class="icon" src="/assets/icon/help/edit@2x.png" bind:tap="goToAddressEditor"/>
+  </view>
+  <view class="item">
+    <view class="text">
+      <view class="title">朝阳时代西锦 3栋2单元1802</view>
+      <view class="sub-title">何灵 13486745777</view>
+    </view>
+    <image class="icon" src="/assets/icon/help/edit@2x.png" bind:tap="goToAddressEditor"/>
+  </view>
+</view>

pages/help/address/index/index.wxss

@@ -0,0 +1,29 @@
+
+
+
+.address-list{
+  padding-top:36rpx
+}
+.address-list .head{
+  font-size:34rpx;
+  font-weight:500;
+}
+.address-list .item{
+  display: flex;
+  margin-top:60rpx;
+}
+.address-list .item .text{
+  flex:1;
+}
+.address-list .item .title{
+  font-size:30rpx;
+}
+.address-list .item .sub-title{
+  margin-top: 24rpx;
+  font-size:26rpx;
+  color: #7C7C7C;
+}
+.address-list .item .icon{
+  width:36rpx;height:36rpx;
+  padding:10rpx;
+}

pages/help/index/index.js

@@ -75,7 +75,7 @@ Page({
   },
   goToAddress(){
     wx.navigateTo({
-      url: '/pages/help/address/index',
+      url: '/pages/help/address/index/index',
     })
   }
 })

pages/help/index/index.wxml

@@ -1,6 +1,8 @@
 <view>
   <view class="bg"></view>
-  <nav-bar/>
+  <nav-bar class="nav-bar">
+    <image class="logo" src="/assets/icon/navbar/lanfeng@2x.png"/>
+  </nav-bar>
   <view class="choose-community" bind:tap="goToCommunity">
     <view class="text">选择小区</view>
     <image class="arrow" src="/assets/icon/help/arrow-down@2x.png"/>

pages/help/index/index.wxss

@@ -5,6 +5,10 @@
   position:absolute;
   z-index:-1;
 }
+.nav-bar .logo{
+  width:168rpx;
+  height:42rpx; 
+}
 .choose-community{
   padding:90rpx 40rpx 70rpx;
   position: relative;

pages/savemoney/index/index.js

@@ -5,9 +5,14 @@ Page({
    * 页面的初始数据
    */
   data: {
+    tabIndex:0,
+    tabItems:["全部","养车用车","美容剪发","洗衣洗鞋"]
+  },
+  changeTab(event){
+    const tabIndex = event.currentTarget.dataset.index;
+    this.setData({tabIndex})
     
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

pages/savemoney/index/index.json

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

pages/savemoney/index/index.wxml

@@ -1,2 +1,33 @@
-<!--pages/savemoney/index/index.wxml-->
+<nav-bar/>
-<text>pages/savemoney/index/index.wxml</text>
+<view class="consume">
+  <view class="title">消费金 (元)</view>
+  <view class="money">3.3</view>
+  <view class="tips">买券自动抵扣</view>
+</view>
+<view class="btns">
+  <button wx:for="{{tabItems}}" wx:key="index" class="item" size="mini" 
+    bind:tap="changeTab" data-index="{{index}}" type="{{tabIndex==index?'primary':''}}">
+      {{item}}
+    </button>
+</view>
+
+<view class="shop-list">
+  <view class="page-container item" wx:for="{{3}}">
+    <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>
+</view>

pages/savemoney/index/index.wxss

@@ -1 +1,97 @@
-/* pages/savemoney/index/index.wxss */
+
+.consume{
+  border-radius: 18rpx;
+  background: linear-gradient(270deg, #3566FF 0%, #1A4DEB 60%);
+  box-shadow: 0 10rpx 10rpx 0 rgba(54, 98, 236, 0.2);
+  margin:20rpx;
+  padding:40rpx 30rpx;
+  color:#fff;
+  position:relative;
+}
+.consume .title{
+  font-size: 32rpx;
+}
+.consume .money{
+  font-size: 70rpx;
+  font-weight: 600;
+  margin-top:40rpx;
+}
+.consume .tips{
+  position:absolute;
+  right:0;top:32rpx;
+  border-radius: 60rpx 0 0 60rpx;
+  background-color: #1A4DEB;
+  line-height: 40rpx;
+  font-size: 22rpx;
+  padding:0 16rpx;
+}
+
+.btns{
+  display: flex;
+  justify-content: space-between;
+  margin:24rpx;
+}
+.btns .item{
+  font-weight: normal;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  margin:0;
+  padding:18rpx 34rpx;
+  line-height: 1;
+}
+.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;
+}