xusfood_client/brand/branddetails.vue

<template>
	<view class="pages">
		<u-navbar
			title="品牌详情"
			:placeholder="true"
			:autoBack="false"
			@leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<u-loading-page :loading="loadingPage" bgColor="#f1f1f1"></u-loading-page>
		<view class="page-wrap">
			<u--image :showLoading="true" :src="details.faceImg" width="100%" height="480rpx" radius="8rpx" bgColor="#fff"></u--image>
			<view class="base-info u-flex u-row-between">
				<view class="left u-flex">
					<u-avatar :src="details.logo" size="145rpx"></u-avatar>
					<view class="text">
						<view class="name u-line-1">{{details.name}}</view>
						<view class="typeName"> <text class="type">{{details.typeName}}</text> </view>
						<view class="businessTime">营业时间：{{details.businessTime}}</view>
					</view>
				</view>
				<view class="right u-flex u-row-center" @click="makePhoneCall">
					<u-icon :customStyle="{'margin-right': '3rpx'}" name="phone" color="#fff" size="34rpx"></u-icon>
					拨打
				</view>
			</view>
			<view class="remark">
				<view class="title">品牌简介</view>
				<view class="content">
					<u-parse :content="details.brandRemark"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				id:'',
				loadingPage:true,
				details:{}
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.id = page.id;
			this.getDetails(this.id);
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			getDetails(id){
				this.$u.api.brandInfo({id:id}).then(res=>{
					this.loadingPage = false;
					// console.log('res',res.data);
					this.details = res.data;
				}).catch(err=>{
					console.log('getDetails',err.data);
				})
			},
			makePhoneCall(){
				if(!this.details.contactTel){
					uni.showToast({
						title:'电话号码为空',
						icon:"none"
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.details.contactTel,
					success() {
						console.log('success');
					},
					fail() {
						console.log('fail');
					}
				});
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.base-info{
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 4rpx;
	.left{
		flex: 1;
		.text{
			margin-left: 20rpx;
			font-size: 22rpx;
			color: #999999;
			line-height: 30rpx;
			.name{
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.typeName{
				margin-bottom: 20rpx;
				.type{
					background: rgba(0,164,71,0.1);
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #00A447;
					padding: 8rpx 16rpx;
					margin-left: 0;
				}
			}
		}
	}
	
	.right{
		width: 164rpx;
		height: 64rpx;
		background: linear-gradient(180deg, #00DC84 0%, #00A447 100%);
		border-radius: 32rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
}
.remark{
	padding: 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 4rpx;
	.title{
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		margin-bottom: 10rpx;
	}
	.content{
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
		line-height: 44rpx;
	}
}
</style>