You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
8.5 KiB
263 lines
8.5 KiB
<template>
|
|
<div class="main">
|
|
<div class="cart-main">
|
|
<div class="cart-top">
|
|
<div class="cart-num">图书数量<span>(5)</span></div>
|
|
<span @click="cartDelt">{{ !isDeltHandle ? '管理' : '完成' }}</span>
|
|
</div>
|
|
<div class="cart-list">
|
|
<div class="cart-item">
|
|
<div class="list-top">
|
|
<van-checkbox v-model="checked"></van-checkbox>
|
|
<div class="top-info">
|
|
<p class="active-name">你选书，我买单<i></i></p>
|
|
<p class="dealer">京东商城</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-list">
|
|
<div class="product-item">
|
|
<van-checkbox v-model="checked"></van-checkbox>
|
|
<div class="product-cont">
|
|
<div class="product-img"><img src="" alt="" /></div>
|
|
<div class="product-txt">
|
|
<div class="product-info">
|
|
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑 </h4>
|
|
<div class="author-date">
|
|
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
|
|
<p class="date overflow-txt-only ">2023年07月</p>
|
|
</div>
|
|
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
|
|
</div>
|
|
<div class="product-bottom">
|
|
<p class="product-price">实付款 <span><i class="rmb">￥</i>29.0</span><i>129.0</i></p>
|
|
<span v-if="!isDeltHandle" class="product-num">x1</span>
|
|
<span v-else class="item-delt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<van-checkbox v-model="checked"></van-checkbox>
|
|
<div class="product-cont">
|
|
<div class="product-img"><img src="" alt="" /></div>
|
|
<div class="product-txt">
|
|
<div class="product-info">
|
|
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑 </h4>
|
|
<div class="author-date">
|
|
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
|
|
<p class="date overflow-txt-only ">2023年07月</p>
|
|
</div>
|
|
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
|
|
</div>
|
|
<div class="product-bottom">
|
|
<p class="product-price">实付款 <span><i class="rmb">￥</i>29.0</span><i>129.0</i></p>
|
|
<span v-if="!isDeltHandle" class="product-num">x1</span>
|
|
<span v-else class="item-delt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-item">
|
|
<div class="list-top">
|
|
<van-checkbox v-model="checked"></van-checkbox>
|
|
<div class="top-info">
|
|
<p class="active-name">你选书，我买单<i></i></p>
|
|
<p class="dealer">京东商城</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-list">
|
|
<div class="product-item">
|
|
<van-checkbox v-model="checked"></van-checkbox>
|
|
<div class="product-cont">
|
|
<div class="product-img"><img src="" alt="" /></div>
|
|
<div class="product-txt">
|
|
<div class="product-info">
|
|
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑 </h4>
|
|
<div class="author-date">
|
|
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
|
|
<p class="date overflow-txt-only ">2023年07月</p>
|
|
</div>
|
|
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div>
|
|
</div>
|
|
<div class="product-bottom">
|
|
<p class="product-price">实付款 <span><i class="rmb">￥</i>29.0</span><i>129.0</i></p>
|
|
<span v-if="!isDeltHandle" class="product-num">x1</span>
|
|
<span v-else class="item-delt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cart-pay">
|
|
<van-checkbox v-model="checked">全选</van-checkbox>
|
|
<div v-if="!isDeltHandle" class="payment-right">
|
|
<div class="total-num">合计:<span><i class="rmb">￥</i>0</span></div>
|
|
<p class="pay-btn" @click="goPay">下单</p>
|
|
</div>
|
|
<div v-else class="payment-right">
|
|
<p class="delt-btn" @click="confirmDelt">删除</p>
|
|
</div>
|
|
</div>
|
|
<TabBar :tabCur.sync="tabCur" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Toast } from 'vant'
|
|
import { reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue'
|
|
import TabBar from '@/components/tabBar/index.vue'
|
|
export default {
|
|
name: 'Cart',
|
|
components: { TabBar },
|
|
setup() {
|
|
const { proxy } = getCurrentInstance()
|
|
let data = reactive({
|
|
tabCur: 1,
|
|
checked: false,
|
|
isDeltHandle: false
|
|
})
|
|
onMounted(() => {})
|
|
let goPay = () => {
|
|
proxy.$router.push({ path: '/CartResult' })
|
|
}
|
|
let cartDelt = () =>{
|
|
data.isDeltHandle = !data.isDeltHandle
|
|
}
|
|
return {
|
|
...toRefs(data),
|
|
goPay,
|
|
cartDelt
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cart-main{
|
|
padding: 0 .16rem 2.2rem .16rem;
|
|
color: #191A1A;
|
|
.cart-top{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: .32rem;
|
|
padding: .18rem .32rem;
|
|
background-color: #F4F4FC;
|
|
z-index: 999;
|
|
.cart-num{
|
|
font-size: .32rem;
|
|
opacity: 0.6;
|
|
span{
|
|
font-size: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cart-list{
|
|
padding-top: 1rem;
|
|
}
|
|
.cart-item{
|
|
padding: .24rem;
|
|
margin-bottom: .2rem;
|
|
box-shadow: 0px .03rem 0.6rem 1px rgba(0,0,0,0.08);
|
|
border-radius: 0.1rem;
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.product-list{
|
|
.product-item{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: .3rem;
|
|
}
|
|
}
|
|
|
|
.cart-pay{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0.98rem;
|
|
padding: 0 .32rem;
|
|
height: 1rem;
|
|
background: linear-gradient(#fff, #f1f1f1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.payment-right{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: .28rem;
|
|
.total-num{
|
|
font-size: 0.28rem;
|
|
span{
|
|
font-size: .4rem;
|
|
font-weight: bold;
|
|
color: #FF3871;
|
|
.rmb{
|
|
font-style: normal;
|
|
font-size: .28rem;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
.pay-btn{
|
|
width: 1.5rem;
|
|
height: 0.6rem;
|
|
margin-left: 0.4rem;
|
|
line-height: 0.6rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: url('@assets/images/btn3.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.delt-btn{
|
|
width: 1.5rem;
|
|
height: 0.6rem;
|
|
line-height: 0.6rem;
|
|
font-size: .28rem;
|
|
color: #000;
|
|
text-align: center;
|
|
border: 0.02rem solid #000;
|
|
opacity: 0.6;
|
|
border-radius: .4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.van-checkbox{
|
|
margin-right: .2rem;
|
|
}
|
|
|
|
:deep(.van-checkbox__icon){
|
|
height: .35rem;
|
|
}
|
|
:deep(.van-checkbox__icon .van-icon){
|
|
width: .35rem;
|
|
height: .35rem;
|
|
border-color: rgba(0,0,0,.3);
|
|
}
|
|
:deep(.van-checkbox__icon--checked .van-icon){
|
|
border: none;
|
|
background: url('@assets/images/selected.png') no-repeat transparent;
|
|
background-size: .35rem .35rem;
|
|
}
|
|
:deep(.van-icon-success:before){
|
|
display: none;
|
|
}
|
|
:deep(.van-checkbox__label){
|
|
font-size: .28rem;
|
|
}
|
|
|
|
</style>
|