Merge branch 'dev' into test
This commit is contained in:
lifizer
@@ -78,6 +78,10 @@ export function getHomestay(id) {
|
||||
return request.get(`/contentHomestay/${id}`, {}, {login: false})
|
||||
}
|
||||
|
||||
export function getHomestayV2(id) {
|
||||
return request.get(`/contentHomestay/v2/${id}`, {}, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
* 节日专题
|
||||
* */
|
||||
@@ -85,6 +89,10 @@ export function getFestival() {
|
||||
return request.get('/contentFestival', {}, {login: false})
|
||||
}
|
||||
|
||||
export function getFestivalV2() {
|
||||
return request.get('/contentFestival/v2', {}, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
* 尖货专题
|
||||
* */
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 千县名品首页
|
||||
export function getCountyFamousIndex() {
|
||||
return request.get('/countyFamous/index', {}, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品省-县树形列表
|
||||
export function getCountyFamousCityTree(param) {
|
||||
return request.get('/countyFamous/cityTree', param, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品县城数据
|
||||
export function getCountyFamousCityDetail(id) {
|
||||
return request.get('/countyFamous/' + id, {}, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品县城店铺数据
|
||||
export function getCountyFamousCityShop(param) {
|
||||
return request.get('/countyFamous/shop', param, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品县城资讯数据
|
||||
export function getCountyFamousCityNews(param) {
|
||||
return request.get('/countyFamous/news', param, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品县城攻略数据
|
||||
export function getCountyFamousCityGuide(param) {
|
||||
return request.get('/countyFamous/guide', param, { login: true })
|
||||
}
|
||||
|
||||
// 获取千县名品县城攻略数据
|
||||
export function getCountyFamousCityGuideContent(param) {
|
||||
return request.get('/countyFamous/guide/content', param, { login: true })
|
||||
}
|
||||
@@ -23,18 +23,18 @@
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="name more-t">
|
||||
{{ item.storeName }}
|
||||
{{ item[nameKey] }}
|
||||
</view>
|
||||
<view v-if="item.bestContent" class="desc one-t">
|
||||
<view v-if="item.bestContent" class="desc more-t">
|
||||
{{ item.bestContent }}
|
||||
</view>
|
||||
<view v-if="item.couponName" class="coupon">
|
||||
<view v-if="item.couponName && showCoupon" class="coupon">
|
||||
<view class="tag">券</view>
|
||||
<view class="tag">{{ item.couponName }}</view>
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="price-txt price-red">￥{{ item.price }}</text>
|
||||
<text class="price-txt price-red">￥{{ item[priceKey] }}</text>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<image
|
||||
@@ -60,6 +60,19 @@ export default {
|
||||
imageKey: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: 'storeName'
|
||||
},
|
||||
priceKey: {
|
||||
type: String,
|
||||
default: 'price'
|
||||
},
|
||||
// 是否显示优惠券
|
||||
showCoupon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -108,6 +121,7 @@ export default {
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
width: 320rpx;
|
||||
padding: 10rpx 0 0 0;
|
||||
color: #FFC543;
|
||||
font-size: 24rpx;
|
||||
|
||||
@@ -577,6 +577,12 @@
|
||||
"navigationBarTitleText": "千县名品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/famousQianxian",
|
||||
"style": {
|
||||
"navigationBarTitleText": "千县名品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/famousStory",
|
||||
"style": {
|
||||
|
||||
+43
-42
@@ -367,8 +367,8 @@ export default {
|
||||
_this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage)
|
||||
_this.$set(_this, 'countyFamousImage', data.countyFamousImage)
|
||||
_this.$set(_this, 'oldUserPopup', data.oldUserPopup)
|
||||
_this.$set(_this, 'contentHomestay', data.contentHomestay)
|
||||
_this.$set(_this, 'contentFestival', data.contentFestival)
|
||||
_this.$set(_this, 'contentHomestay', data.contentHomestayV2)
|
||||
_this.$set(_this, 'contentFestival', data.contentFestivalV2)
|
||||
_this.bastLeftList = []
|
||||
_this.bastRightList = []
|
||||
for (let i = 0; i < data.bastList.length; i++) {
|
||||
@@ -418,27 +418,53 @@ export default {
|
||||
this.isOldUser = state
|
||||
},
|
||||
// 民宿专题
|
||||
goHomeStay(stay) {
|
||||
if (stay.uniappUrl) {
|
||||
this.$global.commonJump(stay.uniappUrl)
|
||||
goHomeStay(item) {
|
||||
if (item.type === 1) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/homestay?id=' + item.id })
|
||||
return
|
||||
}
|
||||
if (stay.type === 2 && stay.isLinkToProduct) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: stay.productId
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
if (stay.type === 1) {
|
||||
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
|
||||
}
|
||||
this.linkToThemePage(item)
|
||||
},
|
||||
// 节日专题
|
||||
goFestival() {
|
||||
if (this.contentFestival.type === 1) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/festival' })
|
||||
return
|
||||
}
|
||||
this.linkToThemePage(this.contentFestival)
|
||||
},
|
||||
// 尖货专题
|
||||
productSwiperItemClickHandle(item) {
|
||||
if (item.type === 1) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
|
||||
return
|
||||
}
|
||||
this.linkToThemePage(item)
|
||||
},
|
||||
linkToThemePage(item) {
|
||||
/**
|
||||
* type:1-专题页,2-商品,3-时令尝鲜
|
||||
* 当type=2，且uniappUrl有值，以跳转界面地址为准
|
||||
*/
|
||||
const type = item.type
|
||||
// 链接到特定页面
|
||||
if (type === 2 && item.uniappUrl) {
|
||||
this.$global.commonJump(item.uniappUrl)
|
||||
return
|
||||
}
|
||||
// 商品详情
|
||||
if (type === 2 && item.productId) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId
|
||||
}
|
||||
})
|
||||
}
|
||||
// 时令尝鲜
|
||||
if (type === 3) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/seasonList' })
|
||||
}
|
||||
},
|
||||
tapOld() {
|
||||
this.isOldUser = false
|
||||
@@ -493,31 +519,6 @@ export default {
|
||||
hotelItemClickHandle(item) {
|
||||
uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.id}&from=index` })
|
||||
},
|
||||
// 尖货专题
|
||||
productSwiperItemClickHandle(item) {
|
||||
// 类型:1-专题页 2-商品详情 3-时令尝鲜
|
||||
const type = item.type
|
||||
if (type === 1) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
|
||||
}
|
||||
// 链接到特定页面
|
||||
if (type === 2 && item.uniappUrl) {
|
||||
this.$global.commonJump(stay.uniappUrl)
|
||||
return
|
||||
}
|
||||
// 商品详情
|
||||
if (type === 2 && item.productId) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type === 3) {
|
||||
uni.navigateTo({ url: '/pkg_product/views/seasonList' })
|
||||
}
|
||||
},
|
||||
setTopHandle() {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
|
||||
+181
-336
@@ -1,84 +1,102 @@
|
||||
<template>
|
||||
<view class="pkg-product-land-mark" v-if="mapData">
|
||||
<view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
|
||||
<view class="view-box">
|
||||
<view class="search-box flex ai-center">
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
placeholder="搜索商品"
|
||||
placeholder-style="color:#999"
|
||||
@confirm="search()"
|
||||
/>
|
||||
<view class="pkg-product-land-mark">
|
||||
<view v-if="isLoad">
|
||||
<view class="top-box">
|
||||
<view class="nav flex">
|
||||
<view
|
||||
v-for="(item,index) in navList"
|
||||
:key="index"
|
||||
:class="{
|
||||
'active': navIndex === index
|
||||
}"
|
||||
class="flex flex-0 ai-center nav-item"
|
||||
@click="changeNav(index)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl+'/20231223183627184005.png'"
|
||||
mode="scaleToFill"
|
||||
style="width:30rpx;height:30rpx"
|
||||
@click="search()"
|
||||
:src="webUrl + '/home/landmark-icon.png'"
|
||||
class="bg"
|
||||
/>
|
||||
{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="view-box">
|
||||
<view class="map-box">
|
||||
<image
|
||||
:src="mapData.mapImage"
|
||||
mode="widthFix"
|
||||
class="img-map"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="map-box">
|
||||
<image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in mapLocations"
|
||||
:key="index"
|
||||
v-if="mapData.middleImage"
|
||||
class="middle-img-wrap"
|
||||
>
|
||||
<image
|
||||
: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"
|
||||
:style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
|
||||
@click="goGoods(item.productId)"
|
||||
>
|
||||
<view class="round">
|
||||
<view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
|
||||
</view>
|
||||
<view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
|
||||
<image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
|
||||
<view class="title flex ai-center">{{ item.mapTitle }}</view>
|
||||
<image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav flex">
|
||||
<view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
|
||||
:key="index" @click="changeNav(index)">{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main-box" v-if="mapData.recommended.storeImage"
|
||||
@click="goGoods(mapData.recommended.productId)">
|
||||
<image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
|
||||
<view class="box-mask flex flex-col jc-end">
|
||||
<view class="one-t bold">{{ mapData.recommended.title }}</view>
|
||||
<view class="more-t">{{ mapData.recommended.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-box flex flex-wrap">
|
||||
<view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
|
||||
<image :src="item.storeImage" mode="scaleToFill"/>
|
||||
<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 class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
|
||||
<!-- <view class="btn flex jc-center ai-center">立即购买</view>-->
|
||||
<image
|
||||
:src="webUrl + '/home/icon-cart.png'"
|
||||
class="btn"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="goods.length===0"/>
|
||||
<image
|
||||
v-if="isCompleteLoadGood"
|
||||
:src="webUrl + '/home/no-data-bg.png'"
|
||||
mode="widthFix"
|
||||
class="loadend"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
v-if="goods.length === 0"
|
||||
:src="webUrl + '/20231023131208675588.png'"
|
||||
class="img-nodata"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
|
||||
import {
|
||||
getProvince,
|
||||
getProvinceGoods,
|
||||
getProvinceList
|
||||
} from "@/api/product"
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
export default {
|
||||
name: 'LandMarkPage',
|
||||
mixins: [pageListenMixins],
|
||||
@@ -86,80 +104,60 @@ export default {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
isLoad: false,
|
||||
page: 1,
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
mapData: null,
|
||||
mapLocations: [],
|
||||
goods: [],
|
||||
directionClass: ['', 'up', 'right', 'down', 'left'],
|
||||
isCompleteLoadGood: false,
|
||||
pageKeyId: Object.freeze('landmarkGoodsIndex')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
topBoxBgColor() {
|
||||
return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
|
||||
},
|
||||
viewBoxBgColor() {
|
||||
return this.mapData?.backgroundColor || '#FFFFFF';
|
||||
},
|
||||
scale() {
|
||||
return 718 / (this.mapData?.mapImageWidth || 1);
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getNavList();
|
||||
this.getNavList()
|
||||
},
|
||||
onHide() {
|
||||
this.pageToHideHandle()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchGoods();
|
||||
if (this.isCompleteLoadGood) {
|
||||
return
|
||||
}
|
||||
this.page++
|
||||
this.fetchGoods()
|
||||
},
|
||||
methods: {
|
||||
getNavList() {
|
||||
getProvinceList().then(({data}) => {
|
||||
this.navList = data;
|
||||
this.changeNav(this.navIndex);
|
||||
});
|
||||
this.navList = data
|
||||
this.changeNav(this.navIndex)
|
||||
})
|
||||
},
|
||||
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.fetchGoods();
|
||||
},
|
||||
|
||||
changeNav(index) {
|
||||
this.navIndex = index;
|
||||
this.page = 1;
|
||||
this.getMap();
|
||||
this.fetchGoods();
|
||||
this.navIndex = index
|
||||
this.page = 1
|
||||
this.goods = []
|
||||
this.isCompleteLoadGood = false
|
||||
this.getMap()
|
||||
this.fetchGoods()
|
||||
},
|
||||
|
||||
getMap() {
|
||||
const id = this.navList[this.navIndex]['id']
|
||||
getProvince(id).then(({data}) => {
|
||||
this.mapData = data;
|
||||
this.mapLocations = data.mapLocations;
|
||||
this.calcPosition();
|
||||
});
|
||||
},
|
||||
|
||||
// 计算位置
|
||||
calcPosition() {
|
||||
this.mapLocations?.forEach(item => {
|
||||
item.gx = item.x * this.scale;
|
||||
item.gy = item.y * this.scale;
|
||||
this.mapData = data
|
||||
this.isLoad = true
|
||||
})
|
||||
},
|
||||
|
||||
fetchGoods() {
|
||||
const id = this.navList[this.navIndex]['id']
|
||||
getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
|
||||
if (this.page === 1) this.goods = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.goods.push(data[i]);
|
||||
const len = data.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
this.goods.push(data[i])
|
||||
}
|
||||
if (len === 0 || len < 10) {
|
||||
this.isCompleteLoadGood = true
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -174,273 +172,120 @@ export default {
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-product-land-mark {
|
||||
background: #F7F3ED;
|
||||
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
padding: 20rpx;
|
||||
background: #f0f0f0;
|
||||
.top-box {
|
||||
padding: 32rpx 0 20rpx;
|
||||
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
.view-box {
|
||||
position: relative;
|
||||
margin: 0 16rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.search-box {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 34rpx;
|
||||
width: 650rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
background: #FFFFFF;
|
||||
z-index: 10;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
width: 718rpx;
|
||||
|
||||
.img-map {
|
||||
width: 718rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
|
||||
.round {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
|
||||
background: #E12641;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
border: 2rpx solid #E12641;
|
||||
}
|
||||
|
||||
.line-up {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
width: 0;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.line-right {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
width: 30rpx;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.line-down {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 0;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
width: 30rpx;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
|
||||
.cover {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid #E12641;
|
||||
border-radius: 50%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 16rpx;
|
||||
background: #E12641;
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.label-up {
|
||||
top: -80rpx;
|
||||
left: -50%;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-right {
|
||||
top: -40rpx;
|
||||
left: 32rpx;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-down {
|
||||
left: -50%;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-left {
|
||||
left: -100%;
|
||||
transform: translate(-30rpx, -40rpx);
|
||||
|
||||
.title {
|
||||
margin-left: -9rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 30rpx 20rpx 0;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
overflow-x: scroll;
|
||||
|
||||
view {
|
||||
height: 52rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 18rpx;
|
||||
border: 4rpx solid transparent;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
.nav-item + .nav-item {
|
||||
margin: 0 0 0 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-box {
|
||||
.nav-item {
|
||||
position: relative;
|
||||
width: 718rpx;
|
||||
height: 360rpx;
|
||||
margin: 24rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.bg-main {
|
||||
width: 718rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.box-mask {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx 20rpx 0;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
.bg {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 6rpx;
|
||||
width: 63rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
.bg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-img-wrap {
|
||||
margin: 20rpx 0 0 0;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 16rpx 16rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
color: #FFFFFF;
|
||||
|
||||
.one-t {
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 46rpx;
|
||||
line-height: 52rpx;
|
||||
}
|
||||
|
||||
.more-t {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 10rpx;
|
||||
border-top: 1rpx solid #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
margin-top: 24rpx;
|
||||
padding: 0 16rpx 34rpx;
|
||||
|
||||
.item {
|
||||
width: 234rpx;
|
||||
height: 380rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
width: 344rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 234rpx;
|
||||
height: 234rpx;
|
||||
.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: 122rpx;
|
||||
margin: 6rpx 6rpx 18rpx;
|
||||
|
||||
height: 156rpx;
|
||||
padding: 8rpx 8rpx 18rpx 8rpx;
|
||||
.more-t {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
padding: 5rpx 0;
|
||||
height: 34rpx;
|
||||
color: #FFC543;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #DC1616;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #C52733;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
//background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
|
||||
//border-radius: 4rpx;
|
||||
//color: #764A00;
|
||||
//font-size: 24rpx;
|
||||
display: block;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(3n) {
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
margin: 20rpx 0 0 0;
|
||||
.loadend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<view class="pkg-product-land-mark" v-if="mapData">
|
||||
<view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
|
||||
<view class="view-box">
|
||||
<view class="search-box flex ai-center">
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
placeholder="搜索商品"
|
||||
placeholder-style="color:#999"
|
||||
@confirm="search()"
|
||||
/>
|
||||
<image
|
||||
:src="webUrl+'/20231223183627184005.png'"
|
||||
mode="scaleToFill"
|
||||
style="width:30rpx;height:30rpx"
|
||||
@click="search()"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="map-box">
|
||||
<image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
|
||||
|
||||
<view
|
||||
v-for="(item, index) in mapLocations"
|
||||
:key="index"
|
||||
class="item"
|
||||
:style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
|
||||
@click="goGoods(item.productId)"
|
||||
>
|
||||
<view class="round">
|
||||
<view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
|
||||
</view>
|
||||
<view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
|
||||
<image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
|
||||
<view class="title flex ai-center">{{ item.mapTitle }}</view>
|
||||
<image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav flex">
|
||||
<view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
|
||||
:key="index" @click="changeNav(index)">{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main-box" v-if="mapData.recommended.storeImage"
|
||||
@click="goGoods(mapData.recommended.productId)">
|
||||
<image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
|
||||
<view class="box-mask flex flex-col jc-end">
|
||||
<view class="one-t bold">{{ mapData.recommended.title }}</view>
|
||||
<view class="more-t">{{ mapData.recommended.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-box flex flex-wrap">
|
||||
<view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
|
||||
<image :src="item.storeImage" mode="scaleToFill"/>
|
||||
<view class="content flex flex-col jc-between">
|
||||
<view class="more-t bold">{{ item.title }}</view>
|
||||
<view class="flex jc-between ai-center">
|
||||
<text class="price">￥{{ item.price }}</text>
|
||||
<image class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
|
||||
<!-- <view class="btn flex jc-center ai-center">立即购买</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="goods.length===0"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
export default {
|
||||
name: 'LandMarkPage',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
page: 1,
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
mapData: null,
|
||||
mapLocations: [],
|
||||
goods: [],
|
||||
directionClass: ['', 'up', 'right', 'down', 'left'],
|
||||
pageKeyId: Object.freeze('landmarkGoodsIndex')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
topBoxBgColor() {
|
||||
return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
|
||||
},
|
||||
viewBoxBgColor() {
|
||||
return this.mapData?.backgroundColor || '#FFFFFF';
|
||||
},
|
||||
scale() {
|
||||
return 718 / (this.mapData?.mapImageWidth || 1);
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getNavList();
|
||||
},
|
||||
onHide() {
|
||||
this.pageToHideHandle()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchGoods();
|
||||
},
|
||||
methods: {
|
||||
getNavList() {
|
||||
getProvinceList().then(({data}) => {
|
||||
this.navList = data;
|
||||
this.changeNav(this.navIndex);
|
||||
});
|
||||
},
|
||||
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.fetchGoods();
|
||||
},
|
||||
|
||||
changeNav(index) {
|
||||
this.navIndex = index;
|
||||
this.page = 1;
|
||||
this.getMap();
|
||||
this.fetchGoods();
|
||||
},
|
||||
|
||||
getMap() {
|
||||
const id = this.navList[this.navIndex]['id']
|
||||
getProvince(id).then(({data}) => {
|
||||
this.mapData = data;
|
||||
this.mapLocations = data.mapLocations;
|
||||
this.calcPosition();
|
||||
});
|
||||
},
|
||||
|
||||
// 计算位置
|
||||
calcPosition() {
|
||||
this.mapLocations?.forEach(item => {
|
||||
item.gx = item.x * this.scale;
|
||||
item.gy = item.y * this.scale;
|
||||
})
|
||||
},
|
||||
|
||||
fetchGoods() {
|
||||
const id = this.navList[this.navIndex]['id']
|
||||
getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
|
||||
if (this.page === 1) this.goods = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.goods.push(data[i]);
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-product-land-mark {
|
||||
background: #F7F3ED;
|
||||
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
padding: 32rpx 0 20rpx;
|
||||
|
||||
.view-box {
|
||||
position: relative;
|
||||
margin: 0 16rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.search-box {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 34rpx;
|
||||
width: 650rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
background: #FFFFFF;
|
||||
z-index: 10;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
width: 718rpx;
|
||||
|
||||
.img-map {
|
||||
width: 718rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
|
||||
.round {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
|
||||
background: #E12641;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
border: 2rpx solid #E12641;
|
||||
}
|
||||
|
||||
.line-up {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
width: 0;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.line-right {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
width: 30rpx;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.line-down {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 0;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
width: 30rpx;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
|
||||
.cover {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
border: 6rpx solid #E12641;
|
||||
border-radius: 50%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 16rpx;
|
||||
background: #E12641;
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.label-up {
|
||||
top: -80rpx;
|
||||
left: -50%;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-right {
|
||||
top: -40rpx;
|
||||
left: 32rpx;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-down {
|
||||
left: -50%;
|
||||
|
||||
.title {
|
||||
margin-right: -9rpx;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-left {
|
||||
left: -100%;
|
||||
transform: translate(-30rpx, -40rpx);
|
||||
|
||||
.title {
|
||||
margin-left: -9rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 30rpx 20rpx 0;
|
||||
overflow-x: scroll;
|
||||
|
||||
view {
|
||||
height: 52rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 18rpx;
|
||||
border: 4rpx solid transparent;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-box {
|
||||
position: relative;
|
||||
width: 718rpx;
|
||||
height: 360rpx;
|
||||
margin: 24rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.bg-main {
|
||||
width: 718rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.box-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 16rpx 16rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
color: #FFFFFF;
|
||||
|
||||
.one-t {
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 46rpx;
|
||||
line-height: 52rpx;
|
||||
}
|
||||
|
||||
.more-t {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 10rpx;
|
||||
border-top: 1rpx solid #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
margin-top: 24rpx;
|
||||
padding: 0 16rpx 34rpx;
|
||||
|
||||
.item {
|
||||
width: 234rpx;
|
||||
height: 380rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 234rpx;
|
||||
height: 234rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 122rpx;
|
||||
margin: 6rpx 6rpx 18rpx;
|
||||
|
||||
.more-t {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
color: #DC1616;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
//background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
|
||||
//border-radius: 4rpx;
|
||||
//color: #764A00;
|
||||
//font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:class="index === 0 ? 'span24' : 'span12'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第五页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-5">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板1
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate1',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 1350rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.span24 {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
}
|
||||
.span12 {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-5 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 350rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
autoplay
|
||||
:interval="5000"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(swiperItem, swiperIndex) in templateProperties.page2Links"
|
||||
:key="swiperIndex"
|
||||
>
|
||||
<image
|
||||
:src="swiperItem.image"
|
||||
mode="scaleToFill"
|
||||
class="swiper-img"
|
||||
@click="itemClick(swiperItem)"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-3">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第五页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page5BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page5Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板2
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate2',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
width: 100%;
|
||||
height: 840rpx;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-3 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 30rpx 25rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<!-- 第二页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板3
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate3',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 35rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 680rpx;
|
||||
height: 700rpx;
|
||||
margin: 0 0 35rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view>
|
||||
<image
|
||||
:src="topImage"
|
||||
class="top-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<!-- 第二页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
:src="templateProperties.page2Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第三页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-2">
|
||||
<image
|
||||
:src="templateProperties.page3BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
:src="templateProperties.page3Image"
|
||||
class="item item1"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page3Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 第四页 -->
|
||||
<view class="page-wrap">
|
||||
<view class="page-4">
|
||||
<image
|
||||
:src="templateProperties.page4BackgroundImage"
|
||||
class="section-bg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="list flex flex-wrap">
|
||||
<image
|
||||
v-for="(item, index) in templateProperties.page4Links"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
class="item"
|
||||
mode="scaleToFill"
|
||||
@click="itemClick(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 模板4
|
||||
*/
|
||||
import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
|
||||
export default {
|
||||
name: 'ThemePageTemplate4',
|
||||
mixins: [themeTemplateMixins]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.top-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.page-wrap {
|
||||
position: relative;
|
||||
.page-2 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 750rpx;
|
||||
height: 400rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
&.item1 {
|
||||
height: 800rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-4 {
|
||||
.section-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 35rpx;
|
||||
right: 0;
|
||||
.item {
|
||||
display: block;
|
||||
width: 330rpx;
|
||||
height: 540rpx;
|
||||
margin: 0 22rpx 22rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
export const themeTemplateMixins = {
|
||||
props: {
|
||||
topImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
templateProperties: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit('view', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
+398
-180
@@ -1,47 +1,175 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
|
||||
|
||||
<view class="nav-box flex">
|
||||
<view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
|
||||
@click="navTap(index)">{{ item.value }}
|
||||
<view class="county-index">
|
||||
<view class="search-wrap">
|
||||
<view class="search-inner">
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
placeholder="请输入关键词县名~"
|
||||
placeholder-style="color:#949494"
|
||||
class="inp"
|
||||
@confirm="getListReq"
|
||||
>
|
||||
<view class="btn" @click="getListReq">
|
||||
搜索
|
||||
<image
|
||||
:src="webUrl + '/home/icon-search4.png'"
|
||||
class="icon"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title bold">千县名品榜单</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
|
||||
<image class="label" :src="webUrl+'/20230222133041781911.png'"/>
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
<view class="top-img">
|
||||
<image
|
||||
:src="countyFamousTopImage"
|
||||
class="img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="list.length > 0" class="province-wrap">
|
||||
<view
|
||||
:class="toggleStatus ? 'isopen' : ''"
|
||||
class="list"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="item"
|
||||
@click="provinceItemToViewHandle(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.icon"
|
||||
class="img"
|
||||
/>
|
||||
<view class="name one-t">
|
||||
{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="dataList.length===0"/>
|
||||
</view>
|
||||
<view
|
||||
class="toggle-wrap"
|
||||
@click="toggleStatusHandle"
|
||||
>
|
||||
<view v-if="!toggleStatus">
|
||||
<view>展</view>
|
||||
<view>开</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view>收</view>
|
||||
<view>起</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view v-if="isLoad">
|
||||
<view v-if="list.length > 0" class="list-cont">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="'province__' + item.provinceId"
|
||||
class="item"
|
||||
>
|
||||
<view class="name">
|
||||
<view class="txt">
|
||||
{{ item.provinceName }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.intro" class="desc">
|
||||
{{ item.intro }}
|
||||
</view>
|
||||
<view class="pic-wrap">
|
||||
<view v-if="item.countyTotal < 7" class="one-list">
|
||||
<view
|
||||
v-for="(county) in item.county"
|
||||
:key="county.id"
|
||||
class="county-item"
|
||||
@click="countyItemClick(county)"
|
||||
>
|
||||
<image
|
||||
:src="county.logo"
|
||||
class="county-img"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="county-txt one-t">
|
||||
{{ county.countyName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="more-list-wrap">
|
||||
<view class="more-list">
|
||||
<view
|
||||
v-for="(county) in item.oddList"
|
||||
:key="county.id"
|
||||
class="county-item"
|
||||
@click="countyItemClick(county)"
|
||||
>
|
||||
<image
|
||||
:src="county.logo"
|
||||
class="county-img"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="county-txt one-t">
|
||||
{{ county.countyName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-list">
|
||||
<view
|
||||
v-for="(county) in item.evenList"
|
||||
:key="county.id"
|
||||
class="county-item"
|
||||
@click="countyItemClick(county)"
|
||||
>
|
||||
<image
|
||||
:src="county.logo"
|
||||
class="county-img"
|
||||
/>
|
||||
<view class="county-name">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="county-txt one-t">
|
||||
{{ county.countyName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
v-if="list.length === 0"
|
||||
:src="webUrl + '/20231023131208675588.png'"
|
||||
class="img-nodata"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countyFamous} from '@/api/product'
|
||||
import {getProducts} from '@/api/store'
|
||||
import { famousShareImage } from '@/api/share'
|
||||
import {
|
||||
getCountyFamousIndex,
|
||||
getCountyFamousCityTree
|
||||
} from '@/api/qianxian'
|
||||
import { mapGetters } from 'vuex'
|
||||
import cookie from '@/utils/store/cookie'
|
||||
import { userBindParent } from '@/api/user'
|
||||
@@ -55,198 +183,290 @@ export default {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
page: 1,
|
||||
bannerList: [],
|
||||
dataList: [],
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
shareData: {},
|
||||
partnerId: null,
|
||||
countyFamousTopImage: '',
|
||||
toggleStatus: false,
|
||||
isLoad: false,
|
||||
list: [],
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['userInfo', 'isLogin']),
|
||||
onShareAppMessage() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const {status, data} = await famousShareImage();
|
||||
if (status === 200) {
|
||||
resolve({
|
||||
return {
|
||||
title: '探寻有趣有味的生活方式',
|
||||
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
||||
imageUrl: data
|
||||
})
|
||||
imageUrl: this.shareData
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.partnerId) {
|
||||
this.partnerId = options.partnerId || null;
|
||||
this.partnerId = options.partnerId || null
|
||||
} else {
|
||||
let obj = uni.getEnterOptionsSync();
|
||||
const obj = uni.getEnterOptionsSync()
|
||||
if (options.scene != null || obj.query.scene != null) {
|
||||
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
|
||||
this.partnerId = getUrlParam(query, 'partnerId') || null;
|
||||
const query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene)
|
||||
this.partnerId = getUrlParam(query, 'partnerId') || null
|
||||
}
|
||||
}
|
||||
if (this.partnerId) {
|
||||
cookie.set('spread', this.partnerId);
|
||||
userBindParent({spread: parseInt(this.partnerId)});
|
||||
cookie.set('spread', this.partnerId)
|
||||
userBindParent({spread: parseInt(this.partnerId)})
|
||||
}
|
||||
|
||||
countyFamous().then(({data}) => {
|
||||
this.bannerList = data.banner;
|
||||
this.navList = data.countyFamousAreaList;
|
||||
this.search();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
},
|
||||
navTap(index) {
|
||||
if (index === this.navIndex) return;
|
||||
this.navIndex = index;
|
||||
this.search();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
isCountyFamous: 1,
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
|
||||
init() {
|
||||
// 分享数据
|
||||
famousShareImage().then(res => {
|
||||
this.shareData = res.data
|
||||
})
|
||||
// 顶部图片
|
||||
getCountyFamousIndex().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.countyFamousTopImage = data.countyFamousTopImage || ''
|
||||
}
|
||||
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
})
|
||||
// 列表数据
|
||||
this.getListReq()
|
||||
},
|
||||
toggleStatusHandle() {
|
||||
this.toggleStatus = !this.toggleStatus
|
||||
},
|
||||
getListReq() {
|
||||
this.isLoad = false
|
||||
getCountyFamousCityTree({
|
||||
keyword: this.keyword || ''
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.list = data || []
|
||||
this.list.map(item => {
|
||||
const total = item.county.length || 0
|
||||
item.countyTotal = total
|
||||
// 偶数列
|
||||
item.evenList = []
|
||||
// 奇数列
|
||||
item.oddList = []
|
||||
if (total >= 7) {
|
||||
item.county.map((county, countyIndex) => {
|
||||
if (countyIndex % 2 === 0) {
|
||||
item.oddList.push(county)
|
||||
}
|
||||
if (countyIndex % 2 === 1) {
|
||||
item.evenList.push(county)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.isLoad = true
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
|
||||
provinceItemToViewHandle(item) {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query.select(`.province__${item.provinceId}`).boundingClientRect(data => {
|
||||
if (data) {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: data.top || 0,
|
||||
duration: 200
|
||||
})
|
||||
}
|
||||
}).exec()
|
||||
},
|
||||
goStory() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/famousStory'
|
||||
})
|
||||
countyItemClick(item) {
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxian?id=${item.id}` })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
.swiper-box {
|
||||
margin: 18rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 32rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 718rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 26rpx 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
margin-right: 50rpx;
|
||||
color: #7D7D7D;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
.county-index {
|
||||
position: relative;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
.search-wrap {
|
||||
padding: 20rpx 50rpx;
|
||||
background-color: #fff;
|
||||
.search-inner {
|
||||
display: flex;
|
||||
padding: 8rpx;
|
||||
border-radius: 40px;
|
||||
border: 2px solid #379748;
|
||||
.inp {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
padding: 0 20rpx 0 30rpx;
|
||||
line-height: 84rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "";
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 32rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
background-color: #379748;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 0 0 0 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-img {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 30px;
|
||||
background: #FF564A;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
|
||||
.label {
|
||||
.province-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: -50rpx;
|
||||
display: flex;
|
||||
padding: 30rpx 20rpx 30rpx 30rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
.list {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
margin: 0 20rpx 0 0;
|
||||
.img {
|
||||
display: block;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 64rpx;
|
||||
margin: 4rpx 0;
|
||||
font-size: 34rpx;
|
||||
line-height: 48rpx;
|
||||
width: 80rpx;
|
||||
padding: 10rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.isopen {
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle-wrap {
|
||||
padding: 0 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 80rpx 30rpx 30rpx 30rpx;
|
||||
background-color: #F0F0F0;
|
||||
.item + .item {
|
||||
margin: 30rpx 0 0 0;
|
||||
}
|
||||
.item {
|
||||
padding: 30rpx 0 20rpx 30rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
|
||||
.name {
|
||||
display: flex;
|
||||
padding: 0 30rpx 0 0;
|
||||
font-size: 44rpx;
|
||||
line-height: 44rpx;
|
||||
color: #333;
|
||||
.txt {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
content: " ";
|
||||
background: linear-gradient(90deg, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
padding: 20rpx 30rpx 0 0;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
.pic-wrap {
|
||||
position: relative;
|
||||
padding: 30rpx 0 0 0;
|
||||
.county-item {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin: 0 16rpx 0 0;
|
||||
.county-img {
|
||||
display: block;
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.county-name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 168rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 16rpx 16rpx 16rpx;
|
||||
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
|
||||
.icon {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
.county-txt {
|
||||
width: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.one-list {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.more-list-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.more-list + .more-list {
|
||||
margin: 16rpx 0 0 0;
|
||||
}
|
||||
.more-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.bold {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
@@ -255,6 +475,4 @@ export default {
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
|
||||
|
||||
<view class="nav-box flex">
|
||||
<view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
|
||||
@click="navTap(index)">{{ item.value }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title bold">千县名品榜单</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
|
||||
<image class="label" :src="webUrl+'/20230222133041781911.png'"/>
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
|
||||
v-if="dataList.length===0"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countyFamous} from '@/api/product'
|
||||
import {getProducts} from '@/api/store'
|
||||
import {famousShareImage} from '@/api/share'
|
||||
import {mapGetters} from 'vuex'
|
||||
import cookie from '@/utils/store/cookie'
|
||||
import {userBindParent} from '@/api/user'
|
||||
import {getUrlParam} from '@/utils/common.js'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
export default {
|
||||
name: 'FamousList',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: '',
|
||||
page: 1,
|
||||
bannerList: [],
|
||||
dataList: [],
|
||||
navList: [],
|
||||
navIndex: 0,
|
||||
partnerId: null,
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['userInfo', 'isLogin']),
|
||||
onShareAppMessage() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const {status, data} = await famousShareImage();
|
||||
if (status === 200) {
|
||||
resolve({
|
||||
title: '探寻有趣有味的生活方式',
|
||||
path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
|
||||
imageUrl: data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.partnerId) {
|
||||
this.partnerId = options.partnerId || null;
|
||||
} else {
|
||||
let obj = uni.getEnterOptionsSync();
|
||||
if (options.scene != null || obj.query.scene != null) {
|
||||
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
|
||||
this.partnerId = getUrlParam(query, 'partnerId') || null;
|
||||
}
|
||||
}
|
||||
if (this.partnerId) {
|
||||
cookie.set('spread', this.partnerId);
|
||||
userBindParent({spread: parseInt(this.partnerId)});
|
||||
}
|
||||
|
||||
countyFamous().then(({data}) => {
|
||||
this.bannerList = data.banner;
|
||||
this.navList = data.countyFamousAreaList;
|
||||
this.search();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
},
|
||||
navTap(index) {
|
||||
if (index === this.navIndex) return;
|
||||
this.navIndex = index;
|
||||
this.search();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
isCountyFamous: 1,
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
|
||||
}
|
||||
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
|
||||
})
|
||||
},
|
||||
goStory() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/famousStory'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
.swiper-box {
|
||||
margin: 18rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 32rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 718rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 26rpx 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
margin-right: 50rpx;
|
||||
color: #7D7D7D;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 30px;
|
||||
background: #FF564A;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 64rpx;
|
||||
margin: 4rpx 0;
|
||||
font-size: 34rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.bold {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 40rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 352rpx;
|
||||
height: 338rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="county-index">
|
||||
<view v-if="isLoad">
|
||||
<view class="top-img" @click="gotoQianxianShop">
|
||||
<image
|
||||
:src="countyFamous.cover"
|
||||
class="img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="info-wrap">
|
||||
<view class="name">
|
||||
{{ countyFamous.countyName }}
|
||||
<view v-if="countyFamous.content" class="content">
|
||||
{{ countyFamous.content }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="intro">
|
||||
{{ countyFamous.intro }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view v-if="isLoad">
|
||||
<view class="list-cont">
|
||||
<view class="list-cont-left">
|
||||
<view
|
||||
v-for="(item, index) in leftList"
|
||||
:key="index"
|
||||
class="item flex"
|
||||
>
|
||||
<xdd-product-item
|
||||
:item="item"
|
||||
:show-coupon="false"
|
||||
name-key="productName"
|
||||
image-key="productImage"
|
||||
price-key="productPrice"
|
||||
@view="goGoodsCon(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cont-right">
|
||||
<view
|
||||
v-for="(item, index) in rightList"
|
||||
:key="index"
|
||||
class="item flex"
|
||||
>
|
||||
<xdd-product-item
|
||||
:item="item"
|
||||
:show-coupon="false"
|
||||
name-key="productName"
|
||||
image-key="productImage"
|
||||
price-key="productPrice"
|
||||
@view="goGoodsCon(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton
|
||||
v-else
|
||||
:show-avatar="false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCountyFamousCityDetail
|
||||
} from '@/api/qianxian'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import XddProductItem from '@/components/xdd-product-item'
|
||||
|
||||
export default {
|
||||
name: 'FamousQianxian',
|
||||
components: {
|
||||
XddProductItem
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
isLoad: false,
|
||||
countyFamous: {},
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
pageKeyId: Object.freeze('countyFamousIndex')
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id || ''
|
||||
this.init(id)
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.isLoad = false
|
||||
getCountyFamousCityDetail(id).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.countyFamous = data
|
||||
const products = data.products || []
|
||||
products.map((item, index) => {
|
||||
item.isOldBrand = 0
|
||||
item.isLandmarkGoods = 0
|
||||
item.isCountyFamous = 1
|
||||
if (index % 2 === 0) {
|
||||
this.leftList.push(item)
|
||||
}
|
||||
if (index % 2 === 1) {
|
||||
this.rightList.push(item)
|
||||
}
|
||||
})
|
||||
this.isLoad = true
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoQianxianShop() {
|
||||
uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${this.countyFamous.id}` })
|
||||
},
|
||||
goGoodsCon(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${item.productId}&from=famous`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.county-index {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
.top-img {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 21rpx;
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.info-wrap {
|
||||
padding: 30rpx 0 0 0;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.content {
|
||||
margin: 0 0 0 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
padding: 20rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-indent: 2em;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 21rpx 21rpx 21rpx;
|
||||
background-color: #F0F0F0;
|
||||
.list-cont-left,
|
||||
.list-cont-right {
|
||||
width: calc(50% - 11rpx);
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
margin: 21rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,6 +9,7 @@
|
||||
color='#ffffff'
|
||||
/>
|
||||
<view v-if="isLoad">
|
||||
<view v-if="templateKey === 'default_template'">
|
||||
<image
|
||||
v-if="topImage"
|
||||
:src="topImage"
|
||||
@@ -35,11 +36,40 @@
|
||||
:class="cIndex === 0 ? 'span12' : 'span8'"
|
||||
:src="item.image"
|
||||
mode="scaleToFill"
|
||||
@click="goGoods(item.id || item.linkId)"
|
||||
@click="goGoodsOrShop(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_1'">
|
||||
<theme-page-template1
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_2'">
|
||||
<theme-page-template2
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_3'">
|
||||
<theme-page-template3
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_4'">
|
||||
<theme-page-template4
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton v-else />
|
||||
</view>
|
||||
</template>
|
||||
@@ -48,17 +78,30 @@
|
||||
* 节日专题&尖货推荐初始模板
|
||||
* options.theme:best-尖货，''-节日
|
||||
*/
|
||||
import { getFestival, getContentBest } from '@/api/product'
|
||||
import { getFestivalV2, getContentBest } from '@/api/product'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
|
||||
import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
|
||||
import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
|
||||
import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
|
||||
export default {
|
||||
name: 'FestivalPage',
|
||||
components: {
|
||||
ThemePageTemplate1,
|
||||
ThemePageTemplate2,
|
||||
ThemePageTemplate3,
|
||||
ThemePageTemplate4
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
topImage: '',
|
||||
contents: {},
|
||||
pageKeyId: ''
|
||||
contents: [],
|
||||
pageKeyId: '',
|
||||
templateKey: '',
|
||||
// 模板数据
|
||||
templateProperties: {}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -67,13 +110,41 @@ export default {
|
||||
// 尖货
|
||||
if (theme === 'best') {
|
||||
this.pageKeyId = `appContentBest_id_${id}`
|
||||
getContentBest(id).then(({data}) => {
|
||||
this.getContentBestReq(id)
|
||||
} else {
|
||||
this.pageKeyId = 'appContentFestival'
|
||||
this.getFestivalReq()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFestivalReq() {
|
||||
/*旧接口
|
||||
getFestival().then(({data}) => {
|
||||
this.isLoad = true
|
||||
this.topImage = data.topImage
|
||||
this.contents = data.contents
|
||||
})
|
||||
*/
|
||||
getFestivalV2().then(res => {
|
||||
const { data } = res
|
||||
this.renderTemplateData(data)
|
||||
})
|
||||
},
|
||||
getContentBestReq(id) {
|
||||
getContentBest(id).then(res => {
|
||||
const { data } = res
|
||||
this.renderTemplateData(data)
|
||||
})
|
||||
},
|
||||
renderTemplateData(data) {
|
||||
const contents = []
|
||||
if (data.templateProperties) {
|
||||
const templateKey = data.templateKey
|
||||
const temp = data.templateProperties
|
||||
// 第一页图片
|
||||
this.topImage = temp.page1Image
|
||||
// 默认模板
|
||||
if (templateKey === 'default_template') {
|
||||
// 第二页数据
|
||||
contents.push({
|
||||
backgroundImage: temp.page2BackgroundImage,
|
||||
@@ -85,22 +156,27 @@ export default {
|
||||
products: temp.page3Links
|
||||
})
|
||||
}
|
||||
this.contents = contents
|
||||
})
|
||||
} else {
|
||||
this.pageKeyId = 'appContentFestival'
|
||||
getFestival().then(({data}) => {
|
||||
this.isLoad = true
|
||||
this.topImage = data.topImage
|
||||
this.contents = data.contents
|
||||
})
|
||||
// 模板1
|
||||
if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
|
||||
this.templateProperties = temp
|
||||
}
|
||||
}
|
||||
this.templateKey = data.templateKey
|
||||
this.contents = contents
|
||||
this.isLoad = true
|
||||
},
|
||||
methods: {
|
||||
goGoods(id) {
|
||||
goGoodsOrShop(item) {
|
||||
const id = item.linkId
|
||||
const type = item.type || 1
|
||||
if (type === 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInn/inn/innHome?id=${id}&from=festival`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+157
-43
@@ -1,38 +1,3 @@
|
||||
<script>
|
||||
// 民宿专题
|
||||
import {getHomestay} from '@/api/product'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
export default {
|
||||
name: 'HomestayPage',
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
topImage: '',
|
||||
contents: [],
|
||||
id: null,
|
||||
pageKeyId: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id
|
||||
this.id = id
|
||||
this.pageKeyId = `appContentHomestay_id_${id}`
|
||||
getHomestay(this.id).then(({data}) => {
|
||||
this.topImage = data.topImage
|
||||
this.contents = data.contents
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goInnDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInn/inn/innHome?id=${item.id}&from=homestay`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="pkg-product-homestay">
|
||||
<hx-navbar
|
||||
@@ -43,18 +8,167 @@ export default {
|
||||
transparent="auto"
|
||||
color='#ffffff'
|
||||
/>
|
||||
<image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
|
||||
|
||||
<view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
|
||||
<image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
|
||||
|
||||
<view class="list flex flex-wrap" :class="cIndex===2?'section12':'section24'">
|
||||
<image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
|
||||
v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
|
||||
<view v-if="isLoad">
|
||||
<view v-if="templateKey === 'default_template_homestay'">
|
||||
<image
|
||||
v-if="topImage"
|
||||
:src="topImage"
|
||||
mode="widthFix"
|
||||
class="top-img"
|
||||
/>
|
||||
<view
|
||||
v-for="(content, cIndex) in contents"
|
||||
:key="cIndex"
|
||||
class="section"
|
||||
>
|
||||
<image
|
||||
:src="content.backgroundImage"
|
||||
mode="widthFix"
|
||||
class="section-bg"
|
||||
/>
|
||||
<view
|
||||
:class="cIndex === 2 ? 'section12' : 'section24'"
|
||||
class="list flex flex-wrap"
|
||||
>
|
||||
<image
|
||||
v-for="(item, index) in content.list"
|
||||
:key="index"
|
||||
:src="item.image"
|
||||
:class="cIndex === 2 ? 'span12' : 'span24'"
|
||||
mode="scaleToFill"
|
||||
@click="goGoodsOrShop(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_1'">
|
||||
<theme-page-template1
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_2'">
|
||||
<theme-page-template2
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_3'">
|
||||
<theme-page-template3
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="templateKey === 'template_4'">
|
||||
<theme-page-template4
|
||||
:top-image="topImage"
|
||||
:template-properties="templateProperties"
|
||||
@view="goGoodsOrShop"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goo-skeleton v-else />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// 民宿专题
|
||||
import { getHomestayV2 } from '@/api/product'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
|
||||
import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
|
||||
import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
|
||||
import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
|
||||
export default {
|
||||
name: 'HomestayPage',
|
||||
components: {
|
||||
ThemePageTemplate1,
|
||||
ThemePageTemplate2,
|
||||
ThemePageTemplate3,
|
||||
ThemePageTemplate4
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
topImage: '',
|
||||
contents: [],
|
||||
pageKeyId: '',
|
||||
templateKey: '',
|
||||
// 模板数据
|
||||
templateProperties: {}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id
|
||||
this.pageKeyId = `appContentHomestay_id_${id}`
|
||||
this.getHomestayReq(id)
|
||||
},
|
||||
methods: {
|
||||
getHomestayReq(id) {
|
||||
/*旧接口
|
||||
getHomestay(this.id).then(({data}) => {
|
||||
this.topImage = data.topImage
|
||||
this.contents = data.contents
|
||||
})
|
||||
*/
|
||||
getHomestayV2(id).then(res => {
|
||||
const { data } = res
|
||||
this.renderTemplateData(data)
|
||||
})
|
||||
},
|
||||
renderTemplateData(data) {
|
||||
const contents = []
|
||||
if (data.templateProperties) {
|
||||
const templateKey = data.templateKey
|
||||
const temp = data.templateProperties
|
||||
// 第一页图片
|
||||
this.topImage = temp.page1Image
|
||||
// 默认模板
|
||||
if (templateKey === 'default_template_homestay') {
|
||||
// 第二页数据
|
||||
contents.push({
|
||||
backgroundImage: temp.page2BackgroundImage,
|
||||
list: temp.page2Links
|
||||
})
|
||||
// 第三页数据
|
||||
contents.push({
|
||||
backgroundImage: temp.page3BackgroundImage,
|
||||
list: temp.page3Links
|
||||
})
|
||||
// 第四页数据
|
||||
contents.push({
|
||||
backgroundImage: temp.page4BackgroundImage,
|
||||
list: temp.page4Links
|
||||
})
|
||||
}
|
||||
// 模板1
|
||||
if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
|
||||
this.templateProperties = temp
|
||||
}
|
||||
}
|
||||
this.templateKey = data.templateKey
|
||||
this.contents = contents
|
||||
this.isLoad = true
|
||||
},
|
||||
goGoodsOrShop(item) {
|
||||
const id = item.linkId
|
||||
const type = item.type || 1
|
||||
if (type === 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInn/inn/innHome?id=${id}&from=festival`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pkg-product-homestay {
|
||||
|
||||
@@ -52,7 +52,7 @@ export default {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
goGoods() {
|
||||
uni.switchTab({url: '/pages/home/landMark'})
|
||||
uni.navigateTo({url: '/pages/home/landMark'})
|
||||
// this.$global.navToGoods(this.data.productId)
|
||||
},
|
||||
selectCoupon() {
|
||||
|
||||
Reference in New Issue
Block a user