初始上传

addon/cashier/source/os/components/coupon-category-popup/coupon-category-popup.vue

@@ -0,0 +1,48 @@
+<template>
+	<unipopup ref="couponCategoryPop" type="center">
+		<view class="coupon-category-pop">
+			<view class="header flex justify-between">
+				<view class="title">选择分类</view>
+				<!-- <view class="pop-header-close" @click="$refs.couponCategoryPop.close()">
+					<text class="iconguanbi1 iconfont"></text>
+				</view> -->
+			</view>
+			<!-- :checkStrictly="true" -->
+			<view :overflow-y="true" class="body">
+				<scroll-view class="tree" :overflow-y="true">
+					<DaTreeVue2
+					  ref="DaTreeRef"
+					  :data="treeData"
+					  labelField="category_name"
+					  valueField="category_id"
+					  childrenField="child_list"
+					  :themeColors="'var(--primary-color)'"
+					  expandChecked
+					  showCheckbox
+					  :defaultCheckedKeys="defaultCheckedKeysValue"
+					  @change="handleTreeChange"></DaTreeVue2>
+				  </scroll-view>
+			</view>
+			<view class="footer flex justify-end">
+				<button type="default" class="confirm btn" @click="confirm">确认</button>
+				<button type="default" class="btn" @click="$refs.couponCategoryPop.close()">取消</button>
+			</view>
+		</view>
+	</unipopup>
+</template>
+
+<script>
+	import DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
+	import unipopup from '@/components/uni-popup/uni-popup.vue';
+	import index from './index.js';
+	export default {
+		components: {
+			DaTreeVue2,
+			unipopup,
+		},
+		mixins: [index]
+	};
+</script>
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

addon/cashier/source/os/components/coupon-category-popup/index.js

@@ -0,0 +1,87 @@
+import {
+	getGoodsCategory
+} from '@/api/goods.js'
+export default {
+	name: 'couponCategoryPopup',
+	data() {
+		return {
+			treeData: [],
+			defaultCheckedKeysValue: [],
+			checkList: [], //选中以及半选中数据
+
+		}
+	},
+	mounted() {
+		this.getGoodsCategoryFn()
+	},
+	methods: {
+		getGoodsCategoryFn() {
+			getGoodsCategory({
+				level: 3
+			}).then(res => {
+				this.treeData = res.data
+			})
+		},
+		open(value) {
+			this.defaultCheckedKeysValue = this.$util.deepClone(value)
+			this.$refs.couponCategoryPop.open()
+		},
+		handleTreeChange(val) {
+			this.defaultCheckedKeysValue = this.$util.deepClone(val)
+			let halfCheckList = this.$refs.DaTreeRef.getHalfCheckedKeys()||[]
+			this.checkList = this.$util.deepClone(val.concat(halfCheckList))
+		},
+		//处理数据
+		getSelectedIdsAndNames(tree_selected, tree_all) {
+			let name_arr = [];
+			let id_arr = [];
+			let selected_num = 0;
+			for (let i in tree_selected) {
+				let item_selected = tree_selected[i];
+				let item_all = null;
+				tree_all.forEach((item) => {
+					if (item.category_id === item_selected.category_id) {
+						item_all = item;
+						return;
+					}
+				})
+				if (!item_all) throw '对比数据有误';
+				let title = item_selected.category_name;
+				id_arr.push(item_selected.category_id);
+				if (item_selected.child_num > 0) {
+					let res = this.getSelectedIdsAndNames(item_selected.child_list, item_all.child_list);
+					if (res.selected_num == item_all.child_num) {
+						selected_num++;
+					} else {
+						title += '（' + res.name_arr.join('、') + '）';
+					}
+					id_arr = id_arr.concat(res.id_arr);
+				} else {
+					selected_num++;
+				}
+				name_arr.push(title);
+			}
+			return {
+				selected_num: selected_num,
+				name_arr: name_arr,
+				id_arr: id_arr,
+			};
+		},
+		confirm() {
+			if(!this.checkList.length){
+				this.$util.showToast({
+					title: "请选择商品分类"
+				});
+				return false
+			}
+			getGoodsCategory({
+				level: 3,
+				category_ids:this.checkList.join(',')
+			}).then(res => {
+				let selectedData = this.getSelectedIdsAndNames(res.data, this.treeData);
+				this.$emit('confirm',selectedData)
+				this.$refs.couponCategoryPop.close()
+			})
+		}
+	}
+}

addon/cashier/source/os/components/coupon-category-popup/index.scss

@@ -0,0 +1,42 @@
+.coupon-category-pop{
+	width: 7rem;
+	background-color: #fff;
+	border-radius: 0.06rem;
+	.header{
+		padding: 0.15rem 0.2rem;
+		font-size: 0.14rem;
+		border-bottom: 0.01rem solid #e6e6e6;
+		
+	}
+	.body{
+		padding: 0.2rem 0.3rem;
+		padding-bottom: 0.15rem;
+		box-sizing: border-box;
+		height: 4rem;
+		.tree{
+			height: 100%;
+		}
+	}
+	.footer{
+		padding: 0 0.3rem;
+		padding-bottom: 0.15rem;
+		 .btn {
+			margin: 0;
+		    display: inline-block;
+		    padding: 0 0.2rem;
+		    height: 0.36rem;
+		    line-height: .36rem;
+		    font-size: 0.14rem;
+		    border-radius: 3px;
+			
+			&.confirm{
+				background-color: var(--primary-color);
+				color: #fff;
+				margin-right: 0.15rem;
+				&::after{
+					border-width: 0;
+				}
+			}
+		}
+	}
+}