health-front/pages_order/cart/productCard.vue

<template>
  <view class="flex card">
    <view>
      <uv-checkbox-group
        v-model="checkboxValue"
        shape="circle"
        @change="onCheckChange"
      >
        <uv-checkbox
          size="36rpx"
          icon-size="36rpx"
          activeColor="#7451DE"
          :name="1"
        ></uv-checkbox>
      </uv-checkbox-group>
    </view>
    <view class="flex right" @click="jumpToProductDetail">
      <view class="img-box">
        <image class="img" :src="coverImg" mode="aspectFit"></image>
      </view>
      <view class="info">
        <view class="title">{{ data.product.name }}</view>
        <!-- <view class="desc">{{ data.desc }}</view> -->
        <view class="flex price-box">
          <view class="flex price">¥<text class="highlight">{{ data.currentPrice }}</text></view>
        </view>
        <view class="flex tool">
          <view class="flex count">
            规格：<text class="highlight">{{ data.specName || '' }}</text>
            <uv-icon name="arrow-down" color="#7451DE" size="24rpx" :bold="true"></uv-icon>
          </view>
          <button class="flex btn" @click.stop="openPicker">编辑</button>
        </view>
      </view>
    </view>
    
    <view v-if="data.customized" class="sup customized">
      定制组合
    </view>
    <view v-else-if="data.free" class="sup free">
      自定组合
    </view>

    <specOptionsPopup ref="specOptionsPopup" :value="data.specId" :data="data.product" @confirm="onSpecChange"></specOptionsPopup>

  </view>
</template>

<script>
  import specOptionsPopup from '@/pages_order/product/specOptionsPopup.vue'

  export default {
    components: {
      specOptionsPopup,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      mode: {
        type: String,
        default: 'read'
      },
    },
    data() {
      return {
        checkboxValue : [],
      }
    },
    computed: {
      checked: {
        set(val) {
          this.checkboxValue = val ? [1] : []

          if (this.data.selected == val) {
            return
          }
          this.$emit('select', val)
        },
        get() {
          return this.checkboxValue[0] == 1 ? true : false
        }
      },
      coverImg() {
        const { product } = this.data || {}
        const { image } = product || {}
        
        return image?.split(',')?.[0] || '' 
      },
      specOptionsPopupData() {
        const { product } = this.data || {}

        return {
          ...product,
          specs: this.specs,
        }
      },
    },
    watch: {
      data: {
        handler(val) {
          console.log('card data', this.data)
          this.checked = val.selected
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      onCheckChange(arr) {
        this.checked = arr[0] == 1 ? true : false
      },
			openPicker() {
        this.$refs.specOptionsPopup.open()
			},
      onSpecChange(target) {
        this.$emit('change', target)
      },
      jumpToProductDetail() {
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.productId}`)
      },
    },
  }
</script>

<style scoped lang="scss">
.card {
  position: relative;
  height: 240rpx;
  padding: 0 32rpx;
  background-image: linear-gradient(#FAFAFF, #F3F3F3);
  border: 2rpx solid #FFFFFF;
  border-radius: 32rpx;
  box-sizing: border-box;
  column-gap: 24rpx;
  overflow: hidden;

  /deep/ .uv-checkbox__label-wra {
    padding: 0;
  }
}

.right {
  flex: 1;
  column-gap: 24rpx;
}

.img {
  &-box {
    width: 144rpx;
    height: 144rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }

  width: 100%;
  height: 100%;
}

.info {
  flex: 1;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 1.4;
  font-size: 26rpx;
  color: #8B8B8B;

  .title {
    font-weight: 600;
    font-size: 28rpx;
    color: #000000;
  }

  .desc {
    margin-top: 8rpx;
    line-height: 1.5;
  }

  .price {
    &-box {
      margin-top: 8rpx;
      justify-content: flex-start;
      column-gap: 20rpx;
    }

    font-weight: 600;
    font-size: 24rpx;
    color: #7451DE;

    .highlight {
      margin: 0 8rpx;
      font-size: 32rpx;
    }

    &-origin {
      font-size: 28rpx;
      line-height: 1;
      text-decoration: line-through;
    }
  }

  .tool {
    margin-top: 8rpx;
    justify-content: space-between;

    .count {
      .highlight {
        margin: 0 8rpx;
        color: #252545;
      }
    }

    .btn {
      padding: 8rpx 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      line-height: 1.5;
      color: #FFFFFF;
      background: #7451DE;
      border-radius: 30rpx;
    }
  }
}

.sup {
  position: absolute;
  top: 28rpx;
  right: -60rpx;
  padding: 5rpx 52rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  line-height: 1.5;
  white-space: nowrap;
  transform: rotate(45deg);
  
  &.customized {
    color: #FFFFFF;
    background: #252545;
  }

  &.free {
    color: #252545;
    background: #D7D7FF;
  }
}
</style>