第一次提交
This commit is contained in:
dt_2916866708
312
pages/home/index.scss
Normal file
312
pages/home/index.scss
Normal file
@@ -0,0 +1,312 @@
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.strong{
|
||||
font-weight: 600 !important;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.home_container {
|
||||
height: 100%;
|
||||
// overflow-x: hidden;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home_guess_container {
|
||||
flex-shrink: 0;
|
||||
.home_guess_title {
|
||||
}
|
||||
.home_guess_item_container {
|
||||
// justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.home_guess_item {
|
||||
width: calc(100% / 2);
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rpx;
|
||||
.home_guess_item_footer {
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.home_guess_item_name {
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_recommend_container {
|
||||
flex-shrink: 0;
|
||||
.home_recommend_item_container {
|
||||
margin-top: 25rpx;
|
||||
.home_recommend_item {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20rpx;
|
||||
.home_recommend_item_right {
|
||||
width: 115rpx;
|
||||
height: 52rpx;
|
||||
background: #f83d3d;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.home_recommend_item_center {
|
||||
overflow: hidden;
|
||||
.home_recommend_item_item_name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_header {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.home_input_container {
|
||||
flex-shrink: 0;
|
||||
width: 690rpx;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 38rpx;
|
||||
margin-bottom: $uni-spacing-col-lg;
|
||||
}
|
||||
.home_fresh_container {
|
||||
flex-shrink: 0;
|
||||
width: 750rpx;
|
||||
// height: 411rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
opacity: 1;
|
||||
border-bottom: 4rpx solid #f2f2f2;
|
||||
padding: 25rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
.fresh_title_left {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.fresh_title_right {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.home_fresh_item_container {
|
||||
margin-top: 25rpx;
|
||||
overflow-x: auto;
|
||||
.home_fresh_item {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: 10rpx;
|
||||
width: 222rpx;
|
||||
height: 313rpx;
|
||||
.home_fresh_item_img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.home_fresh_item_price {
|
||||
color: #f83d3d;
|
||||
font-size: 28rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.home_fresh_item_name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_menu_container {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 4rpx solid #f2f2f2;
|
||||
// margin-top: $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
/* 分类 */
|
||||
.menu_section {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: #fff;
|
||||
padding-top: $uni-spacing-col-lg;
|
||||
.menu_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-dark;
|
||||
// padding: 0 15rpx ;
|
||||
|
||||
// margin-right: 40rpx;
|
||||
width: calc(100% / 5);
|
||||
overflow: hidden;
|
||||
margin-bottom: $uni-spacing-col-lg;
|
||||
.name {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 14rpx;
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
// box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_swiper_container {
|
||||
width: 690rpx;
|
||||
height: 250rpx;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 33rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
image {
|
||||
width: 690rpx;
|
||||
height: 250rpx;
|
||||
}
|
||||
.swiper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.home_list_container {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border-radius: 70rpx 70rpx 0rpx 0rpx;
|
||||
padding: 44rpx 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
.home_list_header {
|
||||
padding: 0 31rpx;
|
||||
// 输入框
|
||||
.home_list_header_input {
|
||||
background: #f7f7f7;
|
||||
border-radius: 81rpx;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
padding: 10rpx 31rpx;
|
||||
.home_list_header_input_icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
// 选项列表
|
||||
.home_list_option_list {
|
||||
font-size: 24rpx;
|
||||
margin-top: 41rpx;
|
||||
.home_list_option_list_item {
|
||||
width: 142rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
border: 1rpx solid #121836;
|
||||
box-sizing: border-box;
|
||||
color: #121836;
|
||||
}
|
||||
.select_home_list_option_list_item {
|
||||
background-color: #0b1123;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_list {
|
||||
flex: 1;
|
||||
// margin-top: 62rpx;
|
||||
overflow: hidden;
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_title {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
padding-left: 31rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
.home_title_logo {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.model_container {
|
||||
width: 750rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
opacity: 1;
|
||||
border-bottom: 4rpx solid #f2f2f2;
|
||||
padding: 25rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
.model_item_price {
|
||||
color: #f83d3d;
|
||||
font-size: 28rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.model_item_name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.model_item_img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.model_title_left {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.model_title_right {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
257
pages/home/index.vue
Normal file
257
pages/home/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<view :style="{paddingTop:`${titleStyle.top}px`}"
|
||||
style="background: linear-gradient(180deg, #FF4A2B 0%, rgba(255,65,65,0) 25%);" class="page_body">
|
||||
<view class="home_container">
|
||||
<view :style="{height:`${titleStyle.height}px`}" class="home_header flex jc ac">首页</view>
|
||||
<view class="home_input_container">
|
||||
<uni-easyinput @clear='seach' @confirm='seach' prefixIcon="search" trim="all" v-model="productName" placeholder="请输入内容"></uni-easyinput>
|
||||
</view>
|
||||
<!-- 轮播图 -->
|
||||
<view :style="{order:mobile.GUANGGAO.index}" v-if="mobile&&mobile.GUANGGAO&&mobile.GUANGGAO.infoList.length" class="home_swiper_container">
|
||||
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
|
||||
:duration="500">
|
||||
<swiper-item v-for="item in mobile.GUANGGAO.infoList">
|
||||
<image :src="item.position_image"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 菜单列表 -->
|
||||
<view :style="{order:mobile.FENLEI.index}" v-if="mobile&&mobile.FENLEI&&mobile.FENLEI.infoList.length" class="home_menu_container">
|
||||
<view class="menu_section">
|
||||
<view @click="goList('classify',item.id)" v-for="(item,index) in mobile.FENLEI.infoList" class="menu_item">
|
||||
<image :src="item.icon"></image>
|
||||
<view class="name">{{item.categoryName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 新鲜好物 -->
|
||||
<view :style="{order:mobile['1'].index}" v-if="mobile&&mobile['1']&&mobile['1'].infoList.length" class="home_fresh_container">
|
||||
<view @click="goList('model',mobile['1'].type)" class="fresh_title flex jw ac">
|
||||
<view class="fresh_title_left strong">{{mobile['1'].moduleName}}</view>
|
||||
<view class="fresh_title_right flex ac">更多好物 <uni-icons type="right" size="12"></uni-icons> </view>
|
||||
</view>
|
||||
<view class="home_fresh_item_container flex">
|
||||
<view @click="navToDetailPage(item)" v-for="item in mobile['1'].infoList" class="home_fresh_item">
|
||||
<view class="home_fresh_item_img flex ac jc">
|
||||
<image mode="widthFix"
|
||||
:src="item.url">
|
||||
</image>
|
||||
</view>
|
||||
<view class="home_fresh_item_name flex jc">{{item.productName}}</view>
|
||||
<view class="home_fresh_item_price flex jc ac">
|
||||
<span>¥{{Number(item.price).toFixed(2)}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 人气推荐 -->
|
||||
<view :style="{order:mobile['2'].index}" v-if="mobile&&mobile['2']&&mobile['2'].infoList.length" class="home_recommend_container model_container">
|
||||
<view @click="goList('model',mobile['2'].type)" class="model_title flex jw ac">
|
||||
<view class="model_title_left strong">{{mobile['2'].moduleName}}</view>
|
||||
<view class="model_title_right flex ac">更多推荐 <uni-icons type="right" size="12"></uni-icons> </view>
|
||||
</view>
|
||||
<view class="home_recommend_item_container">
|
||||
<view @click="navToDetailPage(item)" v-for="item in mobile['2'].infoList" class="home_recommend_item flex ac">
|
||||
<view class="model_item_img">
|
||||
<image mode="widthFix" :src="item.url">
|
||||
</image>
|
||||
</view>
|
||||
<view style="padding: 0 25rpx;box-sizing: border-box;"
|
||||
class="home_recommend_item_center oneflex">
|
||||
<view class="home_recommend_item_item_name">{{item.productName}}</view>
|
||||
<view class="model_item_price flex ac">
|
||||
<span>¥{{Number(item.price).toFixed(2)}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home_recommend_item_right flex ac jc">
|
||||
兑换
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 猜你喜欢 -->
|
||||
<view :style="{order:mobile['3'].index}" v-if="mobile&&mobile['3']&&mobile['3'].infoList.length" class="home_guess_container model_container">
|
||||
<view class="home_guess_title flex jc strong">{{mobile['3'].moduleName}}</view>
|
||||
<view class="home_guess_item_container flex">
|
||||
<view @click="navToDetailPage(item)" v-for="item in mobile['3'].infoList" class="home_guess_item">
|
||||
<view style="width: 300rpx; height: 300rpx;" class="model_item_img">
|
||||
<image mode="widthFix"
|
||||
:src="item.url">
|
||||
</image>
|
||||
</view>
|
||||
<view class="home_guess_item_footer">
|
||||
<view class="model_item_name flex jc">{{item.productName}} </view>
|
||||
<view class="model_item_price flex jc">
|
||||
<span>¥{{Number(item.price).toFixed(2)}}</span>
|
||||
<!-- <span style="margin-left: 25rpx;text-decoration-line:line-through;color: #999999;font-size: 20rpx">¥89</span> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import home from '@/api/home.js'
|
||||
import homeApi from '@/api/home.js'
|
||||
import station from '@/api/station.js'
|
||||
import stationItem from "@/components/stationItem/stationItem.vue"
|
||||
import tool from '../../utils/tool.js'
|
||||
export default {
|
||||
components: {
|
||||
stationItem,
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productName:"",
|
||||
mobile:null,
|
||||
user: uni.getStorageSync('user'),
|
||||
pageData: {
|
||||
currentPage: 1,
|
||||
stationName: '',
|
||||
sortType: ''
|
||||
},
|
||||
viewData: null,
|
||||
titleStyle: {},
|
||||
selectOptions: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
//下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.seach()
|
||||
},
|
||||
onShow() {
|
||||
this.getPosition()
|
||||
},
|
||||
methods: {
|
||||
async getPosition() {
|
||||
await this.tool.userLocationChenk().then(res => {}).catch(err => {});
|
||||
await this.tool.getLocation().then(res => { }).catch(err => { });
|
||||
},
|
||||
//详情
|
||||
navToDetailPage(item) {
|
||||
console.log(item)
|
||||
//测试数据没有写id，用title代替
|
||||
let id = item.productId;
|
||||
uni.navigateTo({
|
||||
url: `/Product/pages/product?id=${id}`
|
||||
})
|
||||
},
|
||||
goList(type,data){
|
||||
if(type=='classify'){
|
||||
uni.navigateTo({
|
||||
url:`/Product/pages/list?categoryOneId=${data}`
|
||||
})
|
||||
}else if(type=='model'){
|
||||
uni.navigateTo({
|
||||
url:`/Product/pages/list?type=${data}`
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:"/Product/pages/list"
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
getMobile(){
|
||||
homeApi.getMobile({
|
||||
productName:this.productName
|
||||
}).then(res=>{
|
||||
if(res.code==20000){
|
||||
this.mobile = Object.fromEntries(res.data.map((item,index)=> [item.type,Object.assign(item,{index:index+1})]));
|
||||
}
|
||||
}).finally(()=>{
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
},
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.target.value
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.target.value
|
||||
},
|
||||
showInit() {},
|
||||
refresherrefresh() {
|
||||
this.refresherTriggered = true;
|
||||
this.seach()
|
||||
},
|
||||
seach() {
|
||||
this.pageData.currentPage = 1;
|
||||
this.getMobile()
|
||||
},
|
||||
scrolltolower() {
|
||||
this.pageData.currentPage += 1;
|
||||
this.getList()
|
||||
},
|
||||
async init() {
|
||||
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度
|
||||
// await this.getPosition();
|
||||
// this.getList();
|
||||
this.getMobile()
|
||||
},
|
||||
async getPosition() {
|
||||
// if(!this.user){
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
await this.tool.userLocationChenk().then(res => {}).catch(err => {});
|
||||
await this.tool.getLocation().then(res => {
|
||||
this.location = uni.getStorageSync('location')
|
||||
}).catch(err => {
|
||||
this.location = null
|
||||
});
|
||||
},
|
||||
async getList() {
|
||||
if (this.location) {
|
||||
this.pageData.stationLat = this.location.latitude;
|
||||
this.pageData.stationLng = this.location.longitude;
|
||||
}
|
||||
station[this.token ? 'getNearbySites' : 'getTouristSites'](this.pageData).then(res => {
|
||||
if (res.data.length == 0) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '到底了',
|
||||
icon: 'none'
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
if (res.code == 20000) {
|
||||
this.tool.difTags(res);
|
||||
if (this.pageData.currentPage !== 1) {
|
||||
let data = new this.tool.Anticorrosive(res, page);
|
||||
this.viewData.list = this.viewData.list.concat(data.list)
|
||||
} else {
|
||||
this.viewData = new this.tool.Anticorrosive(res, page);
|
||||
// this.viewData.list = [...this.viewData.list]
|
||||
}
|
||||
}
|
||||
this.refresherTriggered = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .is-input-border {
|
||||
border: none !important;
|
||||
border-radius: 25rpx !important;
|
||||
}
|
||||
|
||||
@import 'index.scss';
|
||||
@import '../index/index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user