Skip to content

G
german_mihuanggame
提交 b6f574b8 authored 作者: xiaotuoluo's avatar xiaotuoluo
浏览文件
操作

666

上级 516f1c57
显示空白字符变更
内嵌 并排
正在显示 包含 665 行增加 和 59 行删除
src/api/contract.js
浏览文件 @ b6f574b8
...@@ -49,10 +49,53 @@ export function getContractTimer(data) { ...@@ -49,10 +49,53 @@ export function getContractTimer(data) {
} }
//获取市场交易对 //获取市场交易对
export function getallcoin () { export function getallcoin (params) {
return request({ return request({
url: '/Ajaxtrade/getallcoin', url: '/Ajaxtrade/getallcoin',
method: 'get', method: 'get',
params
})
}
//轮播图========== is_index=1首页轮播 is_index=0 hotel轮播
export function lunbo (params) {
return request({
url: '/system/bannerslist',
method: 'get',
params
})
}
//选妃列表
export function xuanfeiList (params) {
return request({
url: '/xuanfei/xuanfeilist',
method: 'get',
params
})
}
//选妃详情, api/xuanfei/xuanfeidata?id=5
export function xuanfeiDetail (params) {
return request({
url: '/xuanfei/xuanfeidata',
method: 'get',
params
})
}
//酒店列表
export function jiudianList () {
return request({
url: '/hotel/hotellist',
method:'get',
})
}
//酒店详情, api/hotel/hoteldata?id=5
export function jiudianDetail (params){
return request({
url: '/hotel/hoteldata',
method:'get',
params
}) })
} }
......
src/assets/css/base.less
浏览文件 @ b6f574b8
...@@ -70,3 +70,5 @@ ...@@ -70,3 +70,5 @@
@primary-bg:linear-gradient(90deg, #9695F9 0%, #7EB3ED 100%); @primary-bg:linear-gradient(90deg, #9695F9 0%, #7EB3ED 100%);
@primary-color:#72B3FF; @primary-color:#72B3FF;
@nav-bar-title-text-color:#fff;
src/pages/guide/detail.vue
浏览文件 @ b6f574b8
<template> <template>
<div> <div style="padding: 16px;">
<h2 class="text-lg font-bold mb-2">Leaflet 地图示例</h2>
<!-- <div id="map" class="w-full h-96"></div> --> <van-nav-bar class="nav-bar" title="Detail" fixed>
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<!-- <div style="margin-top: 55px;" class="masonry-wrap">
<div class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
<img :src="'http://172.93.218.201:1516' + item.img_url" alt="" loading="lazy">
</div>
</div>
</div> -->
<div class="title" style="margin-top: 55px;">{{hotelDetail.hotel_name}}</div>
<van-swipe :autoplay="3000" style="height:200px;" >
<van-swipe-item v-for="(item, index) in bannarsImg" :key="index">
<img :src="fullUrl1(item)" style="width:100%; height:200px; object-fit:cover;" />
</van-swipe-item>
</van-swipe>
<div style="display: flex;flex-direction: column;">
<span class="title">introduce</span>
<span class="content">{{ hotelDetail.introduce }}</span>
</div>
<div class="title">Amenities</div>
<div style="display: flex; flex-direction: row;justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="petImg" style="width: 20px;" alt="">
<span class="content">Pets Allowed</span>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="wifiImg" style="width: 20px;" alt="">
<span class="content">Wireless Internet</span>
</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="renzheng" style="width: 20px;" alt="">
<span class="content">Sustainablity Certification</span>
</div>
<div class="title">Pet Policy</div>
<div class="content">We charge a surcharge EUR 25.00 pet per night.Assistance dogs are free of charge.Bookings with dogs are possible in all room categpries</div>
<div class="title">Sustainability Certification</div>
<div class="content">Our hotel has a third-party sustainability certification</div>
<div class="title">Certification GreenSign</div>
<h2 class="title">Hotel Location</h2>
<div id="map" style="width: 100%; height: 200px;"></div> <div id="map" style="width: 100%; height: 200px;"></div>
<div class="content">{{hotelDetail.address}}</div>
<div class="title">Hotel Reviews</div>
<div style="border: solid 1px #f6f6f6;padding: 10px; border-radius: 8px;margin-top: 10px;" v-for="item in pl" :key="item.id">
<div style="font-size: 16px;">{{ item.name }}</div>
<div><van-rate :value="Number(item.fs)" allow-half void-icon="star" void-color="#eee" /></div>
<div style="color: #6c6c6c;font-size: 14px;margin-top: 8px;">{{ item.content }}</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import L from 'leaflet' import L from 'leaflet'
import 'leaflet/dist/leaflet.css' import 'leaflet/dist/leaflet.css'
import petImg from '@/assets/pet.png'
import wifiImg from '@/assets/wifi.png'
import renzheng from '@/assets/renzheng.png'
import { jiudianDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
export default { export default {
name: 'LeafletMap', name: 'LeafletMap',
...@@ -17,20 +77,30 @@ ...@@ -17,20 +77,30 @@
return { return {
map: null, map: null,
marker: null, marker: null,
// hotelList:[],
bannarsImg: [],
hotelDetail:{},
wd:0,
jd:0,
address:'',
pl:[],
petImg:petImg,
renzheng:renzheng,
wifiImg:wifiImg
} }
}, },
mounted() { mounted() {
this.initMap() const id = this.$route.query.id
console.log('这个ID是：',id)
// this.initMap()
this.getJiuDianDetail(id)
}, },
methods: { methods: {
initMap() { initMap() {
// 固定位置坐标（例如成都锦里） // 固定位置坐标（例如成都锦里）
const location = [1.305611, 103.860150] const location = [this.wd,this.jd]
// 初始化地图 // 初始化地图
this.map = L.map('map').setView(location, 15) // 15 是缩放级别 this.map = L.map('map').setView(location, 15) // 15 是缩放级别
// 添加 OpenStreetMap 图层 // 添加 OpenStreetMap 图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '' attribution: ''
...@@ -41,10 +111,37 @@ ...@@ -41,10 +111,37 @@
// 添加 Marker // 添加 Marker
this.marker = L.marker(location) this.marker = L.marker(location)
.addTo(this.map) .addTo(this.map)
.bindPopup('成都锦里') .bindPopup(this.address)
.openPopup() .openPopup()
},
back(){
this.$router.back()
},
async getJiuDianDetail(id) {
const res = await jiudianDetail({id:id})
if(res.code == 200){
this.hotelDetail = res.data
this.bannarsImg = res.data.img_url
this.address = res.data.hotel_name
this.wd = res.data.wd
this.jd = res.data.jd
this.pl = res.data.pl
this.initMap()
} }
} console.log('酒店详情：',res.data)
},
fullUrl1 (p) {
if (!p) return ''
return nowLocationUrl + p
},
},
created(){
},
} }
</script> </script>
...@@ -53,5 +150,49 @@ ...@@ -53,5 +150,49 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.masonry-wrap{
padding: 8px; /* 外层留白，像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键：多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列；也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item{
break-inside: avoid; /* 避免跨列断开 */
margin-bottom: 12px; /* 垂直间距 */
border-radius: 12px; /* 圆角卡片 */
overflow: hidden; /* 裁剪图片圆角 */
background: #fff; /* 有轻微“卡片感” */
/* 可选阴影： */
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.masonry-item img{
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”，保留 */
}
.title{
font-size: 32px;
margin-top: 40px;
margin-bottom: 5px;
/* font-weight: bold; */
}
.content{
font-size: 28px;
line-height: 40px;
color: #6c6c6c;
margin-top: 10px;
}
</style> </style>
\ No newline at end of file
src/pages/guide/index3.vue
浏览文件 @ b6f574b8
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
</div> </div>
</div> </div>
<div style="position: relative; margin-top:50px;"> <div v-if="images && images.length" style="position: relative; margin-top:50px;">
<!-- 轮播 --> <!-- 轮播 -->
<van-swipe autoplay="3000" style="height:200px;"> <van-swipe :autoplay="3000" style="height:200px;">
<van-swipe-item v-for="(img, index) in images" :key="index"> <van-swipe-item v-for="(item, index) in images" :key="index">
<img :src="img" style="width:100%; height:200px; object-fit:cover;" /> <img :src="fullUrl1(item.url)" style="width:100%; height:200px; object-fit:cover;" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
...@@ -40,8 +40,15 @@ ...@@ -40,8 +40,15 @@
</div> </div>
</div> </div>
<div style="margin-top: 5px;" class="masonry-wrap">
<div class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
<img @click="tapImgItem(item)" :src="fullUrl(item.img_url)" alt="" loading="lazy">
</div>
</div>
</div>
<div data-v-3b3fbaa9="" class="shuadanBtm"> <!-- <div data-v-3b3fbaa9="" class="shuadanBtm">
<div data-v-3b3fbaa9="">Beliebte Hotels</div> <div data-v-3b3fbaa9="">Beliebte Hotels</div>
<div data-v-3b3fbaa9="" class="Rechargelist"> <div data-v-3b3fbaa9="" class="Rechargelist">
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
...@@ -52,11 +59,11 @@ ...@@ -52,11 +59,11 @@
src="https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg" src="https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg" src="https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg"
alt=""></div><!----> alt=""></div>
</div> </div>
</div> </div>
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
<div data-v-3b3fbaa9=""><!----> <div data-v-3b3fbaa9="">
<div data-v-3b3fbaa9=""><img data-v-3b3fbaa9="" <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/3d7a69fe5611cdfd/0ee85052ab9292bb.jpg" src="https://admin.xianyuxx.motorcycles/upload/3d7a69fe5611cdfd/0ee85052ab9292bb.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
...@@ -74,11 +81,11 @@ ...@@ -74,11 +81,11 @@
src="https://admin.xianyuxx.motorcycles/upload/341c65ef164da91a/a60b3e27ddb76eab.jpg" src="https://admin.xianyuxx.motorcycles/upload/341c65ef164da91a/a60b3e27ddb76eab.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/2d6632edb4ed8d44/2beb2f51f208ba2e.jpg" src="https://admin.xianyuxx.motorcycles/upload/2d6632edb4ed8d44/2beb2f51f208ba2e.jpg"
alt=""></div><!----> alt=""></div>
</div> </div>
</div> </div>
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
<div data-v-3b3fbaa9=""><!----> <div data-v-3b3fbaa9="">
<div data-v-3b3fbaa9=""><img data-v-3b3fbaa9="" <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/1a9ee841c0f72a58/6df9b280af685b13.jpg" src="https://admin.xianyuxx.motorcycles/upload/1a9ee841c0f72a58/6df9b280af685b13.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
...@@ -89,7 +96,7 @@ ...@@ -89,7 +96,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<div style="height:80px;"></div> <div style="height:80px;"></div>
...@@ -97,26 +104,69 @@ ...@@ -97,26 +104,69 @@
</template> </template>
<script> <script>
import { jiudianList,lunbo } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
// import Footer from '@/components/footer'; // import Footer from '@/components/footer';
export default { export default {
data() { data() {
return { return {
images: [ images: [
"https://admin.xianyuxx.motorcycles/upload/b41e05aba2905e8d/76900ad9488ebe24.jpg", // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/34b09bbc286ac454b68e8a9646d45466.jpg"},
"https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg", // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
"https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg" ],
] hotelList: [],
origin: '',
origin1: '',
swipeKey: 0,
} }
}, },
/** /**
* *
*/ */
methods:{ methods: {
nima(){ // nima() {
this.$router.push({path:"/detail"}) // this.$router.push({ path: "/detail" })
// },
async getLunBoHotel(){
const res = await lunbo({ is_index: 0 })
if (res.code === 200) {
this.images = Array.isArray(res.data) ? res.data : (res.data?.list || [])
} }
console.log('酒店轮播图：',res.data)
},
async getJiuDianList() {
const res = await jiudianList()
if(res.code == 200){
this.hotelList = res.data
}
console.log('输出的酒店列表：',res)
},
fullUrl (p) {
if (!p) return ''
// 自动处理前导/结尾斜杠、相对/绝对路径
try { return new URL(p, this.origin).href }
catch (e) {
const a = (this.origin || '').replace(/\/+$/, '')
const b = String(p).replace(/^\/+/, '')
return a && b ? `${a}/${b}` : (b || a)
}
},
fullUrl1 (p) {
if (!p) return ''
return nowLocationUrl + p
},
tapImgItem(item){
this.$router.push({ path: "/detail",query: { id: String(item.id) } },)
} }
},
mounted() {
this.origin = window.location.origin
this.origin1 = window.location.origin
this.getLunBoHotel()
this.getJiuDianList()
},
} }
</script> </script>
...@@ -181,4 +231,35 @@ export default { ...@@ -181,4 +231,35 @@ export default {
width: 49%; width: 49%;
height: 56vw height: 56vw
} }
.masonry-wrap{
padding: 8px; /* 外层留白，像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键：多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列；也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item{
break-inside: avoid; /* 避免跨列断开 */
margin-bottom: 12px; /* 垂直间距 */
border-radius: 12px; /* 圆角卡片 */
overflow: hidden; /* 裁剪图片圆角 */
background: #fff; /* 有轻微“卡片感” */
/* 可选阴影： */
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.masonry-item img{
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”，保留 */
}
</style> </style>
src/pages/home/home.vue
浏览文件 @ b6f574b8
<template> <template>
<div class="home-container"> <div class="home-container-home">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<div class="van-nav-bar__content" style="background-color: #000; height: 50px;"> <div class="van-nav-bar__content" style="background-color: #000; height: 50px;">
<div class="van-nav-bar__title van-ellipsis"> <div class="van-nav-bar__title van-ellipsis">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="banner"> <div class="banner">
<van-swipe :autoplay="3000" indicator-color="white" style="height: 200px;"> <van-swipe :autoplay="3000" indicator-color="white" style="height: 200px;">
<van-swipe-item v-for="(item, index) in banners" :key="index"> <van-swipe-item v-for="(item, index) in banners" :key="index">
<van-image :src="item.imgUrl" width="100%" height="200px" fit="cover" /> <van-image :src="fullImgUrl(item.url)" width="100%" height="200px" fit="cover" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
</div> </div>
...@@ -34,14 +34,52 @@ ...@@ -34,14 +34,52 @@
<div class="middelTit-right">Enjoy the ultimate luxury experience</div> <div class="middelTit-right">Enjoy the ultimate luxury experience</div>
</div> </div>
<div class="middleImg"> <div class="middleImg">
<div v-for="value in gridItems" class="grid-item" :key="value.src"> <div @click="pushDetail(value)" v-for="(value,index) in gridItems" class="grid-item" :key="index">
<img style="width: 200px; height: 200px;border-radius: 10px;" :src="value.src" alt=""> <img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value.img_url)" alt="">
<div class="gridItemTag"> <div class="gridItemTag">
<span class="textTag">Yes</span> <span class="textTag">Yes</span>
</div> </div>
</div> </div>
</div> </div>
<div style="font-size: 26px;">Recommended connections</div> <!-- 列表的啦 -->
<div style="font-size: 14px;margin-left: 3px;margin-top: 13px;">Recommended connections</div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list :immediate-check="false" :offset="200" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload">
<van-cell v-for="(value,index) in homeList" :key="index">
<template #default>
<div class="listItem">
<div class="listLeft">
<img class="listImg" style="object-fit: cover;width: 200px;height: 120px;" :src="fullImgUrl(value.img_url)" alt="">
<div class="gridItemTag1">
<span class="textTag1">Great</span>
</div>
</div>
<div style="margin-left: 10px;">
<div style="display: flex;flex-direction: row;align-items: center;">
<img style="width: 120px;" :src="tagImg" alt="">
<span style="font-size: 16px;margin-left: 5px;font-weight: bold;">{{ value.xuanfei_name }}</span>
</div>
<div style="border: #000 solid 1px;border-radius: 8px;padding: 8px;
font-size: 12px;margin-top: 5px;font-weight: bold;">
{{value.introduce}}
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<span style="font-size: 14px;font-weight: 500;">Charge range</span>
<img style="width: 100px;" :src="starsImg" alt="">
</div>
<div style="font-size: 12px;margin-top: 5px;">
Height:{{value.height}}cm Bust:{{value.bust}} Service City:{{value.address}} National air freight:Yes
</div>
<van-button @click="pushDetail(value)" style="width: 100%;height: 36px;
font-size: 14px;border-radius: 8px;margin-top: 5px;background-color: black;"
type="primary">Ask her out</van-button>
</div>
</div>
</template>
</van-cell>
</van-list>
</van-pull-refresh>
</div> </div>
</template> </template>
...@@ -55,12 +93,17 @@ import img6 from '@/assets/user/6.jpg' ...@@ -55,12 +93,17 @@ import img6 from '@/assets/user/6.jpg'
import img7 from '@/assets/user/7.jpg' import img7 from '@/assets/user/7.jpg'
import img8 from '@/assets/user/8.jpg' import img8 from '@/assets/user/8.jpg'
import img9 from '@/assets/user/9.jpg' import img9 from '@/assets/user/9.jpg'
import tagImg from '@/assets/tag.jpg'
import starsImg from '@/assets/stars.jpg'
import { nowLocationUrl } from '@/utils/tools'
import { lunbo,xuanfeiList } from '@/api/contract'
export default { export default {
data() { data() {
return { return {
banners: [ banners: [
{ imgUrl: "https://admin.xianyuxx.motorcycles/upload/e134baf684543f36/ca40561eb9109659.jpg" }, // { imgUrl: "https://admin.xianyuxx.motorcycles/upload/e134baf684543f36/ca40561eb9109659.jpg" },
{ imgUrl: "https://admin.xianyuxx.motorcycles/upload/942fd816c80ca783/f1d4aa380230ca67.jpg" } // { imgUrl: "https://admin.xianyuxx.motorcycles/upload/942fd816c80ca783/f1d4aa380230ca67.jpg" }
], ],
notices: [ notices: [
"Systeminformationen: Danke famp;uuml;r Ihren Beitritt. Schnallen Sie sich an, denn wir sind gleich dabei, in den Orgasmusmodus zuwechseln. Die Terminzeit ist tamp;auml;glich [11:00-23:00]. ", "Systeminformationen: Danke famp;uuml;r Ihren Beitritt. Schnallen Sie sich an, denn wir sind gleich dabei, in den Orgasmusmodus zuwechseln. Die Terminzeit ist tamp;auml;glich [11:00-23:00]. ",
...@@ -69,25 +112,35 @@ export default { ...@@ -69,25 +112,35 @@ export default {
currentIndex: 0, currentIndex: 0,
currentNotice: "", currentNotice: "",
gridItems: [ gridItems: [
{ src: img1 }, // { src: img1 },
{ src: img2 }, // { src: img2 },
{ src: img3 }, // { src: img3 },
{ src: img4 }, // { src: img4 },
{ src: img5 }, // { src: img5 },
{ src: img6 }, // { src: img6 },
{ src: img7 }, // { src: img7 },
{ src: img8 }, // { src: img8 },
{ src: img9 }, // { src: img9 },
{ src: img1 },
{ src: img2 }, // { src: img1 },
{ src: img3 }, // { src: img2 },
{ src: img4 }, // { src: img3 },
{ src: img5 }, // { src: img4 },
{ src: img6 }, // { src: img5 },
{ src: img7 }, // { src: img6 },
{ src: img8 }, // { src: img7 },
{ src: img9 }, // { src: img8 },
] // { src: img9 },
],
loading: false,
finished: false,
refreshing: false,
starsImg:starsImg,
tagImg:tagImg,
page:1,
limit:10,
limit1:100,
homeList:[],
} }
}, },
mounted() { mounted() {
...@@ -96,16 +149,86 @@ export default { ...@@ -96,16 +149,86 @@ export default {
this.currentIndex = (this.currentIndex + 1) % this.notices.length; this.currentIndex = (this.currentIndex + 1) % this.notices.length;
this.currentNotice = this.notices[this.currentIndex]; this.currentNotice = this.notices[this.currentIndex];
}, 5000); }, 5000);
this.getBannerHome()
this.getMiddelImg()
this.getListHome()
},
methods: {
onRefresh(){
// 清空列表数据
// this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
// this.loading = true;
}, },
onload(){
this.page ++
this.getListHome()
// console.log('刷新列表的啦')
},
pushDetail(item){
this.$router.push({path:'/userDetail',query:{id:item.id}})
},
async getBannerHome(){
const res = await lunbo({is_index:1})
if(res.code == 200){
this.banners = res.data
}
// console.log('首页轮播：',res)
},
async getMiddelImg(){
const res = await xuanfeiList({page:this.page,limit:this.limit1})
if(res.code == 200){
const list = res.data.list
list.forEach(it => {
if(it && it.img_url){
this.gridItems.push(it)
}
})
}
// console.log('中间的图片:',res)
},
async getListHome(){
try{
const res = await xuanfeiList({page:this.page,limit:this.limit})
if(res.code == 200){
const list = res.data.list
if(this.page == 1){
this.homeList = list
}else{
list.forEach(it => {
this.homeList.push(it)
})
}
if(res.data.count <= this.homeList.length){
this.loading = false
this.finished = true
}
}
// console.log('选妃列表',res)
}catch(err){
this.finished = false
}finally{
this.loading = false
}
},
fullImgUrl(imgUrl){
if(!imgUrl){
return ''
}
return nowLocationUrl + imgUrl
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home-container { .home-container-home {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
background-color: #fff; background-color: #fff;
font-family: Yu Gothic, Meiryo, sans-serif; font-family: Yu Gothic, Meiryo, sans-serif;
margin-bottom: 200px;
:deep(.van-nav-bar__title) { :deep(.van-nav-bar__title) {
max-width: 90%; max-width: 90%;
...@@ -172,7 +295,7 @@ export default { ...@@ -172,7 +295,7 @@ export default {
padding: 10px; padding: 10px;
} }
.grid-item { .grid-item {
background-color: #4ade80; // background-color: #4ade80;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -220,5 +343,44 @@ export default { ...@@ -220,5 +343,44 @@ export default {
margin-left: 10px; margin-left: 10px;
} }
} }
.listItem{
padding: 10px;
display: flex;
flex-direction: row;
}
.listLeft{
// display: flex;
// background-color: red;
position: relative;
overflow: hidden;
}
.listImg{
// margin-top: 10px;
// justify-content: center;
// align-items: center;
// color: white;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
object-fit: cover;
}
.gridItemTag1{
position: absolute;
top: -20px;
right: -60px; /* 根据旋转角度调整位置 */
background-color: #000; /* 黑底 */
color: #fff; /* 白字 */
width: 200px;
height: 100px;
// font-size: 18px;
font-weight: bold;
align-items: center;
transform: rotate(45deg); /* 旋转 45° */
.textTag1{
position: absolute;
bottom: 5px;
left: 60px;
font-size: 30px;
}
}
</style> </style>
\ No newline at end of file
src/pages/home/personDetail.vue 0 → 100644
浏览文件 @ b6f574b8
<template>
<div class="detailContainer">
<van-nav-bar class="nav-bar" title="Detail" fixed>
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div class="headerView" style="margin-top: 54px;">
<div style="display: flex;flex-direction: column;">
<span style="font-size: 24px; font-weight: bold;">{{personData?.xuanfei_name || 'No Name'}}</span>
<span style="font-size: 14px;line-height: 20px;margin-top: 5px;">Height:{{personData?.height}}cm Bust:{{personData?.bust}}</span>
<div class="tag" style="margin-top: 5px;">{{ personData?.introduce }}</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<span style="font-size: 14px;">Charge range:</span>
<img style="width: 100px;" :src="starImg" alt="">
</div>
<span style="font-size: 14px;margin-top: 5px;">Residence:{{personData?.address}}</span>
</div>
<div style="display: flex;flex-direction: column;align-items: end;justify-content: center;">
<div style="display: flex;align-items: center;flex-direction: column;">
<img style="width: 50px;" :src="zanHeart" alt="">
<span>{{personData?.like}}</span>
</div>
<div style="padding: 10px;background-color: #000;
color: #fff;font-size: 15px;margin-top: 25px;border-radius: 100px;">Reserve now</div>
</div>
</div>
<!-- 111111 -->
<div style="background-color: lightgray;height: 10px;width: 100%;
margin-top: 15px;margin-bottom: 15px;border-radius: 3px;">
</div>
<div class="middleImg">
<div @click="tapImg(index)" :style="{border:nowImgIndex == index ? '#000 5px solid':'' }" v-for="(value,index) in imgUrls" class="grid-item" :key="index">
<img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value)" alt="">
<!-- <div class="gridItemTag">
<span class="textTag">Yes</span>
</div> -->
</div>
</div>
<!-- 222222 -->
<div style="margin-top: 15px;">
<img :src="fullImgUrl(nowImgSrc)" style="width: 100%;" alt="">
</div>
<!-- 333333 -->
<div style="margin-top: 15px;">
<div style="font-size: 18px;font-weight: bold;">Personal profile</div>
<div style="font-size: 15px;margin-top: 8px;line-height: 18px;">{{personData.introduce}}</div>
</div>
</div>
</template>
<script>
import starImg from '@/assets/stars.jpg'
import zanHeart from '@/assets/zanheart.png'
import img1 from '@/assets/user/1.jpg'
import img2 from '@/assets/user/2.jpg'
import img3 from '@/assets/user/3.jpg'
import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import { xuanfeiDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
export default{
data(){
return {
starImg: starImg,
zanHeart: zanHeart,
gridItems: [
{ src: img1 },
{ src: img2 },
{ src: img3 },
{ src: img4 },
{ src: img5 },
],
nowImgSrc: '',
nowImgIndex: 0,
personData:{},
imgUrls:[],
}
},
mounted() {
const id = this.$route.query.id
this.getPersonDetail(id)
},
methods: {
back(){
this.$router.back()
},
tapImg(index){
this.nowImgIndex = index
this.nowImgSrc = this.imgUrls[index]
},
async getPersonDetail(id){
const res = await xuanfeiDetail({id:id})
if(res.code == 200){
this.personData = res.data
this.imgUrls = res.data.img_url || []
this.nowImgSrc = res.data.img_url[0]
}
// console.log('个人详情：',res)
},
fullImgUrl(imgUrl){
return nowLocationUrl + imgUrl
}
}
}
</script>
<style scoped>
.detailContainer{
padding:15px 25px 15px 25px;
}
.headerView{
/* margin-top: 100px; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tag{
background-color: #000;
border-radius: 8px;
padding: 8px 15px 8px 15px;
color: #fff;
font-size: 26px;
max-width: 300px;
}
.middleImg{
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(1,200px);
grid-auto-columns: 200px;
gap: 20px;
overflow-x: auto;
padding: 10px;
}
.grid-item {
background-color: #4ade80;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ b6f574b8
...@@ -128,7 +128,11 @@ const routes = [ ...@@ -128,7 +128,11 @@ const routes = [
name: 'detail', name: 'detail',
component: () => import('../pages/guide/detail.vue') component: () => import('../pages/guide/detail.vue')
}, },
{
path: '/userDetail',
name: 'userDetail',
component: () => import('../pages/home/personDetail.vue')
}
]; ];
......
src/utils/request.js
浏览文件 @ b6f574b8
...@@ -109,7 +109,7 @@ if (localStorage.getItem("token")) { ...@@ -109,7 +109,7 @@ if (localStorage.getItem("token")) {
service.interceptors.response.use( service.interceptors.response.use(
async (response) => { async (response) => {
// console.log('ccccc========>',response) console.log('ccccc========>',response.config.url)
const { data } = response const { data } = response
let resData = data let resData = data
......
src/utils/tools.js
浏览文件 @ b6f574b8
...@@ -53,3 +53,12 @@ export const isEmpty = (obj) => { ...@@ -53,3 +53,12 @@ export const isEmpty = (obj) => {
return require(`@/assets/${url}`) return require(`@/assets/${url}`)
} }
} }
export const nowLocationUrl = "http://172.93.218.201:1516"
export const fullImgUrl=(imgUrl) => {
if(imgUrl){
return nowLocationUrl + imgUrl
}
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论