uniapp 购物车功能

最新推荐文章于 2024-06-28 11:52:57 发布

DumBnessA

最新推荐文章于 2024-06-28 11:52:57 发布

阅读量2.3k

点赞数 2

分类专栏： js基础文章标签： javascript html5 css

本文链接：https://blog.csdn.net/DumBnessA/article/details/121610834

版权

本文详细介绍了如何使用uniapp框架，结合JavaScript、HTML5和CSS技术实现一个完整的购物车功能。内容涵盖购物车的页面结构设计、JavaScript逻辑处理以及CSS样式美化等关键步骤。

摘要由CSDN通过智能技术生成

结构

<view class="box">
		<!-- 自定义导航栏 -->
		<view class="border">
			<view class="border_left" @click="onleft()">
				管理
			</view>
			<view class="border_center">
				购物车
			</view>
			<view class="border_right">

			</view>
		</view>
		<view class="border-lis"></view>

		<!-- 购物车内容显示 -->
		<view class="box_content">
			<view class="box_content_one" v-for="item in list" :key='item.id'>
				<view class="box_content_oput">
					<view class="box_content_oput_input" >
						<!-- <label >
							<checkbox :value="item.id" @change="checkboxChange($event,item.id)" :checked="item.isChecked" />
						</label> -->
						<checkbox-group @change="checkboxChange($event,item.id)">
							<checkbox :value="item.id" :checked="item.isChecked" />
						</checkbox-group>
					</view>
					<view class="box_content_oput_imges">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="box_content_number">
					<view class="box_content_title">
						{
   {
   item.name}}
					</view>
					<view class="box_content_effect">
						{
   {
   item.size}}
					</view>
					<view class="box_content_and">
						<view class="box_content_number_discount">
							￥{
   {
   item.price}}.00
						</view>
						<view class="box_content_number_original">
							{
   {
   item.prcs}}.00
						</view>
					</view>
				</view>
				<view class="calculator">
					<text class="left_i" @tap="editNum(item.id,-1)">-</text>
					<text class="center_con">{
   {
   item.count}}</text>
					<!-- <input class="center_con" type="text" value="1" /> -->
					<text class="right_i" @tap="editNum(item.id,1)">+</text>
				</view>
			</view>
		</view>
		
		<view v-if="boton_markes.length != ''" style="text-align: center; margin: auto; font-size: 14px; color: #F0F0F0;margin-bottom: 50rpx;">
			--------------------热卖推荐--------------------
		</view>

		<view class="box_botton" v-if="boton_markes.length != ''">
			<view class="box_bottcontent">
				<!-- goods_id -->
				<view class="box_bottent" v-for="(hell,indet) in boton_markes" :key="indet">
					<