shop-applet/pages/nongKe/cpns/goodsPopup.vue

153 lines
3.1 KiB
Vue
Raw Normal View History

2023-09-20 18:16:59 +08:00
<template>
<u-popup :show="goodsStatu" mode="bottom" :closeOnClickOverlay="false">
<view class="goodsPopup">
<view class="close" @click="colse">关闭</view>
<view class="container">
<!-- <image src="" /> -->
<view class="content">
<view class="image">
<image :src="info.image" />
</view>
<view class="content_info">
<view>{{ info.store_name }}</view>
<view>:{{ info.price * info.num }}</view>
<view>库存:{{ info.stock }}</view>
</view>
</view>
<view class="goods_num">
<view>数量</view>
<view class="shop_num">
<view class="shop_box" @click="addor(-1)">-</view>
<view class="num">{{ info.num }}</view>
<view class="shop_box" @click="addor(+1)">+</view>
</view>
</view>
</view>
<view class="shopgo" @click="handel">添加到购物车</view>
</view>
</u-popup>
</template>
<script>
export default {
props: {
goodsStatu: {
type: Boolean,
default: false
},
//商品参数
goods_info: {
type: Object,
default: {}
}
},
data() {
return {
info: this.goods_info,
};
},
onLoad() {
},
methods: {
addor(item, index) {
this.info.num += item;
if (this.info.num <= 0) {
// console.log(goods_info);
this.info.num = 1;
}
},
// 返回修改过后的商品参数给父组件
handel() {
this.$emit("change", this.info);
},
colse() {
this.$emit("colses", true);
}
}
};
</script>
<style lang="scss" scoped>
.goodsPopup {
display: flex;
position: relative;
height: 30vh;
.close {
position: absolute;
top: 10rpx;
right: 10rpx;
}
.container {
width: 100%;
.content {
width: 90%;
display: flex;
margin: auto;
.image {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
>image {
width: 100%;
height: 100%;
}
}
.content_info :nth-child(1) {
font-size: 36rpx;
}
.content_info :nth-child(2) {
font-size: 32rpx;
color: #fe9a10;
}
.content_info :nth-child(3) {
color: #666;
}
}
.goods_num {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
.shop_num {
display: flex;
>view {
width: 80rpx;
height: 40rpx;
border: 1px solid;
text-align: center;
}
.num {
border-left: 0;
border-right: 0;
}
}
}
}
.shopgo {
position: absolute;
bottom: 50rpx;
left: 50%;
transform: translate(-50%, 0);
width: 200rpx;
background: red;
line-height: 80rpx;
text-align: center;
border-radius: 40rpx;
color: #fff;
}
}
</style>