433 lines
9.4 KiB
Vue
433 lines
9.4 KiB
Vue
<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.status"></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" >
|
|
<up-radio-group v-model="category.sortMode" placement="row" @change="groupChange">
|
|
<up-radio shape='circle' :customStyle="{marginBottom: '8px',marginRight: '30rpx'}" v-model:checked="ele.hasPermission"
|
|
usedAlone v-for="(ele, index) in pageData.sortType" :key="index" :name="ele.value" :label="ele.label"
|
|
style="margin-right: 40rpx;font-size: 28rpx;">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="分组排序" required name="name">
|
|
<view class="u-m-t-24">
|
|
<up-number-box v-model="category.sort" integer></up-number-box>
|
|
</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 { reactive, ref, } from 'vue';
|
|
import { onLoad, onReady } from '@dcloudio/uni-app';
|
|
import go from '@/commons/utils/go.js';
|
|
import { addProdGroup, updateProdGroup } from '@/http/api/product.js'
|
|
|
|
const option = reactive({
|
|
type: ''
|
|
})
|
|
|
|
// 构造分类的基础数据
|
|
const category = reactive({
|
|
id: '',
|
|
name: '',
|
|
status: 1,
|
|
sort: 1,
|
|
useTime: 0,
|
|
saleEndTime:'',
|
|
saleStartTime:'',
|
|
sortMode: '0',
|
|
childrenList: []
|
|
})
|
|
|
|
const pageData = reactive({
|
|
sortType: [
|
|
{label: '默认', value: '0'},
|
|
{label: '价格从高到低', value: '1'},
|
|
{label: '价格从低到高', value: '2'},
|
|
{label: '销量由高到低', value: '3'},
|
|
{label: '销量由低到高', value: '4'},
|
|
],
|
|
})
|
|
|
|
|
|
// 表单样式
|
|
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 time=reactive({
|
|
show:false,
|
|
val:'',
|
|
key:''
|
|
})
|
|
onLoad(option => {
|
|
|
|
uni.setNavigationBarTitle({
|
|
title: option.type === 'add' ? '添加分组' : '编辑分组'
|
|
})
|
|
})
|
|
|
|
|
|
/**
|
|
* 打开时间弹窗
|
|
* @param {Object} key
|
|
*/
|
|
function changeTime(key) {
|
|
time.key=key;
|
|
time.show=true;
|
|
}
|
|
|
|
/**
|
|
* 关闭时间弹窗
|
|
*/
|
|
function timeCancel(){
|
|
time.show=false
|
|
}
|
|
|
|
/**
|
|
* 时间设置确定
|
|
* @param {Object} e
|
|
*/
|
|
function timeConfirm(e){
|
|
console.log(e);
|
|
if(time.key=='start'){
|
|
category.saleStartTime=e.value+':00'
|
|
}else{
|
|
category.saleEndTime=e.value+':00'
|
|
}
|
|
time.val=''
|
|
time.show=false
|
|
}
|
|
function groupChange (n) {
|
|
console.log('groupChange ', n);
|
|
};
|
|
|
|
|
|
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
|
|
|
|
|
|
async function save() {
|
|
const result = []
|
|
result.push(...returnValidateResult(category))
|
|
|
|
if (result.length) {
|
|
return uni.$utils.showToast(result[0].errMeessage)
|
|
}
|
|
console.log(category)
|
|
if (option.type === 'edit') {
|
|
const res = await updateProdGroup({
|
|
...category,
|
|
childrenList: ''
|
|
})
|
|
} else {
|
|
const res = await addProdGroup({
|
|
...category,
|
|
childrenList: ''
|
|
})
|
|
}
|
|
|
|
uni.$utils.showToast(option.type === 'edit' ? '修改成功' : '添加成功')
|
|
timer = setTimeout(() => {
|
|
clearTimeout(timer)
|
|
go.back()
|
|
}, 1500);
|
|
|
|
|
|
}
|
|
</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> |