Feat: 地标好物（页面&接口）
This commit is contained in:
linxi
@@ -132,3 +132,27 @@ export function getProvinceGoods(parentId, keyword, page) {
|
||||
const params = `?parentId=${parentId}&keyword=${keyword}&page=${page}&limit=10`;
|
||||
return request.get('/landmarkGoods/productList' + params, {}, {login: false})
|
||||
}
|
||||
|
||||
export function getPorjectRecommend(params) {
|
||||
return request.get('/landmarkGoods/hotelList', params, {login: false})
|
||||
}
|
||||
|
||||
export function getPorjectPolicyFiles(params) {
|
||||
return request.get('/landmarkGoods/policyFiles', params, {login: false})
|
||||
}
|
||||
|
||||
export function getCulture(params) {
|
||||
return request.get('/landmarkGoods/culture', params, {login: false})
|
||||
}
|
||||
|
||||
export function getNews(params) {
|
||||
return request.get('/landmarkGoods/news', params, {login: false})
|
||||
}
|
||||
|
||||
export function hadLike(data) {
|
||||
return request.post('/landmarkGoods/news/zan', data, {login: false})
|
||||
}
|
||||
|
||||
export function hadView(data) {
|
||||
return request.post('/landmarkGoods/news/view', data, {login: false})
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="culture v12-d-grid-columns-2">
|
||||
<view class="img-item " v-for="item in 10" :key="item"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCulture,
|
||||
} from "@/api/product"
|
||||
export default {
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getCulture({landmarkDataId: this.landmarkDataId}).then(res => {
|
||||
this.list = res.data
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.culture{
|
||||
grid-gap: 20rpx 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.img-item{
|
||||
height: 320rpx;
|
||||
background: rgba(137,35,35,0.39);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="list-box flex flex-wrap">
|
||||
<view
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
@click="goGoods(item.productId)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/home/mark-land.png'"
|
||||
class="mark-img"
|
||||
/>
|
||||
<image
|
||||
:src="item.storeImage"
|
||||
mode="scaleToFill"
|
||||
class="good-img"
|
||||
/>
|
||||
<view class="content flex flex-col jc-between">
|
||||
<view class="more-t bold">{{ item.title }}</view>
|
||||
<view class="one-t desc">{{ item.description }}</view>
|
||||
<view class="flex jc-between ai-center">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<image
|
||||
:src="webUrl + '/home/icon-cart.png'"
|
||||
class="btn"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
goods: {
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box {
|
||||
margin-top: 24rpx;
|
||||
.item {
|
||||
position: relative;
|
||||
width: 344rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
.mark-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 84rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
.good-img {
|
||||
display: block;
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
.content {
|
||||
height: 156rpx;
|
||||
padding: 8rpx 8rpx 18rpx 8rpx;
|
||||
.more-t {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
padding: 5rpx 0;
|
||||
height: 34rpx;
|
||||
color: #FFC543;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #C52733;
|
||||
}
|
||||
.btn {
|
||||
display: block;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
margin: 20rpx 0 0 0;
|
||||
padding: 0 20rpx;
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
<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.title }}
|
||||
</view>
|
||||
<view class="intro">
|
||||
{{ item.content }}
|
||||
</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 class="flex">
|
||||
<image
|
||||
v-if="!item.hasZan"
|
||||
:src="webUrl + '/page/hotel/zan-off-2.png'"
|
||||
class="zan-off-icon"
|
||||
@click="likeInfoItemHandle(item, index, item.zan + 1, true)"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="webUrl + '/page/hotel/zan-on-2.png'"
|
||||
class="zan-on-icon"
|
||||
@click="likeInfoItemHandle(item, index, item.zan - 1, false)"
|
||||
/>
|
||||
<text
|
||||
v-show="item.zan > 0"
|
||||
:class="item.hasZan ? 'on' : ''"
|
||||
class="seeNum-txt v12-font-28 v12-ml-1"
|
||||
>{{ item.zan }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="no-data-loadend"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getNews,
|
||||
hadLike,
|
||||
hadView
|
||||
} from "@/api/product"
|
||||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||||
export default {
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
},
|
||||
components: {
|
||||
imgBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
infoArray: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
landmarkDataId: this.landmarkDataId,
|
||||
page: 1,
|
||||
limit: 9999
|
||||
}
|
||||
getNews(params).then(res => {
|
||||
this.infoArray = res.data.records
|
||||
})
|
||||
},
|
||||
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-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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<view class="policy">
|
||||
<view class="list-item" v-for="(item, index) in currentList" :key="index" @click="fileItemClick(item)">
|
||||
<view class="v12-justify-start v12-align-center">
|
||||
<view class="v12-font-bold v12-font-28">·</view>
|
||||
<view class="item-title one-t">{{ item.title }}</view>
|
||||
</view>
|
||||
<view class="item-action v12-dark"><u-icon name="arrow-right" color="#fff" size="8"></u-icon></view>
|
||||
</view>
|
||||
<view class="more-wrap" v-if="isMore ? isMore : list.length > 3">
|
||||
<view class="more-btn v12-primary v12-align-center" @click="showMore">
|
||||
{{ isMore ? '收起' : '查看更多' }}
|
||||
<view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPorjectPolicyFiles,
|
||||
} from "@/api/product"
|
||||
export default {
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
currentList: [],
|
||||
isMore: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const params = {
|
||||
landmarkDataId: this.landmarkDataId,
|
||||
page: 1,
|
||||
limit: 99999
|
||||
}
|
||||
getPorjectPolicyFiles(params).then(res => {
|
||||
this.list = res.data.records
|
||||
if(this.isMore) {
|
||||
this.currentList = this.list
|
||||
} else {
|
||||
this.currentList = this.list.filter((item, index) => index < 3)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showMore() {
|
||||
this.isMore = !this.isMore
|
||||
if(this.isMore) {
|
||||
this.currentList = this.list
|
||||
} else {
|
||||
this.currentList = this.list.filter((item, index) => index < 3)
|
||||
}
|
||||
},
|
||||
fileItemClick(file) {
|
||||
const url = file.attachment || ''
|
||||
if (!url) return
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: res => {
|
||||
const filePath = res.tempFilePath
|
||||
wx.openDocument({
|
||||
filePath,
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.more-btn{
|
||||
.item-action{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.policy{
|
||||
padding: 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.list-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.item-action{
|
||||
font-size: 22rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
color: #fff;
|
||||
padding: 5rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.item-title{
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.log-img{
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
background: rgba(197,39,51,0.39);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.more-wrap{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.more-btn{
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<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"
|
||||
:class="{
|
||||
'first-one': actived === 1,
|
||||
'last-one': actived === 3
|
||||
}"
|
||||
|
||||
>
|
||||
<recommend v-if="actived === 1" :landmarkDataId="landmarkDataId"></recommend>
|
||||
<policy v-if="actived === 2" :landmarkDataId="landmarkDataId"></policy>
|
||||
<serviec v-if="actived === 3" :landmarkDataId="landmarkDataId"></serviec>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import recommend from './recommend.vue'
|
||||
import policy from './policy.vue'
|
||||
import serviec from './serviec.vue'
|
||||
export default {
|
||||
components: {
|
||||
recommend,
|
||||
policy,
|
||||
serviec
|
||||
},
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actived: 1,
|
||||
tabs: [
|
||||
{name: '企业推荐', value: 1},
|
||||
{name: '政策', value: 2},
|
||||
{name: '服务', value: 3},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTab(value) {
|
||||
this.actived = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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,134 @@
|
||||
<template>
|
||||
<view class="recommend">
|
||||
<view class="list-item" v-for="(item, index) in currentList" :key="index" @click="toStore(item.hotelId)">
|
||||
<view class="v12-justify-start v12-align-center">
|
||||
<view class="log-img">
|
||||
<image class="log-img" :src="item.logo" mode="aspectFit|aspectFill|widthFix"></image>
|
||||
</view>
|
||||
<view class="item-title one-t">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="item-action-wrap v12-primary">
|
||||
点击查看
|
||||
<view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733" size="8"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-wrap" v-if="isMore ? isMore : list.length > 3">
|
||||
<view class="more-btn v12-primary" @click="showMore">
|
||||
{{ isMore ? '收起' : '查看更多' }}
|
||||
<view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPorjectRecommend,
|
||||
} from "@/api/product"
|
||||
export default {
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
currentList: [],
|
||||
isMore: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getPorjectRecommend({landmarkDataId: this.landmarkDataId}).then(res => {
|
||||
this.list = res.data
|
||||
if(this.isMore) {
|
||||
this.currentList = this.list
|
||||
} else {
|
||||
this.currentList = this.list.filter((item, index) => index < 3)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toStore(id) {
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pagesInn/inn/innHome?id=' + id
|
||||
})
|
||||
},
|
||||
showMore() {
|
||||
this.isMore = !this.isMore
|
||||
if(this.isMore) {
|
||||
this.currentList = this.list
|
||||
} else {
|
||||
this.currentList = this.list.filter((item, index) => index < 3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.more-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.item-action{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
padding: 5rpx;
|
||||
}
|
||||
}
|
||||
.recommend{
|
||||
padding: 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.list-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.item-action-wrap{
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
color: #fff;
|
||||
padding: 5rpx 10rpx;
|
||||
}
|
||||
.item-action{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.item-title{
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.log-img{
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.more-wrap{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.more-btn{
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="service">
|
||||
服务
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
landmarkDataId: null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
+65
-90
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="pkg-product-land-mark">
|
||||
<view v-if="isLoad">
|
||||
<view class="top-wrap">
|
||||
<view class="top-box">
|
||||
<view class="nav flex">
|
||||
<view
|
||||
@@ -29,46 +30,32 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="mapData.middleImage"
|
||||
class="middle-img-wrap"
|
||||
>
|
||||
<image
|
||||
v-if="mapData.middleImage"
|
||||
:src="mapData.middleImage"
|
||||
mode="widthFix"
|
||||
class="img"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="goods.length > 0" class="list-wrap">
|
||||
<view class="list-box flex flex-wrap">
|
||||
<view
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
@click="goGoods(item.productId)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/home/mark-land.png'"
|
||||
class="mark-img"
|
||||
/>
|
||||
<image
|
||||
:src="item.storeImage"
|
||||
mode="scaleToFill"
|
||||
class="good-img"
|
||||
/>
|
||||
<view class="content flex flex-col jc-between">
|
||||
<view class="more-t bold">{{ item.title }}</view>
|
||||
<view class="one-t desc">{{ item.description }}</view>
|
||||
<view class="flex jc-between ai-center">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<image
|
||||
:src="webUrl + '/home/icon-cart.png'"
|
||||
class="btn"
|
||||
/>
|
||||
<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>
|
||||
<view class="list-wrap">
|
||||
<view v-if="actived === 1">
|
||||
<projects :landmarkDataId="landmarkDataId"></projects>
|
||||
</view>
|
||||
<view v-if="actived === 2">
|
||||
<culture :landmarkDataId="landmarkDataId"></culture>
|
||||
</view>
|
||||
<view v-if="actived === 3">
|
||||
<information :landmarkDataId="landmarkDataId"></information>
|
||||
</view>
|
||||
<view v-if="actived === 4">
|
||||
<goods :goods="goods" v-if="goods.length > 0"></goods>
|
||||
<image
|
||||
v-if="isCompleteLoadGood"
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
@@ -83,6 +70,8 @@
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
@@ -96,12 +85,29 @@ import {
|
||||
getProvinceGoods,
|
||||
getProvinceList
|
||||
} from "@/api/product"
|
||||
import goods from "./components/goods.vue"
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import projects from './components/projects.vue'
|
||||
import culture from "./components/culture.vue"
|
||||
import information from "./components/information.vue"
|
||||
export default {
|
||||
name: 'LandMarkPage',
|
||||
components: {
|
||||
goods,
|
||||
projects,
|
||||
culture,
|
||||
information
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
actived: 1,
|
||||
tabs: [
|
||||
{name: '项目', value: 1},
|
||||
{name: '文化', value: 2},
|
||||
{name: '资讯', value: 3},
|
||||
{name: '产品', value: 4},
|
||||
],
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
isLoad: false,
|
||||
@@ -114,6 +120,11 @@ export default {
|
||||
pageKeyId: Object.freeze('landmarkGoodsIndex')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
landmarkDataId() {
|
||||
return this.navList[this.navIndex] ? this.navList[this.navIndex]['id'] : null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getNavList()
|
||||
},
|
||||
@@ -128,6 +139,9 @@ export default {
|
||||
this.fetchGoods()
|
||||
},
|
||||
methods: {
|
||||
handleTab(value) {
|
||||
this.actived = value
|
||||
},
|
||||
getNavList() {
|
||||
getProvinceList().then(({data}) => {
|
||||
this.navList = data
|
||||
@@ -171,8 +185,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tabs-wrap{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx 20rpx 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.tab-item{
|
||||
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.top-wrap{
|
||||
padding: 20rpx 20rpx 0;
|
||||
}
|
||||
.pkg-product-land-mark {
|
||||
padding: 20rpx;
|
||||
background: #f0f0f0;
|
||||
.top-box {
|
||||
border-radius: 20rpx;
|
||||
@@ -219,73 +253,14 @@ export default {
|
||||
}
|
||||
.middle-img-wrap {
|
||||
margin: 20rpx 0 0 0;
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
margin-top: 24rpx;
|
||||
.item {
|
||||
position: relative;
|
||||
width: 344rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
.mark-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 84rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
.good-img {
|
||||
display: block;
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
.content {
|
||||
height: 156rpx;
|
||||
padding: 8rpx 8rpx 18rpx 8rpx;
|
||||
.more-t {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
padding: 5rpx 0;
|
||||
height: 34rpx;
|
||||
color: #FFC543;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #C52733;
|
||||
}
|
||||
.btn {
|
||||
display: block;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
margin: 20rpx 0 0 0;
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user