From 50cbe66332481be6cbcbe5371b69c6287a263ff1 Mon Sep 17 00:00:00 2001
From: linxi <linxi.jiang@jeeyor.com>
Date: Thu, 12 Dec 2024 18:06:03 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=20=E5=AF=BB=E8=B6=A3=E5=91=B3?=
 =?UTF-8?q?=E6=94=B9=E7=89=88=EF=BC=88=E6=96=B0=E5=A2=9E=E5=8F=A4=E9=95=87?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/inn.js                            |  18 ++
 assets/css/v12-style.less             |   4 +-
 pages.json                            |   7 +
 pages/cloud/haveFun.vue               | 163 ++++++++++++++---
 pages/town/components/culture.vue     |  70 +++++++
 pages/town/components/information.vue | 254 ++++++++++++++++++++++++++
 pages/town/components/projects.vue    | 186 +++++++++++++++++++
 pages/town/components/service.vue     | 127 +++++++++++++
 pages/town/index.vue                  | 148 +++++++++++++++
 9 files changed, 955 insertions(+), 22 deletions(-)
 create mode 100644 pages/town/components/culture.vue
 create mode 100644 pages/town/components/information.vue
 create mode 100644 pages/town/components/projects.vue
 create mode 100644 pages/town/components/service.vue
 create mode 100644 pages/town/index.vue

diff --git a/api/inn.js b/api/inn.js
index 9af877d..089c259 100644
--- a/api/inn.js
+++ b/api/inn.js
@@ -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)
+}
+
+
diff --git a/assets/css/v12-style.less b/assets/css/v12-style.less
index 3191b86..a27ff1f 100644
--- a/assets/css/v12-style.less
+++ b/assets/css/v12-style.less
@@ -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;
diff --git a/pages.json b/pages.json
index c5c74ee..b27049c 100644
--- a/pages.json
+++ b/pages.json
@@ -106,6 +106,13 @@
         "navigationBarTitleText": "探索生活好去处"
       }
     },
+    {
+      "path": "pages/town/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "探索生活好去处"
+      }
+    },
     {
       "path": "pages/user/User/index",
       "style": {
diff --git a/pages/cloud/haveFun.vue b/pages/cloud/haveFun.vue
index dee9ee6..49f1d9a 100644
--- a/pages/cloud/haveFun.vue
+++ b/pages/cloud/haveFun.vue
@@ -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;
diff --git a/pages/town/components/culture.vue b/pages/town/components/culture.vue
new file mode 100644
index 0000000..d6a633e
--- /dev/null
+++ b/pages/town/components/culture.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/town/components/information.vue b/pages/town/components/information.vue
new file mode 100644
index 0000000..47e2551
--- /dev/null
+++ b/pages/town/components/information.vue
@@ -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>
+
diff --git a/pages/town/components/projects.vue b/pages/town/components/projects.vue
new file mode 100644
index 0000000..b21985d
--- /dev/null
+++ b/pages/town/components/projects.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/town/components/service.vue b/pages/town/components/service.vue
new file mode 100644
index 0000000..2fb34de
--- /dev/null
+++ b/pages/town/components/service.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/town/index.vue b/pages/town/index.vue
new file mode 100644
index 0000000..21b14ba
--- /dev/null
+++ b/pages/town/index.vue
@@ -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>
\ No newline at end of file