|
|
- <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>
|