uniapp购物车界面模板

项目演示

参考链接

https://blog.csdn.net/pumpkin_truck/article/details/120140769

总体代码

<template><!-- https://blog.csdn.net/pumpkin_truck/article/details/120140769 --><view><view class="empty" v-if="show"><imagesrc="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"><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" /><text></text></label></checkbox-group><image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></image></view><view class="size"><text style="font-size: 25rpx;">尺码：{{item.size}}</text><view class="num"><text class="subtract" @click="reduce(item)">-</text><text class="num">{{item.num}}</text><text @click="add(item)" class="add">+</text></view><text class="goods-price">￥{{item.price}}/件</text></view></view>  <view class="detail-right"><image class="image" :src="item.deleteImage" @click="deleteImg(item)"></image><image class="image2" :src="item.collection" @click="collectionImg(item)"></image></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><script>export default {data() {return {show: false,allchecked: true,checked: true,goods: [{size: "女款-M",num: 1,flag: true,price: 149,goodsImage: "https://img0.baidu.com/it/u=4158246207,3235707994&fm=26&fmt=auto&gp=0.jpg",deleteImage: require('../../static/icon/delete.png'),collection: require('../../static/icon/collection.png'),},{size: "女款-xs",num: 1,flag: true,price: 219,goodsImage: "https://img0.baidu.com/it/u=4158246207,3235707994&fm=26&fmt=auto&gp=0.jpg",deleteImage:require('../../static/icon/delete.png'),collection: require('../../static/icon/collection.png'),},{size: "女款-L",num: 1,flag: true,price: 240,goodsImage: "https://img1.baidu.com/it/u=233755383,2522308225&fm=26&fmt=auto&gp=0.jpg",deleteImage:require('../../static/icon/delete.png'),collection: require('../../static/icon/collection.png'),},{size: "女款-XXL",num: 1,flag: true,price: 410,goodsImage: "https://img0.baidu.com/it/u=3894000947,2570065196&fm=26&fmt=auto&gp=0.jpg",deleteImage:require('../../static/icon/delete.png'),collection: require('../../static/icon/collection.png'),},{size: "女款-XXL",num: 1,flag: true,price: 500,goodsImage: "https://img2.baidu.com/it/u=1001625387,3275765924&fm=26&fmt=auto&gp=0.jpg",deleteImage: require('../../static/icon/delete.png'),collection: require('../../static/icon/collection.png'),},],}},methods: {goshopping() {uni.navigateTo({url: '../contact/contact'})},change(e) {console.log(e)},selected(item) {item.flag = !item.flagif (!item.flag) {this.allchecked = false} else {const a = this.goods.forEach((item) => {return item.flag === true})if (a) {this.allchecked = true} else {this.allchecked = false}}},selectgoods() {this.allchecked = !this.allcheckedif (this.allchecked) {this.goods.map(item => {this.checked = trueitem.flag = true})} else {this.checked = falsethis.goods.map(item => {item.flag = false})}},reduce(item) {let num = item.numif (num > 1) {num -= 1} else if (num = 1) {uni.showToast({title: "该宝贝不能减少了哟~"})}item.num = num},add(item) {let num = item.numitem.num = num + 1},// 更改图片样式deleteImg(item){item.deleteImage = require('../../static/icon/delete2.png')},// 更改图片样式collectionImg(item){item.collection = require('../../static/icon/collection2.png')},},computed: {totalNum() {let totalNum = 0;this.goods.map(item => {item.flag ? totalNum += item.num : totalNum += 0})return totalNum},totalPrice() {let totalPrice = 0;this.goods.map(item => {item.flag ? totalPrice += item.num * item.price : totalPrice += 0})return totalPrice}}}
</script><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;align-items: center;}}.size {display: flex;justify-content: space-around;flex-direction: column;margin-left: 30rpx;.num {margin-top: -30rpx;text {width: 50rpx;line-height: 50rpx;text-align: center;display: inline-block;background-color: #F7F7F7;margin-top: 40rpx;margin-right: 10rpx;}.add {color: #FA4305;border-radius: 10rpx 30rpx 30rpx 10rpx;margin-right: 20rpx;}.subtract {border-radius: 30rpx 10rpx 10rpx 30rpx;}}.goods-price {margin-top: 10rpx;font-size: 25rpx;color: #F44545;}}.detail-right {display: flex;justify-content: space-around;flex-direction: column;margin-right: 10rpx;.image {margin-top: 10rpx;width: 50rpx;height: 50rpx;}.image2 {margin-top: 20rpx;width: 50rpx;height: 50rpx;}}}}.empty {position: relative;top: 220rpx;text-align: center;display: flex;align-items: center;flex-direction: column;&-text {color: #808080;margin-bottom: 50rpx;}&-button {width: 300rpx;height: 90rpx;color: orange;border: 1rpx solid orange;text-align: center;line-height: 90rpx;border-radius: 48rpx;}}.end {width: 100%;height: 90rpx;background-color: #fff;position: fixed;bottom: 100rpx;left: 0;display: flex;align-items: center;&-left {width: 70%;display: flex;justify-content: space-between;padding: 0 30rpx;.end-flex {display: flex;align-items: center;}}&-right {width: 30%;line-height: 90rpx;background-color: #F44545;text-align: center;color: #fff;}}
</style>

最后

仅供参考

uniapp购物车界面模板相关推荐

HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
多用途bootstrap后台管理系统模板企业统计管理界面模板
介绍: 基于bootstrap构建,响应式的电子商务后台管理系统ui页面模板. 适用于:电商销售统计.企业统计管理界面模板. 网盘下载地址: http://kekewl.net/yYrcYaCFVAU ...
UI实用素材|登录和个人资料界面模板
在注册的时候通常只遇到一次登录界面,或者至少在相当少的情况下,如果你的应用出于安全考虑涉及到重新登录.同样的,正如我们在之前的一篇文章中所讨论的那样,填写表单并不是一个大多数用户通常认为非常吸引人的活 ...
巧妙布局的APP界面模板，让你的作品更有吸引力
APP界面布局设计是APP设计中非常重要的一环,合理的运用APP界面布局会让APP的界面显得很清晰美观. 巧妙布局的APP界面模板,让你的作品更有吸引力常见的APP界面布局有哪些呢? 1 ①顶部导航 ...
IPAD移动端交互原型通用设计方案、ipad元件库、移动元件库、元件列表、设计元件、交互示例、界面模板、设备模板、手势图标、社交界面、音乐、电商、视图控制器、指示器、指纹解锁、手势解锁、rp元件库
IPAD移动端交互原型通用设计方案.ipad元件库.移动元件库.元件列表.设计元件.交互示例.界面模板.设备模板.手势图标.社交界面.音乐.电商.视图控制器.指示器.指纹解锁.手势解锁.rp元件库.平 ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板 id=594740223989&
Vue.js搭建移动端购物车界面－基本结构和数据渲染
本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3. 实时更新所选择物品的总 ...

uniapp购物车界面模板

项目演示

参考链接

总体代码

最后

uniapp购物车界面模板相关推荐

最新文章

热门文章