jzmall_uni/pages/ucenter/about/about.vue

<template>
    <view>
        <!-- <view class="container">

  <view class="label">项目名称:</view>
  <view class="about-item">
    <view class="item-left">
      <text>{{name}}</text> 
    </view>
  </view>

  <view class="label">公司地址:</view>
  <view class="about-item">
    <view class="item-left">
      <text>{{address}}</text> 
    </view>
    <view class="item-right" bindtap="showLocation">
      <van-icon class="right-icon" name="location-o" />    
    </view>
  </view>

  <view class="label">电话号码:</view>
  <view class="about-item">
    <view class="item-left">
      <text>{{phone}}</text> 
    </view>
    <view class="item-right" bindtap="callPhone">
      <van-icon class="right-icon" name="phone-o" />
    </view>
  </view>

 

</view> -->
        <image src="https://mall.zhaijieshi.cc/file/jzmall/weixin/introduce.jpeg?1" mode="widthFix" style="width: 100%">
            <!-- <image src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/company/introduce.png" mode="widthFix" style="width:100%"> -->
        </image>
    </view>
</template>

<script>
const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');

//获取应用实例
const app = getApp();
export default {
    data() {
        return {
            name: 'o2o商城',
            address: '',
            latitude: '31.201900',
            longitude: '121.587839',
            phone: '4009208718',
            qq: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // this.getAbout();
    },
    methods: {
        getAbout: function () {
            let that = this;
            util.request(api.AboutUrl).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        name: res.data.name,
                        address: res.data.address,
                        phone: res.data.phone,
                        qq: res.data.qq,
                        latitude: res.data.latitude,
                        longitude: res.data.longitude
                    });
                }
            });
        },

        showLocation: function (e) {
            var that = this;
            uni.openLocation({
                latitude: parseFloat(that.latitude),
                longitude: parseFloat(that.longitude),
                name: that.name,
                address: that.address
            });
        },

        callPhone: function (e) {
            var that = this;
            uni.makePhoneCall({
                phoneNumber: that.phone
            });
        }
    }
};
</script>
<style>
/* about.ttss */

.label {
    font-size: 26rpx;
    margin-left: 20rpx;
    padding: 10rpx 0;
}

.about-item {
    background: white;
    border-top: solid #f2f2f2 0.5rpx;
    border-bottom: solid #f2f2f2 0.5rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.item-left {
    font-size: 24rpx;
    margin-left: 40rpx;
    margin-top: auto;
    margin-bottom: auto;
}

.item-right {
    margin-right: 15rpx;
    margin-top: auto;
    margin-bottom: auto;
}
.right-icon {
    width: 40rpx;
    height: 40rpx;
}
</style>