uniapp 购物车单店铺

奥子

已于 2022-07-08 11:17:11 修改

阅读量417

点赞数

分类专栏： uniapp 文章标签：前端 javascript 开发语言

于 2022-07-08 11:11:34 首次发布

本文链接：https://blog.csdn.net/weixin_45157073/article/details/125674373

版权

这篇博客分享了如何使用uniApp开发单店铺购物车的功能。提供了模板代码、CSS样式和JavaScript脚本，强调了图片路径需要根据选中状态自定义，并给出了商品数据结构示例，帮助开发者进行视图参数的调整。

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

代码复制直接用
图片路径要自己添加图片路径是根据选中状态拼接显示 select_show是选中的图片改成自己的选中图片
template 代码

<template>
	<view class="body">
		<scroll-view scroll-y="true" style="height: 100%;">
			<view class="text-bianji" @click="eidtClick" v-if="carList.length">{
  {!edit ? '编辑' : '删除'}}</view>
			<view class="car-list" v-for="(item,index) in carList" :key='index'>
				<view class="left" @click="SelectChecked(index)">
					<image class="check" :src="('../../static/img/func/'+(item.checked ? 'select_show' : 'select')+'.png')" mode="" ></image>
					<view class="cont">
						<image :src="item.goods.img" mode="aspectFill"></image>
						<view class="continfo">
							<view class="title">{
  {item.goods.title}}</view>
							<view class="">
                <text class="price">￥{
  {item.goods.price}}</text>
                <text class="c999 fs0d85">+{
  {item.goods.integral}}积分</text>
              </view>
						</view>
					</view>
				</view>
				<!-- 加减 -->
				<view class="right" v-if="!edit">
					<image src="../../static/img/users/clear.png" mode="" @click="CarNum('-',index)"></image>
					<view class="">{
  {item.num}}</view>
					<image src="../../static/img/users/add.png" mode="" @click="CarNum('+',index)"></image>
				</view>
			</view>
			
			<view class="text-none" v-if="!carList.length">购物车是空的</view>
			
			<!--  -->
			<view class="car-bottom">
				<view class="df aife">
					<image class="check" :src="('../../static/img/func/'+(checked ? 'select_show' : 'select')+'.png')" mode="" @click="autoChecked()"></image>
					全选
					<text class="price" v-if="!edit">￥{
  {(autoPrice || 0).toFixed(2)}}</text>
          <text class="c999 fs0d85">+{
  {(Autointegral || 0).toFixed(2)}}积分</text>
				</view>
				<view class=