同步代码
This commit is contained in:
GaoHao
642
pageGoodsGroup/edit-group/edit-group.vue
Normal file
642
pageGoodsGroup/edit-group/edit-group.vue
Normal file
@@ -0,0 +1,642 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view>
|
||||
<uni-forms :model="category" :rules="rules" err-show-type="toast" ref="form" :border="true"
|
||||
label-position="top" label-width="350">
|
||||
<view class="block">
|
||||
<view class="input-padding-b-0 ">
|
||||
<uni-forms-item label="分类名称" required name="name">
|
||||
<view class="u-m-t-16 u-m-b-24">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="category.name" placeholder="输入分类名称" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<template v-if="option.type=='edit'">
|
||||
<uni-forms-item label="排序" required name="sort">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="category.sort" type="number" placeholder="排序越小越靠前" />
|
||||
</uni-forms-item>
|
||||
</template>
|
||||
|
||||
<uni-forms-item label="">
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="label-title">分组状态</view>
|
||||
<view class="u-flex">
|
||||
<my-switch v-model="category.isShow"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="">
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="label-title">售卖时间管控</view>
|
||||
<view class="u-flex">
|
||||
<my-switch v-model="category.useTime"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="category.useTime" class="u-flex u-row-between u-col-center u-m-t-16 ">
|
||||
<view class="u-flex timesel" @click="changeTime('start')">
|
||||
<up-icon name="clock" size="14"></up-icon>
|
||||
<view class="u-m-l-20">
|
||||
<text v-if="!category.saleStartTime" class="color-999">起始时间</text>
|
||||
<text v-else>{{category.saleStartTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-l-30 u-p-r-30">至</view>
|
||||
<view class="u-flex timesel" @click="changeTime('end')">
|
||||
<up-icon name="clock" size="14"></up-icon>
|
||||
<view class="u-m-l-20">
|
||||
<text v-if="!category.saleEndTime" class="color-999">结束时间</text>
|
||||
<text>{{category.saleEndTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="分组排序" required name="name">
|
||||
<view class="u-m-t-24">
|
||||
<uni-number-box :value="category.sort" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</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>
|
||||
|
||||
|
||||
<up-datetime-picker @cancel="timeCancel" @confirm="timeConfirm" :show="time.show" v-model="time.val" mode="time"></up-datetime-picker>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import tColorPicker from '@/components/t-color-picker/t-color-picker'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
tbProductGroupGet,
|
||||
tbProductGroupDelete,
|
||||
tbProductGroupPut,
|
||||
upGroupSort,
|
||||
tbProductGroupPost
|
||||
} from '@/http/yskApi/shop.js'
|
||||
|
||||
const $productCategory = {
|
||||
add: tbProductGroupPost,
|
||||
del: tbProductGroupDelete,
|
||||
update: tbProductGroupPut,
|
||||
get: tbProductGroupGet
|
||||
}
|
||||
|
||||
|
||||
const refAddChilCate = ref(null)
|
||||
const refAddChilCateTitle = ref('添加子分类')
|
||||
|
||||
function refAddChilCateClose() {
|
||||
refAddChilCate.value.close()
|
||||
categoryChild.value = {
|
||||
...categoryBasicData
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let refMoreSheet = ref(null)
|
||||
let selItem = {
|
||||
data: '',
|
||||
index: ''
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 表单样式
|
||||
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: '输入分类名称'
|
||||
}]
|
||||
},
|
||||
sort: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '输入排序'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
const refFiles = ref([])
|
||||
|
||||
function setRefFile(index) {
|
||||
refFiles.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
refFiles.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const time=reactive({
|
||||
show:false,
|
||||
val:'',
|
||||
key:''
|
||||
})
|
||||
function timeCancel(){
|
||||
time.show=false
|
||||
}
|
||||
function timeConfirm(e){
|
||||
console.log(e);
|
||||
if(time.key=='start'){
|
||||
category.saleStartTime=e.value
|
||||
}else{
|
||||
category.saleEndTime=e.value
|
||||
}
|
||||
time.val=''
|
||||
time.show=false
|
||||
}
|
||||
function changeTime(key) {
|
||||
time.key=key;
|
||||
time.show=true;
|
||||
}
|
||||
|
||||
|
||||
function toTimer(timer, index) {
|
||||
console.log(timer);
|
||||
uni.setStorageSync('timer', timer.map(v => {
|
||||
return {
|
||||
...v,
|
||||
cycleChecked: v.cycleChecked.map(v => v.value)
|
||||
}
|
||||
}))
|
||||
go.to('PAGES_CATEGORY_TIMER', {
|
||||
index: index
|
||||
})
|
||||
}
|
||||
|
||||
function returnTimers(timers) {
|
||||
const {
|
||||
listingTime,
|
||||
offShelf,
|
||||
cycleChecked
|
||||
} = timers
|
||||
let len = cycleChecked.length
|
||||
if (len === 7) {
|
||||
return `每天 ${listingTime.value} - ${offShelf.value}`
|
||||
}
|
||||
let result = cycleChecked.reduce((prve, cur) => {
|
||||
return prve + cur.text.replace('星期', '周')
|
||||
}, '')
|
||||
return `${result} ${listingTime.value} - ${offShelf.value}`
|
||||
}
|
||||
//图片上传
|
||||
function FileUploadprogress() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadsuccess() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadail() {
|
||||
|
||||
}
|
||||
|
||||
function FileUploadselect(e) {
|
||||
// TEST
|
||||
// FormData.images.push(e)
|
||||
}
|
||||
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...categoryOptionsBasicData
|
||||
}
|
||||
}
|
||||
// 构造分类的基础数据
|
||||
const categoryBasicData = {
|
||||
id: '',
|
||||
name: '',
|
||||
isShow: 1,
|
||||
sort: 0,
|
||||
productIds: [],
|
||||
saleTime: [],
|
||||
useTime: 0,
|
||||
saleEndTime:'',
|
||||
saleStartTime:'',
|
||||
shopId: uni.getStorageSync('shopId')
|
||||
}
|
||||
const categoryChild = ref({
|
||||
...categoryBasicData
|
||||
})
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 分类列表
|
||||
const category = reactive({
|
||||
...categoryBasicData,
|
||||
childrenList: []
|
||||
})
|
||||
//添加子分类
|
||||
function addcategoryChildren() {
|
||||
refAddChilCate.value.open()
|
||||
// category.childrenList.push({
|
||||
// ...categoryBasicData
|
||||
// })
|
||||
// scrollPageBottom()
|
||||
}
|
||||
|
||||
//页面滚动到最底部
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
const option = reactive({
|
||||
type: ''
|
||||
})
|
||||
|
||||
function isNoEmpty(obj) {
|
||||
return obj && JSON.stringify(obj) !== '{}'
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听定时器保存,拿到数据
|
||||
* @param {Boolean} open //控制开启或关闭监听
|
||||
*/
|
||||
function watchTimerSave(open = true) {
|
||||
if (open) {
|
||||
uni.$on('timerSave', function(res) {
|
||||
const {
|
||||
index,
|
||||
data
|
||||
} = res
|
||||
console.log('timerSave get');
|
||||
console.log(res);
|
||||
if (index == -1) {
|
||||
category.timers = data
|
||||
} else {
|
||||
category.childrenList[index].timers = data
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.$off('timerSave', function(data) {
|
||||
console.log('timerSave remove');
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
watchTimerSave()
|
||||
|
||||
onLoad(params => {
|
||||
let cateItem = uni.getStorageSync('cateItem')
|
||||
if (isNoEmpty(params)) {
|
||||
option.type = params.type
|
||||
}
|
||||
if (option.type === 'edit' && isNoEmpty(cateItem)) {
|
||||
console.log(cateItem);
|
||||
for (let i in cateItem) {
|
||||
if (i.substring(0, 2) === 'is' && i.length > 2) {
|
||||
cateItem[i] = cateItem[i] * 1
|
||||
} else {
|
||||
cateItem[i] = cateItem[i] === 'null' ? '' : cateItem[i]
|
||||
}
|
||||
}
|
||||
Object.assign(category, cateItem)
|
||||
}
|
||||
console.log(category);
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.type === 'add' ? '添加分组' : '编辑分组'
|
||||
})
|
||||
})
|
||||
|
||||
function emitcategorySave() {
|
||||
// emitcategorySave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName, category.list)
|
||||
}
|
||||
|
||||
|
||||
function returnValidateResult(obj) {
|
||||
const validateFuncObj = {
|
||||
name: (value) => {
|
||||
return {
|
||||
pass: value.length >= 1,
|
||||
errMeessage: '请输入分类名称'
|
||||
}
|
||||
},
|
||||
sort: (value) => {
|
||||
return {
|
||||
pass: value !== '',
|
||||
errMeessage: '请输入排序'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function validateFunc(key, value) {
|
||||
if (validateFuncObj.hasOwnProperty(key)) {
|
||||
const func = validateFuncObj[key]
|
||||
return func(value)
|
||||
}
|
||||
return {
|
||||
pass: true
|
||||
}
|
||||
}
|
||||
let resultArr = []
|
||||
for (let key in obj) {
|
||||
resultArr.push(validateFunc(key, obj[key]))
|
||||
}
|
||||
resultArr = resultArr.filter(v => !v.pass)
|
||||
return resultArr
|
||||
}
|
||||
let timer = null
|
||||
|
||||
function onfileChange(val, data, key) {
|
||||
data[key] = val
|
||||
}
|
||||
|
||||
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
const formRules = {}
|
||||
const result = []
|
||||
result.push(...returnValidateResult(category))
|
||||
for (let obj of category.childrenList) {
|
||||
const res = returnValidateResult(obj)
|
||||
result.push(...res)
|
||||
}
|
||||
if (result.length) {
|
||||
return infoBox.showToast(result[0].errMeessage)
|
||||
}
|
||||
|
||||
if (option.type === 'edit') {
|
||||
const res = await $productCategory.update({
|
||||
...category,
|
||||
childrenList: ''
|
||||
})
|
||||
} else {
|
||||
const res = await $productCategory.add({
|
||||
...category,
|
||||
childrenList: ''
|
||||
})
|
||||
}
|
||||
|
||||
infoBox.showToast(option.type === 'edit' ? '修改成功' : '添加成功')
|
||||
timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
go.back()
|
||||
}, 1500);
|
||||
// const res = await form.value.validate().then(res => {
|
||||
// go.back()
|
||||
// })
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/commons/style/reset-uni-form.scss';
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.category-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .uni-forms-item{
|
||||
min-height: inherit;
|
||||
}
|
||||
::v-deep .input-padding-b-0 .uni-forms-item--border{
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
::v-deep .uni-forms-item--border{
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.box {
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 18rpx 0 18rpx;
|
||||
padding: 32rpx 24rpx 8rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
|
||||
.timesel {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user