332 lines
7.2 KiB
Vue
332 lines
7.2 KiB
Vue
<template>
|
||
<view class="page min-page">
|
||
<view class="box">
|
||
<view class="block border-top-0 u-p-t-32 u-p-b-32">
|
||
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<up-form ref="formRef" labelPosition="top" :model="vdata.formData" :rules="vdata.rules" labelWidth="80" :labelStyle="{fontWeight:'bold'}">
|
||
<up-form-item label="规格名称" prop="name" borderBottom >
|
||
<up-input v-model="vdata.formData.name" border="none" placeholder="规格名称,如:衣服" ></up-input>
|
||
</up-form-item>
|
||
<up-form-item label="规格级别" prop="level" borderBottom @click="vdata.showLevel = true;">
|
||
<up-input v-model="vdata.levelName" readonly border="none" placeholder="请选择规格级别" ></up-input>
|
||
</up-form-item>
|
||
<up-form-item label="排序" prop="sort" borderBottom >
|
||
<up-input v-model="vdata.formData.sort" border="none" placeholder="请输入排序" ></up-input>
|
||
</up-form-item>
|
||
<up-form-item label="上级规格" prop="pid" borderBottom @click="vdata.showSpec = true;">
|
||
<up-input v-model="vdata.pidName" readonly border="none" placeholder="请选择上级规格" ></up-input>
|
||
</up-form-item>
|
||
</up-form>
|
||
</view>
|
||
|
||
|
||
<view class="save-btn-box">
|
||
<button class="save-btn " hover-class="btn-hover-class" @click="save">保存</button>
|
||
</view>
|
||
</view>
|
||
|
||
<up-action-sheet
|
||
:show="vdata.showLevel"
|
||
:actions="vdata.levelList"
|
||
title="请选择规格级别"
|
||
@close="vdata.showLevel = false"
|
||
@select="levelSelect"
|
||
></up-action-sheet>
|
||
<up-action-sheet
|
||
:show="vdata.showSpec"
|
||
:actions="vdata.specList"
|
||
title="请选择规格级别"
|
||
@close="vdata.showSpec = false"
|
||
@select="specSelect"
|
||
></up-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, nextTick, ref } from 'vue';
|
||
import { onLoad, onReady, } from '@dcloudio/uni-app';
|
||
|
||
import infoBox from '@/commons/utils/infoBox.js'
|
||
import { getSpecList, addSpec, updateSpec } from '@/api/product.js'
|
||
|
||
const option = {
|
||
type: 'add',
|
||
id: undefined
|
||
}
|
||
const formRef = ref(null)
|
||
const vdata = reactive({
|
||
showLevel: false,
|
||
showSpec: false,
|
||
levelList: [
|
||
{ name: "一级", value: 1},
|
||
{ name: "二级", value: 2},
|
||
{ name: "三级", value: 3}
|
||
],
|
||
levelName: "",
|
||
pidName: "",
|
||
formData: {
|
||
id: null,
|
||
name: "",
|
||
level: "",
|
||
sort: "",
|
||
pid: "",
|
||
},
|
||
rules: {
|
||
"name": {
|
||
required: true,
|
||
message: '请输入规格名称',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
"level": {
|
||
required: true,
|
||
message: '请选择规格级别',
|
||
trigger: ['blur', 'input'],
|
||
},
|
||
"sort": {
|
||
required: true,
|
||
message: '请输入排序',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
"pid": {
|
||
required: true,
|
||
message: '请选择上级规格',
|
||
trigger: ['blur', 'input'],
|
||
},
|
||
},
|
||
specList: []
|
||
})
|
||
|
||
onReady(()=>{
|
||
})
|
||
//表单验证
|
||
onLoad(opt => {
|
||
console.log(opt);
|
||
if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
|
||
option.type = opt.type
|
||
const data = uni.getStorageSync('spec')
|
||
uni.removeStorageSync('spec')
|
||
if(data){
|
||
vdata.formData.id = data.id
|
||
vdata.formData.name = data.name
|
||
vdata.formData.level = data.level
|
||
vdata.formData.sort = data.sort
|
||
vdata.formData.pid = data.pid
|
||
vdata.levelName = vdata.levelList.filter(item => item.value == vdata.formData.level)[0].name
|
||
}
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
|
||
})
|
||
getSpecData()
|
||
})
|
||
|
||
/**
|
||
* 获取规格列表
|
||
*/
|
||
function getSpecData(){
|
||
getSpecList({page: 0, size:10}).then(res=>{
|
||
vdata.specList = [{name: '顶级',id: 0},...res]
|
||
if(vdata.formData.id){
|
||
vdata.pidName = vdata.specList.filter(item => item.id == vdata.formData.pid)[0].name
|
||
}
|
||
})
|
||
}
|
||
|
||
function levelSelect (e) {
|
||
console.log(e)
|
||
vdata.levelName = e.name;
|
||
vdata.formData.level = e.value;
|
||
}
|
||
|
||
function specSelect (e) {
|
||
console.log(e)
|
||
vdata.pidName = e.name;
|
||
vdata.formData.pid = e.id;
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
async function save() {
|
||
|
||
if (option.type === 'add') {
|
||
return addSpec(vdata.formData).then(res => {
|
||
infoBox.showToast('添加成功')
|
||
settimeoutBack(1500)
|
||
})
|
||
}
|
||
updateSpec(vdata.formData).then(res => {
|
||
infoBox.showToast('修改成功')
|
||
settimeoutBack(1500)
|
||
})
|
||
}
|
||
let timer = null
|
||
function settimeoutBack(time) {
|
||
clearTimeout(timer)
|
||
timer = setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, time)
|
||
}
|
||
|
||
</script>
|
||
<style scoped>
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
$icon-size: 34rpx;
|
||
$icon-line-width: 20rpx;
|
||
$icon-line-height: 4rpx;
|
||
|
||
.page {
|
||
background: #F9F9F9;
|
||
padding: 32rpx 30rpx 0 30rpx;
|
||
padding-bottom: 200rpx;
|
||
}
|
||
::v-deep .uni-forms-item--border {
|
||
padding-top: 12px;
|
||
padding-bottom: 12px;
|
||
}
|
||
.my-switch {
|
||
transform: scale(0.7);
|
||
}
|
||
::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
|
||
padding-bottom: 8px;
|
||
}
|
||
::v-deep .uni-easyinput__content-input{
|
||
height: inherit;
|
||
}
|
||
::v-deep.uni-forms-item {
|
||
min-height: inherit;
|
||
}
|
||
::v-deep .uni-forms-item__error {
|
||
display: none !important;
|
||
}
|
||
|
||
::v-deep .option .uni-forms-item {
|
||
padding: 0;
|
||
min-height: inherit;
|
||
background-color: transparent;
|
||
border-top: none;
|
||
}
|
||
|
||
.icon {
|
||
width: $icon-size;
|
||
height: $icon-size;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
|
||
&:before,
|
||
&::after {
|
||
position: absolute;
|
||
display: block;
|
||
content: '';
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.icon-add {
|
||
background-color: $my-main-color;
|
||
|
||
&::before {
|
||
width: $icon-line-height;
|
||
height: $icon-line-width;
|
||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||
}
|
||
|
||
&::after {
|
||
width: $icon-line-width;
|
||
height: 4rpx;
|
||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||
}
|
||
}
|
||
|
||
.icon-reduce {
|
||
background-color: $my-red-color;
|
||
|
||
&::after {
|
||
width: $icon-line-width;
|
||
height: $icon-line-height;
|
||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||
}
|
||
}
|
||
|
||
.label-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
}
|
||
|
||
.lh40 {
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.box {
|
||
font-size: 28rpx;
|
||
.block {
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
padding: 0 24rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
.save-btn-box {
|
||
position: fixed;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
bottom: 60rpx;
|
||
|
||
}
|
||
|
||
::v-deep.uni-forms-item {
|
||
align-items: inherit;
|
||
}
|
||
|
||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||
text-indent: 0;
|
||
font-size: 28rpx !important;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
.save-btn {
|
||
background-color: $my-main-color;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.btn-hover-class {
|
||
opacity: .6;
|
||
}
|
||
|
||
.zuofa {
|
||
padding: 28rpx 0;
|
||
background: #F9F9F9;
|
||
padding-left: 42rpx;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
}
|
||
|
||
::v-deep .uni-input-placeholder {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.option {
|
||
padding: 8rpx 24rpx 32rpx 24rpx;
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.option-item {
|
||
}
|
||
</style> |