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

<template>
  <view @click="nevigateToDetail(shopId)">
  <view class="shop-card">
    <view class="shop-info">
      <image :src="shopIcon" class="shop-icon"></image>
      <view class="shop-details">
        <view class="shop-name">{{ shopName }}</view>
        <view class="shop-extra">
          <text>月售{{ shopInfo+' ' }} </text>
          <text>{{' ' + shopdistance }}km</text>
        </view>
        <view class="shop-rating">
          <van-rate :value="mark" disabled size="18" />
        </view>
      </view>
    </view>
    <view class="shop-right">
      <view class="shop-tags">
        <view class="tag" v-for="(item, index) in tag" :key="index">{{ item }}</view>
      </view>
      <view class="shop-coupons">
        <view class="coupon" v-for="(coupon, index) in coupon" :key="index">
<!--          <view class="coupon-title">{{ coupon.title }}</view>-->
          <view class="coupon-desc">{{ coupon.desc }}</view>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  props: {
    shopId: { default: 0 },
    shopName: { default: '麦当劳' },
    shopIcon: { default: '../../static/R.jpg' },
    shopInfo: { default: '月售10单' },
    shopdistance: { default: 2.5 },
    tag: { default: () => ['新建路炸鸡热销榜第2名'] },
    coupon: {
      default: () => [
        { desc: '满20减2', full: 20, count: 2 },
        { desc: '满50减8', full: 50, count: 8 }
      ]
    },
    mark: { default: 4.5 }
  },
  methods: {
    nevigateToDetail(item){
      console.log(item)
      console.log(this.shopId)
      console.log('这里')
      uni.navigateTo({
        url: `/subpkg/shopdetail/shopdetail?shopID=${JSON.stringify(item)}`
      })
    },
  },
}
</script>

<style lang="scss">
.shop-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 10%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-icon {
  width: 60px;
  height: 60px;
  border-radius: 20%;
  margin-right: 15px;
}

.shop-details {
  display: flex;
  flex-direction: column;
}

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

.shop-extra {
  font-size: 13px;
  color: #999;
  margin-top: 5px;
}

.shop-rating {
  margin-top: 5px;
}

.shop-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.shop-tags {
  display: flex;
  margin-bottom: 10px;
}

.tag {
  background-color: #f5f5f5;
  color: red;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 10px;
  margin-left: 5px;
}

.shop-coupons {
  display: flex;
  flex-direction: column;
}

.coupon {
  background-color: #fef0e5;
  color: #e6a23c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 10px;
  margin-bottom: 5px;
}

.coupon-title {
  font-weight: bold;
  font-size: 13px;
}
</style>
<!--<template>-->
<!--  <view class="shop-card">-->
<!--    <view class="shop-info">-->
<!--      <image :src="shopIcon" class="shop-icon"></image>-->
<!--      <view class="shop-details">-->
<!--        <view class="shop-name">{{ shopName }}</view>-->
<!--        <view class="shop-extra">-->
<!--          <text>{{ shopInfo }}</text>-->
<!--          <text>{{ shopdistance }}km</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="shop-tags">-->
<!--      <view class="tag" v-for="(item, index) in tag" :key="index">{{ item }}</view>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {};-->
<!--  },-->
<!--  props: {-->
<!--    shopId: {default:0},-->
<!--    shopName: {default:'麦当劳'},-->
<!--    shopIcon: {default:'../../static/R.jpg'},-->
<!--    shopInfo: {default:'月售10单'},-->
<!--    shopdistance: {default:2.5},-->
<!--    tag: {default:['新建路炸鸡热销榜第2名']},-->
<!--    coupon: {default:[{title:'满减优惠',desc:'满20减2',full:20,count:2},{title:'满减优惠',desc:'满50减8',full:50,count:8}]},-->
<!--    mark: {default:4.5},-->


<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.shop-card {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 10px;-->
<!--  background-color: #fff;-->
<!--  border-radius: 5px;-->
<!--  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.shop-info {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.shop-icon {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.shop-details {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.shop-name {-->
<!--  font-weight: bold;-->
<!--}-->

<!--.shop-extra {-->
<!--  font-size: 12px;-->
<!--  color: #999;-->
<!--}-->

<!--.shop-tags {-->
<!--  display: flex;-->
<!--}-->

<!--.tag {-->
<!--  background-color: #f5f5f5;-->
<!--  color: #333;-->
<!--  padding: 5px 10px;-->
<!--  border-radius: 15px;-->
<!--  font-size: 12px;-->
<!--  margin-left: 5px;-->
<!--}-->
<!--</style>-->


<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <view>&ndash;&gt;-->

<!--&lt;!&ndash;  </view>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  data() {&ndash;&gt;-->
<!--&lt;!&ndash;    return {};&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  props: {&ndash;&gt;-->
<!--&lt;!&ndash;    shopId:0,&ndash;&gt;-->
<!--&lt;!&ndash;    shopName:'麦当劳',&ndash;&gt;-->
<!--&lt;!&ndash;    shopIcon:'../../static/R.jpg',&ndash;&gt;-->
<!--&lt;!&ndash;    shopInfo:'月售10单',&ndash;&gt;-->
<!--&lt;!&ndash;    shopdistance:2.5,&ndash;&gt;-->
<!--&lt;!&ndash;    tag:['新建路炸鸡热销榜第2名'],&ndash;&gt;-->

<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;<style lang="scss">&ndash;&gt;-->

<!--&lt;!&ndash;</style>&ndash;&gt;-->