<template>
<view>
<!-- :paging-style="{
background: 'linear-gradient(to right, #FEE74F 50%, #FCEFA3 100%),linear-gradient(to bottom, #FEE74F 0%, #fff 30%)',
backgroundBlendMode: 'overlay'
}" -->
<z-paging>
<view class="bg">
<view class="" :style="{height: navBarHeight +'px'}">
</view>
<!-- 名字地址 -->
<view class="flex align-center justify-start padding-lr" style="height: 60rpx;">
<view class="text-bold text-black" style="font-size: 48rpx; line-height: 60rpx;">
惠邻鸟
</view>
<view class="">
<view class="flex align-center">
<u-icon name="map"></u-icon>
<view class="text-sm text-bold">
{{city}}
</view>
</view>
<view class="flex align-center">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/sun.svg"
height="30" width="30"></u-image>
<view class="text-xs">
26℃
</view>
</view>
</view>
</view>
<!-- 搜索框 -->
<view class="w-94 margin-tb-sm flex align-center justify-between"
style=" height: 80rpx;border-radius: 40rpx; background-color: #FFFFFF;">
<view class="padding-left-lg flex align-center justify-start">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/search.svg"
height="40" width="40"></u-image>
<view class="flex align-center justify-center padding-left-xs" style="color: #666666;">
搜索附近商品
</view>
</view>
<view class="" @click="lala()">
<view class="flex align-center text-white justify-center margin-right-sm "
style="height: 60rpx; width: 116rpx; background: linear-gradient(to right, #F0965F, #E76649 10vh, #E76649 100%); border-radius: 30rpx;">
搜索
</view>
</view>
</view>
<!-- 轮播图 -->
<view class="w-94 padding-top-sm">
<u-swiper :list="bannerList" height="342" bg-color="rgba(255,255,255,0)" border-radius="20"
@click="gohd()"></u-swiper>
</view>
<!-- 金刚区 -->
<view class="flex align-center justify-between margin-top w-94 flex-wrap">
<view v-for="(item, index) in list1" :key="item.index" @click="goshop(index)"
class="item flex flex-direction align-center justify-between flex-wrap">
<u-image :src="item.icon" width="80" height="80"></u-image>
<view class="margin-top-xs text-df text-black">
{{item.name}}
</view>
</view>
</view>
<!-- 公告 -->
<view class="w-94 notice flex align-center flex align-center justify-start">
<view class="padding-left-lg">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/horn.png" width="40"
height="40"></u-image>
</view>
<view class="text-sm padding-left-sm" style="color: #666446;">
未来三天大幅降温,各位邻居出门记得加衣哦~
</view>
</view>
<!-- 专区 -->
<view class=" w-94 flex align-center justify-between margin-top" style="height: 150rpx;">
<view class="" style="height: 160rpx; width: 230rpx;" @click="go(0)">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/seckilll1.png"
width="230" height="160"></u-image>
</view>
<view class="" style="height: 160rpx; width: 230rpx;" @click="go(1)">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/seckill2.png"
width="230" height="160"></u-image>
</view>
<view class="" style="height: 160rpx; width: 230rpx;" @click="go(2)">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/seckill3.png"
width="230" height="160"></u-image>
</view>
</view>
<!-- 店铺 -->
<view v-for="store in shopList" :key="store.id" class="w-94 margin-top-lg flex justify-between"
style="height: 300rpx; border-bottom: 2rpx solid #E5E5E5;">
<view class="" style=" height:282rpx;width: 180rpx; margin-top: 4rpx;" @click="goOrder(store.id)">
<u-image :src="store.imageUrl" height="180" width="180" border-radius="10rpx"></u-image>
<view class="text-center "
style=" margin-top:40rpx; border-radius: 10rpx;height: 40rpx; width: 180rpx;background-color: #7FF5A5;">
营业中
</view>
<!-- <view class="text-center"
style="border-radius: 10rpx;height: 40rpx; width: 180rpx;background-color: #EAEAEA;margin-top: 4rpx;">
休息中
</view> -->
<!-- <view class="text-center"
style="border-radius: 10rpx;height: 40rpx; width: 180rpx;background-color: #F68561;margin-top: 4rpx;">
已打烊
</view> -->
</view>
<view class="margin-left" style=" width: 70%; height: 282rpx;">
<!-- 店名 -->
<view class="flex align-center justify-between">
<view class="flex justify-between align-center" @click="goOrder(store.id)">
<view class="margin-right-sm text-bold">
{{store.storeName}}
</view>
<view class="flex align-center justify-center text-bold text-sm"
style=" width: 70rpx; height: 40rpx; background-color: #DEDEDE; border-radius: 10rpx;">
到店
</view>
<view class="flex align-center justify-center text-bold text-sm margin-left-xs"
style=" width: 70rpx; height: 38rpx; background-color: #E6BC81; border-radius: 10rpx;">
配送
</view>
</view>
<view class="flex justify-between align-center" style="color: #999999;">
<u-icon name=eye></u-icon>
<view class="text-xs">
已有{{store.browseCount}}人看过
</view>
</view>
</view>
<!-- 评分~~~ -->
<view class="flex align-center justify-between margin-top-xs">
<view class="flex align-center" style="color: #FB5D3F;">
<u-icon name="star-fill"></u-icon>
<view class="text-sm">
8.9分
</view>
</view>
<view class="text-sm ellipsis ">
{{store.address}}
</view>
<view class="flex">
<u-icon name="map"></u-icon>
<view class="text-sm">
直线距离1.2km
</view>
</view>
</view>
<!-- 菜品 -->
<scroll-view class="scroll-container" scroll-x="true" show-scrollbar="false">
<view class="flex align-center justify-start margin-top-sm ">
<view class=" margin-right-xs" v-for="item in store.goodsList" :key="item.index"
style="height: 170rpx; width: 160rpx;" @click="goDetail(item.id,2)">
<view class="" style="position: relative;">
<u-image :src="item.imageUrl" height="96" width="153"
border-radius="10rpx"></u-image>
<view class="text-white text-sm flex align-center justify-center"
style="position: absolute;background-color: #F8963B; width: 40rpx; height: 34rpx; bottom: 0; border-radius: 0 6rpx 0 6rpx;">
新
</view>
</view>
<view class="ellipsis " style="margin: 4rpx 0 4rpx 0;">
{{ item.name}}
</view>
<view class="flex align-center justify-start">
<view class="">
<text class="text-red text-bold">¥{{item.price}}</text>
<!-- <text class="text-bold text-red text-sm">.9</text> -->
</view>
<!-- <view class="text-bold text-grey text-sm" style="text-decoration: line-through">
¥30.9
</view> -->
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
import {
goodList
} from '@/api/shop.js'
import {
address
} from '@/api/map.js'
export default {
data() {
return {
list1: [{
name: '超市百货',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/1.svg'
}, {
name: '果蔬生鲜',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/2.svg'
},
{
name: '美食饮品',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/3.svg'
},
{
name: '休闲娱乐',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/4.svg'
},
{
name: '运动健身',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/5.svg'
},
{
name: '美容美发',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/6.svg'
},
{
name: '酒店公寓',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/7.svg'
},
{
name: '居家服务',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/8.svg'
},
{
name: '美甲美瞳',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/9.svg'
},
{
name: '更多服务',
icon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/classify-icon/10.svg'
},
],
index: 1,
latitude: "", //纬度
longitude: "", //经度
city: "", //所在的城市
navBarHeight: "",
bannerList: [{
image: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/banner/banner1.svg'
}, {
image: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/banner/banner2.svg'
}, {
image: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/banner/banner3.svg'
}],
shopList: [],
};
},
methods: {
//获取所在城市
async getAddress() {
this.loading = true;
try {
const params = {
lng: this.longitude,
lat: this.latitude
};
const response = await address(params);
if (response.code === 200 || response.code === 0) {
this.city = response.data.regeocode.addressComponent.city
console.log("address", this.city)
// 处理数据
} else if (response.code === 401) {
console.error('账号未登录');
}
} catch (error) {
console.error('请求失败:', error);
} finally {
this.loading = false;
}
},
//获取店铺列表
async getShopList() {
this.loading = true;
try {
const params = {
pageNo: 1,
pageSize: 20
};
const response = await goodList(params);
if (response.code === 200 || response.code === 0) {
this.shopList = response.data.list || response.data;
console.log("shopList", this.shopList)
// 处理数据
} else if (response.code === 401) {
console.error('账号未登录');
}
} catch (error) {
console.error('请求失败:', error);
} finally {
this.loading = false;
}
},
goLogin() {
uni.navigateTo({
url: '/pages/dome/dome'
})
},
gohd() {
uni.switchTab({
// `/pages/home/promotion/promotion?current=${1}`
url: `/pages/tabbar/message`
})
},
goGoods() {
uni.navigateTo({
url: '/pages/shop/shop'
})
},
go(index) {
uni.navigateTo({
url: `/pages/home/promotion/promotion?current=${index}`
})
},
goDetail(id, type) {
uni.navigateTo({
url: `/pages/shop/shop?id=${id}&type=${type}`
})
},
goshop(index) {
uni.navigateTo({
url: `/pages/home/supermarket/supermarketlist?type=${index}`
})
},
goOrder(id) {
uni.navigateTo({
url: `/pages/home/supermarket/supermarketDetail?id=${id}`
})
},
async getLocation() {
try {
const res = await uni.getLocation({
type: 'gcj02' // 推荐用于微信地图展示
});
console.log('获取位置成功:', res);
this.latitude = res.latitude;
this.longitude = res.longitude;
this.getAddress();
} catch (error) {
console.error('定位失败:', error);
if (error.errMsg.includes('auth deny')) {
uni.showToast({
title: '请授权位置信息',
icon: 'none'
});
} else if (error.errMsg.includes('location service disable')) {
uni.showToast({
title: '请开启系统定位服务',
icon: 'none'
});
} else {
uni.showToast({
title: '获取位置失败',
icon: 'none'
});
}
}
},
lala() {
uni.navigateTo({
url: '/pages/my/dome/dome'
})
}
},
onLoad() {
this.getLocation();
this.getShopList();
this.$nextTick(() => {
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// menuButtonInfo.bottom + menuButtonInfo.top -
this.navBarHeight = statusBarHeight
})
}
}
</script>
<style lang="scss">
.bg {
background:
linear-gradient(to right, #FEE965 50%, #FCEFA3 100%),
linear-gradient(to bottom, #FEE965 0%, #fff 12%);
background-blend-mode: overlay;
.item {
width: calc(100% / 5 - 20rpx);
padding-bottom: 40rpx;
border-radius: 16rpx;
overflow: hidden;
}
.notice {
height: 80rpx;
border-radius: 400rpx;
background: linear-gradient(to right, #FFF9A8, #FFFCDD 40vh, #FFFCDD 100%);
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 210rpx;
}
}
</style>
这个bg的渐变色会随着店铺的列表增加改变,可以吧这个渐变的位置固定吗
最新发布