uniapp小知识点购物车的案例

<template>
	<!-- 物资首页 -->
	<view class="material">
		<view class="material-search">
			<uni-search-bar class="searchInput" bgColor="#F9FAFB" radius="34"
			 @confirm="getServeData" cancelButton="none" v-model="searchParams.productName"
				placeholder="搜索你想要的物资"></uni-search-bar>
		</view>
		<view class="material-content">
			<view class="navlist">
				<view class="navlist-item" v-for="(item,index) in iten" :key="index" @click="navClick(item)"
					:class="{'activeNav': item.dictLabel == curText}">
					<view class="btn">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
			<view class="content">
				<view class="content-top">
					<text>{{curText}}</text>
					<button type="default" size="mini" @click="open">领用记录</button>
				</view>

				<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				 @scrolltolower="lower"
					@scroll="scroll">
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index">
							<image :src="item.productImg"></image>
							<view>
								<view class="title" :v-cloak="c">{{item.productName}}</view>
								<view class="desc">可申领数：{{item.earlyWarning}}</view>
								<view class="numBox">
									<text>￥{{item.earlyWarning}}</text>
									<view>
										<!-- max最大值  min最小值 最大值跟可领数对应-->
										<step-num v-model="item.num" @change="changeStep" :max="10"></step-num>
									</view>
								</view>
							</view>
						</view>
					</view>
				<!-- 	<uni-load-more :status="more"></uni-load-more> -->
				</scroll-view>
				<!-- <scroll-view style="height: 300rpx;" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#fff"
					@refresherpulling="onPulling" @refresherrefresh="onRefresh" 
					@refresherabort="onAbort">
					</scroll-view> -->
			</view>
          购物车
			<view class="material-footer">
				<view class="material-footier-left" >
					<view>￥{{sumMoney}}</view>
					<text>领用明细</text>
				</view>
				<view class="material-footer-right"  v-model="num">
					选好了,去提交({{sumNum}})
				</view>
			</view>
		</view>
		<!-- <approve-alter></approve-alter> -->
		<!-- <view class="material-tck">
			<view class="yixun">
				已选物品
			</view>
			<view class="wupin">
				<text class="t1">太阳伞防紫外线雨伞便携晴雨伞</text>
				<text class="t2">￥15.00</text>
				<text class="t2">组件</text>
			</view> 
		 	<view class="jiesuan">
					结算
			</view> 
		</view> -->
	</view>

</template>
import ApproveAlter from './components/approveAlter.vue';
	import stepNum from '../../components/StepNum/uni-number-box.vue';
	export default {
		components: {
			ApproveAlter,
			stepNum
		},
		// components: {stepNum

		// },
		data(){
			return {
				num:0,
				ti:0,
				searchParams: {
					"productType": 1,
					"productCategory": 1,
					"productName":''
				},
				list: [],
				iten:[],
				curIndex: 0,
				triggered: false,
				sumMoney: 0,
				sumNum: 0,
				curText: '办公用品',
				// navList: [{
				// 	name: '生活用品',
					
				// }, {
				// 	name: '会议用品'
				// }, {
				// 	name: '电脑办公'
				// }, {
				// 	name: '运动户外'
				// }, {
				// 	name: '数码'
				// }, {
				// 	name: '其他'
				// }],
				// nag: [{
				// 		name: '三国蜀汉创始人超级奶爸刘皇叔刘备',
				// 		money: '150',
				// 		num: 50
				// 	}, {
				// 		name: '三国孙吴创始人控制王牌孙三岁孙权',
				// 		money: '152',
				// 		num: 50
				// 	},
				// 	{
				// 		name: '三国曹魏创始人的BB人妻曹曹操',
				// 		money: '250',
				// 		num: 50
				// 	}
				// ]

			}	
		},
		onLoad: function (options) {
			    this.getServeData()
		        setTimeout(function () {
		            console.log('start pulldown');
		        }, 200);
		        uni.startPullDownRefresh();
		    },
		
		methods:{
			open() {
				// this.$refs.popup.open('bottom')
				debugger
				 // uni.navigateTo({url: 'pages/seart/index'});
				 
				 	uni.reLaunch({
				 		url: '/pages/seart/index'
				 	});
			},
			// 导航点击时触发
			navClick(item) {
				this.searchParams.productType = item.dictValue;
				this.getServeData();
				this.curText = item.dictLabel;
			},
			changeStep() {
				this.$nextTick(() => {
					let sumMoney = 0;
					this.sumNum = 0;
					this.list.forEach(item => {
						sumMoney += (item.num * item.earlyWarning)
						this.sumNum += item.num;
					})
					this.sumMoney = sumMoney;
				})
				
			},
			bindChange(value) {
				console.log(value)
			},
			getServeData(){
				var th = this;
				this.$API.matProductInfo(this.searchParams).then(res => {
					th.list = res.rows || [];
					this.list && this.list.forEach(item => {
						item.num = 0;
					})
					uni.stopPullDownRefresh();
				})
			var ths= this;
             this.$API.queryMatApplyInfotext({ 
			 }).then(item=>{
				 console.log(item)
				 ths.iten=item.data||[];
				 
				 
			 })
			}		
		 }
	   }
</script>
<style lang="less" scoped>
	.material {
		background: #F8F9FA;
		height: 100%;
		overflow: auto;
		&-search {
			padding: 10rpx 28rpx;
			background-color: #fff;

			.searchInput {
				height: 68rpx;
				background: #F3F5F8;
				border-radius: 34rpx;
				border: none;
				border-width: 0;
			}

			/deep/ .uni-searchbar {
				padding: 0;
			}

			/deep/ .uni-searchbar__box {
				justify-content: start;
				border: none;
				font-size: 26rpx;
				padding: 0;
			}

			/deep/ .uni-searchbar__box {
				height: 68rpx;
				background: #F3F5F8;
				border-radius: 34rpx;
				border: none;
				border-width: 0;

			}
		}

		&-content {
			height: calc(100% - 88rpx);
			margin-top: 19rpx;
			display: flex;

			.navlist {
				height: 100%;
				width: 127rpx;

				.navlist-item {
					padding: 0 29rpx;

					.btn {
						min-height: 72rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.15);
						padding: 26rpx 0;
						display: flex;
						align-items: center;
					}
				}

				.activeNav {
					background: linear-gradient(140deg, #02B9FA 0%, #508DFF 100%);
					border-radius: 0px 16rpx 16rpx 0px;

					.btn {
						color: #fff;
						font-weight: 600;
						border: none;
					}
				}
			}

			.content {
				flex: 1;
				padding: 0 24rpx;

				&-top {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					&>text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.45);
					}

					&>button {
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 6rpx;
						border: 1rpx solid #D9DDE5;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
						margin: 0;
					}

					button::after {
						border: none;
					}
				}

				.list {
					margin-top: 17rpx;
					width: 100%;
					padding-bottom: 140rpx;

					.item {
						width: 100%;
						height: 222rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						display: flex;
						padding: 18rpx 28rpx;
						box-sizing: border-box;
						margin-bottom: 16rpx;

						image {
							width: 132rpx;
							height: 132rpx;
							margin-right: 20rpx;
						}

						&>view {
							flex: 1;

							.title {
								font-size: 30rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.85);
								max-width: 380rpx;
								word-wrap: break-word;
								word-break: break-all;
								white-space: pre-line;
								margin-bottom: 12rpx;
							}

							.desc {
								width: 197rpx;
								height: 46rpx;
								line-height: 46rpx;
								background: rgba(0, 0, 0, 0.03);
								border-radius: 23rpx;
								text-align: center;
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.45);
								margin-bottom: 12rpx;
							}

							.numBox {
								width: 366rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								&>text {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #EF405D;
								}

								&>view {
									width: 151rpx;
									height: 45rpx;
								}
							}

							// /deep/ .uni-numbox,
							// /deep/ .uni-numbox__minus,
							// /deep/ .uni-numbox__plus,
							// /deep/ .uni-numbox__value,
							// 	{
							// 	height: 45rpx;
							// 	// border-radius: 29rpx;
							// 	border: 1rpx solid #D9DDE5;
							// }
						}
					}
				}
			}
		}

		&-footer {
			position: fixed;
			width: 90%;
			height: 115rpx;
			right: 0;
			bottom: 24rpx;
			left: 0;
			background: linear-gradient(140deg, #02B9FA 0%, #508DFF 100%);
			border-radius: 57rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 54rpx;
			color: #fff;
			box-sizing: border-box;

			&-left {
				display: flex;
				flex-direction: column;
				height: 100%;
				justify-content: center;

				&>view {
					font-size: 44rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
				}

				&>text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.85);
				}
			}

			&-right {
				height: 100%;
				line-height: 115rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
			}
		}
	}
</style>

$nestick是回调函数