Explorar el Código

Merge branch 'main' of https://gitlab.com/tea28/client

hejie hace 3 años
padre
commit
efa030d897
Se han modificado 2 ficheros con 412 adiciones y 221 borrados
  1. 1 1
      src/manifest.json
  2. 411 220
      src/pages/to-pay-list/index.vue

+ 1 - 1
src/manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "client-h5",
+    "name" : "一茶酒社",
     "appid" : "__UNI__95AE405",
     "description" : "",
     "versionName" : "1.0.0",

+ 411 - 220
src/pages/to-pay-list/index.vue

@@ -1,243 +1,434 @@
 <template>
-	<view class="container">
-		
-		<!-- 收货地址 -->
-		<view class="address" v-if="!Data.ojsType || Data.ojsType ==1">
-			<block v-if="DefaultAddress != '' && DefaultAddress.name !='' && DefaultAddress.name != undefined">
-				<view class="add_head flex_r flex_ac flex_jb">
-					<view class="user_info flex_r flex_ac">
-						<view class="user_name">{{DefaultAddress.name}}</view>
-						<view class="user_phone">{{DefaultAddress.mobile}}</view>
-					</view>
-					<view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
-						<image class="set_img" src="/static/img/setAddress.png" mode=""></image>
-						<view class="set_text">修改</view>
-					</view>
-				</view>
-				<view class="add_name mar_t20">{{DefaultAddress.address}}</view>
-			</block>
-			<block v-else>
-				<view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress('add')">
-					<image class="add_icon" src="/static/img/add.png" mode=""></image>
-					<view class="add_text">添加收货地址</view>
-				</view>
-			</block>
-		</view>
-		<!-- 收货地址-end -->
-		
-		<!-- 商品信息 -->
-		<view class="goods_info mar_t20">
-			<view class="info_type">{{modularName}}</view>
-			<view class="goods flex_r">
-				<image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
-				<view class="goods_con flex_c flex_jc flex_jb">
-					<view class="goods_name ellipsis2">{{goodsInfo.goods_name}}</view>
-					<view class="flex_r flex_ac flex_jb">
-						<view class="goods_msg">{{Data.type == 2 ? goodsInfo.trade_num + '消费积分' + '¥' + goodsInfo.trade_price : '¥' + goodsInfo.cost_price}}</view>
-						<view class="goods_num">x {{Data.num}}</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 商品信息-end -->
-		
-		<!-- 订单信息 -->
-		<view class="order mar_t20">
-			<view class="order_list flex_r flex_ac flex_jb">
-				<view class="list_name flex_r flex_jb"><text>数</text><text>量</text></view>
-				<view class="list_con">{{Data.num}}</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb">
-				<view class="flex_r flex_ac">
-					<view class="list_name flex_r flex_jb"><text>运</text><text>费</text></view>
-					<view class="list_con p_color">({{freight}}元/每套)</view>
-				</view>
-				<view class="list_con">¥{{freight}}</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
-				<view class="flex_r flex_ac">
-					<view class="list_name flex_r flex_jb"><text>茶</text><text>宝</text></view>
-					<view class="list_con p_color">(可用{{userinfo.cha_bao}})</view>
-				</view>
-				<view class="list_con">{{basicsInfo.goodsTeaInt}}茶宝</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
-				<view class="flex_r flex_ac">
-					<view class="list_name flex_r flex_jb"><text>批</text><text>发</text><text>积</text><text>分</text></view>
-					<view class="list_con p_color">(可用{{basicsInfo.integral}})</view>
-				</view>
-				<view class="list_con">{{basicsInfo.goodsPfInt}}批发积分</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 5">
-				<view class="list_name flex_r flex_jb"><text>商</text><text>品</text><text>金</text><text>额</text></view>
-				<view class="list_con">¥{{Data.type == 2 ? goodsInfo.trade_price : goodsInfo.cost_price}}</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
-				<view class="list_name flex_r flex_jb"><text>消</text><text>费</text><text>积</text><text>分</text></view>
-				<view class="list_con">{{basicsInfo.stayPay}}消费积分</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
-				<view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>积</text><text>分</text></view>
-				<view class="list_con">{{userinfo.integral}}消费积分</view>
-			</view>
-			<view class="order_list flex_r flex_ac flex_jb">
-				<view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>余</text><text>额</text></view>
-				<view class="list_con p_color">¥{{userinfo.user_money}}</view>
-			</view>
-		</view>
-		<!-- 订单信息-end -->
-		
-		<!-- 底部操作栏 -->
-		<view class="bar flex_r flex_ac flex_jb">
-			<view class="bar_info flex_r flex_ac">待支付<text>¥{{obligation}}</text></view>
-			<view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
-		</view>
-		<!-- 底部操作栏-end -->
-
-		<!-- 收获地址弹窗 -->
-		<userAddress ref="userAddress" @addressConfirm="loadDa" />
-
-	</view>
+    <view class="container">
+        <!-- 收货地址 -->
+        <view class="address" v-if="!Data.ojsType || Data.ojsType ==1">
+            <block v-if="DefaultAddress != '' && DefaultAddress.name !='' && DefaultAddress.name != undefined">
+                <view class="add_head flex_r flex_ac flex_jb">
+                    <view class="user_info flex_r flex_ac">
+                        <view class="user_name">{{DefaultAddress.name}}</view>
+                        <view class="user_phone">{{DefaultAddress.mobile}}</view>
+                    </view>
+                    <view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
+                        <image class="set_img" src="/static/img/setAddress.png" mode=""></image>
+                        <view class="set_text">修改</view>
+                    </view>
+                </view>
+                <view class="add_name mar_t20">{{DefaultAddress.address}}</view>
+            </block>
+            <block v-else>
+                <view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress('add')">
+                    <image class="add_icon" src="/static/img/add.png" mode=""></image>
+                    <view class="add_text">添加收货地址</view>
+                </view>
+            </block>
+        </view>
+        <!-- 收货地址-end -->
+        <!-- 商品信息 -->
+        <view class="goods_info mar_t20">
+            <view class="info_type">{{modularName}}</view>
+            <view class="goods flex_r">
+                <image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
+                <view class="goods_con flex_c flex_jc flex_jb">
+                    <view class="goods_name ellipsis2">{{goodsInfo.goods_name}}</view>
+                    <view class="flex_r flex_ac flex_jb">
+                        <view class="goods_msg">{{Data.type == 2 ? goodsInfo.trade_num + '消费积分' + '¥' + goodsInfo.trade_price : '¥' + goodsInfo.cost_price}}</view>
+                        <view class="goods_num">x {{Data.num}}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- 商品信息-end -->
+        <!-- 订单信息 -->
+        <view class="order mar_t20">
+            <view class="order_list flex_r flex_ac flex_jb">
+                <view class="list_name flex_r flex_jb"><text>数</text><text>量</text></view>
+                <view class="list_con">{{Data.num}}</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb">
+                <view class="flex_r flex_ac">
+                    <view class="list_name flex_r flex_jb"><text>运</text><text>费</text></view>
+                    <view class="list_con p_color">({{freight}}元/每套)</view>
+                </view>
+                <view class="list_con">¥{{freight}}</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
+                <view class="flex_r flex_ac">
+                    <view class="list_name flex_r flex_jb"><text>茶</text><text>宝</text></view>
+                    <view class="list_con p_color">(可用{{userinfo.cha_bao}})</view>
+                </view>
+                <view class="list_con">{{basicsInfo.goodsTeaInt}}茶宝</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
+                <view class="flex_r flex_ac">
+                    <view class="list_name flex_r flex_jb"><text>批</text><text>发</text><text>积</text><text>分</text></view>
+                    <view class="list_con p_color">(可用{{basicsInfo.integral}})</view>
+                </view>
+                <view class="list_con">{{basicsInfo.goodsPfInt}}批发积分</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 5">
+                <view class="list_name flex_r flex_jb"><text>商</text><text>品</text><text>金</text><text>额</text></view>
+                <view class="list_con">¥{{Data.type == 2 ? goodsInfo.trade_price : goodsInfo.cost_price}}</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
+                <view class="list_name flex_r flex_jb"><text>消</text><text>费</text><text>积</text><text>分</text></view>
+                <view class="list_con">{{basicsInfo.stayPay}}消费积分</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 5">
+                <view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>积</text><text>分</text></view>
+                <view class="list_con">{{userinfo.integral}}消费积分</view>
+            </view>
+            <view class="order_list flex_r flex_ac flex_jb">
+                <view class="list_name flex_r flex_jb"><text>可</text><text>用</text><text>余</text><text>额</text></view>
+                <view class="list_con p_color">¥{{userinfo.user_money}}</view>
+            </view>
+        </view>
+        <!-- 订单信息-end -->
+        <!-- 底部操作栏 -->
+        <view class="bar flex_r flex_ac flex_jb">
+            <view class="bar_info flex_r flex_ac">待支付<text>¥{{obligation}}</text></view>
+            <view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
+        </view>
+        <!-- 底部操作栏-end -->
+        <!-- 收获地址弹窗 -->
+        <userAddress ref="userAddress" @addressConfirm="loadDa" />
+    </view>
 </template>
-
 <script>
 let page = 1;
-let app=getApp();
+let app = getApp();
 var appEv = app.$vm.$options;
 import { get, post, u_post } from "@/request/api.js";
+import { ToPayOpre } from "@/utils/reqTools.js";
+let toPayOpre = new ToPayOpre();
 import userAddress from "pages/xghc-addrress/userAddress"
-	export default {
-		data() {
-			return {
-				Data:{},
-				goodsInfo:'', // 商品信息
-				modularName:'' ,// 商品类型
-				DefaultAddress: '' ,// 用户默认地址
-				basicsInfo:'', // 订单信息
-
-				freight: 0, //运费
-				userinfo: {},
-				obligation: 0, //待支付
-			};
-		},
-		components: {
-			userAddress,
-		},
-		onLoad(e){
-			this.Data = e
-			this.loadData(e);
-			this.loadAddress();
-
-			this.userinfo = uni.getStorageSync('userinfo');
-			// 1零售 2批发 3精品 4今日值买
-			this.modularName = e.type == 1 ? "零售专区" : e.type == 2 ? "批发专区" : e.type == 3 ? "精品专区" : "今日值买"
-		},
-		mounted () {
-			// this.$refs.popup.open('top');
-		},
-		methods:{
-			loadData(da){
-				post("goods/goodsDetail",da).then(res => {
-                    if(res.code === 0){
-                        this.goodsInfo = res.data.data
-						post("goods/freight",{type:da.type}).then(res => {
-							if(res.code === 0){
-								this.freight = res.data.freight;
-							}
-							// 计算待支付
-							let a = this.goodsInfo.cost_price * this.Data.num + parseFloat(this.freight);
-							let b = a - this.userinfo.user_money;
-							this.obligation = b > 0 ? b : 0
-						})
-					}
-                })
-			},
-			// 获取用户地址
-			loadAddress(){
-				post("user/addressList").then(res => {
-                    if(res.code === 0){
-						let da = res.data.data;
-						for (const i of da) {
-							if(i.status == 1) {
-								this.DefaultAddress = i;
-								break;
-							}else this.DefaultAddress = da[0]
-						}
-					}
-                })
-			},
-			chooseWXaddress(va) {
-				let a = va != "add" ? this.DefaultAddress.id : 'add'
-				this.$refs.userAddress.open(a);
-				// this.goto("/pages/xghc-addrress/userAddress");
-			},
-			// 支付
-			payment:function(){
-				if(!this.DefaultAddress.id){
-					appEv.errTips('请选择地址')
-					return
-				}
-				post('goods/submitOrder',{
-					...this.Data,
-					address_id: this.DefaultAddress.id,
-				}).then(res => {
-
-				})
-			},
-
-			loadDa(da){
-				this.DefaultAddress = da;
-			}
-		}
-	}
-</script>
+export default {
+    data() {
+        return {
+            Data: {},
+            goodsInfo: '', // 商品信息
+            modularName: '', // 商品类型
+            DefaultAddress: '', // 用户默认地址
+            basicsInfo: '', // 订单信息
+
+            freight: 0, //运费
+            userinfo: {},
+            obligation: 0, //待支付
+        };
+    },
+    components: {
+        userAddress,
+    },
+    onLoad(e) {
+        this.Data = e
+        this.loadData(e);
+        this.loadAddress();
+
+        this.userinfo = uni.getStorageSync('userinfo');
+        // 1零售 2批发 3精品 4今日值买
+        this.modularName = e.type == 1 ? "零售专区" : e.type == 2 ? "批发专区" : e.type == 3 ? "精品专区" : "今日值买"
+    },
+    mounted() {
+        // this.$refs.popup.open('top');
+    },
+    methods: {
+        loadData(da) {
+            post("goods/goodsDetail", da).then(res => {
+                if (res.code === 0) {
+                    this.goodsInfo = res.data.data
+                    post("goods/freight", { type: da.type }).then(res => {
+                        if (res.code === 0) {
+                            this.freight = res.data.freight;
+                        }
+                        // 计算待支付
+                        let a = (this.goodsInfo.cost_price * this.Data.num + parseFloat(this.freight)) * 100;
+                        let b = (a - this.userinfo.user_money * 100) / 100;
+                        this.obligation = b > 0 ? b : 0
+                    })
+                }
+            })
+        },
+        // 获取用户地址
+        loadAddress() {
+            post("user/addressList").then(res => {
+                if (res.code === 0) {
+                    let da = res.data.data;
+                    for (const i of da) {
+                        if (i.status == 1) {
+                            this.DefaultAddress = i;
+                            break;
+                        } else this.DefaultAddress = da[0]
+                    }
+                }
+            })
+        },
+        chooseWXaddress(va) {
+            let a = va != "add" ? this.DefaultAddress.id : 'add'
+            this.$refs.userAddress.open(a);
+            // this.goto("/pages/xghc-addrress/userAddress");
+        },
+        // 支付
+        payment: function() {
+            // #ifdef  H5
+            let type = "H5";
+            // #endif
+            // #ifdef  APP
+            let type = "app";
+            // #endif
+            // #ifdef  MP-WEIXIN
+            let type = "jsapi";
+            // #endif
+
+            if (!this.DefaultAddress.id) {
+                appEv.errTips('请选择地址')
+                return
+            }
+            post('goods/submitOrder', {
+                ...this.Data,
+                address_id: this.DefaultAddress.id,
+                trade_type: type
+            }).then(res => {
+                if (res.code === 0) {
+                    toPayOpre.toPay(res.data, (rea) => {
+                        if (!rea) {
+                            // 支付成功
+                            appEv.errTips('支付成功')
+                            uni.switchTab({
+                                url: "/pages/szw-order-list/index",
+                            });
 
+                        } else {
+                            // 支付失败
+                            appEv.errTips('支付已取消')
+                        }
+                    });
+                }
+            })
+        },
+
+        loadDa(da) {
+            this.DefaultAddress = da;
+        }
+    }
+}
+</script>
 <style lang="scss">
 // 页面配置
-page{background: #f5f5f5;}
-.container{padding:20rpx;box-sizing: border-box;}
+page {
+    background: #f5f5f5;
+}
+
+.container {
+    padding: 20rpx;
+    box-sizing: border-box;
+}
+
 // 页面配置-end
 
 // 收货地址
-.user_phone{font-size: 26rpx;color:#222;}
-.set_text{font-size: 24rpx;color:#868686;}
-.set_img{width: 24rpx;height: 24rpx;margin-right: 9rpx;}
-.add_address{width: 100%;overflow: hidden;height: 109rpx;}
-.add_icon{width: 60rpx;height: 60rpx;margin-bottom: 12rpx;}
-.user_name{font-size:32rpx;color:#000;margin-right: 46rpx;}
-.add_name{width: 448rpx;overflow: hidden;font-size: 24rpx;color:#868686;}
-.add_text{font-size: 24rpx;color:#868686;font-family: "SourceHanSansCN-Normal";}
-.address{width: 100%;overflow: hidden;padding:28rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;}
+.user_phone {
+    font-size: 26rpx;
+    color: #222;
+}
+
+.set_text {
+    font-size: 24rpx;
+    color: #868686;
+}
+
+.set_img {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 9rpx;
+}
+
+.add_address {
+    width: 100%;
+    overflow: hidden;
+    height: 109rpx;
+}
+
+.add_icon {
+    width: 60rpx;
+    height: 60rpx;
+    margin-bottom: 12rpx;
+}
+
+.user_name {
+    font-size: 32rpx;
+    color: #000;
+    margin-right: 46rpx;
+}
+
+.add_name {
+    width: 448rpx;
+    overflow: hidden;
+    font-size: 24rpx;
+    color: #868686;
+}
+
+.add_text {
+    font-size: 24rpx;
+    color: #868686;
+    font-family: "SourceHanSansCN-Normal";
+}
+
+.address {
+    width: 100%;
+    overflow: hidden;
+    padding: 28rpx;
+    box-sizing: border-box;
+    background: #fff;
+    border-radius: 12rpx;
+}
+
 // 收货地址-end
 
 // 商品信息
-.goods:nth-last-child(1){margin-bottom: 0;}
-.goods_num{font-size: 26rpx;color:#989898;}
-.goods_con{width: calc(100% - 202rpx - 36rpx);overflow: hidden;}
-.goods{width: 100%;overflow: hidden;margin-bottom: 20rpx;align-items: initial;}
-.goods_img{width: 202rpx;height: 140rpx;margin-right: 36rpx;border-radius: 12rpx;}
-.goods_name{font-size: 34rpx;color:#1B1B1B;font-family: "SourceHanSansCN-Bold";font-weight: bold;}
-.goods_msg{overflow: hidden;font-size: 26rpx;color:#18BB88;font-family: 'SourceHanSansCN-Medium';font-weight: 500;}
-.info_type{font-size: 30rpx;color:#353535;font-family: "SourceHanSansCN-Bold";font-weight: bold;margin-bottom: 43rpx;}
-.goods_info{width: 100%;overflow: hidden;padding: 28rpx;background: #fff;border-radius: 12rpx;box-sizing: border-box;}
+.goods:nth-last-child(1) {
+    margin-bottom: 0;
+}
+
+.goods_num {
+    font-size: 26rpx;
+    color: #989898;
+}
+
+.goods_con {
+    width: calc(100% - 202rpx - 36rpx);
+    overflow: hidden;
+}
+
+.goods {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 20rpx;
+    align-items: initial;
+}
+
+.goods_img {
+    width: 202rpx;
+    height: 140rpx;
+    margin-right: 36rpx;
+    border-radius: 12rpx;
+}
+
+.goods_name {
+    font-size: 34rpx;
+    color: #1B1B1B;
+    font-family: "SourceHanSansCN-Bold";
+    font-weight: bold;
+}
+
+.goods_msg {
+    overflow: hidden;
+    font-size: 26rpx;
+    color: #18BB88;
+    font-family: 'SourceHanSansCN-Medium';
+    font-weight: 500;
+}
+
+.info_type {
+    font-size: 30rpx;
+    color: #353535;
+    font-family: "SourceHanSansCN-Bold";
+    font-weight: bold;
+    margin-bottom: 43rpx;
+}
+
+.goods_info {
+    width: 100%;
+    overflow: hidden;
+    padding: 28rpx;
+    background: #fff;
+    border-radius: 12rpx;
+    box-sizing: border-box;
+}
+
 // 商品信息-end
 
 // 订单信息
-.list_name{width: 102rpx;}
-.order_list:nth-last-child(1){margin-bottom: 0;}
-.order_list{width: 100%;overflow: hidden;margin-bottom: 30rpx;}
-.list_con{font-size: 24rpx;color:#000;font-family: "SourceHanSansCN-Medium";font-weight: bold;line-height: 1;}
-.order{width: 100%;overflow: hidden;padding:28rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;}
-.list_name text{font-size: 26rpx;color:rgba(0,0,0,.8);font-family: "SourceHanSansCN-Medium";font-weight: bold;line-height: 1;}
-
-.p_color{color:#FF6D44;}
+.list_name {
+    width: 102rpx;
+}
+
+.order_list:nth-last-child(1) {
+    margin-bottom: 0;
+}
+
+.order_list {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 30rpx;
+}
+
+.list_con {
+    font-size: 24rpx;
+    color: #000;
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: bold;
+    line-height: 1;
+}
+
+.order {
+    width: 100%;
+    overflow: hidden;
+    padding: 28rpx;
+    box-sizing: border-box;
+    background: #fff;
+    border-radius: 12rpx;
+}
+
+.list_name text {
+    font-size: 26rpx;
+    color: rgba(0, 0, 0, .8);
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: bold;
+    line-height: 1;
+}
+
+.p_color {
+    color: #FF6D44;
+}
+
 // 订单信息-end
 
 // 底部操作栏
-.bar_info{font-size: 24rpx;color:#000;font-family: "SourceHanSansCN-Medium";font-weight: bold;}
-.bar_info text{font-size: 30rpx;color:#FF6D44;font-family: "SourceHanSansCN-Medium";font-weight: bold;}
-.pay_btn{width: 187rpx;height: 72rpx;font-size: 30rpx;font-family: "SourceHanSansCN-Medium";font-weight: bold;background: #2DB48A;border-radius: 36rpx;color:#fff;}
-.bar{width: 100%;overflow: hidden;position: fixed;bottom:0;left: 0;background: #fff;box-shadow: 0 0 10rpx rgba(0,0,0,.15);padding:14rpx 30rpx;box-sizing: border-box;}
-// 底部操作栏-end
+.bar_info {
+    font-size: 24rpx;
+    color: #000;
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: bold;
+}
 
-</style>
+.bar_info text {
+    font-size: 30rpx;
+    color: #FF6D44;
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: bold;
+}
+
+.pay_btn {
+    width: 187rpx;
+    height: 72rpx;
+    font-size: 30rpx;
+    font-family: "SourceHanSansCN-Medium";
+    font-weight: bold;
+    background: #2DB48A;
+    border-radius: 36rpx;
+    color: #fff;
+}
+
+.bar {
+    width: 100%;
+    overflow: hidden;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, .15);
+    padding: 14rpx 30rpx;
+    box-sizing: border-box;
+}
+
+// 底部操作栏-end
+</style>