37 changed files with 2191 additions and 201 deletions
-
244library-activity/src/assets/css/style.scss
-
BINlibrary-activity/src/assets/images/arrow-w.png
-
BINlibrary-activity/src/assets/images/banner.png
-
BINlibrary-activity/src/assets/images/book-arrow.png
-
BINlibrary-activity/src/assets/images/card-img1.png
-
BINlibrary-activity/src/assets/images/card-img2.png
-
BINlibrary-activity/src/assets/images/dialog-img1.png
-
BINlibrary-activity/src/assets/images/icon-copy.png
-
BINlibrary-activity/src/assets/images/log-img1.png
-
BINlibrary-activity/src/assets/images/log-img2.png
-
BINlibrary-activity/src/assets/images/log-img3.png
-
BINlibrary-activity/src/assets/images/log-img4.png
-
BINlibrary-activity/src/assets/images/log-img5.png
-
BINlibrary-activity/src/assets/images/mylending-img1.png
-
BINlibrary-activity/src/assets/images/mylending-img2.png
-
BINlibrary-activity/src/assets/images/mylending-img3.png
-
BINlibrary-activity/src/assets/images/mylending-img4.png
-
BINlibrary-activity/src/assets/images/mylending-img5.png
-
BINlibrary-activity/src/assets/images/mylending-img6.png
-
BINlibrary-activity/src/assets/images/order-detail-img1.png
-
BINlibrary-activity/src/assets/images/order-detail-img2.png
-
BINlibrary-activity/src/assets/images/order-detail-img3.png
-
BINlibrary-activity/src/assets/images/order-detail-img4.png
-
BINlibrary-activity/src/assets/images/order-detail-img5.png
-
BINlibrary-activity/src/assets/images/search.png
-
6library-activity/src/main.js
-
24library-activity/src/router/index.js
-
276library-activity/src/views/bookList/bookList.vue
-
359library-activity/src/views/cart/cart copy.vue
-
149library-activity/src/views/cart/cart.vue
-
12library-activity/src/views/cart/result.vue
-
7library-activity/src/views/index.vue
-
218library-activity/src/views/logisticsInfo/logisticsInfo.vue
-
153library-activity/src/views/mine/mine.vue
-
446library-activity/src/views/myLending/myLending.vue
-
227library-activity/src/views/order/order.vue
-
269library-activity/src/views/orderDetail/orderDetail.vue
|
After Width: 40 | Height: 40 | Size: 400 B |
|
After Width: 686 | Height: 217 | Size: 74 KiB |
|
After Width: 16 | Height: 16 | Size: 382 B |
|
After Width: 610 | Height: 245 | Size: 100 KiB |
|
After Width: 80 | Height: 80 | Size: 8.8 KiB |
|
After Width: 278 | Height: 278 | Size: 39 KiB |
|
After Width: 24 | Height: 24 | Size: 451 B |
|
After Width: 1080 | Height: 746 | Size: 390 KiB |
|
After Width: 36 | Height: 36 | Size: 1.5 KiB |
|
After Width: 16 | Height: 16 | Size: 395 B |
|
After Width: 32 | Height: 32 | Size: 1.4 KiB |
|
After Width: 32 | Height: 32 | Size: 1.0 KiB |
|
After Width: 122 | Height: 107 | Size: 12 KiB |
|
After Width: 122 | Height: 107 | Size: 7.4 KiB |
|
After Width: 122 | Height: 107 | Size: 11 KiB |
|
After Width: 107 | Height: 107 | Size: 7.8 KiB |
|
After Width: 107 | Height: 107 | Size: 5.1 KiB |
|
After Width: 107 | Height: 107 | Size: 8.0 KiB |
|
After Width: 79 | Height: 79 | Size: 3.1 KiB |
|
After Width: 750 | Height: 387 | Size: 258 KiB |
|
After Width: 80 | Height: 80 | Size: 1.1 KiB |
|
After Width: 684 | Height: 5 | Size: 2.2 KiB |
|
After Width: 39 | Height: 40 | Size: 1.6 KiB |
|
After Width: 43 | Height: 45 | Size: 2.2 KiB |
@ -0,0 +1,276 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="top-header"> |
||||
|
<span class="back" @click="toBack"></span> |
||||
|
<p>活动书籍</p> |
||||
|
</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>简介：</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>129.0</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.go(-1); |
||||
|
} |
||||
|
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('当前书籍已成功加入书车') |
||||
|
} |
||||
|
return { |
||||
|
...toRefs(data), |
||||
|
toBack, |
||||
|
addCart, |
||||
|
onLoad |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.bookList-main{ |
||||
|
padding: 1.2rem .32rem 0 .32rem; |
||||
|
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; |
||||
|
color: #757676 !important; |
||||
|
background-color: #fff !important; |
||||
|
border: 1px solid #C6C6E2; |
||||
|
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 #C6C6E2; |
||||
|
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> |
||||
@ -0,0 +1,359 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="cart-main"> |
||||
|
<div class="cart-top"> |
||||
|
<div class="cart-num">图书数量<span>(5)</span></div> |
||||
|
<span @click="cartDelt">管理</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 class="product-num">x1</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 class="product-num">x1</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 class="product-num">x1</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.25rem .125rem 2.375rem .125rem; |
||||
|
color: #191A1A; |
||||
|
.cart-top{ |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
left: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: .3rem; |
||||
|
padding: .25rem; |
||||
|
background-color: #F4F4FC; |
||||
|
z-index: 999; |
||||
|
.cart-num{ |
||||
|
font-size: .3rem; |
||||
|
opacity: 0.6; |
||||
|
span{ |
||||
|
font-size: 0.25rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.cart-list{ |
||||
|
padding-top: .875rem; |
||||
|
} |
||||
|
.cart-item{ |
||||
|
padding: .25rem; |
||||
|
margin-bottom: .1875rem; |
||||
|
box-shadow: 0px .0375rem 0.75rem 1px rgba(0,0,0,0.08); |
||||
|
border-radius: 0.1rem; |
||||
|
background-color: #fff; |
||||
|
.list-top{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
.top-info{ |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.active-name{ |
||||
|
position: relative; |
||||
|
padding: 0 0.375rem; |
||||
|
font-size: .3rem; |
||||
|
font-weight: bold; |
||||
|
background: url('@assets/images/gift.png') no-repeat left center; |
||||
|
background-size: 0.275rem 0.275rem; |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 50%; |
||||
|
content: ""; |
||||
|
width: .2rem; |
||||
|
height: .2rem; |
||||
|
background: url('@assets/images/arrow.png') no-repeat center center; |
||||
|
background-size:.2rem .2rem; |
||||
|
transform: translateY(-50%) |
||||
|
} |
||||
|
} |
||||
|
.dealer{ |
||||
|
padding-left: .4rem; |
||||
|
font-size: .3rem; |
||||
|
background: url('@assets/images/dealer.png') no-repeat left center; |
||||
|
background-size: .3rem .3rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-list{ |
||||
|
.product-item{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin-top: .25rem; |
||||
|
.product-cont{ |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.product-img{ |
||||
|
width: 1.25rem; |
||||
|
height: 1.75rem; |
||||
|
margin: .125rem 0.2rem 0 0; |
||||
|
background-color: #f1f1f1; |
||||
|
border-radius: 0.05rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.product-txt{ |
||||
|
flex: 1; |
||||
|
.product-info{ |
||||
|
h4{ |
||||
|
font-size: .3rem; |
||||
|
} |
||||
|
.author-date{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
margin: .075rem 0; |
||||
|
p{ |
||||
|
font-size: .25rem; |
||||
|
padding: 0 .05rem; |
||||
|
margin-right: 0.1rem; |
||||
|
background-color: #F4F6FC; |
||||
|
color: #717275; |
||||
|
} |
||||
|
} |
||||
|
.intro{ |
||||
|
font-size: .25rem; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
} |
||||
|
.product-bottom{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #757676; |
||||
|
.product-price{ |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
font-size: .35rem; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
margin-right: 0.175rem; |
||||
|
.rmb{ |
||||
|
font-style: normal; |
||||
|
font-size: .25rem; |
||||
|
text-decoration: none; |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
i{ |
||||
|
font-style: normal; |
||||
|
text-decoration: line-through; |
||||
|
color: #FF3871; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cart-pay{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 1.225rem; |
||||
|
padding: 0 .4rem; |
||||
|
height: 1rem; |
||||
|
// background-color: #fcfcfc; |
||||
|
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: .3rem; |
||||
|
.total-num{ |
||||
|
font-size: 0.3rem; |
||||
|
span{ |
||||
|
font-size: .35rem; |
||||
|
font-weight: bold; |
||||
|
color: #FF3871; |
||||
|
.rmb{ |
||||
|
font-style: normal; |
||||
|
font-size: .25rem; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.pay-btn{ |
||||
|
width: 1.875rem; |
||||
|
height: 0.75rem; |
||||
|
margin-left: 0.5rem; |
||||
|
line-height: 0.75rem; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
background: url('@assets/images/btn3.png') no-repeat center center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.delt-btn{ |
||||
|
width: 1.875rem; |
||||
|
height: 0.75rem; |
||||
|
line-height: 0.75rem; |
||||
|
font-size: .3rem; |
||||
|
color: #000; |
||||
|
text-align: center; |
||||
|
border: 2px solid #000; |
||||
|
opacity: 0.6; |
||||
|
border-radius: .625rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.van-checkbox{ |
||||
|
margin-right: .15rem; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-checkbox__icon){ |
||||
|
height: .325rem; |
||||
|
} |
||||
|
:deep(.van-checkbox__icon .van-icon){ |
||||
|
width: .325rem; |
||||
|
height: .325rem; |
||||
|
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: .325rem .325rem; |
||||
|
} |
||||
|
:deep(.van-icon-success:before){ |
||||
|
display: none; |
||||
|
} |
||||
|
:deep(.van-checkbox__label){ |
||||
|
font-size: .3rem; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,218 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="order-detail-header"> |
||||
|
<span class="back" @click="toBack"></span> |
||||
|
</div> |
||||
|
<div class="logistics-main"> |
||||
|
<div class="logistics-tab"> |
||||
|
<span :class="tabActive === 0 ? 'active':''" @click="tabActive=0">订单1</span> |
||||
|
<span :class="tabActive === 1 ? 'active':''" @click="tabActive=1">订单2</span> |
||||
|
</div> |
||||
|
<div class="logistics-detail"> |
||||
|
<div class="logistics-top"> |
||||
|
<p>顺丰速运 SF1629871960733</p> |
||||
|
<div class="logistics-handle"> |
||||
|
<span @click="copyLogisticsInfo">复制</span> |
||||
|
<span @click="makePhoneCall">打电话</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="log-step"> |
||||
|
<div class="log-step-new"> |
||||
|
<div class="step-new-info"> |
||||
|
<p>运输中 11-21 16:57</p> |
||||
|
<span>查看详情</span> |
||||
|
</div> |
||||
|
<div class="step-new-detail"> |
||||
|
[鄂州市]快件离开 【湖北武昌转运中心】已发往 【湖北武汉洪山广场公司】 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="send-to-location"> |
||||
|
<div class="location-info">送至 中南路8号石化大院4栋3单元201</div> |
||||
|
<div class="location-detail"> |
||||
|
<p>张三 86-130****0000</p> |
||||
|
<span>取件可出示虚拟号 156232142001-4596</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Toast } from 'vant' |
||||
|
import { reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue' |
||||
|
export default { |
||||
|
name: 'LogisticsInfo', |
||||
|
components:{ Toast }, |
||||
|
setup() { |
||||
|
const { proxy } = getCurrentInstance() |
||||
|
let data = reactive({ |
||||
|
tabActive: 0 |
||||
|
}) |
||||
|
onMounted(() => {}) |
||||
|
let toBack = () => { |
||||
|
proxy.$router.go(-1) |
||||
|
} |
||||
|
let copyLogisticsInfo = () => { |
||||
|
const logisticsInfo = 'SF1629871960733'; |
||||
|
if (navigator.clipboard) { |
||||
|
navigator.clipboard.writeText(logisticsInfo) |
||||
|
.then(() => { |
||||
|
Toast('物流单号已复制'); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('复制失败:', err); |
||||
|
}); |
||||
|
} else { |
||||
|
const input = document.createElement('textarea'); |
||||
|
input.style.position = 'fixed'; |
||||
|
input.style.opacity = 0; |
||||
|
input.value = logisticsInfo; |
||||
|
document.body.appendChild(input); |
||||
|
input.select(); |
||||
|
document.execCommand('copy'); |
||||
|
document.body.removeChild(input); |
||||
|
Toast('物流单号已复制'); |
||||
|
} |
||||
|
} |
||||
|
let makePhoneCall = () => { |
||||
|
const phoneNumber = '95338'; |
||||
|
const telLink = `tel:${phoneNumber}`; |
||||
|
window.open(telLink, '_self'); |
||||
|
} |
||||
|
return { |
||||
|
...toRefs(data), |
||||
|
toBack, |
||||
|
copyLogisticsInfo, |
||||
|
makePhoneCall |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.order-detail-header{ |
||||
|
height: 6.8rem; |
||||
|
background: url('@assets/images/log-img1.png') no-repeat left top; |
||||
|
background-size: contain; |
||||
|
.back{ |
||||
|
background: url('@assets/images/back.png') no-repeat transparent; |
||||
|
background-size: .5rem .5rem; |
||||
|
} |
||||
|
} |
||||
|
.logistics-main{ |
||||
|
margin-top: -3rem; |
||||
|
.logistics-tab{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 0 .32rem .2rem .32rem; |
||||
|
padding: .16rem 0; |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 0.03rem 0.6rem 1px rgba(0, 0, 0, 0.08); |
||||
|
border-radius: 0.32rem; |
||||
|
span{ |
||||
|
display: block; |
||||
|
padding: 0 .36rem; |
||||
|
margin: 0 .24rem; |
||||
|
height: .6rem; |
||||
|
line-height: .6rem; |
||||
|
font-size: .32rem; |
||||
|
color: #7A7A7F; |
||||
|
background-color: #F4F4F9; |
||||
|
border-radius: .5rem; |
||||
|
&.active{ |
||||
|
color: #fff; |
||||
|
background-color: #FE6902; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.logistics-detail{ |
||||
|
padding: 0 .32rem .32rem .32rem; |
||||
|
background-color: #fff; |
||||
|
border-radius: .32rem .32rem 0 0; |
||||
|
.logistics-top{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: .28rem; |
||||
|
padding: .3rem 0 .36rem 0; |
||||
|
p{ |
||||
|
padding-left: .5rem; |
||||
|
background: url('@assets/images/log-img2.png') no-repeat left center; |
||||
|
background-size: .36rem .36rem; |
||||
|
} |
||||
|
.logistics-handle{ |
||||
|
opacity: .4; |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 .2rem; |
||||
|
height: .24rem; |
||||
|
line-height: .24rem; |
||||
|
&:first-child{ |
||||
|
border-right: 1px solid #000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.log-step{ |
||||
|
.log-step-new{ |
||||
|
position: relative; |
||||
|
&::before{ |
||||
|
position: absolute; |
||||
|
left: .16rem; |
||||
|
top: .46rem; |
||||
|
content: ""; |
||||
|
width: 0.01rem; |
||||
|
height: 100%; |
||||
|
border-left: 1px solid #ddd; |
||||
|
} |
||||
|
.step-new-info{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: .24rem; |
||||
|
color: #FE6902; |
||||
|
p{ |
||||
|
background: url('@assets/images/log-img5.png') no-repeat left center; |
||||
|
background-size: .32rem .32rem; |
||||
|
} |
||||
|
span{ |
||||
|
padding-right: .22rem; |
||||
|
background: url('@assets/images/log-img3.png') no-repeat right center; |
||||
|
background-size: .16rem .16rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.send-to-location{ |
||||
|
.location-info{ |
||||
|
background: url('@assets/images/log-img4.png') no-repeat left center; |
||||
|
background-size: .32rem .32rem; |
||||
|
} |
||||
|
.location-detail{ |
||||
|
span{ |
||||
|
opacity: .6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step-new-info p, |
||||
|
.location-info{ |
||||
|
padding-left: .5rem; |
||||
|
font-size: .32rem; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.step-new-detail, |
||||
|
.location-detail{ |
||||
|
margin: .16rem 0 .48rem .5rem; |
||||
|
padding: .18rem .18rem .18rem .24rem; |
||||
|
font-size: .28rem; |
||||
|
line-height: .42rem; |
||||
|
background: #F6F6FB; |
||||
|
border-radius: 0.08rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,446 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="top-header"> |
||||
|
<span class="back" @click="toBack"></span> |
||||
|
<p>我的借阅</p> |
||||
|
</div> |
||||
|
<div class="order-main"> |
||||
|
<van-tabs v-model:active="active" swipeable> |
||||
|
<van-tab v-for="item in tabTitle" :title="item.name"> |
||||
|
<div v-show="active === 0"> |
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status jy">借阅中</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status jy">借阅中</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status lq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status">已归还</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status zs-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status">已归还</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status yq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-show="active === 1"> |
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status jy">借阅中</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status jy">借阅中</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status lq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status jy">借阅中</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info2"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status lq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-show="active === 2"> |
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status">已归还</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status zs-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status">已归还</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status yq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="order-status">已归还</div> |
||||
|
</div> |
||||
|
<div class="product-cont lending-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> |
||||
|
</div> |
||||
|
<div class="mylending-info2"> |
||||
|
<p class="lending-date">借阅开始时间：2023-11-18 10:15:30</p> |
||||
|
<p class="lending-date">最后归还时间：2023-11-18 10:15:30</p> |
||||
|
<p class="actual-date">实际归还时间：2023-11-18 10:15:30</p> |
||||
|
<div class="myLending-status yq-status"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</van-tab> |
||||
|
</van-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { Toast } from 'vant' |
||||
|
import { reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue' |
||||
|
export default { |
||||
|
name: 'Order', |
||||
|
setup() { |
||||
|
const { proxy } = getCurrentInstance() |
||||
|
let data = reactive({ |
||||
|
tabCur: 1, |
||||
|
active: 0, |
||||
|
tabTitle: [ |
||||
|
{ |
||||
|
value: '0', |
||||
|
name: '全部', |
||||
|
}, |
||||
|
{ |
||||
|
value: '1', |
||||
|
name: '借阅中', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
name: '已归还', |
||||
|
} |
||||
|
], |
||||
|
}) |
||||
|
onMounted(() => { |
||||
|
console.log(proxy.$route.query.tabActive) |
||||
|
data.active = JSON.parse(proxy.$route.query.tabActive) |
||||
|
}) |
||||
|
let toBack = () => { |
||||
|
proxy.$router.go(-1) |
||||
|
} |
||||
|
return { |
||||
|
...toRefs(data), |
||||
|
toBack |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.mylending-info{ |
||||
|
position: relative; |
||||
|
padding: .2rem 0 0 0; |
||||
|
font-size: .24rem; |
||||
|
line-height: .4rem; |
||||
|
color: #757676; |
||||
|
p{ |
||||
|
padding: .04rem 0; |
||||
|
} |
||||
|
p.actual-date{ |
||||
|
color: #FF3871; |
||||
|
} |
||||
|
.myLending-status{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: .36rem; |
||||
|
width: 1.22rem; |
||||
|
height: 1.07rem; |
||||
|
&.yq-status{ |
||||
|
background: url('@assets/images/mylending-img1.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
&.zs-status{ |
||||
|
background: url('@assets/images/mylending-img2.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
&.lq-status{ |
||||
|
background: url('@assets/images/mylending-img3.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.mylending-info2{ |
||||
|
position: relative; |
||||
|
margin-top: .32rem; |
||||
|
padding: .25rem; |
||||
|
font-size: .24rem; |
||||
|
line-height: .4rem; |
||||
|
background: rgba(241,241,249,0.4); |
||||
|
border-radius: 0.08rem; |
||||
|
border: 0.02rem solid #C6C6E2; |
||||
|
p.actual-date{ |
||||
|
color: #FF3871; |
||||
|
} |
||||
|
.myLending-status{ |
||||
|
position: absolute; |
||||
|
right: .3rem; |
||||
|
top: .36rem; |
||||
|
width: 1.07rem; |
||||
|
height: 1.07rem; |
||||
|
&.yq-status{ |
||||
|
background: url('@assets/images/mylending-img6.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
&.zs-status{ |
||||
|
background: url('@assets/images/mylending-img5.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
&.lq-status{ |
||||
|
background: url('@assets/images/mylending-img4.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,269 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="order-detail-header"> |
||||
|
<span class="back" @click="toBack"></span> |
||||
|
</div> |
||||
|
<div class="order-detail"> |
||||
|
<div class="detail-base"> |
||||
|
<p>{{ orderName }}</p> |
||||
|
<span>{{ orderInfo }}</span> |
||||
|
</div> |
||||
|
<div v-if="orderType==='2' || orderType==='3'" class="parcel-log" @click="toLogisticsInfo"> |
||||
|
<p>共2个包裹，运送中</p> |
||||
|
<p>顺丰速运：SF162987196073</p> |
||||
|
</div> |
||||
|
<div class="user-location"> |
||||
|
<p>洪山科技创业中心C栋武汉优软科技</p> |
||||
|
<p>是路飞啊<span>15376587658</span></p> |
||||
|
</div> |
||||
|
<div class="order-item"> |
||||
|
<div class="list-top"> |
||||
|
<div class="top-info"> |
||||
|
<p class="active-name"> |
||||
|
你选书，我买单<i></i> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div :class="['order-status', orderType === '0' ? 'dshe' : '' , (orderType==='1' || orderType==='2') ? 'dhuo' : '']">{{ orderName }}</div> |
||||
|
</div> |
||||
|
<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> |
||||
|
<div class="order-book-price"> |
||||
|
<span><i>￥</i>29.0</span> |
||||
|
<span>X1</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="order-dealer"> |
||||
|
<p class="dealer">京东商城</p> |
||||
|
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="order-all-info"> |
||||
|
<div class="info-item"> |
||||
|
<span>订单编号：</span> |
||||
|
<p @click="copyOrderNum">20207896532145632103</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>支付方式：</span> |
||||
|
<p>图书馆统一支付</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>创建时间：</span> |
||||
|
<p>2023-11-18 13:56:30</p> |
||||
|
</div> |
||||
|
<div class="info-item" v-if="orderType === '1' || orderType === '2' || orderType === '3'"> |
||||
|
<span>审核时间：</span> |
||||
|
<p>2023-11-18 13:56:30</p> |
||||
|
</div> |
||||
|
<div class="info-item" v-if="orderType === '2' || orderType === '3'"> |
||||
|
<span>发货时间：</span> |
||||
|
<p>2023-11-18 13:56:30</p> |
||||
|
</div> |
||||
|
<div class="info-item" v-if="orderType === '3'"> |
||||
|
<span>收货时间：</span> |
||||
|
<p>2023-11-18 13:56:30</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Toast } from 'vant' |
||||
|
import { reactive, computed, onMounted, getCurrentInstance, toRefs, watch } from 'vue' |
||||
|
export default { |
||||
|
name: 'OrderDetail', |
||||
|
components:{ Toast }, |
||||
|
setup() { |
||||
|
const { proxy } = getCurrentInstance() |
||||
|
let data = reactive({ |
||||
|
orderType: 0, |
||||
|
orderName: computed(function(){ |
||||
|
switch(data.orderType){ |
||||
|
case '0' : |
||||
|
return '待审核' |
||||
|
break; |
||||
|
case '1' : |
||||
|
return '待发货' |
||||
|
break; |
||||
|
case '2' : |
||||
|
return '待收货' |
||||
|
break; |
||||
|
case '3' : |
||||
|
return '已完成' |
||||
|
break; |
||||
|
case '4' : |
||||
|
return '已取消' |
||||
|
break; |
||||
|
} |
||||
|
}), |
||||
|
orderInfo: computed(function(){ |
||||
|
switch(data.orderType){ |
||||
|
case '0' : |
||||
|
return '已提交图书馆，耐心等待审核' |
||||
|
break; |
||||
|
case '1' : |
||||
|
return '审核通过，马上安排发货' |
||||
|
break; |
||||
|
case '2' : |
||||
|
return '快递马上就到，请及时查收' |
||||
|
break; |
||||
|
case '3' : |
||||
|
return '订单已完成' |
||||
|
break; |
||||
|
case '4' : |
||||
|
return '订单已取消' |
||||
|
break; |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
onMounted(() => { |
||||
|
console.log(proxy.$route.query.type) |
||||
|
data.orderType = proxy.$route.query.type |
||||
|
}) |
||||
|
let toBack = () => { |
||||
|
proxy.$router.go(-1) |
||||
|
} |
||||
|
let toLogisticsInfo = () => { |
||||
|
proxy.$router.push({ path: '/LogisticsInfo' }) |
||||
|
} |
||||
|
let copyOrderNum = () => { |
||||
|
const logisticsInfo = '20207896532145632103'; |
||||
|
if (navigator.clipboard) { |
||||
|
navigator.clipboard.writeText(logisticsInfo) |
||||
|
.then(() => { |
||||
|
Toast('订单编号已复制'); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('复制失败:', err); |
||||
|
}); |
||||
|
} else { |
||||
|
const input = document.createElement('textarea'); |
||||
|
input.style.position = 'fixed'; |
||||
|
input.style.opacity = 0; |
||||
|
input.value = logisticsInfo; |
||||
|
document.body.appendChild(input); |
||||
|
input.select(); |
||||
|
document.execCommand('copy'); |
||||
|
document.body.removeChild(input); |
||||
|
Toast('订单编号已复制'); |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
...toRefs(data), |
||||
|
toBack, |
||||
|
toLogisticsInfo, |
||||
|
copyOrderNum |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.order-detail{ |
||||
|
margin-top: -2.06rem; |
||||
|
padding: 0 .32rem; |
||||
|
.detail-base{ |
||||
|
padding: 0 0 .4rem 1.1rem ; |
||||
|
font-size: .28rem; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
background: url('@assets/images/order-detail-img1.png') no-repeat left .1rem; |
||||
|
background-size: .78rem .78rem; |
||||
|
p{ |
||||
|
font-size: .4rem; |
||||
|
} |
||||
|
} |
||||
|
.parcel-log{ |
||||
|
position: relative; |
||||
|
padding: 0.26rem .26rem .26rem 1.2rem; |
||||
|
margin-bottom: .2rem; |
||||
|
font-size: .28rem; |
||||
|
box-shadow: 0px 0.03rem .6rem 1px rgba(0,0,0,0.08); |
||||
|
border-radius: 0.08rem; |
||||
|
background: url('@assets/images/order-detail-img3.png') no-repeat #fff .26rem .26rem; |
||||
|
background-size: .78rem .78rem; |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
right: .26rem; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
content: ""; |
||||
|
width: .32rem; |
||||
|
height: .32rem; |
||||
|
background: url('@assets/images/arrow.png') no-repeat; |
||||
|
background-size: .32rem .32rem; |
||||
|
} |
||||
|
p:last-child{ |
||||
|
font-size: .24rem; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
} |
||||
|
.user-location{ |
||||
|
position: relative; |
||||
|
padding: .29rem .26rem .26rem .8rem; |
||||
|
margin-bottom: .2rem; |
||||
|
font-size: .32rem; |
||||
|
box-shadow: 0px 0.03rem .6rem 1px rgba(0,0,0,0.08); |
||||
|
border-radius: 0.08rem; |
||||
|
background-color: #fff; |
||||
|
background: url('@assets/images/order-detail-img5.png') no-repeat #fff .26rem .34rem; |
||||
|
background-size: .4rem .4rem; |
||||
|
&::after{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
content: ""; |
||||
|
width: calc(100%); |
||||
|
height: 0.05rem; |
||||
|
background: url('@assets/images/order-detail-img4.png') no-repeat left bottom; |
||||
|
background-size: 100% 0.05rem; |
||||
|
} |
||||
|
p:last-child{ |
||||
|
font-size: .28rem; |
||||
|
opacity: 0.6; |
||||
|
span{ |
||||
|
margin-left: .3rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.order-item{ |
||||
|
margin-bottom: .2rem; |
||||
|
box-shadow: 0px 0.03rem 0.6rem 1px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
.order-all-info{ |
||||
|
padding: .26rem; |
||||
|
font-size: .28rem; |
||||
|
box-shadow: 0px 0.03rem .6rem 1px rgba(0,0,0,0.08); |
||||
|
border-radius: 0.08rem; |
||||
|
background-color: #fff; |
||||
|
.info-item{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
line-height: .68rem; |
||||
|
span{ |
||||
|
display: block; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
&:first-child{ |
||||
|
p{ |
||||
|
padding-right: .4rem; |
||||
|
background: url('@assets/images/icon-copy.png') no-repeat right center; |
||||
|
background-size: .24rem .24rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue