110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<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> |