156 lines
4.6 KiB
Vue
156 lines
4.6 KiB
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>
|