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="商品规格" @tap="pickerProperty" name="specType" label-position="left" required>
                    <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>