2145 lines
50 KiB
Vue
2145 lines
50 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;
|
||
}
|
||
|
||
.baoyou {
|
||
background: linear-gradient(164deg, #FF784C 0%, #FF4C56 100%);
|
||
border-radius: 1px;
|
||
color: #fff;
|
||
font-size: 18rpx;
|
||
margin: 10rpx;
|
||
padding: 4rpx 6rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hidden {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.s-wrap {
|
||
padding-top: 468rpx;
|
||
}
|
||
|
||
.yuantouhaowu {
|
||
background-image: url("../../static/home/zhongyizhenpinditu.png");
|
||
background-size: 100% 100%;
|
||
height: 129px;
|
||
}
|
||
|
||
.yuantouhaowu1 {
|
||
background-image: url("../../static/home/zhongyiyouxuanditu.png");
|
||
background-size: 100% 100%;
|
||
height: 129px;
|
||
}
|
||
|
||
.uni_text {}
|
||
|
||
.uni_text_big {
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.uni_text_sm {
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.u-icon {
|
||
margin: 20rpx 0 0 8rpx;
|
||
}
|
||
|
||
.classfiyBox {
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.s-bt {
|
||
width: 530rpx;
|
||
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: 484rpx auto 0;
|
||
}
|
||
|
||
.rain-wrap {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.r-content {
|
||
position: relative;
|
||
top: -400px;
|
||
// left: 200rpx;
|
||
transform: rotate(15deg);
|
||
// transition: all 8s linear;
|
||
}
|
||
|
||
.r-packet {
|
||
position: absolute;
|
||
width: 112rpx;
|
||
height: 224rpx;
|
||
}
|
||
|
||
.sPacket {
|
||
width: 72rpx;
|
||
height: 144rpx;
|
||
}
|
||
|
||
.waterfall-item {
|
||
background: #fff;
|
||
margin-bottom: 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.countdown-wrap {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.c-t-num {
|
||
position: absolute;
|
||
font-size: 288rpx;
|
||
font-family: "D-DIN Exp", sans-serif;
|
||
font-weight: bold;
|
||
line-height: 338rpx;
|
||
background: linear-gradient(180deg, #faf6e8 0%, #eda863 100%);
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
transform: scale(0);
|
||
animation: ani 1s;
|
||
|
||
&:nth-child(2) {
|
||
animation-delay: 1s;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
animation-delay: 3s;
|
||
}
|
||
}
|
||
|
||
@keyframes ani {
|
||
0% {
|
||
transform: scale(0);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.p-c-t-3 {
|
||
font-size: 28rpx;
|
||
color: #fbecca;
|
||
line-height: 33rpx;
|
||
margin-top: 192rpx;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.p-bt {
|
||
background-image: url("https://yswy-agent.yjdfytmall.com/20221230/37d7a076-15e6-4f2b-bc79-552f3a11b2fc.png");
|
||
background-size: 100% 100%;
|
||
width: 342rpx;
|
||
height: 88rpx;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
font-size: 36rpx;
|
||
color: #ee331f;
|
||
text-shadow: 0 1rpx 0 #ffeeab;
|
||
}
|
||
}
|
||
|
||
.alert-close {
|
||
width: 64rpx;
|
||
margin-top: 32rpx;
|
||
width: 64rpx;
|
||
}
|
||
}
|
||
|
||
.page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-size: 100% 100%;
|
||
background-image: url("https://i.328888.xyz/2023/01/06/k485X.png");
|
||
}
|
||
|
||
.ic_map {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.header {
|
||
padding: var(--status-bar-height) 16rpx 0rpx;
|
||
background-size: 100% 100%;
|
||
|
||
.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_search {
|
||
padding: 0 8rpx;
|
||
padding-top: 15rpx;
|
||
position: relative;
|
||
|
||
.left {
|
||
border-right: 2rpx solid #eeeeee;
|
||
color: #333;
|
||
padding-right: 10rpx;
|
||
margin-right: 10rpx;
|
||
|
||
.down {
|
||
font-size: 24rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.searchList {
|
||
|
||
margin-top: 10rpx;
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
left: 80rpx;
|
||
top: 40rpx;
|
||
|
||
.icon {
|
||
transform: scaleY(-1);
|
||
color: white;
|
||
margin-bottom: -10rpx;
|
||
}
|
||
|
||
.cell {
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 0 30rpx;
|
||
box-shadow: 0rpx 0rpx 4rpx #ffffff;
|
||
|
||
&-item {
|
||
font-size: 30rpx;
|
||
width: 100rpx;
|
||
height: 80rpx;
|
||
display: block;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
border-bottom: 2rpx solid #fbf9fc;
|
||
}
|
||
|
||
&-item:last-child {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.search_wrapper {
|
||
// width: 539rpx;
|
||
width: 100%;
|
||
padding-left: 43rpx;
|
||
border-radius: 40rpx;
|
||
padding: 10upx;
|
||
border: 1px solid #E7B786;
|
||
|
||
input {
|
||
font-size: 24rpx;
|
||
color: #c0c0c0;
|
||
}
|
||
|
||
.btn_search {
|
||
width: 48px;
|
||
height: 28px;
|
||
background: linear-gradient(167deg, #FDD6A2 0%, #DCA76F 100%);
|
||
border-radius: 14px;
|
||
color: #000;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.search_input {
|
||
color: #333;
|
||
font-size: 28upx;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
width: 719rpx;
|
||
height: 290rpx;
|
||
margin-top: 32rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
&-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&-box {
|
||
width: 719rpx;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
&-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.classes {
|
||
padding: 0 14rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.classes_item {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
margin-right: 28rpx;
|
||
width: 80%;
|
||
|
||
.item {
|
||
display: inline-block;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-right: 20rpx;
|
||
padding: 5upx 40upx;
|
||
height: 60rpx;
|
||
background: #e1e2e5;
|
||
border-radius: 40upx;
|
||
|
||
&.active {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ic_class {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
padding: 20rpx 0rpx;
|
||
box-shadow: 0px 1rpx 5rpx 1rpx rgba(156, 156, 156, 0.2);
|
||
border-radius: 15rpx;
|
||
margin-top: 22rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.nav_item {
|
||
width: 122rpx;
|
||
flex-direction: column;
|
||
font-size: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
image {
|
||
width: 96rpx;
|
||
height: 100rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.prefecture {
|
||
margin-top: 15rpx;
|
||
|
||
.box_shadow {
|
||
position: relative;
|
||
box-shadow: 0px 1rpx 2rpx 1rpx rgba(160, 160, 160, 0.19);
|
||
}
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
font-weight: 600;
|
||
position: absolute;
|
||
left: 27rpx;
|
||
top: 21rpx;
|
||
}
|
||
|
||
.text1 {
|
||
top: 14rpx;
|
||
}
|
||
|
||
.hot {
|
||
position: absolute;
|
||
background: linear-gradient(90deg, #f44646 0%, #ff855d 100%);
|
||
left: 140rpx;
|
||
color: #fff;
|
||
top: 21rpx;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.activate_bg {
|
||
flex: 1;
|
||
width: 100%;
|
||
// height: 424rpx;
|
||
border-radius: 15rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.right {}
|
||
|
||
.shop_bg {
|
||
width: 384rpx;
|
||
height: 230rpx;
|
||
background: #fff;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.ic_sj {
|
||
margin-top: 20upx;
|
||
width: 319rpx;
|
||
height: 145rpx;
|
||
position: absolute;
|
||
top: 48rpx;
|
||
left: 28rpx;
|
||
}
|
||
}
|
||
|
||
.score_bg {
|
||
width: 384rpx;
|
||
height: 230rpx;
|
||
background: #fff;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.ic_sj {
|
||
margin-top: 20upx;
|
||
width: 319rpx;
|
||
height: 145rpx;
|
||
position: absolute;
|
||
top: 48rpx;
|
||
left: 28rpx;
|
||
}
|
||
|
||
.hot {
|
||
background: linear-gradient(90deg, #f44646 0%, #ff855d 100%);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
.arrow {
|
||
width: 13rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
left: 160rpx;
|
||
top: 31rpx;
|
||
}
|
||
|
||
.fruits_area {
|
||
flex: 1;
|
||
height: 260rpx;
|
||
background: url("../../static/images/home/fruits_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.company_enter {
|
||
flex: 1;
|
||
height: 260rpx;
|
||
background: url("../../static/images/home/static_images_home_company_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.ic_company {
|
||
width: 150rpx;
|
||
height: 140rpx;
|
||
position: absolute;
|
||
left: 168rpx;
|
||
top: 52rpx;
|
||
}
|
||
}
|
||
|
||
.good_brand {
|
||
flex: 1;
|
||
height: 260rpx;
|
||
background: url("../../static/images/home/brand_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.ic_company {
|
||
width: 135rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
left: 165rpx;
|
||
top: 71rpx;
|
||
}
|
||
|
||
.arrow {
|
||
left: 180rpx;
|
||
}
|
||
}
|
||
|
||
.hot {
|
||
color: #a4a4a4;
|
||
background-color: transparent;
|
||
left: 16rpx;
|
||
top: 63rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.good-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
view {
|
||
margin: 10upx;
|
||
font-size: 32upx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
image {
|
||
margin: 10upx;
|
||
width: 31upx;
|
||
height: 38upx;
|
||
}
|
||
}
|
||
|
||
.goods_list {
|
||
padding: 0 18rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/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="page" v-show="!showModal1">
|
||
<view v-show="isActivity" class="rain-wrap">
|
||
<view class="r-content" :style="{
|
||
top: `${rcTop}rpx`,
|
||
left: `${rcLeft}rpx`,
|
||
transition: `all ${activityData.totalTime}s linear`
|
||
}">
|
||
<img v-for="(packet, index) in redPackets" :key="packet.id" src="../../static/packet.png" class="r-packet"
|
||
:class="{ sPacket: packet.small }" :style="{ left: `${packet.x}` + 'rpx', top: `${packet.y}` + 'rpx' }"
|
||
@tap="cClick(packet, index)" />
|
||
</view>
|
||
</view>
|
||
<view v-show="!isActivity" class="s-wrap">
|
||
<view class="s-bt" @click="countdownStart">开始领取绿色积分！</view>
|
||
</view>
|
||
<view v-if="countdownFlag" class="countdown-wrap">
|
||
<view class="c-t-num">3</view>
|
||
<view class="c-t-num">2</view>
|
||
<view class="c-t-num">1</view>
|
||
<view class="c-t-num">GO</view>
|
||
</view>
|
||
|
||
|
||
</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>
|
||
<!-- 下边的差号容易误碰导致领取不成功-->
|
||
<!-- <image class="alert-close" src="../../static/alert_close.png" mode="widthFix" @click="showModal1 = false">-->
|
||
<!-- </image>-->
|
||
</view>
|
||
</view>
|
||
<!-- <u-modal @close="showModal1 = false" :closeOnClickOverlay="true" :showConfirmButton="false" :show="showModal1"
|
||
:title="greenRecord.count + '条空投记录'" :content="content">
|
||
<view class="flex flex-center flex-column">
|
||
{{ greenRecord.awardGreen }}
|
||
<u-gap height="40rpx"></u-gap>
|
||
<u-button @click="handlerGet" :loading="btnloading" type="primary" text="确认领取"></u-button>
|
||
</view>
|
||
</u-modal> -->
|
||
<view class="header">
|
||
<!-- #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_search flex flex-between flex-align-center">
|
||
<!-- <image
|
||
@tap="openMap"
|
||
class="ic_map"
|
||
src="../../static/images/home/ic_map.png"
|
||
></image> -->
|
||
<view class="search_wrapper flex bg-w flex-align-center">
|
||
|
||
<!-- <view
|
||
class="flex flex-align-center left"
|
||
@click="showSearchList = !showSearchList"
|
||
>
|
||
<text class="font30">{{ searchList[searchIndex] }}</text>
|
||
<text class="iconfont down"></text>
|
||
</view> -->
|
||
<view class="searchList" v-if="showSearchList">
|
||
|
||
<!-- <text class="iconfont icon"></text>
|
||
<view class="cell">
|
||
<text
|
||
class="cell-item"
|
||
:class="{ 'color-purple': i === searchIndex }"
|
||
v-for="(item, i) in searchList"
|
||
:key="i"
|
||
@click="selectSearchType(i)"
|
||
>
|
||
{{ item }}
|
||
</text> -->
|
||
<!-- </view> -->
|
||
</view>
|
||
<image src="../../static/home/sousuo.png" class="w10 h10 mr6 ml6 "></image>
|
||
<input confirm-type="search" @confirm="onSearch" v-model="keyWord" class="flex-1 search_input"
|
||
type="text" placeholder="请输入您想要搜索的名称" />
|
||
<view class="btn_search flex color-w flex-center font28" @click="onSearch">搜索</view>
|
||
</view>
|
||
<!-- <view class="notice" @tap="jumpToNotice(1, '系统公告')">
|
||
<image
|
||
class="ic_map"
|
||
src="../../static/images/home/ic_notice.png"
|
||
></image>
|
||
<text class="tips" v-if="noticeTotal">{{
|
||
noticeTotal > 99 ? "99+" : noticeTotal
|
||
}}</text>
|
||
</view> -->
|
||
</view>
|
||
<view class="flex flex-between font26 color-w">
|
||
<text>{{ addressName }}</text>
|
||
</view>
|
||
<!-- 轮播图 -->
|
||
<view class="">
|
||
<!-- <uv-swiper
|
||
imgMode="widthFix"
|
||
:list="swiperList"
|
||
:autoplay="false"
|
||
height="160"
|
||
class="mt4 mb4"
|
||
style="border-radius: 0;"
|
||
>
|
||
|
||
</uv-swiper> -->
|
||
<!-- {{swiperList}} -->
|
||
<swiper :autoplay="true" indicator-dots class="mt6">
|
||
<swiper-item v-for="(item, i) in swiperList" :key="i">
|
||
<view class="swiper-box" @click="advertJump(item.operationCode, item.operationValue)">
|
||
<image :src="item.ossUrl" mode="" class="swiper-item" style="border-radius: 20rpx">
|
||
</image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="list_3">
|
||
<view class="text-group_2" @click="callbackMethod(item.method)" v-for="(item, index) in loopData0"
|
||
:key="index">
|
||
<text class="text_3" v-html="item.lanhutext0"></text>
|
||
<text class="text_4" v-html="item.lanhutext1"></text>
|
||
<image :src="item.lanhuBg0" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<!--UPDATE：TODO 新的升级板块《中亿万商》放在原海南鲜品位置 <view style="padding: 8px 8px 0 8px;" @click="goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')"> -->
|
||
<view style="" @click="goPage('/pages/home/zhongYiWanShang')">
|
||
<!-- <image style="height:86px;width:100%" src="../../static/home/hainanxianpin.png"></image> -->
|
||
<image style="height:176px;width:100%" src="../../static/home/zhongyiwanshang.png"></image>
|
||
</view>
|
||
<!-- 分类 -->
|
||
<view class="classes flex flex-between flex-center">
|
||
<scroll-view class="classes_item" scroll-x="true">
|
||
<!-- :class="[classesIndex == index ? 'active':'']" -->
|
||
<view class="flex items-center">
|
||
<view class="w600 f16 mr6">推荐</view>
|
||
<view @click="handlerClasses('/pages/class/index', index)" class="w600 f16 mr6 t4"
|
||
v-for="(item, index) in classesList">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<image @click="goPage('/pages/class/index')" class="w10 h10" src="../../static/home/gengduo.png"
|
||
mode="">
|
||
</image>
|
||
</view>
|
||
|
||
<!-- 导航 -->
|
||
<!-- <view class="nav bg-w flex flex-between" v-if="false">
|
||
<view
|
||
class="nav_item flex flex-center"
|
||
v-for="(item, index) in navList"
|
||
>
|
||
<image :src="item.icon" mode=""></image>
|
||
<view>{{ item.text }}</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 专区1 -->
|
||
</view>
|
||
<!-- <view class="classfiyBox m6 p4 flex justify-between">
|
||
<view v-for="i in classfiyList" class="p4 flex flex-column justify-center items-center" @click="handlerClasses('/pages/class/index', i.index)">
|
||
<image :src="i.url" class="w20 h20"></image>
|
||
<view class="mt4 f12">{{i.title}}</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="p4 yuantouhaowu m4">
|
||
<view class="flex justify-between mt10 pt4 pb4" style="position:relative;">
|
||
<image style="height:96px;width:100%" class="m3" src="../../static/home/binglang.png">
|
||
</image>
|
||
<view style="position: absolute;top:30rpx;left:20rpx;" @click="goLicai">
|
||
<view class="w500 f12 m2 uni_text_big">南药基地</view>
|
||
<view class="w500 f12 m2 uni_text_sm">市场成熟/前景广阔</view>
|
||
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
|
||
</view>
|
||
<image style="height:96px;width:100%" class="m3" src="../../static/home/lajiao.png">
|
||
</image>
|
||
<view style="position: absolute;top:30rpx;right: 120rpx;" @click="goChili">
|
||
<view class="w500 f12 m2 uni_text_big">林下经济</view>
|
||
<view class="w500 f12 m2 uni_text_sm">林下套种/科技创新</view>
|
||
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="p4 yuantouhaowu1 m4">
|
||
<view class="flex justify-between mt10 pt4 pb4" style="position:relative;">
|
||
<image style="height:96px;width:100%;" class="m3" src="../../static/home/jihuoquditu.png">
|
||
</image>
|
||
<view style="position: absolute;top:30rpx;left:20rpx;"
|
||
@click="goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')">
|
||
<view class="w500 f12 m2 uni_text_big">海南鲜品</view>
|
||
<view class="w500 f12 m2 uni_text_sm">源头好物/分享福利</view>
|
||
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
|
||
</view>
|
||
<image style="height:96px;width:100%;" class="m3" src="../../static/home/shangjiaquditu.png">
|
||
</image>
|
||
<view style="position: absolute;top:30rpx;right: 120rpx;"
|
||
@click="goPage('/pages/home/goodsArea?type=2')">
|
||
<view class="w500 f12 m2 uni_text_big">商家区</view>
|
||
<view class="w500 f12 m2 uni_text_sm">商家入驻/品类丰富</view>
|
||
<u-icon name="play-circle-fill" color="#ffffff" size="18"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 商品列表 -->
|
||
<view class="flex flex-between goods_list" style="margin-bottom: 25rpx;">
|
||
<!-- <block v-for="(goods, index) in newProductList">
|
||
<GoodsItem :dataItem="goods"></GoodsItem>
|
||
</block> -->
|
||
|
||
</view>
|
||
|
||
<uv-waterfall ref="waterfall" v-model="newProductList" :add-time="10" :left-gap="10" :right-gap="10"
|
||
:column-gap="columnGap" @changeList="changeList">
|
||
<!-- 第一列数据 -->
|
||
<template v-slot:list1>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view>
|
||
<view>
|
||
<!-- <uv-swiper
|
||
imgMode="widthFix"
|
||
:list="listSwiper"
|
||
:autoplay="false"
|
||
height="240"
|
||
width="120"
|
||
class="mb4"
|
||
style="border-radius: 0;"
|
||
>
|
||
|
||
</uv-swiper>
|
||
<uv-swiper
|
||
imgMode="widthFix"
|
||
:list="listSwiper2"
|
||
:autoplay="false"
|
||
height="240"
|
||
width="120"
|
||
class="mb4"
|
||
style="border-radius: 0;"
|
||
>
|
||
|
||
</uv-swiper> -->
|
||
</view>
|
||
<view v-for="(item, index) in list1" @click.stop="jumpTo(item)" :key="item.id"
|
||
class="waterfall-item">
|
||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||
<image :src="item.mainImage" mode="widthFix" :style="{width:item.width+'px'}"
|
||
style="border-radius: 6px;"></image>
|
||
</view>
|
||
<view class="p4">
|
||
<view class="w500 m2 f12 t4">
|
||
{{
|
||
item.titleName
|
||
}}
|
||
<!-- 华为P60 香芋紫 1TB -->
|
||
</view>
|
||
<view class="flex">
|
||
<view class="baoyou">包邮</view>
|
||
<!-- <view class="youhuiquan">优惠券</view> -->
|
||
</view>
|
||
<view class="flex justify-between items-baseline">
|
||
<rkPrice class="ml3" new-color="#000" newPriceSlotText="" :price="{
|
||
newPrice:item.wholesalePrice.toFixed(2) || 999,
|
||
oldPrice:item.wholesalePrice.toFixed(2) || 9999
|
||
}"></rkPrice>
|
||
<view class="w500 t5 f10">{{item.ficti || 0}}人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 第二列数据 -->
|
||
<template v-slot:list2>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view>
|
||
<view>
|
||
|
||
</view>
|
||
<view v-for="(item, index) in list2" :key="item.id" @click.stop="jumpTo(item)"
|
||
class="waterfall-item">
|
||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||
<image :src="item.mainImage" mode="widthFix" :style="{width:item.width+'px'}"
|
||
style="border-radius: 6px;"></image>
|
||
</view>
|
||
<view class="p4">
|
||
<view class="w500 m2">
|
||
<view class="w500 m2 f12 t4">
|
||
{{
|
||
item.titleName
|
||
}}
|
||
<!-- 华为P60 香芋紫 1TB -->
|
||
</view>
|
||
<!-- 华为P60 香芋紫 1TB -->
|
||
</view>
|
||
<view class="flex">
|
||
<view class="baoyou">包邮</view>
|
||
<!-- <view class="youhuiquan">优惠券</view> -->
|
||
</view>
|
||
<view class="flex justify-between items-baseline">
|
||
<rkPrice class="ml3" new-color="#000" newPriceSlotText="" :price="{
|
||
newPrice:item.wholesalePrice.toFixed(2) || 999,
|
||
oldPrice:item.wholesalePrice.toFixed(2) || 9999
|
||
}"></rkPrice>
|
||
<view class="w500 t5 f10">{{item.ficti || 0}}人购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</uv-waterfall>
|
||
|
||
<!-- 弹框 -->
|
||
<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 {
|
||
checkOpenGPSService,
|
||
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 GoodsItem from "./modules/goodsItem.vue";
|
||
import {
|
||
mapMutations,
|
||
mapState
|
||
} from "vuex";
|
||
import {
|
||
showToast
|
||
} from "../../libs/QS-SharePoster/app";
|
||
import HomeGood from "@/components/homeGood.vue"
|
||
import rkPrice from "@/components/rk-price.vue"
|
||
export default {
|
||
components: {
|
||
uniLoadMore,
|
||
product,
|
||
shop,
|
||
modal,
|
||
redEnvelopes,
|
||
tabbar,
|
||
GoodsItem,
|
||
HomeGood,
|
||
rkPrice
|
||
},
|
||
data() {
|
||
return {
|
||
loopData0: [{
|
||
method: 'goLicai',
|
||
lanhuBg0: '../../static/home/nanyaojidi@2x.png',
|
||
lanhutext0: '南药基地',
|
||
lanhutext1: '市场成熟 前景广阔'
|
||
},
|
||
{
|
||
method: 'goChili',
|
||
lanhuBg0: '../../static/home/linxiajingji@2x.png',
|
||
lanhutext0: '林下经济',
|
||
lanhutext1: '林下套种 科技创新'
|
||
},
|
||
{
|
||
method: 'details',
|
||
lanhuBg0: '../../static/home/hainanxianpin@2x.png',
|
||
lanhutext0: '海南鲜品',
|
||
lanhutext1: '新鲜采摘 足斤邮寄'
|
||
},
|
||
{
|
||
method: 'goodsArea',
|
||
lanhuBg0: '../../static/home/shangjiazhuanqu@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: [],
|
||
classfiyList: [{
|
||
title: "电子数码",
|
||
url: require("../../static/home/dianzishuma.png"),
|
||
index: 0
|
||
},
|
||
{
|
||
title: "食品类别",
|
||
url: require("../../static/home/rouqindanlei.png"),
|
||
index: 2
|
||
},
|
||
{
|
||
title: "日用百货",
|
||
url: require("../../static/home/riyongbaihuo.png"),
|
||
index: 0,
|
||
},
|
||
{
|
||
title: "酒水冲饮",
|
||
url: require("../../static/home/jiushuiyinliao.png"),
|
||
index: 9
|
||
},
|
||
{
|
||
title: "蔬菜百货",
|
||
url: require("../../static/home/shucaishuiguo.png"),
|
||
},
|
||
],
|
||
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')
|
||
],
|
||
swiperCenterList: [],
|
||
searchList: ["商品", "店铺"],
|
||
searchIndex: 0,
|
||
showSearchList: false,
|
||
keyWord: "",
|
||
centreSwiperList: [],
|
||
current: 0,
|
||
tabs: [{
|
||
name: "新品推荐",
|
||
img: "news"
|
||
},
|
||
{
|
||
name: "精品推荐",
|
||
img: "boutique"
|
||
},
|
||
{
|
||
name: "附近店铺",
|
||
img: "nearby"
|
||
},
|
||
],
|
||
list1: [],
|
||
list2: [],
|
||
tabsTop: 0,
|
||
tabsFixed: false,
|
||
leftGap: 20,
|
||
rightGap: 20,
|
||
columnGap: 10,
|
||
myAddressData: {
|
||
// 默认北京
|
||
longitude: 0,
|
||
latitude: 0,
|
||
},
|
||
storeEnclosureList: [],
|
||
nearbyLoading: "more",
|
||
// 精品推荐
|
||
recommendList: [],
|
||
recommendPageSize: 1,
|
||
recommendLoading: "more",
|
||
// 新品推荐
|
||
newProductList: [],
|
||
pageNum: 1,
|
||
loadingType: "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: ''
|
||
}
|
||
};
|
||
},
|
||
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() {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
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;
|
||
// 获取新品商品
|
||
this.getNewProductList("add");
|
||
|
||
// this.newProductList.push({
|
||
// titleName:'苹果手环 iWatch8 多彩腕带',
|
||
// mainImage:require('../../static/home/biaodai.png')
|
||
// })
|
||
// this.newProductList.push({
|
||
// titleName:'华为mate60 pro',
|
||
// mainImage:require('../../static/home/huawei.png')
|
||
// })
|
||
// this.newProductList.push({
|
||
// titleName:'索尼 耳机',
|
||
// mainImage:require('../../static/home/erji.png')
|
||
// })
|
||
// 获取轮播图、弹框
|
||
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);
|
||
},
|
||
computed: {
|
||
...mapState(["isLogin", "userInfo"]),
|
||
imageStyle(item) {
|
||
return item => {
|
||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||
const w = v / 2;
|
||
const rate = w / item.w;
|
||
const h = rate * item.h;
|
||
return {
|
||
width: w + 'px',
|
||
height: h + 'px'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(["setLocation", "setIsLogin", 'logout']),
|
||
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()
|
||
} else
|
||
if (val == 'details') {
|
||
this.goPage('/pages/home/details?id=642&qvyu=5&greenText=0&rmbText=0')
|
||
} else
|
||
if (val == 'goodsArea') {
|
||
this.goPage('/pages/home/goodsArea?type=2')
|
||
}
|
||
},
|
||
jumpTo(item) {
|
||
|
||
this.$navigateTo('/pages/home/details?id=' + item.id + '&qvyu=' + item.goodsType || 0 + '&greenText=' +
|
||
item.greenText || 0 + '&rmbText=' + item.rmbText || 0)
|
||
},
|
||
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();
|
||
}
|
||
},
|
||
changeList(e) {
|
||
console.log(e, '111')
|
||
this[e.name].push(e.value);
|
||
|
||
},
|
||
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);
|
||
},
|
||
handlerClasses(path, index) {
|
||
this.classesIndex = index;
|
||
this.$navigateTo(path + "?classIndex=" + index);
|
||
// this.changeTab(index)
|
||
// this.getNewProductList()
|
||
},
|
||
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: 2
|
||
}).then((res) => {
|
||
this.swiperCenterList = 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();
|
||
},
|
||
// 获取新品上市商品
|
||
async getNewProductList(type) {
|
||
if (type === "add") {
|
||
if (this.loadingType === "nomore") {
|
||
return;
|
||
}
|
||
this.loadingType = "loading";
|
||
} else {
|
||
this.loadingType = "more";
|
||
this.newProductList = [];
|
||
this.pageNum = 1;
|
||
}
|
||
//没有更多直接返回
|
||
let params = {
|
||
pageSize: this.pageNum,
|
||
sortComprehensive: 1,
|
||
goodsType: Number(this.classesIndex) + 1,
|
||
storeId: 0,
|
||
};
|
||
let res = await this.$http("GET", url.goods.getGoodsList, params);
|
||
let list = res.data;
|
||
this.newProductList = this.newProductList.concat(list.records);
|
||
if (this.newProductList.length < list.total) {
|
||
this.pageNum++;
|
||
this.loadingType = "more";
|
||
} else {
|
||
this.loadingType = "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.getNewProductList("add");
|
||
} else if (this.current === 1) {
|
||
this.getBoutiqueList("add");
|
||
} else {
|
||
this.getStoreEnclosureList();
|
||
}
|
||
|
||
},
|
||
changeTab(index) {
|
||
this.current = index;
|
||
},
|
||
swiperChange(e) {
|
||
this.changeTab(e.detail.current);
|
||
this.currentLoadData();
|
||
},
|
||
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.getNewProductList("refresh");
|
||
} else if (this.current === 1) {
|
||
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: #f4f5f6;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 20rpx;
|
||
|
||
.grid {
|
||
margin: 10rpx 0 10rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 0 30rpx;
|
||
|
||
&-item {
|
||
width: 33.33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
|
||
.icon {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.clas {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.img {
|
||
border-radius: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
width: 230rpx;
|
||
}
|
||
|
||
.max-img {
|
||
width: 350rpx;
|
||
}
|
||
}
|
||
|
||
.centreSwiper {
|
||
margin-bottom: 26rpx;
|
||
|
||
.wrap {
|
||
height: 180rpx;
|
||
width: 100%;
|
||
|
||
&-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
margin-bottom: 6rpx;
|
||
transform: 0.5s;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.tab {
|
||
width: 27%;
|
||
padding: 10rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f8d247;
|
||
opacity: 0.8;
|
||
|
||
&.active {
|
||
opacity: 1;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.txt {
|
||
padding-bottom: 4rpx;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
color: #f8d247;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.active.txt {
|
||
border-bottom: 8rpx solid #b90000;
|
||
}
|
||
}
|
||
|
||
.tabsFixed {
|
||
background-color: white;
|
||
width: 750rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.list {
|
||
.mark {
|
||
width: 236rpx;
|
||
margin-bottom: -6rpx;
|
||
}
|
||
|
||
.title {
|
||
padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
height: 90rpx;
|
||
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.new {
|
||
height: 100%;
|
||
|
||
// overflow-y: scroll;
|
||
&-item {
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.recommend {
|
||
background-color: #6b5aac;
|
||
border-radius: 20rpx;
|
||
margin-top: 0;
|
||
|
||
.pad {
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list_3 {
|
||
display: flex;
|
||
height: 96px;
|
||
justify-content: space-between;
|
||
margin-bottom: 70rpx;
|
||
font-weight: 800;
|
||
.text-group_2 {
|
||
width:138rpx;
|
||
margin-top:20rpx;
|
||
padding: 20rpx 18rpx 190rpx 20rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
float: right;
|
||
top:10rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
overflow-wrap: break-word;
|
||
color: rgba(47, 36, 36, 1);
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
line-height: 17px;
|
||
margin-right: 19px;
|
||
}
|
||
|
||
.text_4 {
|
||
overflow-wrap: break-word;
|
||
color: rgba(128, 128, 128, 1);
|
||
font-size: 8px;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 11px;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-view {
|
||
overflow: hidden;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
</style> |