样式调整

api/integralinfo.js

@@ -32,10 +32,14 @@ class Integralinfo extends request {
                           catchErrorFunc(res?.data)
                       }
                   } else {
+                    console.log(res?.data?.msg);
+                    if(typeof(res?.data?.msg)==undefined) {
                       wx.showToast({
-                          title: res?.data?.msg,
-                          icon: "none"
-                      })
+                        title: res?.data?.msg,
+                        icon: "none"
+                    })
+                    }
+                    
                   }
                   //其它错误，提示用户错误信息
                   if (this._errorHandler != null) {

pages/integral/integral.js

@@ -51,6 +51,7 @@ Page({
         title: '',
         status: false
     },
+    isIphoneX:false,
   },
 
   /**
@@ -81,6 +82,10 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
+      let _self = this;
+      this.setData({
+        isIphoneX:_self.isIphone()
+      })
     this.getBannerList()
     if(getMobileCache() != ''){
         Integralinfo.getBalance({
@@ -111,6 +116,21 @@ Page({
   },
 
   /**
+   * 判断是否是iphone
+   */
+  isIphone() {
+    let isIphone = false
+    wx.getSystemInfo({
+      success: function(res) {
+        if (res.model.indexOf('iPhone') >= 0) {
+          isIphone = true;
+        }
+      }
+    })
+    return isIphone
+  },
+
+  /**
    * 生命周期函数--监听页面隐藏
    */
   onHide: function () {

pages/integral/integral.wxml

@@ -1,190 +1,193 @@
 <!--pages/integral/integral.wxml-->
-<view class="integral-top flex-column">
-  <swiper class="integral-banner" autoplay="true" indicator-dots="true" wx:if="{{phone === '********'}}">
-    <block wx:for="{{bannerList}}" wx:key="key" data-id="{{item.id}}">
-      <swiper-item>
-        <image class="head-follow" src="{{item.image}}"></image>
-      </swiper-item>
-    </block>
-  </swiper>
-  <view class="integral-banner query" wx:if="{{phone !== '********'}}">
-    <view class="query-unlogin">
-      <view class="query-top">
-        <view class="query-avatar-info" :style="{{phone !== '********'}} ? 'padding-top: 0upx;' : 'padding-top: 28upx;'">
-          <view class="query-phone-hide">
-            {{phone}}
-            <!-- <text style="font-size: 14px;margin-left: 8px;">换号</text> -->
+<view style="box-sizing:border-box;display: block;">
+  <view class="integral-top flex-column">
+    <swiper class="integral-banner" autoplay="true" indicator-dots="true" wx:if="{{phone === '********'}}">
+      <block wx:for="{{bannerList}}" wx:key="key" data-id="{{item.id}}">
+        <swiper-item>
+          <image class="head-follow" src="{{item.image}}"></image>
+        </swiper-item>
+      </block>
+    </swiper>
+    <view class="integral-banner query" wx:if="{{phone !== '********'}}">
+      <view class="query-unlogin">
+        <view class="query-top">
+          <view class="query-avatar-info" :style="{{phone !== '********'}} ? 'padding-top: 0upx;' : 'padding-top: 28upx;'">
+            <view class="query-phone-hide">
+              {{phone}}
+              <!-- <text style="font-size: 14px;margin-left: 8px;">换号</text> -->
+            </view>
           </view>
-        </view>
-        <view class="query-click-column">
-          <view class="query-check-score" wx:if="{{phone === '********'}}">
-            查询积分
+          <view class="query-click-column">
+            <view class="query-check-score" wx:if="{{phone === '********'}}">
+              查询积分
+            </view>
           </view>
         </view>
-      </view>
-      <view class="query-integral" wx:if="{{phone !== '********'}}">
-        <view class="query-integral-text"><text>我的移动积分</text></view>
-        <view class="query-integral-num">{{integralNum}}</view>
-        <text style="padding-left: 16rpx;font-size: 32rpx;" class="query-iconfont query-iconshuaxin" catchtap="shuaxinClick">刷新</text>
+        <view class="query-integral" wx:if="{{phone !== '********'}}">
+          <view class="query-integral-text"><text>我的移动积分</text></view>
+          <view class="query-integral-num">{{integralNum}}</view>
+          <text style="padding-left: 16rpx;font-size: 32rpx;" class="query-iconfont query-iconshuaxin" catchtap="shuaxinClick">刷新</text>
+        </view>
       </view>
     </view>
-  </view>
 
-  <!-- 我的卡券 -->
-  <view class="my-card" wx:if="{{phone !== '********'}}" catchtap="toExchange">
-    <view class="card-content">
-      <text>我的兑换</text>
+    <!-- 我的卡券 -->
+    <view class="my-card" wx:if="{{phone !== '********'}}" catchtap="toExchange">
+      <view class="card-content">
+        <text>我的兑换</text>
+      </view>
     </view>
   </view>
-</view>
-<view class="exchange-style">
-  <view class="exchange-text">免费兑换</view>
-</view>
-<!--优惠券 -->
-<view class="integral-list">
-  <view class="list-item flex-row" wx:for="{{couponList}}" wx:key="key" data-id="{{item.id}}" wx:for-index="idx">
-    <image class="item-img" src="{{item.image}}"></image>
-    <view class="content">
-      <view class="content-title over-ellipsis-two">
-        <text>{{item.name}}</text>
-      </view>
-      <view class="content-details">
-        <text wx:if="{{phone !== '********'}}">{{item.integral}} 移动积分</text>
+  <view class="exchange-style">
+    <view class="exchange-text">免费兑换</view>
+  </view>
+  <!--优惠券 -->
+  <view class="integral-list">
+    <view class="list-item flex-row" wx:for="{{couponList}}" wx:key="key" data-id="{{item.id}}" wx:for-index="idx">
+      <image class="item-img" src="{{item.image}}"></image>
+      <view class="content">
+        <view class="content-title over-ellipsis-two">
+          <text>{{item.name}}</text>
+        </view>
+        <view class="content-details">
+          <text wx:if="{{phone !== '********'}}">{{item.integral}} 移动积分</text>
+        </view>
+        <view class="content-details" catchtap="detailsClick" data-info="{{item}}">
+          <text>商品详情 ></text>
+        </view>
       </view>
-      <view class="content-details" catchtap="detailsClick" data-info="{{item}}">
-        <text>商品详情 ></text>
+      <view class="receive-style flex-row" wx:if="{{phone !== '********'}}">
+        <view class="{{isIphoneX?'num-reduce-app':'num-reduce'}}" catchtap="reduceClick" data-index="{{idx}}" hidden="{{item.quantity <= 0}}">-</view>
+        <view class="num-displayNumn">
+          <view hidden="{{item.quantity <= 0}}">{{item.quantity}}</view>
+        </view>
+        <view class="{{isIphoneX?'num-add-app':'num-add'}}" catchtap="addClick" data-index="{{idx}}">+</view>
       </view>
-    </view>
-    <view class="receive-style flex-row" wx:if="{{phone !== '********'}}">
-      <view class="num-reduce" catchtap="reduceClick" data-index="{{idx}}" hidden="{{item.quantity <= 0}}">-</view>
-      <view class="num-displayNumn">
-        <view hidden="{{item.quantity <= 0}}">{{item.quantity}}</view>
+      <view class="receive-style" wx:if="{{phone === '********'}}">
+        <button class="receive-button" type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">立即领取</button>
       </view>
-      <view class="num-add" catchtap="addClick" data-index="{{idx}}">+</view>
     </view>
-    <view class="receive-style" wx:if="{{phone === '********'}}">
-      <button class="receive-button" type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">立即领取</button>
-    </view>
-  </view>
-</view>
-
-<!-- 底部结算 -->
-<view class="receive-now">
-  <view class="receive-count receive-info">
-    <text>合计：</text>
-    <text>{{total}}</text>
-    <text>积分</text>
   </view>
-  <view class="receive-info">
-    <button wx:if="{{phone === '********'}}" type="default" hover-class="navigator-hover" class="receive-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">立即领取</button>
-    <button wx:if="{{phone !== '********'}}" type="default" hover-class="navigator-hover" class="receive-btn" catchtap="paymentClick">立即免费兑换</button>
-  </view>
-</view>
+  <view class="list-bottom"></view>
 
-<!-- 弹出框背景黑化 -->
-<view class="background-style" wx:if="{{bgStatus}}" catchtap="hideModal"></view>
-<!-- 弹出框 -->
-<view animation="{{animationData}}" class="commodity_attr_box">
-  <view class="eject-close">
-    <text class="eject-iconfont eject-iconguanbi1"></text>
-  </view>
-  <view class="eject-commodity">
-    <view class="eject-img">
-      <image src="{{integralIngo.image}}" mode="" class="eject-image"></image>
+  <!-- 底部结算 -->
+  <view class="receive-now">
+    <view class="receive-count receive-info">
+      <text>合计：</text>
+      <text>{{total}}</text>
+      <text>积分</text>
     </view>
-    <view class="eject-text">
-      <view class="eject-text-title">
-        <text>{{integralIngo.name}}</text>
-      </view>
-      <view class="eject-text-integral">
-        <text>{{integralIngo.integral}} 移动积分</text>
-      </view>
+    <view class="receive-info">
+      <button wx:if="{{phone === '********'}}" type="default" hover-class="navigator-hover" class="receive-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">立即领取</button>
+      <button wx:if="{{phone !== '********'}}" type="default" hover-class="navigator-hover" class="receive-btn" catchtap="paymentClick">立即免费兑换</button>
     </view>
   </view>
-  <view class="eject-explain">
-    <view class="eject-explain-title">
-      <text>商品详情：</text>
-    </view>
-    <view class="eject-explain-content">
-      <scroll-view scroll-top="0" scroll-y="true" style="height: 550rpx;">
-        <view wx:for="{{integralIngo.detailArr}}" wx:key="key" wx:if="{{integralIngo.detail_type == 0}}">
-          {{item}}
+
+  <!-- 弹出框背景黑化 -->
+  <view class="background-style" wx:if="{{bgStatus}}" catchtap="hideModal"></view>
+  <!-- 弹出框 -->
+  <view animation="{{animationData}}" class="commodity_attr_box">
+    <view class="eject-close">
+      <text class="eject-iconfont eject-iconguanbi1"></text>
+    </view>
+    <view class="eject-commodity">
+      <view class="eject-img">
+        <image src="{{integralIngo.image}}" mode="" class="eject-image"></image>
+      </view>
+      <view class="eject-text">
+        <view class="eject-text-title">
+          <text>{{integralIngo.name}}</text>
         </view>
-        <view wx:if="{{integralIngo.detail_type == 1}}" style="width: 100%;height: 100%;">
-          <image style="width: 100%;height: 100%;" src="{{integralIngo.detailArr}}" mode="widthFix"></image>
+        <view class="eject-text-integral">
+          <text>{{integralIngo.integral}} 移动积分</text>
         </view>
-      </scroll-view>
+      </view>
+    </view>
+    <view class="eject-explain">
+      <view class="eject-explain-title">
+        <text>商品详情：</text>
+      </view>
+      <view class="eject-explain-content">
+        <scroll-view scroll-top="0" scroll-y="true" style="height: 550rpx;">
+          <view wx:for="{{integralIngo.detailArr}}" wx:key="key" wx:if="{{integralIngo.detail_type == 0}}">
+            {{item}}
+          </view>
+          <view wx:if="{{integralIngo.detail_type == 1}}" style="width: 100%;height: 100%;">
+            <image style="width: 100%;height: 100%;" src="{{integralIngo.detailArr}}" mode="widthFix"></image>
+          </view>
+        </scroll-view>
+      </view>
     </view>
   </view>
-</view>
 
-<!-- 查询积分弹出框 -->
-<view class="score-integral" wx:if="{{scorePhone}}">
-  <view class="score-title">
-    <text>查询移动积分</text>
-  </view>
-  <view class="score-phone">
-    <input class="score-input" type="number" model:value="{{setPhone}}" focus="true" maxlength="11" placeholder="请输入手机号码" />
-  </view>
-  <view class="score-btn">
-    <view class="score-cancel">
-      <button class="score-button cancel-button" type="default" hover-class="navigator-hover" catchtap="hideModal">取 消</button>
+  <!-- 查询积分弹出框 -->
+  <view class="score-integral" wx:if="{{scorePhone}}">
+    <view class="score-title">
+      <text>查询移动积分</text>
     </view>
-    <view class="score-complete">
-      <button class="score-button complete-button" type="default" hover-class="navigator-hover" catchtap="getphoneClick">查
-        询</button>
+    <view class="score-phone">
+      <input class="score-input" type="number" model:value="{{setPhone}}" focus="true" maxlength="11" placeholder="请输入手机号码" />
+    </view>
+    <view class="score-btn">
+      <view class="score-cancel">
+        <button class="score-button cancel-button" type="default" hover-class="navigator-hover" catchtap="hideModal">取 消</button>
+      </view>
+      <view class="score-complete">
+        <button class="score-button complete-button" type="default" hover-class="navigator-hover" catchtap="getphoneClick">查
+          询</button>
+      </view>
     </view>
   </view>
-</view>
-
-<!-- 查询中等待效果框 -->
-<view class="score-integral" wx:if="{{loading}}">
-  <view class="loading-bg-img">
-    <image class="loading-bg-image" src="../../images/logo.png" mode=""></image>
-  </view>
-  <view class="loading-title" style="margin: 30upx auto;">
-    <text class="iconfont iconphone"></text>
-    <text style="display:inline-block;color: #000000;">{{setPhone}}</text>
-  </view>
-  <view class="loading-title">
-    <text style="display:inline-block;">中国移动官方授权积分查询</text>
-  </view>
-  <view class="loading">
-    <image class="loading-image" src="../../images/logo.png" mode=""></image>
-  </view>
-</view>
 
-<!-- 支付弹出框 -->
-<view class="payment" wx:if="{{paymentStatus}}">
-  <uni-steps active-color="rgb(250, 114, 0)" options="[{title: '移动积分兑换'}, {title: '输入验证码'}, {title: '兑换成功'}]" active="{{activeNum}}"></uni-steps>
-  <view class="payment-move" style="text-align: center;">
-    <view class="payment-code">
-      <view class="payment-code2">验证码已发送到</view>
-      <view class="payment-code3"><text class="payment-iconfont payment-iconphone payment-code3-text"></text>{{mobile}}</view>
-    </view>
-    <view class="payment-code-input" wx:if="{{activeNum === 0}}">
-      <text class="payment-iconfont payment-iconyanzhengma payment-code-input-text"></text>
-      <input type="payment-number" model:value="{{active1code}}" focus="true" maxlength="6" placeholder="输入6位数验证码" />
+  <!-- 查询中等待效果框 -->
+  <view class="score-integral" wx:if="{{loading}}">
+    <view class="loading-bg-img">
+      <image class="loading-bg-image" src="../../images/logo.png" mode=""></image>
     </view>
-    <view class="payment-code-input" wx:if="{{activeNum === 1}}">
-      <text class="payment-iconfont payment-iconyanzhengma payment-code-input-text"></text>
-      <input type="payment-number"  model:value="{{active2code}}" focus="true" maxlength="6" placeholder="输入6位数验证码" />
+    <view class="loading-title" style="margin: 30upx auto;">
+      <text class="iconfont iconphone"></text>
+      <text style="display:inline-block;color: #000000;">{{setPhone}}</text>
     </view>
-    <view class="payment-code-btn">
-      <button class="payment-button" type="payment-default" hover-class="navigator-hover" catchtap="nextCodeClick">确
-        定</button>
+    <view class="loading-title">
+      <text style="display:inline-block;">中国移动官方授权积分查询</text>
     </view>
-    <view class="payment-refresh">
-      <text catchtap="getCodeClick">{{codeName}}</text>
+    <view class="loading">
+      <image class="loading-image" src="../../images/logo.png" mode=""></image>
     </view>
   </view>
-</view>
 
-<view class="showToast" wx:if="{{showToastObj.status}}">
-  <view class="showToast-icon">
-    <text class="showToast-iconfont" class="showToastObj.icon"></text>
+  <!-- 支付弹出框 -->
+  <view class="payment" wx:if="{{paymentStatus}}">
+    <uni-steps active-color="rgb(250, 114, 0)" options="[{title: '移动积分兑换'}, {title: '输入验证码'}, {title: '兑换成功'}]" active="{{activeNum}}"></uni-steps>
+    <view class="payment-move" style="text-align: center;">
+      <view class="payment-code">
+        <view class="payment-code2">验证码已发送到</view>
+        <view class="payment-code3"><text class="payment-iconfont payment-iconphone payment-code3-text"></text>{{mobile}}</view>
+      </view>
+      <view class="payment-code-input" wx:if="{{activeNum === 0}}">
+        <text class="payment-iconfont payment-iconyanzhengma payment-code-input-text"></text>
+        <input type="payment-number" model:value="{{active1code}}" focus="true" maxlength="6" placeholder="输入6位数验证码" />
+      </view>
+      <view class="payment-code-input" wx:if="{{activeNum === 1}}">
+        <text class="payment-iconfont payment-iconyanzhengma payment-code-input-text"></text>
+        <input type="payment-number" model:value="{{active2code}}" focus="true" maxlength="6" placeholder="输入6位数验证码" />
+      </view>
+      <view class="payment-code-btn">
+        <button class="payment-button" type="payment-default" hover-class="navigator-hover" catchtap="nextCodeClick">确
+          定</button>
+      </view>
+      <view class="payment-refresh">
+        <text catchtap="getCodeClick">{{codeName}}</text>
+      </view>
+    </view>
   </view>
-  <view class="showToast-title">
-    <text>{{showToastObj.title}}</text>
+
+  <view class="showToast" wx:if="{{showToastObj.status}}">
+    <view class="showToast-icon">
+      <text class="showToast-iconfont" class="showToastObj.icon"></text>
+    </view>
+    <view class="showToast-title">
+      <text>{{showToastObj.title}}</text>
+    </view>
   </view>
 </view>

pages/integral/integral.wxss

@@ -26,7 +26,7 @@ page {
 .integral-banner {
   width: 720rpx;
   height: 256rpx;
-  border-radius: 8px;
+  border-radius: 16rpx;
   overflow: hidden;
 }
 
@@ -36,14 +36,14 @@ page {
 }
 
 .exchange-style {
-  height: 41px;
-  line-height: 41px;
+  height: 82rpx;
+  line-height: 82rpx;
 }
 
 .exchange-text {
-  font-size: 16px;
+  font-size: 32rpx;
   font-weight: bold;
-  padding-left: 12px;
+  padding-left: 24rpx;
 }
 
 .integral-list {
@@ -140,7 +140,7 @@ page {
 
 .my-card {
   position: absolute;
-  right: -2rpx;
+  right: 0;
   top: 30rpx;
   width: 120rpx;
   height: 50rpx;
@@ -462,10 +462,34 @@ page {
   text-align: center;
 }
 
+
+.num-reduce-app{
+  width: 50rpx;
+  height: 50rpx;
+  line-height: 44rpx;
+  color: #000000;
+  border: solid 2rpx;
+  border-radius: 26rpx;
+  font-size: 52rpx;
+  text-align: center;
+}
+
 .num-add {
-  width: 52rpx;
-  height: 52rpx;
-  line-height: 52rpx;
+  width: 52rpx !important;
+  height: 52rpx !important;
+  line-height: 52rpx !important;
+  background-color: rgb(255, 114, 0);
+  border: none;
+  border-radius: 26rpx;
+  color: #ffffff;
+  font-size: 50rpx;
+  text-align: center;
+}
+
+.num-add-app {
+  width: 52rpx !important;
+  height: 52rpx !important;
+  line-height: 44rpx !important;
   background-color: rgb(255, 114, 0);
   border: none;
   border-radius: 26rpx;
@@ -594,4 +618,9 @@ page {
 .showToast-title {
   color: white;
   padding: 0 40rpx;
+}
+
+.list-bottom{
+  width: 750rpx;
+  height: 150rpx;
 }