You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
6.8 KiB
Vue
269 lines
6.8 KiB
Vue
<template>
|
|
<view class hover-class="none" :hover-stop-propagation="false">
|
|
<view class="pr g_p_10">
|
|
<view class="g_radius_8 g_bg_f g_mb_80">
|
|
<div class="flex-1 g_p_12">
|
|
<div class="g_fs_17 g_fw_600 g_c_3" style="min-width: 100px">
|
|
{{ storeInfo.storeName || "-" }}
|
|
</div>
|
|
</div>
|
|
<swiper v-if="storeInfo.imgList != ''" style="width: 100%; height: 200px; border-radius: 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="g_fs_16 g_c_3 g_fw_600">关于我们</view> -->
|
|
<!-- <view class="g_c_9 g_fs_16 g_mt_8" style="white-space: pre-line;">{{ storeInfo.desp || "对方还未介绍自己" }}</view> -->
|
|
|
|
<view class="container1">
|
|
<view class="content1 g_c_3" :class="{ expanded: isExpanded }" v-html="displayedContent"> </view>
|
|
<!-- <view v-if="shouldShowExpandButton" class="expand-button1" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="g_bg_f g_mt_10 g_radius_8" v-if="false" style="padding: 8px 10px 16px">
|
|
<view class="g_flex_row_between">
|
|
<view class="flex-1 g_pr_20">
|
|
<view class="g_fs_16 g_c_3 g_mt_6">
|
|
{{ storeInfo.storeName || "-" }}
|
|
</view>
|
|
<view class="g_fs_14 g_c_9 g_mt_8" style="width: calc(100vw - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
|
{{ storeInfo.address || "-" }}
|
|
</view>
|
|
</view>
|
|
<view class="g_mr_12 g_mt_4 g_text_c" 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="g_fs_12 g_c_3 g_mt_2">导航</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="servicebox g_mt_10 g_radius_8 g_flex_row_between flex_center" v-if="false" style="margin-bottom: 60px">
|
|
<view class="serviceinfo g_flex_row_start" hover-class="none">
|
|
<view class="g_mr_10">
|
|
<image v-if="storeInfo.avatar" class="br_8" :src="storeInfo.avatar" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
|
|
<image v-else class="g_radius_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="g_mb_2 g_fs_17 g_fw_600">{{ storeInfo.userName || "暂无联系人" }}</view>
|
|
<view class="g_c_3 g_fs_16">
|
|
<p class="f14">{{ storeInfo.phone || "暂无联系方式" }}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="g_text_c g_w_40 g_h_40 g_radius_20 g_flex_column_center" hover-class="none" :hover-stop-propagation="false" style="background-color: #e8fff8">
|
|
<!-- @tap="makePhoneCall" -->
|
|
<a :href="`tel:${storeInfo.phone}`">
|
|
<view class="iconfont icon-phone mr10 dib" hover-class="thover06" style="color: #3578f6"></view>
|
|
</a>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
// const commonUtil = require("../../utils/commonUtil");
|
|
// pages/company/company/index.js
|
|
export default {
|
|
onShareAppMessage() {
|
|
return this.G.shareFun();
|
|
},
|
|
data() {
|
|
return {
|
|
isExpanded: true,
|
|
storeInfo: {
|
|
imgList: "",
|
|
desp: "",
|
|
storeName: "",
|
|
address: "",
|
|
avatar: "",
|
|
userName: "",
|
|
phone: "",
|
|
},
|
|
storeId: "",
|
|
};
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
console.log(options.id);
|
|
this.storeId = options.id;
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
this.getInfo();
|
|
// this.checkContentHeight();
|
|
},
|
|
mounted() {},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
computed: {
|
|
displayedContent() {
|
|
const content = this.storeInfo.desp || "对方还未介绍自己";
|
|
if (!this.isExpanded && content.length > 40) {
|
|
return content.substring(0, 40) + "...";
|
|
}
|
|
return content;
|
|
},
|
|
shouldShowExpandButton() {
|
|
const content = this.storeInfo.desp || "对方还未介绍自己";
|
|
return content.length > 40;
|
|
},
|
|
},
|
|
methods: {
|
|
toggleExpand() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
|
|
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;
|
|
|
|
that.G.Get(that.api.company_detail + that.storeId, {}, (res) => {
|
|
console.log(res);
|
|
this.storeInfo = res;
|
|
this.storeInfo.imgList = res.imgs.split(",");
|
|
console.log(this.storeInfo.imgList);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 拨打电话
|
|
*/
|
|
makePhoneCall() {
|
|
var that = this;
|
|
if (!that.storeInfo.phone) {
|
|
uni.showToast({
|
|
title: "暂无联系方式",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
uni.makePhoneCall({
|
|
phoneNumber: that.storeInfo.phone,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.container1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.content1 {
|
|
max-height: 45px;
|
|
margin-top: 8px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
/* 控制初始高度 */
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-in-out;
|
|
white-space: pre-line;
|
|
width: 100%;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.expanded {
|
|
max-height: none;
|
|
/* 展开后取消高度限制 */
|
|
}
|
|
|
|
.expand-button1 {
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
color: #999;
|
|
/* cursor: pointer; */
|
|
}
|
|
|
|
page {
|
|
position: relative;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.servicebox {
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.servicebox .serviceinfo image {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
.servicebox .serviceBottom {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.servicebox .serviceBottom > view {
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
padding: 0 10px 0 16px;
|
|
}
|
|
|
|
.icon-dianhua {
|
|
position: relative;
|
|
top: 12px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-ysd-bg);
|
|
color: var(--color-hover);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
float: right;
|
|
}
|
|
|
|
.dhImg {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-top: 40px;
|
|
}
|
|
</style>
|