liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(千县店铺):村屋出租功能完成

Browse Source
This commit is contained in:
lifizer
2024-08-23 17:45:06 +08:00
parent 99dd695553
commit 7740e8f6a8
4 changed files with 849 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/qianxian.js
+15
View File
@@ -79,3 +79,18 @@ export function getCountyFamousIndustryProjectFile(param) {
export function getCountyFamousInvestmentFile(param) {
return request.get('/countyFamous/investmentFile', param, { login: true })
}
// 获取千县名品县城村屋列表
export function getCountyFamousVillage(param) {
return request.get('/countyFamous/village', param, { login: true })
}
// 获取千县名品县城村屋详情
export function getCountyFamousVillageDetail(id) {
return request.get('/countyFamous/village/' + id, {}, { login: true })
}
// 获取千县名品县城村屋资讯
export function getCountyFamousVillageNews(param) {
return request.get('/countyFamous/village/news', param, { login: true })
}
pages.json
+7
View File
@@ -597,6 +597,13 @@
"navigationStyle": "custom"
}
},
{
"path": "views/famousQianxianVillageShop",
"style": {
"navigationBarTitleText": "千县名品",
"navigationStyle": "custom"
}
},
{
"path": "views/famousQianxianInvestment",
"style": {
pkg_product/views/famousQianxianShop.vue
+174 -6
View File
@@ -44,8 +44,8 @@
class="city-section flex jc-end ai-center"
>
<image
:src="webUrl + '/20210807215539157727.png'"
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
:src="webUrl + '/page/qianxian/icon-09.png'"
style="width: 28rpx;height: 28rpx;margin-right: 8rpx;"
/>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
@@ -417,6 +417,72 @@
</view>
</view>
</view>
<view v-if="industryTabIndex === 2">
<view class="card-wrap">
<image
:src="webUrl + '/page/qianxian/card-bg3.png'"
class="bg bg3"
/>
<view class="card-cont">
<view class="tab-wrap">
<view
v-for="(tab, tabIndex) in industryTab"
:key="tabIndex"
:class="industryTabIndex === tabIndex ? 'active' : ''"
class="item"
@click="industryTabItemClick(tabIndex)"
>
<image
:src="webUrl + tab.icon"
class="icon"
/>
{{ tab.name }}
</view>
</view>
<view class="village-wrap">
<view v-if="villageList.length > 0" class="village-list">
<view
v-for="(village, villageIndex) in villageList"
:key="villageIndex"
class="village-item"
@click="villageItemClick(village)"
>
<view class="img-wrap">
<image
:src="village.cover + (village.coverType === 2 ? '?vframe/jpg/offset/1' : '')"
class="img"
/>
<view class="location">
<image
:src="webUrl + '/page/qianxian/icon-08.png'"
class="icon"
/>
<view class="addr one-t">
{{ village.address }}
</view>
</view>
</view>
<view class="info">
<view class="intro more-t">
{{ village.intro }}
</view>
<view class="name-wrap">
<image
:src="village.logo"
class="logo"
/>
<view class="name one-t">
{{ village.name }}
</view>
</view>
</view>
</view>
</view>
<view v-else class="no-data">暂无村屋出租</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
@@ -458,7 +524,8 @@ import {
postCountyFamousNewsView,
getCountyFamousIndustry,
getCountyFamousIndustryProject,
getCountyFamousInvestmentFile
getCountyFamousInvestmentFile,
getCountyFamousVillage
} from '@/api/qianxian'
import {formatDateTime} from '@/utils'
import {getUrlParam} from '@/utils/common.js'
@@ -518,9 +585,12 @@ export default {
industryProjectList: [],
// 招商政策文件列表
investmentFileList: [],
// 村屋列表
villageList: [],
industryTab: [
{ name: '产业项目', icon: '/page/qianxian/icon-04.png' },
{ name: '招商政策', icon: '/page/qianxian/icon-03.png' }
{ name: '招商政策', icon: '/page/qianxian/icon-03.png' },
{ name: '村屋出租', icon: '/page/qianxian/icon-07.png' }
],
industryTabIndex: 0
}
@@ -581,6 +651,16 @@ export default {
this.investmentFileList = data.records || []
}
})
getCountyFamousVillage({
countyFamousDataId: this.id,
page: 1,
limit: 9999
}).then(res => {
const { success, data } = res
if (success) {
this.villageList = data.records || []
}
})
},
getShopDetailReq() {
const _this = this
@@ -865,6 +945,9 @@ export default {
},
gotoInvestment() {
uni.navigateTo({ url: `/pkg_product/views/famousQianxianInvestment?id=${this.id}` })
},
villageItemClick(item) {
uni.navigateTo({ url: `/pkg_product/views/famousQianxianVillageShop?id=${item.id}` })
}
}
}
@@ -1330,12 +1413,15 @@ export default {
z-index: 2;
display: block;
width: 750rpx;
height: 530rpx;
height: 518rpx;
}
.bg3 {
height: 1159rpx;
}
.card-cont {
position: absolute;
z-index: 5;
top: 30rpx;
top: 20rpx;
left: 30rpx;
right: 30rpx;
.tab-wrap {
@@ -1417,6 +1503,88 @@ export default {
}
}
}
.village-wrap {
height: 980rpx;
padding: 16rpx 0 0 0;
overflow-y: auto;
}
.village-list {
display: flex;
flex-wrap: wrap;
width: 660rpx;
margin: 0 auto;
.village-item {
width: 320rpx;
height: 480rpx;
margin: 0 20rpx 20rpx 0;
border-radius: 16rpx;
background-color: #f0f0f0;
&:nth-child(2n) {
margin-right: 0;
}
.img-wrap {
position: relative;
.img {
display: block;
width: 320rpx;
height: 320rpx;
border-radius: 16rpx;
}
.location {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
height: 60rpx;
padding: 0 20rpx;
border-radius: 0 0 16rpx 16rpx;
font-size: 28rpx;
line-height: 36rpx;
color: #fff;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
.icon {
display: block;
width: 28rpx;
height: 28rpx;
margin: 0 8rpx 0 0;
}
.addr {
width: calc(100% - 40rpx);
}
}
}
.info {
padding: 6rpx 8rpx 16rpx 8rpx;
.intro {
height: 80rpx;
line-height: 40rpx;
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.name-wrap {
display: flex;
align-items: center;
.logo {
display: block;
width: 48rpx;
height: 48rpx;
margin: 0 8rpx 0 0;
}
.name {
width: calc(100% - 60rpx);
padding: 10rpx 0 0 0;
font-size: 28rpx;
line-height: 48rpx;
color: #999;
}
}
}
}
}
}
}
.project-wrap {
pkg_product/views/famousQianxianVillageShop.vue
+653
View File
@@ -0,0 +1,653 @@
<template>
<view class="container">
<hx-navbar
:fixed="true"
:background-color="[[13,197,197],[13,197,197]]"
:pageScroll.sync="scrollData"
statusBarFontColor="#ffffff"
barPlaceholder="hidden"
transparent="auto"
color='#ffffff'
/>
<view v-if="isLoad">
<view class="cover-box">
<image
v-if="inn.coverType === 1"
:src="inn.cover"
class="full-img"
mode="widthFix"
/>
<view
v-if="inn.coverType === 2"
:style="{
'width': videoStyle.width,
'height': videoStyle.height
}"
class="video-box"
>
<video
:src="inn.cover"
:autoplay="true"
:controls="true"
:loop="false"
object-fit="contain"
play-btn-position="center"
class="video"
/>
</view>
</view>
<view class="innInfoWrap">
<view class="bg-color">
<view class="box-mask flex jc-between ai-end">
<view
v-if="inn.cityName"
class="city-section flex jc-end ai-center"
>
<image
:src="webUrl + '/page/qianxian/icon-09.png'"
style="width: 28rpx;height: 28rpx;margin-right: 8rpx;"
/>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
</view>
</view>
<view class="body-cont flex ai-end">
<view class="inn-logo flex-0">
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex" style="width: 100%">
<view class="inn-owner one-t">{{ inn.name }}</view>
<view class="inn-owner-desc">
{{ inn.contact }}/联系人
</view>
</view>
</view>
</view>
<view class="inn-signature-wrap">
<view class="triangle"></view>
<view class="inn-signature">
{{ inn.intro }}
</view>
</view>
<view v-if="inn.name" class="map-wrapper">
<view class="map-cont">
<map
:longitude="inn.longitude"
:latitude="inn.latitude"
style="width: 750rpx;height: 300rpx;"
/>
</view>
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/qianxian/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd more-t">
{{ inn.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
<view>客服</view>
</view>
</view>
</view>
</view>
<view class="top-tab acea-row row-middle row-center">
<view
v-for="(item, index) in tabList"
:key="index"
class="tab"
@click="changeTab(item.value)"
>
<view
:class="activeIndex === index ? 'active' : ''"
class="tab-item"
>
{{ item.text }}
</view>
</view>
</view>
<view>
<!-- 村屋详情 -->
<view
v-if="activeIndex === 0"
class="info-section"
>
<view v-if="inn.images" class="pic-wrap">
<view
v-for="(item, index) in inn.images"
:key="index"
class="pic-item"
@click="showPic(index)"
>
<image :src="item" class="img" />
</view>
</view>
<view v-else class="tab-no-data">暂无图片~</view>
</view>
<!-- 村屋介绍 -->
<view
v-if="activeIndex === 1"
class="info-section"
>
<view class="content-html-wrap">
<rich-text :nodes="inn.content" />
</view>
</view>
<!-- 村屋资讯 -->
<view
v-if="activeIndex === 2"
class="info-section"
>
<view v-if="isLoadInfoListSuccess">
<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.title }}
</view>
<view class="intro">
{{ item.content }}
</view>
</view>
<view class="info-item-body">
<view v-if="item.type === 2" class="video">
<video
:src="item.video"
:poster="item.video + '?vframe/jpg/offset/1'"
controls
play-btn-position="center"
class="video-item"
/>
</view>
<view v-else>
<img-box
:imgList="item.images"
:num="item.images.length"
:img-radius="10"
style="width: 100%;"
/>
</view>
</view>
</view>
</view>
</view>
<view v-else class="tab-no-data">暂无资讯~</view>
</view>
<goo-skeleton v-else />
</view>
</view>
</view>
<goo-skeleton v-else />
</view>
</template>
<script>
import {
getCountyFamousVillageDetail,
getCountyFamousVillageNews
} from '@/api/qianxian'
import imgBox from '@/components/imageTypeSet/imagebox.vue'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
components: {
imgBox
},
mixins: [pageListenMixins],
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
isLoad: false,
activeIndex: 0,
loading: false,
scrollData: {},
inn: {
cityName: '',
pics: [],
desc: '',
latitude: '',
longitude: ''
},
id: null,
videoStyle: {
width: '750rpx',
height: '500rpx'
},
tabList: [
{ text: '村屋详情', value: 0, isShow: true },
{ text: '村屋介绍', value: 1, isShow: true },
{ text: '村屋资讯', value: 2, isShow: true }
],
// 资讯
infoArray: [],
isLoadInfoListSuccess: false,
pageKeyId: ''
}
},
onPageScroll(e) {
this.scrollData = e
},
onLoad(options) {
const id = options.id || ''
this.id = id
this.getShopDetailReq()
this.getInfoReq()
},
methods: {
getShopDetailReq() {
const _this = this
getCountyFamousVillageDetail(_this.id).then((res) => {
const { success, data } = res
if (success) {
_this.inn = data
_this.inn.latitude = _this.inn.latitude > 0 ? _this.inn.latitude : 24.993587
_this.inn.longitude = _this.inn.longitude > 0 ? _this.inn.longitude : 102.779656
// coverType: 1-图片,2-视频
if (data.coverType === 2) {
uni.getSystemInfo({
success: info => {
const screenWidth = info.windowWidth
_this.videoStyle.width = screenWidth + 'px'
_this.videoStyle.height = screenWidth * 500 / 750 + 'px'
}
})
}
_this.isLoad = true
}
}).finally(() => {
uni.stopPullDownRefresh()
})
},
// 资讯
getInfoReq() {
const _this = this
if (_this.loading) {
return
}
_this.isLoadInfoListSuccess = false
_this.loading = true
_this.infoArray = []
getCountyFamousVillageNews({
page: 1,
limit: 9999,
countyFamousVillageId: _this.id
}).then(res => {
const { data } = res
_this.loading = false
_this.infoArray.push.apply(_this.infoArray, data.records)
}).finally(() => {
_this.loading = false
_this.isLoadInfoListSuccess = true
uni.stopPullDownRefresh()
})
},
changeTab(index) {
this.activeIndex = index
this.loading = false
// 刷新数据
switch (this.activeIndex) {
case 2:
this.getInfoReq()
break
default:
break
}
},
// 定位
showLocation() {
if (!this.inn.latitude || !this.inn.longitude) {
this.$dialog.error('暂无位置信息')
} else {
uni.openLocation({
latitude: this.inn.latitude,
longitude: this.inn.longitude
})
}
},
async doneFavorite() {
if (this.isFavorite) {
const res = await postCountyFamousShopRemoveFavorite({ countyFamousDataId: this.id })
if (res.success) {
this.isFavorite = false
this.favoriteCount = res.data.favoriteCount
}
} else {
const res = await postCountyFamousShopAddFavorite({ countyFamousDataId: this.id })
if (res.success) {
this.isFavorite = true
this.favoriteCount = res.data.favoriteCount
}
}
},
call() {
if (this.inn.tel) {
uni.makePhoneCall({
phoneNumber: this.inn.tel
})
} else {
this.$dialog.error('电话为空')
}
},
showPic(index) {
uni.previewImage({
current: index,
urls: this.inn.images
})
}
}
}
</script>
<style scoped lang="less">
@import "@/assets/css/store.less";
.my-inn-page {
padding: 0 0 100rpx 0;
background-color: #f6f6f6;
}
.cover-box {
position: relative;
.full-img {
width: 750rpx;
}
.video {
display: block;
width: 100%;
height: 100%;
}
}
.guarantee {
margin-right: 16rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
background: #0DC5C5;
color: #fff;
font-size: 22rpx;
line-height: 1;
}
.store-img {
width: 686rpx;
margin-bottom: 20rpx;
vertical-align: middle;
}
.container {
position: relative;
background: #FFFFFF;
}
.innInfoWrap {
position: relative;
margin-top: -76rpx;
padding: 20rpx 36rpx;
line-height: 1;
z-index: 1;
.bg-color {
position: absolute;
top: -5px;
left: 0;
right: 0;
z-index: 1;
height: 50%;
background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
.box-mask {
position: absolute;
bottom: 0;
right: 0;
left: 166rpx;
box-sizing: border-box;
padding: 0 32rpx 12rpx 0;
.city-section {
width: 100%;
}
}
}
.body-cont {
position: relative;
z-index: 2;
}
}
.inn-logo {
flex-shrink: 0;
width: 56*2rpx;
height: 56*2rpx;
margin-right: 18rpx;
}
.inn-logo image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.inn-name {
width: 280rpx;
font-size: 32rpx;
color: #FFFFFF;
line-height: 48rpx;
}
.inn-owner {
width: calc(100% - 160rpx);
font-size: 36rpx;
font-weight: bold;
color: #333;
line-height: 40rpx;
}
.inn-owner-desc {
margin: 0 0 0 20rpx;
color: #999;
font-size: 24rpx;
line-height: 40rpx;
}
.inn-tag-wrap {
margin-top: 10rpx;
}
.inn-signature-wrap {
position: relative;
z-index: 5;
padding: 0 32rpx;
margin: 20rpx 0 0 0;
.triangle {
position: absolute;
top: -20rpx;
left: 72rpx;
width: 0;
height: 0;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-bottom: 24rpx solid rgba(243,243,246,0.39);
}
.inn-signature {
position: relative;
padding: 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
color: #080F1A;
background: rgba(243,243,246,0.39);
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
}
.share-btn {
position: absolute;
right: 0;
bottom: -68rpx;
.img {
width: 212rpx;
height: 60rpx;
}
}
}
.map-wrapper {
position: relative;
z-index: 2;
height: 200rpx;
margin: 40rpx 0 0 0;
overflow: hidden;
.map-cont {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
opacity: 0.3;
transform: translateY(-50rpx);
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
height: 60rpx;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.map-info {
position: relative;
z-index: 5;
display: flex;
align-items: center;
padding: 40rpx 10rpx 40rpx 32rpx;
color: #333;
font-size: 14px;
.map-info-hd {
.icon {
display: block;
width: 34rpx;
height: 42rpx;
}
}
.map-info-bd {
flex: 1;
padding: 0 60rpx 0 20rpx;
line-height: 60rpx;
}
.map-info-ft {
.item + .item {
margin: 0 0 0 6rpx;
}
.item {
text-align: center;
font-weight: 500;
.img {
display: block;
width: 64rpx;
height: 64rpx;
margin: 0 0 16rpx 16rpx;
}
}
}
}
}
.top-tab {
padding: 40rpx 0 20rpx 0;
.tab {
margin: 0 20rpx;
.tab-item {
height: 52rpx;
padding: 0 30rpx;
border-radius: 26rpx 0 0 26rpx;
font-size: 32rpx;
line-height: 52rpx;
font-weight: bold;
&.active {
color: #fff;
background: linear-gradient(90deg, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
}
}
}
}
.info-section {
position: relative;
background-color: #f6f6f6;
}
.info-section {
padding: 22rpx;
}
.info-section {
.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;
}
}
}
}
}
.pic-wrap {
display: flex;
flex-wrap: wrap;
width: 700rpx;
margin: 0 auto;
.pic-item {
width: 340rpx;
height: 340rpx;
margin: 0 20rpx 20rpx 0;
&:nth-child(2n) {
margin-right: 0;
}
.img {
display: block;
width: 340rpx;
height: 340rpx;
border-radius: 16rpx;
}
}
}
.content-html-wrap {
padding: 20rpx;
border-radius: 16rpx;
background-color: #fff;
}
.tab-no-data {
text-align: center;
font-size: 32rpx;
color: #999;
line-height: 200rpx;
}
</style>