1454 lines
39 KiB
Vue
1454 lines
39 KiB
Vue
|
<style lang="scss">
|
|||
|
|
.popup {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.hidden {
|
|||
|
|
opacity: 0;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.prize-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.prize-card {
|
|||
|
|
background-image: url('https://yswy-agent.yjdfytmall.com/20221230/e23c5a80-e4ab-4630-a4af-e34f533d88d3.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
padding-top: 110rpx;
|
|||
|
|
width: 492rpx;
|
|||
|
|
height: 660rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.p-c-t-1 {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #f04d3c;
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-c-t-2 {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-family: 'D-DIN Exp', sans-serif;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #f1523f;
|
|||
|
|
line-height: 103rpx;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-c-t-2_1 {
|
|||
|
|
font-family: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #f04d3c;
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
padding: var(--status-bar-height) 0 0rpx;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden; /* 裁切背景，统一各端显示 */
|
|||
|
|
|
|||
|
|
.notice {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
position: absolute;
|
|||
|
|
right: -20rpx;
|
|||
|
|
top: -10rpx;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 0 14rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
z-index: 9;
|
|||
|
|
background-color: #ca0400;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 仅头部区域的背景，跟随 .header 宽度，不超出屏幕 */
|
|||
|
|
.header-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
/* 具体位置和高度改为运行时内联样式控制，避免端差异 */
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 320rpx;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-bg-img {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/deep/.input-placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/.u-modal__content {
|
|||
|
|
.u-button {
|
|||
|
|
width: 500rpx !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shouxia {
|
|||
|
|
margin-top: 100px;
|
|||
|
|
width: 330rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
background: linear-gradient(180deg, #fdf6d9 0%, #eda863 100%);
|
|||
|
|
border-radius: 728rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ee3320;
|
|||
|
|
margin: 280rpx auto 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="popup" :class="{ hidden: !showModal1 }">
|
|||
|
|
<view class="prize-wrap">
|
|||
|
|
<view class="prize-card">
|
|||
|
|
<view class="p-c-t-1">恭喜获取</view>
|
|||
|
|
<view class="p-c-t-2">
|
|||
|
|
{{ greenRecord.awardGreen }}
|
|||
|
|
<view class="p-c-t-2_1">绿色积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="shouxia" @click="handlerGet">
|
|||
|
|
<text v-if="!btnloading">开心收下</text>
|
|||
|
|
<view style="padding: 28rpx 0" v-else>
|
|||
|
|
<u-loading-icon></u-loading-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="header" :style="{ paddingTop: (statusBarHeight || 0) + 'px', minHeight: headerBgHeightPx + 'px' }">
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<view :style="{ height: wxBtnHeight + 'px' }"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="positionShow" v-if="!isOpenPosition" @click="goSet">
|
|||
|
|
<view class="flex flex-align-center item">
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
<text class="txt"
|
|||
|
|
>您未开启位置服务，距离计算不准确，请点击前往开启位置服务</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="header-bg" :style="{ top: '0px', height: headerBgHeightPx + 'px' }">
|
|||
|
|
<image class="header-bg-img" :style="{ bottom: headerBgBottomOffsetPx + 'px' }" src="../../static/home-page/green.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="page-content">
|
|||
|
|
<view class="search-bar">
|
|||
|
|
<view class="search-section">
|
|||
|
|
<u-search
|
|||
|
|
placeholder="搜索您需要的商品"
|
|||
|
|
v-model="keyWord"
|
|||
|
|
:show-action="true"
|
|||
|
|
actionText="搜索"
|
|||
|
|
bg-color="#f5f6fa"
|
|||
|
|
border-color="transparent"
|
|||
|
|
height="40"
|
|||
|
|
@search="onSearch"
|
|||
|
|
@custom="onSearch"
|
|||
|
|
:clearabled="true"
|
|||
|
|
borderColor="#e0e7ff"
|
|||
|
|
searchIcon="search"
|
|||
|
|
:searchIconSize="20"
|
|||
|
|
searchIconColor="#909399"
|
|||
|
|
></u-search>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between font26 color-w">
|
|||
|
|
<text>{{ addressName }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="" style="padding: 0 16rpx;">
|
|||
|
|
<!-- 轮播图 -->
|
|||
|
|
<view class="">
|
|||
|
|
<view class="banner-section">
|
|||
|
|
<u-swiper
|
|||
|
|
:list="swiperList"
|
|||
|
|
:autoplay="true"
|
|||
|
|
:circular="true"
|
|||
|
|
height="160"
|
|||
|
|
radius="16"
|
|||
|
|
keyName="ossUrl"
|
|||
|
|
@change="bannerSwiperChange"
|
|||
|
|
imgMode="scaleToFill"
|
|||
|
|
indicator indicatorMode="dot" circular
|
|||
|
|
>
|
|||
|
|
<!-- <template v-slot="{ item }">
|
|||
|
|
<image :src="item.ossUrl" mode="aspectFill" style="width: 100%; height: 100%;" />
|
|||
|
|
</template> -->
|
|||
|
|
</u-swiper>
|
|||
|
|
<view class="banner-dots">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in swiperList"
|
|||
|
|
:key="index"
|
|||
|
|
class="dot"
|
|||
|
|
:class="{ active: current === index }"
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- VIP消费区 -->
|
|||
|
|
<view class="vip3-section">
|
|||
|
|
<image class="vip3-bg" src="../../static/home-page/vip.png" mode="scaleToFill"
|
|||
|
|
@click="goPage('/pages/home/goodsArea?type=7')">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品展示 - 瀑布流 -->
|
|||
|
|
<view class="product-section">
|
|||
|
|
<uni-card>
|
|||
|
|
<view class="product-header">
|
|||
|
|
<view class="product-title">
|
|||
|
|
<view class="black-line">
|
|||
|
|
产品
|
|||
|
|
</view>
|
|||
|
|
<view class="green-line">
|
|||
|
|
体验区
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="grey-line">
|
|||
|
|
/ EXPERIENCE AREA
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="product-tabs">
|
|||
|
|
<text class="zyhs" :class="[isSingleColumn ? 'zyhs-fenlei' : 'zyhs-liebiao']" @click="toggleLatestLayout"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="product-waterfall">
|
|||
|
|
<!-- 使用 uv-ui 的瀑布流组件优化展示 -->
|
|||
|
|
<scroll-view @scrolltolower="handlerLoad" scroll-y="true" class="scroll_view">
|
|||
|
|
<uv-waterfall ref="waterfall" v-model="goodsList" :add-time="20" :column-count="waterfallColumnCount" :column-gap="10" @changeList="changeList">
|
|||
|
|
<template v-slot:list1>
|
|||
|
|
<view class="goods-item-wrapper" v-for="(goods, index) in renderList1" :key="goods.id || `l-${index}`" @click.stop="jumpTo(goods)">
|
|||
|
|
<view class="goods_item bg-w" :class="{ 'one-col': isSingleColumn }">
|
|||
|
|
<image class="goods_image" :src="filterImg(goods.mainImage)" mode="widthFix" />
|
|||
|
|
<view class="goods_info">
|
|||
|
|
<view class="goods_name">{{ goods.titleName }}</view>
|
|||
|
|
<view class="goods_meta">
|
|||
|
|
<view class="goods_price">
|
|||
|
|
<text class="currency">¥</text>
|
|||
|
|
<view class="price1">{{ goods.wholesalePrice }}<span>.00</span></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="goods_sales">{{ '销量：' + (goods.totalSales || 0) }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="!isSingleColumn" v-slot:list2>
|
|||
|
|
<view class="goods-item-wrapper" v-for="(goods, index) in renderList2" :key="goods.id || `r-${index}`" @click.stop="jumpTo(goods)">
|
|||
|
|
<view class="goods_item bg-w" :class="{ 'one-col': isSingleColumn }">
|
|||
|
|
<image class="goods_image" :src="filterImg(goods.mainImage)" mode="widthFix" />
|
|||
|
|
<view class="goods_info">
|
|||
|
|
<view class="goods_name">{{ goods.titleName }}</view>
|
|||
|
|
<view class="goods_meta">
|
|||
|
|
<view class="goods_price">
|
|||
|
|
<text class="currency">¥</text>
|
|||
|
|
<view class="price1">{{ goods.wholesalePrice }}<span>.00</span></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="goods_sales">{{ '销量：' + (goods.totalSales || 0) }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</uv-waterfall>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 弹框 -->
|
|||
|
|
<modal v-if="showModal">
|
|||
|
|
<image
|
|||
|
|
:src="advertData.ossUrl"
|
|||
|
|
mode="widthFix"
|
|||
|
|
@click="imgJump"
|
|||
|
|
></image>
|
|||
|
|
<text
|
|||
|
|
class="iconfont color-w font60"
|
|||
|
|
style="margin-top: 20rpx"
|
|||
|
|
@click="showModal = false"
|
|||
|
|
></text
|
|||
|
|
>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<!-- 福利红包 -->
|
|||
|
|
<red-envelopes
|
|||
|
|
v-for="(item, i) in redList"
|
|||
|
|
:key="i"
|
|||
|
|
:data="item"
|
|||
|
|
:type="1"
|
|||
|
|
:bottom="i === 0 ? 100 : i * 80 + 100"
|
|||
|
|
></red-envelopes>
|
|||
|
|
|
|||
|
|
<!-- <tabbar></tabbar> -->
|
|||
|
|
</view>
|
|||
|
|
<u-modal
|
|||
|
|
@confirm="handlerRead"
|
|||
|
|
@cancel="handlerDetail"
|
|||
|
|
:show="showPop"
|
|||
|
|
:showCancelButton="true"
|
|||
|
|
cancelText="查看详情"
|
|||
|
|
confirmText="已查阅"
|
|||
|
|
>
|
|||
|
|
<view class="pop-content" v-if="popInfo">
|
|||
|
|
<view class="flex flex-center">{{ popInfo.titleName }}</view>
|
|||
|
|
<view
|
|||
|
|
class="content-text color-b6 font28"
|
|||
|
|
v-html="popInfo.textDescribe"
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<image :src="popInfo.mainImage" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import url from '@/common/http/url.js'
|
|||
|
|
import publics from '@/common/utils/public.js'
|
|||
|
|
import {isNotSameDay} from '@/common/utils/index.js'
|
|||
|
|
import product from './modules/product.vue'
|
|||
|
|
import shop from './modules/shop.vue'
|
|||
|
|
import modal from '@/components/modal.vue'
|
|||
|
|
import redEnvelopes from '@/components/red-envelopes.vue'
|
|||
|
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
|||
|
|
import tabbar from '@/components/tabbar.vue'
|
|||
|
|
import {mapMutations, mapState} from 'vuex'
|
|||
|
|
import GoodsPage from '@/pages/home/goodsArea.vue'
|
|||
|
|
// import GoodsItem from './modules/goodsItem.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
uniLoadMore,
|
|||
|
|
product,
|
|||
|
|
shop,
|
|||
|
|
modal,
|
|||
|
|
redEnvelopes,
|
|||
|
|
tabbar,
|
|||
|
|
GoodsPage,
|
|||
|
|
// GoodsItem
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
loopData0: [
|
|||
|
|
{
|
|||
|
|
method: 'goLicai',
|
|||
|
|
lanhuBg0: '../../static/home/nanyaojidi@2x.png',
|
|||
|
|
lanhutext0: '南药基地',
|
|||
|
|
lanhutext1: '市场成熟 前景广阔'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
method: 'goChili',
|
|||
|
|
lanhuBg0: '../../static/home/linxiajingji@2x.png',
|
|||
|
|
lanhutext0: '林下经济',
|
|||
|
|
lanhutext1: '林下套种 科技创新'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
showHint: false, // 红包雨结束弹窗展示
|
|||
|
|
speed: 2, // 红包下落速度控制
|
|||
|
|
countdownFlag: false,
|
|||
|
|
isActivity: false,
|
|||
|
|
redPackets: [], // 初始化红包雨
|
|||
|
|
getRedPackets: [], // 抢到的红包
|
|||
|
|
pId: 0,
|
|||
|
|
rcTop: 0,
|
|||
|
|
rcLeft: 0,
|
|||
|
|
getPoint: 0,
|
|||
|
|
activityData: {
|
|||
|
|
totalTime: 10 // 活动持续时间 秒
|
|||
|
|
},
|
|||
|
|
btnloading: false,
|
|||
|
|
staticUrl: this.$staticUrl,
|
|||
|
|
statusBarHeight: uni.getStorageSync('system').statusBarHeight,
|
|||
|
|
swiperHeight: 0,
|
|||
|
|
swiperList: [],
|
|||
|
|
classesIndex: 0,
|
|||
|
|
classesList: [],
|
|||
|
|
navList: [
|
|||
|
|
{
|
|||
|
|
text: '食品生鲜',
|
|||
|
|
icon: require('../../static/images/home/ic_nav1.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '数码家电',
|
|||
|
|
icon: require('../../static/images/home/ic_nav2.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '日用百货',
|
|||
|
|
icon: require('../../static/images/home/ic_nav3.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '美妆护肤',
|
|||
|
|
icon: require('../../static/images/home/ic_nav4.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '服装鞋帽',
|
|||
|
|
icon: require('../../static/images/home/ic_nav5.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '时尚箱包',
|
|||
|
|
icon: require('../../static/images/home/ic_nav6.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '运动户外',
|
|||
|
|
icon: require('../../static/images/home/ic_nav7.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '钟表珠宝',
|
|||
|
|
icon: require('../../static/images/home/ic_nav8.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '母婴童装',
|
|||
|
|
icon: require('../../static/images/home/ic_nav9.png')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '更多分类',
|
|||
|
|
icon: require('../../static/images/home/ic_nav10.png')
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
listSwipertop: [require('../../static/home/banner.png')],
|
|||
|
|
listSwiper: [require('../../static/home/banner2.png')],
|
|||
|
|
listSwiper2: [require('../../static/home/hufupin.png')],
|
|||
|
|
searchList: ['商品', '店铺'],
|
|||
|
|
searchIndex: 0,
|
|||
|
|
showSearchList: false,
|
|||
|
|
keyWord: '',
|
|||
|
|
centreSwiperList: [],
|
|||
|
|
current: 0,
|
|||
|
|
tabs: [
|
|||
|
|
{
|
|||
|
|
name: '精品推荐',
|
|||
|
|
img: 'boutique'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '附近店铺',
|
|||
|
|
img: 'nearby'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
tabsTop: 0,
|
|||
|
|
tabsFixed: false,
|
|||
|
|
|
|||
|
|
myAddressData: {
|
|||
|
|
// 默认北京
|
|||
|
|
longitude: 0,
|
|||
|
|
latitude: 0
|
|||
|
|
},
|
|||
|
|
storeEnclosureList: [],
|
|||
|
|
nearbyLoading: 'more',
|
|||
|
|
// 精品推荐
|
|||
|
|
recommendList: [],
|
|||
|
|
recommendPageSize: 1,
|
|||
|
|
recommendLoading: 'more',
|
|||
|
|
|
|||
|
|
addressName: '',
|
|||
|
|
showModal: false,
|
|||
|
|
advertData: {},
|
|||
|
|
redList: [],
|
|||
|
|
noticeTotal: 0,
|
|||
|
|
isOpenPosition: true,
|
|||
|
|
wxBtnHeight: 0,
|
|||
|
|
showModal1: false,
|
|||
|
|
title: '2条空投记录',
|
|||
|
|
content: '0.88绿色积分',
|
|||
|
|
greenRecord: 0,
|
|||
|
|
showPop: false,
|
|||
|
|
popInfo: {
|
|||
|
|
titleName: '',
|
|||
|
|
textDescribe: ''
|
|||
|
|
},
|
|||
|
|
// goodsArea 数据
|
|||
|
|
pageNum: 1,
|
|||
|
|
goodsList: [],
|
|||
|
|
// uv-waterfall 拆分后的列数据
|
|||
|
|
list1: [],
|
|||
|
|
list2: [],
|
|||
|
|
listStyle: 'class',
|
|||
|
|
greenPrice: 0,
|
|||
|
|
goodsType: '6',
|
|||
|
|
|
|||
|
|
currentBanner: 0,
|
|||
|
|
headerBgHeightPx: 0,
|
|||
|
|
headerBgBottomOffsetPx: 0,
|
|||
|
|
isSingleColumn: false,
|
|||
|
|
waterfallColumnCount: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad () {
|
|||
|
|
// // #ifdef MP-WEIXIN
|
|||
|
|
// this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
|
|||
|
|
// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|||
|
|
// // #endif
|
|||
|
|
// this.swiperHeight = uni.getSystemInfoSync().screenHeight
|
|||
|
|
// // 获取新品商品
|
|||
|
|
// this.getNewProductList('add')
|
|||
|
|
// // 获取轮播图、弹框
|
|||
|
|
// this.getAdvertising()
|
|||
|
|
},
|
|||
|
|
onShow () {
|
|||
|
|
// this.queryAirDrop()
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
const res = uni.getSystemInfoSync()
|
|||
|
|
uni.setStorageSync('system', res)
|
|||
|
|
uni.setStorageSync('dpi', 750 / res.screenWidth)
|
|||
|
|
try {
|
|||
|
|
this.setSysTem(res)
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn(e)
|
|||
|
|
}
|
|||
|
|
//获取三级地址数据
|
|||
|
|
if (uni.getStorageSync('userInfo')) this.setIsLogin(true)
|
|||
|
|
publics.getExternalSources()
|
|||
|
|
isNotSameDay()
|
|||
|
|
// this.queryAirDrop()
|
|||
|
|
|
|||
|
|
// console.log('isNotSameDay', isNotSameDay())
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
|
|||
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|||
|
|
// #endif
|
|||
|
|
this.swiperHeight = uni.getSystemInfoSync().screenHeight
|
|||
|
|
// 计算头部背景的像素高度（把 320rpx 转 px，再加状态栏高度）
|
|||
|
|
// 强制使用同步 systemInfo，直接用 px 计算，避免不同端异步时机差异
|
|||
|
|
const baseRpx = 320
|
|||
|
|
const basePx = uni.upx2px(baseRpx)
|
|||
|
|
this.headerBgHeightPx = basePx + (this.statusBarHeight || 0)
|
|||
|
|
// 适配安卓：底部再下移少量像素，使弧度与 H5 对齐
|
|||
|
|
const isAndroid = (res && res.platform === 'android') || (uni.getSystemInfoSync().platform === 'android')
|
|||
|
|
this.headerBgBottomOffsetPx = isAndroid ? 12 : 0
|
|||
|
|
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
this.getAdvertising()
|
|||
|
|
let _this = this
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
//是否开启位置权限
|
|||
|
|
// if (!uni.getStorageSync('refuse')) {
|
|||
|
|
// checkOpenGPSService(result=>{
|
|||
|
|
// _this.isOpenPosition = result
|
|||
|
|
// if (result) {
|
|||
|
|
// //设置地址
|
|||
|
|
// _this.getMyLocation();
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// } else {
|
|||
|
|
// // this.isOpenPosition = true
|
|||
|
|
// }
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
// this.getMyLocation()
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 获取红包信息
|
|||
|
|
this.getRedBagList()
|
|||
|
|
// 获取公告未读数量
|
|||
|
|
this.getNoticeTotal()
|
|||
|
|
this.$http('GET', url.goods.getGoodsClass).then(res => {
|
|||
|
|
// this.catrgoryList = res.data
|
|||
|
|
res.data.map(v => {
|
|||
|
|
if (v.type === 1) {
|
|||
|
|
this.classesList.push(v)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
// setTimeout(()=>{
|
|||
|
|
// _this.getHeightList()
|
|||
|
|
// }, 500)
|
|||
|
|
// })
|
|||
|
|
// uni.stopPullDownRefresh();
|
|||
|
|
})
|
|||
|
|
this.getNoticePop()
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.$getRect('#tabs').then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
this.tabsTop = res.top - 50
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 500)
|
|||
|
|
// 初始化 goodsArea
|
|||
|
|
this.initGoodsArea()
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['isLogin', 'userInfo']),
|
|||
|
|
renderList1 () {
|
|||
|
|
return this.isSingleColumn ? this.list1.concat(this.list2) : this.list1
|
|||
|
|
},
|
|||
|
|
renderList2 () {
|
|||
|
|
return this.isSingleColumn ? [] : this.list2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['setLocation', 'setIsLogin', 'logout']),
|
|||
|
|
// uv-waterfall 分配数据回调
|
|||
|
|
changeList ({ name, value }) {
|
|||
|
|
if (name === 'list1') {
|
|||
|
|
this.list1.push(value)
|
|||
|
|
} else if (name === 'list2') {
|
|||
|
|
this.list2.push(value)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toggleLatestLayout () {
|
|||
|
|
this.isSingleColumn = !this.isSingleColumn
|
|||
|
|
this.waterfallColumnCount = this.isSingleColumn ? 1 : 2
|
|||
|
|
// 触发 uv-waterfall 重新布局
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
if (this.$refs.waterfall && this.$refs.waterfall.reflow) {
|
|||
|
|
this.$refs.waterfall.reflow()
|
|||
|
|
} else if (this.$refs.waterfall && this.$refs.waterfall.clear) {
|
|||
|
|
// 兼容：没有 reflow 时用 clear 重新分配
|
|||
|
|
this.$refs.waterfall.clear()
|
|||
|
|
// 重新设置以触发 changeList
|
|||
|
|
const listCopy = this.goodsList
|
|||
|
|
this.goodsList = []
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.goodsList = listCopy
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async initGoodsArea () {
|
|||
|
|
this.pageNum = 1;
|
|||
|
|
// 重置瀑布流
|
|||
|
|
this.goodsList = [];
|
|||
|
|
this.list1 = [];
|
|||
|
|
this.list2 = [];
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
if (this.$refs.waterfall && this.$refs.waterfall.clear) {
|
|||
|
|
this.$refs.waterfall.clear()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
await this.$http("GET", url.order.getGreenPrice).then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.greenPrice = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
await this.getGoodsList();
|
|||
|
|
},
|
|||
|
|
handlerLoad () {
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getGoodsList()
|
|||
|
|
},
|
|||
|
|
async getGoodsList () {
|
|||
|
|
let params = {
|
|||
|
|
sortComprehensive: 1,
|
|||
|
|
qvYu: this.goodsType,
|
|||
|
|
pageSize: this.pageNum
|
|||
|
|
}
|
|||
|
|
await this.$http("GET", url.goods.getGoodsList, params).then(res => {
|
|||
|
|
let { code, data: { records } } = res;
|
|||
|
|
if (code == 200) {
|
|||
|
|
this.goodsList = [...this.goodsList, ...records]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async getNoticePop () {
|
|||
|
|
let res = await this.$http('GET', url.cms.getNoticePop)
|
|||
|
|
if (res.code == 200 && res.data != null) {
|
|||
|
|
this.showPop = true
|
|||
|
|
this.popInfo = res.data
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
callbackMethod (val) {
|
|||
|
|
if (val == 'goLicai') {
|
|||
|
|
this.goLicai()
|
|||
|
|
} else if (val == 'goChili') {
|
|||
|
|
this.goChili()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
jumpTo (item) {
|
|||
|
|
// 兼容不使用 GoodsItem 时的绿色积分/人民币占比计算
|
|||
|
|
let greenText = 0
|
|||
|
|
let rmbText = 0
|
|||
|
|
if (this.goodsType === '3' && item) {
|
|||
|
|
const paymentRmb = Number(item.paymentRmb || 0)
|
|||
|
|
const wholesalePrice = Number(item.wholesalePrice || 0)
|
|||
|
|
const greenPrice = Number(this.greenPrice || 0) || 1
|
|||
|
|
greenText = (((100 - paymentRmb) / 100 * wholesalePrice) / greenPrice).toFixed(6)
|
|||
|
|
rmbText = ((paymentRmb / 100) * wholesalePrice).toFixed(2)
|
|||
|
|
}
|
|||
|
|
const qvyu = item && item.goodsType != null ? item.goodsType : this.goodsType || 0
|
|||
|
|
this.$navigateTo(`/pages/home/details?id=${item.id}&qvyu=${qvyu}&greenText=${greenText}&rmbText=${rmbText}`)
|
|||
|
|
},
|
|||
|
|
handlerDetail () {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/notice/details?id=' + this.popInfo.id
|
|||
|
|
})
|
|||
|
|
this.handlerRead()
|
|||
|
|
},
|
|||
|
|
async handlerRead () {
|
|||
|
|
let res = await this.$http('GET', url.cms.noticeRead, {
|
|||
|
|
id: this.popInfo.id
|
|||
|
|
})
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.showPop = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
goLicai () {
|
|||
|
|
try {
|
|||
|
|
// uni.showLoading({ mask: true });
|
|||
|
|
this.$http('GET', '/user/userCache').then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.$http('GET', url.user.getUserIdentity)
|
|||
|
|
.then(({ code, data }) => {
|
|||
|
|
if (code == 200) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
const _ = data.find(item => item.identityNameCode == 1)
|
|||
|
|
this.goPage('/pages/licai/index')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => uni.hideLoading())
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.logout()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} catch (e) {
|
|||
|
|
//TODO handle the exception
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goChili () {
|
|||
|
|
try {
|
|||
|
|
// uni.showLoading({ mask: true });
|
|||
|
|
this.$http('GET', '/user/userCache').then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.$http('GET', url.user.getUserIdentity)
|
|||
|
|
.then(({ code, data }) => {
|
|||
|
|
if (code == 200) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
const _ = data.find(item => item.identityNameCode == 1)
|
|||
|
|
if (!!_ && _.identityStatus == 1) {
|
|||
|
|
//是会员
|
|||
|
|
this.goPage('/pages/chili/index')
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'VIP身份才可入驻',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => uni.hideLoading())
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.logout()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} catch (e) {
|
|||
|
|
//TODO handle the exception
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async countdownStart () {
|
|||
|
|
// 开启倒计时
|
|||
|
|
this.countdownFlag = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 倒计时结束，开始红包雨
|
|||
|
|
this.countdownFlag = false
|
|||
|
|
this.start()
|
|||
|
|
}, 4000)
|
|||
|
|
},
|
|||
|
|
// 活动开始
|
|||
|
|
async start () {
|
|||
|
|
this.isActivity = true
|
|||
|
|
let sY = 0
|
|||
|
|
for (let i = 0; i < this.activityData.totalTime * this.speed; i++) {
|
|||
|
|
// 每个水平位置上放置两个红包
|
|||
|
|
const rowNum = 2
|
|||
|
|
for (let i = 0; i < rowNum; i++) {
|
|||
|
|
const section = 750 / rowNum
|
|||
|
|
let base = i * section
|
|||
|
|
this.redPackets.push({
|
|||
|
|
x: base + Math.random() * section,
|
|||
|
|
y: sY + Math.random() * 70, // 垂直距离上70的距离随机分布
|
|||
|
|
small: Math.random() > 0.5, // 随机生成小型红包
|
|||
|
|
id: this.pId++
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 每行红包垂直间距200
|
|||
|
|
sY += 200
|
|||
|
|
}
|
|||
|
|
// 红包雨开始的位置
|
|||
|
|
this.rcTop = 0 - sY
|
|||
|
|
this.rcLeft = sY * 0.268 // sY * tan(15)
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 红包雨结束时的位置
|
|||
|
|
this.rcTop = 0
|
|||
|
|
this.rcLeft = 100
|
|||
|
|
}, 100)
|
|||
|
|
|
|||
|
|
setTimeout(async () => {
|
|||
|
|
// 红包雨结束
|
|||
|
|
this.isActivity = false
|
|||
|
|
this.showHint = true
|
|||
|
|
}, this.activityData.totalTime * 1000)
|
|||
|
|
},
|
|||
|
|
cClick (packet, index) {
|
|||
|
|
this.getRedPackets.push({
|
|||
|
|
...packet
|
|||
|
|
})
|
|||
|
|
this.redPackets.splice(index, 1)
|
|||
|
|
},
|
|||
|
|
async checkPermission () {
|
|||
|
|
let status = permision.isIOS
|
|||
|
|
? await permision.requestIOS('location')
|
|||
|
|
: await permision.requestAndroid(
|
|||
|
|
'android.permission.ACCESS_FINE_LOCATION'
|
|||
|
|
)
|
|||
|
|
console.log('status=====', status)
|
|||
|
|
if (status === null || status === 1) {
|
|||
|
|
status = 1
|
|||
|
|
} else if (status === 2) {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '系统定位已关闭',
|
|||
|
|
confirmText: '确定',
|
|||
|
|
showCancel: false,
|
|||
|
|
success: function (res) {}
|
|||
|
|
})
|
|||
|
|
} else if (status.code) {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: status.message
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '需要定位权限',
|
|||
|
|
confirmText: '设置',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
permision.gotoAppSetting()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return status
|
|||
|
|
},
|
|||
|
|
// queryAirDrop () {
|
|||
|
|
// this.$http('GET', url.asset.queryAirDrop).then(({ code, data }) => {
|
|||
|
|
// if (code == 200) {
|
|||
|
|
// if (data.count > 0) {
|
|||
|
|
// this.greenRecord = data
|
|||
|
|
// this.showModal1 = true
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
handlerGet () {
|
|||
|
|
if (this.btnloading) return
|
|||
|
|
this.btnloading = true
|
|||
|
|
// try {
|
|||
|
|
this.$http('GET', url.asset.getAirDrop)
|
|||
|
|
.then(({ code, data }) => {
|
|||
|
|
console.log(code)
|
|||
|
|
if (code == 200) {
|
|||
|
|
this.showModal1 = false
|
|||
|
|
this.$msg('领取成功')
|
|||
|
|
uni.setStorageSync('isGet', true)
|
|||
|
|
} else {
|
|||
|
|
this.showModal1 = false
|
|||
|
|
this.$msg('请重新领取')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(e => {
|
|||
|
|
this.showModal1 = false
|
|||
|
|
this.$msg('请重新领取')
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
//等showModal1弹窗动画彻底关闭再将btnloading改为false，以免关闭的残影中再次点击按钮
|
|||
|
|
let a = setTimeout(() => {
|
|||
|
|
clearTimeout(a)
|
|||
|
|
this.btnloading = false
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
// } catch (e) {
|
|||
|
|
// this.btnloading = false
|
|||
|
|
// this.showModal1 = false;
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
goPage (path) {
|
|||
|
|
if (!this.isLogin) return this.$msg('未登录')
|
|||
|
|
if (!path) return this.$msg('暂未开放')
|
|||
|
|
this.$navigateTo(path)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goSet () {
|
|||
|
|
let system = uni.getSystemInfoSync() // 获取系统信息
|
|||
|
|
if (system.platform === 'android') {
|
|||
|
|
// 判断平台
|
|||
|
|
var Intent = plus.android.importClass('android.content.Intent')
|
|||
|
|
var Settings = plus.android.importClass('android.provider.Settings')
|
|||
|
|
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS)
|
|||
|
|
main.startActivity(intent)
|
|||
|
|
} else if (system.platform === 'ios') {
|
|||
|
|
var UIApplication = plus.ios.importClass('UIApplication')
|
|||
|
|
var application2 = UIApplication.sharedApplication()
|
|||
|
|
var NSURL2 = plus.ios.importClass('NSURL')
|
|||
|
|
var setting2 = NSURL2.URLWithString('app-settings:') // 打开应用权限
|
|||
|
|
application2.openURL(setting2)
|
|||
|
|
plus.ios.deleteObject(setting2)
|
|||
|
|
plus.ios.deleteObject(NSURL2)
|
|||
|
|
plus.ios.deleteObject(application2)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 红包福利
|
|||
|
|
getRedBagList () {
|
|||
|
|
this.$http('GET', url.cms.redEnvelopesList).then(res => {
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
let data = res.data
|
|||
|
|
data.map(v => {
|
|||
|
|
v.show = true
|
|||
|
|
})
|
|||
|
|
this.redList = data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
getAdvertising () {
|
|||
|
|
// 首页轮播图
|
|||
|
|
this.$http('GET', url.cms.advertisingMap, {
|
|||
|
|
position: 1
|
|||
|
|
}).then(res => {
|
|||
|
|
this.swiperList = res.data
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 首页弹框广告
|
|||
|
|
this.$http('GET', url.cms.advertisingMap, {
|
|||
|
|
position: 3
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.data.length > 0) {
|
|||
|
|
this.advertData = res.data[0]
|
|||
|
|
if (this.advertData.popupMode === 2) {
|
|||
|
|
if (!publics.advertShowToStorage(this.advertData.id)) {
|
|||
|
|
this.showModal = true
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.showModal = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取平台公告未读数量
|
|||
|
|
getNoticeTotal () {
|
|||
|
|
this.$http('GET', url.cms.noticeCount, {
|
|||
|
|
type: 1,
|
|||
|
|
read: 2
|
|||
|
|
}).then(res => {
|
|||
|
|
this.noticeTotal = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
filterImg (img) {
|
|||
|
|
return publics.filterImgUrl(img, 3)
|
|||
|
|
},
|
|||
|
|
async getBoutiqueList (type) {
|
|||
|
|
if (type === 'add') {
|
|||
|
|
if (this.recommendLoading === 'nomore') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.recommendLoading = 'loading'
|
|||
|
|
} else {
|
|||
|
|
this.recommendLoading = 'more'
|
|||
|
|
this.recommendList = []
|
|||
|
|
this.recommendPageSize = 1
|
|||
|
|
}
|
|||
|
|
let params = {
|
|||
|
|
pageSize: this.recommendPageSize,
|
|||
|
|
sortComprehensive: 1,
|
|||
|
|
goodsType: 2
|
|||
|
|
}
|
|||
|
|
let res = await this.$http('GET', url.goods.getGoodsList, params)
|
|||
|
|
let list = res.data
|
|||
|
|
let goodsList = list.records
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
this.recommendList = []
|
|||
|
|
this.recommendPageSize = 1
|
|||
|
|
}
|
|||
|
|
this.recommendList = this.recommendList.concat(goodsList)
|
|||
|
|
if (this.recommendList.length < list.total) {
|
|||
|
|
this.recommendPageSize++
|
|||
|
|
this.recommendLoading = 'more'
|
|||
|
|
} else {
|
|||
|
|
this.recommendLoading = 'nomore'
|
|||
|
|
}
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
gojifen () {
|
|||
|
|
return uni.showToast({
|
|||
|
|
title: '升级中......',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
// this.goPage('/pages/home/goodsArea?type=3')
|
|||
|
|
},
|
|||
|
|
// 获取附近的店铺
|
|||
|
|
async getStoreEnclosureList () {
|
|||
|
|
let params = {
|
|||
|
|
pageNum: this.storeEnclosureList.length,
|
|||
|
|
lng: this.myAddressData.longitude, //经度
|
|||
|
|
lat: this.myAddressData.latitude //纬度
|
|||
|
|
}
|
|||
|
|
let res = await this.$http('GET', url.store.getNearbyStores, params)
|
|||
|
|
this.storeEnclosureList = this.storeEnclosureList.concat(res.data)
|
|||
|
|
this.nearbyLoading = res.data.length < 12 ? 'nomore' : 'more'
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
},
|
|||
|
|
selectSearchType (i) {
|
|||
|
|
this.searchIndex = i
|
|||
|
|
this.showSearchList = false
|
|||
|
|
},
|
|||
|
|
onSearch () {
|
|||
|
|
this.showSearchList = false
|
|||
|
|
let keyWord = this.keyWord
|
|||
|
|
if (this.searchIndex === 0) {
|
|||
|
|
// 搜索商品
|
|||
|
|
this.jumpToProduct('商品列表', -1, keyWord)
|
|||
|
|
} else {
|
|||
|
|
// 搜索店铺
|
|||
|
|
this.jumpToStore(keyWord)
|
|||
|
|
}
|
|||
|
|
this.keyWord = ''
|
|||
|
|
},
|
|||
|
|
getMyLocation () {
|
|||
|
|
let _this = this
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'wgs84',
|
|||
|
|
geocode: true,
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log('获取当前位置成功。。。。', res)
|
|||
|
|
_this.setLocation(res)
|
|||
|
|
//设置地址
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res))
|
|||
|
|
_this.myAddressData = res
|
|||
|
|
//设置当前位置名称
|
|||
|
|
if (res.address) {
|
|||
|
|
_this.addressName =
|
|||
|
|
res.address.district + (res.address.poiName || res.address.street)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: function (err) {
|
|||
|
|
// 定位权限没开启
|
|||
|
|
console.log('getLocation.error.', err)
|
|||
|
|
// _this.openMap()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
currentLoadData () {
|
|||
|
|
if (this.current === 0) {
|
|||
|
|
this.getBoutiqueList('add')
|
|||
|
|
} else {
|
|||
|
|
this.getStoreEnclosureList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeTab (index) {
|
|||
|
|
this.current = index
|
|||
|
|
},
|
|||
|
|
swiperChange (e) {
|
|||
|
|
this.changeTab(e.detail.current)
|
|||
|
|
this.currentLoadData()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
bannerSwiperChange(e) {
|
|||
|
|
this.currentBanner = e.current; // u-swiper直接传current
|
|||
|
|
},
|
|||
|
|
openMap () {
|
|||
|
|
let _this = this
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
latitude: _this.myAddressData.latitude || 39.904989,
|
|||
|
|
longitude: _this.myAddressData.longitude || 116.405285,
|
|||
|
|
success: function (res) {
|
|||
|
|
//设置地址
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res))
|
|||
|
|
_this.myAddressData = res
|
|||
|
|
//重新加载附近店铺
|
|||
|
|
// _this.getStoreEnclosureList();
|
|||
|
|
if (res.address.indexOf('省') > -1) {
|
|||
|
|
//解析地址，去除省份和市
|
|||
|
|
let reg = /.+?(省|市|自治区|自治州|县|区)/g
|
|||
|
|
let addressMatch = res.address.match(reg)
|
|||
|
|
//设置当前位置名称
|
|||
|
|
let replaseName = ''
|
|||
|
|
for (let i = 0; i < addressMatch.length; i++) {
|
|||
|
|
replaseName += addressMatch[i]
|
|||
|
|
}
|
|||
|
|
_this.addressName = res.address.replace(replaseName, '')
|
|||
|
|
} else {
|
|||
|
|
_this.addressName = res.address
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail () {
|
|||
|
|
// _this.$msg("获取位置失败,请检查定位服务是否开启，或持设备到相对开阔的露天场所再次尝试", 8000);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
jumpToNotice (key, title) {
|
|||
|
|
this.$navigateTo(`/pages/notice/index?type=${key}&title=${title}`)
|
|||
|
|
},
|
|||
|
|
jumpToProduct (title, goodsType, goodsName) {
|
|||
|
|
this.$navigateTo(
|
|||
|
|
`/pages/home/productList?title=${title}&goodsType=${goodsType}&goodsName=${goodsName}`
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
jumpToNew (type, title) {
|
|||
|
|
this.$navigateTo(
|
|||
|
|
`/pages/home/newPeopleOrSpecial?type=${type}&title=${title}`
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
jumpToStore (keyWord) {
|
|||
|
|
let path = '/pages/home/storeList'
|
|||
|
|
if (keyWord) {
|
|||
|
|
path = path + '?storeName=' + keyWord
|
|||
|
|
}
|
|||
|
|
this.$navigateTo(path)
|
|||
|
|
},
|
|||
|
|
showToast () {
|
|||
|
|
this.$msg('暂未开放，敬请期待～')
|
|||
|
|
},
|
|||
|
|
imgJump () {
|
|||
|
|
this.showModal = false
|
|||
|
|
this.$http('POST', url.cms.clickAdvertisingMap, {
|
|||
|
|
id: this.advertData.id
|
|||
|
|
})
|
|||
|
|
this.advertJump(
|
|||
|
|
this.advertData.operationCode,
|
|||
|
|
this.advertData.operationValue
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
advertJump (code, value) {
|
|||
|
|
publics.advertOption(code, value)
|
|||
|
|
},
|
|||
|
|
backPress () {
|
|||
|
|
//隐藏到后台，不退出app
|
|||
|
|
let main = plus.android.runtimeMainActivity()
|
|||
|
|
main.moveTaskToBack(false)
|
|||
|
|
return true
|
|||
|
|
},
|
|||
|
|
pageScroll (e) {
|
|||
|
|
// 滑动到tabs是固定在顶部
|
|||
|
|
if (e.scrollTop > this.tabsTop) {
|
|||
|
|
this.tabsFixed = true
|
|||
|
|
} else {
|
|||
|
|
this.tabsFixed = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//加载更多
|
|||
|
|
reachBottom () {
|
|||
|
|
this.currentLoadData()
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
pullDownRefresh () {
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
this.getAdvertising()
|
|||
|
|
if (this.current === 0) {
|
|||
|
|
this.getBoutiqueList('refresh')
|
|||
|
|
} else {
|
|||
|
|
// 附近的店铺
|
|||
|
|
this.storeEnclosureList = []
|
|||
|
|
this.getStoreEnclosureList()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.pop-content {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 600rpx;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
|
|||
|
|
.content-text {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 550rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// padding: 0 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag {
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 0 6rpx;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.positionShow {
|
|||
|
|
height: 100rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
// position: fixed;
|
|||
|
|
// top: 80rpx;
|
|||
|
|
// left: 0;
|
|||
|
|
// right: 0;
|
|||
|
|
margin-left: -30rpx;
|
|||
|
|
background-color: #fceeed;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txt {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
color: #f55556;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// goodsArea 样式
|
|||
|
|
.scroll_view {
|
|||
|
|
|
|||
|
|
padding-top: 10rpx;
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 瀑布流容器样式优化
|
|||
|
|
.product-waterfall {
|
|||
|
|
padding-bottom: 24rpx;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
.uv-waterfall {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.goods-item-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
// 让卡片与图片自适应列宽，避免超出屏幕
|
|||
|
|
.goods_item {
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
&.one-col {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
// padding: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.goods_image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.one-col .goods_image {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: auto;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-right: 16rpx; /* 替代gap，在图片右侧添加间距 */
|
|||
|
|
}
|
|||
|
|
.goods_info {
|
|||
|
|
padding: 16rpx 18rpx 18rpx;
|
|||
|
|
}
|
|||
|
|
.one-col .goods_info {
|
|||
|
|
padding: 8rpx 8rpx 8rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
.goods_name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
.goods_price {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
.goods_meta {
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.goods_price .currency {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #e40000;
|
|||
|
|
position: relative;
|
|||
|
|
bottom: 2rpx;
|
|||
|
|
margin-right: 8rpx; /* 替代gap */
|
|||
|
|
}
|
|||
|
|
.goods_price .price1 {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #e40000;
|
|||
|
|
}
|
|||
|
|
.goods_price .price1 span {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
margin-left: 2rpx;
|
|||
|
|
position: relative;
|
|||
|
|
bottom: 2rpx;
|
|||
|
|
}
|
|||
|
|
.goods_sales {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #8a8a8a;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
padding: 18rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1; /* 确保搜索栏在头部背景之上 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-section {
|
|||
|
|
padding: 24rpx 9rpx 0 9rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vip3-section {
|
|||
|
|
padding: 15rpx 0 30rpx 0;
|
|||
|
|
height: 260rpx;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.vip3-bg {
|
|||
|
|
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
|
|||
|
|
width: 100%; height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
object-position: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.product-section {
|
|||
|
|
padding-top: 16rpx;
|
|||
|
|
padding: 15rpx 9rpx 24rpx 9rpx;
|
|||
|
|
min-height: 600rpx;
|
|||
|
|
|
|||
|
|
::v-deep .uni-card {
|
|||
|
|
background-color: rgba(255,255,255,0.7);
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
border: none;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-style: italic;
|
|||
|
|
|
|||
|
|
.black-line {
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.green-line {
|
|||
|
|
color: #22bd5e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-content {
|
|||
|
|
position: static;
|
|||
|
|
z-index: auto;
|
|||
|
|
background-color: #f5f6fa;
|
|||
|
|
}
|
|||
|
|
</style>
|