diff --git a/common/api/shop.js b/common/api/shop.js
index 78db241..6d025d9 100644
--- a/common/api/shop.js
+++ b/common/api/shop.js
@@ -127,6 +127,11 @@ export default {
 				return vm.$u.post('Store/getStoreImgVideoList', {
 					id: id
 				});
+			},
+			goodsInfo({id}){
+				return vm.$u.post('goods/goodsInfo', {
+					goods_id: id
+				});
 			}
         }
     }
diff --git a/pageB/components/sdetails/guige.vue b/pageB/components/sdetails/guige.vue
new file mode 100644
index 0000000..d37f122
--- /dev/null
+++ b/pageB/components/sdetails/guige.vue
@@ -0,0 +1,64 @@
+<template>
+     <view class="guige">
+        <view class="title">
+            {{title}}
+        </view>
+        <view class="item">
+            <text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
+                {{i}}
+            </text>
+            <!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
+            <!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+    .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;
+                }
+            }
+        }
+</style>
+<script>
+export default {
+    name:"guige",
+    data(){
+        return {
+            select:0
+        }
+    },
+    props:['item','title'],
+    watch:{
+        select(){
+            // console.log(this.select)
+            this.$emit("sel",this.select)
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/pageB/components/sdetails/tloos.vue b/pageB/components/sdetails/tloos.vue
index 8c4cd7e..354cfe0 100644
--- a/pageB/components/sdetails/tloos.vue
+++ b/pageB/components/sdetails/tloos.vue
@@ -1,36 +1,109 @@
 <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>
+            
         </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">
+                <scroll-view scroll-y="true" class="popup">
+                    <view>
+                    <view class="head">
+                        <image class="image" :src="info.goods_image"></image>
+                        <view class="info">
+                            <text class="u-line-2">{{info.goods_name}}</text>
+                            <text>￥{{info.goods_price}}</text>
+                        </view>
+                    </view>
+                   <guige @sel="self" ref="guige"  v-for="(item,index) in info.spec_value" :key="index" :title="info.spec_name[index]" :item="item"></guige>
+                    <view class="num">
+                        <text>购买数量</text>
+                        <u-number-box v-model="value" @change="valChange"></u-number-box>
+                    </view>
+                    <view style="height:180rpx"></view>
+                    </view>
+        <u-toast ref="uToast" />
+
+                </scroll-view>
+            </u-popup>
     </view>
+    
 </template>
 <script>
+import guige from "./guige"
 export default {
 	name:"tloos",
-	props: ['id'],
+	props: ['id','info'],
+    components:{
+        guige
+    },
+    data(){
+        return {
+            show:false,
+            value:1,
+            sel:"",
+            quanxuan:false
+        }
+    },
 	methods: {
-		addCart() {
-			this.$u.api.addCart({
-				goods_id: this.id,
-				quantity: 1,
-			}).then(res => {
-				this.$refs.uToast.show({
-					title: res.message,
-					type: res.errCode == 0 ? 'success' : 'warning',
-				})
-			})
-		}
-	},
+        buy(type){
+            let that = this;
+            if(this.show){
+                if(this.info.spec_value == null){
+                    this.$emit("buy",{type,value:that.value})
+                }else if(this.quanxuan){
+                    this.$emit("buy",{type,value:that.value})
+                }else{
+                    this.$refs.uToast.show({
+                        title: '请选择规格',
+                        type:  'warning',
+                    })
+                }
+            }else{
+                this.show = true
+            }
+            
+        },
+        valChange(e) {
+            console.log(this.value)
+        },
+        self(){
+            // console.log(this.$refs.guige)
+            let index = 0;
+            let arr = [];
+            for(let i in this.info.spec_value){
+                // console.log(i)
+                // console.log(this.$refs.guige[index++].select)
+                // index++;
+                let sel = this.$refs.guige[index++].select
+                if(sel != 0){
+                    arr.push(sel)
+                }
+
+            }
+            // console.log(arr.length)
+            if(arr.length == index){
+                this.sel = arr.join("|")
+                this.quanxuan = true
+                // console.log(this.sel)
+            }
+        }
+    },
+    watch:{
+        sel(){
+            // console.log(this.sel)
+            this.$emit('xuanze',this.sel)
+        }
+    }
 }
 </script>
 <style lang="scss" scoped>
@@ -42,6 +115,7 @@ export default {
     width: 100%;
     bottom:0;
     border-top: 1rpx solid #ececec;
+    z-index: 1000000;
     .navs{
         display: flex;
         flex-direction: column;
@@ -67,5 +141,48 @@ export default {
         color: #fff;
 
     }
+  
 }
+  .popup{
+        padding: 30rpx;
+        box-sizing: border-box;
+        max-height: 750rpx;
+        .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;
+                }
+            }
+        }
+    
+        .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
diff --git a/pageB/sdetails/index.vue b/pageB/sdetails/index.vue
index 2d036fa..296bd8a 100644
--- a/pageB/sdetails/index.vue
+++ b/pageB/sdetails/index.vue
@@ -23,18 +23,22 @@
 		<view class="rich">
 			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
 		</view>
-        <tloos :id="goodsInfo.goods_commonid"></tloos>
+        <tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info"></tloos>
+        <u-toast ref="uToast" />
     </view>
 </template>
 <script>
 import navs from "../components/sdetails/navs"
 import tloos from "../components/sdetails/tloos"
-export default {
+export default { 
     name:"sdetails",
     data() {
         return {
             list: [],
-			goodsInfo: {},
+            goodsInfo: {},
+            info:{},
+            glist:[],
+            id:0
         }
 	},
     components:{
@@ -42,10 +46,25 @@ export default {
         tloos
     },
 	onLoad(option) {
-		this.getGoodsDetails(option.id);
+        this.getGoodsDetails(option.id);
+       
 	},
 	methods: {
+        buy(info){
+            if(info.type == 2){
+                this.$u.api.addCart({
+                    goods_id: this.id,
+                    quantity: info.value,
+                }).then(res => {
+                    this.$refs.uToast.show({
+                        title: res.errCode[1],
+                        type: res.errCode == 0 ? 'success' : 'warning',
+                    })
+                })
+            }
+        },
 		getGoodsDetails(id) {
+            this.id = id;
 			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
 				if (res.errCode == 0) {
 					this.goodsInfo = res.data;
@@ -58,8 +77,17 @@ export default {
 					// console.log(this.goodsInfo.mobile_body);
 					
 				}
-			})
-		}
+            })
+            this.$u.api.goodsInfo({id}).then((res)=>{
+                console.log(res)
+                this.info = res.data.goods;
+                this.glist = res.data.spec_list;
+            })
+        },
+        xuanze(id){
+            console.log(id)
+            this.getGoodsDetails(this.glist[id])
+        }
 	},
 }
 </script>