1087 lines
31 KiB
Vue
1087 lines
31 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view v-if="showindex == 'index'">
|
|
<!-- 导航栏 -->
|
|
<view class="navbar" :class="{active:opacity}">
|
|
<!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':menuButtonInfo.height+10+'px','marginTop':menuButtonInfo.top+'px','padding-bottom':10 + 'px','padding-right':menuButtonInfo.width+50 + 'px'}">
|
|
<!-- #endif -->
|
|
|
|
<!-- 标题搜索框 -->
|
|
<view class="flex-between">
|
|
<view class="navbar_tow_one flex-start" @click="uindexlist">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<text class="textnth-childone">{{NAME}}</text>
|
|
<!-- #endif -->
|
|
<text class="textnth-childtow">{{form.address}}</text>
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
|
size="16"></u-icon>
|
|
</view>
|
|
<view class="navbar_tow_tow flex-start">
|
|
<input type="text" class="navbar_tow_towinput" v-model="keyword"
|
|
placeholder="请输入关键字" />
|
|
<view class="navbar_tow_towview">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 吸顶 -->
|
|
<view v-if="isFixedTop" class="fourcontent flex-between">
|
|
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
|
:key="index" @click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text>{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
|
|
color="#333333" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 以上都是导航栏处理 -->
|
|
<!-- 轮播图 -->
|
|
<swipers :carousel='hometoplist.carousel'></swipers>
|
|
<!-- 广告 -->
|
|
<advertisement :bannervo='hometoplist.bannerVO' :itemStyle='itemStyle'
|
|
:timersetnteritem='timersetInterval' @changeValue="changeParentValue"></advertisement>
|
|
<!-- 金刚区 -->
|
|
<diamond :district='hometoplist.district'></diamond>
|
|
<!-- 今日上线 -->
|
|
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
|
<!-- 类目 -->
|
|
<view class="fourcontent">
|
|
<!-- 用于防止榻卸 -->
|
|
<view class="flex-between" style="flex-wrap: inherit;" v-if="!isFixedTop">
|
|
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
|
:key="index" @click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 10rpx;" name="arrow-down-fill"
|
|
color="#333333" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fivecontent">
|
|
<!-- <view class="fivecontent" :style="{'height':seighT + 'px'}"> -->
|
|
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"
|
|
scroll-with-animation> -->
|
|
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"
|
|
@click="fivecontentclick(item)">
|
|
<view class="fivecontent_item_nav flex-start">
|
|
<image :src="item.shopImage" mode="aspectFill"></image>
|
|
<view class="fivecontent_item_nav_left">
|
|
<view class="fivecontent_item_nav_lefttop flex-between">
|
|
<view>
|
|
{{item.shopName}}
|
|
</view>
|
|
<view>
|
|
{{item.districts}} {{item.distances}}
|
|
</view>
|
|
</view>
|
|
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
|
<view class="fivecontent_item_nav_leftlang flex-start"
|
|
v-for="(s,index1) in item.shopTag" :key="index1"
|
|
:style="{'background':s.backColor,'color':s.backColor}">
|
|
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
|
|
:src="s.shareImg" mode="aspectFill"></image>
|
|
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fivecontent_item_box">
|
|
<view class="fivecontent_item_boxitem flex-between">
|
|
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_192,h_192`"
|
|
mode="aspectFill"></image>
|
|
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
|
<view class="fivecontent_item_boxitemleftone flex-between"
|
|
style="display: flex;justify-content: space-between;align-items: center;">
|
|
<view>
|
|
{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}
|
|
</view>
|
|
<text>已抢{{item.realSalesNumber}}份</text>
|
|
</view>
|
|
<view class="flex-start flexstartboxfttow">
|
|
<view class="fivecontent_item_boxitemlefttow flex-start"
|
|
v-for="(c,index2) in item.proTag" :key="index2"
|
|
:style="{'background':c.backColor,'color':c.backColor}">
|
|
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
|
:src="c.shareImg" mode="aspectFill"></image>
|
|
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="indexboxitemleftthere flex-colum-start">
|
|
<view class="indexboxitemleftthereabsolute">
|
|
马上抢
|
|
</view>
|
|
<view class="indexboxitemlefttheretext flex-start">
|
|
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
|
<text class="flex_startone">到手</text>
|
|
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
|
</view>
|
|
<view class="fivecontent_item_boxitemlefthere_tow">
|
|
{{item.discount || ''}}折
|
|
</view>
|
|
<view class="fivecontent_item_boxitemlefthere_there">
|
|
¥{{item.originPrice}}
|
|
</view>
|
|
</view>
|
|
<view class="indexboxitemleftthere_countdown flex-between">
|
|
<text
|
|
class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
|
<view class="indexboxitemleftthere_countdowntexts">
|
|
<uni-countdown @timeup="updateCity" :show-day="false"
|
|
:day="item.end_times.d" :hour="item.end_times.h"
|
|
:minute="item.end_times.m" :second="item.end_times.s"
|
|
:indexs='index' color="#FFFFFF" border-color="#00B26A"
|
|
splitorColor="#FFFFFF" :font-size="10"></uni-countdown>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
|
<!-- </scroll-view> -->
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 弹出层 -->
|
|
<u-popup mode="top" :show="showproductlist" @close="closeproductlist" @open="openproductlist">
|
|
<!-- 导航栏 -->
|
|
<view class="navbar" :class="{active:opacity}">
|
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="status-bar"></view>
|
|
<view class="navbar_tow flex-between">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="navbar_tow flex-between"
|
|
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
|
<!-- #endif -->
|
|
<!-- 标题搜索框 -->
|
|
<view class="flex-between">
|
|
<view class="navbar_tow_one flex-start" @click="uindexlist">
|
|
<text class="textnth-childone">{{NAME}}</text>
|
|
<text class="textnth-childtow">{{form.address}}</text>
|
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill"
|
|
color="#333333" size="16"></u-icon>
|
|
</view>
|
|
<view class="navbar_tow_tow flex-start">
|
|
<input type="text" class="navbar_tow_towinput" v-model="keyword"
|
|
placeholder="请输入关键字" />
|
|
<view class="navbar_tow_towview">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 吸顶 -->
|
|
<view class="fourcontent flex-between">
|
|
<view class="fourcontent_item flex-start"
|
|
v-for="(item,index) in hometoplist.menu" :key="index"
|
|
@click="viewHistory(item,index)"
|
|
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
|
<text>{{item.name}}</text>
|
|
<u-icon v-if="item.isChild" style="margin-left: 10rpx;"
|
|
name="arrow-down-fill" color="#333333" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 显示下拉字段 -->
|
|
|
|
<view class="sixcontent" v-if="clickhometoplistmenulist.quilt == '1' ">
|
|
<view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
|
|
<category style="width: 100%;"
|
|
:categoryList="clickhometoplistmenulist.detail"
|
|
:subCategoryList="subCategoryList"
|
|
@categoryMainClick="categoryMainClick"
|
|
@categorySubClick="categorySubClick">
|
|
</category>
|
|
</view>
|
|
</view>
|
|
<view class="sixcontent" v-else>
|
|
<view class="sixcontentitemP flex-colum-start">
|
|
<view class="sixcontentitemP_item"
|
|
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
|
|
v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
|
|
@click="clickdetail(item,index)">
|
|
{{item.name}}
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
<indexs v-if="showindex == 'shopIndex'" :shopExtend="shopExtend" :shopUserInfo='shopUserInfo' ></indexs>
|
|
<popupad id="popupad" :forceUpdate='forceUpdate' :showPosition="'home'"></popupad>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import swipers from './components/swiper.vue'
|
|
import popupad from '@/components/popupad.vue'
|
|
import diamond from './components/diamond.vue'
|
|
import todaylist from './components/todaylist.vue'
|
|
import productlist from './components/productlist.vue'
|
|
import advertisement from './components/advertisement.vue'
|
|
import category from '@/components/qiyue-category/qiyue-category.vue';
|
|
import indexs from './indexs.vue';
|
|
export default {
|
|
components: {
|
|
swipers,
|
|
diamond,
|
|
todaylist,
|
|
productlist,
|
|
advertisement,
|
|
category,
|
|
indexs,
|
|
popupad
|
|
},
|
|
data() {
|
|
return {
|
|
showindex: "",
|
|
NAME: uni.cache.get('NAME'),
|
|
timersetInterval: '0', //定时器
|
|
isFixedTop: false, //吸顶是否显示
|
|
Topdistance: 3000, //吸顶初始距离
|
|
keyword: '',
|
|
current: 0,
|
|
opacity: false,
|
|
showproductlist: false, //弹成
|
|
seighT: null, //高度
|
|
hometoplist: { //上面数据
|
|
carousel: [],
|
|
district: [],
|
|
salesList: {},
|
|
todayList: {},
|
|
},
|
|
itemStyle: [ //样式
|
|
],
|
|
homelist: [], //下面数据
|
|
clickhometoplistmenulist: {
|
|
detail: [],
|
|
quilt: ''
|
|
}, //下拉点击的数据
|
|
form: {
|
|
address: '', //地址
|
|
type: '', //品类
|
|
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
|
other: '', //附近1KM 1选中 0不选中
|
|
page: 1, //页数
|
|
size: 10, //页容量
|
|
status: 'loadmore'
|
|
},
|
|
viewHistoryindex: '', //吸顶元素值
|
|
clickdetailindex: 0, //默认下拉选项第一个
|
|
clickdetailtowindex: 0, //默认二级菜单数据选项第一个
|
|
clickdetailtowlist: [],
|
|
// 二级菜单
|
|
categoryList: [],
|
|
subCategoryList: [], //二级菜单数据
|
|
// 登录后店铺信息
|
|
shopUserInfo:{},
|
|
popupadList: [], //广告数据
|
|
forceUpdate: false,
|
|
shopExtend: null,
|
|
};
|
|
},
|
|
|
|
onPageScroll(e) {
|
|
if (e.scrollTop <= 44) { //搜索导航栏
|
|
this.opacity = false
|
|
this.showproductlist = false
|
|
} else {
|
|
this.opacity = true
|
|
}
|
|
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
|
this.isFixedTop = true
|
|
} else {
|
|
this.isFixedTop = false
|
|
}
|
|
},
|
|
onHide() {
|
|
this.timersetInterval = '1'
|
|
},
|
|
computed: {
|
|
HeighT() { //手机类型的尺寸
|
|
return this.$store.getters.is_BarHeight
|
|
},
|
|
menuButtonInfo() { //手机类型的尺寸
|
|
return uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
this.$nextTick(() => {
|
|
this.GetTop()
|
|
});
|
|
}, 1000)
|
|
// 当组件挂载完成后获取距离
|
|
|
|
},
|
|
onReachBottom() {
|
|
this.onLoadhome()
|
|
},
|
|
async onShow() {
|
|
// 判断显示那个页面
|
|
// #ifdef MP-ALIPAY
|
|
my.hideAllFavoriteMenu({
|
|
success: (res) => {
|
|
console.log('收藏按钮已隐藏', res);
|
|
},
|
|
fail: (err) => {
|
|
console.error('隐藏收藏按钮失败', err);
|
|
}
|
|
});
|
|
// #endif
|
|
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
|
this.showindex = 'shopIndex'
|
|
uni.cache.set('types', 'index');
|
|
let res = await this.api.shopUserInfo({
|
|
"shopId": uni.cache.get('shopId'),
|
|
"userId": uni.cache.get('userInfo').id,
|
|
})
|
|
if (res.code == 0) {
|
|
this.shopUserInfo = res.data
|
|
uni.cache.set('shopUserInfo',this.shopUserInfo)
|
|
}
|
|
if ( uni.cache.get('forceUpdate') == 1) {
|
|
this.forceUpdate = !this.forceUpdate;
|
|
}
|
|
this.getShopExtend()
|
|
this.timersetInterval = '0'
|
|
} else {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: async (res) => {
|
|
// console.log(res)
|
|
let successres = await this.api.geocodelocation({
|
|
lng: res.longitude,
|
|
lat: res.latitude,
|
|
})
|
|
// console.log("successres==",successres)
|
|
if (successres.code == 0) {
|
|
let datastorage = {
|
|
country: successres.data.addressComponent.country, // "中国"
|
|
province: successres.data.addressComponent.province, //province: "陕西省"
|
|
address: successres.data.addressComponent.city, //district: "西安市"
|
|
district: successres.data.addressComponent.district, //district: "未央区"
|
|
lng: res.longitude,
|
|
lat: res.latitude,
|
|
}
|
|
uni.cache.set('getLocationstorage', datastorage);
|
|
this.hometop()
|
|
this.init_fn()
|
|
this.timersetInterval = '0'
|
|
}
|
|
},
|
|
fail: async (err) => {
|
|
console.log(err, '获取错误') //测试用于app
|
|
let successres = await this.api.geocodelocation({
|
|
lng: '',
|
|
lat: '',
|
|
})
|
|
if (successres.code == 0) {
|
|
let res = successres.data.addressComponent.streetNumber.location.split(',')
|
|
let datastorage = {
|
|
country: successres.data.addressComponent.country, // "中国"
|
|
province: successres.data.addressComponent.province, //province: "陕西省"
|
|
address: successres.data.addressComponent.city, //district: "西安市"
|
|
district: successres.data.addressComponent.district, //district: "未央区"
|
|
lng: res[0],
|
|
lat: res[1],
|
|
}
|
|
uni.cache.set('getLocationstorage', datastorage);
|
|
this.hometop()
|
|
this.init_fn()
|
|
this.timersetInterval = '0'
|
|
}
|
|
}
|
|
});
|
|
this.showindex = 'index'
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
/**
|
|
* 获取背景图
|
|
*/
|
|
async getShopExtend () {
|
|
let res = await this.api.getShopExtend({
|
|
shopId: uni.cache.get('shopId'),
|
|
autokey: "index_bg" //index_bg my_bg member_bg shopInfo_bg
|
|
})
|
|
if ( res.code == 0) {
|
|
this.shopExtend = res.data;
|
|
}
|
|
},
|
|
|
|
closeproductlist() {
|
|
this.showproductlist = false
|
|
// console.log('close');
|
|
},
|
|
openproductlist() {
|
|
// console.log('open');
|
|
},
|
|
uindexlist() {
|
|
uni.pro.navigateTo('index/uindexlist')
|
|
},
|
|
fivecontentclick(item) {
|
|
uni.pro.navigateTo('product/index', {
|
|
id: item.id
|
|
})
|
|
},
|
|
updateCity(data) {
|
|
thiss.list[data].end_times = 0;
|
|
this.$forceUpdate();
|
|
},
|
|
//获取元素距离顶部的距离
|
|
GetTop() {
|
|
uni.getSystemInfo({
|
|
success: (data) => {
|
|
this.seighT = data.windowHeight;
|
|
this.$u.getRect('.fourcontent').then(res => {
|
|
this.Topdistance = res.top - res.height //滚动距离
|
|
})
|
|
}
|
|
})
|
|
},
|
|
changeParentValue(newValue) {
|
|
this.itemStyle = newValue
|
|
},
|
|
getStyle(e) {
|
|
if (e > this.hometoplist.bannerVO.counponsInfo.length / 2) {
|
|
var right = this.hometoplist.bannerVO.counponsInfo.length - e
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
|
zIndex: 9999 - right,
|
|
opacity: 1
|
|
}
|
|
} else {
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
|
|
zIndex: 9999 - e,
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
// 首页上面数据
|
|
async hometop() {
|
|
try {
|
|
let res = await this.api.homehomePageUp()
|
|
this.hometoplist = res.data
|
|
if (this.hometoplist.bannerVO.counponsInfo) {
|
|
this.itemStyle = []
|
|
this.hometoplist.bannerVO.counponsInfo.forEach((item,
|
|
index) => {
|
|
this.itemStyle.push(this.getStyle(index))
|
|
})
|
|
}
|
|
// 计算swiper样式
|
|
|
|
} catch (e) {}
|
|
},
|
|
// 下面初始数据
|
|
init_fn() {
|
|
this.homelist = []
|
|
this.form = {
|
|
address: uni.cache.get('getLocationstorage').address, //地址
|
|
lng: uni.cache.get('getLocationstorage').lng,
|
|
lat: uni.cache.get('getLocationstorage').lat,
|
|
type: '', //品类
|
|
orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
|
|
other: '', //附近1KM 1选中 0不选中
|
|
page: 1, //页数
|
|
size: 10, //页容量
|
|
status: 'loadmore'
|
|
},
|
|
this.onLoadhome()
|
|
},
|
|
async onLoadhome() {
|
|
try {
|
|
let res = await this.api.home(this.form)
|
|
var dates = new Date().getTime();
|
|
res.data.list.forEach((item, index) => {
|
|
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
|
if (leftTime >= 0) {
|
|
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
|
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
|
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
|
let s = Math.floor(leftTime / 1000 % 60);
|
|
item.end_times = {
|
|
d: d,
|
|
h: h,
|
|
m: m,
|
|
s: s
|
|
}
|
|
} else {
|
|
item.end_times = 0
|
|
}
|
|
})
|
|
if (res.data.pages < this.form.page) {
|
|
this.form.status = 'nomore'
|
|
if (this.form.page == 1 && res.data.list.length == 0) {
|
|
this.is_end = true
|
|
}
|
|
return false;
|
|
} else {
|
|
this.form.status = 'loading';
|
|
this.form.page = ++this.form.page;
|
|
setTimeout(() => {
|
|
this.homelist = [...this.homelist, ...res.data.list];
|
|
this.form.status = 'loading';
|
|
if (res.data.pageNum == res.data.pages) {
|
|
this.form.status = 'nomore';
|
|
} else {
|
|
this.form.status = 'loading';
|
|
}
|
|
}, 500)
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
// 点击元素到指定位置
|
|
async viewHistory(item, index) {
|
|
uni.pageScrollTo({
|
|
scrollTop: this.Topdistance,
|
|
duration: 300
|
|
});
|
|
this.viewHistoryindex = index
|
|
if (item.dictName == 'allCity') {
|
|
let res = await this.api.locationdistrict({
|
|
keywords: uni.cache.get('getLocationstorage').address
|
|
})
|
|
this.clickhometoplistmenulist.detail = res.data
|
|
this.clickhometoplistmenulist.quilt = '1'
|
|
} else {
|
|
this.clickhometoplistmenulist.detail = item.detail
|
|
this.clickhometoplistmenulist.quilt = ''
|
|
}
|
|
|
|
if (item.isChild) {
|
|
this.form.type = '' //先清空后赋值
|
|
setTimeout(() => {
|
|
this.showproductlist = true
|
|
}, 500);
|
|
} else {
|
|
this.showproductlist = false
|
|
// 以下没有多选处理
|
|
if (item.value == this.form.type) { // 再次选择取消选中
|
|
this.viewHistoryindex = ''
|
|
}
|
|
this.form.type = item.value == this.form.type ? "" : item.value //附近1KM 1选中 0不选中
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
}
|
|
|
|
},
|
|
// 选择元素的指定选项
|
|
clickdetail(item, index) {
|
|
this.clickdetailindex = index
|
|
this.showproductlist = false
|
|
this.hometoplist.menu[this.viewHistoryindex].name = item.name
|
|
switch (item.dictName) {
|
|
case 'category':
|
|
// 品类
|
|
this.form.type = item.value
|
|
break;
|
|
case 'sort':
|
|
// 智能排序
|
|
this.form.orderBy = item.value
|
|
break;
|
|
}
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
},
|
|
//城市二级菜单
|
|
categoryMainClick(category) {
|
|
if (category.category.name == '全城') {
|
|
this.showproductlist = false
|
|
this.form.lng = uni.cache.get('getLocationstorage').lng,
|
|
this.form.lat = uni.cache.get('getLocationstorage').lat,
|
|
this.form.address = uni.cache.get('getLocationstorage').address, //地址
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
this.hometoplist.menu[this.viewHistoryindex].name = uni.cache.get('getLocationstorage').address
|
|
this.subCategoryList = []
|
|
} else {
|
|
this.subCategoryList = category.category.districts;
|
|
}
|
|
},
|
|
//确定街道菜单赋值
|
|
categorySubClick(category) {
|
|
this.hometoplist.menu[this.viewHistoryindex].name = category.name
|
|
this.form.address = category.name //地址
|
|
this.showproductlist = false
|
|
let res = category.center.split(',')
|
|
this.form.lng = res[0]
|
|
this.form.lat = res[1]
|
|
this.form.page = 1
|
|
this.form.size = 10
|
|
this.form.status = 'loadmore'
|
|
this.homelist = []
|
|
this.onLoadhome()
|
|
},
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.content {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
.active {
|
|
background: rgba(249, 249, 249, 1);
|
|
}
|
|
|
|
.status-bar {
|
|
// #ifdef APP-PLUS
|
|
height: calc(var(--status-bar-height) / 2);
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
height: var(--status-bar-height);
|
|
// #endif
|
|
}
|
|
|
|
// #ifdef APP-PLUS
|
|
.statusbarmargin {
|
|
margin-top: var(--status-bar-height);
|
|
}
|
|
|
|
// #endif
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
|
|
.navbar_tow {
|
|
width: 100%;
|
|
position: relative;
|
|
font-size: 36rpx;
|
|
|
|
.flex-between {
|
|
// #ifdef APP-PLUS || H5
|
|
margin: 28rpx;
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
margin-left: 28rpx;
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
margin-left: 50rpx;
|
|
// #endif
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.navbar_tow_one {
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.textnth-childone {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.textnth-childtow {
|
|
margin-left: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.navbar_tow_tow {
|
|
position: relative;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
flex: 1;
|
|
margin-left: 10rpx;
|
|
|
|
.navbar_tow_towview {
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
text-align: center;
|
|
background: #FEE06A;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
width: 116rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
border-radius: 34rpx 34rpx 34rpx 34rpx;
|
|
}
|
|
|
|
.navbar_tow_towinput {
|
|
padding-left: 32rpx;
|
|
padding: 12rpx 120rpx 12rpx 32rpx;
|
|
height: 100%;
|
|
flex: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fourcontent {
|
|
padding: 32rpx 28rpx;
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
|
|
.fourcontent_item {
|
|
flex-wrap: nowrap;
|
|
margin-left: 22rpx;
|
|
padding: 11rpx 31rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
text {
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
.fourcontent_itemactev {
|
|
background: #fee06a;
|
|
}
|
|
|
|
.fourcontent_item:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.sixcontent {
|
|
.sixcontentitemP {
|
|
width: 100%;
|
|
padding: 0 32rpx 28rpx 32rpx;
|
|
max-height: 600rpx;
|
|
overflow: auto;
|
|
|
|
.sixcontentitemP_itembox {
|
|
.sixcontentitemP_itemone {
|
|
margin-top: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.sixcontentitemP_itemone:nth-child(1) {
|
|
margin-top: 0rpx;
|
|
}
|
|
}
|
|
|
|
.sixcontentitemP_item:nth-child(1) {
|
|
margin-top: 0rpx;
|
|
}
|
|
|
|
.sixcontentitemP_item {
|
|
margin-top: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.sixcontentitemP_itemactive {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fivecontent {
|
|
padding: 0 28rpx;
|
|
height: 100vh;
|
|
|
|
.fivecontent_item:nth-child(1) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.fivecontent_item {
|
|
margin-top: 32rpx;
|
|
padding: 24rpx 32rpx;
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
|
.fivecontent_item_nav {
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.fivecontent_item_nav_left {
|
|
flex: auto;
|
|
margin-left: 12rpx;
|
|
|
|
.fivecontent_item_nav_lefttop {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.fivecontent_item_nav_lefttopstart {
|
|
margin-top: 8rpx;
|
|
|
|
.fivecontent_item_nav_leftlang {
|
|
margin-left: 12rpx;
|
|
width: max-content;
|
|
padding: 4rpx 10rpx;
|
|
background: #FFF9E1;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
|
.fivecontent_item_nav_leftlangtext {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #F9A511;
|
|
}
|
|
|
|
.fivecontent_item_nav_leftlangimage {
|
|
width: 10.82rpx;
|
|
height: 14.06rpx;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_nav_leftlang:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_box {
|
|
margin-top: 20rpx;
|
|
border-top: 2rpx solid #E5E5E5;
|
|
padding-top: 14rpx;
|
|
|
|
.fivecontent_item_boxitem {
|
|
image {
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.fivecontent_item_boxitemleft {
|
|
margin-left: 24rpx;
|
|
flex: 1;
|
|
|
|
.fivecontent_item_boxitemleftone {
|
|
width: 100%;
|
|
|
|
text {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
// font-weight: 700;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
view {
|
|
// width: 300rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap; //溢出不换行white-space:nowrap; //溢出不换行
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.flexstartboxfttow {
|
|
.fivecontent_item_boxitemlefttow {
|
|
margin-left: 16rpx;
|
|
margin-top: 8rpx;
|
|
width: max-content;
|
|
padding: 4rpx 10rpx;
|
|
background: #FFF9E1;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
|
.fivecontent_item_boxitemlefttowtext {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #F9A511;
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefttowimage {
|
|
width: 10.82rpx;
|
|
height: 14.06rpx;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefttow:nth-child(1) {
|
|
margin-left: 0;
|
|
background: #FFD6D7;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.indexboxitemleftthere {
|
|
position: relative;
|
|
margin-top: 30rpx;
|
|
padding-left: 16rpx;
|
|
width: 100%;
|
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
.indexboxitemleftthereabsolute {
|
|
position: absolute;
|
|
top: 14rpx;
|
|
right: 12rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.indexboxitemlefttheretext {
|
|
// width: 100%;
|
|
margin-top: 12rpx;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.fivecontent_item_boxitemlefthere_one {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.flex_startone {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 16rpx;
|
|
color: #FF7127;
|
|
}
|
|
|
|
.flex_starttow {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FF7127;
|
|
}
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefthere_tow {
|
|
margin-left: 4rpx;
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
border: 2rpx solid #FF7127;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 16rpx;
|
|
color: #FF7127;
|
|
}
|
|
|
|
.fivecontent_item_boxitemlefthere_there {
|
|
margin-left: 6rpx;
|
|
line-height: 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #999999;
|
|
text-decoration-line: line-through;
|
|
}
|
|
}
|
|
|
|
.indexboxitemleftthere_countdown {
|
|
width: 100%;
|
|
padding-right: 7rpx;
|
|
margin-top: 2rpx;
|
|
|
|
.indexboxitemleftthere_countdowntext {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.indexboxitemleftthere_countdowntexts {
|
|
font-family: Roboto, Roboto;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 16rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |