mall-app-t/pages/product/sku.vue

<template>
  <pb-layout class="goods-property" title="商品属性" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
    opacityBgUi="bg-white" color="black">
    <view class="property">
      <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
        <uni-forms-item label="商品规格" name="specType" label-position="left" required>
          <view style="width: 100%; height: 100%; position: absolute; z-index: 1" @tap="pickerProperty">
          </view>
          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
            :inputBorder="false" v-model="formData.specText" placeholder="请选择商品规格" disabled>
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>
    <template v-if="formData.specType">
      <!-- 添加商品 -->
      <button v-if="canEdit" class="ss-reset-button add-property" @tap="showPropertyList">选择规格</button>
      <!-- 商品属性展示 -->
      <property-detail v-if="propertyList.length > 0" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
        @changeSubProperty="changeSubProperty"></property-detail>
      <!-- 多规格商品 -->
      <mutiple-sku :skus="skus"></mutiple-sku>
    </template>

    <template v-else>
      <!-- 单规格商品 -->
      <SkuItem :skus="skus" />
    </template>

    <!-- 确认选择 -->
    <view style="padding: 0 40rpx 40rpx" @tap="submitProperty" v-if="canEdit">
      <button class="ss-reset-button submit-button ui-Shadow-Main">保存</button>
    </view>

    <!-- 商品规格 -->
    <p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>

    <!-- 商品属性列表 -->
    <PropertyList ref="propertyListRef" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
      @confirm="onPropertyConfirm" />
  </pb-layout>
</template>

<script setup>
import SkuItem from './components/item'
import MutipleSku from './components/mutipleSku'
import PropertyList from './components/propertyList'
import PropertyDetail from './components/propertyDetail'
import { SPEC_TYPE } from './js/config'
import {
  initial,
  canEdit,
  pickerRef,
  propertyListRef,
  onRDPickerConfirm,
  formData,
  propertyList,
  onPropertyConfirm,
  showPropertyList,
  goodsPropertyList,
  pickerProperty,
  skus,
  changeSubProperty,
  submitProperty,
} from './js/sku'

const bgStyle = {
  backgroundImage: '',
  backgroundColor: '#fff',
  description: '',
}

initial()
</script>

<style lang="scss" scoped>
.goods-property {
  .property {
    margin: 40rpx;

    :deep() {
      .uni-easyinput__content-input {
        font-size: 28rpx !important;
        color: #333333 !important;
        line-height: normal !important;
      }

      .uni-easyinput__placeholder-class {
        font-size: 14px;
      }

      .is-direction-left {
        .uni-forms-item__label {
          padding-left: 10px;
          background-color: #f9f9f9;
          border-radius: 10px 0 0 10px;
        }

        uni-icons {
          margin-right: 10px;
        }

        .uni-easyinput__content {
          border-radius: 0 10px 10px 0;
        }
      }

      .is-disabled {
        color: #333333;
        text-align: right;
      }
    }
  }

  .add-property {
    margin: 40rpx;
    border: 1px dotted var(--ui-BG-Main);
    color: var(--ui-BG-Main);
    border-radius: 10px;
    text-align: center;
  }

  .submit-button {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: $white;
  }
}
</style>