超值卡

src/app.json

@@ -27,7 +27,12 @@
         "pages/recordList/recordList",
         "pages/IntegralMallGoods/IntegralMallGoods",
         "pages/IntegrateGoodsExchangeInfo/IntegrateGoodsExchangeInfo",
-        "pages/exchangeAddress/exchangeAddress"
+        "pages/exchangeAddress/exchangeAddress",
+        "pages/valueCard/valueCard",
+        "pages/valueCardInfo/valueCardInfo",
+        "pages/myValueCard/myValueCard",
+        "pages/myValueCardInfo/myValueCardInfo",
+        "pages/valueCardRecords/valueCardRecords"
       ]
     }
   ],

src/project.config.json

@@ -39,7 +39,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 21,
+			"current": 26,
 			"list": [
 				{
 					"id": -1,
@@ -177,7 +177,38 @@
 				{
 					"id": -1,
 					"name": "积分商城新",
-					"pathName": "subPackage/page/pages/IntegralMallGoods/IntegralMallGoods"
+					"pathName": "subPackage/page/pages/IntegralMallGoods/IntegralMallGoods",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "超值卡列表",
+					"pathName": "subPackage/page/pages/valueCard/valueCard",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "超值卡详情",
+					"pathName": "subPackage/page/pages/valueCardInfo/valueCardInfo",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的超值卡",
+					"pathName": "subPackage/page/pages/myValueCard/myValueCard",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "我的超值卡详情",
+					"pathName": "subPackage/page/pages/myValueCardInfo/myValueCardInfo",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "超值卡记录",
+					"pathName": "subPackage/page/pages/valueCardRecords/valueCardRecords",
+					"query": ""
 				}
 			]
 		}

src/subPackage/page/pages/myValueCard/myValueCard.js

+// subPackage/page/pages/myValueCard/myValueCard.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+var wxbarcode = require('../../../../codeUtils/index.js');
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    no : '1212345645645782',
+    myCardsList : [
+      { id: 1, isOpen: false, no: '12314545654545' },
+      { id: 1, isOpen: false, no: '45456456456456' },
+      { id: 1, isOpen: false, no: '85858582544585' },
+      { id: 1, isOpen: false, no: '96335525252525' },
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.hideShareMenu();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  //barcode 失败回调
+  canvasIdErrorCallback(e){
+
+  },
+  //生成条形码
+  generatorBarCode(canvasId){
+    if (this.data.no){
+      wxbarcode.barcode(canvasId, this.data.no, 500, 100);
+      setTimeout(() => {
+        wxbarcode.barcode(canvasId, this.data.no, 500, 100);
+      }, 200);
+    }
+  },
+  //展开
+  onTapShowMoreInfo(e){
+    let item = e.currentTarget.dataset.item;
+    let index = e.currentTarget.dataset.index;
+    if (item.isOpen){
+      return ;
+    }
+
+    this.data.myCardsList.forEach(item => {
+      item.isOpen = false;
+    });
+
+    this.data.myCardsList[index].isOpen = true;
+    this.data.no = this.data.myCardsList[index].no;
+    let canvasId = 'barcode' + index;
+    this.setData({
+      myCardsList: this.data.myCardsList,
+      no: this.data.no
+    }, () => {
+      this.generatorBarCode(canvasId);
+    });
+    
+  },
+
+  //关闭
+  onTapCloseExtro(e){
+    let index = e.currentTarget.dataset.index;
+    this.data.myCardsList[index].isOpen = false;
+    this.data.no = '';
+    this.setData({
+      myCardsList: this.data.myCardsList,
+      no: this.data.no
+    });
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    wx.stopPullDownRefresh();
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+})
\ No newline at end of file

src/subPackage/page/pages/myValueCard/myValueCard.json

+{
+  "navigationBarTitleText": "我的超值卡",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackage/page/pages/myValueCard/myValueCard.wxml

+<!--subPackage/page/pages/myValueCard/myValueCard.wxml-->
+<view class='my-value-card-list'>
+  <view class='my-value-card-item'
+  wx:for="{{myCardsList}}"
+  wx:for-item="item"
+  wx:for-index="idx"
+  wx:key="{{idx}}">
+    <view class='card-top-info' bindtap='onTapShowMoreInfo' data-item="{{item}}" data-index="{{idx}}">
+      <image class='bg-image {{item.isOpen ? "expand" : "unexpand"}}' 
+      src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/daogou.jpg'
+       mode='widthFix'></image>
+      <view class='card-top-info-desc'>
+        <label>剩3次</label>
+        <image class='qrcode' src='/assets/imgs/711_11.png' mode='aspectFit'></image>
+      </view>
+    </view>
+    <!-- 具体信息 -->
+    <view class='card-info-extro' wx:if="{{item.isOpen}}">
+      <view class='bar-code'>
+        <canvas canvas-id="{{'barcode' + idx}}" binderror="canvasIdErrorCallback" />
+        <view class='no'>{{no}}</view>
+      </view>
+      <view class='exp-info'>
+        <label>使用时间：</label>
+        <text>2020-01-10 至 2020-08-30</text>
+      </view>
+      <view class='exp-info'>
+        <label style='color:#76A1D5;'>查看详细使用说明</label>
+        <image src='/assets/imgs/icon_arrow_right.png' class='arrow-image' mode='aspectFit'></image>
+        <image class='unexpand-icon' 
+        bindtap='onTapCloseExtro' 
+        data-index="{{idx}}" 
+        src='/assets/imgs/icon_arrow_up.png' 
+        mode='aspectFit'></image>
+      </view>
+    </view>
+  </view>
+
+</view>

src/subPackage/page/pages/myValueCard/myValueCard.wxss

+/* subPackage/page/pages/myValueCard/myValueCard.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.my-value-card-list{
+  width: 100%;
+  height: auto;
+  padding: 30rpx;
+}
+
+.my-value-card-list .my-value-card-item{
+  width: 100%;
+  height: auto;
+  margin-bottom: 20rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info{
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .bg-image{
+  width: 100%;
+  display: block;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .bg-image.unexpand{
+  border-radius: 6rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .bg-image.expand{
+  border-top-left-radius: 6rpx;
+  border-top-right-radius: 6rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .card-top-info-desc{
+  position: absolute;
+  bottom: 20rpx;
+  width: 100%;
+  height: 70rpx;
+  padding: 0 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .card-top-info-desc label{
+  height: 50rpx;
+  width: auto;
+  padding: 0 30rpx;
+  border-radius: 25rpx;
+  background: #ffffff;
+  color: #333333;
+  font-weight: bold;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-value-card-list .my-value-card-item .card-top-info .card-top-info-desc .qrcode{
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro{
+  width: 100%;
+  padding: 30rpx;
+  border: solid 1px #dddddd;
+  border-top: none;
+  height: auto;
+  overflow: hidden;
+  transition: all 0.3s;
+  border-bottom-right-radius: 6rpx;
+  border-bottom-left-radius: 6rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro .bar-code{
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 30rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro .bar-code canvas{
+  height: 100rpx;
+  width: 500rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro .bar-code .no{
+  margin-top: 8rpx;
+  color: #333333;
+  font-size: 32rpx;
+  letter-spacing: 2rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro  .exp-info{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10rpx;
+  font-size: 28rpx;
+  color: #666666;
+  position: relative;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro  .exp-info .arrow-image{
+  width: 32rpx;
+  height: 24rpx;
+  margin-left: 15rpx;
+}
+
+.my-value-card-list .my-value-card-item .card-info-extro  .exp-info .unexpand-icon{
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 34rpx;
+  height: 34rpx;
+}
\ No newline at end of file

src/subPackage/page/pages/myValueCardInfo/myValueCardInfo.js

+// subPackage/page/pages/myValueCardInfo/myValueCardInfo.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+var wxbarcode = require('../../../../codeUtils/index.js');
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    no: '1212345645645782',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.hideShareMenu();
+
+    this.generatorBarCode();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  //生成条形码
+  generatorBarCode() {
+    if (this.data.no) {
+      wxbarcode.barcode('barcode', this.data.no, 570, 100);
+      setTimeout(() => {
+        wxbarcode.barcode('barcode', this.data.no, 570, 100);
+      }, 200);
+    }
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+})
\ No newline at end of file

src/subPackage/page/pages/myValueCardInfo/myValueCardInfo.json

+{
+  "navigationBarTitleText": "超值卡详情",
+  "backgroundTextStyle": "dark",
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackage/page/pages/myValueCardInfo/myValueCardInfo.wxml

+<!--subPackage/page/pages/myValueCardInfo/myValueCardInfo.wxml-->
+<view class='my-card-info'>
+  <image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/daogou.jpg' mode='widthFix'></image>
+  <label>剩3次</label>
+</view>
+
+<view class='left-num-container'>
+  <view class='left-icons'>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/no_color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/no_color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/no_color.png' mode='aspectFit'></image>
+    </view>
+    <view class='icons'>
+      <image src='/assets/imgs/point/no_color.png' mode='aspectFit'></image>
+    </view>
+  </view>
+  <view class='bar-code-container'>
+      <canvas canvas-id="barcode" binderror="canvasIdErrorCallback" />
+      <view class='no'>{{no}}</view>
+  </view>
+</view>
+
+
+<view class='card-info-body'>
+  <view class='card-desc-item'>
+    <view class='lf'>活动时间</view>
+    <view class='rg'>2020-01-02 至 2020-05-31</view>
+  </view>
+  <view class='card-desc-item' wx:if="{{buyType == 1}}">
+    <view class='lf'>现金支付</view>
+    <view class='rg'>￥25.00</view>
+  </view>
+  <view class='card-desc-item' wx:if="{{buyType == 2}}">
+    <view class='lf'>积分兑换</view>
+    <view class='rg'>200积分</view>
+  </view>
+  <view class='card-desc-item'>
+    <view class='lf'>使用说明</view>
+    <view class='rg'>
+      <view class='list-item'> 1) 这个是说明1这个是说明1这个是说明1</view>
+      <view class='list-item'> 2) 这个是说明2这个是说明2这个是说明2</view>
+      <view class='list-item'> 3) 这个是说明2这个是说明2这个是说明2</view>
+      <view class='list-item'> 4) 这个是说明2这个是说明2这个是说明2</view>
+    </view>
+  </view>
+</view>

src/subPackage/page/pages/myValueCardInfo/myValueCardInfo.wxss

+/* subPackage/page/pages/myValueCardInfo/myValueCardInfo.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.my-card-info{
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.my-card-info image{
+  width: 100%;
+  display: block;
+}
+
+.my-card-info label{
+  height: 50rpx;
+  width: auto;
+  padding: 0 30rpx;
+  border-radius: 25rpx;
+  background: #ffffff;
+  color: #333333;
+  font-weight: bold;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 20rpx;
+  right: 30rpx;
+}
+
+.left-num-container{
+  width: 100%;
+  height: auto;
+  padding: 30rpx 90rpx;
+  background: #f2f2f2;
+}
+
+.left-num-container .left-icons{
+  width: 100%;
+  height: auto;
+  margin-bottom: 30rpx;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.left-num-container .left-icons .icons{
+  flex: 0;
+  min-width: 20%;
+  max-width: 20%;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left-num-container .left-icons .icons image{
+  width: 80rpx;
+  height: 80rpx;
+  background-color: #ffffff;
+  border-radius: 50%;
+}
+
+.left-num-container .bar-code-container{
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-num-container .bar-code-container canvas{
+  height: 100rpx;
+  width: 100%;
+}
+
+.left-num-container .bar-code-container .no{
+  margin-top: 8rpx;
+  color: #333333;
+  font-size: 32rpx;
+  letter-spacing: 2rpx;
+}
+
+.card-info-body{
+  width: 100%;
+  padding: 30rpx;
+}
+
+.card-title{
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.card-desc-item{
+  width: 100%;
+  height: auto;
+  display: flex;
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+}
+
+.card-desc-item .lf{
+  flex: 0;
+  min-width: 120rpx;
+  max-width: 120rpx; 
+  color: #666666;
+}
+
+.card-desc-item .rg{
+  flex: 1;
+  padding-left: 10rpx;
+  color: #333333;
+}
+
+.card-desc-item .rg .list-item{
+  margin-bottom: 8rpx;
+}
+
+

src/subPackage/page/pages/subPage/subPage.wxss

 /* subPackage/page/pages/subPage/subPage.wxss */
 @import './../../../../base/base.wxss';
 page {
-  background: #fff!important;
+  background: #fff !important;
 }
 .user-center{
   /* margin-bottom: 120rpx; */

src/subPackage/page/pages/valueCard/valueCard.js

+// subPackage/page/pages/valueCard/valueCard.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    cardList: [{ id: 1 }, { id: 2 }, { id: 2 }]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.hideShareMenu();
+  },
+  
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+  //跳转卡详情
+  onTapToCardInfo(e){
+    let item = e.currentTarget.dataset.item;
+    wx.navigateTo({
+      url: '/subPackage/page/pages/valueCardInfo/valueCardInfo?id=' + item.id,
+    });
+  },
+
+  
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    wx.showNavigationBarLoading();
+    setTimeout(() => {
+      wx.showToast({
+        title: '刷新成功',
+      });
+      wx.hideNavigationBarLoading();
+      wx.stopPullDownRefresh();
+    },1000);
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+})
\ No newline at end of file

src/subPackage/page/pages/valueCard/valueCard.json

+{
+  "navigationBarTitleText": "超值卡",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackage/page/pages/valueCard/valueCard.wxml

+<!--subPackage/page/pages/valueCard/valueCard.wxml-->
+<view class='cards-list'>
+  <view class='card-item' 
+  wx:for="{{cardList}}"
+  wx:for-item="item"
+  wx:for-index="idx"
+  wx:key="{{idx}}"
+  data-item="{{item}}"
+  bindtap='onTapToCardInfo'>
+    <image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/daogou.jpg' mode='widthFix'></image>
+    <view class='card-buy-btn'>立即抢购</view>
+  </view>
+</view>
+
+<view class='no-more'>-- 我也是有底线滴 --</view>
\ No newline at end of file

src/subPackage/page/pages/valueCard/valueCard.wxss

+/* subPackage/page/pages/valueCard/valueCard.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.cards-list{
+  width: 100%;
+  height: auto;
+  padding: 30rpx;
+}
+
+.cards-list .card-item{
+  width: 100%;
+  margin-bottom: 20rpx;
+  position: relative;
+}
+
+.cards-list .card-item .card-buy-btn{
+  position: absolute;
+  bottom: 20rpx;
+  right: 20rpx;
+  width: 174rpx;
+  height: 54rpx;
+  border-radius: 27rpx;
+  background-color: rgba(5, 195, 91, 1);
+  box-shadow: 0px 3rpx 10rpx 0px rgba(5, 195, 91, 0.3);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  justify-content: center;
+}
+
+.cards-list .card-item .card-buy-btn:active{
+  opacity: 0.7;
+}
+
+.cards-list .card-item:last-child{
+  margin-bottom: 0;
+}
+
+.cards-list .card-item image{
+  width: 100%;
+  display: block;
+  border-radius: 6rpx;
+}
+
+.no-more{
+  width: 100%;
+  height: auto;
+  padding: 30rpx 0;
+  color: #999999;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file

src/subPackage/page/pages/valueCardInfo/valueCardInfo.js

+// subPackage/page/pages/valueCardInfo/valueCardInfo.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    checked : false,
+    showModal : false,
+    buyType : '2',//现金支付 2 积分兑换
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.hideShareMenu();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+  //修改选中状态
+  onTapSwitchChecked(){
+    this.data.checked = !this.data.checked;
+    this.setData({
+      checked: this.data.checked
+    });
+  },
+  //关闭modal
+  onTapCloseModal(){
+    this.setData({
+      showModal : false,
+    });
+  },
+  //查看rule
+  onTapViewRule(){
+    this.setData({
+      showModal : true
+    })
+  },
+  //同意并阅读
+  onTapModalAgree(){
+    this.setData({
+      showModal: false,
+      checked : true,
+    });
+  },
+  //立即购买
+  onTapBuy(){
+    if(!this.data.checked){
+      return ;
+    }
+
+
+  },
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+})
\ No newline at end of file

src/subPackage/page/pages/valueCardInfo/valueCardInfo.json

+{
+  "navigationBarTitleText": "超值卡详情",
+  "enablePullDownRefresh": false,
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackage/page/pages/valueCardInfo/valueCardInfo.wxml

+<!--subPackage/page/pages/valueCardInfo/valueCardInfo.wxml-->
+<image src='https://bigaka-xie.oss-cn-shanghai.aliyuncs.com/daogou.jpg' class='card-info' mode='widthFix'></image>
+<view class='card-info-body'>
+  <view class='card-title'>这是充值卡活动名城这是充值卡活动名城这是充值卡活动名城</view>
+  <view class='card-desc-item'>
+    <view class='lf'>活动时间</view>
+    <view class='rg'>2020-01-02 至 2020-05-31</view>
+  </view>
+  <view class='card-desc-item' wx:if="{{buyType == 1}}">
+    <view class='lf'>现金支付</view>
+    <view class='rg'>￥25.00</view>
+  </view>
+  <view class='card-desc-item' wx:if="{{buyType == 2}}">
+    <view class='lf'>积分兑换</view>
+    <view class='rg'>200积分</view>
+  </view>
+  <view class='card-desc-item'>
+    <view class='lf'>使用说明</view>
+    <view class='rg'>
+      <view class='list-item'> 1) 这个是说明1这个是说明1这个是说明1</view>
+      <view class='list-item'> 2) 这个是说明2这个是说明2这个是说明2</view>
+      <view class='list-item'> 3) 这个是说明2这个是说明2这个是说明2</view>
+      <view class='list-item'> 4) 这个是说明2这个是说明2这个是说明2</view>
+    </view>
+  </view>
+</view>
+
+
+<!-- 底部 -->
+<view class='bottom-buy'>
+    <view class='lf-info'>
+      <!-- 选中 active -->
+      <view class='check-box {{checked ? "active" : ""}}' bindtap='onTapSwitchChecked'>
+        <image src='/assets/imgs/tick-success.png' mode='aspectFit'></image>
+      </view>
+      <view class='explain'>
+        <label> 阅读并同意 </label>
+        <text bindtap='onTapViewRule'>《广东7-eleven超值卡规则》</text>
+      </view>
+    </view>
+    <view class='rg-button {{checked ? "" : "disabled"}}' bindtap='onTapBuy'>{{buyType == 1 ? "立即购买" : "立即兑换"}}</view>
+</view>
+
+<!-- 超值卡规则 -->
+<view class='rule-modal' wx:if="{{showModal}}">
+  <view class='modal-body'>
+    <view class='modal-body-title'>
+      《超值卡规则》
+      <image class='modal-body-close' src='/assets/imgs/gray_close.png' mode='aspectFit' bindtap='onTapCloseModal'></image>
+    </view>
+
+    <view class='modal-body-con'>
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规则超值卡规则超值卡规则
+      超值卡规则超值卡规则超值卡规
+    </view>
+
+    <view class='modal-body-bottom'>
+      <label bindtap='onTapModalAgree'>阅读并同意</label>
+    </view>
+  </view>
+</view>
\ No newline at end of file

src/subPackage/page/pages/valueCardInfo/valueCardInfo.wxss

+/* subPackage/page/pages/valueCardInfo/valueCardInfo.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  padding-bottom: 100rpx;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.card-info{
+  width: 100%;
+  display: block;
+}
+
+.card-info-body{
+  width: 100%;
+  padding: 30rpx;
+}
+
+.card-title{
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.card-desc-item{
+  width: 100%;
+  height: auto;
+  display: flex;
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+}
+
+.card-desc-item .lf{
+  flex: 0;
+  min-width: 120rpx;
+  max-width: 120rpx; 
+  color: #666666;
+}
+
+.card-desc-item .rg{
+  flex: 1;
+  padding-left: 10rpx;
+  color: #333333;
+}
+
+.card-desc-item .rg .list-item{
+  margin-bottom: 8rpx;
+}
+
+.bottom-buy{
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  z-index: 2;
+  border-top: solid 2rpx #ddd;
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+}
+
+.bottom-buy .rg-button{
+  flex: 0;
+  min-width: 200rpx;
+  max-width: 200rpx;
+  height: 100%;
+  background: #05C35B ;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+}
+
+.bottom-buy .rg-button:active{
+  opacity: 0.7;
+}
+
+.bottom-buy .rg-button.disabled{
+  background: #cccccc;
+}
+
+.bottom-buy .rg-button.disabled:active{
+  opacity: 1;
+}
+
+.bottom-buy .lf-info{
+  flex: 1;
+  padding-left: 30rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.check-box{
+  width: 42rpx;
+  height: 42rpx;
+  border-radius: 50%;
+  border: solid 1px #dddddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.check-box image{
+  display: none;
+}
+
+.check-box.active{
+  background: #ff3333;
+  border: solid 1px #ff3333;
+}
+
+.check-box.active image{
+  display: block;
+  width: 25rpx;
+  height: 25rpx;
+}
+
+.explain{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 10rpx;
+  font-size: 28rpx;
+}
+
+.explain label{
+  color: #333333;
+  padding-left: 8rpx;
+}
+
+.explain text{
+  color: #558ACB;
+  font-size: 22rpx;
+}
+
+.rule-modal{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rule-modal .modal-body{
+  width: 80vw;
+  height: 80vh;
+  background: #ffffff;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.rule-modal .modal-body .modal-body-title{
+  flex: 0;
+  min-height: 80rpx;
+  max-height: 80rpx;
+  width: 100%;
+  border-bottom: solid 2rpx #dddddd;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #333333;
+  font-size: 28rpx;
+}
+
+.rule-modal .modal-body .modal-body-title  .modal-body-close{
+  position: absolute;
+  width: 32rpx;
+  height: 32rpx;
+  top: 24rpx;
+  right: 24rpx;
+}
+
+.rule-modal .modal-body .modal-body-title  .modal-body-close:active{
+  opacity: 0.7;
+}
+
+.rule-modal .modal-body .modal-body-con{
+  flex: 1;
+  padding: 20rpx;
+  overflow: hidden;
+  overflow-y: auto;
+  font-size: 24rpx;
+  color: #666666;
+}
+
+.rule-modal .modal-body .modal-body-bottom{
+  flex: 0;
+  min-height: 120rpx;
+  max-height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rule-modal .modal-body .modal-body-bottom label{
+  width: 280rpx;
+  height: 80rpx;
+  background: #ff3333;
+  color: #ffffff;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+}
+
+.rule-modal .modal-body .modal-body-bottom label:active{
+  opacity: 0.7;
+}

src/subPackage/page/pages/valueCardRecords/valueCardRecords.js

+// subPackage/page/pages/valueCardRecords/valueCardRecords.js
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.hideShareMenu();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    wx.stopPullDownRefresh();
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+})
\ No newline at end of file

src/subPackage/page/pages/valueCardRecords/valueCardRecords.json

+{
+  "navigationBarTitleText": "购买记录",
+  "enablePullDownRefresh": true,
+  "backgroundTextStyle": "dark",
+  "usingComponents": {}
+}
\ No newline at end of file

src/subPackage/page/pages/valueCardRecords/valueCardRecords.wxml

+<!--subPackage/page/pages/valueCardRecords/valueCardRecords.wxml-->
+<view class='records-list'>
+    <view class='records-item'>
+      <view class='records-item-lf'>
+        <view class='records-title'>买10送10券</view>
+        <view>2019-12-02 16:23:46</view>
+      </view>
+      <view class='records-item-rg'>￥200</view>
+    </view>
+    <view class='records-item'>
+      <view class='records-item-lf'>
+        <view class='records-title'>买10送10券</view>
+        <view>2019-12-02 16:23:46</view>
+      </view>
+      <view class='records-item-rg'>￥200</view>
+    </view>
+    <view class='records-item'>
+      <view class='records-item-lf'>
+        <view class='records-title'>买10送10券</view>
+        <view>2019-12-02 16:23:46</view>
+      </view>
+      <view class='records-item-rg'>￥200</view>
+    </view>
+    <view class='records-item'>
+      <view class='records-item-lf'>
+        <view class='records-title'>买10送10券</view>
+        <view>2019-12-02 16:23:46</view>
+      </view>
+      <view class='records-item-rg'>￥200</view>
+    </view>
+</view>
+
+<!-- <view class='no-more'>-- 我也是有底线滴 --</view> -->

src/subPackage/page/pages/valueCardRecords/valueCardRecords.wxss

+/* subPackage/page/pages/valueCardRecords/valueCardRecords.wxss */
+page{
+  background: #ffffff;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  padding-bottom: 100rpx;
+}
+
+view{
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.records-list{
+  width: 100%;
+  height: auto;
+  padding: 0 20rpx;
+}
+
+.records-list .records-item{
+  width: 100%;
+  height: auto;
+  padding: 20rpx;
+  border-bottom: solid 2rpx #eeeeee;
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #999999;
+}
+
+.records-list .records-item .records-item-rg{
+  flex: 0;
+  min-width: 140rpx;
+  max-width: 140rpx;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #333333;
+  font-size: 28rpx;
+}
+
+.records-list .records-item .records-item-lf{
+  flex: 1;
+}
+
+.records-list .records-item .records-item-lf .records-title{
+  font-size: 28rpx;
+  color: #333333;
+}
+
+
+.no-more{
+  width: 100%;
+  height: auto;
+  padding: 30rpx 0;
+  color: #999999;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file