demo-library/library-activity/src/views/cart/cart.vue

<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>