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>
|