移动积分查询

api/integralinfo.js

@@ -73,6 +73,13 @@ class Integralinfo extends request {
     return this.postRequest(`${this.INT_URL}app/coupon/list`, params);
   }
 
+  /**
+   * 获取移动积分
+   */
+  static getBalance(params) {
+    return this.postRequest(`${this.INT_URL}app/cmcc/balance`, params);
+  }
+
        /**
    * 创建订单
    */

pages/integral/integral.js

@@ -1,5 +1,6 @@
 // pages/integral/integral.js
 import Integralinfo from '../../api/integralinfo'
+import {getMobileCache, getPhoneNumberNew as getPhoneNumberSync} from '../../utils/user'
 Page({
 
   /**
@@ -19,13 +20,49 @@ Page({
     scorePhone: false,
     animationData: {},
     integralIngo:{},
+    loading: false,
+    setPhone: '',
+    current: '',
+    integralNum: 0,
+    phone: '********',
+    // phone: '15888282621',
+    mobile: '********',
+    paymentStatus: false,
+    paymentBgStatus: false,
+    activeNum: 0,
+    listTrue: [],
+    listStatus: false,
+    total: 0,
+    row: {},
+    codeName: '60s后重新获取',
+    codeTime: '',
+    active1obj: {
+        orderId: '',
+        order_no: '',
+        step: ''
+    },
+    active1code: '',
+    active2code: '',
+    tgid: '',
+    scene: '',
+    noClick: true,
+    showToastObj: {
+        icon: '',
+        title: '',
+        status: false
+    }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    var reg = /^(\d{3})\d{4}(\d{4})$/;
+    this.setData({
+        isLogin: getMobileCache() != '',
+        phone: getMobileCache() == ''?'********':getMobileCache().replace(reg, "$1****$2"),
+        setPhone: getMobileCache(),
+    })
   },
 
   /**
@@ -93,7 +130,7 @@ Page({
     })
 },
 
-getCouponList: function() {
+ getCouponList: function() {
     Integralinfo.getList({
         channelid: this.data.channelid,
 		shopid: this.data.shopid,
@@ -115,8 +152,7 @@ couponListView: function(data) {
         v.quantity = 0
         v.integral = v.price * v.ratio
     })
-    if (this.mobile != '********') {
-        let num = this.integralNum > 20000 ? 19999 : this.integralNum
+        let num = this.data.integralNum > 20000 ? 19999 : this.data.integralNum
         const arr = []
         for (let i = 0; i < data.length; i++) {
             data[i].quantity = parseInt(num / data[i].integral)
@@ -132,7 +168,6 @@ couponListView: function(data) {
             couponList: [...arr, ...data]
         })
     console.log(this.data.couponList)
-    }
  },
 // 点击标识点触发
 detailsClick(row) {
@@ -195,5 +230,214 @@ hideModal() {
         animationData: animation.export()
     })
 },
+
+/**授权手机号 */
+getPhoneNumber(e) {
+    getPhoneNumberSync(e, async () => {
+        console.log(e)
+        if (getMobileCache() == '') {
+        wx.showToast({
+            icon:'error',
+            title:'先查询移动积分'
+        })
+        setTimeout(()=>{
+            that.data.setPhone = ''
+            that.scoreClick()
+            wx.hideLoading()
+        },500)
+    } else {
+        var reg = /^(\d{3})\d{4}(\d{4})$/;
+        this.setData({
+            isLogin: true,
+            setPhone: getMobileCache(),
+            mobile: getMobileCache(),
+            phone: getMobileCache().replace(reg, "$1****$2")
+        })     
+        // console.log(this.data.setPhone)
+        // console.log(this.data.mobile)
+        // console.log(this.data.phone)
+        // this.getphoneClick()
+    }
+         
+    })
+  },
+
+// 查询积分
+scoreClick() {
+    this.setData({
+        bgStatus: true,
+        scorePhone: true,
+    })
+},
+
+// 查询积分
+getphoneClick() {
+    console.log(this.data.setPhone)
+    if (!(/^1[3456789]\d{9}$/.test(this.data.setPhone))) {
+        wx.showToast({
+            title: '填写正确手机号',
+            icon: 'error',
+            duration: 2000
+        });
+    } else if (this.data.setPhone != '') {
+        // wx.showLoading({
+        //     title: '加载中'
+        // });
+        Integralinfo.getBalance({
+            mobile: this.data.setPhone, 
+            callbackUrl: '../integral/integral.wxml',
+            fingerprint: '',
+            sessionid: '',
+            shopid: 2,
+            type: 'wx',
+        }).then(arr => {
+            console.log(arr)
+            wx.hideLoading();
+            if (arr.code === '0000') {
+                this.data.integralNum = arr.data
+                var reg = /^(\d{3})\d{4}(\d{4})$/;
+                this.data.mobile = this.data.setPhone
+                this.data.setPhone = this.data.setPhone.replace(reg, "$1****$2");
+                let response = {
+                    points: arr.data,
+                    outTokenId: this.data.setPhone + '_out'
+                }
+                App.globalData.AppShow = response
+                this.hideModal()
+                this.getCouponList()
+                wx.pageScrollTo({
+                    scrollTop: 0
+                });
+                let dateNum = Math.round(new Date().getTime() / 1000).toString()
+                if (wx.getStorageSync('orderDetails') != '' && this.data.mobile === JSON.parse(wx
+                        .getStorageSync('orderDetails')).mobile) {
+                    if (dateNum - JSON.parse(wx.getStorageSync('orderDetails')).date <= 120) {
+                        const data = JSON.parse(wx.getStorageSync('orderDetails'))
+                        if (dateNum - data.date < 60) {
+                            let time = dateNum - data.date
+                            this.codeName = 60 - time + 's后重新获取'
+                            this.codeSetInterval(60 - time)
+                        } else {
+                            this.codeName = '重新获取验证码'
+                        }
+                        this.data.paymentStatus = true
+                        this.data.paymentBgStatus = true
+                        this.data.active1code = ''
+                        this.data.active2code = ''
+                        this.data.active1obj = data
+                        if (data.step === 1) {
+                            this.data.activeNum = 1
+                        } else if (data.step === 2) {
+                            this.data.activeNum = 0
+                        }
+                    }
+                }
+            } else {
+                this.data.loading = true
+                this.data.bgStatus = true
+                setTimeout(() => {
+                    // #ifdef H5
+                    window.location.href = arr.message;
+                    // #endif
+
+                    // #ifdef MP-WEIXIN
+                    const version = wx.getSystemInfoSync().SDKVersion
+
+                    if (this.compareVersion(version, '2.20.1') >= 0) {
+                        wx.openEmbeddedMiniProgram({
+                            appId: arr.data.appId,
+                            path: arr.data.path,
+                            extraData: arr.data.extraData,
+                            success(res) {
+                                // 打开成功
+                            },
+                            fail() {}
+                        })
+                    } else {
+                        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
+                        wx.navigateToMiniProgram({
+                            appId: arr.data.appId,
+                            path: arr.data.path,
+                            extraData: arr.data.extraData,
+                            success(res) {
+                                // 打开成功
+                            },
+                            fail() {
+
+                            }
+                        })
+                    }
+                    // #endif
+                    this.hideModal()
+                    this.loading = false
+                }, 4000)
+            }
+        })
+    }
+},
+
+// 商品数量减少按钮
+reduceClick(e) {
+    console.log(e.currentTarget.dataset.index)
+    let index = e.currentTarget.dataset.index
+    this.data.couponList[index].quantity--
+    this.data.total -= parseInt(this.data.couponList[index].integral)
+},
+// 商品数量添加按钮
+addClick(e) {
+   let index = e.currentTarget.dataset.index
+    if (this.data.phone !== '********') {
+        if (this.data.total + parseInt(this.data.couponList[index].integral) > 20000) {
+            wx.showToast({
+                title: '单笔限额两万分',
+                icon: 'error',
+                duration: 2000
+            });
+        } else if ((this.data.integralNum - this.data.total) >= this.data.couponList[index].integral) {
+            this.data.couponList[index].quantity++
+            this.data.total += parseInt(this.data.couponList[index].integral)
+        } else {
+            wx.showToast({
+                title: '积分不足',
+                icon: 'error',
+                duration: 2000
+            });
+        }
+
+    } else {
+        wx.showToast({
+            title: '先查询移动积分',
+            icon: 'error',
+            duration: 1000
+        });
+        setTimeout(() => {
+            this.scoreClick()
+        }, 1000)
+    }
+},
+/** 刷新 */
+shuaxinClick() {
+    Integralinfo.getBalance({
+        mobile: this.data.setPhone, 
+        callbackUrl: '../integral/integral.wxml',
+        fingerprint: '',
+        sessionid: '',
+        shopid: 2,
+        type: 'wx',
+    }).then(arr => {
+        if (arr.code === '0000') {
+            wx.hideLoading();
+            wx.showToast({
+                title: '查询成功!',
+                icon: 'success',
+                duration: 1000
+            });
+            this.data.integralNum = arr.data
+            var reg = /^(\d{3})\d{4}(\d{4})$/;
+            this.data.setPhone = this.data.mobile
+            this.data.phone = this.data.setPhone.replace(reg, "$1****$2");
+        }
+    })
+},
        
 })

pages/integral/integral.wxml

@@ -1,12 +1,34 @@
 <!--pages/integral/integral.wxml-->
 <view class="integral-top">
-  <swiper class="integral-banner" autoplay="true" indicator-dots="true">
+  <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 class="query-click-column">
+          <view class="query-check-score" wx:if="{{phone === '********'}}">
+            查询积分
+          </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>
+    </view>
+  </view>
 
   <!-- 我的卡券 -->
   <view class="my-card">
@@ -18,24 +40,30 @@
 <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}}">
+  <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>商品详情 ></text> -->
+        <text wx:if="{{phone !== '********'}}">{{item.integral}} 移动积分</text>
       </view>
       <view class="content-details" catchtap="detailsClick" data-info="{{item}}">
         <text>商品详情 ></text>
       </view>
     </view>
-    <view class="receive-style">
-      <view class="receive-button">
-        <view class="button-text">立即领取</view>
+    <view class="receive-style flex-row" wx:if="{{phone !== '********'}}">
+      <view class="num-reduce flex-colum" 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="num-add flex-column" 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>
@@ -48,7 +76,7 @@
     <text>积分</text>
   </view>
   <view class="receive-info">
-    <button v-if="phone === '********'" type="default" hover-class="navigator-hover" class="receive-btn" open-type="getPhoneNumber">立即领取</button>
+    <button v-if="phone === '********'" type="default" hover-class="navigator-hover" class="receive-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">立即领取</button>
   </view>
 </view>
 
@@ -87,4 +115,40 @@
       </scroll-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="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 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>

pages/integral/integral.wxss

@@ -1,9 +1,10 @@
 /* pages/integral/integral.wxss */
-page{
+page {
   background: #f5f5f5;
 }
+
 /* 垂直方向布局，水平居中 **/
-.flex-column{
+.flex-column {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
@@ -11,47 +12,47 @@ page{
 }
 
 /* 水平方向布局，垂直居中 **/
-.flex-row{
+.flex-row {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
 }
 
-.integral-top{
+.integral-top {
   position: relative;
 }
 
-.integral-banner{
+.integral-banner {
   width: 750rpx;
   height: 256rpx;
   border-radius: 8px;
   overflow: hidden;
 }
 
-.head-follow{
+.head-follow {
   width: 100%;
   height: 100%;
 }
 
-.exchange-style{
+.exchange-style {
   height: 41px;
   line-height: 41px;
 }
 
-.exchange-text{
+.exchange-text {
   font-size: 16px;
   font-weight: bold;
   padding-left: 12px;
 }
 
-.integral-list{
+.integral-list {
   width: 750rpx;
   border-radius: 16rpx;
   margin-bottom: 124rpx;
 }
 
-.list-item{
+.list-item {
   width: 750rpx;
   height: 208rpx;
   padding: 24rpx 12rpx;
@@ -60,54 +61,58 @@ page{
   box-sizing: border-box;
 }
 
-.item-img{
+.item-img {
   width: 166rpx;
   height: 166rpx;
   border: 2rpx solid #F2F6FC;
 }
 
-.content{
+.content {
   width: 380rpx;
   margin-left: 20rpx;
 }
 
-.content-title{
+.content-title {
   height: 90rpx;
   color: #333333;
   font-size: 32rpx;
   font-weight: 600;
 }
 
-.content-details{
+.content-details {
   height: 40rpx;
   color: #b1b1b1;
   font-size: 24rpx;
   font-weight: 600;
 }
 
-.receive-style{
+.receive-style {
   width: 170rpx;
   height: 100%;
+  justify-content: space-between;
 }
 
-.receive-button{
-  border-radius: 30rpx;
-  border: none;
-  height: 56rpx;
-  line-height: 56rpx;
-  background: rgba(255, 0, 0, 0.8);
-  box-shadow: rgb(221 221 221) -1px -1px 0px, rgb(51 51 51) 1px 1px 0px; 
-  text-align: center;
-  margin-top: 100rpx;
+.receive-button {
+  width: 170rpx !important;
+  border-radius: 30rpx !important;
+  border: none !important;
+  height: 56rpx !important;
+  line-height: 56rpx !important;
+  background: rgba(255, 0, 0, 0.8) !important;
+  box-shadow: rgb(221 221 221) -1px -1px 0px, rgb(51 51 51) 1px 1px 0px !important;
+  margin-top: 100rpx !important;
+  font-size: 28rpx !important;
+  padding: 0 !important;
+  color: #ffffff !important;
 }
 
-.button-text{
+.button-text {
   color: white;
   font-size: 28rpx;
   font-weight: bold;
 }
 
-.receive-now{
+.receive-now {
   width: 750rpx;
   height: 120rpx;
   background-color: rgba(255, 255, 255, 1);
@@ -118,14 +123,14 @@ page{
   display: flex;
 }
 
-.receive-info{
+.receive-info {
   width: 50%;
   height: 120rpx;
   line-height: 120rpx;
   margin: 0 auto;
 }
 
-.receive-count{
+.receive-count {
   padding-left: 24rpx;
   box-sizing: border-box;
   font-weight: 600;
@@ -133,7 +138,7 @@ page{
   color: #333333;
 }
 
-.my-card{
+.my-card {
   position: absolute;
   right: -2rpx;
   top: 0;
@@ -148,7 +153,7 @@ page{
   font-size: 22rpx;
 }
 
-.receive-btn{
+.receive-btn {
   width: 100% !important;
   height: 120rpx !important;
   line-height: 80rpx !important;
@@ -159,7 +164,7 @@ page{
   border: none !important;
 }
 
-.background-style{
+.background-style {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -168,7 +173,7 @@ page{
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.commodity_attr_box{
+.commodity_attr_box {
   position: fixed;
   height: 1000rpx;
   left: 0;
@@ -185,6 +190,7 @@ page{
 .eject-close {
   text-align: right;
 }
+
 .eject-text {
   font-size: 52rpx;
   color: rgb(153, 153, 153);
@@ -193,11 +199,13 @@ page{
 .eject-commodity {
   display: flex;
 }
+
 .eject-img {
   width: 168rpx;
   height: 168rpx;
   border: 2rpx solid #F2F6FC;
 }
+
 .eject-image {
   width: 100%;
   height: 100%;
@@ -208,6 +216,7 @@ page{
   height: 168rpx;
   line-height: 84rpx;
 }
+
 .eject-text-title {
   color: rgb(51, 51, 51);
   font-size: 34rpx;
@@ -224,6 +233,242 @@ page{
   color: rgb(153, 153, 153);
   font-size: 28rpx;
 }
+
 .eject-explain-title {
   margin: 40rpx 0;
+}
+
+.score-integral {
+  position: fixed;
+  width: 540rpx;
+  /* height: 400upx; */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border-radius: 14rpx;
+  overflow: hidden;
+}
+
+.score-title {
+  text-align: center;
+  font-size: 34rpx;
+  color: #333333;
+  font-weight: 550;
+  height: 100rpx;
+  line-height: 100rpx;
+}
+
+.score-phone {
+  height: 200rpx;
+  line-height: 200rpx;
+  padding-top: 60rpx;
+  box-sizing: border-box;
+}
+
+.score-input {
+  width: 80%;
+  height: 80rpx;
+  background-color: #f5f5f5;
+  margin: 0 auto;
+  padding: 0 20rpx;
+  border-radius: 10rpx;
+  color: #555555;
+}
+
+.score-btn {
+  height: 100rpx;
+  line-height: 100rpx;
+  display: flex;
+}
+
+.score-cancel,
+.score-complete {
+  width: 50%;
+}
+
+.score-button {
+  width: 80% !important;
+  font-size: 28rpx !important;
+  height: 80rpx !important;
+  line-height: 80rpx !important;
+  padding: 0;
+}
+
+.cancel-button {
+  background-color: #FFFFFF !important;
+  color: black !important;
+  border: solid 2rpx #555555;
+}
+
+.complete-button {
+  background-color: #fa7200 !important;
+  color: white !important;
+}
+
+.loading-bg-img {
+  width: 100%;
+  height: 120rpx;
+}
+
+.loading-bg-image {
+  width: 100%;
+  height: 100%;
+}
+
+.loading {
+  width: 230rpx;
+  height: 140rpx;
+  margin: 0 auto;
+}
+
+.loading-image {
+  width: 100%;
+  height: 100%;
+}
+
+.loading-title {
+  width: 480rpx;
+  margin: 20rpx auto;
+  text-align: center;
+  font-weight: bold;
+  font-size: 40rpx;
+  color: #999999;
+}
+
+.query {
+  display: block;
+  position: relative;
+  border-radius: 16 rpx;
+  background: linear-gradient(270deg, #644c40, #826756);
+  height: 198rpx;
+}
+
+.query-unlogin {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 240 rpx;
+  justify-content: space-between;
+}
+
+.query-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.query-avatar-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100rpx;
+  padding-left: 24rpx;
+  width: 100%;
+}
+
+.query-phone-hide {
+  color: rgb(255, 255, 255);
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.query-click-column {
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  margin-top: 16rpx;
+  align-items: flex-end;
+  margin-right: 20rpx;
+}
+
+.query-record {
+  width: 140rpx;
+  height: 44rpx;
+  color: rgb(255, 255, 255);
+  border: 2rpx solid white;
+  text-align: center;
+  border-radius: 22rpx;
+  font-size: 22rpx;
+  font-weight: bold;
+  padding-top: 14rpx;
+}
+
+.query-check-score {
+  display: flex;
+  width: 186rpx;
+  height: 64rpx;
+  background: linear-gradient(0deg, #fff8f3, #e5d3cb);
+  border-radius: 34rpx;
+  color: #795f4f;
+  font-size: 28rpx;
+  font-weight: 600;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30rpx;
+}
+
+.query-integral {
+  padding-left: 22rpx;
+  display: flex;
+  color: white;
+  font-weight: bold;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+.query-integral-num {
+  font-size: 56rpx;
+}
+
+.query-integral-text {
+  padding-right: 12rpx;
+  line-height: 60rpx;
+  font-size: 32rpx;
+}
+
+.query-below {
+  display: flex;
+  flex-direction: row;
+  padding-right: 20 rpx;
+  margin-bottom: 20 rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+.query-tips-text {
+  margin-left: 24rpx;
+  color: rgb(255, 255, 255);
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
+.query-tips-click {
+  color: rgb(255, 255, 255);
+  font-size: 24rpx;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.num-reduce {
+  width: 50rpx;
+  height: 50rpx;
+  color: #000000;
+  border: solid 2rpx;
+  border-radius: 26rpx;
+  font-size: 52rpx;
+  text-align: center;
+  justify-content: center;
+}
+
+.num-add {
+  width: 52rpx;
+  height: 52rpx;
+  background-color: rgb(255, 114, 0);
+  border: none;
+  border-radius: 26rpx;
+  color: #ffffff;
+  font-size: 50rpx;
+  justify-content: center;
 }