提交 23979b1c authored 作者: flex's avatar flex

优化

上级 7f4c844a
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -35,21 +35,24 @@
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"css-loader": "^6.2.0",
"cache-loader": "^4.1.0",
"css-loader": "^3.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1",
"less-loader": "^7.3.0",
"less-loader": "^6.2.0",
"postcss-px-to-viewport": "^1.1.1",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5",
"sass-loader": "^8.0.2",
"style-loader": "^3.2.1",
"style-loader": "^1.3.0",
"stylus": "^0.55.0",
"stylus-loader": "^6.1.0",
"stylus-loader": "^3.0.2",
"swiper": "^6.8.4",
"vue-awesome-swiper": "^3.1.3",
"vue-template-compiler": "^2.6.11"
"vue-loader": "^15.11.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.47.0"
},
"eslintConfig": {
"root": true,
......
......@@ -106,7 +106,35 @@ export function gongGao () {
})
}
export function allInfo () {
return request({
url: '/hotel/allInfo',
method:'get',
})
}
export function createOrder () {
return request({
url: '/hotel/createOrder',
method:'post',
})
}
export function payOrder () {
return request({
url: '/hotel/payOrder',
method:'post',
})
}
export function orderList (params) {
return request({
url: '/hotel/orderList',
method:'post',
params
})
}
<template>
<div class="home-container px">
<!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__content" style="background-color: black;">
<div class="van-nav-bar__title van-ellipsis" style="font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
HotelS
</div>
<div @click="openHotelChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color:#fff;"></i>
</div>
</div>
<div class="home-container px">
<!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__content" style="background-color: black">
<div
class="van-nav-bar__title van-ellipsis"
style="
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
"
>
HotelS
</div>
<div @click="openHotelChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color: #fff"></i>
</div>
<!-- -->
<div class="wrap">
</div>
</div>
<!-- -->
<div class="wrap">
<div
v-if="images && images.length"
style="position: relative; margin-top: 2px"
>
<!-- 轮播 -->
<van-swipe :autoplay="3000" style="height: 200px">
<van-swipe-item v-for="(item, index) in images" :key="index">
<img
:src="fullUrl1(item.url)"
style="width: 100%; height: 200px; object-fit: cover"
/>
</van-swipe-item>
</van-swipe>
<div v-if="images && images.length" style="position: relative; margin-top:2px;">
<!-- 轮播 -->
<van-swipe :autoplay="3000" style="height:200px;">
<van-swipe-item v-for="(item, index) in images" :key="index">
<img :src="fullUrl1(item.url)" style="width:100%; height:200px; object-fit:cover;" />
</van-swipe-item>
</van-swipe>
<!-- 单独的文字块 -->
<div
style="
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 12px;
padding: 12px;
border-radius: 10px 10px 0 0;
box-sizing: border-box;
"
>
Booking.com bietet mehr als 28 Millionen Unterkünfte, darunter über 6
Millionen Ferienwohnungen, Apartments und andere einzigartige
Unterkünfte. Egal, wohin du reisen möchtest und was du tun möchtest,
Booking.com bietet einen rund um die Uhr verfügbaren Kundenservice,
der alles einfach macht.
</div>
</div>
<!-- 单独的文字块 -->
<div style="position: absolute; bottom: 0; left: 0; width: 100%;
background: rgba(0,0,0,0.4); color:#fff;
font-size: 12px; padding: 12px;
border-radius: 10px 10px 0 0; box-sizing:border-box">
Booking.com bietet mehr als 28 Millionen Unterkünfte, darunter über 6 Millionen
Ferienwohnungen, Apartments und andere einzigartige Unterkünfte.
Egal, wohin du reisen möchtest und was du tun möchtest, Booking.com bietet einen
rund um die Uhr verfügbaren Kundenservice, der alles einfach macht.
</div>
</div>
<div class="Income">
<div>
<div @click="tipsShow=false">Mitgliedseinkommen</div>
<div>
<i @click="tipsShow=true" class="van-icon van-icon-info" style="font-size: 25px"><!----></i
>
<!-- <img
src="img/order-fill.1ff02368.png"
alt=""
style="width: 25px; height: 25px; margin-left: 20px"
/> -->
<van-icon name="orders-o" @click="$router.push('/order')" style="margin-left: 5px;" size="24"/>
</div>
</div>
<div class="IncomeMain" style="" v-if="!tipsShow">
<div>
<p>Kontostand</p>
<p>{{info.all_money}}</p>
</div>
<div>
<p>Einkommen heute</p>
<p>{{info.today_in}}</p>
</div>
<div>
<p>Anzahl der Aufgaben</p>
<p>{{info.all_task_do}}/{{ info.all_task }}</p>
</div>
<div>
<p>Gesamteinnahmen</p>
<p>{{info.all_in}}</p>
</div>
</div>
<div class="IncomeRules" v-if="tipsShow">
Systeminformationen: Danke f&amp;uuml;r Ihren Beitritt. Schnallen Sie
sich an, denn wir sind gleich dabei, in den Orgasmusmodus zu wechseln.
Die Terminzeit ist t&amp;auml;glich [11:00-23:00]. Sollten Sie nach
der vereinbarten Zeit anreisen, melden Sie sich bitte am
n&amp;auml;chsten Tag an der Rezeption. Das Personal ist bereit!
Verbindungsschritt: Kontaktieren Sie die Rezeption, w&amp;auml;hlen
Sie eine Frau aus und genie&amp;szlig;en Sie nach Abschluss der
Aktivit&amp;auml;t ein kostenloses Date in derselben Stadt
</div>
<div class="GrabOrder" @click="onCreateOrder">Aufgabe starten</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;padding: 10px;">
<span style="font-size: 20px;font-weight: bold;">Bellebte Hotels</span>
</div>
<div
style="
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
"
>
<span style="font-size: 20px; font-weight: bold">Bellebte Hotels</span>
</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 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="" class="Rechargelist">
<div data-v-3b3fbaa9="" class="item">
......@@ -102,173 +179,239 @@
</div>
</div>
</div> -->
</div>
<div style="height:80px;"></div>
</div>
<div style="height: 80px"></div>
</div>
</template>
<script>
import { jiudianList,lunbo } from '@/api/contract'
import { openChat1 } from '@/utils/chat'
import { nowLocationUrl } from '@/utils/tools'
import { jiudianList, lunbo,allInfo,createOrder } from "@/api/contract";
import router from "@/router";
import { openChat1 } from "@/utils/chat";
import { nowLocationUrl } from "@/utils/tools";
// import Footer from '@/components/footer';
export default {
data() {
return {
images: [
// {img_url:"http://172.93.218.201:1516/xuanfei/20250919/34b09bbc286ac454b68e8a9646d45466.jpg"},
// {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
],
hotelList: [],
origin: '',
origin1: '',
swipeKey: 0,
}
data() {
return {
images: [
// {img_url:"http://172.93.218.201:1516/xuanfei/20250919/34b09bbc286ac454b68e8a9646d45466.jpg"},
// {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
],
hotelList: [],
origin: "",
origin1: "",
swipeKey: 0,
tipsShow:false,
info:{}
};
},
/**
*
*/
methods: {
// nima() {
// 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;
},
/**
*
*/
methods: {
// nima() {
// 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) } },)
},
openHotelChat(){
openChat1()
}
tapImgItem(item) {
this.$router.push({ path: "/detail", query: { id: String(item.id) } });
},
openHotelChat() {
openChat1();
},
mounted() {
this.origin = nowLocationUrl
this.origin1 = nowLocationUrl
this.getLunBoHotel()
this.getJiuDianList()
getInfo(){
allInfo().then(res=>{
console.log(res,'info')
this.info=res.data || {};
})
},
onCreateOrder(){
createOrder().then(res=>{
}
})
}
},
mounted() {
this.origin = nowLocationUrl;
this.origin1 = nowLocationUrl;
this.getLunBoHotel();
this.getJiuDianList();
this.getInfo();
},
};
</script>
<style lang='less' scoped>
<style lang="less" scoped>
/* 置顶导航条 */
::v-deep(.nav-bar.newnavbar.van-nav-bar) {
// position: fixed;
/* 固定在顶部 */
top: 0;
left: 0;
width: 100%;
/* 宽度占满屏幕 */
z-index: 999;
/* 确保在最上层 */
background-color: #c01d1d !important;
color: #fff !important;
// position: fixed;
/* 固定在顶部 */
top: 0;
left: 0;
width: 100%;
/* 宽度占满屏幕 */
z-index: 999;
/* 确保在最上层 */
background-color: #c01d1d !important;
color: #fff !important;
}
.shuadanBtm {
padding-bottom: 80px;
/* 根据你 footer 的高度来调整 */
padding-bottom: 80px;
/* 根据你 footer 的高度来调整 */
}
/* 标题文字 */
::v-deep(.nav-bar .van-nav-bar__title) {
color: #fff !important;
color: #fff !important;
}
.shuadanBtm[data-v-3b3fbaa9] {
padding: 15px
padding: 15px;
}
.shuadanBtm>div[data-v-3b3fbaa9]:first-child {
color: #000;
text-align: center;
font-weight: 700
.shuadanBtm > div[data-v-3b3fbaa9]:first-child {
color: #000;
text-align: center;
font-weight: 700;
}
.shuadanBtm .Rechargelist .item>div[data-v-3b3fbaa9] {
display: flex;
justify-content: space-between;
flex-wrap: wrap
.shuadanBtm .Rechargelist .item > div[data-v-3b3fbaa9] {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.shuadanBtm .Rechargelist .item>div>div[data-v-3b3fbaa9] {
width: 49%
.shuadanBtm .Rechargelist .item > div > div[data-v-3b3fbaa9] {
width: 49%;
}
.shuadanBtm .Rechargelist .item>div img[data-v-3b3fbaa9] {
width: 100%;
height: 27vw;
-o-object-fit: cover;
object-fit: cover;
margin-top: 10px;
display: block;
border-radius: 8px
.shuadanBtm .Rechargelist .item > div img[data-v-3b3fbaa9] {
width: 100%;
height: 27vw;
-o-object-fit: cover;
object-fit: cover;
margin-top: 10px;
display: block;
border-radius: 8px;
}
.shuadanBtm .Rechargelist .item>div .firstimg[data-v-3b3fbaa9] {
width: 49%;
height: 56vw
.shuadanBtm .Rechargelist .item > div .firstimg[data-v-3b3fbaa9] {
width: 49%;
height: 56vw;
}
.masonry-wrap{
padding: 8px; /* 外层留白,像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
.masonry-wrap {
padding: 8px; /* 外层留白,像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键:多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列;也可做响应式 */
.masonry {
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列;也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item{
break-inside: avoid; /* 避免跨列断开 */
margin-bottom: 12px; /* 垂直间距 */
border-radius: 12px; /* 圆角卡片 */
overflow: hidden; /* 裁剪图片圆角 */
background: #fff; /* 有轻微“卡片感” */
.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);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.masonry-item img{
.masonry-item img {
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”,保留 */
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”,保留 */
}
.Income {
padding: 15px;
background: linear-gradient(90deg, #323233, #000);
color: #fff;
border-radius: 10px;
margin-top: 10px;
.IncomeMain {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
& > div {
flex: 0 0 50%;
& > div :first-child {
font-weight: 700;
}
p {
margin: 5px 0;
&:first-child {
font-weight: 700;
}
}
}
}
.IncomeRules {
padding: 15px 15px 0;
}
.GrabOrder {
border-radius: 8px;
padding: 30px 0;
text-align: center;
font-size: 1.2rem;
margin-top: 20px;
// line-height: 7vw;
background: #fff;
color: #000;
}
& > div:first-child {
border-bottom: 1px solid #fff;
padding-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.wrap {
padding: 5px;
}
</style>
<template>
<div class="home-container px">
<!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__content" style="background-color: black">
<van-icon @click="$router.back()" name="arrow-left" color="#fff" />
<div
class="van-nav-bar__title van-ellipsis"
style="
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
"
>
ORDERS
</div>
<div @click="openHotelChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color: #fff"></i>
</div>
</div>
</div>
<div class="order">
<div
v-if="images && images.length"
style="position: relative; margin-top: 2px"
>
<van-swipe :autoplay="3000" style="height: 200px">
<van-swipe-item v-for="(item, index) in images" :key="index">
<img
:src="fullUrl1(item.url)"
style="width: 100%; height: 200px; object-fit: cover"
/>
</van-swipe-item>
</van-swipe>
</div>
<div class="tab-box">
<div
@click="tabIndex = item.value"
v-for="item in tabs"
:key="item.value"
:class="tabIndex == item.value ? 'active' : ''"
>
{{ item.text }}
</div>
</div>
<div class="content">
<div class="list" v-for="(item,index) in orderData" :key="index">
<div class="header">
<div class="left">
<div class="time">Submission time:{{ item.update_time }}</div>
<van-button
style="margin-top: 5px"
:round="true"
size="small"
plain
type="success"
>{{tabs[tabIndex].text}}</van-button
>
</div>
<van-button
class="border-none"
:hairline="false"
color="#2a2a2a"
type="success"
>Pay</van-button
>
</div>
<div class="pr-detail">
<div class="pr-left">
<van-image src="./img/c_bg1.jpg"></van-image>
</div>
<div class="pr-right">
<div class="title">{{item.goods_name}}</div>
<div class="tag">
<span>{{10.0}}</span>
</div>
<div class="bb">
<span>{{item.orderNo}}</span>
</div>
<div class="num"><span>{{item.goods_price}} $</span></div>
<div class="desc"><span>Includes taxes and service charges</span></div>
</div>
</div>
<div class="desc-list">
<span>Total amount</span>
<span>1524.48</span>
</div>
<div class="desc-list">
<span>Order quantity</span>
<span>1</span>
</div>
<div class="desc-list">
<span>Expected return</span>
<span>228.82</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { openChat1 } from "@/utils/chat";
import { jiudianList, lunbo,payOrder,orderList } from "@/api/contract";
import { nowLocationUrl } from "@/utils/tools";
import router from "@/router";
export default {
data() {
return {
images: [],
tabs: [
{ text: "Pending", value: 0 },
{ text: "Freeze", value: 1 },
{ text: "Completed", value: 2 },
],
tabIndex: 0,
orderData:[]
};
},
methods: {
openHotelChat() {
openChat1();
},
fullUrl1(p) {
if (!p) return "";
return nowLocationUrl + p;
},
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);
},
getOrderList(){
orderList({
status:0,
page:1,
size:999
}).then(res=>{
this.orderData=res.data;
})
}
},
mounted() {
this.getLunBoHotel();
this.getOrderList();
},
};
</script>
<style lang="scss" scoped>
.order {
// padding: 5px;
.tab-box {
display: flex;
& > div {
flex: 0 0 33%;
display: flex;
justify-content: center;
height: 120px;
align-items: center;
color: #8d8d8d;
&.active {
color: #000;
}
}
}
.content {
padding: 0 20px;
.list {
border-bottom: 1px solid #fafafa;
.header {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.pr-detail {
display: flex;
margin-top: 30px;
margin-bottom: 30px;
.pr-left {
width: 45%;
}
.pr-right {
margin-left: 20px;
.title{
font-size: 1.1rem;
font-weight: bold;
}
.tag{
margin: 30px 0;
span{
background: #755153;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
font-size: .8rem;
}
}
.bb{
margin-bottom: 20px;
span{
font-size: 1.1rem;
background: #000;
padding: 5px 20px;
color: #fff;
}
}
.num{
margin-bottom: 20px;
display: flex;
font-weight: bold;
justify-content: flex-end;
}
.desc{
color: #848484;
font-size: .8rem;
display: flex;
justify-content: flex-end;
}
}
}
.desc-list{
display: flex;
justify-content: space-between;
color: #787878;
margin-bottom: 15px;
}
}
}
}
.van-button.border-none {
border: none;
}
</style>
......@@ -1359,7 +1359,7 @@ export default {
font-weight: 500;
}
.mask {
background-color: rgb(0 0 0 / 0%);
// background-color: rgb(0 0 0 / 0%);
animation-duration: 0.35s;
}
.play-type-tip .wrapper {
......
......@@ -33,6 +33,8 @@ import Pay from '../pages/mine/Pay'/* 充值 */
import News from '../pages/news'/* 栏目 */
import Details from '../pages/choose/details'
import ConfirmPassword from '../pages/mine/ConfirmPassword'
import order from '../pages/guide/order.vue'
......@@ -137,6 +139,11 @@ const routes = [
path: '/imgShow',
name: 'imgShow',
component: () => import('../pages/home/imgShow.vue')
},
{
path: '/order',
name: 'order',
component: () => import('../pages/guide/order.vue')
}
];
......
......@@ -63,7 +63,7 @@ module.exports = {
"/headerimg": {
// target: "https://gp.nyes.xyz" /**/,
// target: "https://kjbpweb.testurl008.xyz" /**/,
target:delegateUrl,
target:'https://dgkj.tkst022.xyz/',
// target: "https://www.dropsx.xyz" /**/,
// target: process.env.test.VUE_APP_SERVER, /**/
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论