Feat：寻趣味改版（新增古镇模块）

2024-12-12 18:06:03 +08:00
parent 07bccb8b68
commit 50cbe66332
9 changed files with 955 additions and 22 deletions
@@ -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>