兑换记录 界面修改 及兑换

project.config.json

@@ -32,7 +32,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 2,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -67,7 +67,7 @@
 					"scene": 1037,
 					"referrerInfo": {
 						"appId": "12344",
-						"extraData": "{ \t\"accountId\": \"6007_1004_D1A9357FB5975B61CDCB43B1AEE6C5D0\", \t\"sessionId\": \"1566525470_1563178315_f37bcfd5c3b82fd28d00d18273e7f1a5_53c8e916459a621c1e5021fba99c9212\", \t\"gameId\": \"8002\", \t\"channelId\": \"6001\",      \"recordId\": \"5d5e81eedfd349387cace22c\" }"
+						"extraData": "{ \t\"accountId\": \"6001_1004_oQmL74u7TBo94aGpKIGNCZD9rKew\", \t\"sessionId\": \"1566525470_1563178315_f37bcfd5c3b82fd28d00d18273e7f1a5_53c8e916459a621c1e5021fba99c9212\", \t\"gameId\": \"8002\", \t\"channelId\": \"6001\",      \"recordId\": \"5d5e81eedfd349387cace22c\" }"
 					}
 				}
 			]

src/app.wpy

@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  width: 749rpx;
+  // width: 749rpx;
   overflow-x: hidden;
 }
 .hidden {

src/pages/exchange-record.wpy

@@ -1,19 +1,26 @@
 <style lang="less">
 .container {
+  background-color: #fafafa;
+  min-height: 100vh;
   .records {
     width: 100%;
-    padding: 24rpx;
+
     .record {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      height: 200rpx;
-      height: 180rpx;
+      margin: 32rpx;
-      margin: 24rpx;
+      padding: 24rpx;
-      border: 1px solid #f0f0f0;
+      border-radius: 16rpx;
+      background-color: #fcecd8;
+      overflow: hidden;
+      box-shadow: rgba(0, 0, 0, 0.1) 0 6rpx 12rpx;
 
       .item-img-wrap {
-        height: 100%;
+        width: 160rpx;
-        width: 180rpx;
+        height: 160rpx;
+        flex-shrink: 0;
+        border-radius: 32rpx;
         .item-img {
           width: 100%;
           height: 100%;
@@ -21,33 +28,90 @@
       }
 
       .item-desc {
+        display: flex;
+        flex-direction: column;
         flex: 1;
-        box-sizing: border-box;
+        height: 160rpx;
-        height: 100%;
+        margin-left: 32rpx;
-        margin-left: 36rpx;
-        padding-top: 24rpx;
-        .item-title,
-        .code {
-          display: block;
-          line-height: 1.2;
-        }
-        .code {
-          margin-top: 36rpx;
-          font-size: 28rpx;
-          color: #666;
-          max-width: 240rpx;
         white-space: nowrap;
-          text-overflow: ellipsis;
         overflow: hidden;
+        text-overflow: ellipsis;
+        .item-title {
+          color: #f31f0f;
+          font-size: 40rpx;
+          font-weight: 700;
+        }
+
+        .item-date,
+        .item-used,
+        .item-code {
+          color: #707070;
+          font-size: 24rpx;
+        }
+
+        .item-date {
+          flex: 1;
+          margin-top: 24rpx;
+        }
+
+        .item-code {
+          justify-items: flex-end;
         }
       }
 
-      .btn-copy {
+      .btn-copy,
-        width: 180rpx;
+      .btn-use {
-        height: 100%;
+        width: 120rpx;
-        border-left: 1px solid #f0f0f0;
+        height: 120rpx;
-        line-height: 180rpx;
+        border-radius: 50%;
+        color: #fff;
         text-align: center;
+        font-size: 32rpx;
+        line-height: 120rpx;
+        background-color: #ff5d5d;
+        box-shadow: rgba(0, 0, 0, 0.2) 0 6rpx 12rpx;
+      }
+      .btn-disabled {
+        background-color: #d8d8d8 !important;
+      }
+    }
+  }
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .modal {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 80%;
+      height: 180rpx;
+      margin: auto;
+      padding: 48rpx;
+      background-color: #fcecd8;
+      border-radius: 32rpx;
+      box-shadow: rgba(0, 0, 0, 0.3) 0 6rpx 12rpx;
+
+      .btn-area {
+        text-align: right;
+      }
+      .btn-submit {
+        background-color: #ff5d5d;
+      }
+      .btn-submit,
+      .btn-reset {
+        margin: 32rpx 16rpx 32rpx 0;
+        border: none;
+      }
+      .ipt-tel {
+        margin-top: 16rpx;
+        border-bottom: 1px solid #ccc;
       }
     }
   }
@@ -71,18 +135,76 @@
             ></image>
           </view>
           <view class="item-desc">
-            <text class="item-title">{{item.gift_info.gift_name}}</text>
+            <text class="item-text item-title">{{item.gift_info.gift_name}}</text>
-            <text class="code">{{item.code}}</text>
+            <text class="item-text item-date">{{item.time}}</text>
+            <text
+              class="item-text item-code"
+              wx:if="{{item.gift_info.type === 0}}"
+            >{{item.code}}</text>
+            <text
+              class="item-text item-code"
+              wx:if="{{item.gift_info.type === 1}}"
+            >{{item.used === false ? '未使用' : '已使用'}}</text>
+            <text
+              class="item-text item-code"
+              wx:if="{{item.gift_info.type === 2}}"
+            >{{item.used === false ? '等待工作人员与您联系' : '已使用'}}</text>
           </view>
           <view
             class="btn-copy"
             @tap="copy"
             data-index="{{index}}"
+            wx:if="{{item.gift_info.type === 0}}"
           >复制</view>
+          <view
+            class="btn-use {{item.used ? 'btn-disabled' : ''}}"
+            @tap="use"
+            data-index="{{index}}"
+            wx:if="{{item.gift_info.type === 1 || item.gift_info.type === 2}}"
+          >兑换</view>
         </view>
       </repeat>
     </view>
-    <view class="tip" wx:if="{{records.length === 0}}">暂无兑换记录</view>
+    <view
+      class="tip"
+      wx:if="{{records.length === 0}}"
+    >暂无兑换记录</view>
+    <view
+      class="mask"
+      id="mask"
+      @tap="closeModal"
+      wx:if="{{modalVisible}}"
+    >
+      <view class="modal">
+        <form
+          bindsubmit="formSubmit"
+          bindreset="formReset"
+        >
+          <view class="section">
+            <view class="section__title">手机号:</view>
+            <input
+              name="tel"
+              placeholder="输入手机号码"
+              class="ipt-tel"
+              value="{{user_tel}}"
+            />
+          </view>
+          <view class="btn-area">
+            <button
+              form-type="submit"
+              class="btn-submit"
+              size="mini"
+              type="primary"
+            >提交</button>
+            <button
+              form-type="reset"
+              class="btn-reset"
+              size="mini"
+            >重置</button>
+          </view>
+        </form>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -97,6 +219,10 @@ export default class ExchangeRecord extends wepy.page {
 
   data = {
     records: [],
+    modalVisible: false,
+    curRecordId: '',
+    curRecordIdx: '',
+    user_tel: ''
   }
 
   methods = {
@@ -111,18 +237,101 @@ export default class ExchangeRecord extends wepy.page {
         },
       })
     },
+    use(e) {
+      const used = this.records[e.target.dataset.index].used
+      if (used) {
+        // wx.showToast({
+        //   icon: 'none',
+        //   title: '不可重复兑换！',
+        // })
+        return
+      }
+      this.curRecordId = this.records[e.target.dataset.index].record_id
+      this.curRecordIdx = e.target.dataset.index
+      this.methods.openModal(this)
+    },
+    async formSubmit(e) {
+      try {
+        const reg = /^1\d{10}$/g
+        const tel = e.detail.value.tel
+        if (!reg.test(tel)) {
+          wx.showToast({
+            icon: 'none',
+            title: '请输入正确的手机号！',
+          })
+          return
+        }
+
+        const extraData = wepy.$instance.globalData.extraData
+        let url = ''
+        let type = this.records[this.curRecordIdx].gift_info.type
+        if (type === 1) {
+          url = '/api/gift/tel'
+        } else if (type === 2) {
+          url = '/api/gift/goods'
+        }
+        const res = await http.post(url, {
+          accountId: extraData.accountId,
+          sessionId: extraData.sessionId,
+          recordId: this.curRecordId,
+          phone: tel,
+        })
+        const data = res.data
+
+        if (res.errcode === 0) {
+          wx.setStorage({
+            key: 'tel',
+            data: tel,
+          })
+          if (type === 1) {
+            wx.showToast({
+              title: '兑换成功！',
+            })
+          } else if (type === 2) {
+            wx.showToast({
+              title: '信息提交成功！',
+            })
+          }
+        } else {
+          wx.showToast({
+            icon: 'none',
+            title: res.errmsg,
+          })
+        }
+        this.modalVisible = false
+        this.$apply()
+      } catch (err) {
+        const msg = err.data.errmsg || '失败'
+        wx.showToast({
+          icon: 'none',
+          title: msg,
+        })
+      }
+    },
+    openModal(ctx) {
+      ctx.modalVisible = true
+      ctx.user_tel = wx.getStorageSync('tel')
+    },
+    closeModal(e) {
+      if (e.target.id === 'mask') {
+        this.modalVisible = false
+      }
+    },
   }
 
   async onShow() {
+    try {
       const extraData = wepy.$instance.globalData.extraData
       const res = await http.get(
-      `/api/gift/records?accountId=${
+        `/api/gift/records?accountId=${extraData.accountId}&gameId=${
-        extraData.accountId
+          extraData.gameId
-      }&gameId=${extraData.gameId}&channelId=${extraData.channelId}`
+        }&channelId=${extraData.channelId}`
       )
-    this.records = res.result
+      this.records = res.result || []
       this.$apply()
-    console.log(this.records)
+    } catch (err) {
+      console.log(err)
+    }
   }
 }
 </script>