同步代码

pageCoupon/components/select-goods.vue

@@ -0,0 +1,178 @@
+<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>
+			<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 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"
+	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: '',
+			sort: "createdAt,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 getCategoryList () {
+		$tbShopCategory({
+			page:0,size:200
+		}).then(res=>{
+			category.list = res.content;
+			category.query.categoryId = res.content[0].id
+			getGoodsList()
+		})
+	}
+	function getGoodsList () {
+		$tbProductV2(category.query).then(res => {
+			category.goodsList = res.content.map(v => {
+				return {
+					...v,
+					isSellNone: false,
+					checked: false,
+					showDetail: false
+				}
+			})
+		})
+	}
+	function open(){
+		show.value = true;
+		getCategoryList();
+	}
+	
+	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;
+			}
+			.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>