czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
pageProduct/add-specifications/add-specifications - 副本.vue Normal file
View 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>

499
pageProduct/add-specifications/add-specifications.vue Normal file
View 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>

567
pageProduct/add-specifications/choose-specifications.vue Normal file
View File

@@ -0,0 +1,567 @@
<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">
<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-24">
{{item.selectSpecResult}}
<uni-data-checkbox @change="createResult" multiple :selectedColor="color.ColorMain"
v-model="item.selectSpecResult" :localdata="item.value"></uni-data-checkbox>
</view>
</view>
</view>
</view>
<view>
<view class="block u-m-b-32" v-for="(item,index) in FormData.result" :key="index">
<view class="">
<view class="u-m-t-16" v-for="(val,key) in item.names" :key="key">
<text class="font-bold u-m-r-12">
{{key}}
</text>
<text class="color-999">{{val}}</text>
</view>
</view>
<view class="u-m-t-24">
<view label="">
<view class="font-bold">
图片
</view>
<view class="u-m-t-24">
<my-upload-file @change="changeResultCover($event,index)" :limit="1" :ref="setRefFile(index)" :images="item.coverImg"></my-upload-file>
</view>
<!-- <uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid"
:limit="10" @progress="FileUploadprogress" @success="FileUploadsuccess"
@fail="FileUploadail" @select="FileUploadselect" /> -->
</view>
</view>
<view class="skus u-m-t-32">
<view class="">
<uni-forms-item label="售价" required>
<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>
<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>
<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>
<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>
<uni-easyinput @blur="priceFormat(item.skus,'suit')" :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.suit" type="digit" placeholder="请输入起售数量" />
</uni-forms-item>
<uni-forms-item label="库存数量" required>
<uni-easyinput @blur="priceFormat(item.skus,'stockNumber')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="item.skus.stockNumber" type="digit"
placeholder="请输入库存数量" />
</uni-forms-item>
<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>
<uni-easyinput disabled :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.barCode" placeholder="请输入起售数量" />
</uni-forms-item>
</view>
</view>
</view>
</uni-forms>
</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 myUploadFile from '@/components/my-components/my-upload-file'
import {
formatPrice
} from "@/commons/utils/format.js";
const refFiles = ref([]);
//绑定文件上传元素
function setRefFile(index) {
refFiles.value[index] = null;
return (el) => {
if (el) {
refFiles.value[index] = el;
}
};
}
//上个页面传来的参数
let option={}
//number类型数据限制
function priceFormat(item, key) {
nextTick(() => {
const min = 0;
const max = 100000000;
console.log(item[key]);
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
}
})
}
import dayjs from "dayjs";
import go from '@/commons/utils/go.js';
import color from '@/commons/color.js';
import {
$defaultSku
} from '../goodsData.js'
import {
$productSpec
} from '@/http/yskApi/goods.js';
import {
onLoad,
onReady
} from '@dcloudio/uni-app';
import {
onMounted,
reactive,
nextTick,
ref,
onBeforeMount,
watch
} from 'vue';
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]);
}
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 k of FormData.selectSpec) {
if (k.selectSpecResult.length) {
arr.push({
value: k.selectSpecResult,
name: k.name
})
}
}
const spes = combineSpecs(arr)
FormData.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
})
console.log(FormData.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 = {
optionPrice: {
rules: [{
required: true,
errorMessage: '必填'
}]
}
}
//页面滚动到最底部
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)
}
onLoad(opt => {
getTbProductSpec()
const obj = uni.getStorageSync('guige')
if (obj&&JSON.stringify(obj) !== '{}') {
option.productId=opt.productId
Object.assign(FormData, obj)
for(let i of obj.result){
const key=returnSpecSnap(i.names)
originSpecMap[key]=i
}
console.log(FormData);
nextTick(() => {
FormData.result = obj.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 => {
console.log(res);
resolve({
sucees: true
})
}).catch(err => {
console.log(err);
resolve({
sucees: false
})
})
})
}
async function save() {
let isAllPassForm = 0
const res = await returnPromise(form.value.validate())
//判断验证是否通过
if (res.sucees) {
console.log('pass');
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 {
min-height: inherit;
}
.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>