html单选计算总价,[每天进步一点点~] 购物车页面基本实现，单选、多选、全选商品，计算所勾选商品价格（保留小数点后2位）...

购物车页面

image.png

用uni-app来写的

代码实现

html部分代码

{{item.title}}

￥ {{item.price}}

-

{{item.count}}

+

商品数量：{{totalNum}}

合计：￥ {{totalPrice}}

去结算

js部分代码

export default {

data() {

return {

is_select: false,

is_selectAll: false,

list: [

{

title: '标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',

image: '/static/logo.png',

price: '9.99',

count: 1,

flag: false,

}, {

title: '标题2标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',

image: '/static/logo.png',

price: '19.99',

count: 1,

flag: false,

}, {

title: '标题3标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',

image: '/static/logo.png',

price: '29.99',

count: 1,

flag: false,

}, {

title: '标题4标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',

image: '/static/logo.png',

price: '39.99',

count: 1,

flag: false,

}, {

title: '标题5标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',

image: '/static/logo.png',

price: '49.99',

count: 1,

flag: false,

}

],

}

},

computed: {

// 计算选中商品数量

totalNum() {

let totalNum = 0;

this.list.map(item => {

item.flag ? totalNum += item.count : totalNum += 0

})

return totalNum

},

//计算选中商品的总价

totalPrice() {

let totalPrice = 0;

this.list.map(item => {

item.flag ? totalPrice += item.count * item.price : totalPrice += 0

})

return totalPrice

// return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位

}

},

methods: {

// 减号

sub(item) {

console.log('sub', item);

if (item.count > 1) {

item.count--;

} else {

item.count = 1

uni.showToast({

title: '不能再少了',

icon: 'none'

})

}

},

// 加号

add(item) {

console.log('add', item);

item.count++;

},

// 单选

select(item) {

item.flag = !item.flag

if (!item.flag) {

// 设置为全不选

this.is_selectAll = false

} else {

const test = this.list.every(item => {

return item.flag === true

})

if (test) {

this.is_selectAll = true

} else {

this.is_selectAll = false

}

}

},

// 全选

seletAll() {

// 方法一

/*if (this.isSelectAll) { // 如果全部选中

// 设置为全不选

this.is_selectAll = false

this.list.forEach(item => item.flag = false)

} else { // 如果全部不选中或某些不选中

// 设置为全选

this.is_selectAll = true

this.list.forEach(item => item.flag = true)

}*/

// 方法二

this.is_selectAll = !this.is_selectAll

if (this.is_selectAll) {

this.list.map(item => {

item.flag = true

})

} else {

this.list.map(item => {

item.flag = false

})

}

},

}

}

css 部分代码

page {

background-color: #e5e5e5;

}

.list {

display: flex;

flex-direction: column;

.cart {

display: flex;

// align-items: center;

margin: 15px;

background-color: #fff;

border-radius: 3px;

box-shadow: 1px 1px 4px 1px #ccc;

.seletc {

width: 40px;

height: 20px;

margin: 40px 5px;

image {

width: 100%;

height: 100%;

}

}

.left {

width: 150px;

height: 80px;

margin: 5px;

image {

width: 100%;

height: 100%;

border-radius: 3px;

}

}

.right {

.top {

display: flex;

flex-direction: column;

font-size: 14px;

margin: 5px 10px;

.title {

-webkit-line-clamp: 2;

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

}

.price {

margin: 5px 0;

}

}

.bottom {

display: flex;

width: 100px;

height: 30px;

border: 1px solid #ccc;

border-radius: 3px;

margin: 5px 10px;

.sub {

display: flex;

align-items: center;

justify-content: center;

width: 30px;

border-right: 1px solid #ccc;

}

.num {

display: flex;

justify-content: center;

align-items: center;

width: 40px;

border-right: 1px solid #ccc;

font-size: 14px;

}

.add {

display: flex;

justify-content: center;

align-items: center;

width: 30px;

}

}

}

}

.cart:last-child {

margin-bottom: 50px;

}

}

.menu {

display: flex;

justify-content: space-between;

align-items: center;

position: fixed;

bottom: 50px;

left: 0;

width: 100%;

height: 40px;

background-color: #F0AD4E;

.seletc {

width: 20px;

height: 20px;

margin-left: 20px;

image {

width: 100%;

height: 100%;

}

}

.right {

display: flex;

align-items: center;

font-size: 14px;

.num {

margin-right: 10px;

}

.btn {

display: flex;

align-items: center;

justify-content: center;

width: 80px;

height: 30px;

border-radius: 3px;

background-color: #fff;

margin: 0 10px;

}

}

}