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

代码更新

Browse Source
This commit is contained in:
GaoHao
2025-03-03 09:44:11 +08:00
parent b4a0393d2d
commit fd0c452a76
55 changed files with 2263 additions and 2658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
pageProduct/add-specifications/add-specifications.vue
View File

@@ -2,173 +2,304 @@
<view class="page min-page">
<view class="box">
<view class="block border-top-0 u-p-t-32 u-p-b-32">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<up-form ref="formRef" labelPosition="top" :model="vdata.formData" :rules="vdata.rules" labelWidth="80" :labelStyle="{fontWeight:'bold'}">
<up-form-item label="规格名称" prop="name" borderBottom >
<up-input v-model="vdata.formData.name" border="none" placeholder="规格名称,如:衣服" ></up-input>
</up-form-item>
<up-form-item label="规格级别" prop="level" borderBottom @click="vdata.showLevel = true;">
<up-input v-model="vdata.levelName" readonly border="none" placeholder="请选择规格级别" ></up-input>
</up-form-item>
<up-form-item label="排序" prop="sort" borderBottom >
<up-input v-model="vdata.formData.sort" border="none" placeholder="请输入排序" ></up-input>
</up-form-item>
<up-form-item label="上级规格" prop="pid" borderBottom @click="vdata.showSpec = true;">
<up-input v-model="vdata.pidName" readonly border="none" placeholder="请选择上级规格" ></up-input>
</up-form-item>
</up-form>
<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.children" :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.children"
:key="optionIndex">
<view class="u-flex-1">
<uni-forms-item :key="optionIndex" :name="['children',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.children[index].children[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.children.length>1">
<uni-forms-item :key="optionIndex" label-width="0" label=""
:showRequired="false">
<view class="u-flex">
<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.children.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>
<up-action-sheet
:show="vdata.showLevel"
:actions="vdata.levelList"
title="请选择规格级别"
@close="vdata.showLevel = false"
@select="levelSelect"
></up-action-sheet>
<up-action-sheet
:show="vdata.showSpec"
:actions="vdata.specList"
title="请选择规格级别"
@close="vdata.showSpec = false"
@select="specSelect"
></up-action-sheet>
<view class="bottom" ref="bottom"></view>
</view>
</template>
<script setup>
import { reactive, nextTick, ref } from 'vue';
import { onLoad, onReady, } from '@dcloudio/uni-app';
import {
$productSpec
} from '@/http/yskApi/goods.js'
import { onLoad } from '@dcloudio/uni-app';
import infoBox from '@/commons/utils/infoBox.js'
import { getSpecList, addSpec, updateSpec } from '@/api/product.js'
import { reactive, nextTick, ref, } from 'vue';
import { addSpecQuic } from '@/api/product.js'
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 option = {
type: 'add',
id: undefined
}
const formRef = ref(null)
const vdata = reactive({
showLevel: false,
showSpec: false,
levelList: [
{ name: "一级", value: 1},
{ name: "二级", value: 2},
{ name: "三级", value: 3}
],
levelName: "",
pidName: "",
formData: {
id: null,
name: "",
level: "",
sort: "",
pid: "",
},
rules: {
"name": {
required: true,
message: '请输入规格名称',
trigger: ['blur', 'change'],
// 规格列表
const specifications = reactive({
name: '',
children: [
{
name: '',
children: []
},
"level": {
required: true,
message: '请选择规格级别',
trigger: ['blur', 'input'],
},
"sort": {
required: true,
message: '请输入排序',
trigger: ['blur', 'change'],
},
"pid": {
required: true,
message: '请选择上级规格',
trigger: ['blur', 'input'],
},
},
specList: []
]
})
onReady(()=>{
})
//表单验证
onLoad(opt => {
console.log(opt);
if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
option.type = opt.type
const data = uni.getStorageSync('spec')
uni.removeStorageSync('spec')
if(data){
vdata.formData.id = data.id
vdata.formData.name = data.name
vdata.formData.level = data.level
vdata.formData.sort = data.sort
vdata.formData.pid = data.pid
vdata.levelName = vdata.levelList.filter(item => item.value == vdata.formData.level)[0].name
}
}
uni.setNavigationBarTitle({
title: option.type === 'edit' ? '编辑规格模版' : '添加规格模版'
title: '添加规格模版'
})
getSpecData()
})
/**
* 添加规格组
*/
function addSpecificationsGroup() {
specifications.children.push({
name: '',
children: []
})
scrollPageBottom()
}
/**
* 获取规格列表
* 删除规格组
* @param {Object} index
*/
function getSpecData(){
getSpecList({page: 0, size:10}).then(res=>{
vdata.specList = [{name: '顶级',id: 0},...res]
if(vdata.formData.id){
vdata.pidName = vdata.specList.filter(item => item.id == vdata.formData.pid)[0].name
}
function delSpecificationsGroup(index) {
if(specifications.children.length<=1) return;
specifications.children.splice(index, 1)
}
/**
* 向指定索引的规格组添加规格项
* @param {Object} index
*/
function addOptions(index) {
specifications.children[index].children.push({
name: '',
children: []
})
}
function levelSelect (e) {
console.log(e)
vdata.levelName = e.name;
vdata.formData.level = e.value;
/**
* 删除指定索引的规格组添加规格项
* @param {Object} index
* @param {Object} optionIndex
*/
function delOption(index, optionIndex) {
if(specifications.children[index].children.length<=1){
return
}
specifications.children[index].children.splice(optionIndex, 1)
}
function specSelect (e) {
console.log(e)
vdata.pidName = e.name;
vdata.formData.pid = e.id;
//页面滚动到最底部
function scrollPageBottom() {
nextTick(() => {
uni.pageScrollTo({
duration: 100, // 过渡时间
scrollTop: 100000, // 滚动的实际距离
})
})
}
//设置表单验证规则
function setFormRules() {
form.value.setRules(rules)
}
const formRefs = ref([]);
/**
* 绑定表单元素
* @param {Object} index
*/
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进行验证
* @param {Object} index
* @param {Object} index1
*/
function inpuChange(index, index1) {
const newIndex = index * 10000 + index1
refFormInput.value[newIndex].onFieldChange()
}
function onFieldChange(e) {
console.log(e);
}
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
})
})
})
}
/**
* 保存
*/
async function save() {
if (option.type === 'add') {
return addSpec(vdata.formData).then(res => {
infoBox.showToast('添加成功')
settimeoutBack(1500)
})
let isAllPassForm = 0
const nameFormRes = await returnPromise(nameFormRef.value.validate())
if (!nameFormRes.sucees) {
isAllPassForm -= 1
}
updateSpec(vdata.formData).then(res => {
infoBox.showToast('修改成功')
settimeoutBack(1500)
})
for (let i in specifications.children) {
const res = await returnPromise(formRefs.value[i].validate(), i)
isAllPassForm += res.sucees ? 1 : 0
}
//判断验证是否通过
if (isAllPassForm === specifications.children.length) {
console.log('pass');
const data = {
name: specifications.name,
children: specifications.children.map(v => {
return {
...v
}
})
}
addSpecQuic(data).then(res => {
infoBox.showSuccessToast('添加成功')
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
}
}
let timer = null
function settimeoutBack(time) {
clearTimeout(timer)
timer = setTimeout(() => {
uni.navigateBack()
}, time)
}
</script>
<style scoped>
page {

4
pageProduct/add-specifications/components/fast-edit.vue
View File

@@ -12,7 +12,7 @@
<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">
<up-input type="number" v-model="item.value">
<template #suffix>
<up-button @click="itemClick(item)" type="primary" text="修改" size="mini"></up-button>
</template>
@@ -116,7 +116,7 @@
}
})
const isSku = computed(() => {
// return data.value.typeEnum == '多规格'
// return data.value.type == 'sku'
return false
})
watch(() => popShow.value, (newval) => {

179
pageProduct/add-specifications/edit-specifications.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<view class="page min-page">
<view class="box">
<view class="block border-top-0 u-p-t-32 u-p-b-32">
<up-form ref="formRef" labelPosition="top" :model="vdata.formData" :rules="vdata.rules" labelWidth="80" :labelStyle="{fontWeight:'bold'}">
<up-form-item label="规格名称" prop="name" borderBottom >
<up-input v-model="vdata.formData.name" border="none" placeholder="规格名称,如:衣服" ></up-input>
</up-form-item>
<up-form-item label="排序" prop="sort" borderBottom >
<up-input v-model="vdata.formData.sort" border="none" placeholder="请输入排序" ></up-input>
</up-form-item>
</up-form>
</view>
<view class="save-btn-box">
<button class="save-btn " hover-class="btn-hover-class" @click="save">保存</button>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import infoBox from '@/commons/utils/infoBox.js'
import { updateSpec } from '@/api/product.js'
const option = {
type: 'add',
id: undefined
}
const formRef = ref(null)
const vdata = reactive({
formData: {
id: null,
name: "",
level: "",
sort: "",
pid: "",
},
rules: {
"name": {
required: true,
message: '请输入规格名称',
trigger: ['blur', 'change'],
},
"sort": {
required: true,
message: '请输入排序',
trigger: ['blur', 'change'],
},
},
})
onLoad(opt => {
if (opt && JSON.stringify(opt) !== '{}' && opt.type) {
const data = uni.getStorageSync('spec')
uni.removeStorageSync('spec')
if(data){
vdata.formData.id = data.id
vdata.formData.name = data.name
vdata.formData.sort = data.sort
vdata.formData.level = data.level
vdata.formData.pid = data.pid
}
}
uni.setNavigationBarTitle({
title: '编辑规格模版'
})
})
/**
* 保存
*/
async function save() {
updateSpec(vdata.formData).then(res => {
infoBox.showToast('修改成功')
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
}
</script>
<style scoped>
page {
background: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.page {
background: #F9F9F9;
padding: 32rpx 30rpx 0 30rpx;
padding-bottom: 200rpx;
}
::v-deep .uni-forms-item--border {
padding-top: 12px;
padding-bottom: 12px;
}
::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;
}
.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;
}
::v-deep .uni-input-placeholder {
font-size: 28rpx;
}
.option {
padding: 8rpx 24rpx 32rpx 24rpx;
background: #F9F9F9;
}
</style>