我的兑换样式调整

api/integralinfo.js

@@ -108,6 +108,13 @@ class Integralinfo extends request {
     return this.postRequest(`${this.INT_URL}/app/order/sendCmccSms`, params);
   }
 
+    /**
+   * 我的兑换
+   */
+  static getOrderList(params) {
+    return this.postRequest(`${this.INT_URL}/app/order/list`, params);
+  }
+
        /**
    * 创建订单
    */

app.json

@@ -30,7 +30,9 @@
     "pages/welfareMall/couponFitFood/index",
     "pages/welfareMall/refundInfo/refundInfo",
     "pages/welfareMall/buyInfo/buyInfo",
-    "pages/integral/integral"
+    "pages/integral/integral",
+    "components/step/step",
+    "pages/integral/exchange"
   ],
   "window": {
     "backgroundTextStyle": "light",

components/step/step.js

@@ -0,0 +1,34 @@
+// components/Step/step.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    //步骤条数据
+    stepList:{
+      type:Array,
+      value:[
+        {
+          name:"名称",
+          event:"步骤内容",
+          time:"2021-07-19：12:30:01",
+          status:"0"
+        }
+      ]
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/step/step.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/step/step.wxml

@@ -0,0 +1,11 @@
+<!--components/step/step.wxml-->
+<view class="ct-wx-step">
+  <view class='ct-wx-cell-list' wx:key="{{item}}" wx:for="{{stepList}}">
+    <view class='ct-wx-cell-point  {{item.status==0?"default":"piont-last"}} '></view>
+    <view class='ct-wx-cell-line  {{item.status==1?"last":null}}'>
+      <view class='ct-wx-cell-name'>{{item.name}}</view>
+      <view class='ct-wx-cell-event'>{{item.event}}</view>
+      <view class='ct-wx-cell-time'>{{item.time}}</view>
+    </view>
+  </view>
+</view>

components/step/step.wxss

@@ -0,0 +1,48 @@
+/* components/step/step.wxss */
+/* 垂直方向布局，水平居中 **/
+.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;
+}
+.ct-wx-step{
+  background: #FFFFFF;
+  padding: 12px 0px;
+}
+.ct-wx-cell-list{
+  padding: 0 12px;
+}
+.ct-wx-cell-line{
+  padding-left: 12px;
+  color: #666666;
+  font-size: 12px;
+  margin-left: 5px;
+  border-left: 1px solid #E4E4E4;
+  height: auto; 
+}
+.last{
+  color: #333333;
+  border-left: 1px solid #FFB93F;
+}
+.default{
+  background: #E4E4E4;
+}
+.piont-last{
+  background: #FFB93F;
+}
+.ct-wx-cell-point{
+  border-radius: 20%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  opacity: 1;
+}

pages/integral/exchange.js

@@ -0,0 +1,113 @@
+// pages/integral/exchange.js
+import Integralinfo from '../../api/integralinfo'
+import {getMobileCache, getPhoneNumberNew as getPhoneNumberSync} from '../../utils/user'
+import { parseTime } from '../../utils/util'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tabStatus: 'a',
+    cardList: [],
+    row:{},
+    listStatus:false
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // this.data.row = JSON.parse(options.obj)
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    this.getList()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  // 排序
+  cardsSortRule(pre, next) {
+    if (!pre.order_status && pre.order_status === next.order_status) {
+      // 一级分类内部的二级排序：没过期时，激活时间倒序
+      return next.order_status - pre.order_status // -1
+    } else {
+      // 最外层一级大类排序：没过期排在过期前面
+      if (pre.order_status && !next.order_status) {
+        return 1
+      } else {
+        return -1
+      }
+    }
+  },
+
+  getList() {
+      Integralinfo.getOrderList({
+        channelid: '',
+        shopid: '',
+        storeid: '',
+        mobile: '13816922995'
+    }).then(res => {
+        const data = res.data
+        data.forEach((v) => {
+          let starttime = Math.round(new Date(v.starttime).getTime() / 1000)
+          let endDate = Math.round(new Date(v.endtime).getTime() / 1000)
+          let current = Math.round(new Date().getTime() / 1000)
+          v.start = parseTime(starttime, '{y}-{m}-{d} {h}:{i}:{s}')
+          v.end = parseTime(endDate, '{y}-{m}-{d} {h}:{i}:{s}')
+          if (v.order_status === 0 && endDate < current) {
+            v.order_status = 2
+          }
+        })
+        data.sort(this.cardsSortRule)
+        this.setData({
+          cardList: data,
+          listStatus: true
+        })
+       
+    });
+  },
+})

pages/integral/exchange.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "我的兑换",
+  "usingComponents": {}
+}

pages/integral/exchange.wxml

@@ -0,0 +1,27 @@
+<!--pages/integral/exchange.wxml-->
+<view class="card-list" wx:for="{{cardList}}" wx:key="key" data-id="{{item.id}}">
+  <view class="card-list-top flex-row">
+    <image class="top-image" src="{{item.image}}" mode="aspectFill"></image>
+    <view class="content">
+      <view class="content-title">
+        <text>{{item.coupon_name}}</text>
+      </view>
+      <view class="content-type">
+        <text>代金券1张</text>
+      </view>
+      <view class="content-num" wx:if="{{item.show != 0}}">
+        <text>券码：{{item.coupon_code}}</text>
+      </view>
+    </view>
+    <view class="status" :style="item.order_status === 0 ? 'line-height: 168upx;' : 'line-height: 84upx;'">
+      <text class="status-text" style="color: rgb(245, 108, 108);">使用说明</text>
+      <text class="status-text" style="color: rgb(51, 51, 51);">{{item.order_status === 1 ? '已使用' : item.order_status === 2 ? '已过期' : ''}}</text>
+    </view>
+  </view>
+  <view class="time">
+    <text>有效期：</text>
+    <text>{{item.start}} </text>
+    <text>至</text>
+    <text> {{item.end}}</text>
+  </view>
+</view>

pages/integral/exchange.wxss

@@ -0,0 +1,88 @@
+/* pages/integral/exchange.wxss */
+page {
+  background-color: #f5f5f5;
+}
+
+/* 垂直方向布局，水平居中 **/
+.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;
+}
+
+.card-list {
+  width: 750rpx;
+  height: 246rpx;
+  padding: 24rpx 30rpx;
+  background-color: white;
+  margin: 16rpx 0;
+}
+
+.card-list-top {
+  width: 100%;
+  height: 168rpx;
+  justify-content: space-between;
+}
+
+.top-image {
+  width: 168rpx;
+  height: 168rpx;
+}
+
+.content {
+  width: 50%;
+  height: 168rpx;
+  line-height: 56rpx;
+  padding-left: 24rpx;
+  box-sizing: border-box;
+}
+
+.content-title {
+  color: rgb(51, 51, 51);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.content-type {
+  color: rgb(102, 102, 102);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.content-num {
+  font-size: 12px;
+  color: rgb(51, 51, 51);
+  font-weight: 600;
+}
+
+.status {
+  width: 200rpx;
+  text-align: center;
+  height: 168rpx;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.status-text {
+  display: inline-block;
+  width: 100%;
+}
+
+.time {
+  width:750rpx;
+  height: 78rpx;
+  line-height: 78rpx;
+  font-size: 12px;
+  color: #b1b1b1;
+  font-weight: 600;
+}

pages/integral/integral.js

@@ -532,6 +532,7 @@ paymentClick() {
             shopid: this.data.shopid
         }).then(res => {
                 if (res.code === '0000') {
+                    this.codeSetInterval(60)
                     this.setData({
                         codeName: '60s后重新获取',
                         paymentStatus: true,
@@ -557,7 +558,6 @@ paymentClick() {
                         })
                     }
                     this.getPaySend()
-                    this.codeSetInterval(60)
                 } else {
                     console.log(res.data.message)
                     console.log(this.data.integralNum,this.data.mobile,JSON.stringify(data))
@@ -719,11 +719,11 @@ paymentClick() {
     getPaySend(){
         if (this.data.activeNum === 1) {
             console.log('发送短信')
-                Integralinfo.getPaySend({
-                    order_no: this.data.active1obj.order_no,
-                    mobile: this.data.mobile,
-                    shopid: this.data.shopid,
-                }).then(res => {
+            Integralinfo.getSendCmccSms({
+                orderId: this.data.active1obj.orderId,
+                mobile: this.data.mobile,
+                shopid: this.data.shopid
+            }).then(res => {
                         if (res.code === '0000') {
                             this.setData({
                                 codeName: '60s后重新获取',
@@ -850,5 +850,17 @@ paymentClick() {
             }
         }
     },
+
+    toExchange(){
+        const obj = {
+            mobile: getMobileCache(),
+            channelid: this.data.channelid,
+            shopid: this.data.shopid,
+            storeid: this.data.storeid
+        }
+        wx.navigateTo({
+            url: '../integral/exchange?obj=' + JSON.stringify(obj)
+        })
+    }
        
 })

pages/integral/integral.wxml

@@ -31,7 +31,7 @@
   </view>
 
   <!-- 我的卡券 -->
-  <view class="my-card">
+  <view class="my-card" wx:if="{{phone !== '********'}}" catchtap="toExchange">
     <view class="card-content">
       <text>我的兑换</text>
     </view>