代码更新
This commit is contained in:
GaoHao
@@ -2,276 +2,104 @@
|
||||
<view class="page min-page">
|
||||
<view class="box">
|
||||
<view class="block border-top-0 u-p-t-32 u-p-b-32">
|
||||
<uni-forms ref="nameFormRef" :model="specifications" :rules="rules" :label-width="350"
|
||||
label-position="top" validateTrigger="blur">
|
||||
<uni-forms-item label="模版名称" required name="name">
|
||||
<uni-easyinput padding-none :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="specifications.name" placeholder="模版名称,如:衣服" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view v-for="(item,index) in specifications.list" :key="index">
|
||||
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
|
||||
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
|
||||
|
||||
<view class="block">
|
||||
<view class="border-top-0">
|
||||
<uni-forms-item label="规格组名" required name="name">
|
||||
<uni-easyinput padding-none :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.name" placeholder="规格组名,如:尺码" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="u-p-b-8">
|
||||
<uni-forms-item label="规格值">
|
||||
<view class="option ">
|
||||
<view class="">
|
||||
<view class="u-flex option-item u-m-t-8" v-for="(option,optionIndex) in item.options"
|
||||
:key="optionIndex">
|
||||
<view class="u-flex-1">
|
||||
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'name']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]" label-width="0"
|
||||
label="" required :showRequired="false">
|
||||
<view class="bg-fff u-p-t-12 u-p-b-12" style="border-radius: 8rpx;">
|
||||
<uni-easyinput
|
||||
v-model="specifications.list[index].options[optionIndex].name"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="请输入规格值,如:S、M" />
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class=" u-flex" v-if="item.options.length>1">
|
||||
<uni-forms-item :key="optionIndex" label-width="0" label=""
|
||||
:showRequired="false">
|
||||
<view class="u-flex">
|
||||
<!-- <uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
type="digit" placeholder="填写价格" /> -->
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24 " @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<template v-if="specifications.list.length>1">
|
||||
<view class="u-p-b-32">
|
||||
<view class="u-flex " @click="delSpecificationsGroup(index)">
|
||||
<view class="icon icon-reduce u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过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="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addSpecificationsGroup">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格组</view>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<button class="save-btn " hover-class="btn-hover-class" @click="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></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 go from '@/commons/utils/go.js';
|
||||
import {
|
||||
$productSpec
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
} from '@dcloudio/uni-app';
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { onLoad, onReady, } from '@dcloudio/uni-app';
|
||||
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
const nameFormRef = ref(null)
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
//表单验证
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MinOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
MaxOptional: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
optionPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const specificationsOptionsBasicData = {
|
||||
name: '',
|
||||
optionPrice: '0.00'
|
||||
}
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...specificationsOptionsBasicData
|
||||
}
|
||||
}
|
||||
// 构造规格的基础数据
|
||||
const specificationsBasicData = {
|
||||
name: '',
|
||||
// MinOptional: 1,
|
||||
// MaxOptional: 1,
|
||||
options: []
|
||||
}
|
||||
|
||||
function returnSpecificationsOptionsBasicData() {
|
||||
return {
|
||||
...specificationsBasicData,
|
||||
options: [returnOptionsBasicData()]
|
||||
}
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 规格列表
|
||||
const specifications = reactive({
|
||||
name: '',
|
||||
list: [returnSpecificationsOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
|
||||
//添加规格组
|
||||
function addSpecificationsGroup() {
|
||||
specifications.list.push(returnSpecificationsOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
}
|
||||
//删除规格组
|
||||
function delSpecificationsGroup(index) {
|
||||
if(specifications.list.length<=1){
|
||||
return
|
||||
}
|
||||
specifications.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的规格组添加规格项
|
||||
function addOptions(index) {
|
||||
specifications.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的规格组添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
if(specifications.list[index].options.length<=1){
|
||||
return
|
||||
}
|
||||
specifications.list[index].options.splice(optionIndex, 1)
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
//设置表单验证规则
|
||||
function setFormRules() {
|
||||
form.value.setRules(rules)
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
function setFormRef(index) {
|
||||
formRefs.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
formRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 绑定option input元素
|
||||
const refFormInput = ref([])
|
||||
|
||||
function setFormInputRef(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
return (el) => {
|
||||
if (el) {
|
||||
if (!refFormInput.value[newIndex]) {
|
||||
refFormInput.value[newIndex] = el;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 当表单内容输入变化根据配置的rules进行验证
|
||||
function inpuChange(index, index1) {
|
||||
const newIndex = index * 10000 + index1
|
||||
console.log(refFormInput.value[newIndex]);
|
||||
refFormInput.value[newIndex].onFieldChange()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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) {
|
||||
@@ -279,90 +107,68 @@
|
||||
const data = uni.getStorageSync('spec')
|
||||
uni.removeStorageSync('spec')
|
||||
if(data){
|
||||
specifications.name = data.name
|
||||
specifications.id = data.id
|
||||
specifications.list = data.specList.map(v => {
|
||||
return {
|
||||
...v,
|
||||
options: v.value.map(v => {
|
||||
return {
|
||||
name: v
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
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 returnPromise(prosise, index) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prosise.then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
sucees: true
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取规格列表
|
||||
*/
|
||||
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)
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
const nameFormRes = await returnPromise(nameFormRef.value.validate())
|
||||
console.log(nameFormRes);
|
||||
if (!nameFormRes.sucees) {
|
||||
isAllPassForm -= 1
|
||||
}
|
||||
for (let i in specifications.list) {
|
||||
const res = await returnPromise(formRefs.value[i].validate(), i)
|
||||
isAllPassForm += res.sucees ? 1 : 0
|
||||
}
|
||||
//判断验证是否通过
|
||||
if (isAllPassForm === specifications.list.length) {
|
||||
console.log('pass');
|
||||
const data = {
|
||||
name: specifications.name,
|
||||
id:specifications.id,
|
||||
specList: specifications.list.map(v => {
|
||||
return {
|
||||
...v,
|
||||
value: v.options.map(v => v.name),
|
||||
options: undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
if (option.type === 'add') {
|
||||
return $productSpec.add(data).then(res => {
|
||||
infoBox.showSuccessToast('添加成功')
|
||||
settimeoutBack(1500)
|
||||
})
|
||||
}
|
||||
|
||||
$productSpec.update(data).then(res => {
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
settimeoutBack(1500)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
|
||||
Reference in New Issue
Block a user