ArticleDetails.vue 6.32 KB
<template>
	<view class="page">
		<!-- 文章内容 -->
		<view class="article-data">
			<view class="article-top">{{detailData.subTitle}}</view>
			<view class="article-title">
				<view class="article-title-left">
					{{ detailData.creatorTime}}
				</view>
				<view class="article-title-right"><image src="../../static/kan.png"></image>{{detailData.viewCount ? detailData.viewCount : 0}}人</view>
			</view>
			<view class="article-content">
				<view class="" v-html="detailData.content"></view>
			</view>
			<view class="article-content">
				<text>{{detailData.subTitle}}</text>
			</view>
			<view class="article-img" v-show="show" v-for="(it,index) in detailData.images">
				<image :src="baseUrl + it.url" style="width: 100%;" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="feed-list">
			<view class="feed-list-box">
				<view class="feed-list-box-left">
					<view><image src="../../static/image/default_logo.jpg"></image></view>
					<view>
						<view class="feed-list-box-name">{{detailData.comanyName}}</view>
						<!-- <view class="feed-list-box-add"><image src="../../static/kefu1.png"></image>成都市锦江区带永明路666号</view> -->
					</view>
				</view>
				<view><view class="feed-list-box-btn" @click="toCompanyInfo(companyId)">查看</view></view>
			</view>
			<view class="feed-list-content" @click="ArticleDetails">
				<view class="feed-list-content-title">{{detailData.subTitle}}</view>
				<view class="feed-list-content-flex">
					<view>{{ detailData.creatorTime}}</view>
					<view><image src="../../static/kan.png"></image><text style="color:#888D9C;">{{detailData.viewCount ? detailData.viewCount : 0}}人</text></view>
				</view>
			</view>
			<!-- <view class="feed-list-content">
				<view class="feed-list-content-title">急寻!!诚挚求购优质60吨火星苹果!</view>
				<view class="feed-list-content-flex">
					<view>2022-02-22 22:56</view>
					<view><image src="../../static/kan.png"></image><text style="color:#888D9C;">{{detailData.viewCount ? detailData.viewCount : 0}}人</text></view>
				</view>
			</view>
			<view class="feed-list-content">
				<view class="feed-list-content-title">急寻!!诚挚求购优质60吨火星苹果!</view>
				<view class="feed-list-content-flex">
					<view>2022-02-22 22:56</view>
					<view><image src="../../static/kan.png"></image><text style="color:#888D9C;">36人</text></view>
				</view>
			</view> -->
		</view>
		<!-- 底部 -->
		<view class="page-footer">
			<view class="footer-fn">
				<view class="list">
					<image src="../../static/detail2.png"></image>
					<text>收藏</text>
				</view>
			</view>
			<view class="footer-buy">
				<view class="buy-at" @click="callPhone(phoneNumber)">
					<image src="../../static/detail1.png"></image>
					<text>打电话</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request.js'
import utils from '../../service/utils';
import BASE_URL from '../../common/config.js'
	export default {
		data() {
			return {
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/banner_02.png'
					},
					{
						id: 2,
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						type: 'image',
						url: '/static/img/banner_04.png'
					},
					{
						id: 4,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 5,
						type: 'image',
						url: '/static/img/banner_01.png'
					}
				],
				isComment: false,
				isGoods: false,
				// 需求详情数据
				detailData:[],
				// 存放页面跳转传递的数据
				data:[],
				baseUrl:'https://www.dygxq-es.cn',
				// 公司Id:
				companyId:'',
				// 电话号码
				phoneNumber:'',
				show:false
			};
		},
		onLoad(options){
			let that = this
			// 获取页面跳转传递来的数据
			this.data = JSON.parse(options.data)
			console.log(that.data)
			that.getDemandDetail()
		},
		methods:{
			// 获取需求详情数据
			getDemandDetail(){
				let that = this
				let currentId = that.data.id
				console.log(currentId)
				that.API.getDemandDetail(currentId).then(res =>{
					console.log(res)
					let createTime = utils.formatTime(res.data.creatorTime)
					res.data.creatorTime = createTime
					that.detailData = res.data
					let detailContent = res.data.bodyContent.replace(/<img/g,"<img style='max-width:100%;height:auto;'")
					that.detailData.bodyContent = detailContent
					if(that.detailData.images.length > 0){
						console.log(this.show)
						this.show = true
						console.log(this.show)
					}
					this.companyId = that.detailData.comanyId
					console.log(that.detailData)
					// if(that.detailData.)
				}).then(data=>{
					request({
						url:`/api/permission/organize/${this.companyId}`,
						// url:`/api/permission/organize/bbf6effe-6354-11ed-b582-00163e2cec73`,
						method:'get',
						data:{}
					}).then(res=>{
						console.log('电话号码返回结果',res)
						if(res.code === 200){
							this.phoneNumber = res.data.fuzerendianhua
							console.log("电话号码", this.phoneNumber)
						}else{
							uni.showToast({
								icon:'error',
								title:"获取信息失败,请重试!"
							})
						}
					})
				})
			},
			// 拨打电话
			callPhone(phoneNumber){
				if (uni.getSystemInfoSync().platform == 'android' || uni.getSystemInfoSync().platform == 'ios') {
				    uni.showModal({
				        title: '温馨提示',
				        content: '确定要拨打电话吗?',
				        success: function (res) {
				            if (res.confirm) {
				                // 使用plus的API拨打电话
				                plus.device.dial(phoneNumber, true);
				            }
				        }
				    })
				} else {
				    // 非APP平台时,使用uniapp自带的API拨打电话
				    uni.makePhoneCall({
				        phoneNumber: phoneNumber,
				        success: function () {
				            console.log('拨打电话成功!');
				        },
				        fail: function () {
				            console.log('拨打电话失败!');
				        }
				    });
				}
			},
			
			// 跳转到公司详情
			toCompanyInfo(item){
				uni.navigateTo({
					url: `/pages/companyDetail/companyDetail?data=${JSON.stringify(item)}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'ArticleDetails.scss';
</style>