app-AgricultureSmart/uniapp/components/my-card/my-card.vue

<template>
  <view class="card" :style="{ width: cardWidth, height: cardHeight }">
<!--    <view class="product-info">-->
<!--      <view class="product-name">{{ product.productName }}</view>-->
<!--      <view class="product-price">售价：{{ product.productSellPrice }}元</view>-->
<!--      <view v-if="product.productState === '售空'" class="product-state">{{ product.productState }}</view>-->
<!--    </view>-->
<!--    <view class="product-bid-price">原价：{{ product.productBidPrice }}元</view>-->
<!--    <view v-if="product.productInfo" class="product-info">{{ product.productInfo }}</view>-->
<!--    <view class="product-icon" @click.stop="goToDetailPage">-->
<!--      <image :src="product.productIcons" class="plus-icon"></image>-->
<!--      <text class="select-spec">选择规格</text>-->
<!--    </view>-->
    <view class="img">
      <image :src="product.productIcons" lazy-load="true" style="border-radius: 10px"></image>
    </view>
    <view class="info">
      <view class="title">{{ product.productName }}</view>
      <view v-if="product.productState === '售空'" class="state">{{ product.productState }}</view>
      <view class="price">售价：{{ product.productSellPrice }}元</view>
<!--  一个加号按钮表示添加商品    -->
      <view class="add" @click.stop="addCart">+</view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  props: {
    product:
    {
      type: Object,
      default: null
    },
    cardWidth: {
      type: String,
      default: '100%'
    },
    cardHeight: {
      type: String,
      default: 'auto'
    }
  },
  methods: {
    ...mapMutations('m_cart',['addToCart']),
    addCart() {
      let goods = {
        goods_id: this.product.id,
        goods_name: this.product.productName,
        goods_price: this.product.productSellPrice,
        goods_count: 1,
        goods_small_logo: this.product.productIcons,
        goods_state: true
      }
      this.addToCart(goods)
    },
    goToDetailPage() {
      // 跳转到商品详情页面，可以根据实际需求处理
      uni.navigateTo({
        url: `/pages/detail/detail?id=${this.id}`
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
}

.product-price {
  color: #f60;
}

.product-state {
  color: #f00;
}

.product-bid-price {
  color: #999;
  margin-top: 5rpx;
}

.product-info {
  font-size: 12px;
  color: #999;
  margin-top: 5rpx;
}

.product-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rpx;
}

.plus-icon {
  width: 20rpx;
  height: 20rpx;
  margin-right: 5rpx;
}

.select-spec {
  font-size: 14px;
  color: #333;
}


.card {
  display: flex;
  //align-items: first;
  flex-direction: row;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  //overflow: hidden;
}

.img image {
  width: 100%;
  height: 100%;
}

.info {
  flex: 1;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.state {
  color: #ff0000;
  font-size: 12px;
  margin-bottom: 5px;
}

.price {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.add {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: #07c160;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
</style>





<!--<template>-->
<!--  <view class="card" :style="{ width: cardWidth, height: cardHeight }" @click="handleClick">-->
<!--    <view class="product-info">-->
<!--      <view class="product-name">{{ product.productName }}</view>-->
<!--      <view class="product-price">售价：{{ product.productSellPrice }}元</view>-->
<!--      <view v-if="product.productState === '售空'" class="product-state">{{ product.productState }}</view>-->
<!--    </view>-->
<!--    <view class="product-bid-price">原价：{{ product.productBidPrice }}元</view>-->
<!--    <view v-if="product.productInfo" class="product-info">{{ product.productInfo }}</view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  props: {-->
<!--    product: {-->
<!--      type: Object,-->
<!--      required: true-->
<!--    },-->
<!--    cardWidth: {-->
<!--      type: String,-->
<!--      default: '100%'-->
<!--    },-->
<!--    cardHeight: {-->
<!--      type: String,-->
<!--      default: 'auto'-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleClick() {-->
<!--      // 处理点击事件，可以在父组件中监听该事件-->
<!--      this.$emit('click', this.id);-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.card {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  padding: 20rpx;-->
<!--  border-bottom: 1px solid #eee;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.product-info {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.product-name {-->
<!--  font-size: 16px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.product-price {-->
<!--  color: #f60;-->
<!--}-->

<!--.product-state {-->
<!--  color: #f00;-->
<!--}-->

<!--.product-bid-price {-->
<!--  color: #999;-->
<!--  margin-top: 5rpx;-->
<!--}-->

<!--.product-info {-->
<!--  font-size: 12px;-->
<!--  color: #999;-->
<!--  margin-top: 5rpx;-->
<!--}-->
<!--</style>-->


<!--<template>-->
<!--  <view class="card">-->

<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {};-->
<!--  },-->
<!--  props: {-->
<!--    id: {-->
<!--      type: Number,-->
<!--      default: 0-->

<!--    },-->
<!--    productState: {-->
<!--      type: String,-->
<!--      default: '充足'-->
<!--    },-->
<!--    productName: {-->
<!--      type: String,-->
<!--      default: '默认名称'-->
<!--    },-->
<!--    productBidPrice: {-->
<!--      type: Number,-->
<!--      default: 0-->
<!--    },-->
<!--    productSellPrice: {-->
<!--      type: Number,-->
<!--      default: 0-->
<!--    },-->
<!--    productInfo:{-->
<!--      type:String,-->
<!--      default:''-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->

<!--</style>-->