提交 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 @@ ...@@ -35,21 +35,24 @@
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.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": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1", "less": "^4.1.1",
"less-loader": "^7.3.0", "less-loader": "^6.2.0",
"postcss-px-to-viewport": "^1.1.1", "postcss-px-to-viewport": "^1.1.1",
"postcss-pxtorem": "^6.0.0", "postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5", "sass": "^1.69.5",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"style-loader": "^3.2.1", "style-loader": "^1.3.0",
"stylus": "^0.55.0", "stylus": "^0.55.0",
"stylus-loader": "^6.1.0", "stylus-loader": "^3.0.2",
"swiper": "^6.8.4", "swiper": "^6.8.4",
"vue-awesome-swiper": "^3.1.3", "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": { "eslintConfig": {
"root": true, "root": true,
......
...@@ -106,6 +106,34 @@ export function gongGao () { ...@@ -106,6 +106,34 @@ 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> <template>
<div class="home-container px"> <div class="home-container px">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom"> <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__content" style="background-color: black">
<div class="van-nav-bar__title van-ellipsis" style="font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; <div
class="van-nav-bar__title van-ellipsis"
style="
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: #fff; color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);"> text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
"
>
HotelS HotelS
</div> </div>
<div @click="openHotelChat" class="van-nav-bar__right"> <div @click="openHotelChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color:#fff;"></i> <i class="van-icon van-icon-chat-o" style="color: #fff"></i>
</div> </div>
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="wrap"> <div class="wrap">
<div
<div v-if="images && images.length" style="position: relative; margin-top:2px;"> v-if="images && images.length"
style="position: relative; margin-top: 2px"
>
<!-- 轮播 --> <!-- 轮播 -->
<van-swipe :autoplay="3000" style="height:200px;"> <van-swipe :autoplay="3000" style="height: 200px">
<van-swipe-item v-for="(item, index) in images" :key="index"> <van-swipe-item v-for="(item, index) in images" :key="index">
<img :src="fullUrl1(item.url)" 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>
<!-- 单独的文字块 --> <!-- 单独的文字块 -->
<div style="position: absolute; bottom: 0; left: 0; width: 100%; <div
background: rgba(0,0,0,0.4); color:#fff; style="
font-size: 12px; padding: 12px; position: absolute;
border-radius: 10px 10px 0 0; box-sizing:border-box"> bottom: 0;
Booking.com bietet mehr als 28 Millionen Unterkünfte, darunter über 6 Millionen left: 0;
Ferienwohnungen, Apartments und andere einzigartige Unterkünfte. width: 100%;
Egal, wohin du reisen möchtest und was du tun möchtest, Booking.com bietet einen background: rgba(0, 0, 0, 0.4);
rund um die Uhr verfügbaren Kundenservice, der alles einfach macht. 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> </div>
<div style="display: flex;align-items: center;justify-content: center;padding: 10px;"> <div class="Income">
<span style="font-size: 20px;font-weight: bold;">Bellebte Hotels</span> <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>
<div style="margin-top: 5px;" class="masonry-wrap"> <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 class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item"> <div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
<img @click="tapImgItem(item)" :src="fullUrl(item.img_url)" alt="" loading="lazy"> <img
@click="tapImgItem(item)"
:src="fullUrl(item.img_url)"
alt=""
loading="lazy"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -102,16 +179,16 @@ ...@@ -102,16 +179,16 @@
</div> </div>
</div> </div>
</div> --> </div> -->
</div> </div>
<div style="height:80px;"></div> <div style="height: 80px"></div>
</div> </div>
</template> </template>
<script> <script>
import { jiudianList,lunbo } from '@/api/contract' import { jiudianList, lunbo,allInfo,createOrder } from "@/api/contract";
import { openChat1 } from '@/utils/chat' import router from "@/router";
import { nowLocationUrl } from '@/utils/tools' import { openChat1 } from "@/utils/chat";
import { nowLocationUrl } from "@/utils/tools";
// import Footer from '@/components/footer'; // import Footer from '@/components/footer';
export default { export default {
...@@ -122,10 +199,12 @@ export default { ...@@ -122,10 +199,12 @@ export default {
// {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"} // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
], ],
hotelList: [], hotelList: [],
origin: '', origin: "",
origin1: '', origin1: "",
swipeKey: 0, swipeKey: 0,
} tipsShow:false,
info:{}
};
}, },
/** /**
* *
...@@ -134,53 +213,66 @@ export default { ...@@ -134,53 +213,66 @@ export default {
// nima() { // nima() {
// this.$router.push({ path: "/detail" }) // this.$router.push({ path: "/detail" })
// }, // },
async getLunBoHotel(){ async getLunBoHotel() {
const res = await lunbo({ is_index: 0 }) const res = await lunbo({ is_index: 0 });
if (res.code === 200) { if (res.code === 200) {
this.images = Array.isArray(res.data) ? res.data : (res.data?.list || []) this.images = Array.isArray(res.data) ? res.data : res.data?.list || [];
} }
console.log('酒店轮播图:',res.data) console.log("酒店轮播图:", res.data);
}, },
async getJiuDianList() { async getJiuDianList() {
const res = await jiudianList() const res = await jiudianList();
if(res.code == 200){ if (res.code == 200) {
this.hotelList = res.data this.hotelList = res.data;
} }
console.log('输出的酒店列表:',res) console.log("输出的酒店列表:", res);
}, },
fullUrl (p) { fullUrl(p) {
if (!p) return '' if (!p) return "";
// 自动处理前导/结尾斜杠、相对/绝对路径 // 自动处理前导/结尾斜杠、相对/绝对路径
try { return new URL(p, this.origin).href } try {
catch (e) { return new URL(p, this.origin).href;
const a = (this.origin || '').replace(/\/+$/, '') } catch (e) {
const b = String(p).replace(/^\/+/, '') const a = (this.origin || "").replace(/\/+$/, "");
return a && b ? `${a}/${b}` : (b || a) const b = String(p).replace(/^\/+/, "");
return a && b ? `${a}/${b}` : b || a;
} }
}, },
fullUrl1 (p) { fullUrl1(p) {
if (!p) return '' if (!p) return "";
return nowLocationUrl + p return nowLocationUrl + p;
}, },
tapImgItem(item){ tapImgItem(item) {
this.$router.push({ path: "/detail",query: { id: String(item.id) } },) this.$router.push({ path: "/detail", query: { id: String(item.id) } });
},
openHotelChat() {
openChat1();
}, },
openHotelChat(){ getInfo(){
openChat1() allInfo().then(res=>{
console.log(res,'info')
this.info=res.data || {};
})
},
onCreateOrder(){
createOrder().then(res=>{
})
} }
}, },
mounted() { mounted() {
this.origin = nowLocationUrl this.origin = nowLocationUrl;
this.origin1 = nowLocationUrl this.origin1 = nowLocationUrl;
this.getLunBoHotel() this.getLunBoHotel();
this.getJiuDianList() this.getJiuDianList();
},
} this.getInfo();
},
};
</script> </script>
<style lang='less' scoped> <style lang="less" scoped>
/* 置顶导航条 */ /* 置顶导航条 */
::v-deep(.nav-bar.newnavbar.van-nav-bar) { ::v-deep(.nav-bar.newnavbar.van-nav-bar) {
// position: fixed; // position: fixed;
...@@ -205,70 +297,121 @@ export default { ...@@ -205,70 +297,121 @@ export default {
color: #fff !important; color: #fff !important;
} }
.shuadanBtm[data-v-3b3fbaa9] { .shuadanBtm[data-v-3b3fbaa9] {
padding: 15px padding: 15px;
} }
.shuadanBtm>div[data-v-3b3fbaa9]:first-child { .shuadanBtm > div[data-v-3b3fbaa9]:first-child {
color: #000; color: #000;
text-align: center; text-align: center;
font-weight: 700 font-weight: 700;
} }
.shuadanBtm .Rechargelist .item>div[data-v-3b3fbaa9] { .shuadanBtm .Rechargelist .item > div[data-v-3b3fbaa9] {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap flex-wrap: wrap;
} }
.shuadanBtm .Rechargelist .item>div>div[data-v-3b3fbaa9] { .shuadanBtm .Rechargelist .item > div > div[data-v-3b3fbaa9] {
width: 49% width: 49%;
} }
.shuadanBtm .Rechargelist .item>div img[data-v-3b3fbaa9] { .shuadanBtm .Rechargelist .item > div img[data-v-3b3fbaa9] {
width: 100%; width: 100%;
height: 27vw; height: 27vw;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
margin-top: 10px; margin-top: 10px;
display: block; display: block;
border-radius: 8px border-radius: 8px;
} }
.shuadanBtm .Rechargelist .item>div .firstimg[data-v-3b3fbaa9] { .shuadanBtm .Rechargelist .item > div .firstimg[data-v-3b3fbaa9] {
width: 49%; width: 49%;
height: 56vw height: 56vw;
} }
.masonry-wrap {
.masonry-wrap{
padding: 8px; /* 外层留白,像截图那样 */ padding: 8px; /* 外层留白,像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */ background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px; border-radius: 12px;
} }
/* 关键:多列布局 */ /* 关键:多列布局 */
.masonry{ .masonry {
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */ column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列;也可做响应式 */ column-count: 2; /* 固定两列;也可做响应式 */
} }
/* 让每个卡片在列中独立排布且不被拆分 */ /* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item{ .masonry-item {
break-inside: avoid; /* 避免跨列断开 */ break-inside: avoid; /* 避免跨列断开 */
margin-bottom: 12px; /* 垂直间距 */ margin-bottom: 12px; /* 垂直间距 */
border-radius: 12px; /* 圆角卡片 */ border-radius: 12px; /* 圆角卡片 */
overflow: hidden; /* 裁剪图片圆角 */ overflow: hidden; /* 裁剪图片圆角 */
background: #fff; /* 有轻微“卡片感” */ 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; display: block;
width: 100%; width: 100%;
height: auto; /* 让高度随比例变化 */ height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”,保留 */ 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> </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 { ...@@ -1359,7 +1359,7 @@ export default {
font-weight: 500; font-weight: 500;
} }
.mask { .mask {
background-color: rgb(0 0 0 / 0%); // background-color: rgb(0 0 0 / 0%);
animation-duration: 0.35s; animation-duration: 0.35s;
} }
.play-type-tip .wrapper { .play-type-tip .wrapper {
......
...@@ -33,6 +33,8 @@ import Pay from '../pages/mine/Pay'/* 充值 */ ...@@ -33,6 +33,8 @@ import Pay from '../pages/mine/Pay'/* 充值 */
import News from '../pages/news'/* 栏目 */ import News from '../pages/news'/* 栏目 */
import Details from '../pages/choose/details' import Details from '../pages/choose/details'
import ConfirmPassword from '../pages/mine/ConfirmPassword' import ConfirmPassword from '../pages/mine/ConfirmPassword'
import order from '../pages/guide/order.vue'
...@@ -137,6 +139,11 @@ const routes = [ ...@@ -137,6 +139,11 @@ const routes = [
path: '/imgShow', path: '/imgShow',
name: 'imgShow', name: 'imgShow',
component: () => import('../pages/home/imgShow.vue') component: () => import('../pages/home/imgShow.vue')
},
{
path: '/order',
name: 'order',
component: () => import('../pages/guide/order.vue')
} }
]; ];
......
...@@ -63,7 +63,7 @@ module.exports = { ...@@ -63,7 +63,7 @@ module.exports = {
"/headerimg": { "/headerimg": {
// target: "https://gp.nyes.xyz" /**/, // target: "https://gp.nyes.xyz" /**/,
// target: "https://kjbpweb.testurl008.xyz" /**/, // target: "https://kjbpweb.testurl008.xyz" /**/,
target:delegateUrl, target:'https://dgkj.tkst022.xyz/',
// target: "https://www.dropsx.xyz" /**/, // target: "https://www.dropsx.xyz" /**/,
// target: process.env.test.VUE_APP_SERVER, /**/ // 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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论