同步代码
This commit is contained in:
GaoHao
499
pageProduct/add-specifications/add-specifications - 副本 (2).vue
Normal file
499
pageProduct/add-specifications/add-specifications - 副本 (2).vue
Normal file
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<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">
|
||||
<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 :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.name" placeholder="规格组名,如:尺码" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<uni-forms-item label="规格值">
|
||||
<view class="option">
|
||||
<view class="">
|
||||
<view class="u-flex option-item" 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">
|
||||
<uni-easyinput
|
||||
v-model="specifications.list[index].options[optionIndex].name"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="请输入规格值,如:S、M" />
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class=" u-flex">
|
||||
<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" @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<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>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</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>
|
||||
</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 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) {
|
||||
specifications.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的规格组添加规格项
|
||||
function addOptions(index) {
|
||||
specifications.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的规格组添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const option = {
|
||||
type: 'add',
|
||||
id: undefined
|
||||
}
|
||||
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){
|
||||
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({
|
||||
title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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 {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::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 {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 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;
|
||||
}
|
||||
|
||||
.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: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
464
pageProduct/add-specifications/add-specifications - 副本.vue
Normal file
464
pageProduct/add-specifications/add-specifications - 副本.vue
Normal file
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<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 :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.name" placeholder="规格组名" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<!-- <uni-forms-item label="最少可选" required name="MinOptional" >
|
||||
<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="u-flex">
|
||||
<view class="u-flex-1">名称</view>
|
||||
<view class="u-flex-1 u-p-l-60">加价</view>
|
||||
</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">
|
||||
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'optionName']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
label-width="0" label="" required :showRequired="false"
|
||||
>
|
||||
<uni-easyinput v-model="specifications.list[index].options[optionIndex].optionName"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="选项名" />
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class="u-p-l-60 u-flex-1 u-flex">
|
||||
<uni-forms-item :key="optionIndex"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:name="['options',optionIndex,'optionPrice']" label-width="0" label="" required :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" @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<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>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
// 表单样式
|
||||
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: '必填'
|
||||
}]
|
||||
},
|
||||
optionName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
optionPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const specificationsOptionsBasicData = {
|
||||
optionName: '',
|
||||
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({
|
||||
list: [returnSpecificationsOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
|
||||
//添加规格组
|
||||
function addSpecificationsGroup() {
|
||||
specifications.list.push(returnSpecificationsOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
}
|
||||
//删除规格组
|
||||
function delSpecificationsGroup(index) {
|
||||
specifications.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的规格组添加规格项
|
||||
function addOptions(index) {
|
||||
specifications.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的规格组添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName=''
|
||||
function triggerEvent (emitName,data){
|
||||
if(emitName){
|
||||
uni.$emit(emitName,data)
|
||||
}
|
||||
}
|
||||
onLoad(opt=>{
|
||||
const arr=uni.getStorageSync('guige')
|
||||
if(arr.length){
|
||||
specifications.list=arr
|
||||
console.log(arr);
|
||||
}
|
||||
console.log(opt);
|
||||
if(opt&&JSON.stringify(opt)!=='{}'&&opt.emitName){
|
||||
emitName=opt.emitName
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title:emitName?'编辑规格模版':'添加规格模版'
|
||||
})
|
||||
|
||||
})
|
||||
function emitspecificationsSave(){
|
||||
// emitspecificationsSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName,specifications.list)
|
||||
}
|
||||
function returnPromise(index,prosise){
|
||||
return new Promise((resolve,reject)=>{
|
||||
prosise.then(res=>{
|
||||
console.log(res);
|
||||
resolve({sucees:true})
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
resolve({sucees:false})
|
||||
})
|
||||
})
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm=0
|
||||
for (let i in specifications.list) {
|
||||
const res=await returnPromise(i,formRefs.value[i].validate())
|
||||
isAllPassForm+=res.sucees?1:0
|
||||
}
|
||||
//判断验证是否通过
|
||||
if(isAllPassForm===specifications.list.length){
|
||||
console.log('pass');
|
||||
emitspecificationsSave()
|
||||
go.back()
|
||||
}
|
||||
|
||||
}
|
||||
</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: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::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 {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 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;
|
||||
}
|
||||
|
||||
.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: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
526
pageProduct/add-specifications/add-specifications.vue
Normal file
526
pageProduct/add-specifications/add-specifications.vue
Normal file
@@ -0,0 +1,526 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
</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 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()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const option = {
|
||||
type: 'add',
|
||||
id: undefined
|
||||
}
|
||||
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){
|
||||
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({
|
||||
title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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 {
|
||||
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>
|
||||
826
pageProduct/add-specifications/choose-specifications.vue
Normal file
826
pageProduct/add-specifications/choose-specifications.vue
Normal file
@@ -0,0 +1,826 @@
|
||||
<template>
|
||||
<view class="page u-font-24 color-333">
|
||||
<view class="box ">
|
||||
<view>
|
||||
<uni-forms :model="FormData" :rules="rules" err-show-type="undertext" validateTrigger="blur" ref="form"
|
||||
:border="true" :label-width="130">
|
||||
<view class="block u-p-b-16">
|
||||
|
||||
<view class="">
|
||||
<view class="u-m-t-20">选择规格</view>
|
||||
<view class="u-m-t-16">
|
||||
<uni-data-picker :clear-icon="false" @change="specIdChange"
|
||||
:map="{text:'name',value:'id'}" placeholder="请选择规格" popup-title="请选择规格"
|
||||
:localdata="FormData.specList" v-model="FormData.specId">
|
||||
</uni-data-picker>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="border-top-0">
|
||||
<uni-forms-item label="选择规格" required name="categoryId">
|
||||
<uni-data-picker :clear-icon="false" @change="specIdChange"
|
||||
:map="{text:'name',value:'id'}" placeholder="请选择规格" popup-title="请选择规格"
|
||||
:localdata="FormData.specList" v-model="FormData.specId">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
</view> -->
|
||||
<view class=" ">
|
||||
<view class="u-m-t-32" v-for="(item,index) in FormData.selectSpec" :key="index">
|
||||
<view class="font-bold">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<!-- <up-checkbox-group :labelSize="12" :size="14" :activeColor="color.ColorMain"
|
||||
shape="circle" v-model="item.selectSpecResult" placement="row"
|
||||
@change="createResult">
|
||||
<up-checkbox :customStyle="{marginRight: '60rpx',marginBottom:'16rpx'}"
|
||||
v-for="(item, index) in item.value" :key="index" :label="item.text"
|
||||
:name="item.value">
|
||||
</up-checkbox>
|
||||
</up-checkbox-group> -->
|
||||
|
||||
<uni-data-checkbox @change="createResult" multiple :selectedColor="color.ColorMain"
|
||||
v-model="item.selectSpecResult" :localdata="item.value">
|
||||
</uni-data-checkbox>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-p-b-16"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view>
|
||||
<view class="block u-m-b-0 u-m-t-32" v-for="(item,index) in FormData.result" :key="index">
|
||||
<uni-forms :model="item.skus" :rules="rules" :ref="setFormRef(index)" err-show-type="undertext"
|
||||
validateTrigger="blur" :border="true" :label-width="130">
|
||||
|
||||
<view class="">
|
||||
<view class="u-m-t-20 u-p-b-24 border-bottom" v-for="(val,key) in item.names"
|
||||
:key="key">
|
||||
<view class="font-bold u-m-r-12">
|
||||
{{key}}
|
||||
</view>
|
||||
<view class="u-m-t-16 color-666 u-font-24">{{val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<view label="">
|
||||
<view class="font-bold">
|
||||
图片
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<my-upload-file @change="changeResultCover($event,index)" :limit="1"
|
||||
:imageStyles="imageStyles" :ref="setRefFile(index)"
|
||||
:images="item.coverImg"></my-upload-file>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="skus u-m-t-24">
|
||||
<view class="">
|
||||
<uni-forms-item label="售价" required name="salePrice">
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'salePrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.salePrice" type="digit"
|
||||
placeholder="请输入售价（元）" />
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<uni-forms-item label="会员价（元）" required name="memberPrice">
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'memberPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.memberPrice" type="digit"
|
||||
placeholder="请输入会员价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="成本价（元）" required name="costPrice">
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'costPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.costPrice" type="digit"
|
||||
placeholder="请输入成本价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="原价（元）" required name="originPrice">
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'originPrice')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.originPrice" type="digit"
|
||||
placeholder="请输入原价（元）" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="起售数量" required name="suit">
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'suit')" :paddingNone="inputPaddingNone"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.skus.suit" type="digit" placeholder="请输入起售数量" />
|
||||
</uni-forms-item>
|
||||
<!-- <view class="u-relative">
|
||||
<uni-forms-item label="库存数量" required>
|
||||
<uni-easyinput :disabled="disabledStock"
|
||||
@blur="priceFormat(item.skus,'stockNumber')" :paddingNone="inputPaddingNone"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.skus.stockNumber" type="digit" placeholder="请输入库存数量" />
|
||||
</uni-forms-item>
|
||||
<view class="u-absolute position-all" v-if="disabledStock"
|
||||
@click="canEditGoodsStock(true)">
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<uni-forms-item label="分销金额" required>
|
||||
<uni-easyinput @blur="priceFormat(item.skus,'firstShared')"
|
||||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="item.skus.firstShared" type="digit"
|
||||
placeholder="请输入分销金额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品条码" required>
|
||||
<view class="bg-gray u-flex u-col-center u-col-center u-p-l-24" style="height: 72rpx;background: #F6F6F6;border-radius: 8rpx ;">
|
||||
<uni-easyinput disabled :paddingNone="inputPaddingNone"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.skus.barCode" placeholder="请输入商品条码" />
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view :style="{height:bottomHeight+'px'}"></view>
|
||||
<view class="safe-bottom fixed">
|
||||
<view class="btn">
|
||||
<up-button @click="save" shape="circle" type="primary" >
|
||||
<view class=" font-bold">
|
||||
保存
|
||||
</view>
|
||||
</up-button>
|
||||
<!-- <button class="save-btn" hover-class="btn-hover-class" @click="save">保存</button> -->
|
||||
<view class="u-m-t-20">
|
||||
<button class="save-btn edit-btn" hover-class="btn-hover-class" @click="fastEditShow">
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="u-m-r-6">批量修改</view>
|
||||
<up-icon name="edit-pen" :color="color.ColorMain"></up-icon>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<pop-fast-edit @update="updateSkuKey" v-model:show="fastEdit.show"></pop-fast-edit>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
getSafeBottomHeight
|
||||
} from '@/commons/utils/safe-bottom.js'
|
||||
import {
|
||||
formatPrice
|
||||
} from "@/commons/utils/format.js";
|
||||
import popFastEdit from "./components/fast-edit.vue"
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import dayjs from "dayjs";
|
||||
import go from '@/commons/utils/go.js';
|
||||
import color from '@/commons/color.js';
|
||||
import {
|
||||
$types,
|
||||
$defaultSku
|
||||
} from '@/commons/goodsData.js'
|
||||
import {
|
||||
$productSpec
|
||||
} from '@/http/yskApi/goods.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
|
||||
let bottomHeight = ref(100)
|
||||
onReady(() => {
|
||||
getSafeBottomHeight('safe-bottom').then(res => {
|
||||
console.log(res);
|
||||
bottomHeight.value = res
|
||||
})
|
||||
})
|
||||
const refFiles = ref([]);
|
||||
const imageStyles = reactive({
|
||||
width: 82,
|
||||
height: 82,
|
||||
border: {
|
||||
radius: '4px'
|
||||
}
|
||||
})
|
||||
//绑定文件上传元素
|
||||
function setRefFile(index) {
|
||||
refFiles.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
refFiles.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const fastEdit = reactive({
|
||||
show: false,
|
||||
list: [{
|
||||
text: '会员价',
|
||||
key: 'memberPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '成本价',
|
||||
key: 'costPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '原价',
|
||||
key: 'originPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '起售数量',
|
||||
key: 'suit',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '库存数量',
|
||||
key: 'stockNumber',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '分销金额',
|
||||
key: 'firstShared',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
sel: ''
|
||||
})
|
||||
|
||||
function fastEditShow() {
|
||||
fastEdit.show = true
|
||||
}
|
||||
//上个页面传来的参数
|
||||
let option = {}
|
||||
|
||||
|
||||
|
||||
//number类型数据限制
|
||||
function priceFormat(item, key) {
|
||||
nextTick(() => {
|
||||
let min = 0;
|
||||
let max = 100000000;
|
||||
console.log(item[key]);
|
||||
if (key == 'suit') {
|
||||
min = 1
|
||||
}
|
||||
const newval = formatPrice(item[key], min, max, true)
|
||||
if (typeof newval !== 'number') {
|
||||
item[key] = newval.value
|
||||
uni.showToast({
|
||||
title: `请输入${min}到${max}范围内的数字`,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
item[key] = newval
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
function updateSkuKey(arr) {
|
||||
for (let i in FormData.result) {
|
||||
const sku = FormData.result[i].skus
|
||||
for (let k in arr) {
|
||||
const item = arr[k]
|
||||
if (sku.hasOwnProperty(item.key)) {
|
||||
sku[item.key] = item.value
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const inputPaddingNone = ref(true)
|
||||
const form = ref(null)
|
||||
const originSpecMap = {}
|
||||
const FormData = reactive({
|
||||
specId: '',
|
||||
specItem: '',
|
||||
result: [],
|
||||
selectSpec: [],
|
||||
})
|
||||
//表单相关事件
|
||||
function changeResultCover(val, index) {
|
||||
FormData.result[index].coverImg = val
|
||||
console.log(FormData.result[index]);
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
function setFormRef(index) {
|
||||
formRefs.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
formRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
watch(() => FormData.specId, (newval) => {
|
||||
FormData.result = []
|
||||
})
|
||||
const bottom = ref(null)
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
|
||||
//生成笛卡尔集
|
||||
|
||||
function combineSpecs(specs) {
|
||||
if (specs.length === 0) {
|
||||
return [
|
||||
[]
|
||||
];
|
||||
} else {
|
||||
const [head, ...tail] = specs;
|
||||
const rest = combineSpecs(tail);
|
||||
const pairs = head.value.map(value => rest.map(r => {
|
||||
return {
|
||||
[head.name]: value,
|
||||
...r
|
||||
}
|
||||
}));
|
||||
return [].concat(...pairs);
|
||||
}
|
||||
};
|
||||
const defaultSku = reactive({
|
||||
...$defaultSku,
|
||||
shopId: uni.getStorageSync('shopId'),
|
||||
coverImg: '',
|
||||
productId: option.productId,
|
||||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
|
||||
})
|
||||
|
||||
function returnDefaultSku() {
|
||||
const randomNumber = Math.floor(Math.random() * 1000)
|
||||
return {
|
||||
...defaultSku,
|
||||
productId: option.productId,
|
||||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()-randomNumber}`
|
||||
}
|
||||
}
|
||||
|
||||
function createResult() {
|
||||
let arr = []
|
||||
// for(let i in FormData.selectSpec){
|
||||
// const selectSpecResult=FormData.selectSpec[i].selectSpecResult
|
||||
// if(selectSpecResult.length>0){
|
||||
// arr.push({
|
||||
// value: selectSpecResult,
|
||||
// name: FormData.selectSpec[i].name
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
for (let k of FormData.selectSpec) {
|
||||
if (k.selectSpecResult.length) {
|
||||
console.log(k.selectSpecResult.length);
|
||||
arr.push({
|
||||
value: k.selectSpecResult,
|
||||
name: k.name
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(arr);
|
||||
const spes = combineSpecs(arr)
|
||||
console.log(spes);
|
||||
const result = spes.filter(v => {
|
||||
return !Array.isArray(v)
|
||||
}).map(v => {
|
||||
const specSnap = returnSpecSnap(v)
|
||||
const data = originSpecMap[specSnap]
|
||||
const skus = returnDefaultSku()
|
||||
const newdata = {
|
||||
names: v,
|
||||
specSnap,
|
||||
skus
|
||||
}
|
||||
return data || newdata
|
||||
})
|
||||
FormData.result = result
|
||||
}
|
||||
|
||||
|
||||
|
||||
function specIdChange(e) {
|
||||
console.log(e);
|
||||
const item = FormData.specList.find(v => v.id === FormData.specId)
|
||||
FormData.selectSpec = (item.specList || [])
|
||||
|
||||
}
|
||||
//获取规格数据
|
||||
function getTbProductSpec() {
|
||||
$productSpec.get({
|
||||
page: 0,
|
||||
size: 200,
|
||||
sort: "id"
|
||||
}).then(res => {
|
||||
FormData.specList = res.content.map(item => {
|
||||
return {
|
||||
...item,
|
||||
specList: item.specList.map(spe => {
|
||||
return {
|
||||
...spe,
|
||||
selectSpecResult: [],
|
||||
value: spe.value.map(v => {
|
||||
return {
|
||||
text: v,
|
||||
value: v
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//表单验证
|
||||
const rules = {
|
||||
salePrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '售价必填'
|
||||
}]
|
||||
},
|
||||
memberPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '会员价必填'
|
||||
}]
|
||||
},
|
||||
costPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '成本价必填'
|
||||
}]
|
||||
},
|
||||
originPrice: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '原价必填'
|
||||
}]
|
||||
},
|
||||
suit: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '起售数量必填'
|
||||
},
|
||||
{
|
||||
validateFunction: function(rule, value, data, callback) {
|
||||
if (value < 1) {
|
||||
callback('起售数量至少为1个')
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName = ''
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//生成name
|
||||
function returnSpecSnap(names) {
|
||||
const specSnap = Object.keys(names).reduce((prve, cur) => {
|
||||
return prve + names[cur] + ','
|
||||
}, '')
|
||||
return specSnap.substring(0, specSnap.length - 1)
|
||||
}
|
||||
// 允许修改商品库存
|
||||
let disabledStock = ref(false)
|
||||
async function canEditGoodsStock(tips = false) {
|
||||
console.log(tips);
|
||||
if (option.type === 'edit') {
|
||||
const res = await hasPermission({
|
||||
text: '允许修改商品库存',
|
||||
tips: tips
|
||||
})
|
||||
disabledStock.value = !res
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
canEditGoodsStock()
|
||||
})
|
||||
|
||||
onLoad(opt => {
|
||||
Object.assign(option, opt)
|
||||
getTbProductSpec()
|
||||
const obj = uni.getStorageSync('guige')
|
||||
if (obj && JSON.stringify(obj) !== '{}') {
|
||||
console.log(obj.selectSpec);
|
||||
option.productId = opt.productId
|
||||
Object.assign(FormData, obj)
|
||||
for (let i of obj.result) {
|
||||
const key = returnSpecSnap(i.names)
|
||||
originSpecMap[key] = i
|
||||
}
|
||||
nextTick(() => {
|
||||
FormData.result = obj.result
|
||||
console.log(FormData.result);
|
||||
})
|
||||
}
|
||||
console.log(opt);
|
||||
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
|
||||
emitName = opt.emitName
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function emitspecificationsSave() {
|
||||
// emitspecificationsSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName, FormData)
|
||||
go.back()
|
||||
}
|
||||
|
||||
function returnPromise(prosise) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prosise.then(res => {
|
||||
resolve({
|
||||
sucees: true
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
if (err.length >= 1) {
|
||||
infoBox.showToast(err[0].errorMessage)
|
||||
}
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
async function save() {
|
||||
if (!FormData.result.length) {
|
||||
return infoBox.showToast('请先选择规格！')
|
||||
}
|
||||
let isAllPassForm = 0
|
||||
for (let i in FormData.result) {
|
||||
const res = await returnPromise(formRefs.value[i].validate(), i)
|
||||
isAllPassForm += res.sucees ? 1 : 0
|
||||
}
|
||||
if (isAllPassForm < FormData.result.length) {
|
||||
return
|
||||
}
|
||||
//判断验证是否通过
|
||||
console.log('pass');
|
||||
const item = FormData.specList.find(v => v.id === FormData.specId)
|
||||
FormData.specsInfoName = item ? item.name : ''
|
||||
console.log(FormData);
|
||||
emitspecificationsSave()
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
::v-deep.uni-forms-item__content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item--border {
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.safe-bottom {
|
||||
padding: 34rpx 28rpx;
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
.btn {
|
||||
padding: 0 88rpx 56rpx 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
::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));
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-easyinput__content-input {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.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 {
|
||||
// margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
.fast-edit {
|
||||
.item {
|
||||
color: #333;
|
||||
border: 1px solid #bbb;
|
||||
padding: 4rpx 10rpx 8rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
min-width: 186rpx;
|
||||
|
||||
&.active {
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
160
pageProduct/add-specifications/components/fast-edit.vue
Normal file
160
pageProduct/add-specifications/components/fast-edit.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
|
||||
<view class="u-p-32 box u-font-28">
|
||||
<view class="u-flex u-relative u-row-center">
|
||||
<view class="u-font-32">快速修改</view>
|
||||
<view class="u-absolute close">
|
||||
<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-36">
|
||||
<scroll-view scroll-y="true" style="max-height: 70vh;">
|
||||
<view class="u-m-b-32" v-for="(item,index) in list" :key="index">
|
||||
<view>{{item.text}}：</view>
|
||||
<view class="u-m-t-16">
|
||||
<up-input v-model="item.value">
|
||||
<template #suffix>
|
||||
<up-button @click="itemClick(item)" type="primary" text="修改" size="mini"></up-button>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<view class="u-m-t-60">
|
||||
<my-button type="primary" shape="circle" @tap="save">
|
||||
<view class="u-font-32">
|
||||
修改
|
||||
</view>
|
||||
</my-button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
returnSkuSnap,
|
||||
returnTypeEnum,
|
||||
returnCategory
|
||||
} from '@/pageProduct/util.js'
|
||||
import {
|
||||
$tbShopUnit
|
||||
} from '@/http/yskApi/goods.js'
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const arr = [
|
||||
{
|
||||
text: '售价',
|
||||
key: 'salePrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '会员价',
|
||||
key: 'memberPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '成本价',
|
||||
key: 'costPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '原价',
|
||||
key: 'originPrice',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
text: '起售数量',
|
||||
key: 'suit',
|
||||
value: 1
|
||||
},
|
||||
// {
|
||||
// text: '库存数量',
|
||||
// key: 'stockNumber',
|
||||
// value: ''
|
||||
// },
|
||||
{
|
||||
text: '分销金额',
|
||||
key: 'firstShared',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
const list = ref([...arr])
|
||||
|
||||
function changeShowRecoders(show) {
|
||||
recoders.show = show
|
||||
}
|
||||
|
||||
const data = ref(props.item)
|
||||
const emits = defineEmits(['update:show', 'update','itemClick'])
|
||||
const form = reactive({
|
||||
note: ''
|
||||
})
|
||||
let popShow = ref(props.show)
|
||||
|
||||
function itemClick(item){
|
||||
console.log(item);
|
||||
emits('update',[item])
|
||||
}
|
||||
|
||||
|
||||
watch(() => props.show, (newval) => {
|
||||
popShow.value = newval
|
||||
if (newval) {
|
||||
data.value = props.item
|
||||
}
|
||||
})
|
||||
const isSku = computed(() => {
|
||||
// return data.value.typeEnum == '多规格'
|
||||
return false
|
||||
})
|
||||
watch(() => popShow.value, (newval) => {
|
||||
emits('update:show', newval)
|
||||
})
|
||||
|
||||
function close() {
|
||||
popShow.value = false
|
||||
list.value=[...arr]
|
||||
}
|
||||
|
||||
function open() {
|
||||
|
||||
}
|
||||
|
||||
function save() {
|
||||
emits('update',list.value)
|
||||
popShow.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 556rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #EE4646;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user