cashier_app/pageCoupon/components/select-goods.vue

<template>
	<up-popup :show="show" @close="close" round="20" mode="bottom">
	    <view class="head">
	        <text></text>
	        <text class="title">请选择</text>
	        <up-icon @tap="close" name="close-circle-fill" color="#333" size="20"></up-icon>
		</view>
		<view class="content">
			<view class="category">
				<view class="category_item" @tap="itemClick(item,index)" :class="{active:index===category.active}" v-for="(item,index) in category.list" :key="index">{{item.name}}</view>
			</view>
			<view style="flex-shrink: 0;">
				<up-radio-group v-model="goodsValue" @change="groupChange" style="width: 100%;display: initial;">
					<view class="goodsList">
						<view class="goodsItem" @tap="goodsClick(item,index)" v-for="(item,index) in category.goodsList" :key="index">
							<view>{{item.name}}</view>
							<up-radio
							  :key="item.id"
							  :name="item.id"
							  @change="groupChange"
							>
							</up-radio>
						</view>
					</view>
				</up-radio-group>
			</view>
		
		</view>
		<view class="bomBtn">
			<view class="affirm" @tap="affirm">确定</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { reactive,ref,onMounted } from 'vue';
	import { $tbShopCategory, $tbProductV2 } from "@/http/yskApi/goods.js"
	import { getProductPage, getCategoryList } from '@/api/product.js'
	const props=defineProps({
		show:{
			type:Boolean,
			default:false
		}
	})
	const emits=defineEmits(['itemClick','close', "affirm"])
	const category=reactive({
		list:[],
		goodsList:[],
		active: 0,
		query: {
			page: 0,
			size: 999,
			categoryId: '',
			orderBy: "create_time desc",
		}
	})
	let goodsValue = ref('');
	let show=ref(false)
	
	function itemClick(item,index){
		category.active = index;
		category.query.categoryId = item.id;
		getGoodsList()
	}
	function goodsClick (item,index) {
		goodsValue.value = item.id;
	}
	function groupChange ( n ) {
		// console.log(n)
	}
	function getCategory () {
		getCategoryList({
			page:0,size:200
		}).then(res=>{
			category.list = res;
			category.query.categoryId = res[0].id
			getGoodsList()
		})
	}
	function getGoodsList () {
		getProductPage(category.query).then(res => {
			category.goodsList = res.records.map(v => {
				return {
					...v,
					isSellNone: false,
					checked: false,
					showDetail: false
				}
			})
		})
	}
	function open(){
		show.value = true;
		getCategory();
	}
	
	function close(){
		show.value = false;
		category.active = 0;
		goodsValue.value = "";
		emits('close')
	}
	/**
	 * 确认
	 */
	function affirm() {
		let item;
		category.goodsList.forEach((v,e)=>{
			if ( v.id == goodsValue.value) {
				item = v;
			} 
		})
		emits('affirm',item)
		close();
	}
	defineExpose({
		open,close,affirm
	})
</script>

<style lang="scss">
	.head{
		display: flex;
		padding: 32rpx 28rpx;
		align-items: center;
		justify-content: space-between;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
	}
	.content{
		display: flex;
		height: 672rpx;
		.category{
			min-width: 316rpx;
			height: 100%;
			overflow-y: auto;
			background: #F9F9F9;
			.category_item{
				padding: 22rpx 24rpx;
				border-left: 8rpx solid transparent;
				 word-wrap: break-word;
			}
			.active{
				border-left: 8rpx solid #318AFE;
				background-color: #fff;
			}
		}
		.goodsList{
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			.goodsItem{
				width: 100%;
				padding: 22rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.bomBtn{
		padding: 16rpx 38rpx 32rpx 38rpx;
		background-color: #fff;
		.affirm{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #318AFE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>