微信小程序商城系列之购买时弹出属性选择框

时间：2024-03-07 18:43:44

转载自：https://blog.csdn.net/zx_001/article/details/80581506

 

 

 wxml:

 1 <!--屏幕背景变暗的背景  -->
 2 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 3  <!--弹出框  -->
 4 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
 5    <view class=\'commImg\'><image src=\'{{imghref}}{{goods_img[0].img}}\' mode="aspectFit"></image></view>
 6    <view class=\'column\'>
 7       <text class="sku-price">￥{{gg_price}}</text>
 8       <text class="sku-title"><block wx:if="{{gg_txt==\'\'}}">请选择规格</block><block wx:else>已选择{{gg_txt}}ml</block></text>
 9    </view>
10    <text class="line"></text>
11    <view class=\'guige\'>
12       <text class="gg-title">规格</text>
13       <view class=\'gg\'>
14         <text  wx:for="{{guigeList}}" wx:key="gg" wx:for-item="item" class="{{gg_id==item.guige?\'active\':\'\'}}" data-id="{{item.guige}}"  data-txt="{{item.guige}}" data-price=\'{{item.price}}\' bindtap="filter">{{item.guige}}ml</text>
15       </view>
16    </view>
17    <text class="line"></text>
18    <view class="row">
19         <text >数量</text>
20         <view class="quantity-position">
21            <view class="stepper">
22             <!-- 减号 -->  
23             <text class="{{minusStatus}}" bindtap="bindMinus">-</text>
24             <!-- 数值 -->  
25             <input type="number" bindinput=\'bindManual\' value="{{num}}" />
26             <!-- 加号 -->  
27             <text class="normal" bindtap="bindPlus">+</text>
28             </view>
29         </view>
30    </view>
31    <text class="line"></text>
32    <view class=\'btn\'>
33     <button class="button-add" bindtap="addCart">加入购物车</button>
34     <button class="button-buy">立即购买</button>
35    </view>
36 </view>
View Code

wxss:

  1 /*使屏幕变暗  */
  2 .commodity_screen {
  3   width: 100%;
  4   height: 100%;
  5   position: fixed;
  6   top: 0;
  7   left: 0;
  8   background: #000;
  9   opacity: 0.5;
 10   overflow: hidden;
 11   z-index: 1000;
 12   color: #fff;
 13 }
 14 /*对话框 */
 15 .commodity_attr_box {
 16  
 17   width: 94%;
 18   position: fixed;
 19   bottom: 0;
 20   left: 0;
 21   z-index: 2000;
 22   background: #fff;
 23   padding:20rpx 3%;
 24 }
 25  
 26 .commImg{
 27   position: absolute;
 28   width:150rpx;
 29   height:150rpx;
 30   background:#fff;
 31   border:1px solid #f5f5f5;
 32   z-index: 12;
 33   left: 20px;
 34   top: -35px;
 35   padding:20rpx;
 36   border-radius: 20rpx;
 37 }
 38 .commImg image{
 39   width:100%;
 40   height:100%;
 41 }
 42  
 43 .column{
 44   display: flex;
 45   flex-direction: column;
 46 }
 47  
 48 .sku-price {
 49   color: red;
 50   position: relative;
 51   left: 250rpx;
 52   margin: 1rpx;
 53 }
 54 .sku-title {
 55   position: relative;
 56   left: 250rpx;
 57   font-size: 12px;
 58   margin: 1rpx;
 59 }
 60  
 61 .line{
 62   width: 95%;
 63   height: 2rpx;
 64   display: inline-block;
 65   margin: 30rpx 0rpx 5rpx 0rpx;
 66   background-color: #f2f2f2;
 67   text-align: center;
 68 }
 69  
 70 .gg-title{
 71  font-size: 15px;
 72 }
 73  
 74 .gg text{
 75   width:100rpx;
 76   height:50rpx;
 77   line-height:50rpx;
 78   float:left;
 79   background:#f2f2f2;
 80   text-align: center;
 81   margin:20rpx 0 0 26rpx;
 82   font-size:12px;
 83   border-radius: 5px;
 84 }
 85 .gg .active{
 86   color:#fff;
 87   background:#e64340;
 88 }
 89 .row {
 90   display: flex;
 91   flex-direction: row;
 92   align-items: center;
 93 }
 94 .row .quantity-position {
 95   position: absolute;
 96   margin-top:5px;
 97   right:50rpx;
 98 }
 99  
100 .btn{
101   display: flex;
102   flex-direction: row;
103   align-items: center;
104 }
105 .button-add{
106   width:50%;
107   border:0px;
108   background:#4CAF50;
109   color:#fff;
110   border-radius: 0px;
111 }
112 .button-buy{
113   width:50%;
114   background:#F44336;
115   color:#fff;
116   border-radius: 0px;
117 }
118  
119  
120 /*数量加减样式*/
121 /*主容器*/  
122 .stepper {  
123     width: 80px;  
124     height: 26px;  
125     /*给主容器设一个边框*/  
126     border: 1px solid #ccc;  
127     border-radius: 3px;  
128     margin:0 auto;  
129 }  
130   
131 /*加号和减号*/  
132 .stepper text {  
133     width: 19px;  
134     line-height: 26px;  
135     text-align: center;  
136     float: left;  
137 }  
138   
139 /*数值*/  
140 .stepper input {  
141   padding:0px;
142     width: 40px;  
143     height: 26px;  
144     float: left;  
145     margin: 0 auto;  
146     text-align: center;  
147     font-size: 12px;  
148     /*给中间的input设置左右边框即可*/  
149     border-left: 1px solid #ccc;  
150     border-right: 1px solid #ccc;  
151 }  
152   
153 /*普通样式*/  
154 .stepper .normal{  
155     color: black;  
156 }
View Code

JS:这里是Page，也可改为组件Component

  1 Page({
  2  
  3   /**
  4    * 页面的初始数据
  5    */
  6   data: {
  7     showModalStatus: false,//是否显示
  8     gg_id: 0,//规格ID
  9     gg_txt: \'\',//规格文本
 10     gg_price: 0,//规格价格
 11     guigeList: [{ guige: \'100\', price: \'150\' }, { guige: \'200\', price: \'150\' }, { guige: \'300\', price: \'150\' }],
 12     num:1,//初始数量
 13   },
 14   filter: function (e) {
 15     //console.log(e);
 16     var self = this, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, price = e.currentTarget.dataset.price
 17     self.setData({
 18       gg_id: id,
 19       gg_txt: txt,
 20       gg_price: price
 21     });
 22   },
 23   
 24   /* 点击减号 */
 25   bindMinus: function () {
 26     var num = this.data.num;
 27     // 如果大于1时，才可以减  
 28     if (num > 1) {
 29       num--;
 30     }
 31     // 只有大于一件的时候，才能normal状态，否则disable状态  
 32     var minusStatus = num <= 1 ? \'disabled\' : \'normal\';
 33     // 将数值与状态写回  
 34     this.setData({
 35       num: num,
 36       minusStatus: minusStatus
 37     });
 38   },
 39   /* 点击加号 */
 40   bindPlus: function () {
 41     var num = this.data.num;
 42     // 不作过多考虑自增1  
 43     num++;
 44     // 只有大于一件的时候，才能normal状态，否则disable状态  
 45     var minusStatus = num < 1 ? \'disabled\' : \'normal\';
 46     // 将数值与状态写回  
 47     this.setData({
 48       num: num,
 49       minusStatus: minusStatus
 50     });
 51   },
 52  
 53   //显示对话框
 54   showModal: function () {
 55     // 显示遮罩层
 56     var animation = wx.createAnimation({
 57       duration: 200,
 58       timingFunction: "linear",
 59       delay: 0
 60     })
 61     this.animation = animation
 62     animation.translateY(300).step()
 63     this.setData({
 64       animationData: animation.export(),
 65       showModalStatus: true
 66     })
 67     setTimeout(function () {
 68       animation.translateY(0).step()
 69       this.setData({
 70         animationData: animation.export()
 71       })
 72     }.bind(this), 200)
 73   },
 74   //隐藏对话框
 75   hideModal: function () {
 76     // 隐藏遮罩层
 77     var animation = wx.createAnimation({
 78       duration: 200,
 79       timingFunction: "linear",
 80       delay: 0
 81     })
 82     this.animation = animation
 83     animation.translateY(300).step()
 84     this.setData({
 85       animationData: animation.export(),
 86     })
 87     setTimeout(function () {
 88       animation.translateY(0).step()
 89       this.setData({
 90         animationData: animation.export(),
 91         showModalStatus: false
 92       })
 93     }.bind(this), 200)
 94   },
 95   /**
 96    * 生命周期函数--监听页面加载
 97    */
 98   onLoad: function (options) {
 99   
100   },
101 })
View Code