cart购物车简单版

<template>
	<view>
		<view class="username">
			登录：<input type="text" v-model="uName"/>
		</view>
		<view class="password">
			密码：<input type="password" v-model="pWd"/>
		</view>
		<button size="default" type="primary" 
			style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" 
			hover-class="is-hover" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uName:'',
				pWd:''
			}
		},
		methods: {
			login(){
				if(!this.uName){
					uni.showToast({
						title:'用户名不能为空',
						icon:'error'
					})
					return
				}
				if(!this.pWd){
					uni.showToast({
						title:'密码不能为空',
						icon:'error'
					})
					return
				}
				if(this.uName=='aaa' && this.pWd=='aaa'){
					// var that=this
					uni.switchTab({//跳转到tabbar页面
						url:'/pages/index/index'
					})
					setTimeout(()=>{//延迟计时器
						// uni.$emit('loginOK',{uName:that.uName})
						uni.$emit('loginOK',{uName:this.uName})
					},30)
				}
			}
		}
	}
</script>

<style>

</style>

<template>
	<view class="content">
		<!-- list里的三个index -->
		<view class="cart" v-for="(item,index) in list" :key="index" @longpress="del(index)"><!-- 长按触发事件 -->
		
			<u-checkbox-group><!-- 选中框 -->
				<u-checkbox v-model="item.checked"></u-checkbox><!-- item.checked -->
			</u-checkbox-group>
			
			<image :src="item.url" mode="aspectFit"></image><!-- 图片   item.url-->
			
			<view class="detail"><!-- 三个“详情” -->
				<view class="">{{item.name}}</view><!-- item.name -->
				<view class="">单价：￥{{item.price}}</view><!-- item.price -->
				<view class="">小计：￥{{item.price*item.number}}</view>
			</view>
			
			<u-number-box v-model="item.number" :min="1"></u-number-box><!-- 带加减按钮的数字输入框 item.number-->
		</view>
		
		总价：￥{{total.toFixed(2)}}<!-- 小数点后保持两位 注意这个total-->
		<button type="primary" @click="js">结算</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[//list中的5个对象
					{name:'小白鞋',url:'/static/shoe.jpg',price:120,number:1,checked:true},
					{name:'收纳盒',url:'/static/shounahe.jpg',price:80,number:2,checked:false},
					{name:'糖果',url:'/static/sol.jpg',price:10,number:5,checked:false}
				]
			}
		},
		computed:{//计算
			total(){
				var sum=0
				for(var i in this.list){
					var item=this.list[i]
					if(item.checked){
						sum+=item.price*item.number
					}
				}
				return sum
			}
		},
		methods: {//方法
			js(){
				uni.showToast({
					title:'结算成功'
				})
			},
			del(id){
				var that=this
				uni.showModal({
					title: '提示',
					content: '确认删除'+this.list[id].name+'吗？',
					success: function (res) {
						if (res.confirm) {
							that.list.splice(id,1)
						} else if (res.cancel) {
							return
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cart{
		display: flex;
		margin: 10px;
		border-bottom: 1px solid #ccc;
	}
	.cart image{
		width: 200px;
		height: 200px;
		margin: 10px;
	}
	.detail{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.detail view:nth-child(2){
		display: flex;
		flex: 1;
		align-items: center;
	}
	.detail view:nth-child(3){
		color: orange;
	}
</style>