<template>
<div id="maint">
<van-nav-bar title="我的购物车" @click-left="router.back()" @click-right="reload()" left-arrow style="background-color: #1E90FF; --van-nav-bar-icon-color:white; --van-nav-bar-arrow-size:30px; --van-nav-bar-title-text-color:white">
<template #right>
<van-icon name="replay" color="white" size="30" />
</template>
</van-nav-bar>
<!-- <div class="top content">
<div class="left" @click="router.back()"><img src="../assets/img/back.png" width="30" height="30" alt=""></div>
<div class="mid">我的购物车</div>
<button @click="location.reload()">刷新</button>
</div> -->
<div class="m">
<!--一个商品-->
<div class="product" v-for="
item,index in products" :key="index">
<div>
<input type="checkbox" v-model="cbs" :value="
item.id"> <!--将商品的id作为复选框值 -->
</div>
<div>
<img :src="changePath(
item.picAddr)" alt="">
</div>
<div class="three">
<div>{{
item.proName}}</div>
<div>￥:{{
item.price }}---鞋码：{{
item.size }}X{{
item.num }}</div>
</div>
<div>
<button @click="goUpdate(
item)">修改</button>
</div>
</div>
<div v-if="products.length==0">暂无商品</div>
</div>
<div class="foot">
<div>
<input v-model="cbAll" @click="selAll();" type="checkbox" name="" id=""> 全选 <button @click="del();">删除</button>
</div>
<div>
合计:￥:<span style="color: red; font: 18px; font-weight: bold; margin-right: 10px;">{{ total }}</span><button>立即结算</button>
</div>
</div>
<!--修改的模态框
<div v-show="upDialog" class="updateMark">
<div>
<button @click="upDialog=false">关闭</button>
</div>
<div class="content">
<div>编辑商品</div>
<div>尺码:
<span class="cm" :id="
item==size?'active':''" @click="size=
item" v-for="
item,index in sizes" :key="index">{{
item}}</span>
</div>
<div>数量:<button>-</button><input type="text" v-model="unum" value="1"><button>+</button></div>
<div>
<button @click="update()">确定</button> <button @click="upDialog=false">取消</button>
</div>
</div>
</div>-->
<van-overlay :show="upDialog">
<div class="wrapper">
<div class="block" @click.stop>
<div>编辑商品</div>
<div>尺码:
<span class="cm" :id="
item==size?'active':''" @click="size=
item" v-for="
item,index in sizes" :key="index">{{
item}}</span>
</div>
<div>数量:<button>-</button><input type="text" v-model="unum" value="1"><button>+</button></div>
<div>
<button @click="update()">确定</button> <button @click="upDialog=false">取消</button>
</div>
</div>
</div>
</van-overlay>
</div>
</template>
<script setup>
import {computed, onMounted, ref, watch} from "vue"
import { useRouter } from "vue-router"
import checkLogin from "../login";
import http from "../axios/http"
import { showToast } from "vant";
let router=useRouter();
checkLogin(); //检查登入状态
//定义模型变量
let products=ref([])
let cbs=ref([]) //对应一组复选框
let cbAll=ref(false)
let total=ref(0) //总价
let sizes=ref([]) //控制修改的尺码
let unum =ref(0) //控修改的数量
let size=ref(0) //控制用户选中尺码
//控制模态框
let upDialog=ref(false)
//加载钩子
onMounted(()=>{
//调用接口获取购物车商品
http.get("cart/queryCart").then((data)=>{
console.log(data)
products.value=data;
}).catch((error)=>{
console.log(error)
})
});
//转换图片路径
function changePath(path){
return path.replace("./img","/src/assets/img")
}
//实现删除
function del(){
let ary=cbs.value; //伪数组 proxy={0:值,1:值}
console.log(ary)
//console.log(Array.from(ary)) //将伪数组轮为数组
//console.log(ary.map((v,k)=>v));
//let ary1=ary.map((v,k)=>v);
//将伪数转化为数组
let ary1=[];
ary.forEach(
item=> ary1.push(
item))
//调用接口实现删除
if(ary.length==0){
//alert("你没有选择删除的商品");
showToast("你没有选择删除的商品")
return;
}
http.get("cart/deleteCart",{params:{
id:ary1 //
传数组:[21,22]
}}).then(data=>{
//console.log(data)
if(data.status==
200){
//重新查询购物车的商品信息展示
location.reload();
}else{
// alert("删除失败");
showToast("删除失败")
}
}).catch(error=>{
console.log(error)
})
}
function selAll(){
if(!cbAll.value){
//alert("全选")
let ids=products.value.map(
item=>
item.id)
cbs.value=ids;
}else{
//alert("不全选")
cbs.value=[]
}
}
//监听 模型变量
watch(cbs,function(newv,olev){
//判断全选复选框的状态
if(cbs.value.length==products.value.length){
//让全选复选框选
cbAll.value=true;
}else{
cbAll.value=false;
}
//计算总价
//循环复选框选中的值
let temp=0;
cbs.value.forEach((
item)=>{
//通过选中的id，找到商品
let pintem=products.value.find((p)=> p.id==
item)
temp = temp + pintem.num*pintem.price
})
total.value=temp;
})
//修改
function goUpdate(obj
Item){
//1.显示模态框
upDialog.value=true;
//2.显示对应尺码和数量
//清空
sizes.value=[];
let ary=obj
Item.productSize.split("-");
for(let i=ary[0];i<=ary[1];i++){
sizes.value.push(i);
}
//3.还原数量，和对应的尺码
unum.value=obj
Item.num
size.value=obj
Item.size
}
//修改
function update(){
alert("调用接口实现修改。。。关闭模态框");
upDialog.value=false;
}
function reload(){
location.reload()
}
</script>
<style scoped>
#maint { height: 100%;}
#maint .top{
background-color: #1E90FF;
height: 45px;
display: flex;
justify-content: space-between;
align-
items: center;
position: fixed;
width: 100%;
top: 0px;
}
#maint .m{
width: 100%;
height: calc(100% - 40px);
/* margin-top: 45px; */
/* background-color: red; */
overflow-y: scroll;
overflow-x: visible;
/* text-align: center; */
padding: 10px;
font-size: 14px;
}
.m .product{
display: flex;
/* background-color: red; */
align-
items:center;
gap:15px; /*设置弹性盒子间距 */
margin-bottom: 15px;
border-bottom: 1px solid grey;
}
.m img{ width: 66px; height: 66px;}
.m .product .three{
align-self: stretch; /*高度自适应父盒子高,不设置由内容决定高度 */
flex: 1;
display:flex;
flex-direction: column;
justify-content: space-between;
align-
items:flex-start;
}
#maint .foot{
height: 40px;
position: fixed;
bottom:60px;
width: 100%;
border: 1px solid grey;
/* background-color: red; */
display: flex;
justify-content: space-between;
align-
items:center;
}
.updateMark {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10;
}
.updateMark .content{
background-color: white;
border: 1px solid grey;
border-radius:
20px;
width:90%;
margin-left:5%;
height:
200px;
margin-top:100px;
}
.cm{
border: 1px solid grey;
padding: 5px 8px;
margin:3px 6px;
display: inline-block;
}
#active{ background-color: green;}
.wrapper {
display: flex;
align-
items: center;
justify-content: center;
height: 100%;
}
.block {
width: 80%;
height:
200px;
border-radius:
20px;
background-color: #fff;
}
</style>帮我把这个js写的购物车vue组件改成用ts写
本文探讨了C++中对象传递的方式，分析了传值可能导致的问题，如对象切割，并对比了传引用的优势。此外，还讨论了不同类型拷贝成本的误区及编译器优化限制。
扫一扫
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
