<template>
|
<view class="index">
|
<view class="head" :style="{ height: 'calc(' + (navHeight + statusbarHeight + 'px + 248rpx)') }">
|
<view :style="{ width: '100%', height: navHeight + statusbarHeight + 'px' }"></view>
|
<view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' }">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="head-bar-nav" :style="{ height: navHeight + 'px' }" @click="openLoacing">
|
<image src="/static/icon/home_ic_location@2x.png" mode="widthFix"></image>
|
<text>莲花科技创新产业园F座</text>
|
<u-icon name="arrow-right" color="#222222" size="13"></u-icon>
|
</view>
|
</view>
|
<view class="search" @click="jumpSearch">
|
<u-search placeholder="请输入商品名称搜索" disabled height="36" searchIconColor="#999999" borderColor="#eeeeee"
|
bgColor="rgba(255,255,255,0.9)" :showAction="false" />
|
</view>
|
<view class="banner">
|
<u-swiper :list="list" keyName="imgurl" height="150"></u-swiper>
|
</view>
|
<u-scroll-list indicatorActiveColor="#004096">
|
<view class="scroll-list">
|
<view class="scroll-list__line" v-for="(item, index) in labels" :key="index">
|
<view class="cate-item" v-for="(child, index) in item" :key="index">
|
<view class="cate-item-image">
|
<image :src="child.imgUrl" mode="widthFix"></image>
|
</view>
|
<text>{{child.name}}</text>
|
</view>
|
</view>
|
</view>
|
</u-scroll-list>
|
<view class="title">
|
<view class="title-left">适用品牌</view>
|
</view>
|
<u-scroll-list indicatorActiveColor="#004096">
|
<view class="scroll-list" style="padding: 0;">
|
<view class="scroll-list__line" v-for="(item, index) in brand" :key="index">
|
<view class="cate-item1" v-for="(child, index) in item" :key="index">
|
<image :src="child.imgUrl" mode="widthFix"></image>
|
<text>{{child.name}}</text>
|
</view>
|
</view>
|
</view>
|
</u-scroll-list>
|
<view class="title">
|
<view class="title-left">品质专区</view>
|
<view class="title-right">
|
<text>更多</text>
|
<u-icon name="arrow-right" color="#AAAAAA" size="10"></u-icon>
|
</view>
|
</view>
|
<view class="quality">
|
<view class="quality-item" @click="jumpShopZ(specialZone[0])">
|
<image class="quality-item-image" :src="specialZone[0].imgUrl" mode="widthFix"></image>
|
</view>
|
<view style="width: 22rpx; height: 100%;"></view>
|
<view class="quality-item">
|
<view class="quality-item-row" @click="jumpShopZ(specialZone[1])">
|
<image class="quality-item-row-image" :src="specialZone[1].imgUrl" mode="widthFix"></image>
|
</view>
|
<view class="quality-item-row" @click="jumpShopZ(specialZone[2])">
|
<image class="quality-item-row-image" :src="specialZone[2].imgUrl" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<view class="title">
|
<view class="title-left">精选商品</view>
|
</view>
|
<view class="commodity">
|
<view class="commodity-item" v-for="(item, i) in goodsList" :key="i">
|
<view class="commodity-item-image">
|
<image :src="item.imgurl" mode="widthFix"></image>
|
</view>
|
<view class="commodity-item-box">
|
<view class="commodity-item-box-title">
|
{{item.name}}
|
</view>
|
<view class="commodity-item-box-price">
|
<view class="commodity-item-box-price-a">
|
<text>{{item.minPrice[0]}}</text>
|
<text>.{{item.minPrice[1]}}</text>
|
</view>
|
<view class="commodity-item-box-price-b">
|
¥{{item.price}}
|
</view>
|
</view>
|
<view class="commodity-item-shou">
|
<text>已售{{item.saleNum + item.realSaleNum}}</text>
|
<view class="commodity-item-shou-add">+</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="dingwei" v-if="!position">
|
<view class="dingwei-left">
|
<text>未授权定位</text>
|
<text>我们无法获得您当前位置信息为您推荐附近经销商</text>
|
</view>
|
<view class="dingwei-btn" @click="goToAppSetting">开启定位</view>
|
</view>
|
<Login ref="loginRef" />
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
import Login from '@/components/login/login.vue'
|
var QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
|
export default {
|
components: {
|
Login
|
},
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight', 'position'])
|
},
|
data() {
|
return {
|
list: [],
|
labels: [
|
[],
|
[]
|
],
|
brand: [
|
[],
|
[],
|
],
|
specialZone: [],
|
goodsList: [],
|
page: 1,
|
next: true
|
}
|
},
|
async onLoad() {
|
await this.$onLaunched;
|
// this.$nextTick(() => {
|
// this.$refs.loginRef.open()
|
// })
|
this.getBanner()
|
this.getLabels()
|
this.getGoodsList()
|
},
|
onReachBottom() {
|
this.getGoodsList()
|
},
|
methods: {
|
jumpShopZ(item) {
|
uni.navigateTo({
|
url: '/pages/special-zone/special-zone?qualityId=' + item.id
|
})
|
},
|
// 轮播图
|
getBanner() {
|
this.$u.api.findShopBanner()
|
.then(res => {
|
if (res.code === 200) {
|
this.list = res.data
|
}
|
})
|
},
|
// 获取分类
|
getLabels() {
|
this.$u.api.getGoodsLabelsByType({ type: 0 })
|
.then(res => {
|
if (res.code === 200) {
|
this.labels = this.alternateChunkArraySimple(res.data)
|
}
|
})
|
this.$u.api.getGoodsLabelsByType({ type: 14 })
|
.then(res => {
|
if (res.code === 200) {
|
this.brand = this.alternateChunkArraySimple(res.data, 2)
|
}
|
})
|
this.$u.api.getGoodsLabelsByType({ type: 12 })
|
.then(res => {
|
if (res.code === 200) {
|
this.specialZone = res.data
|
}
|
})
|
},
|
// 商品
|
getGoodsList() {
|
if (!this.next) return;
|
this.$u.api.goodsPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
type: 0,
|
sortInfo: 3
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
res.data.records.forEach(item => {
|
item.minPrice = item.minPrice.toFixed(2).split('.')
|
})
|
this.goodsList.push(...res.data.records)
|
this.page++
|
if (this.goodsList.length === res.data.total) {
|
this.next = false
|
}
|
}
|
})
|
},
|
// 分割数据
|
alternateChunkArraySimple(arr, chunkSize = 4) {
|
const result = [
|
[],
|
[]
|
];
|
let currentChunk = 0;
|
let countInCurrentChunk = 0;
|
|
for (let i = 0; i < arr.length; i++) {
|
// 将当前元素添加到对应的子数组
|
result[currentChunk].push(arr[i]);
|
|
// 计数当前子数组已添加的元素数量
|
countInCurrentChunk++;
|
|
// 如果当前子数组已添加了chunkSize个元素，切换到另一个子数组
|
if (countInCurrentChunk >= chunkSize) {
|
currentChunk = currentChunk === 0 ? 1 : 0; // 切换子数组
|
countInCurrentChunk = 0; // 重置计数器
|
}
|
}
|
|
return result;
|
},
|
goToAppSetting() {
|
var that = this;
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting['scope.userLocation']) {
|
that.positioning()
|
}
|
}
|
});
|
},
|
// 定位
|
positioning() {
|
var that = this;
|
uni.getLocation({
|
type: 'gcj02',
|
highAccuracyExpireTime: 3000,
|
isHighAccuracy: true,
|
success: function(addr) {
|
const locParam = {
|
latitude: addr.latitude,
|
longitude: addr.longitude
|
};
|
const qqmapsdk = new QQMapWX({
|
key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
|
});
|
// 腾讯地图逆地理编码
|
qqmapsdk.reverseGeocoder({
|
locParam,
|
success: function(res) {
|
console.log(res, '==================获取地址');
|
},
|
fail: (err) => {
|
console.error('获取位置失败===========', err);
|
}
|
});
|
}
|
});
|
},
|
openLoacing() {
|
uni.chooseLocation({
|
success(res) {
|
console.log(res)
|
}
|
})
|
},
|
jumpSearch() {
|
uni.navigateTo({
|
url: '/pages/search/search'
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F9F9FB;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
|
.dingwei {
|
width: calc(100% - 40rpx);
|
position: fixed;
|
left: 20rpx;
|
bottom: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background: rgba(0, 0, 0, 0.7);
|
border-radius: 8rpx;
|
backdrop-filter: blur(4px);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.dingwei-left {
|
display: flex;
|
flex-direction: column;
|
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
}
|
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
margin-top: 4rpx;
|
}
|
}
|
}
|
|
.dingwei-btn {
|
width: 128rpx;
|
height: 56rpx;
|
font-weight: 500;
|
font-size: 26rpx;
|
color: #FFFFFF;
|
line-height: 56rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 44rpx;
|
}
|
}
|
|
.head {
|
width: 100%;
|
height: 424rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient(180deg, #C8F3FF 0%, #F8F9FB 100%);
|
|
.head-bar {
|
width: 100%;
|
position: fixed;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
// background-color: #ffffff;
|
|
.head-bar-nav {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
|
.search {
|
width: 100%;
|
margin-top: 20rpx;
|
}
|
|
.banner {
|
width: 100%;
|
margin-top: 30rpx;
|
}
|
|
.quality {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
|
.quality-item {
|
flex: 1;
|
height: 372rpx;
|
border-radius: 16rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
overflow: hidden;
|
|
.quality-item-image {
|
width: 100%;
|
}
|
|
.quality-item-row {
|
width: 100%;
|
height: 176rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
border-radius: 16rpx;
|
|
.quality-item-row-image {
|
width: 100%;
|
}
|
}
|
}
|
}
|
|
.title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 48rpx;
|
|
.title-left {
|
font-weight: 600;
|
font-size: 34rpx;
|
color: #111111;
|
}
|
|
.title-right {
|
display: flex;
|
align-items: center;
|
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
margin-right: 8rpx
|
}
|
}
|
}
|
|
.commodity {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
|
.commodity-item {
|
width: 332rpx;
|
background-color: #ffffff;
|
margin-bottom: 20rpx;
|
|
.commodity-item-image {
|
width: 100%;
|
height: 336rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
image {
|
width: 100%;
|
}
|
}
|
|
.commodity-item-box {
|
width: 100%;
|
padding: 20rpx;
|
box-sizing: border-box;
|
|
.commodity-item-box-title {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.commodity-item-box-price {
|
width: 100%;
|
display: flex;
|
align-items: baseline;
|
margin-top: 8rpx;
|
|
.commodity-item-box-price-a {
|
display: flex;
|
align-items: baseline;
|
margin-right: 8rpx;
|
|
text {
|
&:nth-child(1) {
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #E4001D;
|
|
&::before {
|
content: '￥';
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #E4001D;
|
}
|
}
|
}
|
|
.commodity-item-box-price-b {
|
font-weight: 400;
|
font-size: 22rpx;
|
color: #999999;
|
}
|
}
|
|
.commodity-item-shou {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
|
.commodity-item-shou-add {
|
width: 44rpx;
|
height: 44rpx;
|
background: #004096;
|
border-radius: 50%;
|
line-height: 44rpx;
|
text-align: center;
|
font-size: 30rpx;
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
|
.scroll-list {
|
@include flex(column);
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
margin-top: 40rpx;
|
|
.cate-item1 {
|
width: calc(100vw / 2 - 40rpx);
|
height: 104rpx;
|
padding-left: 40rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
margin-right: 22rpx;
|
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
|
image {
|
width: 46rpx;
|
height: 46rpx;
|
margin-right: 20rpx;
|
}
|
|
text {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
|
.cate-item {
|
width: calc(100vw / 4 - 96rpx);
|
height: auto;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 30rpx;
|
margin-right: 96rpx;
|
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
|
.cate-item-image {
|
width: 88rpx;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
background: linear-gradient(180deg, #E6E6E6 0%, #F9F9FB 100%);
|
border-radius: 24rpx;
|
image {
|
width: 100%;
|
}
|
}
|
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
margin-top: 16rpx;
|
}
|
}
|
|
&__line {
|
@include flex;
|
|
&__item {
|
width: 25%;
|
margin-right: 15px;
|
|
&__image {
|
width: 61px;
|
height: 48px;
|
}
|
|
&__text {
|
margin-top: 5px;
|
color: $u-content-color;
|
font-size: 12px;
|
text-align: center;
|
}
|
|
&--no-margin-right {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
