mall-app-t/pages/product/components/propertyDetail.vue

<template>
  <view class="property-detail">
    <template v-for="item in goodsPropertyList" :key="item.id">
      <view class="property-item ss-p-40 ss-gap-40" v-if="item.checked">
        <view class="property-name ss-flex ss-gap-40 ss-m-b-20">
          <view class="property-name-text">规格名</view>
          <view class="property-name-value">{{ item.name }}</view>
        </view>
        <view class="property-value ss-flex ss-gap-40">
          <view class="property-value-text">规格值</view>
          <view class="property-value-value ss-flex ss-gap-10">
            <view
              v-for="sitem in item.propertyValues"
              @tap="chooseProperty(sitem)"
              @longpress="longPropertyValuePress(sitem)"
              :class="['item', sitem.checked ? 'active' : '']"
              >{{ sitem.name }}</view
            >
          </view>
          <view v-if="canEdit" style="height: 60rpx" @click="addPropertyValueClick(item)">
            <text style="color: #ff3300; font-size: 30px" class="cicon-add-round-o"></text>
          </view>
        </view>
      </view>
    </template>
    <uni-popup ref="inputPropertyValueDialogRef" type="dialog">
      <uni-popup-dialog
        mode="input"
        :title="propertyValueTitle"
        v-model="inputPropertyValueFormdata.name"
        placeholder="请输入商品规格"
        :before-close="true"
        @confirm="dialogInputPropertyValueConfirm"
        @close="inputPropertyValueDialogRef.close()"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed } from 'vue'
import {
  goodsPropertyList,
  canEdit,
  addPropertyValueClick,
  inputPropertyValueDialogRef,
  inputPropertyValueFormdata,
  propertyValueTitle,
  dialogInputPropertyValueConfirm,
  longPropertyValuePress,
} from '../js/sku'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  goodsPropertyList: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['changeSubProperty'])

function chooseProperty(item) {
  if (canEdit.value) {
    item.checked = !item.checked
    emit('changeSubProperty')
  }
}
</script>

<style lang="scss" scoped>
.property-detail {
  .property-item {
    margin: 0 40rpx 20rpx;
    background-color: #f9f9f9;
    border-radius: 10px;

    .property-name {
      .property-name-text {
        color: #606266;
      }
    }

    .property-value {
      .property-value-text {
        color: #606266;
      }

      .property-value-value {
        .item {
          text-align: center;
          line-height: 60rpx;
          height: 60rpx;
          padding: 0 10px;
          border-radius: 10px;
          background-color: var(--ui-BG-4);
        }

        .active {
          color: #fff;
          background-color: var(--ui-BG-Main);
        }
      }
    }
  }
}
</style>