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

Feat:接口对接

Browse Source
This commit is contained in:
lifizer
2023-11-20 15:54:00 +08:00
parent 4652b6706a
commit a3ac5a2506
24 changed files with 2305 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/index.vue
+129 -33
View File
@@ -66,10 +66,10 @@
</view>
<!-- 快捷跳转块v4end -->
<view style="padding-bottom:20rpx;background: #fff;">
<!-- <view style="padding-bottom:20rpx;background: #fff;">-->
<!-- 转盘-->
<!-- <image class="home-luck" :src="`${webUrl}/20220519145845818243.png`" mode="scaleToFill" @click="goLuck"></image>-->
</view>
<!-- </view>-->
<!-- 伴手礼精品 -->
<!-- <view class="wrapper hot" v-if="likeInfo.length > 0">-->
@@ -212,30 +212,48 @@
<!-- v4 每天特价结束 -->
<!-- v9 专题 -->
<!-- <view class="subject-box">-->
<!-- <view class="section-half flex jc-between">-->
<!-- <image src="@/static/images/v9/subject-148@2x.png" mode="scaleToFill"/>-->
<!-- <image src="@/static/images/v9/subject-149@2x.png" mode="scaleToFill"/>-->
<!-- </view>-->
<!-- <view class="section-full flex jc-between">-->
<!-- <image src="@/static/images/v9/subject-148@2x.png" mode="scaleToFill"/>-->
<!-- <image src="@/static/images/v9/subject-149@2x.png" mode="scaleToFill"/>-->
<!-- </view>-->
<!-- </view>-->
<view class="subject-box">
<view class="section-half flex jc-between">
<image class="bg-img" :src="countyFamous.backgroundImage" mode="scaleToFill"
@click="$global.commonJump('/pkg_product/views/famousList')" v-if="countyFamous.backgroundImage"/>
<view class="food-box" @click="$global.commonJump('/pkg_product/views/seasonList')">
<image class="bg-img" :src="seasonalFood.backgroundImage" mode="scaleToFill"
v-if="seasonalFood.backgroundImage"/>
<swiper class="swiper" circular autoplay :interval="3000">
<swiper-item v-for="(arr,arrIndex) in seasonalFood.groupList" :key="arrIndex">
<view class="flex">
<image :src="item.image" mode="scaleToFill" v-for="(item,index) in arr" :key="index"/>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="section-full flex jc-between">
<swiper class="swiper" circular autoplay :interval="3000">
<swiper-item v-for="(stay,stayIndex) in contentHomestay" :key="stayIndex">
<image :src="stay.indexImage" mode="scaleToFill" @click="goHomeStay(stay)"/>
</swiper-item>
</swiper>
<!-- <image :src="contentHomestay.indexImage" mode="scaleToFill" @click="goHomeStay" v-if="contentHomestay.indexImage"/>-->
<image :src="contentFestival.indexImage" mode="scaleToFill" @click="goFestival"
v-if="contentFestival.indexImage"/>
</view>
</view>
<!-- v9 老用户弹窗 -->
<!-- <u-popup :show="isOldUser" mode="center" bgColor="transparent">-->
<!-- <view class="popup-old-user flex flex-col ai-center">-->
<!-- <image class="main" src="@/static/images/v9/subject-149@2x.png" mode="scaleToFill"/>-->
<!-- <view class="icon-box flex jc-center ai-center" @click="isOldUser=false">-->
<!-- <image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>-->
<!-- </view>-->
<!-- </view>-->
<!-- </u-popup>-->
<u-popup :show="isOldUser" mode="center" bgColor="transparent">
<view class="popup-old-user flex flex-col ai-center">
<image class="main" :src="oldUserPopup.image" mode="scaleToFill" @click="$global.commonJump(oldUserPopup.url)"/>
<view class="icon-box flex jc-center ai-center" @click="changeOldPopup(false)">
<image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>
</view>
</view>
</u-popup>
<!-- 2022/6/20 add 尖货推荐 special-offer-->
<view class="bast-box">
<view style="padding: 0 32rpx">
<view style="padding: 0 32rpx;background: #FFFFFF;">
<image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
</view>
<view class="list flex" v-if="bastList.length">
@@ -431,6 +449,11 @@ export default {
bannarList: [], // 尖货推荐横幅
shareAppImg: "", // 发送给朋友
isOldUser: true, // 老用户弹窗
oldUserPopup: {},
contentHomestay: {},
contentFestival: {},
countyFamous: {},
seasonalFood: {}
};
},
onLoad: function (options) {
@@ -545,6 +568,23 @@ export default {
}
return item;
}));
that.$set(that, 'oldUserPopup', res.data.oldUserPopup)
that.$set(that, 'contentHomestay', res.data.contentHomestay)
that.$set(that, 'contentFestival', res.data.contentFestival)
that.$set(that, 'countyFamous', res.data.countyFamous)
// 处理时令尝鲜轮播图所需数据
const foodLen = res.data.seasonalFood.productsCarousels.length;
const foods = res.data.seasonalFood.productsCarousels;
let groupList = [];
if (foodLen) {
const count = 4;
for (let i = 0; i < foodLen; i += count) {
groupList.push(foods.slice(i, i + count))
}
}
res.data.seasonalFood.groupList = groupList;
that.$set(that, 'seasonalFood', res.data.seasonalFood)
if (that.firstList.length > 0) {
that.newGoods = that.firstList[0];
@@ -575,12 +615,12 @@ export default {
}, 1)
// 尖货推荐
let temp = {
storeName: "swiper",
image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
bannarList: that.bannarList
}
res.data.bastList.unshift(temp);
// let temp = {
// storeName: "swiper",
// image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
// bannarList: that.bannarList
// }
// res.data.bastList.unshift(temp);
for (let i = 0; i < res.data.bastList.length; i++) {
res.data.bastList[i].hide = true;
}
@@ -838,6 +878,28 @@ export default {
from
}
});
},
changeOldPopup(state) {
this.isOldUser = state;
},
goHomeStay(stay) {
if (stay.type === 2 && stay.isLinkToProduct) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: stay.productId
}
});
}
if (stay.type === 1) {
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
}
},
goFestival() {
uni.navigateTo({url: '/pkg_product/views/festival'})
}
}
};
@@ -1721,7 +1783,8 @@ export default {
}
.subject-box {
padding: 40rpx 32rpx;
padding: 20rpx 32rpx 40rpx;
background: #FFFFFF;
image {
vertical-align: middle;
@@ -1730,10 +1793,38 @@ export default {
.section-half {
margin-bottom: 16rpx;
image {
.bg-img {
width: 336rpx;
height: 180rpx;
}
.food-box {
position: relative;
width: 336rpx;
height: 180rpx;
overflow: hidden;
.swiper {
position: absolute;
left:20rpx;
bottom:20rpx;
width: 296rpx;
height: 72rpx;
overflow: hidden;
z-index: 10;
image {
width: 72rpx;
height: 72rpx;
margin-right: 4rpx;
border-radius: 4rpx;
}
image:last-child {
margin-right: 0;
}
}
}
}
.section-full {
@@ -1741,6 +1832,11 @@ export default {
width: 336rpx;
height: 480rpx;
}
.swiper {
width: 336rpx;
height: 480rpx;
}
}
}
@@ -1759,10 +1855,10 @@ export default {
width: 96rpx;
height: 96rpx;
margin-top: 40rpx;
background: rgba(51,51,51,.4);
background: rgba(51, 51, 51, .4);
border-radius: 50%;
image{
image {
width: 40rpx;
height: 40rpx;
}
@@ -1773,7 +1869,7 @@ export default {
.bast-title {
width: 312rpx;
height: 40rpx;
margin: 32rpx 0 16rpx;
margin: 16rpx 0 16rpx;
}
.bannar-swiper {
@@ -1786,7 +1882,7 @@ export default {
}
.list {
padding: 0 32rpx 32rpx;
padding: 32rpx;
.item {
position: relative;
pages/home/landMark.vue
+426
View File
@@ -0,0 +1,426 @@
<script>
import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
export default {
name: "landMark",
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
keyword: '',
page: 1,
navList: [],
navIndex: 0,
mapData: null,
mapLocations: [],
goods: [],
directionClass: ['', 'up', 'right', 'down', 'left'],
}
},
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);
}
},
onShow() {
this.getNavList();
},
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]);
}
})
}
}
}
</script>
<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 type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#999"
@confirm="search()"/>
</view>
<view class="map-box">
<image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
<view class="item" :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}" v-for="item in mapLocations" @click="$global.navToGoods(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="$global.navToGoods(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="$global.navToGoods(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>
<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>