商品管理更新

This commit is contained in:
2024-10-10 16:21:21 +08:00
parent 09781b82e1
commit efa346ade6
5 changed files with 155 additions and 106 deletions

View File

@@ -1508,6 +1508,13 @@
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}` barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
} }
} }
}else{
//编辑
if (newval === 'sku') {
skuList.list = []
} else {
skuList.list=$goodsData.skuList
}
} }
}) })

View File

@@ -1,62 +1,53 @@
<template> <template>
<view class="page"> <view class="page">
<view class="box"> <view class="box">
<view class="block border-top-0">
<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 :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"> <view v-for="(item,index) in specifications.list" :key="index">
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur" <uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350"> :ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
<view class="block"> <view class="block">
<view class="border-top-0"> <view class="border-top-0">
<uni-forms-item label="规格组名" required name="name" > <uni-forms-item label="规格组名" required name="name">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.name" placeholder="规格组名" /> v-model="item.name" placeholder="规格组名,如:尺码" />
</uni-forms-item> </uni-forms-item>
</view> </view>
<!-- <uni-forms-item label="最少可选" required name="MinOptional" > <uni-forms-item label="规格值">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.MinOptional" type="number" placeholder="填写最小数量" />
</uni-forms-item>
<uni-forms-item label="最大可选" required name="MaxOptional" >
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.MaxOptional" type="number" placeholder="填写最大数量" />
</uni-forms-item> -->
<uni-forms-item label="选项值">
<view class="option"> <view class="option">
<view class="u-flex"> <view class="">
<view class="u-flex-1">名称</view> <view class="u-flex option-item" v-for="(option,optionIndex) in item.options"
<view class="u-flex-1 u-p-l-60">加价</view> :key="optionIndex">
</view>
<view class="u-m-t-32">
<view class="u-flex option-item"
v-for="(option,optionIndex) in item.options"
:key="optionIndex"
>
<view class="u-flex-1"> <view class="u-flex-1">
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'optionName']" <uni-forms-item :key="optionIndex" :name="['options',optionIndex,'name']"
:ref="setFormInputRef(index,optionIndex)" :ref="setFormInputRef(index,optionIndex)"
:rules="[{'required': true,errorMessage: '必填'}]" :rules="[{'required': true,errorMessage: '必填'}]" label-width="0"
label-width="0" label="" required :showRequired="false" label="" required :showRequired="false">
> <uni-easyinput
<uni-easyinput v-model="specifications.list[index].options[optionIndex].optionName" v-model="specifications.list[index].options[optionIndex].name"
@input="inpuChange(index,optionIndex)" @input="inpuChange(index,optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="选项名" /> placeholder="请输入规格值,如:S、M" />
</uni-forms-item> </uni-forms-item>
</view> </view>
<view class="u-p-l-60 u-flex-1 u-flex"> <view class=" u-flex">
<uni-forms-item :key="optionIndex" <uni-forms-item :key="optionIndex" label-width="0" label=""
:rules="[{'required': true,errorMessage: '必填'}]" :showRequired="false">
:ref="setFormInputRef(index,optionIndex)"
:name="['options',optionIndex,'optionPrice']" label-width="0" label="" required :showRequired="false"
>
<view class="u-flex"> <view class="u-flex">
<uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice" <!-- <uni-easyinput v-model="specifications.list[index].options[optionIndex].optionPrice"
@input="inpuChange(index,optionIndex)" @input="inpuChange(index,optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
type="digit" placeholder="填写价格" /> type="digit" placeholder="填写价格" /> -->
<view class="icon icon-reduce u-m-l-38" <view class="icon icon-reduce u-m-l-38"
@click="delOption(index,optionIndex)"> @click="delOption(index,optionIndex)">
@@ -79,7 +70,7 @@
</view> </view>
</uni-forms-item> </uni-forms-item>
<view class="u-flex u-m-t-48 u-m-b-24" @click="delSpecificationsGroup(index)"> <view class="u-flex u-m-t-48 u-m-b-24" @click="delSpecificationsGroup(index)">
<view class="icon icon-reduce u-m-r-22 "> <view class="icon icon-reduce u-m-r-22 ">
@@ -106,10 +97,14 @@
<script setup> <script setup>
import go from '@/commons/utils/go.js'; import go from '@/commons/utils/go.js';
import {
$productSpec
} from '@/http/yskApi/goods.js'
import { import {
onLoad, onLoad,
onReady onReady,
} from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import infoBox from '@/commons/utils/infoBox.js'
import { import {
onMounted, onMounted,
reactive, reactive,
@@ -117,8 +112,9 @@
ref, ref,
onBeforeMount onBeforeMount
} from 'vue'; } from 'vue';
const nameFormRef = ref(null)
// 表单样式 // 表单样式
const placeholderStyle = ref('font-size:28rpx;') const placeholderStyle = ref('font-size:28rpx;')
//表单边框 //表单边框
const inputBorder = ref(false) const inputBorder = ref(false)
const form = ref(null) const form = ref(null)
@@ -143,12 +139,6 @@
errorMessage: '必填' errorMessage: '必填'
}] }]
}, },
optionName: {
rules: [{
required: true,
errorMessage: '必填'
}]
},
optionPrice: { optionPrice: {
rules: [{ rules: [{
required: true, required: true,
@@ -157,10 +147,10 @@
} }
} }
// 构造规格的选项值的基础数据 // 构造规格的选项值的基础数据
const specificationsOptionsBasicData = { const specificationsOptionsBasicData = {
optionName: '', name: '',
optionPrice: '0.00' optionPrice: '0.00'
} }
@@ -172,8 +162,8 @@
// 构造规格的基础数据 // 构造规格的基础数据
const specificationsBasicData = { const specificationsBasicData = {
name: '', name: '',
MinOptional: 1, // MinOptional: 1,
MaxOptional: 1, // MaxOptional: 1,
options: [] options: []
} }
@@ -189,6 +179,7 @@
} }
// 规格列表 // 规格列表
const specifications = reactive({ const specifications = reactive({
name: '',
list: [returnSpecificationsOptionsBasicData()] list: [returnSpecificationsOptionsBasicData()]
}) })
@@ -235,7 +226,8 @@
}; };
} }
// 绑定option input元素 // 绑定option input元素
const refFormInput=ref([]) const refFormInput = ref([])
function setFormInputRef(index, index1) { function setFormInputRef(index, index1) {
const newIndex = index * 10000 + index1 const newIndex = index * 10000 + index1
return (el) => { return (el) => {
@@ -252,61 +244,104 @@
console.log(refFormInput.value[newIndex]); console.log(refFormInput.value[newIndex]);
refFormInput.value[newIndex].onFieldChange() refFormInput.value[newIndex].onFieldChange()
} }
let emitName=''
function triggerEvent (emitName,data){
if(emitName){
uni.$emit(emitName,data) const option = {
} type: 'add',
id: undefined
} }
onLoad(opt=>{ onLoad(opt => {
const arr=uni.getStorageSync('guige')
if(arr.length){
specifications.list=arr
console.log(arr);
}
console.log(opt); console.log(opt);
if(opt&&JSON.stringify(opt)!=='{}'&&opt.emitName){ if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
emitName=opt.emitName option.type = opt.type
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
}
})
}
})
}
} }
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:emitName?'编辑规格模版':'添加规格模版' title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
}) })
}) })
function emitspecificationsSave(){
// emitspecificationsSave 触发规格保存事件将数据给到添加商品页面 function returnPromise(prosise, index) {
// guigeEdit 触发规格保存事件将数据给到添加规格页面 return new Promise((resolve, reject) => {
uni.removeStorageSync('guige') prosise.then(res => {
triggerEvent(emitName,specifications.list)
}
function returnPromise(index,prosise){
return new Promise((resolve,reject)=>{
prosise.then(res=>{
console.log(res); console.log(res);
resolve({sucees:true}) resolve({
}).catch(err=>{ sucees: true
})
}).catch(err => {
console.log(err); console.log(err);
resolve({sucees:false}) resolve({
sucees: false
})
}) })
}) })
} }
async function save() {
let isAllPassForm=0 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) { for (let i in specifications.list) {
const res=await returnPromise(i,formRefs.value[i].validate()) const res = await returnPromise(formRefs.value[i].validate(), i)
isAllPassForm+=res.sucees?1:0 isAllPassForm += res.sucees ? 1 : 0
} }
//判断验证是否通过 //判断验证是否通过
if(isAllPassForm===specifications.list.length){ if (isAllPassForm === specifications.list.length) {
console.log('pass'); console.log('pass');
emitspecificationsSave() const data = {
go.back() 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)
})
} }
} }

View File

@@ -124,12 +124,15 @@
<view class="save-btn-box"> <view class="save-btn-box">
<button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button> <button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button>
<button class="save-btn edit-btn" hover-class="btn-hover-class" @click="fastEditShow"> <view class="u-m-t-20">
<view class="u-flex u-row-center"> <button class="save-btn edit-btn" hover-class="btn-hover-class" @click="fastEditShow">
<view class="u-m-r-6">批量修改</view> <view class="u-flex u-row-center">
<up-icon name="edit-pen" :color="color.ColorMain"></up-icon> <view class="u-m-r-6">批量修改</view>
</view> <up-icon name="edit-pen" :color="color.ColorMain"></up-icon>
</button> </view>
</button>
</view>
</view> </view>
</view> </view>
<view class="bottom" ref="bottom"></view> <view class="bottom" ref="bottom"></view>

View File

@@ -8,16 +8,19 @@
</view> </view>
</view> </view>
<view class="u-m-t-36"> <view class="u-m-t-36">
<view class="u-m-b-24" v-for="(item,index) in list" :key="index"> <scroll-view scroll-y="true" style="max-height: 70vh;">
<view>{{item.text}}</view> <view class="u-m-b-24" v-for="(item,index) in list" :key="index">
<view class="u-m-t-24"> <view>{{item.text}}</view>
<up-input v-model="item.value"> <view class="u-m-t-24">
<template #suffix> <up-input v-model="item.value">
<up-button @click="itemClick(item)" type="primary" text="修改" size="mini"></up-button> <template #suffix>
</template> <up-button @click="itemClick(item)" type="primary" text="修改" size="mini"></up-button>
</up-input> </template>
</up-input>
</view>
</view> </view>
</view> </scroll-view>
<view class="u-m-t-60"> <view class="u-m-t-60">
<my-button type="primary" shape="circle" @tap="save"> <my-button type="primary" shape="circle" @tap="save">

View File

@@ -49,6 +49,7 @@ import { reactive, ref } from 'vue';
emits('del',props.index) emits('del',props.index)
} }
function edit(){ function edit(){
uni.$emit('edit:spec',props.data)
uni.setStorageSync('spec',props.data) uni.setStorageSync('spec',props.data)
go.to('PAGES_PRODUCT_GUIGE_ADD', { go.to('PAGES_PRODUCT_GUIGE_ADD', {
type: 'edit' type: 'edit'