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