加入购物车的底部pop

<template>     <view>

       <maskall v-if="maskall"></maskall> 

       <view class="bottom" v-show="showFlag">             <view>                 <view class="content-block-bottom">                     <view class="content-left-bottom">                         <image src="../../static/pic/food.jpg" class="content-food-img-bottom">                         </image>                         <view class="content-view-bottom">                             <text class="content-price-bottom">￥{{priceShop}}</text>                             <text class="content-num-bottom">                                 {{remaining}} {{lastNum}} {{aNum}}                             </text>                         </view>                     </view>                     <image src="../../static/pic/closeShop.png" class="content-cancel-img"                          @click="cancelShop">                     </image>                 </view>                 <view class="choose-num">                     <text>{{purchaseQuantity}}</text>                     <uni-number-box :min="1" class="shop-number-box" style="width: 200rpx;">                     </uni-number-box>                 </view>                 <view class="button-block">                     <button class="button-style" @click="addShop">{{addShopText}}</button>                 </view>             </view>         </view>

    </view>

</template>

引入插件

import maskall from '../../components/maskAll.vue'

components:{             maskall    },

data(){

return {

addShopText:'加入购物车',                 purchaseQuantity:'购买数量',                 aNum:'件',                 remaining:'剩余',                 lastNum:9968,                 priceShop:150.00,                 showFlag:false,                 maskall:false,

}

}

函数部分

addShop(){                 var that = this;                 that.maskall = false;                 that.showFlag = false;                 uni.showTabBar()                 uni.showToast({                     title: '已成功添加到购物车',                     duration: 2000,                     icon:'none',                     position:'top'                 });             },

cancelShop(){                 var that = this;                 that.maskall = false;                 that.showFlag = false;                 uni.showTabBar()                              },

CSS部分

.bottom{     width: 750rpx;     height: 500rpx;     display: flex;     flex-direction: column;     background-color: #FFF;     position: fixed;     right: 0;     bottom:var(--window-bottom);     left: 0;     z-index: 1030;     margin-bottom: 6;     border-top-left-radius: 40rpx;     border-top-right-radius: 40rpx; } .content-block-bottom{     display: flex;     flex-direction: row;     justify-content: space-between;     margin-top: 40rpx;     padding: 0 40rpx; } .content-left-bottom{     display: flex;     flex-direction: row; } .content-food-img-bottom{     width: 160rpx;     height: 160rpx;     border-radius: 14rpx; } .content-view-bottom{     display: flex;     flex-direction: column;     margin-left: 30rpx;     justify-content: flex-end; } .content-price-bottom{     height: 60rpx;     line-height: 60rpx;     font-size: 40rpx;     font-weight: bold;     color: #ff0000; } .content-num-bottom{     height: 60rpx;     font-size: 30rpx; } .content-cancel-img{     width: 40rpx;     height: 40rpx; } .shop-number-box{     width: 160rpx;     margin-right: 20rpx;     height: 100rpx;     line-height: 100rpx; } .choose-num{     display: flex;     flex-direction: row;     justify-content: space-between;     padding: 0 30rpx;     margin-top: 40rpx; } .button-block{     display: flex;     flex-direction: column;     width: 750rpx;     justify-content: center;     align-items: center; } .button-style{     background-color: #ff0000;     color: #fff;     width: 710rpx;     border-radius: 60rpx;     margin-top: 30rpx; }

 

 

如图下方的pop所示。