112 lines
3.3 KiB
Vue
112 lines
3.3 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="pickerRef.onOpen([0])"
|
|
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 class="ss-reset-button add-property" @tap="propertyListRef.onOpen()">+添加规格</button>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<SkuItem />
|
|
</template>
|
|
|
|
<p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
|
|
|
|
<PropertyList ref="propertyListRef" v-model="propertyList" @confirm="onPropertyConfirm" />
|
|
</pb-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SkuItem from './components/item'
|
|
import PropertyList from './components/propertyList'
|
|
import { SPEC_TYPE } from './js/config'
|
|
import { pickerRef, propertyListRef, onRDPickerConfirm, formData, propertyList, onPropertyConfirm } from './js/sku'
|
|
|
|
const bgStyle = {
|
|
backgroundImage: '',
|
|
backgroundColor: '#fff',
|
|
description: '',
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
</style>
|