Bladeren bron

字段显示修改 待支付页面

MS-IOHQJGHXZHQD\Administrator 5 maanden geleden
bovenliggende
commit
29988e3e51

+ 1 - 1
src/points/components/product-list/product-list.vue

@@ -235,7 +235,7 @@ export default {
     // 处理兑换
     // 处理兑换
     handleExchange(product) {
     handleExchange(product) {
       uni.navigateTo({
       uni.navigateTo({
-        url: `/points/productDetails/index?id=19`
+        url: `/points/productDetails/index?id=${product.id}`
       });
       });
       console.log('兑换商品:', product)
       console.log('兑换商品:', product)
     },
     },

+ 8 - 1
src/points/order/orderList.vue

@@ -67,7 +67,14 @@ export default {
       this.page++
       this.page++
       this.getListOrder(true)
       this.getListOrder(true)
     },
     },
-    viewDetail(order){
+    viewDetail(order) {
+      //payStatus": 0 未支付, 1已支付
+      if (order.payStatus==0) { //跳转到待支付页面
+        uni.navigateTo({
+          url: `/points/productDetails/pendingPayment?orderNo=${order.orderNo}`
+        });
+        return
+      }
       uni.navigateTo({
       uni.navigateTo({
         url: '/points/order/orderDetails?orderNo=' + order.orderNo,
         url: '/points/order/orderDetails?orderNo=' + order.orderNo,
       });
       });

+ 44 - 46
src/points/productDetails/index.vue

@@ -93,11 +93,11 @@
           <view class="title">
           <view class="title">
             兑换须知
             兑换须知
             <span style="position: absolute;right: 24rpx;">
             <span style="position: absolute;right: 24rpx;">
-              <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
-                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+              <!-- <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
+                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image> -->
             </span>
             </span>
           </view>
           </view>
-          <view class="text">
+          <view class="text" style="-webkit-line-clamp: 8;">
             1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个; <br>
             1、会员可凭上述积分兑换“广誉源会员定制玻璃杯”一个; <br>
             2、双层曲线杯身在隔热防烫的同时,让您的手掌体验一次美妙的抓握感; <br>
             2、双层曲线杯身在隔热防烫的同时,让您的手掌体验一次美妙的抓握感; <br>
             3、积分兑换商品不支持质量问题外的退换货服务,请您先确认后签收;<br>
             3、积分兑换商品不支持质量问题外的退换货服务,请您先确认后签收;<br>
@@ -105,12 +105,12 @@
           </view>
           </view>
         </view>
         </view>
         <!-- 平台须知 -->
         <!-- 平台须知 -->
-        <view class="niticeClass">
+        <view class="niticeClass" style="margin-bottom: 30rpx;">
           <view class="title">平台说明
           <view class="title">平台说明
 
 
             <span style="position: absolute;right: 24rpx;">
             <span style="position: absolute;right: 24rpx;">
-              <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
-                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+              <!-- <image style="width: 28rpx;height: 28rpx;" @click="clichFun"
+                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image> -->
             </span>
             </span>
 
 
           </view>
           </view>
@@ -214,6 +214,7 @@ export default {
     handleContentScroll(e) {
     handleContentScroll(e) {
       this.isTop = e.detail.scrollTop > 0
       this.isTop = e.detail.scrollTop > 0
     },
     },
+
     //账户余额
     //账户余额
     getinfo() {
     getinfo() {
       getInfo().then(res => {
       getInfo().then(res => {
@@ -288,12 +289,35 @@ export default {
             title: '请选择支付方式',
             title: '请选择支付方式',
             icon: 'none'
             icon: 'none'
           })
           })
-        } else if (this.selectPayMeth == 1) {
+          return
+        }
+        let params = {}
+        params.openId = uni.getStorageSync('wx_copenid');//用户openId
+        params.phone = this.defaultAddress.phone;//用户手机号
+        params.userName = this.defaultAddress.userName;//用户名
+        params.addressName = this.defaultAddress.address + this.defaultAddress.atlasAdd;//地图地址+详细地址
+        params.addressId = this.defaultAddress.id;//地址ID
+        params.productId = this.params.id;
+        params.name = this.params.name;
+        params.productMainImage = this.params.productMainImage;
+        params.skuId = this.selectedObj.skuId; //选中的SKU ID
+        params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
+        params.quantity = 1; //购买数量
+        params.payType = Number(this.selectPayMeth);//支付方式:1微信支付 2账户余额
+        params.freightAmount = this.params.freight; //运费
+        params.totalAmount = (this.selectedObj.priceMoney + (this.params.freight > 0 ? this.params.freight : 0));// 支付金额+运费=总金额
+        params.payAmount = this.selectedObj.priceMoney;// 支付金额
+        params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
+        params.buyerRemark = this.orderRemarks;//买家备注信息
+        console.log(params, 'params')
+        console.log(this.params, 'this.params')
+
+        if (this.selectPayMeth == 1) {
           //微信支付 
           //微信支付 
-          this.weixinPay()
+          this.weixinPay(params)
         } else if (this.selectPayMeth == 2) {
         } else if (this.selectPayMeth == 2) {
           //余额支付
           //余额支付
-          this.nowYuyue()
+          this.nowYuyue(params)
         }
         }
 
 
       } else {
       } else {
@@ -305,23 +329,7 @@ export default {
 
 
     },
     },
     //微信支付
     //微信支付
-    weixinPay() {
-      let params = {}
-      params.openId = uni.getStorageSync('wx_copenid');//用户openId
-      params.addressId = this.defaultAddress.id;//地址ID
-      params.productId = this.params.id;
-      params.name = this.params.name;
-      params.productMainImage = this.params.productMainImage;
-      params.skuId = this.selectedObj.index; //选中的SKU ID
-      params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
-      params.quantity = 1; //购买数量
-      params.payType = Number(this.selectPayMeth);//支付方式:1微信支付 2账户余额
-      params.freightAmount = this.params.freight; //运费
-      params.totalAmount = this.selectedObj.originPrice;// 总金额
-      params.payAmount = this.selectedObj.priceMoney;// 支付金额
-      params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
-      params.buyerRemark = this.orderRemarks;//买家备注信息
-      console.log(params, 'params')
+    weixinPay(params) {
       productOrderCreate(params).then(res => {
       productOrderCreate(params).then(res => {
         return
         return
         productOrderPay().then(res => {
         productOrderPay().then(res => {
@@ -383,7 +391,7 @@ export default {
       })
       })
     },
     },
     //账号余额支付
     //账号余额支付
-    nowYuyue() {
+    nowYuyue(params) {
       if (parseInt(this.dBalance) < parseInt(this.selectedObj.priceMoney)) {
       if (parseInt(this.dBalance) < parseInt(this.selectedObj.priceMoney)) {
         uni.showModal({
         uni.showModal({
           title: '账户余额不足',
           title: '账户余额不足',
@@ -397,22 +405,6 @@ export default {
           }
           }
         });
         });
       } else {
       } else {
-        let params = {}
-        params.openId = uni.getStorageSync('wx_copenid');//用户openId
-        params.addressId = this.defaultAddress.id;//地址ID
-        params.productId = this.params.id;
-        params.name = this.params.name;
-        params.productMainImage = this.params.productMainImage;
-        params.skuId = this.selectedObj.index; //选中的SKU ID
-        params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
-        params.quantity = 1; //购买数量
-        params.payType = Number(this.selectPayMeth);//支付方式:1微信支付 2账户余额
-        params.freightAmount = this.params.freight; //运费
-        params.totalAmount = this.selectedObj.originPrice;// 总金额
-        params.payAmount = this.selectedObj.priceMoney;// 支付金额
-        params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
-        params.buyerRemark = this.orderRemarks;//买家备注信息
-        console.log(params, 'params')
         productOrderCreate(params).then(res => {
         productOrderCreate(params).then(res => {
           return
           return
           productOrderPay().then(res => {
           productOrderPay().then(res => {
@@ -473,9 +465,13 @@ export default {
 .mainImame {
 .mainImame {
   height: 456rpx;
   height: 456rpx;
 }
 }
-::v-deep .u-popup{
-  .u-transition, .u-fade-enter-to, .u-fade-enter-active{
-    z-index: 999!important;
+
+::v-deep .u-popup {
+
+  .u-transition,
+  .u-fade-enter-to,
+  .u-fade-enter-active {
+    z-index: 999 !important;
   }
   }
 }
 }
 
 
@@ -498,6 +494,8 @@ export default {
   background-color: #F5F8F8;
   background-color: #F5F8F8;
   padding: 24rpx 32rpx 0 32rpx;
   padding: 24rpx 32rpx 0 32rpx;
   font-family: PingFang SC, PingFang SC;
   font-family: PingFang SC, PingFang SC;
+  margin-bottom: 150rpx;
+  border: 1px solid rgb(255, 255, 255);
 
 
   .firstRow {
   .firstRow {
     background-color: #fff;
     background-color: #fff;

+ 108 - 66
src/points/productDetails/pendingPayment.vue

@@ -10,18 +10,18 @@
             <view class="contentBox">
             <view class="contentBox">
                 <view class="remainingTime">
                 <view class="remainingTime">
                     {{ orderStatus }}
                     {{ orderStatus }}
+                    <text v-if="countdownText != '00:00'">{{ countdownText }}</text>
                 </view>
                 </view>
-                <view class="content">
+                <view class="content" v-if="orderInfo">
                     <view class="addressBox">
                     <view class="addressBox">
-                        <image style="width: 45rpx;height: 40rpx;" src="@/static/points/addressIcon.png" mode="">
+                        <image style="width: 40rpx;height: 40rpx;" src="@/static/points/addressIcon.png" mode="">
                         </image>
                         </image>
                         <view style="margin-left: 16rpx;">
                         <view style="margin-left: 16rpx;">
                             <view class="name">
                             <view class="name">
-                                张三 <text>
-                                    15032624563</text>
+                                {{ orderInfo.receiverName }} <text>{{ orderInfo.receiverPhone }}</text>
                             </view>
                             </view>
                             <view class="address">
                             <view class="address">
-                                山西省太原市小店区营盘街道某某小区1号楼1单元101
+                                {{ orderInfo.addressName }}
                             </view>
                             </view>
                         </view>
                         </view>
 
 
@@ -41,7 +41,7 @@
                                 style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
                                 style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
                                 <view class="productName">广誉源会员定制玻璃杯 </view>
                                 <view class="productName">广誉源会员定制玻璃杯 </view>
                                 <view class="spec">已选:大号,白色 </view>
                                 <view class="spec">已选:大号,白色 </view>
-                                <view class="price">实付价 ¥10元+1000积分 </view>
+                                <view class="price">实付价 ¥{{ orderInfo.payAmount }}元+{{ orderInfo.pointsUsed }}积分 </view>
 
 
                             </view>
                             </view>
                         </view>
                         </view>
@@ -51,49 +51,50 @@
                         </view>
                         </view>
                         <view class="shippingFee">
                         <view class="shippingFee">
                             <view class="text">运费</view>
                             <view class="text">运费</view>
-                            <view class="text">¥0</view>
+                            <view class="text">¥{{ orderInfo.freightAmount }}</view>
                         </view>
                         </view>
                         <view style="height: 2rpx;background-color: #f0f0f0;margin-top: 20rpx;"> </view>
                         <view style="height: 2rpx;background-color: #f0f0f0;margin-top: 20rpx;"> </view>
                         <view class="total">
                         <view class="total">
                             <text class="text">合计:</text>
                             <text class="text">合计:</text>
-                            <text class="price">¥ 10</text>
+                            <text class="price">¥ {{ orderInfo.totalAmount }}</text>
                         </view>
                         </view>
                     </view>
                     </view>
                     <view class="weiChect">
                     <view class="weiChect">
                         <view style="display: flex;">
                         <view style="display: flex;">
-                            <image v-if="payMeth == '1'" style="width: 40rpx;height: 40rpx;"
+                            <image v-if="orderInfo.payType == '1'" style="width: 40rpx;height: 40rpx;"
                                 src="@/static/points/weiXin.png" mode="">
                                 src="@/static/points/weiXin.png" mode="">
                             </image>
                             </image>
-                            <image v-if="payMeth == '2'" style="width: 40rpx;height: 40rpx;"
+                            <image v-if="orderInfo.payType == '2'" style="width: 40rpx;height: 40rpx;"
                                 src="@/static/points/yue.png" mode="">
                                 src="@/static/points/yue.png" mode="">
                             </image>
                             </image>
-                            <view class="text" style="color: #333;margin-left: 16rpx;">{{ payMeth == '1' ? '微信支付' :
+                            <view class="text" style="color: #333;margin-left: 16rpx;">{{ orderInfo.payType == '1' ?
+                                '微信支付' :
                                 '余额支付' }}
                                 '余额支付' }}
                             </view>
                             </view>
 
 
                         </view>
                         </view>
                         <view>
                         <view>
-                            <u-radio-group v-model="payMeth">
-                                <u-radio activeColor="#03C1B8 " :name=payMeth style="margin: 0;"></u-radio>
+                            <u-radio-group v-model="orderInfo.payType">
+                                <u-radio activeColor="#03C1B8 " :name=orderInfo.payType style="margin: 0;"></u-radio>
                             </u-radio-group>
                             </u-radio-group>
                         </view>
                         </view>
                     </view>
                     </view>
                     <view class="orderInfo">
                     <view class="orderInfo">
                         <view class="item">
                         <view class="item">
                             <view class="text">订单编号</view>
                             <view class="text">订单编号</view>
-                            <view class="text1">246453782748937746</view>
+                            <view class="text1">{{ orderInfo.orderNo }}</view>
                         </view>
                         </view>
                         <view class="item">
                         <view class="item">
                             <view class="text">下单时间</view>
                             <view class="text">下单时间</view>
-                            <view class="text1">2025-09-14 17:21:55</view>
+                            <view class="text1">{{ orderInfo.createTime }}</view>
                         </view>
                         </view>
                         <view class="item">
                         <view class="item">
                             <view class="text">支付方式</view>
                             <view class="text">支付方式</view>
-                            <view class="text1">现金</view>
+                            <view class="text1">{{ orderInfo.payType == 1 ? '微信' : '余额' }}</view>
                         </view>
                         </view>
                         <view class="item">
                         <view class="item">
                             <view class="text">订单备注</view>
                             <view class="text">订单备注</view>
-                            <view class="text1">无</view>
+                            <view class="text1">{{ orderInfo.buyerRemark ? orderInfo.buyerRemark : '' }}</view>
                         </view>
                         </view>
 
 
                     </view>
                     </view>
@@ -166,6 +167,7 @@
 
 
 <script>
 <script>
 import { productOrderCancel, productOrderPay } from '@/api/points'
 import { productOrderCancel, productOrderPay } from '@/api/points'
+import { getPointOrderInfo } from '@/api/pointOrder'
 import {
 import {
     getInfo, payoff, pay, getSignature,
     getInfo, payoff, pay, getSignature,
 } from '@/api/index.js';
 } from '@/api/index.js';
@@ -173,12 +175,12 @@ export default {
     components: {},
     components: {},
     data() {
     data() {
         return {
         return {
-            payMeth: '2',
             selectReason: '',
             selectReason: '',
             selectReasonValue: '',
             selectReasonValue: '',
-            title: '待支付',
+            title: '',
             cancelOrderShowPopup: false,
             cancelOrderShowPopup: false,
-            orderStatus: '剩余时间 14:59', //超时未支付
+            countdownText: '',
+            orderStatus: '', //超时未支付
             selectReasonList: [
             selectReasonList: [
                 { value: '1', text: '买错了/不想要' },
                 { value: '1', text: '买错了/不想要' },
                 { value: '2', text: '商品无货' },
                 { value: '2', text: '商品无货' },
@@ -187,47 +189,97 @@ export default {
                 { value: '5', text: '其他原因' },
                 { value: '5', text: '其他原因' },
             ],
             ],
             dBalance: 0.00,
             dBalance: 0.00,
+            timer: null, // 定时器
+            orderNo: '',
+            orderInfo: null
         }
         }
     },
     },
     onLoad(data) {
     onLoad(data) {
-
+        if (data.orderNo) {
+            this.orderNo = data.orderNo
+            this.getOrderInfo();
+        }
     },
     },
     onShow() {
     onShow() {
 
 
     },
     },
     onPageScroll() {
     onPageScroll() {
+    },
+    async mounted() {
+
     },
     },
 
 
     methods: {
     methods: {
+        //获取订单详情
+        async getOrderInfo() {
+            const res = await getPointOrderInfo({
+                orderNo: this.orderNo,
+                openId: uni.getStorageSync('wx_copenid')
+            })
+            this.orderCountdownFun()
+            this.orderInfo = res.data.data
+        },
+        //订单倒计时
+        orderCountdownFun() {
+            let remain = 10;
+            if (remain > 0) {
+                this.orderStatus = '剩余时间'
+                this.title = '待支付'
+            } else {
+                this.orderStatus = '超时未支付'
+                this.title = '订单取消'
+                this.cancelOrderShowPopup = false
+                return
+            }
+
+            this.timer = setInterval(() => {
+                remain--;
+                this.countdownText = this.formatTime(remain);
+                if (remain <= 0) {
+                    clearInterval(this.timer);
+                    this.orderStatus = '超时未支付'
+                    this.title = '订单取消' 
+                    this.cancelOrderShowPopup = false
+                }
+            }, 1000);
+        },
+        // 时间格式化:秒 → mm:ss(00:00)
+        formatTime(seconds) {
+            if (seconds <= 0) return '00:00';
+            const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+            const s = (seconds % 60).toString().padStart(2, '0');
+            return `${m}:${s}`;
+        },
+
         //去付款
         //去付款
         goPay() {
         goPay() {
-            if (this.payMeth == 1) {
+            let params = {}
+            params.openId = uni.getStorageSync('wx_copenid');//用户openId
+            params.addressId = this.orderInfo.addressId;//地址ID
+            params.productId = this.orderInfo.id;
+            //params.name = this.params.name;
+            //params.productMainImage = this.params.productMainImage;
+            //params.skuId = this.selectedObj.index; //选中的SKU ID
+            //params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
+            params.quantity = 1; //购买数量
+            params.payType = this.orderInfo.payType;//支付方式:1微信支付 2账户余额
+            params.freightAmount = this.orderInfo.freightAmount; //运费
+            params.totalAmount = this.orderInfo.totalAmount;// 总金额
+            params.payAmount = this.orderInfo.payAmount;// 支付金额
+            params.pointsUsed = this.orderInfo.pointsUsed;// 使用的积分
+            params.buyerRemark = this.orderInfo.buyerRemark;//买家备注信息
+            console.log(params, 'params')
+            if (this.orderInfo.payType == 1) {
                 //微信支付 
                 //微信支付 
-                this.weixinPay()
-            } else if (this.payMeth == 2) {
+                this.weixinPay(params)
+            } else if (this.orderInfo.payType == 2) {
                 //余额支付
                 //余额支付
-                this.nowYuyue()
+                this.nowYuyue(params)
             }
             }
 
 
         },
         },
         //微信支付
         //微信支付
-        weixinPay() {
-            let params = {}
-            params.openId = uni.getStorageSync('wx_copenid');//用户openId
-            params.addressId = this.defaultAddress.id;//地址ID
-            params.productId = this.params.id;
-            params.name = this.params.name;
-            params.productMainImage = this.params.productMainImage;
-            params.skuId = this.selectedObj.index; //选中的SKU ID
-            params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
-            params.quantity = 1; //购买数量
-            params.payType = Number(this.selectPayMeth);//支付方式:1微信支付 2账户余额
-            params.freightAmount = this.params.freight; //运费
-            params.totalAmount = this.selectedObj.originPrice;// 总金额
-            params.payAmount = this.selectedObj.priceMoney;// 支付金额
-            params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
-            params.buyerRemark = this.orderRemarks;//买家备注信息
-            console.log(params, 'params')
+        weixinPay(params) {
             productOrderCreate(params).then(res => {
             productOrderCreate(params).then(res => {
                 return
                 return
                 productOrderPay().then(res => {
                 productOrderPay().then(res => {
@@ -284,7 +336,7 @@ export default {
             })
             })
         },
         },
         //账号余额支付
         //账号余额支付
-        nowYuyue() {
+        nowYuyue(params) {
             if (parseInt(this.dBalance) < parseInt(10)) {
             if (parseInt(this.dBalance) < parseInt(10)) {
                 uni.showModal({
                 uni.showModal({
                     title: '账户余额不足',
                     title: '账户余额不足',
@@ -298,22 +350,6 @@ export default {
                     }
                     }
                 });
                 });
             } else {
             } else {
-                let params = {}
-                params.openId = uni.getStorageSync('wx_copenid');//用户openId
-                params.addressId = this.defaultAddress.id;//地址ID
-                params.productId = this.params.id;
-                params.name = this.params.name;
-                params.productMainImage = this.params.productMainImage;
-                params.skuId = this.selectedObj.index; //选中的SKU ID
-                params.specNameValueLis = this.selectedObj.specNameValueList; // SKU列表(规格组合明细)
-                params.quantity = 1; //购买数量
-                params.payType = Number(this.selectPayMeth);//支付方式:1微信支付 2账户余额
-                params.freightAmount = this.params.freight; //运费
-                params.totalAmount = this.selectedObj.originPrice;// 总金额
-                params.payAmount = this.selectedObj.priceMoney;// 支付金额
-                params.pointsUsed = this.selectedObj.pricePoint;// 使用的积分
-                params.buyerRemark = this.orderRemarks;//买家备注信息
-                console.log(params, 'params')
                 productOrderCreate(params).then(res => {
                 productOrderCreate(params).then(res => {
                     return
                     return
                     productOrderPay().then(res => {
                     productOrderPay().then(res => {
@@ -354,16 +390,23 @@ export default {
         },
         },
         //取消订单提交按钮
         //取消订单提交按钮
         cancelOrderSubmit() {
         cancelOrderSubmit() {
-            this.cancelOrderShowPopup = false
-            this.title = '订单取消'
-            this.orderStatus = '您已取消支付'
             let params = {
             let params = {
                 openId: uni.getStorageSync('wx_copenid'),
                 openId: uni.getStorageSync('wx_copenid'),
-                orderNo: '',
+                orderNo: this.orderNo,
                 cancelReason: this.selectReasonValue,
                 cancelReason: this.selectReasonValue,
             }
             }
-            return
             productOrderCancel(params).then(res => {
             productOrderCancel(params).then(res => {
+                if (res.data.code == 200) {
+                    this.cancelOrderShowPopup = false
+                    this.title = '订单取消'
+                    this.orderStatus = '您已取消支付'
+                } else {
+                    //alert(res.data.msg)
+                    uni.showToast({
+                        title: res.data.msg,
+                        icon: 'none'
+                    })
+                }
 
 
             })
             })
         },
         },
@@ -388,7 +431,7 @@ export default {
         //再次购买
         //再次购买
         buyAgain() {
         buyAgain() {
             uni.navigateTo({
             uni.navigateTo({
-                url: `/points/productDetails/index?id=19`
+                url: `/points/productDetails/index?id=${this.orderInfo.id}`
             });
             });
         }
         }
 
 
@@ -460,7 +503,6 @@ export default {
         padding: 24rpx 32rpx;
         padding: 24rpx 32rpx;
         display: flex;
         display: flex;
         align-items: flex-start;
         align-items: flex-start;
-        height: 176rpx;
         background: #FFFFFF;
         background: #FFFFFF;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
         border-radius: 20rpx 20rpx 20rpx 20rpx;