shop-applet/components/zbpSwiper.vue

342 lines
6.8 KiB
Vue
Raw Permalink Normal View History

2023-09-20 17:00:55 +08:00
<template>
<view class="zbp-head-wrapper">
<view class="color-lump"></view>
<view class="bg-img">
<img :src="bgColor" alt="">
</view>
<view class="site-box flex_a_c_j_sb">
<!-- <view class="place_wrapper flex_a_c" @click="selectLocation">
<view class="iconfont icon-weizhi"></view>
<view class="town_name">{{street}}</view>
</view>
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
</navigator> -->
</view>
<!-- 搜索栏 -->
<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
<view class="flex_a_c">
<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
<input type="text" v-model="keyword" placeholder="搜索产品或店铺" placeholder-style="font-size: 30rpx;"
disabled>
</view>
<button class="search_btn">搜索</button>
</navigator>
<!-- 轮播图 -->
<view class="supply_chains-head">
<swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
:autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
indicator-active-color="#fff">
<block v-for="(item,index) in swiper['url']" :key="index">
<swiper-item class="swi_item" @click="swiperClick(item)">
<u--image :showLoading="true" :src="item.img" width="724rpx" height="259rpx" mode="aspectFit">
</u--image>
</swiper-item>
</block>
</swiper>
</view>
<u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
</view>
</template>
<script>
import {
getArea,
getStreet
} from '@/api/article.js';
import {
getIndexData,
getDiy
} from '@/api/api.js'
import {
mapGetters
} from 'vuex'
import {
Toast
} from '../libs/uniApi';
import Cache from '@/utils/cache';
export default {
props: {
isSelectPlace: {
type: Boolean,
default: false
},
// location_Arr: {
// type: Object,
// default: () => ({})
// },
// town: {
// type: String,
// default: false
// },
},
data() {
return {
defaInd: [0, 0],
street: '',
showPicker: false,
styleConfig: [],
columnData: [],
homeCombData: [],
keyword: '',
bgColor: '',
swiper: {
url: [{
img: ''
}],
indicatorDots: true, // 显示面板指示点
vertical: false, // 滑动方向是否为纵向
autoplay: true, // 是否自动切换
interval: 2000, // 自动切换时间间隔
duration: 400 // 滑动动画时长
},
}
},
watch: {
street(nval, val) {
this.street = nval
}
},
created() {
this.getBanner()
this.Area()
},
mounted() {
this.$bus.$on('value-updated', (newValue) => {
// 更新组件的值
this.street = newValue.split(',')[0]
});
},
onShow() {
this.getBanner()
this.Area()
},
methods: {
swiperClick(item) {
const url = item.info[1].value
uni.navigateTo({
url: url
})
},
selectLocation() {
this.isSelectPlace ? this.showPicker = true : ''
},
confirm(e) {
this.showPicker = false
this.$emit('selectPlce', e)
this.$emit('change', e)
this.street = e.value[1].name
this.$nextTick(() => {
this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);
})
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
picker.setColumnValues(1, res.data);
});
}
},
Area() {
getArea({
city_code: 510500
}).then(res => {
this.$refs.uPicker.setColumnValues(0, res.data);
this.Street(res.data[0]['code']);
});
},
Street(code) {
getStreet({
area_code: code
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
},
swiperChange(e) {
let {
current,
source
} = e.detail;
if (source === 'autoplay' || source === 'touch') {
this.bgColor = this.swiper.url[e.detail.current]['img']
this.$emit('kkchange', this.bgColor)
}
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data).sort();
let m = obj.map(key => data[key]);
return m;
},
async getBanner(id) {
let that = this;
const {
data
} = await getDiy({
id: 0
})
that.styleConfig = that.objToArr(data.value);
/* 循环数组得到数据*/
that.styleConfig.forEach((item, index, arr) => {
if (item.name == 'headerSerch' || item.name == 'homeComb') {
if (item.name == 'homeComb') {
that.swiper.url = item.swiperConfig.list
}
}
})
this.bgColor = this.swiper.url[0].img
},
}
}
</script>
<style lang="scss" scoped>
.zbp-head-wrapper {
position: relative;
padding-top: 78.95rpx;
overflow: hidden;
.color-lump {
z-index: 1;
position: absolute;
bottom: -86px;
left: 50%;
transform: translate(-50%, 0);
width: 102%;
height: 133px;
border-radius: 30px 30px 0 0;
background-color: #fff;
}
.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);
}
}
.site-box {
margin: 0 auto;
width: 694.74rpx;
height: 66.67rpx;
margin-bottom: 26.32rpx;
position: relative;
z-index: 0;
// 位置
.place_wrapper {
color: #fff;
margin-right: 24.56rpx;
font-size: 30rpx;
.town_name {
margin-left: 21rpx;
}
}
.iconfont {
font-size: 35.09rpx;
}
}
.my-main {
transition: background-color .5s ease;
}
.search_content {
margin: 0 auto;
width: 724rpx;
height: 74rpx;
padding: 2px 2px 2px 21.05rpx;
border-radius: 175rpx;
background: #fff;
margin-bottom: 21rpx;
position: relative;
box-sizing: border-box;
.icon-sousuo {
font-size: 26.32rpx;
font-weight: bold;
color: #c8c7c6;
margin-right: 17.54rpx;
}
.search_btn {
color: #fff;
width: 105.26rpx;
height: 52.63rpx;
line-height: 52.63rpx;
background: #f84221;
border-radius: 100px;
font-size: 28.07rpx;
}
}
.supply_chains-head {
margin-bottom: 17.54rpx;
position: relative;
z-index: 2;
.swiper {
width: 724rpx;
height: 259rpx;
margin: 0 auto;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden;
.swi_item {
width: 100%;
height: 259rpx;
}
}
}
}
</style>