添加购买记录和我的卡项

excn

2021-01-15 a798d66d17349eb0d18f300281a7c18e2feba194

添加购买记录和我的卡项

 app.json

@@ -48,8 +48,11 @@
    "pages/miaosha/msDetails",
    "pages/index-back/index",
    "pages/miaosha/msOrder",
    "pages/yuyue/shopOrder"

    "pages/yuyue/shopOrder",
    "pages/membershipCard/index",
    "pages/purchaseRecords/index",
    "pages/purchaseRecords/detail"
    
  ],
  "window": {
    "backgroundTextStyle": "light",

 pages/customerCenter/customerCenter.js

@@ -68,12 +68,21 @@
      url: '/pages/welcome/welcome?url=/pages/customerCenter/customerCenter',
    })
  },
    myCollect(e){
  myCollect(e){
        wx.navigateTo({
            url: '/pages/yuyue/order?status=0',
        })
    },

  linkToMembershipCard(){
      wx.navigateTo({
        url: '/pages/membershipCard/index'
      })
  },
  linkToBuyList(){
    wx.navigateTo({
      url: '/pages/purchaseRecords/index'
    })
  },
  onStatusEvent(e) {
    var status = e.currentTarget.dataset.status;
    wx.navigateTo({

 pages/customerCenter/customerCenter.wxml

@@ -48,6 +48,16 @@
    </view>
  </view>
  <view class='section'>
    <view class="collected form_groun" bindtap='linkToBuyList'>
      <view class="iconfont iconxiangmu"></view>
      <text>购买记录</text>
      <view class="iconfont iconright"></view>
    </view>
    <view class="collected form_groun" bindtap="linkToMembershipCard">
      <view class="iconfont iconyouhuiquan"></view>
      <text>我的卡项</text>
      <view class="iconfont iconright"></view>
    </view>
    <view class="collected form_groun" bindtap='myCollect'>
      <view class="iconfont iconshijian"></view>
      <text>我的预约</text>

 pages/membershipCard/index.js

New file
@@ -0,0 +1,90 @@
// pages/membershipCard/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      cardName: '会员卡',
      realMoney: 100,
      giftMoney: 200,
      failTime: '2022-12-12'
    },
    {
      cardName: '会员卡',
      realMoney: 100,
      giftMoney: 200,
      failTime: '2022-12-12'
    },
    {
      cardName: '会员卡',
      realMoney: 100,
      giftMoney: 200,
      failTime: '2022-12-12'
    },
    {
      cardName: '会员卡',
      realMoney: 100,
      giftMoney: 200,
      failTime: '2022-12-12',
      status: 2
    }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 pages/membershipCard/index.json

New file
@@ -0,0 +1,3 @@
{
  "navigationBarTitleText":"我的卡项"
}

 pages/membershipCard/index.wxml

New file
@@ -0,0 +1,17 @@
<!--pages/membershipCard/index.wxml-->
<view class="container">
        <view class="list-item-bg {{item.status==2?'failure':''}}" wx:for="{{list}}" wx:for-item="item">
            <view class="list-item">
                <view class="list-header">
                    <text class="name">{{item.cardName}}</text>
                </view>
                <view class="list-content">
                    ¥{{item.realMoney}}
                </view>
                <view class="list-footer">
                    <text>赠送金额 ¥ {{item.giftMoney}}</text>
                    <text>有效期：{{item.failTime}}</text>
                </view>
            </view>
        </view>
    </view>

 pages/membershipCard/index.wxss

New file
@@ -0,0 +1,50 @@
/* pages/membershipCard/index.wxss */
.container{
  padding: 10px 10px;
}
.list-item-bg{
  border-radius: 10px;
}
.list-item{
  color: #FFFFFF;
  font-size: 12px;
  padding: 18px 18px;
  margin-bottom: 10px;
}
.list-item-bg:nth-child(2n+1){
  background: url(https://filehive2.jyymatrix.cc/uploadeFile/image/899a19b6bec5cddc50179f183ba138b628cf94b3/20210115/caf0e1ae46f642abb2eaca2cc6b5ca35.png) no-repeat;
  background-size: 100% 100%;
}
.list-item-bg:nth-child(2n+2){
  background: url(https://filehive2.jyymatrix.cc/uploadeFile/image/899a19b6bec5cddc50179f183ba138b628cf94b3/20210115/f772fa5855504d348a4c28e0c08a6636.png) no-repeat;
  background-size: 100% 100%;
}
.list-item-bg:nth-child(1){
  background: url(https://filehive2.jyymatrix.cc/uploadeFile/image/899a19b6bec5cddc50179f183ba138b628cf94b3/20210115/2f2bd25e651c457db0d7079b93aea700.png) no-repeat;
  background-size: 100% 100%;
}
.list-item-bg.failure{
  background: url(https://filehive2.jyymatrix.cc/uploadeFile/image/899a19b6bec5cddc50179f183ba138b628cf94b3/20210115/58ef5387167f40b3b3ed015d6752402e.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.8;
}
.list-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-header .name{
  font-size: 14pt;
  font-weight: bold;
  color: #FFFFFF;
}
.list-content{
  padding: 20px 0;
  font-size: 20pt;
  line-height: 30px;
}
.list-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 pages/purchaseRecords/detail.js

New file
@@ -0,0 +1,66 @@
// pages/purchaseRecords/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 pages/purchaseRecords/detail.json

New file
@@ -0,0 +1,3 @@
{
  "navigationBarTitleText":"购买记录详情"
}

 pages/purchaseRecords/detail.wxml

New file
@@ -0,0 +1,34 @@
<view>
  <view class="list-item" bindtap='toDetail'>
      <view class="list-header">
        <view>
          <view class="name">肽妍星海店</view>
          <view class="number">订单编号：N20201211164653</view>
        </view>
        <text>已付款</text>
      </view>
      <view class="list-content">
        <view class="list-content-row">
          <text>深层清洁  x  1</text>
          <text>￥23</text>
        </view>
        <view class="list-content-row">
          <text>深层清洁  x  1</text>
          <text>￥23</text>
        </view>
        <view class="pay-info">
          <view><text>微信：102</text></view>
          <view><text>储值卡：102</text></view>
          <view>
            <text class="gray">总价 ￥23.23</text>
            <text class="ml-10 gray">优惠￥23</text>
            <text class="ml-10">实付款￥10</text>
          </view>
        </view>
      </view>
      <view class="list-footer">
        <view><text>购买时间：2020-08-23  12:33</text></view>
        <view class="mt-5"><text>下单顾问：李贝</text></view>
      </view>
  </view>
</view>

 pages/purchaseRecords/detail.wxss

New file
@@ -0,0 +1,56 @@

.list-item{
  background: #FFFFFF;
  border-radius: 4px;
  margin: 10px;
  color: #3a3f3f;
  border: 1px solid #EDEAF4;
  padding: 0 10px;
}
.list-item text{
  font-size: 10pt;
}
.list-header{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 10pt;
  border-bottom: 1px solid #EDEAF4;
}
.list-header .name{
  font-size: 11pt;
}
.list-header .number{
  color: #aeaeae;
  font-size: 10pt;
  margin-top: 5px;
}
.list-content{
  padding: 10px 0;
}
.list-content-row{
  display: flex;
  justify-content: space-between;
  line-height: 28px;
}
.pay-info{
  text-align: right;
  line-height: 26px;
}
.list-footer{
  padding: 12px 0;
  border-top: 1px solid #EDEAF4;
}
.list-footer text{
  font-size: 9pt;
  color: #666666;
}
.ml-10{
  margin-left: 10px;
}
.mt-5{
  margin-top: 5px;
}
.gray{
  color: #aeaeae;
}

 pages/purchaseRecords/index.js

New file
@@ -0,0 +1,78 @@
// pages/purchaseRecords/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  onTabsItemEvent(e) {
    var index = e.currentTarget.dataset.index;

    this.setData({
        currentIndex: index
    })
  },
  toDetail(){
    wx.navigateTo({
      url: '/pages/purchaseRecords/detail'
    })
  }
})

 pages/purchaseRecords/index.json

New file
@@ -0,0 +1,3 @@
{
  "navigationBarTitleText":"购买记录"
}

 pages/purchaseRecords/index.wxml

New file
@@ -0,0 +1,43 @@
<!--pages/purchaseRecords/index.wxml-->
<view>
  <view class='tabs_box'>
    <view class="tabs_item {{currentIndex==0?'selected':''}}" bindtap='onTabsItemEvent' data-index="">
        全部
    </view>
    <view class="tabs_item {{currentIndex==1?'selected':''}}" bindtap='onTabsItemEvent' data-index="1">
        待付款
    </view>
    <view class="tabs_item {{currentIndex==2?'selected':''}}" bindtap='onTabsItemEvent' data-index="2">
        已付款
    </view>
    <view class="tabs_item {{currentIndex==3?'selected':''}}" bindtap='onTabsItemEvent' data-index="3">
        欠款
    </view>
  </view>
  <view>
    <view class="list-item" bindtap='toDetail'>
                <view class="list-header">
                    <view>
            <view class="name">肽妍星海店</view>
            <view class="number">订单编号：N20201211164653</view>
          </view>
          <text>已付款</text>
                </view>
                <view class="list-content">
                    <view class="list-content-row">
            <text>深层清洁  x  1</text>
            <text>￥23</text>
          </view>
          <view class="list-content-row">
            <text>深层清洁  x  1</text>
            <text>￥23</text>
          </view>
                </view>
                <view class="list-footer">
                    <text class="gray">总价 ￥23.23</text>
          <text class="ml-10 gray">优惠￥23</text>
                    <text class="ml-10">实付款￥10</text>
                </view>
    </view>
  </view>
</view>

 pages/purchaseRecords/index.wxss

New file
@@ -0,0 +1,66 @@
.tabs_box {
  display: flex;
  color: #999;
  
  line-height: 60rpx;
  width: 95%;margin: auto;
  background: #FFFFFF
}
.tabs_box>view {
  text-align: center;
  font-size: 26rpx;
  width: 25%;
  padding: 20rpx 0;
}
.selected {
  height: 100%;
  color: #00c085;
  font-size: 30rpx;
  border-bottom: 2rpx solid #00c085;
}
.list-item{
  background: #FFFFFF;
  border-radius: 4px;
  margin: 10px;
  color: #3a3f3f;
  border: 1px solid #EDEAF4;
  padding: 0 10px;
}
.list-item text{
  font-size: 10pt;
}
.list-header{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 10pt;
  border-bottom: 1px solid #EDEAF4;
}
.list-header .name{
  font-size: 11pt;
}
.list-header .number{
  color: #aeaeae;
  font-size: 10pt;
  margin-top: 5px;
}
.list-content{
  padding: 12px 0;
}
.list-content-row{
  display: flex;
  justify-content: space-between;
  line-height: 28px;
}
.list-footer{
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
  border-top: 1px solid #EDEAF4;
}
.ml-10{
  margin-left: 10px;
}
.gray{
  color: #aeaeae;
}

 project.config.json

@@ -21,26 +21,27 @@
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "bundle": false,
    "useIsolateContext": true,
    "useCompilerModule": true,
    "userConfirmedUseCompilerModuleSwitch": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "enableEngineNative": false,
    "userConfirmedBundleSwitch": false,
    "minifyWXSS": true
  },
  "compileType": "miniprogram",
  "libVersion": "1.9.98",
  "appid": "wx5cc58f796224af61",
  "appid": "wx94ea32d31eec8904",
  "projectname": "%E8%9C%82%E5%B7%A2%E7%BE%8E%E4%B8%9A",
  "isGameTourist": false,
  "simulatorType": "wechat",