我的积分和我的订单

app.json

@@ -13,7 +13,9 @@
     "pages/zhuye/zhuye",
     "pages/order_address/order_address",
     "pages/order_confirm/order_confirm",
-    "pages/order_submit/order_submit"
+    "pages/order_submit/order_submit",
+    "pages/integral/integral",
+    "pages/detail/detail"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -57,7 +59,8 @@
     "van-action-sheet": "@vant/weapp/action-sheet/index",
     "van-calendar": "@vant/weapp/calendar/index",
     "van-cell": "@vant/weapp/cell/index",
-    "van-cell-group": "@vant/weapp/cell-group/index"
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-image": "@vant/weapp/image/index"
 
 
   }

pages/detail/detail.js

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

pages/detail/detail.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的订单"
+}

pages/detail/detail.wxml

@@ -0,0 +1,51 @@
+<!--pages/detail/detail.wxml-->
+<!-- 导航 -->
+<view class="cttt">
+  <view class="nav">
+    <text class="nav01">全部</text>
+    <text class="nav01">待支付</text>
+    <text class="nav01">代送达</text>
+    <text class="nav01">已完成</text>
+  </view>
+<!-- 麻辣烫图片 -->
+<view class="container04">
+  <view class="text01">
+    <text class="text01-1">二楼麻辣烫、麻辣香锅、麻辣拌</text>
+    <text class="copper">代送达</text>
+  </view>
+  <view class="container03">
+  
+    <image class="img01" src="https://qcloud.dpfile.com/pc/3CTRFdje6AmTRDHb_eqJ2bj2z7l8HY9CpntkZEpyOBObQ3QAyS5ZgqVDp-olAAnOjoJrvItByyS4HHaWdXyO_DrXIaWutJls2xCVbatkhjUNNiIYVnHvzugZCuBITtvjski7YaLlHpkrQUr5euoQrg.jpg" mode="" />
+    <view class="child">
+      <view class="child01">
+        <text class="ctx01">麻辣烫微辣微麻</text>
+        <text class="ctx02">￥10.29</text>
+      </view>
+      <view class="child05">
+        <text class="ctx03">共2件</text>
+      </view>
+    </view>
+  </view>
+</view>
+<view class="container04">
+  <view class="text01">
+    <text class="text01-1">二楼麻辣烫、麻辣香锅、麻辣拌</text>
+    <text class="copper">代送达</text>
+  </view>
+  <view class="container03">
+  
+    <image class="img01" src="https://qcloud.dpfile.com/pc/3CTRFdje6AmTRDHb_eqJ2bj2z7l8HY9CpntkZEpyOBObQ3QAyS5ZgqVDp-olAAnOjoJrvItByyS4HHaWdXyO_DrXIaWutJls2xCVbatkhjUNNiIYVnHvzugZCuBITtvjski7YaLlHpkrQUr5euoQrg.jpg" mode="" />
+    <view class="child">
+      <view class="child01">
+        <text class="ctx01">麻辣烫微辣微麻</text>
+        <text class="ctx02">￥32.98</text>
+      </view>
+      <view class="child05">
+        <text class="ctx03">共3件</text>
+      </view>
+    </view>
+  </view>
+</view>
+</view>
+  
+

pages/detail/detail.wxss

@@ -0,0 +1,80 @@
+/* pages/detail/detail.wxss */
+.cttt{
+  height: 290px;
+  background:  #f3f1f1;
+}
+/* 导航 */
+.nav {
+ margin-top: 10px;
+  font-size: 14px;
+  background-color: white;
+  display: flex;
+  justify-content:center;
+  color: rgb(133, 133, 133);
+}
+.nav01 {
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  margin: 0 20px;
+}
+/* 代送达麻辣烫、麻辣拌 */
+.container04 {
+  margin: 10px auto;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 12px;
+  color: rgb(133, 133, 133);
+  height: 120px;
+  background: white;
+}
+.text01 {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #d1d0d0;
+  line-height: 35px;
+  margin-left: 10px;
+  margin-right: 10px;
+  height: 35px;
+}
+.text01-1{
+  color: black;
+  font-weight: 600;
+}
+.copper {
+  color: rgb(133, 133, 133);
+}
+/* 图片样式 */
+.img01 {
+  margin-right: 10px;
+  width: 90px;
+  height: 60px;
+}
+
+/* 图片与文字左右排列 */
+.container03 {
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  align-content: space-between;
+}
+/* 图片旁边文字 */
+.child {
+  flex: 1;
+}
+/*麻辣烫微辣微麻 */
+.ctx01 {
+  font-size: 13px;
+  color: black;
+}
+
+/* 价钱 */
+.ctx02 {
+  color: rgb(228, 52, 87);
+  font-size: 14px;
+}
+.child01 {
+  display: flex;
+  justify-content: space-between;
+}
+.child05 {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 11px;
+}

pages/integral/integral.js

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

pages/integral/integral.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的积分"
+}

pages/integral/integral.wxml

@@ -0,0 +1,96 @@
+<!--pages/integral/integral.wxml-->
+<view class="container1">
+  <view class="img01">
+    <view class="text01">
+      积分获取规则>
+    </view>
+    <view class="text02">
+      <image class="jifen-img" src="../image/积分(1).png" mode=""/>
+      <text class="jifen-text">积分</text>
+    </view>
+    <view class="nub">
+      708
+    </view>
+  </view>
+</view>
+<!-- 入账中|收支明细 -->
+<view class="text03">
+  <view class="account">
+    入账中
+  </view>
+  <view class="account-detail">
+    收支明细
+  </view>
+</view>
+<!-- 增加积分 -->
+<view class="text04">
+  <view class="text04-1">
+    <text class="order">完整订单</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    +40
+  </view>
+  <view>
+  </view>
+</view>
+
+<view class="text04">
+  <view class="text04-1">
+    <text class="order">完整订单</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    +40
+  </view>
+  <view>
+  </view>
+</view>
+
+<view class="text04">
+  <view class="text04-1">
+    <text class="order">完整订单</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    +40
+  </view>
+  <view>
+  </view>
+</view>
+
+<view class="text04">
+  <view class="text04-1">
+    <text class="order">积分兑换</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    -400
+  </view>
+  <view>
+  </view>
+</view>
+
+<view class="text04">
+  <view class="text04-1">
+    <text class="order">完整订单</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    +40
+  </view>
+  <view>
+  </view>
+</view>
+
+<view class="text04 text-special">
+  <view class="text04-1">
+    <text class="order">积分兑换</text>
+    <text class="time01">2019-03-29 09:57:30</text>
+  </view>
+  <view class="increase-points">
+    +400
+  </view>
+  <view>
+  </view>
+</view>

pages/integral/integral.wxss

@@ -0,0 +1,105 @@
+/* pages/integral/integral.wxss */
+.container1 {
+  width: 100%;
+  height: 150px;
+  background-color: #d3cbcb98;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+/* 背景图片 */
+.img01 {
+  background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.7412649ca197124b5081c202af45a672?rik=bkHOQ4UQ4RVLfg&riu=http%3a%2f%2fimg1.mydrivers.com%2fimg%2f20190604%2f237e0d6424204034921b06fb4a3cd2c9.jpg&ehk=IVLlaJ6yR9ONk7CuAQ86cH3Sks07i4WOTk64ucLPL4w%3d&risl=&pid=ImgRaw&r=0);
+  width: 650rpx;
+  height: 120px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+/* 积分获取规则靠右排列 */
+.text01 {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  margin-right: 10px;
+  font-size: 12px;
+  color: white;
+}
+
+/* 积分图标和文字 */
+.text02 {
+  display: flex;
+  margin-left: 10px;
+}
+
+.jifen-img {
+  width: 18px;
+  height: 18px;
+}
+
+.jifen-text {
+  font-size: 12px;
+  color: white;
+  margin-left: 5px;
+}
+
+/* 708 */
+.nub {
+  margin-left: 10px;
+  color: white;
+  font-size: 26px;
+}
+
+/* 入账中|收支明细 */
+.text03 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  display: flex;
+}
+
+.account {
+  color: rgb(214, 100, 34) ;
+  width: 50%;
+  text-align: center;
+  border-right: 1px solid  rgb(214, 214, 214);
+}
+
+.account-detail {
+  color: rgb(126, 126, 126);
+  width: 50%;
+  text-align: center;
+}
+
+/* 增加积分排列 */
+.text04{
+  border-top: 1px solid rgb(214, 214, 214);
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: space-between;
+  width: 90%;
+}
+.text04-1 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 60rpx;
+  display: flex;
+  flex-direction: column;
+}
+.order{
+  font-size: 13px;
+}
+.time01{
+  font-size: 10px;
+color: darkgrey;
+}
+.increase-points{
+margin-top: 10px;
+font-size: 14px;
+color: rgb(214, 100, 34) ;
+margin-right: -340rpx;
+}
+.text-special{
+  border-bottom: 1px solid rgb(214, 214, 214);
+}

project.private.config.json

@@ -90,6 +90,20 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "我的积分",
+          "pathName": "pages/integral/integral",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "我的订单",
+          "pathName": "pages/detail/detail",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }