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

<template>
	<div class="main">
    <div class="top-header">
      <span class="back" @click="toBack"></span>
      <p>开始选书</p>
      <img @click="toCart" style="width: .48rem;" src="@assets/images/cart.png" alt="" />
    </div>
    <div class="bookList-main">
      <input type="text" v-model="query" placeholder="搜索" class="search-input" />
      <div class="banner">
        <img src="@assets/images/banner.png" alt="" />
      </div>
      <div class="booList-all">
        <div class="booList-filter">
          <select v-model="selectedValue">
            <option value="1">热度降序</option>
            <option value="2">热度升序</option>
            <option value="3">价格降序</option>
            <option value="4">价格升序</option>
          </select>
        </div>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <div class="book-item"  v-for="(item,index) in list" :key="item" @click="showDetial=true">
          <div class="product-cont">
            <div class="product-img"><img src="" alt="" /></div>
            <div class="product-txt">
              <div class="product-info">
                <h4 class="overflow-txt">秒懂AI提问：让人工智能开发大脑{{ item }} </h4>
                <div class="author-date">
                  <p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p>
                  <p class="date overflow-txt-only">2023年07月</p>
                </div>
                <p class="book-publish">人民邮电出版社</p>
              </div>
            </div>
            <div class="dealer"> 京东商城</div>
          </div>
          <div class="sales-progress">
            <van-progress :percentage="50" :show-pivot="false" color="#5A86F4" stroke-width=".17rem" />
            <p>已定：<span>5册</span></p>
            <p>剩余：<span>5册</span></p>
          </div>
        </div>
      </van-list>
      </div>
    </div>

    <van-dialog v-model:show="showDetial" :show-confirm-button="false">
      <div class="bookItem-dialog-detail">
        <div class="list-top">
          <div class="top-info">
            <p class="active-name">你选书，我买单<i></i></p>
          </div>
        </div>
        <div class="product-cont">
          <div class="product-img">
            <img src="" alt="" />
          </div>
          <div class="book-inventory">
            <p>剩余库存</p>
            <span><i>5</i>册</span>
          </div>
          <div class="product-txt">
            <div class="product-info">
              <h4>秒懂AI提问：让人工智能开发大脑</h4>
              <div class="bookItem-txt">
                <span>著者：</span>
                <p class="author">秋叶 刘进新 姜梅 定秋枫</p>
              </div>
              <div class="bookItem-txt">
                <span>出版社：</span>
                <p>人民邮电出版社</p>
              </div>
              <div class="bookItem-txt">
                <span>出版时间：</span>
                <p>2023年07月</p>
              </div>
              <div class="bookItem-txt">
                <span class="txt-title">简介：</span>
                <p class="intro-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</p>
              </div>
            </div>
          </div>
        </div>
        <div class="order-dealer">
          <p class="dealer">京东商城</p>
          <div class="order-pay">
            <p>实付款<span><i>￥</i>0</span></p>
            <span class="yj-price"><i>￥</i><em>129.0</em></span>
          </div>
        </div>
      </div>
      <div class="dialog-btn">
        <span @click="showDetial=false">取消</span>
        <span class="btn-comfired" @click="addCart">加入书车</span>
      </div>
    </van-dialog>
	</div>
</template>

<script>
import { Toast } from 'vant'
import { reactive, onMounted, getCurrentInstance, toRefs } from 'vue'
export default {
	name: 'BookList',
	setup() {
		const { proxy } = getCurrentInstance()
		let data = reactive({
      query: '',
      selectedValue: '1',
      showDetial: false,
      list:[],
      loading: false,
      finished: false
		})
		onMounted(() => {})
		let toBack = () => {
			proxy.$router.push({ path: '/' })
		}
    let onLoad = () => {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          data.list.push(data.list.length + 1);
        }

        // 加载状态结束
        data.loading = false;

        // 数据全部加载完成
        if (data.list.length >= 40) {
          data.finished = true;
        }
      }, 1000);
    }
    let addCart = () => {
      data.showDetial = false
      Toast('当前书籍已成功加入书车')
    }
    let toCart = () => {
			proxy.$router.push({ path: '/Cart' })
		}
		return {
			...toRefs(data),
			toBack,
      addCart,
      onLoad,
      toCart
		}
	},
}
</script>

<style scoped lang="scss">
.bookList-main{
  padding: 1.2rem .16rem 0 .16rem;
  height: calc(100% - 1.2rem);
  background-color: #fff;
  .search-input{
    display: block;
    padding: .18rem .18rem .18rem .66rem;
    width: calc(100% - .84rem);
    height: .32rem;
    line-height: .32rem;
    font-size: .26rem;
    background: url('@assets/images/search.png') no-repeat #F1F4FE .24rem center;
		background-size: .24rem .24rem;
    border-radius: 0.08rem;
  }
  .banner{
    margin: .3rem 0 .2rem 0;
    box-shadow: 0px 0.1rem 0.6rem 1px rgba(20, 69, 207, 0.20);
    img{
      display: block;
      width: 100%;
    }
  }
}
.booList-all{
  padding: .36rem .24rem;
  background: #fff;
  box-shadow: 0px 0.03rem 0.6rem 1px rgba(0, 0, 0, 0.08);
  border-radius: 0.08rem;
}
.booList-filter{
  select{
    display: block;
    font-size: .28rem;
    padding-right: .24rem;
    border: none;
    color: #FE6902;
    background: url('@assets/images/book-arrow.png') no-repeat transparent right center;
    background-size: .16rem .16rem;
    -webkit-appearance:none;
    -moz-appearance:none; 
    appearance:none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

.book-item{
  padding-top: .4rem;
  .product-cont{
    position: relative;
    .product-info{
      h4{
        width: 3.34rem;
      }
    }
    .author-date{
      margin: 0.04rem 0;
      p{
        height: .36rem;
        line-height: .36rem;
        border-radius: 0.04rem;
      }
    }
    .book-publish{
      font-size: .24rem;
      opacity: .6;
    }
    .dealer{
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.04rem 0.08rem 0.04rem .32rem;
      font-size: .24rem;
      background-color: #F4F6FC;
      background-position: .08rem center;
      opacity: .6;
    }
  }

  .sales-progress{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .24rem;
    padding: .2rem .24rem;
    background-color: #F9F9FD;
    border: 1px solid #f2f2f2;
    border-radius: 0.08rem;
    :deep(.van-progress){
      width: 2.88rem;
      border-radius: 0.03rem;
      background-color: #E1E8FC;
    }
    p{
      font-size: .24rem;
      color: #737475;
      span{
        color: #191A1A;
      }
      &:last-child{
        span{
          color: #FF3871;
        }
      }
    }
  }

}

.dialog-btn{
  span{
    width: 2rem;
    text-align: center;
    padding: 0;
  }
}

</style>