135 lines
3.8 KiB
Vue
135 lines
3.8 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="商品规格" 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>
|