theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

弹出曾

Browse Source
This commit is contained in:
luyuan 2020-07-06 10:25:54 +08:00
parent 6f0c86c58f
commit 709a315403
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
1 changed files with 129 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
pageB/components/sdetails/tloos.vue
View File

@ -1,24 +1,61 @@
<template> <template>
<view class="tloos"> <view>
<view class="navs"> <view class="tloos">
<image></image> <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>
<view class="navs" style="margin-right:30rpx"> <u-popup v-model="show" mode="bottom">
<image></image> <view class="popup">
客服 <view class="head">
</view> <image class="image"></image>
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view> <view class="info">
<view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view> <text class="u-line-2">套装新款小个子春季时尚韩版短袖衬
<view class="button" style="background:rgba(255,120,15,1);">立即购买</view> 衫套装新款小个子春季时尚韩版...套装新款小个子春季时尚韩版短袖衬衫套装新款小个子春季时尚韩版...</text>
<u-toast ref="uToast" /> <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> </view>
</template> </template>
<script> <script>
export default { export default {
name:"tloos", name:"tloos",
props: ['id'], props: ['id'],
data(){
return {
show:true,
value:1
}
},
methods: { methods: {
//添加购物车
addCart() { addCart() {
this.$u.api.addCart({ this.$u.api.addCart({
goods_id: this.id, goods_id: this.id,
@ -29,7 +66,13 @@ export default {
type: res.errCode == 0 ? 'success' : 'warning', type: res.errCode == 0 ? 'success' : 'warning',
}) })
}) })
} },
buy(type){
this.show = true
},
valChange(e) {
console.log('当前值为: ' + e.value)
}
}, },
} }
</script> </script>
@ -42,6 +85,7 @@ export default {
width: 100%; width: 100%;
bottom:0; bottom:0;
border-top: 1rpx solid #ececec; border-top: 1rpx solid #ececec;
z-index: 1000000;
.navs{ .navs{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -67,5 +111,77 @@ export default {
color: #fff; 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> </style>