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.
111 lines
2.1 KiB
111 lines
2.1 KiB
<template>
|
|
<view class="card flex store">
|
|
|
|
<image class="store-img" :src="data.imgUrl"></image>
|
|
|
|
<view class="store-info">
|
|
<view class="store-name">{{ data.name }}</view>
|
|
<view class="store-desc">{{ `地址：${data.address}` }}</view>
|
|
<view class="store-desc">{{ `联系方式：${data.phone}` }}</view>
|
|
<view class="store-contact">
|
|
<button plain class="flex btn" @click="onCall(data.phone)">
|
|
<image class="btn-icon" src="../../static/voucher/icon-phone.png" mode="widthFix"></image>
|
|
<text>电话</text>
|
|
</button>
|
|
<button plain class="flex btn" @click="openLocation(data.latitude, data.longitude)">
|
|
<image class="btn-icon" src="../../static/voucher/icon-address.png" mode="widthFix"></image>
|
|
<text>导航</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const TEST_DATA = {
|
|
id: '001',
|
|
imgUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
|
|
name: '推拿馆',
|
|
address: '湖南省长沙市岳麓区麓云路268号',
|
|
latitude: 0,
|
|
longitude: 0,
|
|
phone: '13425992900'
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return TEST_DATA
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
onCall(phoneNumber) {
|
|
uni.makePhoneCall({
|
|
phoneNumber,
|
|
success() {
|
|
console.log('安卓拨打成功');
|
|
},
|
|
fail() {
|
|
console.log('安卓拨打失败');
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.store {
|
|
padding: 22rpx 38rpx 30rpx 30rpx;
|
|
|
|
&-img {
|
|
width: 155rpx;
|
|
height: 155rpx;
|
|
margin-right: 23rpx;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
}
|
|
|
|
&-name {
|
|
color: #3B3B3B;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&-desc {
|
|
color: #999999;
|
|
font-size: 22rpx;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
&-contact {
|
|
margin-top: 3rpx;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
border: none;
|
|
color: $uni-color-light;
|
|
font-size: 22rpx;
|
|
line-height: 30rpx;
|
|
|
|
& + & {
|
|
margin-left: 44rpx;
|
|
}
|
|
|
|
&-icon {
|
|
width: 23rpx;
|
|
height: 23rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
</style>
|