Merge branch 'new_gyq' of https://newgitea.sxczgkj.cn/czg_team/cashier_app into ymf

components/my-components/my-dine-types.vue

@@ -1,44 +1,39 @@
 <template>
-  <view>
-    <up-checkbox-group
-      v-model="useType"
-      placement="row"
-      shape="square"
-      size="28rpx"
-    >
-      <up-checkbox
-        :customStyle="{ marginRight: '16rpx' }"
-        v-for="item in dinetyps"
-        :key="item.value"
-        :name="item.value"
-        :label="item.label"
-      ></up-checkbox>
-    </up-checkbox-group>
-  </view>
+	<view>
+		<up-checkbox-group v-model="useType" placement="row" shape="square" size="28rpx">
+			<up-checkbox v-for="item in dinetyps" :key="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-checkbox>
+		</up-checkbox-group>
+	</view>
 </template>
 <script setup>
+import { ref } from 'vue';
+
+const customStyle = ref({
+	marginRight: '15px'
+});
+
 // 可使用类型：dine堂食/pickup自取/deliv配送/express快递
 const dinetyps = [
-  {
-    value: "dine-in",
-    label: "堂食",
-  },
-  {
-    value: "take-out",
-    label: "自取",
-  },
-  {
-    value: "post",
-    label: "配送",
-  },
-  {
-    value: "take-away",
-    label: "快递",
-  },
+	{
+		value: 'dine-in',
+		label: '堂食'
+	},
+	{
+		value: 'take-out',
+		label: '自取'
+	},
+	{
+		value: 'post',
+		label: '配送'
+	},
+	{
+		value: 'take-away',
+		label: '快递'
+	}
 ];
 
 const useType = defineModel({
-  default: () => [],
-  type: Array,
+	default: () => [],
+	type: Array
 });
-</script>
+</script>

components/my-components/my-footer-btn.vue

@@ -43,6 +43,7 @@ const emits = defineEmits(['confirm', 'cancel']);
 		position: fixed;
 		bottom: 0;
 		left: 0;
+		z-index: 99;
 		padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
 		background-color: #fff;
 		.btn {

components/my-components/my-hour-area.vue

@@ -1,111 +1,97 @@
 <template>
-  <view >
-    <up-radio-group v-model="useTimeType" placement="row">
-      <up-radio
-        v-for="item in useTimeTypeList"
-        :key="item.value"
-        :value="item.value"
-        :name="item.value"
-        :label="item.label"
-      ></up-radio>
-    </up-radio-group>
-
-    <view class="u-flex u-m-t-30 box" v-if="useTimeType=='custom'">
-        <view class="u-flex u-flex-1">
-            <view class="item " @click="pirckerShow(startValue, 'startValue')">
-        <text class="u-m-r-12" v-if="!startValue">开始时间</text>
-        <text class="u-m-r-12" v-else>{{ startValue }}</text>
-      </view>
-      <view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx;">—</view>
-      <view class="item " @click="pirckerShow(endValue, 'endValue')">
-        <text class="u-m-r-12" v-if="!endValue">结束时间</text>
-        <text class="u-m-r-12" v-else>{{ endValue }}</text>
-      </view>
-        </view>
-
-      <up-icon name="clock"></up-icon>
-    </view>
-
-    <up-datetime-picker
-      :show="show"
-      v-model="value1"
-      closeOnClickOverlay
-      @close="close"
-      @cancel="close"
-      @confirm="confirm"
-      mode="time"
-    ></up-datetime-picker>
-  </view>
+	<view>
+		<up-radio-group v-model="useTimeType" placement="row">
+			<up-radio v-for="item in useTimeTypeList" :key="item.value" :value="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
+		</up-radio-group>
+		<view class="u-flex u-m-t-30 box" v-if="useTimeType == 'custom'">
+			<view class="u-flex u-flex-1">
+				<view class="item" @click="pirckerShow(startValue, 'startValue')">
+					<text class="u-m-r-12" v-if="!startValue">开始时间</text>
+					<text class="u-m-r-12" v-else>{{ startValue }}</text>
+				</view>
+				<view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx">—</view>
+				<view class="item" @click="pirckerShow(endValue, 'endValue')">
+					<text class="u-m-r-12" v-if="!endValue">结束时间</text>
+					<text class="u-m-r-12" v-else>{{ endValue }}</text>
+				</view>
+			</view>
+			<up-icon name="clock"></up-icon>
+		</view>
+		<up-datetime-picker :show="show" v-model="value1" closeOnClickOverlay @close="close" @cancel="close" @confirm="confirm" mode="time"></up-datetime-picker>
+	</view>
 </template>
-  
-  <script setup>
-import { computed, ref } from "vue";
-const useTimeType = defineModel("useTimeType", {
-  type: String,
-  default: "all",
+
+<script setup>
+import { computed, ref } from 'vue';
+
+const customStyle = ref({
+	marginRight: '15px'
+});
+
+const useTimeType = defineModel('useTimeType', {
+	type: String,
+	default: 'all'
 });
 const useTimeTypeList = [
-  {
-    value: "all",
-    label: "全时段可用",
-  },
-  {
-    value: "custom",
-    label: "指定时间段可用",
-  },
+	{
+		value: 'all',
+		label: '全时段可用'
+	},
+	{
+		value: 'custom',
+		label: '指定时间段可用'
+	}
 ];
-import dayjs from "dayjs";
-const startValue = defineModel("startValue", {
-  type: String,
-  default: "",
+import dayjs from 'dayjs';
+const startValue = defineModel('startValue', {
+	type: String,
+	default: ''
 });
-const endValue = defineModel("endValue", {
-  type: String,
-  default: "",
+const endValue = defineModel('endValue', {
+	type: String,
+	default: ''
 });
 
 function close() {
-  show.value = false;
+	show.value = false;
 }
 const value1 = ref('');
 const show = ref(false);
-const nowKey = ref("");
+const nowKey = ref('');
 
 function pirckerShow(date, key) {
-  nowKey.value = key;
-  show.value = true;
-  value1.value = date||''
+	nowKey.value = key;
+	show.value = true;
+	value1.value = date || '';
 }
 
 function confirm(e) {
-  console.log(e);
+	console.log(e);
 
-  if (nowKey.value == "startValue") {
-    startValue.value=e.value
-  } else if (nowKey.value == "endValue") {
-    endValue.value = e.value;
-  }
-  value1.value = e.value;
-  show.value = false;
+	if (nowKey.value == 'startValue') {
+		startValue.value = e.value;
+	} else if (nowKey.value == 'endValue') {
+		endValue.value = e.value;
+	}
+	value1.value = e.value;
+	show.value = false;
 }
 </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
 .item {
-  font-size: 28rpx;
-  color: #666;
-  line-height: 48rpx;
-  padding: 0 12rpx;
-  display: flex;
-  
+	font-size: 28rpx;
+	color: #666;
+	line-height: 48rpx;
+	padding: 0 12rpx;
+	display: flex;
 }
-.box{
-    border: 2rpx solid #dddfe6;
-    padding: 16rpx 30rpx;
-    box-sizing: border-box;
-    width: 564rpx;
-    border-radius: 4rpx;
-    overflow: hidden;
+.box {
+	border: 2rpx solid #dddfe6;
+	padding: 16rpx 30rpx;
+	box-sizing: border-box;
+	width: 564rpx;
+	border-radius: 4rpx;
+	overflow: hidden;
 }
 </style>
-  

components/my-components/my-select-goods.vue

@@ -0,0 +1,316 @@
+<template>
+	<view class="my-select-goods">
+		<view class="radio-wrap">
+			<u-radio-group v-model="foodType">
+				<u-radio v-for="item in radioList" :key="item.value" :label="item.label" :name="item.value" :customStyle="customStyle"></u-radio>
+			</u-radio-group>
+		</view>
+		<view class="selec-goods-card" @click="popupShow = true" v-if="foodType == 2">
+			<view class="title">
+				<text class="t">选择商品</text>
+			</view>
+			<view class="placeholder">
+				<view class="left">
+					<text class="placeholder-t" v-if="selectGoodsCount.length <= 0">请选择商品</text>
+					<text class="t" v-else>{{ selectGoodsCount.map((item) => item.name).join('、') }}</text>
+				</view>
+				<u-icon name="arrow-right" size="14px" color="#999"></u-icon>
+			</view>
+		</view>
+		<u-popup :show="popupShow" :round="20" closeable @close="popupClosed">
+			<view class="popup-container">
+				<view class="title">
+					<text class="t">请选择</text>
+				</view>
+				<view class="goods-scroll-wrap">
+					<view class="left">
+						<scroll-view scroll-y class="scroll-view">
+							<view
+								class="category-item"
+								v-for="(item, index) in categorys"
+								:key="item.id"
+								:class="{ active: categorysIndex == index }"
+								@click="changeCategorys(item, index)"
+							>
+								<text class="t">{{ item.name }}</text>
+								<text class="t" v-if="item.selectedNum > 0">({{ item.selectedNum }})</text>
+							</view>
+						</scroll-view>
+					</view>
+					<view class="right">
+						<scroll-view scroll-y class="scroll-view">
+							<view class="goods-item" v-for="(item, index) in categorys[categorysIndex].goods" :key="item.id" @click="selectGoods(item, index)">
+								<view class="name">
+									<text class="t">{{ item.name }}</text>
+								</view>
+								<view class="selec-btn">
+									<u-icon name="checkmark-circle-fill" color="#318afe" size="18" v-if="item.selected"></u-icon>
+									<view class="circle" v-else></view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				<view class="footer">
+					<view class="btn">
+						<u-button type="primary" size="large" @click="confirmHandle">
+							确定
+							<template v-if="countNum > 0">({{ countNum }})</template>
+						</u-button>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getCategoryList, getProductList } from '@/http/api/product.js';
+
+const popupShow = ref(false);
+
+const modelValue = defineModel({
+	type: [String, Array],
+	default: []
+});
+
+const customStyle = ref({
+	marginRight: '20px'
+});
+
+const radioList = ref([
+	{
+		value: 1,
+		label: '全部商品参与'
+	},
+	{
+		value: 2,
+		label: '部分商品参与'
+	}
+]);
+
+const foodType = defineModel('foodType', {
+	type: [Number, String],
+	default: 1
+});
+
+const categorys = ref([]);
+const categorysIndex = ref(0);
+
+// 切换分类
+function changeCategorys(item, index) {
+	categorysIndex.value = index;
+}
+
+// 获取商品分类
+async function getCategoryListAjax() {
+	try {
+		categorys.value = await getCategoryList();
+		categorys.value.forEach((item) => {
+			item.goods = [];
+			item.selectedNum = 0;
+		});
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+const goods = ref([]);
+
+function selectGoods(item, index) {
+	item.selected = !item.selected;
+	updateSelectGoods();
+}
+
+// 在这个方法里更新已选择的数量和商品
+const countNum = ref(0);
+function updateSelectGoods() {
+	countNum.value = 0;
+	categorys.value.forEach((item) => {
+		let num = 0;
+		item.goods.forEach((val) => {
+			if (val.selected) {
+				num++;
+				countNum.value++;
+			}
+		});
+		item.selectedNum = num;
+	});
+	confirmSelectGoods;
+}
+
+// 确定
+const foods = defineModel('foods', {
+	type: [Array, String],
+	default: []
+});
+function confirmHandle() {
+	confirmSelectGoods();
+	popupShow.value = false;
+}
+
+// 点击确定更新已选择的商品
+const selectGoodsCount = ref([]);
+function confirmSelectGoods() {
+	selectGoodsCount.value = [];
+	categorys.value.forEach((item) => {
+		item.goods.forEach((val) => {
+			if (val.selected) {
+				selectGoodsCount.value.push(val);
+			}
+		});
+	});
+
+	foods.value = selectGoodsCount.value.map((item) => item.id);
+}
+
+// 获取商品列表
+async function getProductListAjax() {
+	try {
+		const res = await getProductList();
+		res.forEach((item, index) => {
+			console.log('modelValue.value===', modelValue.value);
+			console.log('index===', item.id.includes(modelValue.value));
+			if (modelValue.value.includes(item.id)) {
+				item.selected = true;
+			} else {
+				item.selected = false;
+			}
+			categorys.value.forEach((val, i) => {
+				if (val.id == item.categoryId) {
+					val.goods.push(item);
+				}
+			});
+		});
+
+		updateSelectGoods();
+		confirmSelectGoods();
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+// popup关闭
+function popupClosed() {
+	popupShow.value = false;
+	// countNum.value = 0;
+}
+
+onMounted(async () => {
+	await getCategoryListAjax();
+	await getProductListAjax();
+});
+</script>
+
+<style scoped lang="scss">
+.my-select-goods {
+	.selec-goods-card {
+		margin-top: 20upx;
+		background-color: #f8f8f8;
+		border-radius: 10upx;
+		padding: 20upx;
+		.ttile {
+			.t {
+				font-size: 28upx;
+				font-weight: bold;
+				color: #333;
+			}
+		}
+		.placeholder {
+			display: flex;
+			padding-top: 12upx;
+			.left {
+				flex: 1;
+				.placeholder-t {
+					font-size: 28upx;
+					color: #999;
+				}
+			}
+		}
+	}
+}
+.popup-container {
+	$color: #318afe;
+	.title {
+		padding: 28upx;
+		display: flex;
+		justify-content: center;
+		.t {
+			font-size: 32upx;
+			font-weight: bold;
+		}
+	}
+	.goods-scroll-wrap {
+		width: 100%;
+		height: 50vh;
+		display: flex;
+		.left {
+			width: 240upx;
+			height: 100%;
+			background-color: #f9f9f9;
+		}
+		.right {
+			flex: 1;
+			height: 100%;
+		}
+		.scroll-view {
+			width: 100%;
+			height: 100%;
+			.category-item {
+				width: 100%;
+				height: 84upx;
+				display: flex;
+				align-items: center;
+				padding-left: 38upx;
+				&.active {
+					background-color: #fff;
+					position: relative;
+					&::after {
+						content: '';
+						width: 8upx;
+						height: 100%;
+						position: absolute;
+						top: 0;
+						left: 0;
+						z-index: 10;
+						background-color: $color;
+					}
+				}
+				.t {
+					font-size: 32upx;
+				}
+			}
+			.goods-item {
+				height: 84upx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 28upx;
+				.name {
+					.t {
+						font-size: 32upx;
+					}
+				}
+				.selec-btn {
+					$size: 32upx;
+					width: $size;
+					height: $size;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					.circle {
+						width: $size;
+						height: $size;
+						border-radius: 50%;
+						border: 1px solid #999;
+					}
+				}
+			}
+		}
+	}
+	.footer {
+		padding: 28upx;
+	}
+}
+</style>