From 709a315403ed1d17be7b56cc76bf07f9bbf2c673 Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Mon, 6 Jul 2020 10:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pageB/components/sdetails/tloos.vue | 142 +++++++++++++++++++++++++---
 1 file changed, 129 insertions(+), 13 deletions(-)

diff --git a/pageB/components/sdetails/tloos.vue b/pageB/components/sdetails/tloos.vue
index 8c4cd7e..67208ae 100644
--- a/pageB/components/sdetails/tloos.vue
+++ b/pageB/components/sdetails/tloos.vue
@@ -1,24 +1,61 @@
 <template>
-    <view class="tloos">
-        <view class="navs">
-            <image></image>
-            店铺
+    <view>
+        <view class="tloos">
+            <view class="navs">
+                <image></image>
+                店铺
+            </view>
+            <view class="navs" style="margin-right:30rpx">
+                <image></image>
+                客服
+            </view>
+            <view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
+            <view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
+            <view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
+            <u-toast ref="uToast" />
+            
         </view>
-        <view class="navs" style="margin-right:30rpx">
-            <image></image>
-            客服
-        </view>
-        <view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
-        <view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view>
-        <view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
-		<u-toast ref="uToast" />
+        <u-popup v-model="show" mode="bottom">
+                <view class="popup">
+                    <view class="head">
+                        <image class="image"></image>
+                        <view class="info">
+                            <text class="u-line-2">套装新款小个子春季时尚韩版短袖衬
+    衫套装新款小个子春季时尚韩版...套装新款小个子春季时尚韩版短袖衬衫套装新款小个子春季时尚韩版...</text>
+                            <text>￥99</text>
+                        </view>
+                    </view>
+                    <view class="guige">
+                        <view class="title">
+                            选择尺码
+                        </view>
+                        <view class="item">
+                            <text>均码</text>
+                            <text class="xuanzhong">S</text>
+                            <text>M</text>
+                        </view>
+                    </view>
+                    <view class="num">
+                        <text>购买数量</text>
+                        <u-number-box v-model="value" @change="valChange"></u-number-box>
+                    </view>
+                </view>
+            </u-popup>
     </view>
+    
 </template>
 <script>
 export default {
 	name:"tloos",
 	props: ['id'],
+    data(){
+        return {
+            show:true,
+            value:1
+        }
+    },
 	methods: {
+        //添加购物车
 		addCart() {
 			this.$u.api.addCart({
 				goods_id: this.id,
@@ -29,7 +66,13 @@ export default {
 					type: res.errCode == 0 ? 'success' : 'warning',
 				})
 			})
-		}
+		},
+        buy(type){
+            this.show = true
+        },
+        valChange(e) {
+            console.log('当前值为: ' + e.value)
+        }
 	},
 }
 </script>
@@ -42,6 +85,7 @@ export default {
     width: 100%;
     bottom:0;
     border-top: 1rpx solid #ececec;
+    z-index: 1000000;
     .navs{
         display: flex;
         flex-direction: column;
@@ -67,5 +111,77 @@ export default {
         color: #fff;
 
     }
+  
 }
+  .popup{
+        padding: 30rpx;
+        padding-bottom: 180rpx;
+        .head{
+            display: flex;
+            margin-bottom: 30rpx;
+            .image{
+                width: 195rpx;
+                height: 195rpx;
+                border-radius: 10rpx;
+                flex-shrink: 0;
+            }
+            .info{
+                display: flex;
+                padding: 21rpx 0;
+                justify-content: space-between;
+                margin-left: 27rpx;
+                flex-direction: column;
+                >text:first-child{
+                    font-size: 28rpx;
+                    color: #333;
+                }
+                >text:last-child{
+                    font-size: 30rpx;
+                    color: #ff3131;
+                }
+            }
+        }
+        .guige{
+            margin-top: 30rpx;
+            padding-bottom: 30rpx;
+            border-bottom: #ececec solid 2rpx;
+            .title{
+                font-size: 28rpx;
+                color: #333;
+                margin-bottom: 29rpx;
+
+            }
+            .item{
+                display: flex;
+                flex-wrap: wrap;
+                >text{
+                    min-width: 120rpx;
+                    height: 60rpx;
+                    background-color: #ececec;
+                    color: #999;
+                    text-align: center;
+                    line-height: 60rpx;
+                    box-sizing: border-box;
+                    border-radius: 6rpx;
+                    margin-right: 26rpx;
+                }
+                .xuanzhong{
+                    border: #ff780f 1rpx solid;
+                    color: #FF780F;
+                    background-color: #FFF1E6;
+                }
+            }
+        }
+        .num{
+            height: 84rpx;
+            display: flex;
+            border-bottom: #ececec solid 2rpx;
+            justify-content: space-between;
+            align-items: center;
+            >text{
+                font-size: 26rpx;
+                color: #666;
+            }
+        }
+    }
 </style>
\ No newline at end of file