343 lines
7.4 KiB
Vue
343 lines
7.4 KiB
Vue
<template>
|
|
<view class="page flex-col">
|
|
<view class="section_1 flex-col">
|
|
<view class="block_2 flex-col">
|
|
<view class="swiper">
|
|
<u-swiper height="322rpx" :list="list" keyName="swiperPicture" :autoplay="true" circular
|
|
radius="20"></u-swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="zhongji1">
|
|
<view class="z-left" @click="getdetils"></view>
|
|
<!-- <button class="z-right" open-type="contact"></button> -->
|
|
<view class="z-right" @click="getkefu()"></view>
|
|
<image :src="imagesUrl+'bxWx.png'">
|
|
|
|
</view>
|
|
|
|
<!-- <view class="v-tz" >
|
|
<view class="v-img">
|
|
<image :src="imagesUrl+'repairlight.png'" mode=""></image>
|
|
</view>
|
|
<text style="font-size: 16px; font-weight: bold;">买保险需要提供什么资料.......</text>
|
|
</view> -->
|
|
|
|
|
|
<!-- < open-type="contact" class="bai-yuan" >
|
|
<view style="line-height: 30px;">
|
|
<uni-icons type="person" size="32" color="#3579D5" ></uni-icons>
|
|
<view class="">客服</view>
|
|
</view>
|
|
|
|
</> -->
|
|
|
|
<view class="goodList">
|
|
<view class="goods" v-for="item,index in insuranceGoods" :key="index" @click="goInsurance(item.id)">
|
|
<u--image class="goodImg" radius="10rpx" width="300rpx" height="180rpx" :showLoading="false"
|
|
:src="baseUrl + item.image"></u--image>
|
|
<view class="goodTitle flex-col justify-between" style="height: 180rpx;">
|
|
<text style=" width: 180px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
|
|
{{ item.title }}
|
|
</text>
|
|
<view class="flex-col justify-between">
|
|
<view class="flex-row justify-between" style="width: 375rpx;">
|
|
<!-- <view>
|
|
<text class="text_5" style="margin-right: 5rpx;">{{ item.price }}</text>
|
|
<text class="text_4">元</text>
|
|
</view> -->
|
|
<view class="text-wrapper_8 padding-left-xs padding-right-xs flex-row justify-between">
|
|
<text class="text_23">查看详情</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" line fontSize="22rpx" />
|
|
<view v-show="insuranceGoods.length===0">
|
|
<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" textSize="22rpx" iconSize="120rpx">
|
|
</u-empty>
|
|
</view>
|
|
<view class="flex-col padding text-lg text-bold text-black bg-white radius margin">
|
|
{{ insuranceText }}
|
|
</view>
|
|
<view class="zhongji">
|
|
<image :src="imagesUrl+'baoxiantel.png'" @click="call">
|
|
<view class="baizi">{{insuranceTel}}</view>
|
|
</view>
|
|
<image class="image_7" @click="govip()" :src="imagesUrl+'user_level.png'" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
constants: {},
|
|
list: [],
|
|
urls: [
|
|
'/static/car.jpg',
|
|
'/static/car.jpg',
|
|
'/static/car.jpg',
|
|
'/static/car.jpg',
|
|
'/static/car.jpg',
|
|
'/static/car.jpg'
|
|
],
|
|
insuranceGoods: [],
|
|
insuranceTel: null,
|
|
isLoadMore: false, //是否加载中
|
|
params: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
status: 'loadmore',
|
|
insuranceText: ''
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getSwpier()
|
|
this.getConfig()
|
|
this.getInsuranceGoods()
|
|
},
|
|
onReachBottom() {
|
|
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.status = 'loading';
|
|
this.isLoadMore = true
|
|
this.params.pageNum++
|
|
this.getInsuranceGoods()
|
|
}
|
|
},
|
|
methods: {
|
|
getkefu() {
|
|
console.log('执行');
|
|
wx.openCustomerServiceChat({
|
|
extInfo: {
|
|
url: 'https://work.weixin.qq.com/kfid/kfc16d3cdc013021c5d'
|
|
},
|
|
corpId: 'ww2a4d01f86ea7ad90',
|
|
success(res) {
|
|
console.log(res);
|
|
}
|
|
})
|
|
},
|
|
govip() {
|
|
uni.navigateTo({
|
|
url: '/pages/tabBar/mine/rules'
|
|
})
|
|
},
|
|
getdetils() {
|
|
uni.navigateTo({
|
|
url: '/subInsurancePages/family/family'
|
|
})
|
|
},
|
|
// 获取轮播图
|
|
async getSwpier() {
|
|
const res = await this.$request({
|
|
url: '/system/swiper/listWx',
|
|
data: {
|
|
moudleName: '保险'
|
|
}
|
|
})
|
|
for (let i = 0; i < res.rows.length; i++) {
|
|
res.rows[i].swiperPicture = getApp().globalData.config.baseUrl + res.rows[i].swiperPicture;
|
|
res.rows[i].title = res.rows[i].swiperName
|
|
}
|
|
this.list = res.rows
|
|
console.log(res.rows);
|
|
},
|
|
|
|
// 获取商品列表
|
|
async getInsuranceGoods() {
|
|
const res = await this.$request({
|
|
url: '/system/insuranceGoods/listWx',
|
|
data: this.params
|
|
})
|
|
this.insuranceGoods = this.insuranceGoods.concat(res.rows);
|
|
|
|
if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.status = 'nomore';
|
|
this.isLoadMore = true
|
|
} else {
|
|
this.isLoadMore = false
|
|
}
|
|
console.log(1, res);
|
|
},
|
|
|
|
|
|
// 获取配置:电话
|
|
async getConfig() {
|
|
const res = await this.$request({
|
|
url: '/system/shopconfig/listWx'
|
|
})
|
|
console.log(res.rows[0]);
|
|
let num = res.rows[0].insuranceTel
|
|
this.insuranceTel = this.addHyphenEveryThreeChars(num)
|
|
|
|
this.insuranceText = res.rows[0].insuranceText
|
|
},
|
|
addHyphenEveryThreeChars(str) {
|
|
let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
|
|
return modifiedPhoneNumber;
|
|
},
|
|
call() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.insuranceTel.toString(), //电话号码
|
|
success: function(e) {
|
|
console.log(e);
|
|
},
|
|
fail: function(e) {
|
|
console.log(e);
|
|
|
|
}
|
|
})
|
|
},
|
|
goInsurance(id) {
|
|
this.$tab.navigateTo(`/subInsurancePages/insuranceInfo/insuranceInfo?id=${id}`)
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './index.rpx.css';
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
.button-hover {
|
|
background: yellow;
|
|
}
|
|
|
|
.bai-yuan {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
position: fixed;
|
|
bottom: 60px;
|
|
right: 20px;
|
|
z-index: 99;
|
|
overflow: hidden;
|
|
padding: 0px;
|
|
}
|
|
|
|
.goodList {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 700rpx;
|
|
margin: 0 auto;
|
|
|
|
.goods {
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
display: flex;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
|
|
.goodTitle {
|
|
margin-left: 20rpx;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
height: 68rpx;
|
|
}
|
|
|
|
.goodImg {
|
|
border-radius: 10px;
|
|
width: 203rpx;
|
|
height: 172rpx;
|
|
margin: 32rpx 0 0 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-tz {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.v-img {
|
|
width: 36rpx;
|
|
height: 27rpx;
|
|
margin-right: 5px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.zhongji1 {
|
|
width: 95%;
|
|
height: 130px;
|
|
margin: 10px auto;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.z-left {
|
|
position: absolute;
|
|
height: 130px;
|
|
width: 50%;
|
|
left: 0px;
|
|
z-index: 9999999;
|
|
}
|
|
|
|
.z-right {
|
|
position: absolute;
|
|
height: 130px;
|
|
width: 50%;
|
|
right: 0px;
|
|
|
|
z-index: 9999999;
|
|
}
|
|
|
|
.zhongji {
|
|
width: 95%;
|
|
height: 130px;
|
|
margin: 10px auto;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.xindetu {
|
|
width: 95%;
|
|
height: 204rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.baizi {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
transform: translate(-50%);
|
|
left: 50%;
|
|
top: 35px;
|
|
// left: 25%;
|
|
font-size: 26px;
|
|
text-shadow: 0px 0px 7px #42464C;
|
|
font-family: HuXiaoBo-NanShen;
|
|
font-weight: 600;
|
|
z-index: 999;
|
|
color: white;
|
|
font-style: italic
|
|
}
|
|
</style> |