14 changed files with 2493 additions and 443 deletions
-
44api/activity.js
-
14pages.json
-
2pages/home/home.vue
-
707pages/home/home2.vue
-
13pages/user/user.vue
-
BINstatic/images/menu-hd.png
-
513subpkg/pages/activity-detail/activity-detail.vue
-
398subpkg/pages/activity-list/activity-list.vue
-
484subpkg/pages/activity-record/activity-record.vue
-
30subpkg/pages/booking-record/booking-record.vue
-
241subpkg/pages/seat-booking/seat-booking copy.vue
-
451subpkg/pages/seat-booking/seat-booking.vue
-
4utils/config.js
-
35utils/request.js
@ -0,0 +1,44 @@ |
|||
import request from '../utils/request'; |
|||
|
|||
// 活动列表
|
|||
export function FetchActivityInfo(data) { |
|||
return request({ |
|||
url: '/api/weixin/initActivityInfo', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 报名活动
|
|||
export function FetchSignActivity(data) { |
|||
return request({ |
|||
url: '/api/weixin/signActivity', |
|||
method: 'POST', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 我的报名活动列表
|
|||
export function FetchMySignActivityInfo(data) { |
|||
return request({ |
|||
url: '/api/weixin/mySignActivityInfo', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 取消报名
|
|||
export function FetchCancelSignActivity(data) { |
|||
return request({ |
|||
url: '/api/weixin/cancelSignActivity', |
|||
method: 'POST', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 删除自己报名的活动
|
|||
export function FetchDeleteSignActivity(data) { |
|||
return request({ |
|||
url: '/api/weixin/deleteSignActivity', |
|||
method: 'POST', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,707 @@ |
|||
<template> |
|||
<view style="padding-bottom: 20px;"> |
|||
<view class="top-bar"> |
|||
<uni-icons class="erweima-top" custom-prefix="iconfont" type="icon-erweima" size="22" color="#fff" @click="showTopImgPopup"></uni-icons> |
|||
<image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image> |
|||
<view class="library-info"> |
|||
<image class="avatar" src="@/static/images/logo.jpg" mode="aspectFill"></image> |
|||
<view class="library-name">葛店经济技术开发区图书馆</view> |
|||
</view> |
|||
<uni-icons class="search-icon" type="search" size="24" @click="onToSearch"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="status-cards"> |
|||
<view class="status-card" @click="toBorrowPage(0)"> |
|||
<view class="status-icon icon-color1" > |
|||
<uni-icons custom-prefix="iconfont" type="icon-daiban02" size="22"></uni-icons> |
|||
</view> |
|||
<view class="status-label">在借中</view> |
|||
</view> |
|||
<view class="status-card" @click="toBorrowPage(1)"> |
|||
<view class="status-icon icon-color4" > |
|||
<uni-icons custom-prefix="iconfont" type="icon-a-zhidu4" size="22"></uni-icons> |
|||
</view> |
|||
<view class="status-label">历史借阅</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<swiper class="banner-swiper" interval="3000" circular :vertical="false" :indicator-dots="true" :autoplay="true"> |
|||
<swiper-item> |
|||
<image data-post-id="3" src="https://mmbiz.qpic.cn/mmbiz_jpg/bVyA57fUOMicbQqItawJwQlR2oCoYql1icEbuH45ibSAzZsk2T3aDbUOIdMyOOc2CzkYouok0El5u5U3LONACaeNw/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=1"></image> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<image data-post-id="4" src="https://mmbiz.qpic.cn/sz_mmbiz_gif/tuyGibvSXrsqqiaNpAFJ7lbfGL5vibHtUdV5SUk1RWnlq3QqDe9liaWhdS91L0orEsFxZMiaHOFxDOzINmkiby24fYmmWstiayUgywfVia1pwMcNpBA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=3"></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<swiper class="menu-swiper" interval="6000" :vertical="false" :autoplay="false"> |
|||
<swiper-item> |
|||
<view class="menu-grid"> |
|||
<view class="menu-item" @click="onToSearch"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-ziyuan" size="22"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">书目检索</view> |
|||
</view> |
|||
<view class="menu-item" @click="onToLendCar"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-z_renew_normal" size="24"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">图书续借</view> |
|||
</view> |
|||
<view class="menu-item" @click="toLibraryCard"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-duzhezheng" size="26"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">电子证</view> |
|||
</view> |
|||
<view class="menu-item" @click="toRanking"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-paihangbang" size="22"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">借阅排行</view> |
|||
</view> |
|||
<view class="menu-item" @click="toActivityList"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-remenhuodong" size="26"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">活动报名</view> |
|||
</view> |
|||
<view class="menu-item" @click="toFeedback"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-ruguanyuyue" size="26"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">预约入馆</view> |
|||
</view> |
|||
<view class="menu-item" @click="onToUser"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-yonghuxinxi-gerenxinxi" size="20"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">个人中心</view> |
|||
</view> |
|||
<view class="menu-item" @click="goRegister"> |
|||
<view class="menu-icon"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-daohang-banzhengxuzhi" size="25"></uni-icons> |
|||
</view> |
|||
<view class="menu-label">在线办证</view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view v-if="isBindLibraryCard" class="library-card-has"> |
|||
<view class="section-title">我的借阅证</view> |
|||
|
|||
<swiper |
|||
class="card-swiper" |
|||
:circular="false" |
|||
> |
|||
<swiper-item v-for="item in readerCardList" :key="item.id"> |
|||
<view class="card-item" @click.stop="showQrcode(item.bindValue)"> |
|||
<image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" /> |
|||
<view class="card-right-info"> |
|||
<text class="info-title">读者证号</text> |
|||
<text class="info-num">{{ formatCardNo(item.bindValue) }}</text> |
|||
</view> |
|||
<view class="default-tag" v-if="item.bindDefault">默认证</view> |
|||
<uni-icons class="erweima-style" custom-prefix="iconfont" type="icon-erweima" size="28"></uni-icons> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
|
|||
<view class="library-card-section" @click="toCheckLogin" v-else> |
|||
<view class="section-title">借阅证</view> |
|||
<image class="card-icon" src="@/static/images/card-img2.png"></image> |
|||
<view class="card-tip">您还没有绑定读者证哦～</view> |
|||
<button class="bind-btn">立即绑定</button> |
|||
</view> |
|||
|
|||
<root-portal> |
|||
<uni-popup |
|||
ref="popup" |
|||
type="center" |
|||
:mask-click="true" |
|||
@maskClick="closeAllPopup" |
|||
> |
|||
<view class="qrcode-popup"> |
|||
<view class="qrcode-title">读者证二维码</view> |
|||
<w-qrcode |
|||
v-if="qrcodeText" |
|||
:value="qrcodeText" |
|||
:size="160" |
|||
foreground="#333" |
|||
background="#ffffff" |
|||
/> |
|||
<view class="qrcode-num" v-if="qrcodeText">{{ qrcodeText }}</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-popup |
|||
ref="erweimapopup" |
|||
type="center" |
|||
:mask-click="true" |
|||
@maskClick="closeErweiPopup" |
|||
:custom-style="popupFixedStyle" |
|||
> |
|||
<view class="qrcode-popup" style="width: auto !important;"> |
|||
<image |
|||
v-if="wecharQRCode" |
|||
:src="wecharQRCode" |
|||
style="width:200px;height:200px;" |
|||
mode="aspectFit" |
|||
:show-menu-by-longpress="true" |
|||
@longpress="onQRCodeLongPress" |
|||
></image> |
|||
</view> |
|||
</uni-popup> |
|||
</root-portal> |
|||
|
|||
|
|||
<view class="recommendation-section"> |
|||
<view class="section-title"> |
|||
<text class="left-txt">图书推荐</text> |
|||
<view class="more-link" @click="getMoreBoook" v-if="!(recommendedBooks.length === 0 && !isLoading)"> |
|||
<text style="margin-right: 5px;">查看更多</text> |
|||
<uni-icons custom-prefix="iconfont" type="icon-gengduo" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="recommendation-list"> |
|||
<uni-load-more status="loading" v-if="isLoading"></uni-load-more> |
|||
|
|||
<view v-else class="book-item" v-for="(item,index) in recommendedBooks.slice(0,3)" @click="goToBookDetail(item)" :key="index" > |
|||
<image |
|||
class="book-cover" |
|||
:src="item.coverUrl || '/static/images/default-book.png'" |
|||
@error="onImgError" |
|||
></image> |
|||
<view class="book-title">{{item.name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="empty" v-if="recommendedBooks.length === 0 && !isLoading"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons> |
|||
<text style="margin-top: 20px;">暂无推荐书籍~</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitScreenSetting, FetchOpenId, FetchFindAllReaderBindByOpenId} from '@/api/user'; |
|||
import { FetchInitScreenBookRecommend } from '@/api/book'; |
|||
import config from '@/utils/config'; |
|||
import { STORAGE_KEYS } from '@/utils/storage'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
isLoading: true, |
|||
recommendedBooks: [], |
|||
userInfo: {}, |
|||
isBindLibraryCard: false, |
|||
readerCardList: [], |
|||
baseUrl: config.baseUrl, |
|||
qrcodeText: '', |
|||
popupFixedStyle: 'position:fixed;top:0;left:0;right:0;bottom:0;', |
|||
wecharQRCode: null |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getRecommendBooks(); |
|||
this.getScreenSetting() |
|||
}, |
|||
onShow() { |
|||
this.initUserAndCheckBind(); |
|||
}, |
|||
methods:{ |
|||
async getScreenSetting() { |
|||
const res = await FetchInitScreenSetting({ libcode: config.LIB_CODE }); |
|||
if (res.data.wechar_qr_code && res.data.wechar_qr_code.context) { |
|||
// 直接使用图片url，不再转base64 |
|||
this.wecharQRCode = this.baseUrl + '/api/fileRelevant/getImg?imgType=1&imgId=' + res.data.wechar_qr_code.context; |
|||
} else { |
|||
this.wecharQRCode = null; |
|||
} |
|||
}, |
|||
showTopImgPopup() { |
|||
if (!this.wecharQRCode) { |
|||
uni.showToast({ title: '暂无图片', icon: 'none' }) |
|||
return |
|||
} |
|||
this.$refs.erweimapopup.open() |
|||
}, |
|||
|
|||
formatCardNo(cardNo) { |
|||
if (!cardNo) return ''; |
|||
const str = String(cardNo); |
|||
const len = str.length; |
|||
|
|||
if (len > 8) { |
|||
const front = str.substring(0, 2); |
|||
const end = str.substring(len - 2); |
|||
const star = '*'.repeat(len - 4); |
|||
return front + star + end; |
|||
} else { |
|||
return '***' + str.substring(len - 2); |
|||
} |
|||
}, |
|||
onImgError(e) { |
|||
// 图片加载失败，替换默认图 |
|||
e.target.src = "/static/images/default-book.png"; |
|||
}, |
|||
async initUserAndCheckBind() { |
|||
try { |
|||
let openId = uni.getStorageSync('wx_login_code'); |
|||
|
|||
if (!openId) { |
|||
const loginRes = await new Promise((resolve, reject) => { |
|||
uni.login({ |
|||
success: resolve, |
|||
fail: reject |
|||
}); |
|||
}); |
|||
|
|||
if (!loginRes.code) { |
|||
uni.showToast({ title: '授权失败', icon: 'none' }); |
|||
return; |
|||
} |
|||
|
|||
const openRes = await FetchOpenId({ |
|||
libcode: config.LIB_CODE, |
|||
code: loginRes.code |
|||
}); |
|||
|
|||
if (openRes.code !== 200 || !openRes.data) { |
|||
return; |
|||
} |
|||
|
|||
openId = openRes.data; |
|||
uni.setStorageSync('wx_login_code', openId); |
|||
} |
|||
|
|||
const res = await FetchFindAllReaderBindByOpenId({ |
|||
libcode: config.LIB_CODE, |
|||
openId: openId |
|||
}); |
|||
|
|||
if (res.code === 200 && res.data.length > 0) { |
|||
this.isBindLibraryCard = true; |
|||
const defaultCard = res.data.find(item => item.bindDefault === true); |
|||
const otherCards = res.data.filter(item => !item.bindDefault); |
|||
this.readerCardList = defaultCard ? [defaultCard, ...otherCards] : res.data; |
|||
|
|||
uni.setStorageSync(STORAGE_KEYS.READER_CARD_LIST, this.readerCardList); |
|||
uni.setStorageSync(STORAGE_KEYS.CURRENT_READER_CARD, defaultCard); |
|||
} else { |
|||
this.isBindLibraryCard = false; |
|||
this.readerCardList = []; |
|||
uni.setStorageSync(STORAGE_KEYS.READER_CARD_LIST, []); |
|||
uni.setStorageSync(STORAGE_KEYS.CURRENT_READER_CARD, null); |
|||
} |
|||
|
|||
} catch (err) { |
|||
console.error('初始化失败：', err); |
|||
const list = uni.getStorageSync(STORAGE_KEYS.READER_CARD_LIST) || []; |
|||
const defaultCard = list.find(item => item.bindDefault === true); |
|||
const otherCards = list.filter(item => !item.bindDefault); |
|||
this.readerCardList = defaultCard ? [defaultCard, ...otherCards] : list; |
|||
|
|||
this.isBindLibraryCard = list.length > 0; |
|||
} |
|||
}, |
|||
async getRecommendBooks() { |
|||
try { |
|||
const res = await FetchInitScreenBookRecommend({ libcode: config.LIB_CODE }); |
|||
let books = res.data || []; |
|||
const limit = 3; |
|||
const displayBooks = books.slice(0, limit); |
|||
|
|||
// 不再请求下载图片，直接拼接url |
|||
for (let i = 0; i < displayBooks.length; i++) { |
|||
let item = displayBooks[i]; |
|||
if (item.imgPath) { |
|||
item.coverUrl = this.baseUrl + '/api/fileRelevant/getImg?imgType=2&imgId=' + item.imgPath; |
|||
} else { |
|||
item.coverUrl = ''; |
|||
} |
|||
} |
|||
|
|||
this.recommendedBooks = displayBooks; |
|||
this.isLoading = false; |
|||
} catch (err) { |
|||
console.error('获取图书推荐失败：', err); |
|||
this.isLoading = false; |
|||
} |
|||
}, |
|||
goToBookDetail(item) { |
|||
uni.navigateTo({ |
|||
url: "/subpkg/pages/book-detail/book-detail?bookData=" + encodeURIComponent(JSON.stringify(item)) + "&fromRecommend=true" |
|||
}) |
|||
}, |
|||
|
|||
getMoreBoook(){ |
|||
uni.navigateTo({ |
|||
url: "/subpkg/pages/book-list/book-list" |
|||
}) |
|||
}, |
|||
onToSearch() { |
|||
uni.switchTab({ |
|||
url: "/pages/search/search" |
|||
}); |
|||
}, |
|||
onToLendCar() { |
|||
this.checkBindAndNavigate("/pages/lendCar/lendCar", "请您绑定读者证", true); |
|||
}, |
|||
toCheckLogin() { |
|||
uni.navigateTo({ |
|||
url: "/pages/login/login" |
|||
}); |
|||
}, |
|||
toRanking(){ |
|||
uni.navigateTo({ |
|||
url: "/subpkg/pages/ranking/ranking" |
|||
}) |
|||
}, |
|||
toActivityList(){ |
|||
this.checkBindAndNavigate("/subpkg/pages/activity-list/activity-list", "请您绑定读者证"); |
|||
}, |
|||
toBorrowPage(index) { |
|||
if (this.isBindLibraryCard) { |
|||
uni.setStorageSync('switch_tab_index', index); |
|||
uni.navigateTo({ |
|||
url: '/subpkg/pages/myLending/myLending' |
|||
}); |
|||
} else { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '请您绑定读者证', |
|||
confirmText: '去绑定', |
|||
cancelText: '取消', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.navigateTo({ url: "/pages/login/login" }); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
toBorrowCar() { |
|||
uni.switchTab({ |
|||
url: '/pages/lendCar/lendCar' |
|||
}); |
|||
}, |
|||
toFeedback() { |
|||
uni.navigateTo({ |
|||
url: '/subpkg/pages/seat-booking/seat-booking' |
|||
}); |
|||
}, |
|||
toLibraryCard() { |
|||
if (this.isBindLibraryCard) { |
|||
uni.navigateTo({ url: '/subpkg/pages/reader-card/reader-card' }); |
|||
} |
|||
else { |
|||
uni.navigateTo({ url: "/pages/login/login" }); |
|||
} |
|||
}, |
|||
onToUser() { |
|||
this.checkBindAndNavigate("/pages/user/user", "请您绑定读者证", true); |
|||
}, |
|||
checkBindAndNavigate(url, message, isSwitchTab = false) { |
|||
if (this.isBindLibraryCard) { |
|||
if (isSwitchTab) { |
|||
uni.switchTab({ url }); |
|||
} else { |
|||
uni.navigateTo({ url }); |
|||
} |
|||
} else { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: message, |
|||
confirmText: '去绑定', |
|||
cancelText: '取消', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.navigateTo({ url: "/pages/login/login" }); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
showQrcode(bindValue) { |
|||
this.qrcodeText = bindValue; |
|||
this.$refs.popup.open(); |
|||
}, |
|||
closeAllPopup() { |
|||
this.qrcodeText = ''; |
|||
this.$refs.popup.close(); |
|||
}, |
|||
closeErweiPopup() { |
|||
this.$refs.erweimapopup.close() |
|||
}, |
|||
onQRCodeLongPress() { |
|||
}, |
|||
// 【已废弃】不再使用urlToBase64 |
|||
goRegister() { |
|||
uni.navigateTo({ |
|||
url: '/pages/register/register' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.top-bar{ |
|||
.erweima-top{ |
|||
position: absolute; |
|||
left: 16px; |
|||
top: 15px; |
|||
z-index: 999; |
|||
} |
|||
.search-icon{ |
|||
position: absolute; |
|||
right: 16px; |
|||
top: 15px; |
|||
z-index: 22; |
|||
::v-deep .uni-icons{ |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.status-cards { |
|||
display: flex; |
|||
background-color: #fff; |
|||
margin: 10px; |
|||
border-radius: 8px; |
|||
padding: 20px 10px; |
|||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); |
|||
.status-card { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
.status-icon { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-bottom: 6px; |
|||
border-radius: 50%; |
|||
} |
|||
.icon-color1{ |
|||
background-color: #e4f2ff; |
|||
} |
|||
.icon-color2{ |
|||
background-color: #ffeff0; |
|||
} |
|||
.icon-color3{ |
|||
background-color: #e4fff4; |
|||
} |
|||
.icon-color4{ |
|||
background-color: #fef8e2; |
|||
} |
|||
.status-label { |
|||
font-size: 12px; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
swiper.banner-swiper{ |
|||
width: 100%; |
|||
height: 130px; |
|||
} |
|||
swiper.banner-swiper image{ |
|||
width: 100%; |
|||
height: 130px; |
|||
} |
|||
swiper.menu-swiper{ |
|||
width:100%; |
|||
margin-top: 10px; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.menu-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
.menu-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 10px 0; |
|||
.menu-icon{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
height: 30px; |
|||
::v-deep .uni-icons{ |
|||
color: #01a4fe !important; |
|||
} |
|||
} |
|||
.menu-label { |
|||
font-size: 12px; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.library-card-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
padding: 20px 0; |
|||
.section-title { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
background: linear-gradient(140deg, #01a4ff, #2ec8fe); |
|||
-webkit-background-clip: text; |
|||
color: transparent; |
|||
letter-spacing: 0.1em; |
|||
margin-bottom: 5px; |
|||
} |
|||
.card-icon { |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
.card-tip { |
|||
font-size: 12px; |
|||
color: #999; |
|||
margin: 5px 0; |
|||
} |
|||
.bind-btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 1px solid #06a8ff ; |
|||
width: 128px !important; |
|||
height: 28px; |
|||
border-radius: 28px; |
|||
background: linear-gradient(140deg, #01a4ff, #2ec8fe); |
|||
font-size: 14px; |
|||
color: #fff; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
|
|||
.recommendation-section { |
|||
background-color: #fff; |
|||
margin: 10px; |
|||
border-radius: 8px; |
|||
padding: 0 0 10px 0; |
|||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); |
|||
.section-title{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 40px; |
|||
padding: 0 10px; |
|||
.left-txt{ |
|||
color: #343434; |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
} |
|||
.more-link{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
color: #999; |
|||
font-size: 11px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.library-card-has { |
|||
width: 100%; |
|||
padding: 20px 10px; |
|||
box-sizing: border-box; |
|||
|
|||
.section-title { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
background: linear-gradient(140deg, #01a4ff, #2ec8fe); |
|||
-webkit-background-clip: text; |
|||
color: transparent; |
|||
letter-spacing: 0.1em; |
|||
margin-bottom: 10px; |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.card-list { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.card-swiper { |
|||
height: 106px; |
|||
.card-item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10px; |
|||
border: 2px solid #C6C6E2; |
|||
border-radius: 8px; |
|||
background: rgba(241,241,249,0.4); |
|||
cursor: pointer; |
|||
|
|||
&.active{ |
|||
border-color: #01a4fe; |
|||
background: rgba(1, 164, 254, 0.1); |
|||
} |
|||
|
|||
.card-left-img{ |
|||
width: 80px; |
|||
margin-right: 12px; |
|||
display: block; |
|||
} |
|||
|
|||
.card-right-info{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.info-title{ |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-bottom: 12px; |
|||
} |
|||
|
|||
.info-num{ |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.default-tag { |
|||
position: absolute; |
|||
right: 12px; |
|||
top: 12px; |
|||
font-size: 11px; |
|||
color: #01a4fe; |
|||
border: 1px solid #01a4fe; |
|||
border-radius: 4px; |
|||
padding: 2px 6px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.erweima-style{ |
|||
position: absolute; |
|||
right: 12px; |
|||
bottom: 22px; |
|||
::v-deep .icon-erweima{ |
|||
color: #999 !important; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 128 | Height: 128 | Size: 16 KiB |
@ -0,0 +1,484 @@ |
|||
<template> |
|||
<view class="activity-list"> |
|||
<!-- tab栏 --> |
|||
<view class="tab-box"> |
|||
<view |
|||
class="tab-item" |
|||
v-for="(tab,idx) in tabList" |
|||
:key="idx" |
|||
:class="{active:activeTab === idx}" |
|||
@click="switchTab(idx)" |
|||
> |
|||
{{tab.label}} |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view |
|||
scroll-y |
|||
@scrolltolower="onScrollLower" |
|||
lower-threshold="150" |
|||
class="scroll-view" |
|||
> |
|||
<view v-if="loading" class="loading-box"> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 左滑组件 uni-swipe-action --> |
|||
<!-- :disabled="!(item.status === '未开始' && !item.isCancel)" --> |
|||
<uni-swipe-action> |
|||
<uni-swipe-action-item |
|||
v-for="item in activityList" |
|||
:key="item.signId" |
|||
> |
|||
<!-- 左侧主体内容 --> |
|||
<view class="activity-item" @click="toActivityDetail(item)"> |
|||
<view class="activity-info"> |
|||
<view class="title-row"> |
|||
<text class="title">{{ item.title }}</text> |
|||
<text class="status-tag" :class="getStatusClass(item.status)"> |
|||
{{ item.status }} |
|||
</text> |
|||
</view> |
|||
<view class="item-info"> |
|||
<text class="label">开始时间</text> |
|||
<text class="value">{{ formatTime(item.start_time) }}</text> |
|||
</view> |
|||
<view class="item-info"> |
|||
<text class="label">结束时间</text> |
|||
<text class="value">{{ formatTime(item.end_time) }}</text> |
|||
</view> |
|||
<view class="item-info"> |
|||
<text class="label">预约人</text> |
|||
<text class="value">{{ item.signName }}</text> |
|||
</view> |
|||
<view class="item-info"> |
|||
<text class="label">参加人数</text> |
|||
<text class="value">{{ item.signNum }}</text> |
|||
</view> |
|||
<!-- 未开始 && 未取消预约 才显示取消预约按钮 --> |
|||
<view class="btn-box" v-if="item.status === '未开始' && !item.isCancel"> |
|||
<button class="activity-btn" type="primary" @click.stop="cancelAppoint(item)"> 取消预约 </button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 右滑出来的按钮插槽 --> |
|||
<!-- v-if="!(item.status === '未开始' && !item.isCancel)" --> |
|||
<!-- v-if="item.status !== '进行中'" --> |
|||
<template #right > |
|||
<view class="swipe-right-wrap"> |
|||
<view class="swipe-btn swipe-btn-delete" @click.stop="deleteSignActivity(item)"> |
|||
<uni-icons type="trash" size="24"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</uni-swipe-action-item> |
|||
</uni-swipe-action> |
|||
|
|||
<!-- 非loading，有数据，是最后一页，哪怕仅1条也展示没有更多 --> |
|||
<view v-if="!loading && noMore && activityList.length > 0" class="nomore-box"> |
|||
<text class="nomore-text">没有更多数据了</text> |
|||
</view> |
|||
|
|||
<view class="empty-box" v-if="!loading && activityList.length === 0"> |
|||
<uni-icons type="empty" size="80" color="#ccc"></uni-icons> |
|||
<text class="empty-text">暂无预约活动~</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import config from '@/utils/config'; |
|||
import { FetchSessionKey } from '@/api/user.js'; |
|||
import { FetchMySignActivityInfo, FetchCancelSignActivity,FetchDeleteSignActivity } from '@/api/activity.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
tabList:[ |
|||
{label:'全部',value:null}, |
|||
{label:'预约成功',value:false}, |
|||
{label:'已取消',value:true} |
|||
], |
|||
activeTab:0, |
|||
activityList: [], |
|||
refreshing: false, |
|||
loading: false, |
|||
noMore: false, |
|||
page: 0, |
|||
pageSize: 20, |
|||
sessionKey: '', |
|||
openid: '' |
|||
}; |
|||
}, |
|||
async onLoad() { |
|||
await this.getSessionKey(); |
|||
this.getActivityList(true); |
|||
|
|||
uni.$on('refreshMySignList',()=>{ |
|||
this.getActivityList(true) |
|||
}) |
|||
}, |
|||
onUnload(){ |
|||
uni.$off('refreshMySignList') |
|||
}, |
|||
onPullDownRefresh() { |
|||
if(this.loading){ |
|||
uni.stopPullDownRefresh() |
|||
return |
|||
} |
|||
this.getActivityList(true).finally(()=>{ |
|||
uni.stopPullDownRefresh() |
|||
}) |
|||
}, |
|||
methods: { |
|||
switchTab(index){ |
|||
this.activeTab = index |
|||
this.page = 0 |
|||
this.noMore = false |
|||
this.activityList = [] |
|||
this.getActivityList(true) |
|||
}, |
|||
|
|||
formatTime(timestamp) { |
|||
if (!timestamp) return ''; |
|||
const date = new Date(timestamp); |
|||
const y = date.getFullYear(); |
|||
const m = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const d = String(date.getDate()).padStart(2, '0'); |
|||
const h = String(date.getHours()).padStart(2, '0'); |
|||
const min = String(date.getMinutes()).padStart(2, '0'); |
|||
return `${y}-${m}-${d} ${h}:${min}`; |
|||
}, |
|||
getStatusClass(status) { |
|||
if (status === '未开始') return 'status-0'; |
|||
if (status === '进行中') return 'status-1'; |
|||
if (status === '已结束') return 'status-2'; |
|||
return ''; |
|||
}, |
|||
async getSessionKey() { |
|||
return new Promise((resolve) => { |
|||
uni.login({ |
|||
success: async (loginRes) => { |
|||
console.log('loginRes', loginRes) |
|||
if (loginRes.code) { |
|||
const res = await FetchSessionKey({ |
|||
libcode: config.LIB_CODE, |
|||
code: loginRes.code |
|||
}); |
|||
if (res.code === 200) { |
|||
this.sessionKey = res.data.session_key; |
|||
this.openid = res.data.openid; |
|||
} |
|||
} |
|||
resolve() |
|||
}, |
|||
fail: () => { |
|||
resolve() |
|||
} |
|||
}); |
|||
}) |
|||
}, |
|||
async getActivityList(isRefresh = false) { |
|||
if (!this.openid) { |
|||
uni.showToast({ title: '获取用户信息失败', icon: 'none' }) |
|||
return |
|||
} |
|||
if (this.loading) return; |
|||
|
|||
if (isRefresh) { |
|||
this.page = 0; |
|||
this.noMore = false; |
|||
this.refreshing = true; |
|||
} else { |
|||
if (this.noMore) return; |
|||
} |
|||
|
|||
this.loading = true; |
|||
const currentTabItem = this.tabList[this.activeTab] |
|||
const params = { |
|||
openId: this.openid, |
|||
page: this.page, |
|||
pageSize: this.pageSize |
|||
} |
|||
if(currentTabItem.value !== null){ |
|||
params.isCancel = currentTabItem.value |
|||
} |
|||
|
|||
try { |
|||
const res = await FetchMySignActivityInfo(params); |
|||
console.log('FetchMySignActivityInfo返回结果', res) |
|||
if (res.code === 200) { |
|||
const pageData = res.data; |
|||
const list = pageData.content || []; |
|||
|
|||
const currentPage = pageData.number ?? 0; |
|||
const totalPage = pageData.totalPages ?? 0; |
|||
this.noMore = currentPage >= totalPage - 1; |
|||
|
|||
if (isRefresh) { |
|||
this.activityList = list; |
|||
} else { |
|||
this.activityList = [...this.activityList, ...list]; |
|||
} |
|||
} else { |
|||
if (isRefresh) this.activityList = []; |
|||
} |
|||
} catch (err) { |
|||
console.error('请求活动接口异常', err) |
|||
uni.showToast({ title: '网络请求失败', icon: 'none' }) |
|||
} finally { |
|||
this.refreshing = false; |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
|
|||
onRefresh() { |
|||
if(this.loading) return |
|||
this.getActivityList(true); |
|||
}, |
|||
|
|||
onScrollLower() { |
|||
if(this.loading || this.noMore) return; |
|||
this.page += 1; |
|||
this.getActivityList(false); |
|||
}, |
|||
|
|||
cancelAppoint(item) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: `确定要取消活动【${item.title}】的预约吗？`, |
|||
success: async (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
const apiRes = await FetchCancelSignActivity({ |
|||
id: item.signId |
|||
}) |
|||
if(apiRes.code === 200){ |
|||
uni.showToast({ title: '取消成功', icon: 'success' }) |
|||
this.getActivityList(true) |
|||
}else{ |
|||
uni.showToast({ title: apiRes.message || '取消失败', icon: 'none' }) |
|||
} |
|||
}catch(err){ |
|||
console.error('取消预约失败', err) |
|||
uni.showToast({ title: '网络异常，取消失败', icon: 'none' }) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
deleteSignActivity(item){ |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: `确定要删除活动【${item.title}】的预约吗？`, |
|||
success: async (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
const apiRes = await FetchDeleteSignActivity({ |
|||
id: item.signId |
|||
}) |
|||
if(apiRes.code === 200){ |
|||
uni.showToast({ title: '删除成功', icon: 'success' }) |
|||
this.getActivityList(true) |
|||
}else{ |
|||
uni.showToast({ title: apiRes.message || '删除失败', icon: 'none' }) |
|||
} |
|||
}catch(err){ |
|||
console.error('删除预约失败', err) |
|||
uni.showToast({ title: '网络异常，删除失败', icon: 'none' }) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
toActivityDetail(item) { |
|||
console.log('toActivityDetail',item); |
|||
uni.navigateTo({ |
|||
url: "/subpkg/pages/activity-detail/activity-detail?item=" + encodeURIComponent(JSON.stringify(item)) |
|||
}); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.activity-list { |
|||
padding: 0; |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
background-color: #f5f5f5; |
|||
display:flex; |
|||
flex-direction:column; |
|||
} |
|||
|
|||
.tab-box { |
|||
display: flex; |
|||
background-color: #fff; |
|||
margin-bottom: 10px; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 99; |
|||
} |
|||
.tab-item{ |
|||
flex:1; |
|||
text-align:center; |
|||
padding:12px 0; |
|||
font-size:14px; |
|||
color:#666; |
|||
position:relative; |
|||
} |
|||
.tab-item.active{ |
|||
color:#01a4fe; |
|||
font-weight:bold; |
|||
} |
|||
.tab-item.active::after{ |
|||
content:""; |
|||
position:absolute; |
|||
bottom:0; |
|||
left:50%; |
|||
transform:translateX(-50%); |
|||
width:28px; |
|||
height:2px; |
|||
background:#01a4fe; |
|||
} |
|||
|
|||
.scroll-view { |
|||
flex:1; |
|||
height: 0; |
|||
padding: 0 12px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.loading-box{ |
|||
padding:20px 0; |
|||
text-align:center; |
|||
} |
|||
.loading-text{ |
|||
font-size:14px; |
|||
color:#999; |
|||
} |
|||
|
|||
.nomore-box{ |
|||
padding:15px 0; |
|||
text-align:center; |
|||
} |
|||
.nomore-text{ |
|||
font-size:13px; |
|||
color:#999; |
|||
} |
|||
|
|||
.empty-box { |
|||
height: calc(100vh - 180px); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.empty-text { |
|||
margin-top: 16px; |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
|
|||
.activity-item { |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); |
|||
|
|||
.activity-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
padding: 16px; |
|||
|
|||
.title-row{ |
|||
width:100%; |
|||
display:flex; |
|||
justify-content: space-between; |
|||
align-items:flex-start; |
|||
margin-bottom:12px; |
|||
} |
|||
.title { |
|||
flex: 1; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #222; |
|||
} |
|||
.item-info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 4px 0; |
|||
font-size: 14px; |
|||
width:100%; |
|||
.label { |
|||
color: #666; |
|||
width: 72px; |
|||
} |
|||
.value { |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btn-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 10px; |
|||
padding-top: 10px; |
|||
border-top: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.status-tag { |
|||
padding: 2px 8px; |
|||
border-radius: 4px; |
|||
font-size: 12px; |
|||
} |
|||
.status-tag.status-0 { |
|||
color: #01a4fe; |
|||
background: #e6f7ff; |
|||
} |
|||
.status-tag.status-1 { |
|||
color: #00b42a; |
|||
background: #e6ffed; |
|||
} |
|||
.status-tag.status-2 { |
|||
color: #999; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
/* 👉 插槽外层容器：占满高度，垂直水平居中 */ |
|||
.swipe-right-wrap { |
|||
width: 80px; |
|||
height: calc(100% - 20px); |
|||
display: flex; |
|||
align-items: center; /* 垂直居中 */ |
|||
justify-content: center; /*水平居中*/ |
|||
// background-color: #f5222d; |
|||
} |
|||
|
|||
/* 圆形按钮，不再写height:100%，固定大小做圆圈 */ |
|||
.swipe-btn { |
|||
width: 48px; |
|||
height: 48px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ffffff !important; |
|||
} |
|||
|
|||
.swipe-btn-delete { |
|||
background-color: #f5222d; |
|||
} |
|||
|
|||
/* 深度修改uni-icons图标颜色，scoped必须加 ::v‑deep */ |
|||
::v-deep .swipe-btn .uni-icons { |
|||
color: #ffffff !important; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<view class="seat-booking"> |
|||
<!-- 顶部横幅 --> |
|||
<view class="banner"> |
|||
<image class="banner-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image> |
|||
<view class="banner-overlay"> |
|||
<text class="banner-text">葛店经济开发区图书馆预约</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<!-- 场馆选择下拉框 --> |
|||
<!-- <view class="venue-select"> |
|||
<picker :value="venueIndex" :range="venues" @change="onVenueChange"> |
|||
<view class="picker-content"> |
|||
<text>{{ venues[venueIndex] }}</text> |
|||
<uni-icons type="down" size="16" color="#666" /> |
|||
</view> |
|||
</picker> |
|||
</view> --> |
|||
|
|||
<!-- 楼层/区域卡片列表 --> |
|||
<view class="floor-list"> |
|||
<view class="floor-item" v-for="floor in floorList" :key="floor.id"> |
|||
<text class="floor-name">{{ floor.floor }}</text> |
|||
<div class="floor-info"> |
|||
<view class="floor-left"> |
|||
<text class="floor-title">{{ floor.title }}</text> |
|||
<image class="banner-bg" src="@/static/images/lib.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="floor-right"> |
|||
<text class="floor-desc">{{ floor.desc }}</text> |
|||
<view style="display: flex; justify-content: flex-end; width: 100%; text-align: end;"> |
|||
<button class="booking-btn" @click="bookingFloor(floor)">预约</button> |
|||
</view> |
|||
</view> |
|||
</div> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
venueIndex: 0, |
|||
venues: ['所有场馆', '东馆', '西馆', '南馆'], |
|||
floorList: [ |
|||
{ |
|||
id: 1, |
|||
floor: '3楼', |
|||
title: '综合阅览一', |
|||
desc: '葛店图书馆三楼阅读广场共有464个座位，为读者提供备电源，读者可预约选择心仪的座位。区域采光良好，环境优美，读者可在休息时一览楼下的风景。', |
|||
image: '@/static/images/lib.png' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
floor: '3楼', |
|||
title: '少儿阅览室', |
|||
desc: '少儿阅览室共有464个座位，为读者提供备电源、读者可自助选择位置，各个区采光良好，环境优美，读者可在休息时一览楼下的风景。', |
|||
image: '@/static/images/lib.png' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
floor: '3楼', |
|||
title: '专题阅览室', |
|||
desc: '专题阅览室共有464个座位，为读者提供备电源、读者可自助选择位置，各个区采光良好，环境优美，读者可在休息时一览楼下的风景。', |
|||
image: '@/static/images/lib.png' |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.loadSeatInfo(); |
|||
}, |
|||
methods: { |
|||
loadSeatInfo() { |
|||
console.log('加载座位信息'); |
|||
}, |
|||
onVenueChange(e) { |
|||
this.venueIndex = e.detail.value; |
|||
console.log('切换场馆:', this.venues[this.venueIndex]); |
|||
}, |
|||
bookingFloor(floor) { |
|||
uni.navigateTo({ |
|||
url: `/subpkg/pages/booking-detail/booking-detail?floor=${floor.floor}&title=${floor.title}` |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.seat-booking { |
|||
min-height: 100vh; |
|||
background-color: #f5f7fa; |
|||
} |
|||
|
|||
/* 顶部横幅 */ |
|||
.banner { |
|||
position: relative; |
|||
height: 140px; |
|||
} |
|||
.banner-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.banner-overlay { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.banner-text { |
|||
color: #fff; |
|||
font-size: 20px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.content { |
|||
padding: 16px; |
|||
// margin-top: -20px; |
|||
position: relative; |
|||
z-index: 10; |
|||
} |
|||
|
|||
/* 场馆选择下拉框 */ |
|||
.venue-select { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-bottom: 16px; |
|||
} |
|||
.picker-content { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
padding: 8px 16px; |
|||
background-color: #fff; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 楼层卡片 */ |
|||
.floor-list { |
|||
background-color: #fff; |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
box-shadow: 0 2px 8px rgba(0,0,0,0.05); |
|||
} |
|||
.floor-item { |
|||
margin-bottom: 16px; |
|||
padding-bottom: 16px; |
|||
border-bottom: 1px solid #eee; |
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.floor-name { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
padding-bottom: 8px; |
|||
} |
|||
.floor-info{ |
|||
display: inline-flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.floor-left { |
|||
position: relative; |
|||
width: 90px; |
|||
height: 100px; |
|||
border-radius: 8px; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.floor-image { |
|||
width: 90px; |
|||
height: 100px; |
|||
|
|||
object-fit: cover; |
|||
} |
|||
.floor-title { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
padding: 4px 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
color: #fff; |
|||
// font-weight: bold; |
|||
font-size: 12px; |
|||
// font-weight: bold; |
|||
} |
|||
|
|||
.floor-right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.floor-desc { |
|||
font-size: 13px; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
margin-bottom: 8px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
} |
|||
.booking-btn { |
|||
background-color: #01a4fe; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
padding: 0 20px; |
|||
border: none; |
|||
margin: 6px 0 0 0; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
.booking-btn::after { |
|||
border: none; |
|||
} |
|||
</style> |
|||
@ -1,8 +1,8 @@ |
|||
const config = { |
|||
// 本地
|
|||
// baseUrl: 'http://192.168.99.63:14000',
|
|||
baseUrl: 'http://192.168.99.63:14000', |
|||
// 线上
|
|||
baseUrl: 'https://wechatapi.aiyxlib.com', |
|||
// baseUrl: 'https://wechatapi.aiyxlib.com',
|
|||
LIB_CODE: '1201' |
|||
}; |
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue