YXGJ/components/storeInfo.vue

<template>
    <view class="store-info" v-if="detail.sys_enterpriseid" :style="{
        marginTop: tovw(marTop),
        marginBottom: tovw(marBot),
    }">
        <view class="title">
            {{ title }}
        </view>
        <view class="content">
            <view style="flex-shrink: 0;">
                <u--image width="60" height="62" radius="8" :src="detail.cover" lazy-load>
                    <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                    </template>
                </u--image>
            </view>
            <view class="text-box" hover-class="navigator-hover" @click="goAtOnce(detail)">
                <view class="storename u-line-1" :style="{ width: detail.phoneNumber ? '230px' : '100%' }">
                    {{ detail.storename }}
                </view>
                <view class="address u-line-1" :style="{ width: detail.phoneNumber ? '230px' : '100%' }">
                    <text class="iconfont icon-dizhi-hui" />{{ getCity(detail) }}
                </view>
                <view v-if="detail.phoneNumber" @click.stop="callPhone(detail.phoneNumber)" class="iconfont icon-dianhua"
                    hover-class="navigator-hover" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "storeInfo",
    props: {
        title: {
            type: String,
            default: "门店信息"
        },
        marTop: {
            type: [Number || String],
            default: 0
        },
        marBot: {
            type: [Number || String],
            default: 0
        }
    },
    watch: {
        detail: function (newVal) {
            this.$emit("门店detail", newVal)
        }
    },
    data() {
        return {
            detail: uni.getStorageSync("shop") || { sys_enterpriseid: 0 }
        }
    },
    methods: {
        goAtOnce(item) {
            uni.openLocation({
                latitude: item.latitude - 0,
                longitude: item.longitude - 0,
                address: item.address,
                name: item.storename,
                success: function () {
                    console.log('success');
                },
                fail: (fail) => {
                    console.log('fail', fail)
                },
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.store-info {
    background: #fff;
    padding: 10px;
    padding-top: 12px;

    .title {
        line-height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
    }

    .content {
        display: flex;
        margin-top: 11px;

        .text-box {
            position: relative;
            flex: 1;
            height: 62px;
            background: #F5F5F5;
            border-radius: 5px;
            margin-left: 10px;
            box-sizing: border-box;
            padding: 10px;

            .storename {
                line-height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-size: 14px;
                color: #333333;
            }

            .address {
                .iconfont {
                    font-size: 12px;
                    margin-right: 4px;
                }

                line-height: 17px;
                font-family: PingFang SC,
                PingFang SC;
                font-size: 12px;
                color: #888888;
                margin-top: 5px;
            }

            .icon-dianhua {
                position: absolute;
                right: 20px;
                top: 20px;
                font-size: 20px;
                color: #C30D23;
            }
        }
    }
}
</style>