QianNiaoShop/pagesS/goods/yygoods.vue

<template>
	<view class="content">
		<checkbox-group>
			<view class="good" v-for="item in list">
				<image :src="item.image" mode="" class="good-img"></image>
				<view class="good-info">
					<view class="good-tit clamp2">
						{{item.name}}
					</view>
					<view class="good-tip">
						随时随地 预约服务
					</view>
					<view class="good-buy">
						已售1000件
					</view>
					<view class="good-price">
						{{item.price}} <text class="ot-price">￥{{item.ot_price}}</text>
					</view>
				</view>
				<checkbox :checked="item.isCheck" class="good-check" :value="item.id" @click="changeCheck(item)"/>
			</view>
		</checkbox-group>
			<u-loadmore :status="loadingType" />
		<view class="" style="height: 120rpx;">
			
		</view>
		<view class="sub-btn" @click="addGood">
			确认添加
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingType: 'loadmore',
				page: 1,
				pageSize: 10,
				loaded: false,
				list: []
			}
		},
		computed: {
			chooseList() {
				let arr =  this.list.filter((item)=> {
					return item.isCheck == true
				})
				return arr
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			// this.getList()
		},
		onReady() {

		},
		methods: {
			addGood() {
				
				this._prePage().xmlist = this.chooseList
				console.log(this.chooseList)
				uni.navigateBack()
			},
			changeCheck(item) {
				item.isCheck = !item.isCheck
				
				console.log(this.list)
			},
			getList() {
				let that = this
				if(that.loadingType == 'nomre' || that.loadingType == 'loading') {
					return
				}
				that.loadingType = 'loading'
				
				this.$u.api.getYyItemList({
					page: that.page,
					pageSize: that.pageSize,
				}).then(res => {
					that.list = that.list.concat(res.data.map(item => {
						item.isCheck = false
						return item
					}))
					that.page++
					if(that.pageSize == res.data.length ) {
						that.loadingType = 'loadmore'
					}else {
						that.loadingType = 'nomore'
					}
					that.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 1rpx;
	}
	.good {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: flex-start;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		.good-check {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
		}
		.good-img {
			width: 256rpx;
			height: 256rpx;
			background: #D6DEE1;
			border-radius: 15rpx;
			flex-shrink: 0;
			margin-right: 15rpx;
		}
		.good-info {
			display: flex;
			flex-direction: column;
			// align-items: ;
			justify-content: space-between;
			align-items: flex-start;
			.good-tit {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.good-buy {
				font-size: 24rpx;
				font-weight: 500;
				color: #9a9a9a;
			}
			
			.good-tip {
				font-size: 24rpx;
				font-weight: 500;
				color: #FA7014;
			}
			.good-price {
				color: #fd463e;
				font-size: 32rpx;
				&::before {
					content: '￥';
					font-size: 22rpx;
					color: #fd463e;
				}
				text {
					padding-left: 15rpx;
					font-size: 26rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}
			}
		}
		
	}
	.sub-btn {
		width: 616rpx;
		height: 74rpx;
		background: #4D74CF;
		border-radius: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 74rpx;
		position: fixed;
		bottom: 45rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>