29 changed files with 410 additions and 1608 deletions
-
31library-activity/README.md
-
52library-activity/src/assets/css/style.scss
-
BINlibrary-activity/src/assets/images/active-img.png
-
BINlibrary-activity/src/assets/images/empty.png
-
62library-activity/src/components/aitoast/aitoast.vue
-
477library-activity/src/components/verify/slide-verify.vue
-
6library-activity/src/router/index.js
-
59library-activity/src/views/activeDetail/activeDetail.vue
-
22library-activity/src/views/bookList/bookList.vue
-
359library-activity/src/views/cart/cart copy.vue
-
112library-activity/src/views/cart/cart.vue
-
4library-activity/src/views/feedback/feedback.vue
-
13library-activity/src/views/index.vue
-
21library-activity/src/views/logisticsInfo/logisticsInfo.vue
-
15library-activity/src/views/mine/mine.vue
-
6library-activity/src/views/myAddress/addAddress.vue
-
8library-activity/src/views/myAddress/myAddress.vue
-
78library-activity/src/views/myLending/myLending.vue
-
16library-activity/src/views/orderDetail/orderDetail.vue
-
12selfServiceMachine/README.md
-
2selfServiceMachine/public/index.html
-
BINselfServiceMachine/public/logo.png
-
BINselfServiceMachine/src/assets/logo.png
-
30selfServiceMachine/src/assets/styles/index.scss
-
127selfServiceMachine/src/views/bookRecommend.vue
-
222selfServiceMachine/src/views/module/bookDetails.vue
-
134selfServiceMachine/src/views/module/bookList.vue
-
51selfServiceMachine/src/views/module/headerTop.vue
-
97selfServiceMachine/src/views/module/homeListItem.vue
|
After Width: 750 | Height: 1624 | Size: 576 KiB |
|
After Width: 335 | Height: 236 | Size: 11 KiB |
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<div class="tishi-di" v-if="data.ifs"> |
|||
<div class="tishi"> |
|||
{{toastmassage}} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive,computed,onMounted,watch } from 'vue'; |
|||
export default { |
|||
props: { |
|||
toastmassage: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
iftshow: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
setup(props){ |
|||
const data = reactive({ |
|||
timer:null, |
|||
ifs:false |
|||
}) |
|||
watch(() => props.iftshow, (oldVlaue, newValue) => { |
|||
data.ifs = true; |
|||
}) |
|||
watch(() => data.ifs, (oldVlaue, newValue) => { |
|||
let that = data; |
|||
clearTimeout(that.timer); |
|||
that.timer = null; |
|||
that.timer=setTimeout(function(){ |
|||
that.ifs = false; |
|||
},1500) |
|||
}) |
|||
return { |
|||
data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.tishi-di{ |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 16%; |
|||
left: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.tishi{ |
|||
padding: 0.18rem 0.40rem; |
|||
background-color: rgb(226,226,226,0.9); |
|||
font-size: 0.28rem; |
|||
color: #222222; |
|||
border-radius: 0.04rem; |
|||
} |
|||
</style> |
|||
@ -1,477 +0,0 @@ |
|||
<template> |
|||
<div class="slide-verify" :style="{width: w + 'px'}" id="slideVerify" onselectstart="return false;"> |
|||
<!-- 图片加载遮蔽罩 --> |
|||
<div :class="{'slider-verify-loading': loadBlock}"></div> |
|||
<canvas :width="w" :height="h" ref="canvas" ></canvas> |
|||
<div v-if="show" @click="refresh" class="slide-verify-refresh-icon"></div> |
|||
<canvas :width="w" :height="h" ref="block" class="slide-verify-block"></canvas> |
|||
<!-- container --> |
|||
<div class="slide-verify-slider" :class="{'container-active': containerActive, 'container-success': containerSuccess, 'container-fail': containerFail}"> |
|||
<div class="slide-verify-slider-mask" :style="{width: sliderMaskWidth}"> |
|||
<!-- slider --> |
|||
<div @mousedown="sliderDown" |
|||
@touchstart="touchStartEvent" |
|||
@touchmove="touchMoveEvent" |
|||
@touchend="touchEndEvent" |
|||
class="slide-verify-slider-mask-item" |
|||
:style="{left: sliderLeft}"> |
|||
<div class="slide-verify-slider-mask-item-icon"></div> |
|||
</div> |
|||
</div> |
|||
<span class="slide-verify-slider-text">{{sliderText}}</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
const PI = Math.PI; |
|||
|
|||
function sum(x, y) { |
|||
return x + y |
|||
} |
|||
|
|||
function square(x) { |
|||
return x * x |
|||
} |
|||
export default { |
|||
name: 'SlideVerify', |
|||
props: { |
|||
// block length |
|||
l: { |
|||
type: Number, |
|||
default: 42, |
|||
}, |
|||
// block radius |
|||
r: { |
|||
type: Number, |
|||
default: 10, |
|||
}, |
|||
// canvas width |
|||
w: { |
|||
type: Number, |
|||
default: 310, |
|||
}, |
|||
// canvas height |
|||
h: { |
|||
type: Number, |
|||
default: 155, |
|||
}, |
|||
sliderText: { |
|||
type: String, |
|||
default: '向右滑动滑块填充拼图', |
|||
}, |
|||
accuracy: { |
|||
type: Number, |
|||
default: 5, // 若为 -1 则不进行机器判断 |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
imgs: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
containerActive: false, // container active class |
|||
containerSuccess: false, // container success class |
|||
containerFail: false, // container fail class |
|||
canvasCtx: null, |
|||
blockCtx: null, |
|||
block: null, |
|||
block_x: undefined, // container random position |
|||
block_y: undefined, |
|||
L: this.l + this.r * 2 + 3, // block real lenght |
|||
img: undefined, |
|||
originX: undefined, |
|||
originY: undefined, |
|||
isMouseDown: false, |
|||
trail: [], |
|||
sliderLeft: 0, // block right offset |
|||
sliderMaskWidth: 0, // mask width, |
|||
success: false, // Bug Fixes 修复了验证成功后还能滑动 |
|||
loadBlock: true, // Features 图片加载提示，防止图片没加载完就开始验证 |
|||
timestamp: null, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.initDom() |
|||
this.initImg() |
|||
this.bindEvents() |
|||
}, |
|||
initDom() { |
|||
this.block = this.$refs.block; |
|||
this.canvasCtx = this.$refs.canvas.getContext('2d') |
|||
this.blockCtx = this.block.getContext('2d') |
|||
}, |
|||
initImg() { |
|||
const img = this.createImg(() => { |
|||
// 图片加载完关闭遮蔽罩 |
|||
this.loadBlock = false; |
|||
this.drawBlock() |
|||
this.canvasCtx.drawImage(img, 0, 0, this.w, this.h) |
|||
this.blockCtx.drawImage(img, 0, 0, this.w, this.h) |
|||
let { |
|||
block_x: x, |
|||
block_y: y, |
|||
r, |
|||
L |
|||
} = this |
|||
let _y = y - r * 2 - 1 |
|||
let ImageData = this.blockCtx.getImageData(x, _y, L, L); |
|||
this.block.width = L; |
|||
this.blockCtx.putImageData(ImageData, 0, _y) |
|||
}); |
|||
this.img = img; |
|||
}, |
|||
drawBlock() { |
|||
this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10)) |
|||
this.block_y = this.getRandomNumberByRange(10 + this.r * 2, this.h - (this.L + 10)) |
|||
this.draw(this.canvasCtx, this.block_x, this.block_y, 'fill') |
|||
this.draw(this.blockCtx, this.block_x, this.block_y, 'clip') |
|||
}, |
|||
draw(ctx, x, y, operation) { |
|||
let { |
|||
l, |
|||
r |
|||
} = this; |
|||
ctx.beginPath() |
|||
ctx.moveTo(x, y) |
|||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI) |
|||
ctx.lineTo(x + l, y) |
|||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI) |
|||
ctx.lineTo(x + l, y + l) |
|||
ctx.lineTo(x, y + l) |
|||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true) |
|||
ctx.lineTo(x, y) |
|||
ctx.lineWidth = 2 |
|||
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)' |
|||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)' |
|||
ctx.stroke() |
|||
ctx[operation]() |
|||
// Bug Fixes 修复了火狐和ie显示问题 |
|||
ctx.globalCompositeOperation = "destination-over" |
|||
}, |
|||
createImg(onload) { |
|||
const img = document.createElement('img'); |
|||
img.crossOrigin = "Anonymous"; |
|||
img.onload = onload; |
|||
img.onerror = () => { |
|||
img.src = this.getRandomImg() |
|||
} |
|||
img.src = this.getRandomImg() |
|||
return img; |
|||
}, |
|||
// 随机生成img src |
|||
getRandomImg() { |
|||
// return require('../assets/img.jpg') |
|||
const len = this.imgs.length; |
|||
return len > 0 ? |
|||
this.imgs[this.getRandomNumberByRange(0, len)] : |
|||
'https://picsum.photos/300/150/?image=' + this.getRandomNumberByRange(0, 1084); |
|||
}, |
|||
getRandomNumberByRange(start, end) { |
|||
return Math.round(Math.random() * (end - start) + start) |
|||
}, |
|||
refresh() { |
|||
this.reset() |
|||
this.$emit('refresh') |
|||
}, |
|||
sliderDown(event) { |
|||
if (this.success) return; |
|||
this.originX = event.clientX; |
|||
this.originY = event.clientY; |
|||
this.isMouseDown = true; |
|||
this.timestamp = + new Date(); |
|||
}, |
|||
touchStartEvent(e) { |
|||
if (this.success) return; |
|||
this.originX = e.changedTouches[0].pageX; |
|||
this.originY = e.changedTouches[0].pageY; |
|||
this.isMouseDown = true; |
|||
this.timestamp = + new Date(); |
|||
}, |
|||
bindEvents() { |
|||
document.addEventListener('mousemove', (e) => { |
|||
if (!this.isMouseDown) return false; |
|||
const moveX = e.clientX - this.originX; |
|||
const moveY = e.clientY - this.originY; |
|||
if (moveX < 0 || moveX + 38 >= this.w) return false; |
|||
this.sliderLeft = moveX + 'px'; |
|||
let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX; |
|||
this.block.style.left = blockLeft + 'px'; |
|||
|
|||
this.containerActive = true; // add active |
|||
this.sliderMaskWidth = moveX + 'px'; |
|||
this.trail.push(moveY); |
|||
}); |
|||
document.addEventListener('mouseup', (e) => { |
|||
if (!this.isMouseDown) return false |
|||
this.isMouseDown = false |
|||
if (e.clientX === this.originX) return false; |
|||
this.containerActive = false; // remove active |
|||
this.timestamp = + new Date() - this.timestamp; |
|||
|
|||
const { |
|||
spliced, |
|||
TuringTest |
|||
} = this.verify(); |
|||
if (spliced) { |
|||
if(this.accuracy === -1) { |
|||
this.containerSuccess = true; |
|||
this.success = true; |
|||
this.$emit('success', this.timestamp); |
|||
return; |
|||
} |
|||
if (TuringTest) { |
|||
// succ |
|||
this.containerSuccess = true; |
|||
this.success = true; |
|||
this.$emit('success', this.timestamp) |
|||
} else { |
|||
this.containerFail = true; |
|||
this.$emit('again') |
|||
} |
|||
} else { |
|||
this.containerFail = true; |
|||
this.$emit('fail') |
|||
setTimeout(() => { |
|||
this.reset() |
|||
}, 1000) |
|||
} |
|||
}) |
|||
}, |
|||
touchMoveEvent(e) { |
|||
if (!this.isMouseDown) return false; |
|||
const moveX = e.changedTouches[0].pageX - this.originX; |
|||
const moveY = e.changedTouches[0].pageY - this.originY; |
|||
if (moveX < 0 || moveX + 38 >= this.w) return false; |
|||
this.sliderLeft = moveX + 'px'; |
|||
let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX; |
|||
this.block.style.left = blockLeft + 'px'; |
|||
|
|||
this.containerActive = true; |
|||
this.sliderMaskWidth = moveX + 'px'; |
|||
this.trail.push(moveY); |
|||
}, |
|||
touchEndEvent(e) { |
|||
if (!this.isMouseDown) return false |
|||
this.isMouseDown = false |
|||
if (e.changedTouches[0].pageX === this.originX) return false; |
|||
this.containerActive = false; |
|||
this.timestamp = + new Date() - this.timestamp; |
|||
|
|||
const { |
|||
spliced, |
|||
TuringTest |
|||
} = this.verify(); |
|||
if (spliced) { |
|||
if(this.accuracy === -1) { |
|||
this.containerSuccess = true; |
|||
this.success = true; |
|||
this.$emit('success', this.timestamp); |
|||
return; |
|||
} |
|||
if (TuringTest) { |
|||
// succ |
|||
this.containerSuccess = true; |
|||
this.success = true; |
|||
this.$emit('success', this.timestamp) |
|||
} else { |
|||
this.containerFail = true; |
|||
this.$emit('again') |
|||
} |
|||
} else { |
|||
this.containerFail = true; |
|||
this.$emit('fail') |
|||
setTimeout(() => { |
|||
this.reset() |
|||
}, 1000) |
|||
} |
|||
}, |
|||
verify() { |
|||
const arr = this.trail // drag y move distance |
|||
const average = arr.reduce(sum) / arr.length // average |
|||
const deviations = arr.map(x => x - average) // deviation array |
|||
const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // standard deviation |
|||
const left = parseInt(this.block.style.left) |
|||
const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy; |
|||
return { |
|||
spliced: Math.abs(left - this.block_x) <= accuracy, |
|||
TuringTest: average !== stddev, // equal => not person operate |
|||
} |
|||
}, |
|||
reset() { |
|||
this.success = false; |
|||
this.containerActive = false; |
|||
this.containerSuccess = false; |
|||
this.containerFail = false; |
|||
this.sliderLeft = 0; |
|||
this.block.style.left = 0; |
|||
this.sliderMaskWidth = 0; |
|||
// canvas |
|||
let { |
|||
w, |
|||
h |
|||
} = this; |
|||
this.canvasCtx.clearRect(0, 0, w, h) |
|||
this.blockCtx.clearRect(0, 0, w, h) |
|||
this.block.width = w |
|||
|
|||
// generate img |
|||
this.img.src = this.getRandomImg(); |
|||
this.$emit('fulfilled') |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.slide-verify { |
|||
position: relative; |
|||
} |
|||
|
|||
/* 图片加载样式 */ |
|||
.slider-verify-loading{ |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
z-index: 999; |
|||
animation: loading 1.5s infinite; |
|||
} |
|||
|
|||
@keyframes loading { |
|||
0%{ |
|||
opacity: .7; |
|||
} |
|||
100% { |
|||
opacity: 9; |
|||
} |
|||
} |
|||
|
|||
.slide-verify-block { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0 |
|||
} |
|||
|
|||
.slide-verify-refresh-icon { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 34px; |
|||
height: 34px; |
|||
cursor: pointer; |
|||
background: url("../../assets/images/login/icon_light.png") 0 -437px; |
|||
background-size: 34px 471px |
|||
} |
|||
|
|||
.slide-verify-slider { |
|||
position: relative; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
margin-top: 15px; |
|||
background: #f7f9fa; |
|||
color: #45494c; |
|||
border: 1px solid #e4e7eb |
|||
} |
|||
|
|||
.slide-verify-slider-mask { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 40px; |
|||
border: 0 solid #1991FA; |
|||
background: #D1E9FE |
|||
} |
|||
|
|||
.slide-verify-slider-mask-item { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
background: #fff; |
|||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); |
|||
cursor: pointer; |
|||
transition: background .2s linear |
|||
} |
|||
|
|||
.slide-verify-slider-mask-item:hover { |
|||
background: #1991FA |
|||
} |
|||
|
|||
.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon { |
|||
background-position: 0 -13px |
|||
} |
|||
|
|||
.slide-verify-slider-mask-item-icon { |
|||
position: absolute; |
|||
top: 15px; |
|||
left: 13px; |
|||
width: 14px; |
|||
height: 12px; |
|||
background: url("../../assets/images/login/icon_light.png") 0 -26px; |
|||
background-size: 34px 471px |
|||
} |
|||
.container-active .slide-verify-slider-mask-item { |
|||
height: 38px; |
|||
top: -1px; |
|||
border: 1px solid #1991FA; |
|||
} |
|||
|
|||
.container-active .slide-verify-slider-mask { |
|||
height: 38px; |
|||
border-width: 1px; |
|||
} |
|||
|
|||
.container-success .slide-verify-slider-mask-item { |
|||
height: 38px; |
|||
top: -1px; |
|||
border: 1px solid #52CCBA; |
|||
background-color: #52CCBA !important; |
|||
} |
|||
|
|||
.container-success .slide-verify-slider-mask { |
|||
height: 38px; |
|||
border: 1px solid #52CCBA; |
|||
background-color: #D2F4EF; |
|||
} |
|||
|
|||
.container-success .slide-verify-slider-mask-item-icon { |
|||
background-position: 0 0 !important; |
|||
} |
|||
|
|||
.container-fail .slide-verify-slider-mask-item { |
|||
height: 38px; |
|||
top: -1px; |
|||
border: 1px solid #f57a7a; |
|||
background-color: #f57a7a !important; |
|||
} |
|||
|
|||
.container-fail .slide-verify-slider-mask { |
|||
height: 38px; |
|||
border: 1px solid #f57a7a; |
|||
background-color: #fce1e1; |
|||
} |
|||
|
|||
.container-fail .slide-verify-slider-mask-item-icon { |
|||
top: 14px; |
|||
background-position: 0 -82px !important; |
|||
} |
|||
|
|||
.container-active .slide-verify-slider-text, |
|||
.container-success .slide-verify-slider-text, |
|||
.container-fail .slide-verify-slider-text { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="active-detail"> |
|||
<img src="@assets/images/active-img.png" alt="" /> |
|||
<span @click="toBookList">开始选书</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, onMounted, getCurrentInstance,toRefs } from 'vue' |
|||
|
|||
export default { |
|||
name:'ActiveDetail', |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
const data = reactive({ |
|||
}) |
|||
onMounted(async () => { |
|||
}) |
|||
let toBookList = () => { |
|||
proxy.$router.push({ path: '/BookList' }) |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
toBookList |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.active-detail{ |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
span{ |
|||
position: fixed; |
|||
bottom: .45rem; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
display: block; |
|||
width: 3.07rem; |
|||
height: .8rem; |
|||
line-height: .8rem; |
|||
font-size: .3rem; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
background: linear-gradient(135deg, #48FCD4 0%, #01FFB9 99%); |
|||
box-shadow: 0px 0px .16rem 0px #636EBA; |
|||
border-radius: .4rem; |
|||
} |
|||
// width: 100%; |
|||
// height: 100vh; |
|||
// background: url('@assets/images/active-img.png') no-repeat; |
|||
// background-size: cover; |
|||
} |
|||
</style> |
|||
@ -1,359 +0,0 @@ |
|||
<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> |
|||
|
After Width: 40 | Height: 40 | Size: 1.1 KiB |
|
Before Width: 200 | Height: 200 | Size: 6.7 KiB After Width: 40 | Height: 40 | Size: 1.1 KiB |
@ -1,222 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog title="图书详情" :visible.sync="dialogVisible" width="80%"> |
|||
<!-- :before-close="handleClose" --> |
|||
<div class="dialog-setting"> |
|||
<div v-if="bookData" class="book-details-box"> |
|||
<div class="book-details"> |
|||
<div class="book-cover"> |
|||
<img :src="bookData.srcUrl ? bookData.srcUrl : ''" :onerror="defaultImg" /> |
|||
</div> |
|||
<div class="book-desc"> |
|||
<h3>{{ bookData.bookName }}</h3> |
|||
<p class="book-from">作者：{{ bookData.bookAuthor }}</p> |
|||
<p v-if="bookData.Publish" class="book-from">出版社：{{ bookData.Publish }}</p> |
|||
<p class="book-brief"> 简介：{{ bookData.gist ? bookData.gist : '暂无简介' }}</p> |
|||
</div> |
|||
</div> |
|||
<div class="book-local"> |
|||
<!-- <span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span> --> |
|||
<!-- 待定：热门图书/新书推荐跳转到 场馆导航操作 --> |
|||
<!-- <span v-else>所在位置</span> --> |
|||
<div class="local-title"> |
|||
所在位置 |
|||
</div> |
|||
<ul class="local-list"> |
|||
<li v-if="!bookData.places[0]?.shelfName" class="local-none"> |
|||
<!-- <svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-weizhi" /> |
|||
</svg> --> |
|||
<span>当前图书暂未查到位置信息</span> |
|||
</li> |
|||
<!-- --> |
|||
<li v-for="(item,index) in bookData.places" v-else :key="index" class="local-list-info" @click="toBookNav(index)"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-weizhi" /> |
|||
</svg> |
|||
<span>{{ item.shelfName }}</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'BookDetails', |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
bookData: null, |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"' |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
toBookNav(index) { |
|||
const linkSrc = process.env.VUE_APP_BASE_API |
|||
window.location.href = linkSrc + '/anchoring/goNavigation.do?libcode=' + this.libcode + '&barcode=' + this.bookData.places[index].barcode |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog { |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
border-radius: 24px; |
|||
margin-top: 0 !important; |
|||
.el-dialog__body { |
|||
padding: 0 40px 40px 40px; |
|||
} |
|||
} |
|||
::v-deep .el-dialog__header { |
|||
text-align: center; |
|||
padding-top: 0; |
|||
padding-bottom: 4px; |
|||
.el-dialog__title { |
|||
display: inline-block; |
|||
font-family: "ZhenyanGB"; |
|||
font-size: 40px; |
|||
width: 494px; |
|||
height: 76px; |
|||
line-height: 76px; |
|||
background: url("~@/assets/images/list/list-title.png") no-repeat 0 0; |
|||
} |
|||
} |
|||
::v-deep .el-dialog__headerbtn { |
|||
background-color: #3f92f6; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
.el-dialog__close { |
|||
color: #fff; |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
.book-details-box { |
|||
.book-details { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30px 0; |
|||
.book-cover { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 318px; |
|||
height: 382px; |
|||
margin-right: 40px; |
|||
overflow: hidden; |
|||
img { |
|||
display: block; |
|||
width: 100%; |
|||
max-height: calc(100%); |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
.book-desc { |
|||
flex: 1; |
|||
color: #333; |
|||
overflow: hidden; |
|||
h3 { |
|||
font-size: 40px; |
|||
font-weight: normal; |
|||
} |
|||
.book-from { |
|||
width: 100%; |
|||
font-size: 30px; |
|||
} |
|||
h3, |
|||
.book-from { |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
margin-bottom: 20px; |
|||
} |
|||
.book-brief { |
|||
font-size: 24px; |
|||
margin-bottom: 20px; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 4; |
|||
line-clamp: 4; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
} |
|||
} |
|||
.book-local { |
|||
height: 343px; |
|||
color: #333; |
|||
display: flex; |
|||
// border-radius: 52px; |
|||
// line-height: 64px; |
|||
// text-align: center; |
|||
// font-size: 30px; |
|||
// overflow: hidden; |
|||
// white-space: nowrap; |
|||
// text-overflow: ellipsis; |
|||
.local-title { |
|||
width: 83px; |
|||
height: 100%; |
|||
background: url("~@/assets/images/local-bg.png") no-repeat; |
|||
writing-mode: vertical-rl; |
|||
text-align: center; |
|||
line-height: 83px; |
|||
font-size: 30px; |
|||
color: #fff; |
|||
} |
|||
.local-list { |
|||
flex: 1; |
|||
border: 1px solid #3f92f6; |
|||
border-left: none; |
|||
background: #d0e0f9; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
position: relative; |
|||
font-size: 26px; |
|||
.local-list-info { |
|||
height: 56px; |
|||
line-height: 56px; |
|||
background-color: #fff; |
|||
// margin-right: 8px; |
|||
margin-bottom: 15px; |
|||
padding-left: 13px; |
|||
span { |
|||
margin-left: 19px; |
|||
} |
|||
} |
|||
.local-none { |
|||
width: 100%; |
|||
text-align: center; |
|||
position: absolute; |
|||
// left: 50%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
/**滚动条的宽度*/ |
|||
::-webkit-scrollbar { |
|||
width: 8px; |
|||
height: 4px; |
|||
} |
|||
|
|||
//滚动条的滑块 |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: #3f92f6; |
|||
border-radius: 4px; |
|||
} |
|||
</style> |
|||
@ -1,134 +0,0 @@ |
|||
<template> |
|||
<div v-loading.fullscreen.lock="bookLoading" class="hotbook-box" @scroll="lazyLoading"> |
|||
<div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)"> |
|||
<div class="most-book-img"> |
|||
<img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg" /> |
|||
</div> |
|||
<div class="most-book-txt book-rack"> |
|||
<div class="txt"> |
|||
<h3>书名：{{ bookData[0].nbName || bookData[0].hbName }}</h3> |
|||
<p>作者：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p> |
|||
<p>出版社：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p> |
|||
<p>出版时间：{{ bookData[0].nbPublisherdate || bookData[0].hbPublisherdate }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<ul class="hotbook-list"> |
|||
<li v-for="(item,index) in bookList" :key="index" @click="handleDetails(index+1)"> |
|||
<div class="other-list-img"> |
|||
<img :src="item.cover ? item.cover : ''" :onerror="defaultImg" /> |
|||
</div> |
|||
<p class="book-name">{{ item.nbName || item.hbName }}</p> |
|||
</li> |
|||
</ul> |
|||
<BookDetails ref="detailDom" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BookDetails from './bookDetails.vue' |
|||
import { bookListCrud } from '../mixins/booklist.js' |
|||
export default { |
|||
name: 'BookList', |
|||
components: { BookDetails }, |
|||
mixins: [bookListCrud], |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBookData() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.hotbook-box{ |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
height: calc(100vh - 210px); |
|||
} |
|||
.book-rack{ |
|||
margin: 160px 40px 28px 40px; |
|||
padding: 38px 40px 40px 400px; |
|||
height: 272px; |
|||
} |
|||
.most-book{ |
|||
position: relative; |
|||
.most-book-img{ |
|||
position: absolute; |
|||
left: 90px; |
|||
bottom: 20px; |
|||
width: 318px; |
|||
height: 382px; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
vertical-align: middle; |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
.txt{ |
|||
// margin-left: 452px; |
|||
color: #333; |
|||
h3{ |
|||
font-size: 40px; |
|||
font-weight: normal; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
p{ |
|||
font-size: 30px; |
|||
margin-top: 8px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
.hotbook-list{ |
|||
margin: 0 40px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
// justify-content: space-between; |
|||
li{ |
|||
margin-bottom: 20px; |
|||
margin-left: 20px; |
|||
width: 300px; |
|||
overflow: hidden; |
|||
.other-list-img{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 360px; |
|||
overflow: hidden; |
|||
} |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
max-height: calc(100%); |
|||
vertical-align: middle; |
|||
object-fit: contain; |
|||
} |
|||
.book-name{ |
|||
width: 100%; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
& li:nth-child(3n+1){ |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,51 +0,0 @@ |
|||
<template> |
|||
<div class="header-time"> |
|||
<div class="header-text header-date">{{ nowDate }}</div> |
|||
<span class="icon iconfont"></span> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getCurrentTime } from '@/utils/index' |
|||
|
|||
export default { |
|||
name: 'HeaderTop', |
|||
data() { |
|||
return { |
|||
nowDate: '' |
|||
} |
|||
}, |
|||
created() { |
|||
this.timer = setInterval(() => { |
|||
this.nowDate = getCurrentTime() |
|||
}, 1000) |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.header-time{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background-color: #3F92F6; |
|||
width: 100%; |
|||
height: 60px; |
|||
line-height: 60px; |
|||
font-size: 30px; |
|||
color: #fff; |
|||
padding: 0 40px; |
|||
span{ |
|||
width: 35px; |
|||
height: 45px; |
|||
font-size: 30px; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,97 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]"> |
|||
<div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)"> |
|||
<div class="book-img"> |
|||
<img :src="item.cover" :onerror="defaultImg" /> |
|||
</div> |
|||
<div class="book-info"> |
|||
<h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4> |
|||
<p class="book-author">{{ item.nbAuthor }}</p> |
|||
<div v-if="!isNewBook" class="book-num"> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-remen" /> |
|||
</svg> |
|||
<p>{{ item.num }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<BookDetails ref="detailDom" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getBookDetailsByISBN } from '@/api/bookshelf' |
|||
import BookDetails from './bookDetails.vue' |
|||
|
|||
export default { |
|||
name: 'BookListItem', |
|||
components: { BookDetails }, |
|||
props: { |
|||
listData: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
isOtherBook: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
isNewBook: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"' |
|||
} |
|||
}, |
|||
watch: { |
|||
listData: function(newValue, oldValue) { |
|||
}, |
|||
isOtherBook: function(newValue, oldValue) { |
|||
}, |
|||
isNewBook: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
handleDetails(index) { |
|||
const params = { |
|||
isbn: this.listData[index].isbn.replace(/\-/g, '') |
|||
} |
|||
getBookDetailsByISBN(params).then(res => { |
|||
this.$refs.detailDom.dialogVisible = true |
|||
if (res) { |
|||
this.$refs.detailDom.bookData = res |
|||
} else { |
|||
this.$refs.detailDom.bookData = { |
|||
srcUrl: this.listData[index].cover, |
|||
bookName: this.listData[index].nbName, |
|||
bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息', |
|||
gist: '暂无简介', |
|||
Publish: '暂无信息', |
|||
places: [ |
|||
{ shelfName: '' } |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue