Browse Source

添加订单确认页

wangxin 6 years ago
parent
commit
8dfb3d6eef
5 changed files with 124 additions and 8 deletions
  1. 2 2
      app.json
  2. 1 1
      app.wxss
  3. 19 2
      template/carts/index.js
  4. 21 2
      template/carts/index.wxml
  5. 81 1
      template/carts/index.wxss

+ 2 - 2
app.json

@@ -1,9 +1,9 @@
 {
   "pages": [
+    "template/carts/index",
     "template/home/index",
     "template/login/index",
-    "template/view/index",
-    "template/carts/index"
+    "template/view/index"
   ],
   "window": {
     "navigationBarTextStyle": "#fff",

+ 1 - 1
app.wxss

@@ -1,7 +1,7 @@
 @import 'static/weiui/weui.wxss';
 
 page{
-    background-color: #F8F8F8;
+    background-color: #FFFFFF;
     font-size: 16px;
     font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
 }

+ 19 - 2
template/carts/index.js

@@ -1,6 +1,6 @@
 // template/carts/index.js
 Page({
-
+  dever: getApp().dever,
   /**
    * 页面的初始数据
    */
@@ -12,7 +12,17 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-  
+    //test - begin
+    var list = new Array();
+    for(var i=1; i<10; i++){
+      var item = new Object();
+      item.name = i+'盒有机韭菜';
+      item.price = i*20;
+      item.id = i;
+      list.push(item);
+    }
+    this.dever.setList(this, list);
+    //test - end
   },
 
   /**
@@ -62,5 +72,12 @@ Page({
    */
   onShareAppMessage: function () {
   
+  },
+
+  /**
+   * 调用微信地址
+   */
+  useWxAddress: function(){
+
   }
 })

+ 21 - 2
template/carts/index.wxml

@@ -1,2 +1,21 @@
-<!--template/carts/index.wxml-->
-<text>template/carts/index.wxml</text>
+<view class='top'>
+  <view class='address'>
+    <text class='tips'>填写收货地址</text>
+    <button class='nxh__button' bindtap='useWxAddress'>使用微信地址</button>
+  </view>
+  <view class='order' wx:for='{{list}}' wx:key='{{index}}'>
+    <text class='title'>{{item.name}}</text>
+    <view class='oper'>
+      <text class='price'>¥ {{item.price}}</text>
+      <view class='edit-num'>
+        <image class='sub' src='/static/img/carts-sub.png'></image>
+        <view class='num'>1</view>
+        <image class='add' src='/static/img/carts-add.png'></image>
+      </view>
+    </view>
+  </view>
+</view>
+<view class='bottom'>
+  <view class='left'>合计 ¥297 元</view>
+  <view class='right'>立即支付</view>
+</view>

+ 81 - 1
template/carts/index.wxss

@@ -1 +1,81 @@
-/* template/carts/index.wxss */
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  text-align: center;
+  margin-bottom: 120rpx;
+}
+.address {
+  padding: 40rpx 30rpx 30rpx 30rpx;
+  border-bottom: 5px solid #FBFBFB;
+}
+.tips {
+  color: #ccc;
+  font-size: 30rpx;
+}
+.nxh__button {
+  background: #fff;
+  border:1rpx solid #539804;
+  color: #539804;
+  margin-top: 6rpx;
+  font-size: 30rpx;
+  width: 300rpx;
+}
+.order {
+  padding: 40rpx 50rpx 30rpx 50rpx;
+  border-bottom: 1px solid #FBFBFB;
+}
+.order .title {
+  display: flex;
+  justify-content: left;
+  font-size: 35rpx;
+  margin-bottom: 25rpx;
+}
+.order .oper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.order .price {
+  color: #666666;
+  font-size: 35rpx;
+}
+.order .edit-num {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.edit-num .num {
+  margin: 0 15rpx 0 15rpx;
+  font-size: 30rpx;
+}
+.edit-num .sub, .edit-num .add {
+  width: 45rpx;
+  height: 45rpx;
+}
+.bottom {
+  width: 750rpx;
+  height: 119rpx;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+.bottom .left {
+  background: #434343;
+  color: #fff;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  padding-left: 50rpx;
+  font-size: 35rpx;
+}
+.bottom .right {
+  background: #539804;
+  color: #fff;
+  width: 250rpx;
+  display: flex;
+  font-size: 35rpx;
+  align-items: center;
+  justify-content: center;
+}