wx2uni/pages/company/companyDetail/index.vue

<template>
    <view class hover-class="none" :hover-stop-propagation="false">
        <view class="pr p10">
            <view class="br8 bgf">
                <swiper
                    v-if="storeInfo.imgList != ''"
                    style="width: 100%; height: 200px; border-radius: 6px 6px 0px 0px; overflow: hidden"
                    :indicator-dots="true"
                    indicator-color="rgba(0,0,0,.3)"
                    :autoplay="true"
                    :interval="5000"
                    :circular="true"
                >
                    <swiper-item class="" item-id="" v-for="(item, index) in storeInfo.imgList" :key="index">
                        <image show-menu-by-longpress :src="item" mode="aspectFill" style="width: 100%; height: 200px; display: block" class="db toppic"></image>
                    </swiper-item>
                </swiper>
                <view style="padding: 16px 10px">
                    <view class="f16 c3 fwb">关于我们</view>
                    <view class="c9 f16 mt8">{{ storeInfo.desp || '对方还未介绍自己' }}</view>
                </view>
            </view>

            <view class="bgf mt10 br8" style="padding: 8px 10px 16px">
                <view class="v-center">
                    <view class="flex-1 pr20">
                        <view class="f16 c3 mt6">
                            {{ storeInfo.storeName || '-' }}
                        </view>
                        <view class="f14 c9 mt8" style="width: calc(100vw - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                            {{ storeInfo.address || '-' }}
                        </view>
                    </view>
                    <view class="mr12 mt4 tc" hover-class="thover" @tap="goMap">
                        <image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/pugongying/daohang.svg" style="width: 28px; height: 28px"></image>
                        <view class="f12 c3">导航</view>
                    </view>
                </view>
            </view>

            <view class="servicebox mt_10 br8 fsa" style="margin-bottom: 60px">
                <view class="serviceinfo display-flex" hover-class="none">
                    <view class="mr10">
                        <image v-if="storeInfo.avatar" class="br_8" :src="storeInfo.avatar" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
                        <image
                            v-else
                            class="br_8"
                            src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg"
                            mode="aspectFit|aspectFill|widthFix"
                            :lazy-load="false"
                        ></image>
                    </view>
                    <view class="servicenamebox">
                        <view class="mb2 f20 fw500">{{ storeInfo.userName || '暂无联系人' }}</view>
                        <view class="c3 f16">
                            <p class="f14">{{ storeInfo.phone || '暂无联系方式' }}</p>
                        </view>
                    </view>
                </view>
                <view class hover-class="none" :hover-stop-propagation="false">
                    <view
                        class="iconfont icon-dianhua mr10 dib"
                        @tap="makePhoneCall"
                        hover-class="thover06"
                        style="
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: var(--color-ysd-bg);
                            color: var(--color-hover);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 20px;
                            float: right;
                        "
                    ></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
// const commonUtil = require("../../utils/commonUtil");
// pages/company/company/index.js
export default {
    data() {
        return {
            storeInfo: {
                imgList: '',
                desp: '',
                storeName: '',
                address: '',
                avatar: '',
                userName: '',
                phone: ''
            },
            storeId: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        console.log(options.id);
        this.setData({
            storeId: options.id
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        goMap() {
            console.log('123');
            let that = this;
            uni.openLocation({
                latitude: Number(that.storeInfo.lat),
                longitude: Number(that.storeInfo.lng),
                name: that.storeInfo.storeName,
                address: that.storeInfo.address,
                scale: 18
            });
        },

        /**
         * 获取企业信息
         */
        getInfo() {
            let that = this;
            uni.request({
                url: app.globalData.ip + '/yishoudan/agency/store/get/' + that.storeId,
                method: 'get',
                header: app.globalData.headers,
                success: function (res) {
                    console.log(res);
                    let data = res.data.data;
                    if (res.data.status == 200) {
                        data.imgList = data.imgs.split(',');
                        console.log(data.imgList == '');
                        that.setData({
                            storeInfo: data
                        });
                    }
                }
            });
        },

        /**
         * 拨打电话
         */
        makePhoneCall() {
            var that = this;
            if (!that.storeInfo.phone) {
                uni.showToast({
                    title: '暂无联系方式',
                    icon: 'none'
                });
                return;
            }
            uni.makePhoneCall({
                phoneNumber: that.storeInfo.phone
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>