Init project
This commit is contained in:
lifizer
@@ -0,0 +1,341 @@
|
||||
<script>
|
||||
import {getHotelList, getHotelTypeList} from "@/api/inn.js";
|
||||
import {getCurAddress, getLocation} from "@/utils/common";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
name: "",
|
||||
page: 1,
|
||||
typeList: [],
|
||||
typeIndex: 0,
|
||||
cityName: "昆明市",
|
||||
hotelList: [],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getMapData();
|
||||
getHotelTypeList().then(({data}) => {
|
||||
this.typeList = data;
|
||||
this.search();
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
let memCityName = uni.getStorageSync("cityName")
|
||||
|
||||
if (memCityName.length) {
|
||||
this.cityName = memCityName;
|
||||
uni.removeStorageSync("cityName")
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
goCity() {
|
||||
uni.navigateTo({
|
||||
url: `/components/chose-city/chose-city?type=2&city=${this.cityName}`
|
||||
})
|
||||
},
|
||||
|
||||
goInnDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInn/inn/innHome?id=${item.id}`
|
||||
})
|
||||
},
|
||||
|
||||
async getMapData() {
|
||||
const map = await getLocation();
|
||||
if (map.length > 1) {
|
||||
const {latitude, longitude} = map[1];
|
||||
const address = await getCurAddress(latitude, longitude);
|
||||
this.cityName = address[1].data.result.ad_info.city;
|
||||
}
|
||||
},
|
||||
|
||||
// getCurAddress() {
|
||||
// let that = this;
|
||||
// //定位
|
||||
// uni.showLoading({
|
||||
// title: '定位中...'
|
||||
// });
|
||||
//
|
||||
// uni.getLocation({
|
||||
// type: 'wgs84',
|
||||
// success: function (res) {
|
||||
// let latitude = res.latitude;
|
||||
// let longitude = res.longitude;
|
||||
//
|
||||
// // #ifndef H5
|
||||
// uni.request({
|
||||
// url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
|
||||
// '&key=' + config.key,
|
||||
// success: function (res) {
|
||||
// uni.hideLoading();
|
||||
//
|
||||
// that.cityName = res.data.result.ad_info.city;
|
||||
// //定位成功刷新数据
|
||||
// that.search()
|
||||
// },
|
||||
// fail: function () {
|
||||
// uni.hideLoading();
|
||||
// },
|
||||
// complete: function () {
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
// },
|
||||
// fail: function (err) {
|
||||
// console.log("test",err)
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
tapType(index) {
|
||||
if (this.typeIndex === index) return;
|
||||
this.typeIndex = index;
|
||||
this.search();
|
||||
},
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.hotelList = [];
|
||||
this.fetchList();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
page: this.page,
|
||||
type: this.typeList[this.typeIndex].id,
|
||||
cityName: this.cityName
|
||||
};
|
||||
let name = this.name.trim();
|
||||
if (name.length > 0) param.name = name;
|
||||
getHotelList(param).then(res => {
|
||||
if (res.status === 200) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
res.data[i].hide = true;
|
||||
this.hotelList.push(res.data[i])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="have-fun">
|
||||
<u-navbar title="寻趣味" height="90rpx">
|
||||
<view slot="left"> </view>
|
||||
</u-navbar>
|
||||
<view class="top-box">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="name" placeholder="搜索店铺" placeholder-style="color:#949494"
|
||||
@confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill"
|
||||
@click="search"/>
|
||||
</view>
|
||||
|
||||
<scroll-view class="type-box flex" scroll-x enable-flex>
|
||||
<view class="item flex-0 flex flex-col jc-center ai-center" :class="{'active':typeIndex===index}"
|
||||
v-for="(item,index) in typeList" :key="index" @click="tapType(index)">
|
||||
<image :src="item.icon" mode="scaleToFill"/>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="body">
|
||||
<view class="flex jc-end">
|
||||
<view class="city-box" @click="goCity('cloud')">
|
||||
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
||||
<text>{{ cityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" v-if="hotelList.length">
|
||||
<custom-waterfalls-flow :value="hotelList" imageKey="cover">
|
||||
<view class="item" v-for="(item,index) in hotelList" slot="slot{{index}}"
|
||||
@click="goInnDetail(item)">
|
||||
<view class="cover-box">
|
||||
<image class="cover" :src="item.cover" mode="scaleToFill"></image>
|
||||
<view class="my-mask">
|
||||
<image class="icon" :src="webUrl+'/20220510142728577618.png'"
|
||||
mode="scaleToFill"></image>
|
||||
<text>{{ item.cityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-t">{{ item.content }}</view>
|
||||
<view class="flex ai-center" style="margin-bottom: 18rpx;">
|
||||
<image class="logo" :src="item.logo" mode="scaleToFill" v-if="item.logo"></image>
|
||||
<image class="logo" :src="webUrl+'/20230609145651814148.png'" v-else/>
|
||||
<text class="one-t">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.have-fun {
|
||||
padding-top: 120rpx;
|
||||
|
||||
.top-box {
|
||||
padding: 60rpx 0 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.search-box {
|
||||
width: 686rpx;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
padding: 0 24rpx 0 32rpx;
|
||||
border: 2rpx solid #BBD2D2;
|
||||
border-radius: 30rpx;
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type-box {
|
||||
height: 180rpx;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 20rpx 0 48rpx;
|
||||
|
||||
.item {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 26rpx;
|
||||
|
||||
image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 12rpx;
|
||||
color: #949494;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #DCF2FE;
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 20rpx 32rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.city-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 18rpx 8rpx 16rpx;
|
||||
border-radius: 30px;
|
||||
background: #fff;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 328rpx;
|
||||
height: 328rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-top: -6rpx;
|
||||
margin-right: 6rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
vertical-align: middle;
|
||||
margin: 0 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 328rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cover-box {
|
||||
position: relative;
|
||||
width: 328rpx;
|
||||
height: auto;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.my-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(rgba(51, 51, 51, 0), rgba(0, 0, 0, 1));
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.more-t {
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .waterfalls-flow-column .column-value {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user