copy and play
<template>
<view class="box">
<!-- 购物车内容显示 -->
<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">
<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: #000;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="(items,index1) in boton_markes" :key="index1">
<view class="box_boent_one">
<!-- <image src="../../static/image/3_2.jpg" mode=""></image> -->
<!-- ${
{
url}}/api/goods/goodsThumImages?goods_id=${
{
item.goods_id}}&width=400&height=400-->
<image :src="items.img_url" mode="widthFix">
</view>
<view class="box_boent_two">
{
{
items.goods_name}}888{
{
items.goods_name}}
</view>
<view class="box_boent_three">
<view class="box_boent_three_ins">
<text>￥</text>
{
{
items.shop_price}}
<text>00</text>
</view>
<view class="box_boent_three_let">
已售{
{
items.virtual_sales_sum}}件
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<view class="tabbar">
<view class="all">
<checkbox-group @change="checkboxChangeAll">
<checkbox :checked="isAllChecked" />全选
</checkbox-group>
</view>
<view class="totalPrice">
<text class="totalPrice_ff">合计:</text>
<text class="totalPrice_red">￥{
{
totalPrice}}.00</text>
</view>
<view class="submitOrder" @tap="submitOrder">
付款
</view>
</view>
<view style="width: 100%; height: 50rpx; background-color: #F0F0F0; margin-bottom: 50rpx;"></view>
</view>
</template>
<script>
export default {
data() {
return {
//购物车有无商品
show: true,
//全选是否选中
isAllChecked: false, //是否全选
totalPrice: 0, //总价
//商品
list: [{
id: '0',
name: '高街衣服',
price: 89.00,
prcs: 179.00,
count: 1,
size: 'xl',
img: '/static/logo.png'
},
{
id: '1',
name: 'lv',
price: 900.00,
prcs: 1200.00,
count: 1,
size: 'xl',
img: '/static/logo.png'
},
{
id: '2',
name: '高跟鞋',
price: 108.00,
prcs: 199.00,
count: 1,
size: '39',
img: '/static/logo.png'
}, {
id: '3',
name: '短袖',
price: 89.00,
prcs: 179.00,
count: 1,
size: 'L',
img: '/static/logo.png'
},
{
id: '4',
name: '裤子',
price: 89.00,
prcs: 179.00,
count: 1,
size: 'XLL',
img: '/static/logo.png'
}
],
boton_markes: []
}
},
methods: {
setCart() {
//计算总价
let totalPrice = 0
this.list.forEach(v => {
if (v.isChecked) {
totalPrice += v.count * v.price
}
})
this.totalPrice = totalPrice
},
editNum(id, type) {
//编辑数量
const index = this.list.findIndex(v => v.id == id)
if (this.list[index].count == 1 && type == -1) {
uni.showToast({
title: '至少购买一件商品',
icon: 'none'
})
} else {
this.list[index].count += type
}
this.setCart()
},
// 全选
checkboxChangeAll(e) {
this.isAllChecked = !this.isAllChecked
this.list.forEach(v => v.isChecked = this.isAllChecked)
this.setCart()
},
// 选择每一项
checkboxChange: function(e, id) {
console.log(e, id)
var temp = []
// 找到被修改的商品对象
let index = this.list.findIndex(v => v.id === id)
// 选中状态取反
this.list[index].isChecked = !this.list[index].isChecked
temp = this.list.every(v => v.isChecked)
if (temp) {
this.isAllChecked = true
} else {
this.isAllChecked = false
}
this.setCart()
},
submitOrder() {
// 提交购物车订单
// 判断是否选择购物车商品
var bol = this.list.every(el => el.isChecked == false)
if (bol) {
uni.showToast({
title: "这些你都不喜欢吗，你是不是只喜欢喝水，你倒是选一个啊商品啊",
icon: "none",
duration: 2000
})
} else {
uni.showToast({
title: "你肯定没有钱,还是算了吧",
icon: "none",
duration: 2000
})
}
}
},
}
</script>
<style lang="scss">
.box {
width: 100%;
background-color: #F0F0F0;
border-top: 1rpx transparent solid;
.border {
width: 100%;
height: 130rpx;
line-height: 160rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
top: 0;
.border_left {
padding: 14rpx 20rpx;
font-size: 28rpx;
color: #333333;
}
.border_center {
padding-right: 96rpx;
font-size: 36rpx;
font-weight: 600;
}
}
.border-lis {
width: 100%;
height: 130rpx;
}
.box_content {
.box_content_one {
width: 712rpx;
height: 244rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 30rpx auto;
display: flex;
box-sizing: border-box;
position: relative;
.box_content_oput {
display: flex;
.box_content_oput_input {
padding: 92rpx 10rpx;
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
border-radius: 50% !important;
/* color: #ffffff !important; */
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #333;
background-image: linear-gradient(to right, #39FDCE, #48E3FD);
}
/* .wx-checkbox-input.wx-checkbox-input-checked {
border: none !important;
} */
/* #endif */
}
.box_content_oput_imges {
width: 100%;
margin: 30rpx 0rpx auto;
image {
width: 180rpx;
height: 180rpx;
}
}
}
.box_content_number {
padding: 35rpx 20rpx;
.box_content_title {
width: 412rpx;
height: 52rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 28rpx;
//字体超出俩行 隐藏显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.box_content_effect {
width: 242rpx;
height: 24rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7E7E7E;
line-height: 24rpx;
background-color: #fff;
margin: 20rpx 0rpx;
}
.box_content_and {
display: flex;
padding: 10rpx 0rpx;
.box_content_number_discount {
font-size: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF4E3B;
}
.box_content_number_original {
color: #999999;
font-size: 22rpx;
padding: 15rpx 20rpx;
}
}
}
.calculator {
position: absolute;
display: flex;
top: 62%;
left: 78%;
.left_i {
width: 30rpx;
}
.center_con {
width: 40rpx;
background-color: #F6F6F6;
padding: 0rpx 20rpx;
text-align: center;
}
.right_i {
width: 30rpx;
}
}
}
}
.box_botton {
width: 100%;
margin-bottom: 50rpx;
font-family: PingFangSC-Regular, PingFang SC;
.box_bottcontent {
width: 95%;
margin: auto;
display: flex;
flex-flow: initial;
flex-wrap: wrap;
align-items: center;
.box_bottent {
// width: 330rpx;
width: 46%;
background: #ffffff;
border-radius: 12rpx;
margin: 15rpx 14rpx;
box-sizing: border-box;
.box_boent_one {
width: 330rpx;
height: 330rpx;
}
.box_boent_one image {
width: 100%;
height: 100%;
border-radius: 12rpx;
}
.box_boent_two {
width: 300rpx;
height: 58rpx;
padding: 20rpx 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0F0C10;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.box_boent_three {
display: flex;
flex-flow: initial;
justify-content: space-between;
padding: 20rpx 10rpx;
.box_boent_three_ins {
width: 130rpx;
height: 28rpx;
line-height: 28rpx;
font-size: 36rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #FF4E3B;
display: flex;
flex-direction: row;
text {
font-size: 20rpx;
padding-top: 8rpx;
}
}
.box_boent_three_let {
font-size: 20rpx;
color: #999999;
background: #FFFFFF;
}
}
}
}
}
// 底部导航
.tabbar {
width: 100%;
height: 112rpx;
background-color: #ffffff;
position: fixed;
bottom: -5rpx;
display: flex;
align-items: center;
justify-content: space-around;
// border-radius: 8% 8%;
.all {
font-size: 32rpx;
color: #3E3E3E;
letter-spacing: 2.29rpx;
display: flex;
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
border-radius: 50% !important;
/* color: #ffffff !important; */
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #333;
background-image: linear-gradient(to right, #39FDCE, #48E3FD);
}
/* .wx-checkbox-input.wx-checkbox-input-checked {
border: none !important;
} */
/* #endif */
}
.totalPrice {
letter-spacing: 2.29rpx;
padding-left: 200rpx;
.totalPrice_ff {
font-size: 24rpx;
color: #999999;
}
.totalPrice_red {
font-size: 32rpx;
color: #FF4E3B;
}
}
.submitOrder {
width: 208rpx;
height: 80rpx;
background-image: linear-gradient(to right, #38FFCB, #49E1FF);
border-radius: 60rpx;
font-size: 36rpx;
color: #FFFFFF;
letter-spacing: 2.57rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>