核销页面布局

app.json

@@ -20,7 +20,8 @@
     "pages/luckDraw/index",
     "pages/luckDraw/profile",
     "pages/luckDraw/recordPrize",
-    "pages/welfareMall/coupon/coupon"
+    "pages/welfareMall/coupon/coupon",
+    "pages/welfareMall/writeOff/writeOff"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -29,7 +30,7 @@
     "navigationBarTextStyle": "black"
   },
   "usingComponents": {
-    "page-wrap" : "components/pageWrap/index"
+    "page-wrap": "components/pageWrap/index"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json",

pages/welfareMall/writeOff/writeOff.js

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

pages/welfareMall/writeOff/writeOff.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "核销记录"
+}

pages/welfareMall/writeOff/writeOff.wxml

@@ -0,0 +1,34 @@
+<!--pages/welfareMall/writeOff/writeOff.wxml-->
+<view class="writeOff-search flex-column">
+  <view class="search-bar flex-row">
+    <image class="search-img" src="../../../images/welfareMall/search.png" />
+    <input class="search-text" placeholder="搜索分账时间"></input>
+  </view>
+</view>
+<view class="writeOff-content">
+  <view class="writeOff-list flex-column">
+    <view class="content-head flex-row">
+      <view class="content-head-date">订单号 H12345678910</view>
+      <view class="content-head-state">分帐中</view>
+    </view>
+    <view class="content-line line-top"></view>
+    <view class="content-middle flex-row">
+      <view class="middle-it flex-row">
+        <image class="middle-img" src="{{item.goodsList[0].fullCoverImg}}" />
+        <view class="middle-text over-ellipsis">520告白代金券</view>
+      </view>
+      <view class="middle-num flex-column">
+        <view class="middle-num-money">￥13.14</view>
+        <view class="money-num-count">x1</view>
+      </view>
+    </view>
+    <view class="content-line line-lower"></view>
+    <view class="content-lower-store flex-row">
+      <view class="lower-date">核销门店 SH12345</view>
+      <view class="lower-money">￥12</view>
+    </view>
+    <view class="content-lower-date flex-row">
+      <view class="lower-date">核销时间 2021.12.24 12:22:23</view>
+    </view>
+  </view>
+</view>

pages/welfareMall/writeOff/writeOff.wxss

@@ -0,0 +1,174 @@
+/* pages/welfareMall/writeOff/writeOff.wxss */
+page{
+  background: #F7F7F7;
+  display:flex;
+  flex-flow: column nowrap;
+  justify-content: left;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+/* 垂直方向布局，水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
+}
+
+/* 水平方向布局，垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.writeOff-search{
+  width: 750rpx;
+  height: 96rpx;
+  background: #FFFFFF;
+  justify-content: center;
+}
+
+.search-bar{
+  width: 661rpx;
+  height: 54rpx;
+  background: #F7F7F7;
+  border-radius: 28rpx;
+  justify-content: flex-start;
+}
+
+.search-img{
+  width: 34rpx;
+  height: 34rpx;
+  margin-left: 40rpx;
+}
+
+.search-text{
+  margin-left: 30rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #A0A0A0;
+}
+
+.writeOff-content{
+  width: 750rpx;
+  margin-top: 8rpx;
+}
+
+.writeOff-list{
+  width: 750rpx;
+  height: 422rpx;
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  margin-bottom: 14rpx;
+}
+
+.content-head{
+  width: 646rpx;
+  height: 22rpx;
+  justify-content: space-between;
+}
+
+.content-head-date{
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #444444;
+}
+
+.content-head-state{
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #BD2021;
+}
+
+.content-head{
+  width: 646rpx;
+  height: 40rpx;
+  justify-content: space-between;
+  margin-top: 36rpx;
+}
+
+.content-middle{
+  width: 646rpx;
+  height: 130rpx;
+  justify-content: space-between;
+  margin-top: 29rpx;
+}
+
+.middle-img{
+  width: 160rpx;
+  height: 119rpx;
+}
+
+.middle-text{
+  width: 240rpx;
+  height: 36rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #444444;
+  margin-left: 36rpx;
+  margin-bottom: 34rpx;
+}
+
+.middle-num{
+  align-items: flex-end;
+}
+
+.middle-num-money{
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #444444;
+  margin-top: 10rpx;
+}
+
+.money-num-count{
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #A0A0A0;
+}
+
+.content-line{
+  width: 679rpx;
+  height: 1px;
+  background: #EFEFEF;
+}
+
+.line-top{
+  margin-top: 20rpx;
+}
+
+.line-lower{
+  margin-top: 34rpx;
+}
+
+.content-lower-store,.content-lower-date{
+  width: 646rpx;
+}
+
+.content-lower-store{
+  padding-top: 20rpx;
+}
+
+.lower-date{
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #444444;
+  width: 500rpx;
+  line-height: 46rpx;
+  flex: 1;
+}
+
+.lower-money{
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #BD2021;
+}
+
+.no_result {
+  font-size: 24rpx;
+  color: #B1B1B1;
+  line-height: 100rpx;
+  font-weight: 1000;
+}