mengyirong/pages/index/info.vue

110 lines
2.9 KiB
Vue
Raw Normal View History

2024-09-09 16:53:19 +08:00
<template>
<view>
<tn-nav-bar :bottomShadow="false" :fixed="true">
<view slot="default" style="color: #000000;font-size: 16px;font-weight: 600;">我要了解政策</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view style="padding: 30rpx">
<tn-swiper height="1230rpx" :autoplay="false" indicatorPosition="bottomCenter" imageMode="widthFix"
:list="list" @change="selectSwiper" :current="current" name="goods_image" mode="none"></tn-swiper>
</view>
</view>
<view class="swTop" :style="{width:w}">
<swiper :current="current" class="swiper" :display-multiple-items="3" previous-margin="100rpx"
next-margin="100rpx" style="margin-top: 30rpx">
<swiper-item v-for="(item,index) in list" @click="dianSwiper(index)">
<view :class="index == current ? 'select' : ''" style="width: 150rpx; height: 150rpx;">
<view style="width: 100%; height: 100%;">
<image :src="item.goods_image" style="width: 100%; height: 100%; display: block;"
mode="aspectFill"></image>
</view>
</view>
</swiper-item>
</swiper>
<view
style="height: 230rpx;width: 0rpx;position:absolute;top: 0;left: 0;box-shadow: rgba(255, 255, 255, 1) 5px 23px 15px 20px">
</view>
<view
style="height: 230rpx;width: 0rpx;position:absolute;top: 0;right: 0;box-shadow: rgba(255, 255, 255, 1) 0px 23px 15px 20px">
</view>
</view>
</view>
</template>
<script>
import {
serviceIndex
} from '@/utils/api.js'
export default {
data() {
return {
list: [],
current: 0,
w: '100%'
}
},
onLoad(op) {
const userAgent = navigator.userAgent.toLowerCase();
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
// 移动端
this.w = '100%';
} else {
// pc端
this.w = '828rpx';
}
this.id = op.id;
this.getService();
},
methods: {
dianSwiper(d) {
this.current = d;
},
selectSwiper(d) {
this.current = d;
},
getService() {
serviceIndex({
page: 1,
length: 100
})
.then(res => {
console.log(res);
this.list = res.data.map(item => {
// 确保 item 中有 goods_image 属性
if (item.goods_image) {
// 在 goods_image 前添加域名
item.goods_image = 'https://loan.dev88.0rui.cn' + item.goods_image;
}
return item;
});
const index = this.list.findIndex(item => item.id == this.id);
this.current = index;
this.getAgentList(this.list[0].id);
})
.catch(error => {
uni.showToast({
icon: 'none',
title: error,
duration: 2000
});
})
},
}
}
</script>
<style scoped>
.select {
border: 10rpx solid #5AC26F;
}
.swTop {
text-align: center;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186, 189, 199, 0.2);
height: 230rpx;
}
</style>