老规矩,先看效果图!
一、html架构
<template>
<div id="app">
<div class="top">
<van-nav-bar title="购物袋" left-text="返回" right-text="编辑" left-arrow @click-left="show = !show"
@click-right="show = !show" />
<van-image width="375" height="80" src="../../public/icon/shopbag_bg.png" />
</div>
<div class="content">
<div v-for="(item, index) in list" :key="index">
<van-swipe-cell style="margin-top: 10px">
<div class="detail">
<van-checkbox style="margin-left: 10px" v-model="checked[index]" />
<div class="box">
<van-image style="margin-left: 10px" width="66" height="66" :src="item.img" />
<div class="right">
<div class="right-top">
<h5>{{ item.name }}</h5>
<h5>{{ item.tem }}</h5>
</div>
<div class="right-midd">
<h5>{{ item.des }}</h5>
</div>
<div class="right-bottom">
<div style="margin-left: 10px; color: red">¥{{ item.signal * item.num }}</div>
<van-stepper style="position: fixed; right: 5%" v-model="item.num" theme="round" button-size="22"
disable-input @change="modifyItemQuantity(index, item.num)" />
</div>
</div>
</div>
</div>
<template #right>
<van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item)" />
</template>
</van-swipe-cell>
</div>
</div>
<van-submit-bar v-if="!show" :price="total" button-text="提交订单" @click="submit">
<van-checkbox v-model="allChecked">全选</van-checkbox>
</van-submit-bar>
<van-submit-bar v-if="show" button-text="删除选择" @click="deleteSelectedItems">
<van-checkbox style="position: fixed; left: 10px" v-model="allChecked">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
二、css样式
<style lang="less" scoped>
#app {
width: 100%;
position: fixed;
height: 92%;
display: flex;
flex-direction: column;
align-items: center;
.content {
border: 2px solid rgb(218, 218, 218);
width: 98%;
height: 74%;
position: fixed;
top: 18%;
flex-direction: column;
.detail {
margin: 0;
height: 88px;
border: 2px solid gray;
width: 375px;
display: flex;
align-items: center;
.box {
width: 320px;
height: 100%;
display: flex;
margin-left: 10px;
align-items: center;
.right {
width: 240px;
display: flex;
flex-direction: column;
height: 100%;
margin-left: 10px;
.right-top {
width: 100%;
display: flex;
align-items: center;
height: 24px;
margin-top: 2px;
}
.right-midd {
height: 22px;
}
h5 {
font-size: 10px;
margin-top: 10px;
margin: 10px;
}
.right-bottom {
display: flex;
align-items: center;
bottom: 5%;
width: 100%;
position: fixed;
}
}
}
}
}
.delete-button {
height: 100%;
}
.content .van-swipe-cell:last-child {
margin-bottom: 20px;
}
.van-submit-bar {
height: 100px;
border-top: 2px dotted gray;
}
.bottom {
border: 1px solid red;
position: fixed;
height: 100px;
width: 100%;
bottom: 0;
}
}
</style>
三、js逻辑
<script setup>
import { ref } from 'vue';
const checked = ref([]);
const allChecked = ref(false);
const list = ref([]);
const total = ref(0.00);
const show = ref(false);
</script>
补充一句:数据麻烦请自行动手添加,相信各位还是有能力搞定的!
本人能力有限,样式不好勿喷,客官有新奇的想法,可@me一下