767 lines
16 KiB
Vue
767 lines
16 KiB
Vue
<template>
|
||
<view class="page_count">
|
||
<!--顶部定位-->
|
||
<view class="my-main header">
|
||
<view style="height: var(--status-bar-height);"></view>
|
||
<view class="location">
|
||
<view class="box flex_a_c_j_sb">
|
||
<view class="place_wrapper flex_a_c" @click="changeMap">
|
||
<view class="iconfont icon-weizhi" style="color:#fff;font-size:40rpx;"></view>
|
||
<view class="town_name">{{street||'定位中' }}</view>
|
||
</view>
|
||
<view class="flex_a_c_j_sb">
|
||
<view style="margin-right: 30rpx;" @click="scanQRcode"
|
||
hover-class="none">
|
||
<view class="iconfont icon-saoma" style="color:#fff;font-size:40rpx;"> </view>
|
||
</view>
|
||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||
<view class="iconfont icon-xiaoxi" style="color:#fff;font-size:40rpx;"> </view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!--轮播图-->
|
||
<view class="swiperBg" :style="{ marginTop: (swiperTop + 15)+'px'}">
|
||
<view class="swiper page_swiper" v-if="imgUrls.length">
|
||
<swiper :autoplay="true" :circular="circular" :interval="intervals" :duration="duration"
|
||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :current="swiperCur"
|
||
style="height:330rpx;margin: 0 auto;width:710rpx;" @change="swiperChange"
|
||
:class="{ scalex:isScale }">
|
||
<block v-for="(item,index) in imgUrls" :key="index">
|
||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||
<image :src="item.img" class="slide-image aa" style="height:330rpx;" mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
<view class="dots">
|
||
<block v-for="(item,index) in imgUrls" :key="index">
|
||
<view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
|
||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||
import {
|
||
configMap
|
||
} from '@/utils';
|
||
import {
|
||
getGeocoder
|
||
} from "@/api/store.js"
|
||
export default {
|
||
name: 'homeComb',
|
||
props: {
|
||
dataConfig: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
isScrolled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isScale: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isMenu: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
userInfo: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
},
|
||
computed: configMap({
|
||
site_logo: ''
|
||
}),
|
||
data() {
|
||
return {
|
||
statusBarHeight: statusBarHeight,
|
||
scrollHeight: 0,
|
||
autoplay: true,
|
||
interval: this.dataConfig.titleConfig.value * 1000 || 2500,
|
||
duration: 500,
|
||
marTop: 50,
|
||
searchH: 0,
|
||
logoConfig: this.dataConfig.logoConfig.url,
|
||
hotWords: this.dataConfig.hotWords.list || [],
|
||
tabClick: 0, //导航栏被点击
|
||
isLeft: 0, //导航栏下划线位置
|
||
isWidth: 0, //每个导航栏占位
|
||
mainWidth: 0,
|
||
tabLeft: 0,
|
||
swiperIndex: 0,
|
||
childIndex: 0,
|
||
childID: 0,
|
||
tabTitle: this.dataConfig.listConfig.list || [],
|
||
fixedTop: 0,
|
||
isTop: 0,
|
||
navHeight: 38,
|
||
indicatorDots: false,
|
||
circular: true,
|
||
autoplay: true,
|
||
intervals: 3000,
|
||
duration: 500,
|
||
imgUrls: [], //图片轮播数据
|
||
imageH: 0,
|
||
swiperCur: 0,
|
||
swiperType: 1,
|
||
searchVal: this.dataConfig.hotWords && this.dataConfig.hotWords.list[0]['val'] || '',
|
||
bgColor: this.dataConfig.swiperConfig.list && this.dataConfig.swiperConfig.list[0]['img'],
|
||
tabId: false,
|
||
isCategory: false,
|
||
swiperTop: 0,
|
||
isFixed: true,
|
||
street: ''
|
||
};
|
||
},
|
||
watch: {
|
||
imageH(nVal, oVal) {
|
||
this.imageH = nVal
|
||
}
|
||
},
|
||
created() {
|
||
var that = this
|
||
// 获取设备宽度
|
||
uni.getSystemInfo({
|
||
success(e) {
|
||
that.mainWidth = e.windowWidth
|
||
that.isWidth = (e.windowWidth - 65) / 8
|
||
}
|
||
})
|
||
setTimeout((e) => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
if (that.tabTitle.length > 0) {
|
||
query.select('.navTabBox').boundingClientRect(data => {
|
||
that.navHeight = data.height > 42 ? data.height : 42
|
||
}).exec();
|
||
} else {
|
||
that.navHeight = 0
|
||
}
|
||
// #ifdef H5
|
||
query.select('.header').boundingClientRect(data => {
|
||
that.isTop = data.height
|
||
that.marTop = data.height
|
||
}).exec();
|
||
// #endif
|
||
// #ifdef MP || APP-PLUS
|
||
// #ifdef APP-PLUS
|
||
const menuButton = 0
|
||
//#endif
|
||
// #ifdef MP
|
||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||
//#endif
|
||
query
|
||
.select('.serch-box')
|
||
.boundingClientRect(data => {
|
||
this.marTop = data.height
|
||
}).exec();
|
||
//#endif
|
||
}, 500)
|
||
that.isTop = (uni.getSystemInfoSync().statusBarHeight + this.marTop)
|
||
that.imgUrls = that.dataConfig.swiperConfig.list
|
||
that.$nextTick(function() {
|
||
setTimeout((e) => {
|
||
// #ifdef H5
|
||
that.swiperTop = that.navHeight + that.marTop
|
||
//#endif
|
||
// #ifdef MP || APP-PLUS
|
||
that.swiperTop = that.navHeight + uni.getSystemInfoSync().statusBarHeight + that.marTop
|
||
//#endif
|
||
}, 500)
|
||
})
|
||
},
|
||
mounted() {
|
||
this.getLocation();
|
||
let that = this;
|
||
if (that.tabTitle.length > 0 && that.tabTitle[0]['value'] != '推荐') {
|
||
that.tabTitle.unshift({
|
||
img: '',
|
||
info: [{
|
||
value: "推荐"
|
||
}, {
|
||
value: false
|
||
}]
|
||
})
|
||
}
|
||
that.$nextTick(function() {
|
||
uni.getImageInfo({
|
||
src: that.setDomain(that.imgUrls[0].img),
|
||
success: function(res) {
|
||
if (res && res.height > 0) {
|
||
let height = res.height * ((750 - 20) / res.width)
|
||
that.$set(that, 'imageH', height);
|
||
} else {
|
||
that.$set(that, 'imageH', 375);
|
||
}
|
||
},
|
||
fail: function(error) {
|
||
that.$set(that, 'imageH', 375);
|
||
}
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
scanQRcode() {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
console.log(res);
|
||
if (res.result && res.result.includes('pages/payment/get_payment')) {
|
||
let url = res.result.replace(/.*lihaink.cn/g, '');
|
||
uni.navigateTo({
|
||
url: url,
|
||
fail: () => {
|
||
Toast('跳转页面失败')
|
||
}
|
||
})
|
||
} else {
|
||
Toast('无效的二维码')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 选择位置
|
||
changeMap() {
|
||
uni.navigateTo({
|
||
url: `/pages/select_address_n/select_address_n`,
|
||
success: () => {
|
||
uni.$once('changeAddress', (e) => {
|
||
this.street = e.street.name;
|
||
this.town = e.street.name;
|
||
this.$store.commit('setAddress', {
|
||
street_id: e.street.code,
|
||
townName: this.town
|
||
});
|
||
if (e.longitude) {
|
||
this.longitude = e.longitude;
|
||
this.latitude = e.latitude;
|
||
this.$store.commit('setLocation', {
|
||
lat: e.latitude,
|
||
long: e.longitude,
|
||
});
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getLocation(){
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: (res) => {
|
||
let latitude, longitude;
|
||
latitude = res.latitude.toString();
|
||
longitude = res.longitude.toString();
|
||
this.$store.commit('setLocation', {
|
||
lat: res.latitude.toFixed(6),
|
||
long: res.longitude.toFixed(6),
|
||
});
|
||
getGeocoder({
|
||
lat: latitude,
|
||
long: longitude
|
||
}).then(res => {
|
||
let town = res.data.address_reference.town.title
|
||
let street_id = street_id = res.data.address_reference.town.id
|
||
this.street = res.data.address_reference.town.title;
|
||
this.$store.commit('setAddress', {
|
||
street_id: street_id,
|
||
townName: town
|
||
});
|
||
uni.$emit('getLocation_succees', {
|
||
street_id,
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
this.street = '定位失败'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
goDetail(url) {
|
||
let urls = url.info[1].value
|
||
this.$util.JumpPath(urls);
|
||
},
|
||
//替换安全域名
|
||
setDomain: function(url) {
|
||
url = url ? url.toString() : '';
|
||
//本地调试打开,生产请注销
|
||
if (url.indexOf("https://") > -1) return url;
|
||
else return url.replace('http://', 'https://');
|
||
},
|
||
swiperChange(e) {
|
||
let {
|
||
current,
|
||
source
|
||
} = e.detail;
|
||
if (source === 'autoplay' || source === 'touch') {
|
||
this.swiperCur = e.detail.current;
|
||
this.bgColor = this.imgUrls[e.detail.current]['img']
|
||
}
|
||
},
|
||
textChange(e) {
|
||
let {
|
||
current,
|
||
source
|
||
} = e.detail;
|
||
if (source === 'autoplay' || source === 'touch') {
|
||
this.searchVal = this.hotWords[e.detail.current]['val']
|
||
}
|
||
},
|
||
/**显示全部分类*/
|
||
showCategory() {
|
||
this.isCategory = true;
|
||
},
|
||
/*跳转为页面*/
|
||
changeTab(item, index) {
|
||
if (this.tabClick == index) return
|
||
this.tabClick = index //设置导航点击了哪一个
|
||
this.isLeft = index * this.isWidth + 16 //设置下划线位置
|
||
this.tabId = item.info[1].value
|
||
this.bgColor = this.tabId ? item.img : this.dataConfig.swiperConfig.list[0]['img']
|
||
this.imgUrls = this.tabId ? [{
|
||
img: item.img
|
||
}] : this.dataConfig.swiperConfig.list
|
||
this.$emit('changeDiy', this.tabId);
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page_count {
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.bg-img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
/* #ifdef MP || APP-PLUS */
|
||
z-index: -1;
|
||
/* #endif */
|
||
/* #ifdef H5 */
|
||
z-index: 0;
|
||
/* #endif */
|
||
z-index: 0;
|
||
filter: blur(0);
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: blur(30rpx);
|
||
transform: scale(1.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.my-main {
|
||
background-color: #40AE36;
|
||
|
||
.location {
|
||
padding: 0 28rpx;
|
||
|
||
.box {
|
||
height: 98rpx;
|
||
}
|
||
|
||
.town_name {
|
||
color: #fff;
|
||
margin-left: 18rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiperTxt {
|
||
width: 300rpx;
|
||
line-height: 64rpx;
|
||
height: 64rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.swiperTxt .text {
|
||
width: 480rpx;
|
||
}
|
||
|
||
.swiperTxt .text .newsTitle {
|
||
width: 300rpx;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.swiperTxt swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.header {
|
||
z-index: 99;
|
||
position: fixed;
|
||
left: 0;
|
||
width: 100%;
|
||
|
||
.btn {
|
||
position: relative;
|
||
margin-left: 30rpx;
|
||
|
||
.iconfont {
|
||
font-size: 45rpx;
|
||
}
|
||
}
|
||
|
||
.iconnum {
|
||
min-width: 14rpx;
|
||
color: #E93323;
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
font-size: 10px;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.serch-wrapper {
|
||
align-items: center;
|
||
padding: 20rpx 30rpx 20rpx 30rpx;
|
||
|
||
.logo {
|
||
width: 133rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
image {
|
||
width: 133rpx;
|
||
height: 66rpx;
|
||
}
|
||
|
||
.box {
|
||
flex: 1;
|
||
}
|
||
|
||
.input,
|
||
.uninput {
|
||
line-height: 64rpx;
|
||
height: 64rpx;
|
||
padding: 0 0 0 30rpx;
|
||
background: rgba(0, 0, 0, .2);
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 28rpx;
|
||
z-index: 2;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 0;
|
||
color: #eeeeee;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mp-header {
|
||
z-index: 99;
|
||
position: fixed;
|
||
left: 0;
|
||
width: 100%;
|
||
|
||
.box {
|
||
flex: 1;
|
||
}
|
||
|
||
.serch-box {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.serch-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
// padding: 0 50rpx 20rpx 30rpx;
|
||
padding: 0 28rpx;
|
||
height: 76rpx;
|
||
|
||
.logo {
|
||
width: 133rpx;
|
||
margin-right: 20rpx;
|
||
line-height: 0;
|
||
}
|
||
|
||
image {
|
||
width: 118rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.input,
|
||
.uninput {
|
||
display: flex;
|
||
/* #ifdef MP */
|
||
flex: 0;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
flex: 1;
|
||
/* #endif */
|
||
flex: 1;
|
||
align-items: center;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 50rpx 0 30rpx;
|
||
background: rgba(0, 0, 0, .2);
|
||
border-radius: 100rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 0;
|
||
color: #eeeeee;
|
||
}
|
||
}
|
||
|
||
/* #ifdef MP */
|
||
.uninput {
|
||
max-width: 500rpx;
|
||
}
|
||
|
||
.input {
|
||
max-width: 340rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
}
|
||
}
|
||
|
||
.tabNav {
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.navTabBox {
|
||
color: rgba(255, 255, 255, 1);
|
||
padding: 0 30rpx;
|
||
z-index: 10;
|
||
left: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
|
||
scroll-view {
|
||
width: 100%;
|
||
padding-right: 30rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.click {
|
||
color: white;
|
||
}
|
||
|
||
.longTab {
|
||
.longItem {
|
||
height: 50upx;
|
||
display: inline-block;
|
||
line-height: 50upx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
max-width: 160rpx;
|
||
margin-right: 30rpx;
|
||
position: relative;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.click {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
|
||
&::after {
|
||
content: '';
|
||
transition: .5s;
|
||
width: 33rpx;
|
||
height: 4rpx;
|
||
background: #FFFFFF;
|
||
position: absolute;
|
||
bottom: -4rpx;
|
||
left: 50%;
|
||
margin-left: -16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scrolled {
|
||
z-index: 5000;
|
||
position: fixed;
|
||
min-height: 90rpx;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
// background: #fff!important;
|
||
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/23bd9202402271611232730.png');
|
||
background-color: #f1f1f1;
|
||
/* 设置背景色 */
|
||
background-size: 100% 100%;
|
||
/* 让背景图片铺满整个盒子 */
|
||
background-repeat: no-repeat;
|
||
/* 不重复 */
|
||
transition: background-color .5s ease;
|
||
|
||
.longItem,
|
||
.click,
|
||
.category text {
|
||
color: #000000 !important;
|
||
}
|
||
|
||
.navTabBox,
|
||
.mp-header,
|
||
.header {
|
||
// transition: background-color .5s ease;
|
||
// background: #ffffff;
|
||
}
|
||
|
||
.btn .iconfont {
|
||
color: #333333 !important;
|
||
}
|
||
|
||
.iconnum {
|
||
background: #333333 !important;
|
||
}
|
||
|
||
.underline {
|
||
background: #000000 !important;
|
||
}
|
||
|
||
.click {
|
||
&::after {
|
||
background-color: #fff !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiperBg {
|
||
z-index: 1;
|
||
|
||
.colorBg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 130rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.page_swiper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
border-radius: 10rpx;
|
||
overflow-x: hidden;
|
||
z-index: 8;
|
||
padding: 0 10rpx;
|
||
|
||
swiper-item {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.swiper-item,
|
||
image,
|
||
.acea-row.row-between-wrapper {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
swiper {
|
||
width: 100%;
|
||
display: block;
|
||
height: auto;
|
||
|
||
&.scalex {
|
||
/deep/.uni-swiper-slide-frame {
|
||
transform: translate(0, 0) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
image {
|
||
transform: scale(0.93);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
swiper-item.active,
|
||
swiper-item.scalex {
|
||
image {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/*用来包裹所有的小圆点 */
|
||
.dots {
|
||
width: 156rpx;
|
||
height: 36rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: absolute;
|
||
left: 320rpx;
|
||
bottom: 0;
|
||
}
|
||
|
||
/*未选中时的小圆点样式 */
|
||
.dot {
|
||
width: 16rpx;
|
||
height: 6rpx;
|
||
border-radius: 6rpx;
|
||
margin-right: 6rpx;
|
||
background-color: rgba(255, 255, 255, .4);
|
||
|
||
/*选中以后的小圆点样式 */
|
||
&.active {
|
||
width: 32rpx;
|
||
height: 6rpx;
|
||
background-color: rgba(255, 255, 255, .4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/.dot0 .uni-swiper-dots-horizontal {
|
||
left: 10%;
|
||
}
|
||
|
||
/deep/.dot1 .uni-swiper-dots-horizontal {
|
||
left: 50%;
|
||
}
|
||
|
||
/deep/.dot2 .uni-swiper-dots-horizontal {
|
||
left: 90%;
|
||
}
|
||
</style> |