123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <view class="goods-list">
- <view class="goods-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
- <view class="goods-imgs">
- <view v-if="item.inventoryQty == 0" class="goods-staus">已售罄</view>
- <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="item.homeImage" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
- </view>
- <view class="name ellipsis-two">{{item.name}}</view>
- <view class="price">
- <view>
- <text>{{item.sellGold}}</text>
- <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
- </view>
- <view @click.stop="addCart(item)" v-if="item.inventoryQty > 0">
- <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- imgHeight: {
- type: Number,
- default: 250
- },
- list:{
- type: Array,
- default: function(){
- return []
- }
- }
- },
- data() {
- return {
- loadingImg: '/static/loading.gif',
- errorImg: '/static/imgError.png',
- timer: null,
- finger: {x:0,y:0},
- linePos: null
- }
- },
- methods: {
- // 加入购物车
- addCart(item) {
- uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:1})
- },
- // 商品详情
- toDetail(item){
- uni.navigateTo({
- url:"/pages/goods/goodsDetail?id="+item.id
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .goods-list{
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- padding-top: 20upx;
- .goods-item{
- background: #FFFFFF;
- width: 48%;
- margin-bottom: 5upx;
- .goods-imgs{
- position: relative;
- border-radius: 28upx 28upx 0 0;
- overflow: hidden;
- .goods-staus{
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 100;
- border-radius: 15rpx 15rpx 0 0;
- background: rgba($color: #000000, $alpha: 0.4);
- text-align: center;
- line-height: 250rpx;
- left: 0;
- top: 0;
- color: #eee;
- font-size: 30upx;
- font-weight: bold;
- }
- }
- .name{
- padding: 10upx 20upx 0;
- font-weight: bold;
- }
- .price{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 15upx 20upx;
- text{
- color: #d42a26;
- font-size: 36upx;
- margin-right: 6upx;
- font-weight: bold;
- }
- >view{
- &:first-child{
- font-size: 22upx;
- display: flex;
- align-items: center;
- }
- &:last-child{
- &:active{
- opacity: 0.5;
- }
- }
- }
- }
- }
- }
- </style>
|