uniapp实现购物车功能
周六我看见一个有个公司招聘需要试岗3天,并使用uniapp完成购物车,直播间,地图,首页四个功能方能通过,于是乎,我趁手上没事就打算自己写一遍,虽然我的项目没用到,但是多掌握点总没错。今天就来第一个——购物车
因为没写接口,上面的数据我都是使用的模拟数据搭建而成,主要实现的是它件数的增加减少与支付总价格的逻辑关系,还有左边的全选和全不选。
首先第一步,我们把页面先搭建出来
<template>
<view>
//购物车没商品出现的页面
<view class="empty" v-if="show==false">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
<view class="empty-text">空空如也的购物</view>
<view class="empty-button" @click="goshopping">去选购</view>
</view>
//购物车加购商品的东西
<view v-if="show==true">
//通过循环商品呈现出每个商品
<view class="goods-detail" v-for="(item,index) in goods" :key="index">
<view class="detail-left">
<view class="goods-left">
//商品的选择框
<checkbox-group @change="selected(item)">
<label>
<checkbox class="selected" color="#555555" :checked="checked"/>
</label>
</checkbox-group>
<image :src="item.goodsImage" mode="widthFix" style="width: 150rpx;"></image>
</view>
<view class="size">
<text style="font-size: 25rpx;">尺码:{
{
item.size}}</text>
<text class="goods-price">¥{
{
item.price}}/件</text>
</view>
</view>
<view class="detail-right">
<text class="subtract" @click="reduce(item)">-</text>
<text class="num">{
{
item.num}}</text>
<text @click="add(item)" class="add">+</text>
</view>
</view>
</view>
//全选总计
<view class="end">
<view class="end-left">
<checkbox-group @change="selectgoods()">
<label>
<checkbox :checked="allchecked" />全选
</label>
</checkbox-group>
<view>
总计:<text style="color: #f00;font-weight: bold;">¥ {
{
totalPrice}}</text>
</view>
</view>
<view class="end-right">
结算({
{
totalNum}})
</view>
</view>
</view>
</template>
这是我们页面的结构
其中最开始有一个v-if,大家都知道这是用于条件判断的
<view class="empty" v-if="show==false">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
<view class="empty-text">空空如也的购物</view>
<view class="empty-button" @click="goshopping">去选购</view>
</view>
这一块就是当我们的购物车是空的时候,页面应该呈现的样子。我也给大家截图出来了
最开始的那个标题栏是因为我觉得没商品的时候黄色和它更搭,有商品的时候红色更美。毕竟我们做前端的,样式还是很重要的。哈哈哈。
结构搭好了,接下来是样式的完成。
<style lang="scss">
.goods{
line-height: 80rpx;
background-color: #FFFFFF;
&-detail{
display: flex;
padding: 30rpx 15rpx 30rpx 30rpx;
background-color: #fff;
justify-content: space-between;
border-bottom: 5rpx solid #F1F1F1;
align-items: center;
.detail-left{
display: flex;
.goods-left{
display: flex