add: 消费详情

src/component/table/table.js

+var app = getApp()
+const wxService = require('../../utils/wxService')
+const envInfo = require('../../config/index').envInfo
+
+Component({
+	/**
+	 * 组件的属性列表
+	 */
+	properties: {
+		// 这里定义了属性，属性值可以在组件使用时指定
+    tableThemes: {
+      type: Object, // 因此处的thead是json格式，故将数据类型设置为object
+    },
+    tableItems: {
+      type: Array,
+    }
+	},
+	/**
+	 * 组件的初始数据
+	 */
+  data: {
+    someData: {}
+  },
+  methods: {
+    // 这里是一个自定义方法
+    customMethod(){}
+  }
+})
\ No newline at end of file

src/component/table/table.json

+{
+  "component":true,
+  "usingComponents":{}
+}
\ No newline at end of file

src/component/table/table.wxml

+<!--components/table/table.wxml-->
+<view class='table'>
+  <view class="thead">
+    <view class='tr'>
+      <view class="th" wx:for="{{tableThemes}}" wx:key="{{index}}">{{item}}</view>
+    </view>
+  </view>
+  <view class="tbody">
+    <view class="tr" wx:for="{{tableItems}}" wx:key="{{index}}">
+      <view class="td" wx:for="{{item}}" wx:key="{{index}}">{{item}}</view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

src/component/table/table.wxss

+.table{
+  display: table;
+  border-collapse: collapse;
+  font-size: 28rpx;
+  color: #333333;
+  text-align: center;
+  vertical-align: middle;
+  width: 100%;
+}
+.table .tr{
+  display: table-row;
+  height: 60rpx;
+  vertical-align: middle;
+  line-height: 60rpx;
+}
+.table .thead{
+  display: table-header-group;
+}
+.table .thead .tr{
+  height: 100rpx;
+  color: #9d9d9d;
+  font-size: 28rpx;
+  line-height: 100rpx;
+}
+.table .tbody{
+  display: table-row-group;
+}
+.table .tr .th,.table .tr .td{
+  display: table-cell;
+  /* border: 1px solid #ddd; */
+}

src/pages/consumptionDetails/consumptionDetails.js

@@ -9,6 +9,20 @@ wxService.page({
    * 页面的初始数据
    */
   data: {
+    no: '112222',
+    time: '2019-01-01',
+    store: '1231',
+    total: 25,
+    orderTotal: 50,
+    paymentTotal: 48,
+    pointsTotal: 2,
+    status: '交易成功',
+    themeArr: { count: '数量', name: '商品名称', price: '价格' },
+    itemArr: [
+      { count: 1, name: '牛奶', price: 112 },
+      { count: 2, name: '榛果', price: 5222 },
+      { count: 2, name: '薯片', price: 124 },
+    ]
 
   },
 

src/pages/consumptionDetails/consumptionDetails.json

 {
   "navigationBarTitleText": "消费详情",
-  "usingComponents": {}
+  "usingComponents": {
+    "table": "./../../component/table/table"
+  }
 }
\ No newline at end of file

src/pages/consumptionDetails/consumptionDetails.wxml

 <!--pages/consumptionDetails.wxml-->
-<text>pages/userCenter.wxml</text>
+<view class="consumption">
+  <view class="consumption-top">
+    <view class="top-ract"></view>
+    <view class="top-order">
+      <view>订单编号:<span>{{no}}</span></view>
+      <view>消费时间:<span>{{time}}</span></view>
+      <view>消费门店:<span>{{store}}</span><span class="top-statsu">{{status}}</span></view>
+    </view>
+  </view>
+
+  <view class="consumption-table">
+    <table tableThemes="{{themeArr}}" tableItems="{{itemArr}}"></table>
+  </view>
+
+  <!--  <image class="consumption-img" src="./../../images/3x-28.png"  mode="widthFix"/>-->
+  <view class="consumption-line">
+    <view class="semi-circle4"></view>
+    <view class="semi-circle3"></view>
+  </view>
+
+  <view class="consumption-bottom">
+    <view class="bottom-left">共{{total}}件商品</view>
+    <view class="bottom-right">
+      <view>订单合计: <span class="bottom-order-total">{{orderTotal}}</span></view>
+      <view>实付合计: <span class="bottom-point-payment">{{paymentTotal}}</span></view>
+      <view class="bottom-point-total">积分合计: <span class="bottom-point-num">{{pointsTotal}}</span></view>
+    </view>
+  </view>
+
+  <view class="consumption-tips">-香烟与服务类商品不计分-</view>
+
+</view>

src/pages/consumptionDetails/consumptionDetails.wxss

-/* pages/userCenter.wxss */
+/* pages/consumptionDetails.wxss */
\ No newline at end of file
+.consumption {
+ margin: 46rpx;
+ box-shadow: 0 0 10px #888;
+ padding:40rpx;
+ position: relative;
+ /* background-color: pink; */
+}
+.top-ract {
+  width: 20rpx;
+  height: 60rpx;
+  background: rgb(5, 195, 90);
+  border-radius:20rpx;
+  position: absolute;
+  top: 7%;
+  left: 0;
+}
+.consumption-top {
+  border-bottom: 1px solid #cbcbcb;
+  display: flex;
+  padding-bottom: 20rpx;
+}
+.top-order {
+  margin-left: 30rpx;
+  line-height: 50rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+.consumption-tips {
+  font-size: 21rpx;
+  color: #bfbfbf;
+  position: absolute;
+  bottom: 32rpx;
+  left: 35%;
+}
+.consumption-table {
+  height: 450rpx;
+}
+.consumption-img {
+  width: 100%;
+}
+
+.top-statsu{
+  color: rgb(5, 195, 90);
+  font-size: 22rpx;
+  position: absolute;
+  right: 48rpx;
+}
+
+.consumption-bottom {
+  margin-top: 20rpx;
+  height: 300rpx;
+  display: flex;
+  justify-content: space-between;
+  font-size: 28rpx;
+}
+.bottom-left {
+  padding-left: 62rpx;
+  color: #333;
+}
+.bottom-point-total {
+  margin-top: 30rpx;
+}
+.bottom-order-total {
+  color: #a9a9a9;
+}
+.bottom-point-payment {
+  color: rgb(5, 195, 90);
+}
+.bottom-order-total,.bottom-point-payment,.bottom-point-num {
+  padding-left: 20rpx;
+}
+.semi-circle3{
+  width: 15px;
+  height: 30px; 
+  background-color:#eee;
+  border-radius:50px 0 0 50px; /* 左上、右上、右下、左下 */
+  position: absolute;
+  right: 0;
+  bottom: 32%;
+}
+
+.semi-circle4{
+  width:15px;
+  height: 30px; 
+  background-color:#eee;
+  border-radius:0 50px 50px 0; /* 左上、右上、右下、左下 */
+  position: absolute;
+  left: 0;
+  bottom: 32%;
+}
+
+.consumption-line {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ccc;
+}
\ No newline at end of file

src/project.config.json

@@ -37,7 +37,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 2,
+			"current": 3,
 			"list": [
 				{
 					"id": -1,
@@ -56,6 +56,12 @@
 					"name": "会员规则",
 					"pathName": "pages/memberRules/memberRules",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "消费详情",
+					"pathName": "pages/consumptionDetails/consumptionDetails",
+					"query": ""
 				}
 			]
 		}