464 lines
11 KiB
Vue
464 lines
11 KiB
Vue
<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> |