个人中心页面调整

pages/luckDraw/prize.js

@@ -0,0 +1,133 @@
+// pages/luckDraw/prize.js
+import LuckDraw from '../../api/luck-draw'
+import { parseTime } from '../../utils/util';
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        page: 1,
+        pageSize: 10,
+        lock: false,
+        noResult: false,
+        noMore: false,
+        couponNum: 0,
+        productNum: 0,
+        goodsItemList: []
+
+    },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    this.getUserPrizeList();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  getUserPrizeList: function() {
+      LuckDraw.getUserPrizeList({
+          page: this.data.page,
+          pageSize: this.data.pageSize,
+          mobile:'16602120168',
+          goodsType: 2
+      }).then(res => {
+          if (res.code == 200) {
+              this.uaerPrizeListView(res.data)
+          }
+          this.data.lock = false
+      }).catch(_ => {
+          this.data.lock = false
+      })
+  },
+
+  uaerPrizeListView: function(data) {
+      if (!Array.isArray(data.goodsItemList) || data.goodsItemList.length == 0) {
+          console.log("没有获取到数据");
+              this.setData({
+                  noResult: true
+              })
+          return
+      }
+      data.goodsItemList.forEach(v => {
+          let beginTime = v.couponBeginTimestamp
+          let endTime = v.couponEndTimestamp
+          v.couponBeginTimestamp = parseTime(beginTime, "{y}.{m}.{d}")
+          v.couponEndTimestamp = parseTime(endTime, "{y}.{m}.{d}")
+      })
+
+      this.data.goodsItemList = this.data.goodsItemList.concat(...data.goodsItemList)
+      this.setData({
+          couponNum: data.couponNum,
+          productNum: data.productNum,
+          goodsItemList: this.data.goodsItemList
+      })
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+      if (this.data.lock || this.data.noMore) {
+          return
+      }
+      this.data.lock = true
+      this.data.page++
+      this.getUserPrizeList()
+  },
+
+  toProfile(e) {
+    const url = "profile?id=" + e.currentTarget.dataset.id
+    wx.redirectTo({
+        url
+    })
+}
+})

pages/luckDraw/prize.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "个人中心",
+  "usingComponents": {
+    "tab-bar": "./components/tabbar"
+  }
+}

pages/luckDraw/prize.wxml

@@ -0,0 +1,43 @@
+<!--pages/luckDraw/prize.wxml-->
+<view class="personal">
+<!-- 个人中心视图 -->
+    <view class="head-bg">
+       <image class="image_bg" src="/images/luck-draw/per_head.png" />
+       <image class="image_portrait" src="/images/luck-draw/portrait.png" />
+       <view class="luck-draw-pro-nickname">TONY WU</view>
+    </view>
+    <view class="luck-draw-pro-cp">
+      <!-- 优惠券 -->
+      <view class="luck-draw-coupon" catchtap="toProfile">
+        <view class="luck-draw-cn">{{couponNum}}</view>
+        <view class="luck-draw-cz">优惠券</view>
+      </view>
+      <!-- 奖品 -->
+      <view class="luck-draw-prize" catchtap="toDetail">
+        <view class="luck-draw-pn">{{productNum}}</view>
+        <view class="luck-draw-pz">奖品</view>
+        <view class="luck-draw-cjh"><view class="luck-draw-cj"></view></view>
+      </view>
+    </view>
+    <view class="luck-draw-theme">
+      <!-- 奖品 -->
+      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}">
+        <view class="luck-draw-words">
+          <view class="luck-draw-discount1">
+            <view class="luck-draw-zkz4">{{item.goodsName}}</view>
+            <image class="luck-draw-zkz5" src="/images/luck-draw/prize.png" />
+          </view>
+          <view class="luck-draw-discount2">
+            <view class="luck-draw-zkz1">{{item.goodsName}}</view>
+            <view class="luck-draw-zkz3">奖品参数</view>
+          </view>
+        </view>
+        <image class="image_zk_un" src="/images/luck-draw/choice.png" />
+      </view>
+      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
+    </view>
+</view>
+
+
+<!-- 底部导航 -->
+<tab-bar />

pages/luckDraw/prize.wxss

@@ -0,0 +1,181 @@
+/* pages/luckDraw/prize.wxss */
+.personal{
+  width: 750rpx;
+  height: auto;
+  padding-bottom: 119rpx;
+}
+
+.head-bg{
+  width: 750rpx;
+  height: 464rpx;
+}
+.image_bg{
+  width: 750rpx;
+  height: 464rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.image_portrait{
+  width: 140rpx;
+  height: 144rpx;
+  position: relative;
+  z-index: 2;
+  left: 304rpx;
+  top: 170rpx;
+}
+
+.luck-draw-pro-nickname{
+  width: 750rpx;
+  height: 50rpx;
+  font-size: 40rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #FEFEFE;
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  top: 180rpx;
+}
+
+.luck-draw-pro-cp{
+  width: 750rpx;
+  height: 180rpx;
+}
+
+.luck-draw-coupon,.luck-draw-prize{
+  display: inline-block;
+  width: 50%;
+  height: 100%;
+}
+.luck-draw-cn,.luck-draw-cz,.luck-draw-pn,.luck-draw-pz,.luck-draw-cjh{
+  text-align: center;
+}
+.luck-draw-cn,.luck-draw-pn{
+  margin-top: 30rpx;
+  font-size: 36rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #BF2637;
+}
+.luck-draw-cz,.luck-draw-pz{
+  font-size: 32rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #303030;
+}
+.luck-draw-cj{
+  width: 78rpx;
+  height: 6rpx;
+  background: #BF2637;
+  border-radius: 4rpx;
+  margin: 10rpx auto;
+}
+
+.luck-draw-content{
+  width: 708rpx;
+  height: 220rpx;
+  position: relative;
+  margin: 0 auto 20rpx;
+}
+.image_zk{
+  width: 708rpx;
+  height: 220rpx;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
+
+.image_zk_un{
+  display: inline-block;
+  width: 162rpx;
+  height: 56rpx;
+  position:absolute;
+  z-index: 2;
+  bottom: 70rpx;
+  right: 26rpx;
+}
+.luck-draw-discount1,.luck-draw-discount2,.luck-draw-zkz2,.luck-draw-djz4,.luck-draw-djz5{
+  display: inline-block;
+}
+.luck-draw-words{
+  position:relative;
+  z-index: 2;
+  width: 708rpx;
+  height: 220rpx;
+  display: flex;
+  flex-direction: row;
+  background: #FFFFFF;
+  border: 0rpx solid #FF7A03;
+  box-shadow: 0rpx 0rpx 50rpx 8rpx rgba(127, 127, 127, 0.09);
+  border-radius: 20rpx;
+}
+.luck-draw-discount1{
+  width: 214rpx;
+  height: 220rpx;
+  background: #FFE9B0;
+  border: 0rpx solid #FF7A03;
+  border-radius: 20rpx;
+  text-align: center;
+}
+.luck-draw-discount1 view:nth-child(1) {
+  position: relative;
+  top: 40rpx;
+}
+
+.luck-draw-discount2{
+  width: 500rpx;
+  height: 100%;
+}
+
+.luck-draw-zkz4{
+  font-size: 32rpx;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  color: #FF7A03;
+  line-height: 44rpx;
+}
+
+.luck-draw-zkz5{
+  width: 134rpx;
+  height: 106rpx;
+  position: relative;
+  top: 55rpx;
+}
+
+.luck-draw-zkz1{
+  font-size: 40rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #443E5B;
+  line-height: 40rpx;
+  margin-top: 48rpx;
+  margin-left: 48rpx;
+}
+.luck-draw-mj{
+  margin-left: 48rpx;
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.luck-draw-zkz3{
+  font-size: 26rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 32rpx;
+  line-height: 32rpx;
+  margin-left: 48rpx;
+  margin-top: 30rpx;
+}
+
+.no_result {
+  font-size: 24rpx;
+  color: #B1B1B1;
+  text-align: center;
+  line-height: 100rpx;
+  font-weight: 1000;
+}

pages/luckDraw/profile.js

@@ -1,6 +1,7 @@
 // pages/luckDraw/profile.js
 import LuckDraw from '../../api/luck-draw'
-import { parseTime } from '../../utils/util';
+import { parseTime } from '../../utils/util'
+import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../utils/user'
 Page({
 
     /**
@@ -12,6 +13,7 @@ Page({
         lock: false,
         noResult: false,
         noMore: false,
+        isLogin: false,
         couponNum: 0,
         productNum: 0,
         goodsItemList: []
@@ -22,6 +24,9 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        this.setData({
+            isLogin: getMobileCache() != ''
+        })
         this.getUserPrizeList();
     },
 
@@ -70,7 +75,7 @@ Page({
         LuckDraw.getUserPrizeList({
             page: this.data.page,
             pageSize: this.data.pageSize,
-            mobile:'16602120168',
+            mobile: getMobileCache(),
             goodsType: 1
         }).then(res => {
             if (res.code == 200) {
@@ -78,6 +83,7 @@ Page({
             }
             this.data.lock = false
         }).catch(_ => {
+            console.log(_)
             this.data.lock = false
         })
     },
@@ -85,15 +91,9 @@ Page({
     uaerPrizeListView: function(data) {
         if (!Array.isArray(data.goodsItemList) || data.goodsItemList.length == 0) {
             console.log("没有获取到数据");
-            if (this.data.couponNum == 1) {
                 this.setData({
                     noResult: true
                 })
-            } else {
-                this.setData({
-                    noMore: true
-                })
-            }
             return
         }
         data.goodsItemList.forEach(v => {
@@ -128,5 +128,17 @@ Page({
         wx.redirectTo({
             url
         })
-    }
+    },
+    turnPrize: function() {
+        console.log("开始查看")
+        if (this.isLock || !this.data.isLogin) {
+            return
+        }
+    },
+    // 授权手机号
+    getPhoneNumber(e) {
+        getPhoneNumberSync(e, _ => {
+            this.getUserPrizeList()
+        })
+    },
 })

pages/luckDraw/profile.wxml

@@ -8,9 +8,9 @@
     </view>
     <view class="luck-draw-pro-cp">
       <!-- 优惠券 -->
-      <view class="luck-draw-coupon">
+      <view class="luck-draw-coupon" catchtap="turnPrize">
         <view class="luck-draw-cn">{{couponNum}}</view>
-        <view class="luck-draw-cz">优惠券</view>
+        <button class="luck-draw-cz" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" />优惠券
         <view class="luck-draw-cjh"><view class="luck-draw-cj"></view></view>
       </view>
       <!-- 奖品 -->
@@ -24,7 +24,7 @@
       <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" catchtap="toDetail" wx:if="{{item.couponType == 'D'}}">
         <view class="luck-draw-words">
           <view class="luck-draw-discount1">
-            <view class="luck-draw-zkz4">3.6</view>
+            <view class="luck-draw-zkz4">{{item.discount ?item.discount:0}}</view>
             <view class="luck-draw-zkz5">折</view>
           </view>
           <view class="luck-draw-discount2">
@@ -47,7 +47,7 @@
         <view class="luck-draw-words">
           <view class="luck-draw-discount1">
             <view class="luck-draw-djz4">￥</view>
-            <view class="luck-draw-djz5">10</view>
+            <view class="luck-draw-djz5">{{item.reduceCost ?item.reduceCost:0}}</view>
           </view>
           <view class="luck-draw-discount2">
             <view class="luck-draw-zkz1">{{item.goodsName}}</view>
@@ -56,12 +56,12 @@
             <view class="luck-draw-zkz2">{{item.couponTitle}}</view>
             <view class="luck-draw-zkz22"></view>
            </view>
-            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
+            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp ?item.couponBeginTimestamp:0}}-{{item.couponEndTimestamp ?item.couponEndTimestamp:0}}</view>
           </view>
         </view>
       </view>
       
-      
+      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
     </view>
 </view>
 

pages/luckDraw/profile.wxss

@@ -181,4 +181,12 @@
   color: #443E5B;
   line-height: 32rpx;
   margin-left: 48rpx;
+}
+
+.no_result {
+  font-size: 24rpx;
+  color: #B1B1B1;
+  text-align: center;
+  line-height: 100rpx;
+  font-weight: 1000;
 }