原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（5）购书清单

81 阅读 0 评论 54 点赞

我是靠谱客的博主诚心板凳，最近开发中收集的这篇文章主要介绍原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（5）购书清单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

显示打算借阅的图书清单

效果图

在这里插入图片描述

wxml代码

<form bindsubmit="mysubmit" >
	<!--购物车-产品列表--> 
	<checkbox-group bindchange="ck" name="xuanxiang">
	<view class="gwccp" wx:for="{{gwc}}"  wx:for-item="cp" wx:for-index="xuhao">

		<!--购物车-产品列表-单号栏-->
		<view class="danhao">
			<view class="danhao_zuo">时间：{{cp.shijian_gouwuche}}</view>
			<view class="danhao_you" data-gwcid="{{cp.gwc_id}}" bindtap="mydel">
				<image src="/img/del.png" class="danhao_you_img"></image>
			</view>
		</view>

		<!--产品 左中右-->
		<view class="xiangmu">
			<view class="xiangmu_zuo"><!--购物车-产品区块制作-左侧-选择项-->
				<checkbox class="xiangmu_zuo_check" value="{{cp.gwc_id}}"  name="xuanxiangs" checked="{{isChecked}}"></checkbox>
			</view>

			<view class="xiangmu_zhong"><!--购物车-产品区块制作-中间-图片-->
				<image src="{{cp.cp_tupian}}" mode="widthFix" class="xiangmu_zhong_img"></image>
			</view>

			<view class="xiangmu_you"><!--购物车-产品区块制作-右侧-产品信息-->
				<view class="you_biaoti">{{cp.cp_mingcheng}}</view>
				<view class="you_shuxing">
				馆藏：{{cp.cp_kucu}} | 库存：{{cp.kucun_shengyu}} | 已借：{{cp.cp_yixiaoshou}}
				</view>
				<view class="you_jiage">
					<view class="you_jiage_zou">¥ {{cp.jiage}}</view>
					<view class="you_jiage_you">
						<image src="/img/jian1.png" mode="widthFix" class="you_jian" 
							data-gwcid="{{cp.gwc_id}}" data-shuliang="{{cp.cp_shuliang}}" data-jiage="{{cp.jiage}}" bindtap="myremove"></image>
						<input type="text" value="{{cp.cp_shuliang}}" class="you_text" />
						<image src="/img/jia1.png" mode="widthFix" class="you_jia" data-kucun="{{cp.kucun_shengyu}}"
							data-gwcid="{{cp.gwc_id}}" data-shuliang="{{cp.cp_shuliang}}" data-jiage="{{cp.jiage}}" bindtap="myadd"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="huise10"></view>
	</view>
	<view class="huise10"></view>	
	<view class="huise10"></view>
	<view class="huise10"></view>
	<view class="huise10"></view>
	</checkbox-group>
	
	<view class="jiesuan">
		<view class="jiesuan_zuo">
			<checkbox-group bindchange="quanxuan">
				<checkbox class="jiesuan_zuo_check" checked="{{allChecked}}">全选</checkbox>
			</checkbox-group>
		</view>
		<view class="jiesuan_zhong">
			合计：¥ {{zongfeiyong}}
		</view>
		<button class="jiesuan_you" form-type="submit" size="mini" >
			去借阅
		</button>
	</view>
	
	</form>

wxss代码

.gwccp{}
.jiesuan{position: fixed; bottom: 0px; background-color: #EBEAEF; height: 35px;
display: flex; width: 100%; border-top: 1px solid #C8C7CC; justify-content: center; align-items: center;}
.jiesuan_zuo{width: 20%; padding: 3px;}
.jiesuan_zuo_check{}
.jiesuan_zhong{width: 60%;background-color: #FFFFFF; text-align: center;height: 35px;line-height: 35px;}
.jiesuan_you{width: 20%; display: flex;height: 35px; background-color: #DD524D; color: #FFFFFF;
justify-content: center; align-items: center; border-radius: 0;}

.huise10{height: 10px;background-color: #EBEAEF;}
/* 产品-右侧产品信息-价格*/
.you_biaoti{color: #333333; font-size: 14px;}
.you_shuxing{font-size: 12px; color: #C0C0C0;padding-bottom: 5px;}
.you_jiage{font-size: 13px; color: #DD524D; display: flex; align-items: center;}
.you_jiage_zou{flex-grow: 1;}
.you_jiage_you{display: flex; border: 1px solid #C8C7CC; align-items: center;}
.you_jian{width: 20px;}
.you_text{ width: 30px; text-align: center;border-left: 1px solid #C0C0C0;
border-right:  1px solid #C0C0C0;}
.you_jia{width: 20px;}

/*产品 左中右*/
.xiangmu{display: flex;padding: 5px; align-items: center;}
.xiangmu_zuo{width: 8%;}
.xiangmu_zuo_check{}
.xiangmu_zhong{width: 27%;}
.xiangmu_zhong_img{width:100%}
.xiangmu_you{width: 65%; padding: 5px;}

/* 购物车-产品列表-单号栏*/
.danhao{display: flex;padding: 5px; border-bottom: 1px solid #C8C7CC;}
.danhao_zuo{flex-grow: 1;}
.danhao_you{}
.danhao_you_img{width: 19px;height: 19px;}