You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

340 lines
6.9 KiB

<template>
<view class="centent">
<back :info="info"></back>
<view :style="{top:statusBarHeight+'px'}" class="cityicon" ></view>
<view class="topbg">
<view class="bgjb">
<image :src="$getimg('lx-jq.png')"></image>
</view>
<view class="bgjb-jb">
<image :src="$getimg('djcp-bg-jb.png')"></image>
</view>
</view>
<view class="tbb">
<view class="tbboxs" v-for="(el,ind) in allData" :key="el.id" @click="go(el.tel)">
<view class="tboxbot">
<view class="tbtitle">
<view class="tbtitle-il">
<image :src="$getimg('img-iphone.png')" mode="" class="il-img"></image>
</view>
<view class="tbname">
<view class="tbname-l">{{el.name}}</view>
<view class="tbname-k">{{el.tel}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="szra1">
<view class="list" v-for="(el,ind) in alldata[xwwfind].list" :style="{'margin-right':ind%2==0?'0':'20rpx'}"
v-if="ind>0" @click="$getpage('/pagesys/index/foodCard?uid='+el.uid)">
<view class="liimg">
<image class="szra_img" :src="$geturl(el.logo)" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="sztitle text_overflow">{{el.name}}</view>
<view class="sztitle text_overflow dsadk">{{el.address}}</view>
</view>
</view> -->
</view>
</template>
<script>
import back from '@/components/html/back.vue';
var web = require('@/components/utils/request.js');
export default {
components: {
back
},
data() {
return {
// city:'720虚拟游',
statusBarHeight: 0,
info: {
color: true,
num: false
},
id: 97,
first: 0,
count: 50,
lmdata: [],
xwwfind: 0,
allData:[]
}
},
onLoad(options) {
this.getTitles();
},
onReady() {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
},
onPageScroll(e) {
if (e.scrollTop > 50 && !this.info.num) {
this.info.num = true;
}
if (e.scrollTop < 50 && this.info.num) {
this.info.num = false;
}
},
// onShow(object) { //获取页面返回传递参数
// this.getdata2();
// },
methods: {
geturl(url) {
return 'http://cscmp.tour-ma.com' + url;
},
ckxwwfind(ind, id) {
this.xwwfind = ind;
},
getTitles() {
var url = '/addressBook.jspx';
var para = {
unityTypeId:5
};
var that = this;
web.httpGet(that, url, para, function(res) {
let json = res.data.data[0].link;
that.allData = json;
console.log(that.allData)
// that.checkTitleData(0)
// that.nowInfo = [];
// for (var i = 0; i < json.length; i++) {
// if(json[i].addressBookLists.length!=0){
// for(var k=0;k<json[i].addressBookLists.length;k++){
// that.nowInfo.push(json[i].addressBookLists[k]);
// }
// }
// }
});
},
go(phone) {
uni.makePhoneCall({
// 手机号
phoneNumber: phone,
// 成功回调
success: (res) => {
console.log('调用成功!')
},
// 失败回调
fail: (res) => {
console.log('调用失败!')
}
});
}
}
}
</script>
<style lang="scss">
$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
.cityicon{
width: calc(100% - 167rpx);
font-size: 48upx;
color: #FFFFFF;
left: 80upx;
display: flex;
align-items: center;
position: absolute;
z-index: 9999;
height: 80rpx;
justify-content: center;
}
.centent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 750upx;
overflow-y: scroll;
.topbg {
width: 100%;
position: relative;
.bgjb {
width: 100%;
height: 500rpx;
position: absolute;
z-index: -2;
image {
width: 100%;
height: 500rpx;
}
}
.bgjb-jb {
position: absolute;
top: 300rpx;
z-index: -1;
width: 100%;
image {
width: 100%;
height: 400rpx;
}
}
}
.tbb{
width: 100%;
height: 100%;
.tbboxs:nth-child(1) {
margin-top: 400rpx;
}
}
.tbboxs {
max-width: 690upx;
height: 160upx;
margin: auto;
margin: 20upx auto 5%;
width: 90%;
position: relative;
background-color: #fff;
border-radius: 14rpx;
.tboxbot {
width: 100%;
height: 100%;
position: relative;
background-size: 100% 100% !important;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 104, 77, 0.2);
/* position: absolute; */
/* top: 72rpx; */
/* left: 50%; */
/* margin-left: -47%; */
border-radius: 20rpx;
overflow: hidden;
.bot-img{
width: 60rpx;
height: 60rpx;
position: absolute;
top: 20rpx;
right: 20rpx;
}
.tbtitle {
width: 100%;
height: 100%;
position: absolute;
left: 0upx;
bottom: 0upx;
display: flex;
align-items: center;
.tbtitle-il{
background: rgba(98, 212, 166, 1);
border-radius: 50%;
width: 50rpx;
height: 50rpx;
padding: 30rpx;
margin: 0 30rpx 0 50rpx;
.il-img{
width: 100%;
height: 100%;
}
}
.tbname {
// font-size: 36upx;
// font-weight: bold;
.tbname-l{
font-size: 36upx;
font-weight: 400;
color: #444;
margin-bottom: 10rpx;
}
.tbname-k{
font-size: 36upx;
font-weight: bold;
// color: #CCCCCC;
}
}
.tbinfo {
width: 90%;
font-size: 24upx;
font-weight: 500;
line-height: 1.4;
position: absolute;
top: 120rpx;
left: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
// align-items: center;
&::before {
content: '';
display: inline-block;
width: 24rpx;
height: 28rpx;
margin-right: 10rpx;
background: url($url+'icon-add-da.png') no-repeat;
background-size: 100% 100% !important;
}
}
}
}
}
// .szra1 {
// width: 90%;
// margin: 40upx auto;
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// .list {
// width: 48%;
// margin-bottom: 40upx;
// margin-right: 15rpx;
// .liimg {
// margin-bottom: 20upx;
// .szra_img {
// max-width: 360upx;
// width: 100%;
// height: 210upx;
// border-radius: 8upx;
// }
// }
// .sztitle {
// font-size: 32upx;
// font-weight: 600;
// color: #333333;
// margin-bottom: 20upx;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// .dsadk {
// font-size: 24rpx;
// font-weight: 500 !important;
// line-height: 1.6;
// &::before {
// content: '';
// display: inline-block;
// width: 24rpx;
// height: 26rpx;
// margin-right: 10rpx;
// background: url($url+'icon-add-xiao.png') no-repeat;
// background-size: 100% 100% !important;
// }
// }
// }
// }
}
</style>