Feat： 寻趣味改版（新增古镇模块）
This commit is contained in:
linxi
+18
@@ -241,3 +241,21 @@ export function hotelNewsView(data) {
|
||||
export function getFarmerShop(id) {
|
||||
return request.get("/api/countyFamous/farmerShop/" + id)
|
||||
}
|
||||
|
||||
export function getAncientTownIcon() {
|
||||
return request.get("/ancientTown/icon")
|
||||
}
|
||||
|
||||
export function getAncientTownList(params) {
|
||||
return request.get("/ancientTown", params)
|
||||
}
|
||||
|
||||
export function getAncientTownInfo(id) {
|
||||
return request.get("/ancientTown/" + id)
|
||||
}
|
||||
|
||||
export function getAncientTownActive(params) {
|
||||
return request.get("/ancientTown/activity", params)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -169,7 +169,9 @@ each(@colors, {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.v12-gap-10{
|
||||
grid-gap: 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.v12-text-right{
|
||||
text-align: right;
|
||||
|
||||
@@ -106,6 +106,13 @@
|
||||
"navigationBarTitleText": "探索生活好去处"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/town/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "探索生活好去处"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/User/index",
|
||||
"style": {
|
||||
|
||||
+142
-21
@@ -26,20 +26,39 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="type-box flex" scroll-x enable-flex>
|
||||
<view
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
:class="{
|
||||
'active': typeIndex === index
|
||||
}"
|
||||
class="item flex-0 flex flex-col jc-center ai-center"
|
||||
@click="tapType(index)"
|
||||
>
|
||||
<image :src="item.icon" mode="scaleToFill"/>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view>
|
||||
|
||||
<scroll-view class="type-box flex" scroll-x enable-flex>
|
||||
<view class="first-box">
|
||||
<view class="first-box__inner">
|
||||
<view
|
||||
:class="{
|
||||
'active': typeIndex === -1
|
||||
}"
|
||||
class="item flex-0 flex flex-col jc-center ai-center"
|
||||
@click="tapType(-1)"
|
||||
>
|
||||
<image :src="townConfig.icon" mode="scaleToFill"/>
|
||||
<view class="name">{{ townConfig.label }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-box">
|
||||
<view
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
:class="{
|
||||
'active': typeIndex === index
|
||||
}"
|
||||
class="item flex-0 flex flex-col jc-center ai-center"
|
||||
@click="tapType(index)"
|
||||
>
|
||||
<image :src="item.icon" mode="scaleToFill"/>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="type-banner-wrap">
|
||||
<view v-if="currType.titleImage" class="title">
|
||||
@@ -71,7 +90,16 @@
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="body" v-if="typeIndex === -1">
|
||||
<view class="town-card" v-for="(town, i) in townList" :key="i" @click="toTown(town)">
|
||||
<view class="town-title">{{ town.name }}</view>
|
||||
<image :src="town.frontImage" mode="scaleToFill"/>
|
||||
<view class="v12-primary enter-btn">点击进入
|
||||
<view class="icon-box"><u-icon name="arrow-rightward" color="#fff" size="8"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body" v-else>
|
||||
<view>
|
||||
<text class="v12-font-bold" v-if="currType.carousel">推荐</text>
|
||||
</view>
|
||||
@@ -114,7 +142,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getHotelList, getHotelTypeList } from "@/api/inn.js"
|
||||
import { getHotelList, getHotelTypeList, getAncientTownIcon, getAncientTownList } from "@/api/inn.js"
|
||||
import { getCurAddress, getLocation } from "@/utils/common"
|
||||
import FunHotelItem from './components/HotelItem'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
@@ -131,14 +159,16 @@ export default {
|
||||
name: '',
|
||||
page: 1,
|
||||
typeList: [],
|
||||
typeIndex: 0,
|
||||
typeIndex: -1,
|
||||
// 当前选中的类型
|
||||
currType: {},
|
||||
cityName: '',
|
||||
hotelList: [],
|
||||
isLoad: false,
|
||||
pageKeyId: Object.freeze('findFunIndex'),
|
||||
isNext: false
|
||||
isNext: false,
|
||||
townConfig: {},
|
||||
townList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -162,10 +192,10 @@ export default {
|
||||
this.currType = {}
|
||||
getHotelTypeList().then(({data}) => {
|
||||
this.typeList = data
|
||||
this.currType = data[this.typeIndex]
|
||||
this.currType = this.typeIndex === -1 ? {} : data[this.typeIndex]
|
||||
this.getMapData()
|
||||
})
|
||||
|
||||
this.getIcon()
|
||||
},
|
||||
onShow() {
|
||||
const memCityName = uni.getStorageSync('cityName')
|
||||
@@ -190,6 +220,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toTown(town) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/town/index?id=${town.id}`
|
||||
})
|
||||
},
|
||||
getIcon() {
|
||||
getAncientTownIcon().then(res => {
|
||||
this.townConfig = res.data
|
||||
})
|
||||
},
|
||||
goCity() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/chose-city/chose-city?type=2&city=${this.cityName}`
|
||||
@@ -212,9 +252,11 @@ export default {
|
||||
}
|
||||
},
|
||||
tapType(index) {
|
||||
|
||||
if (this.typeIndex === index) return
|
||||
this.typeIndex = index
|
||||
this.currType = this.typeList[index]
|
||||
|
||||
this.currType = index === -1 ? {} : this.typeList[index]
|
||||
this.name = ''
|
||||
this.search()
|
||||
},
|
||||
@@ -225,6 +267,17 @@ export default {
|
||||
this.fetchList()
|
||||
},
|
||||
fetchList() {
|
||||
if(this.typeIndex === -1) {
|
||||
const params = {
|
||||
cityName: this.name,
|
||||
page: 1,
|
||||
limit: 999
|
||||
}
|
||||
getAncientTownList(params).then(res => {
|
||||
this.townList = res.data.records
|
||||
})
|
||||
return
|
||||
}
|
||||
const param = {
|
||||
page: this.page,
|
||||
type: this.typeList[this.typeIndex].id,
|
||||
@@ -267,6 +320,74 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.icon-box{
|
||||
border: 1rpx solid #fff;
|
||||
border-radius: 100%;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
margin-left: 5rpx;
|
||||
padding: 2rpx;
|
||||
}
|
||||
.enter-btn{
|
||||
color: #fff;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 30rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.town-title{
|
||||
border-radius: 100rpx;
|
||||
/* border-color: #333; */
|
||||
// mix-blend-mode: difference;
|
||||
width: fit-content;
|
||||
padding: 5rpx 20rpx;
|
||||
border: 1rpx solid #fff;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.town-card{
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30rpx;
|
||||
image{
|
||||
width: -webkit-fit-content;
|
||||
width: inherit;
|
||||
height: -webkit-fit-content;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
.first-box{
|
||||
padding-right: 15rpx;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: #f5f5f5;
|
||||
z-index: 9;
|
||||
}
|
||||
.first-box__inner{
|
||||
padding: 10rpx;
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.scroll-box{
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
background: #fff;
|
||||
padding: 10rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.search-btn{
|
||||
position: absolute;
|
||||
top: 2rpx;
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="culture v12-d-grid-columns-2">
|
||||
<view class="img-item " v-for="(item, index) in list" :key="index" @click="viewImg(item)">
|
||||
<image class="img-item" :src="item" mode="widthFix|heightFix" lazy-load="false"></image>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
v-if="list.length === 0"
|
||||
:src="webUrl + '/orderIcon/wu.png'"
|
||||
class="img-nodata"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
landmarkDataId(value) {
|
||||
if(value) {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
viewImg(item) {
|
||||
uni.previewImage({
|
||||
current: item, // 当前显示图片的http链接
|
||||
urls: this.list || [] // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.culture{
|
||||
grid-gap: 20rpx 20rpx;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.img-item{
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="infoArray.length > 0" class="info-wrapper">
|
||||
<view class="info-list">
|
||||
<view v-for="(item, index) in infoArray" :key="index" class="info-item">
|
||||
<view
|
||||
:class="item.isTop === 1 ? 'info-item-top' : ''"
|
||||
:style="{
|
||||
'background-image': item.isTop
|
||||
? 'url(' + webUrl + '/page/hotel/info-top-bg.png)'
|
||||
: 'none',
|
||||
}"
|
||||
class="info-item-header"
|
||||
>
|
||||
<view class="name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="intro">
|
||||
{{ item.intro }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item-body">
|
||||
<img-box
|
||||
:imgList="item.images"
|
||||
:num="item.images.length"
|
||||
:img-radius="10"
|
||||
style="width: 100%"
|
||||
@click="infoItemViewClick(item)"
|
||||
/>
|
||||
</view>
|
||||
<view class="info-item-bottom">
|
||||
<view class="time">
|
||||
{{
|
||||
item.createTime
|
||||
? item.createTime.replace(/-/g, ".").substr(0, 10)
|
||||
: ""
|
||||
}}
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view class="flex">
|
||||
<image
|
||||
:src="webUrl + '/20230803152147141807.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<text class="seeNum-txt v12-font-28">{{ item.pv }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="no-data-loadend"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
v-if="infoArray.length === 0"
|
||||
:src="webUrl + '/orderIcon/wu.png'"
|
||||
class="img-nodata"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getNews,
|
||||
hadLike,
|
||||
hadView
|
||||
} from "@/api/product"
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
export default {
|
||||
props: {
|
||||
infoArray: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
imgBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
likeInfoItemHandle(item, index, value, voValue) {
|
||||
hadLike({ landmarkNewsId: item.id }).then(res => {
|
||||
const { success } = res
|
||||
if (success) {
|
||||
this.$dialog.toast({
|
||||
mes: '操作成功!'
|
||||
})
|
||||
this.$set(this.infoArray[index], 'zan', value)
|
||||
this.$set(this.infoArray[index], 'hasZan', voValue)
|
||||
}
|
||||
})
|
||||
},
|
||||
infoItemViewClick(item) {
|
||||
uni.$u.debounce(() => {
|
||||
hadView({ landmarkNewsId: item.id }).finally(() => {
|
||||
this.infoArray.map(info => {
|
||||
if (info.id === item.id) {
|
||||
info.pv += 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info-wrapper{
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.info-item + .info-item {
|
||||
margin: 22rpx 0 0 0;
|
||||
}
|
||||
.info-item {
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
.info-item-header {
|
||||
position: relative;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
&.info-item-top {
|
||||
padding-top: 60rpx;
|
||||
background-size: 100% 80rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url();
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.intro {
|
||||
margin: 10rpx 0 0 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.info-item-body {
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
.video {
|
||||
padding: 20rpx 0 0 0;
|
||||
.video-item {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
font-size: 16px;
|
||||
.time {
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
color: #999;
|
||||
.flex + .flex {
|
||||
margin: 0 0 0 32rpx;
|
||||
}
|
||||
.flex {
|
||||
align-items: center;
|
||||
}
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin: 0 8rpx 0 0;
|
||||
}
|
||||
.zan-off-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.zan-on-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.seeNum-txt {
|
||||
&.on {
|
||||
color: #D81E06;
|
||||
}
|
||||
}
|
||||
.more-btn {
|
||||
position: relative;
|
||||
.more-wrapper {
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
top: -150rpx;
|
||||
z-index: 5;
|
||||
width: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
|
||||
.more-item + .more-item {
|
||||
border-top: 1px solid #d5d5d5;
|
||||
}
|
||||
.more-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70rpx;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
.more-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-item-top {
|
||||
padding-top: 60rpx;
|
||||
background-size: 100% 80rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url();
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.intro {
|
||||
margin: 10rpx 0 0 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view class="projects">
|
||||
<view class="tabs-wrap">
|
||||
<view
|
||||
@click="handleTab(item.value)"
|
||||
class="tab-item"
|
||||
:class="{
|
||||
'tab-isActived': actived === item.value
|
||||
}"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index">
|
||||
<view
|
||||
:class="{
|
||||
'tab-isActived': actived === item.value,
|
||||
'no-actived-1': actived === 2 && item.value === 1,
|
||||
'no-actived-2': actived === 1 && item.value === 2,
|
||||
'no-actived-3': actived === 3 && item.value === 2,
|
||||
'no-actived-4': actived === 2 && item.value === 3,
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="content v12-justify-center"
|
||||
:class="{
|
||||
'first-one': actived === 1,
|
||||
'last-one': actived === 3
|
||||
}"
|
||||
|
||||
>
|
||||
<view class="v12-d-grid-columns-2 v12-gap-10">
|
||||
<view v-for="(item, index) in items" :key="index" class="store-card">
|
||||
<view>
|
||||
<image class="town-cover" :src="item.cover" mode="aspectFit|aspectFill|widthFix"></image>
|
||||
</view>
|
||||
<view class="v12-pa-2">
|
||||
<view class="v12-dark-text v12-font-bold v12-font-30 v12-py-1 more-t">昆明小吃</view>
|
||||
<view class="v12-align-center">
|
||||
<view class="avtor">
|
||||
<image class="avtor"></image>
|
||||
</view>
|
||||
<view class="v12-secondary-dark-text v12-font-28 v12-ml-3 one-t">刘欢小吃</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
default:() => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
actived: 1,
|
||||
items: [],
|
||||
itemsMap: {
|
||||
1: 'project1Hotels',
|
||||
2: 'project2Hotels',
|
||||
3: 'project3Hotels'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
info(value) {
|
||||
this.items = value && value[this.itemsMap[this.actived]]
|
||||
},
|
||||
actived: {
|
||||
handler(value) {
|
||||
this.items = this.info && this.info[this.itemsMap[value]]
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.info && [
|
||||
{name: this.info.project1Name, value: 1},
|
||||
{name: this.info.project2Name, value: 2},
|
||||
{name: this.info.project3Name, value: 3},
|
||||
] || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTab(value) {
|
||||
this.actived = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avtor{
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.town-cover{
|
||||
height: 316rpx;
|
||||
width: 316rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(77,39,39,0.1);
|
||||
}
|
||||
.store-card{
|
||||
width: 316rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.tab-icon{
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.fit-box-inner{
|
||||
background: #f0f0f0;
|
||||
width: initial;
|
||||
height: inherit;
|
||||
width: 40rpx;
|
||||
}
|
||||
.first-one{
|
||||
border-radius: 0 24rpx 24rpx 24rpx !important;
|
||||
}
|
||||
.last-one{
|
||||
border-radius: 24rpx 0 24rpx 24rpx !important;
|
||||
}
|
||||
.fit-box{
|
||||
width: 40rpx;
|
||||
height: initial;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
}
|
||||
.projects{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.tabs-wrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tab-item{
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
background: #fff;
|
||||
view{
|
||||
padding: 20rpx 0;
|
||||
background: #f0f0f0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
}
|
||||
.no-actived-1{
|
||||
border-radius: 0 0 24rpx 0 !important;
|
||||
}
|
||||
.no-actived-2{
|
||||
border-radius: 0 0 0 24rpx !important;
|
||||
}
|
||||
.no-actived-3{
|
||||
border-radius: 0 0 24rpx 0 !important;
|
||||
}
|
||||
.no-actived-4{
|
||||
border-radius: 0 0 0 24rpx !important;
|
||||
}
|
||||
.tab-isActived{
|
||||
background: #fff !important;
|
||||
border-radius: 24rpx 24rpx 0 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
.content{
|
||||
background: #fff;
|
||||
padding: 20rpx 10rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="service">
|
||||
<view class="map-cont">
|
||||
<map
|
||||
:longitude="info.longitude"
|
||||
:latitude="info.latitude"
|
||||
:markers="[{id:1, latitude: info.latitude,longitude: info.longitude,width: 20, height: 25, iconPath: webUrl + '/page/qianxian/icon-location.png'}]"
|
||||
style="width: 100%;height: 100%; border-radius: 20rpx;"
|
||||
/>
|
||||
</view>
|
||||
<view class="v12-px-3 v12-font-32 v12-font-bold">{{ info.name || '' }}</view>
|
||||
<view class="info-wrap">
|
||||
<view>
|
||||
<view class="v12-font-28 v12-mb-1 v12-dark1-text">{{ info.openTime || '' }}</view>
|
||||
<view class="v12-font-28 v12-mb-1 v12-dark1-text">{{ info.address || '' }}</view>
|
||||
<view class="v12-font-28 v12-mb-1 v12-dark1-text">{{ info.announcement || '' }}</view>
|
||||
</view>
|
||||
<view class="action-wrap">
|
||||
<view @click="showLocation">
|
||||
<view>
|
||||
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
|
||||
</view>
|
||||
<view class="text-center">导航</view>
|
||||
</view>
|
||||
<view @click="call">
|
||||
<view>
|
||||
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
|
||||
</view>
|
||||
<view class="text-center">咨询</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 20rpx;"><u-divider></u-divider></view>
|
||||
<view class="intro-wrap">
|
||||
<view class="v12-dark-text v12-font-bold">
|
||||
简介
|
||||
</view>
|
||||
<view class="intro-text">
|
||||
{{ info.desc || '' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLocation() {
|
||||
|
||||
if (!this.info.latitude || !this.info.longitude) {
|
||||
this.$dialog.error('暂无位置信息')
|
||||
} else {
|
||||
uni.openLocation({
|
||||
latitude: this.info.latitude,
|
||||
longitude: this.info.longitude
|
||||
})
|
||||
}
|
||||
},
|
||||
call() {
|
||||
if (this.info.tel) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.info.tel
|
||||
})
|
||||
} else {
|
||||
this.$dialog.error('电话为空')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service {
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.intro-text{
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.intro-wrap{
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
.action-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text-center{
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.info-wrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 0;
|
||||
}
|
||||
.service{
|
||||
position: relative;
|
||||
}
|
||||
.map-cont {
|
||||
height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img{
|
||||
display: block;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 0 0 16rpx 16rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="town">
|
||||
<view class="top-img">
|
||||
<image :src="townInfo.cover" mode="scaleToFill" class="img"></image>
|
||||
</view>
|
||||
<view class="top-intro">
|
||||
<view class="intro-title v12-pa-3">
|
||||
<text class="v12-font-bold v12-font-40">{{ townInfo.name }}</text>
|
||||
<text class="aaaa" v-if="townInfo.isFourA === 1">
|
||||
4A
|
||||
</text>
|
||||
</view>
|
||||
<u-line dashed></u-line>
|
||||
<view class="v12-pa-3 intro-content">
|
||||
{{ townInfo.intro }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs-wrap">
|
||||
<view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item" v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view v-if="actived === 1">
|
||||
<projects :info="townInfo.projectInfo"></projects>
|
||||
</view>
|
||||
<view v-if="actived === 2">
|
||||
<culture :list="townInfo.cultureInfo.cultureImages"></culture>
|
||||
</view>
|
||||
<view v-if="actived === 3">
|
||||
<information :infoArray="activeties"></information>
|
||||
</view>
|
||||
<view v-if="actived === 4">
|
||||
<service :info="{...townInfo.serviceInfo, name: townInfo.name}"></service>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAncientTownInfo, getAncientTownActive } from "@/api/inn.js"
|
||||
import culture from './components/culture.vue'
|
||||
import information from './components/information.vue'
|
||||
import service from './components/service.vue'
|
||||
import projects from './components/projects.vue'
|
||||
export default {
|
||||
components: {
|
||||
culture,
|
||||
information,
|
||||
service,
|
||||
projects
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
townInfo: {},
|
||||
activeties: [],
|
||||
id: '',
|
||||
actived: 1,
|
||||
tabs: [
|
||||
{name: '项目', value: 1},
|
||||
{name: '文化', value: 2},
|
||||
{name: '活动', value: 3},
|
||||
{name: '服务', value: 4},
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad(opts) {
|
||||
this.id = opts.id
|
||||
this.getInfo()
|
||||
this.getActive()
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
uni.showLoading()
|
||||
getAncientTownInfo(this.id).then(res => {
|
||||
this.townInfo = res.data
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
getActive() {
|
||||
const params = {
|
||||
ancientTownId: this.id
|
||||
}
|
||||
getAncientTownActive(params).then(res => {
|
||||
this.activeties = res.data.records || []
|
||||
})
|
||||
},
|
||||
handleTab(value) {
|
||||
this.actived = value
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.town{
|
||||
min-height: 100vh;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.tab-actived{
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
|
||||
border-radius: 38rpx 0rpx 0 38rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.tabs-wrap{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx 20rpx 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.intro-content{
|
||||
letter-spacing: 100px;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
.aaaa{
|
||||
background: #F1B61A;
|
||||
color: #fff;
|
||||
border-radius: 100px;
|
||||
padding: 0 10rpx;
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.top-intro{
|
||||
width: 100%;
|
||||
min-height: 360rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,0.13);
|
||||
border-radius: 30rpx;
|
||||
margin-top: -30rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.top-img{
|
||||
width: 100%;
|
||||
height: 560rpx;
|
||||
background: rgba(180,18,18,0.39);
|
||||
.img{
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user