同步代码

pageGoodsGroup/edit-group/components/edit-category.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pageGoodsGroup/edit-group/edit-group.vue

@@ -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>

pageGoodsGroup/edit-group/timer.vue

@@ -0,0 +1,213 @@
+<template>
+	<view class="u-p-30 min-page">
+		<view class="u-flex">
+			<view style="width: 210rpx;">
+				<my-button shape="circle" @click="addTimer">添加定时器</my-button>
+			</view>
+		</view>
+		<view class="list u-m-t-20" v-if="list.length">
+			<view class="block" v-for="(item,index) in list" :key="index">
+				<view class="u-flex u-row-between">
+					<view>定时器{{index+1}}</view>
+					<uni-icons @click="delTimer(index)" type="trash"></uni-icons>
+				</view>
+				<view class="u-flex u-m-t-20 u-row-between">
+					<view>周期</view>
+					<view @click="selectAllClick(index)">全选</view>
+				</view>
+				<view class="u-m-t-20">
+					<uni-data-checkbox multiple v-model="item.cycleChecked" :localdata="cycle"></uni-data-checkbox>
+				</view>
+				<view class="u-m-t-20">
+					<view class="u-flex">
+						<view>上架时间:</view>
+						<view class="u-flex-1 u-m-l-10">
+							<picker mode="multiSelector" @change="listingTimeChange($event,index)"
+								:value="item.listingTime.index" :range="times">
+								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
+									{{item.listingTime.value}}
+								</view>
+							</picker>
+						</view>
+					</view>
+					<view class="u-flex u-m-t-20">
+						<view>下架时间:</view>
+						<view class="u-flex-1 u-m-l-10">
+							<picker mode="multiSelector" @change="offShelfChange($event,index)"
+								:value="item.offShelf.index" :range="times">
+								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
+									{{item.offShelf.value}}
+								</view>
+							</picker>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="u-flex u-row-center u-m-t-60">
+			<my-button width="580" shape="circle" @click="save">保存</my-button>
+		</view>
+
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad,
+		onReady
+	} from '@dcloudio/uni-app';
+	import {
+		ref
+	} from 'vue';
+	import go from '@/commons/utils/go.js';
+	import myButton from '@/components/my-components/my-button.vue'
+	//返回一天的时间 时分格式
+	function returnDayTime() {
+		return new Array(2).fill(1).map((v, index) => {
+			if (index === 0) {
+				return new Array(24).fill(1).map((hour, index) => {
+					return `0${index}`.slice(-2)
+				})
+			}
+			if (index === 1) {
+				return new Array(60).fill(1).map((hour, index) => {
+					return `0${index}`.slice(-2)
+				})
+			}
+		})
+	}
+	const times = ref(returnDayTime())
+	let defaultTimeIndex = ref(0)
+
+	function getTime(indexArr) {
+		const hour = times.value[0][indexArr[0]]
+		const month = times.value[1][indexArr[1]]
+		return `${hour}:${month}`
+	}
+	//获取$event.detail.value
+	function getEnentDetailValue(e) {
+		return e.detail.value
+	}
+
+	function setListTimeValue(index, key, time) {
+		list.value[index][key].value = time
+	}
+
+	function listingTimeChange(e, index) {
+		const indexArr = getEnentDetailValue(e)
+		const time = getTime(indexArr)
+		setListTimeValue(index, 'listingTime', time)
+	}
+
+	function offShelfChange(e, index) {
+		const indexArr = getEnentDetailValue(e)
+		const time = getTime(indexArr)
+		setListTimeValue(index, 'offShelf', time)
+	}
+
+
+
+	const cycle = [{
+			value: 0,
+			text: '星期一'
+		},
+		{
+			value: 1,
+			text: '星期二'
+		},
+		{
+			value: 2,
+			text: '星期三'
+		},
+		{
+			value: 3,
+			text: '星期四'
+		},
+		{
+			value: 4,
+			text: '星期五'
+		},
+		{
+			value: 5,
+			text: '星期六'
+		},
+		{
+			value: 6,
+			text: '星期日'
+		}
+	]
+	const ListDataconstructor = {
+		cycleChecked: [0, 1, 2, 3, 4, 5, 6],
+	}
+
+	function returnBasicTimeConstructor() {
+		return {
+			listingTime: {
+				value: '09:00',
+				index: [9, 0]
+			},
+			offShelf: {
+				value: '18:00',
+				index: [18, 0]
+			}
+		}
+	}
+	const list = ref([returnBasicDataConstructor()])
+	function returnBasicDataConstructor() {
+		return {
+			...ListDataconstructor,
+			...returnBasicTimeConstructor()
+		}
+	}
+
+	function addTimer() {
+		list.value.push(returnBasicDataConstructor())
+	}
+	function delTimer(index) {
+		list.value.splice(index,1)
+	}
+	function selectAllClick(index){
+		list.value[index].cycleChecked=ListDataconstructor.cycleChecked
+	}
+	let index=null
+	// 触发定时器保存事件将数据给到添加商品页面
+	function emitTimerSave(){
+		uni.$emit('timerSave',{
+			data:list.value.map(v=>{
+				return {
+					...v,
+					cycleChecked:v.cycleChecked.map(index=>{
+						return {value:index,text:cycle[index].text}
+					})
+				}
+			}),
+			index:index
+		})
+		go.back()
+	}
+	function save(){
+		console.log(list.value);
+		emitTimerSave()
+	}
+	onLoad((opt)=>{
+		index=opt.index
+		const arr=uni.getStorageSync('timer')
+		if(arr.length){
+			list.value=arr
+		}
+	})
+</script>
+
+<style lang="scss">
+	.min-page {
+		background-color: #F9F9F9;
+	}
+
+	.block {
+		background: #FFFFFF;
+		border-radius: 18rpx 18rpx 18rpx 18rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+	}
+</style>