uni-app实现微信小程序购物车功能

最新推荐文章于 2024-04-30 15:30:40 发布

原创

最新推荐文章于 2024-04-30 15:30:40 发布 · 3.4k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#前端

实现效果

页面布局这里就不一一介绍，自行看看代码

<template>
	<view>
		<view class="big">
			<view class="headCss" v-if="!flag">
				购物车空空如也，请先<span class="choise" @tap="gotoChoise">选购</span>
			</view>
			<view v-else>
				<view class="cartitem" v-for="(item,index) of myData" :key="index">
					<view class="top">
						<view class="twoleft">
							<checkbox-group @change="selected(item)">
								<checkbox color="orange" style="transform:scale(0.7);" :checked="item.flag" />
							</checkbox-group>
							<span>商品：{
  
  {item.name}}</span>
						</view>
						<view class="del">
							<uni-icons class="del" color="orange" type="trash" size="18" @tap="del(item,index)"></uni-icons>
						</view>
					</view>
					
					<view class="center">
						<view class="mainContain">
							<view>
								<image :src="'http://image.nssnail.com/'+item.goods.fileList[0].relativePath"></image>
							</view>
							<view class="main">
								<view class="descript">{
  
  {item.goods.description}}
									<view class="twoBtn">
										<view style="color: red;">￥{
  
  {item.myPrice}}</view>
										<view class="buybtn">
											<uni-icons color="orange" type="minus" size="15" @tap="reduce(item)"></uni-icons>
											<span class="myqtys">{
  
  {item.qty}}</span>
											<uni-icons color="orange" type="plus" size="15" @tap="add(item)"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 底部导航 -->
				<view class="three">
					<view class="choose">
						<checkbox-group @change="selectedall()">
							<checkbox :checked="allchecked" color="orange" style="transform:scale(0.7);" />全选
						</checkbox-group>
					</view>
					<view class="two">
						<view class="total">
							合计：{
  
  {totalPrice}}
						</view>
						<button @tap="submit" :disabled="disabled" class="allNumber">
							结算:（ {
  
  {totalNum}} )
						</button&