123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <template>
- <view class="goods-item" @click="toDetail">
- <view class="goods-imgs">
- <view v-if="data.status == 1" class="goods-staus">已售罄</view>
- <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
- </view>
- <view class="name ellipsis-two">{{data.name}}</view>
- <view class="price">
- <view>
- <text>{{data.price}}</text>
- <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
- </view>
- <view @click.stop="addCart">
- <u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- imgHeight: {
- type: Number,
- default: 250
- },
- data:{
- type: Object,
- default: function(){
- return {}
- }
- }
- },
- data() {
- return {
- loadingImg: '/static/loading.gif',
- errorImg: '/static/imgError.png'
- }
- },
- methods: {
- // 加入购物车
- addCart() {
- // 请求接口
- this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1
- },
- // 商品详情
- toDetail(){
- uni.navigateTo({
- url:"/pages/goods/goodsDetail?id="+this.data.id
- })
- }
- },
- }
- </script>
- <style lang="scss">
- .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: 10000;
- border-radius: 15rpx;
- 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;
- }
- }
- }
- }
- </style>
|