1.0yangche/pages/packageOne/service/classify/brand_detail/brand_detail.vue

<template>
	<view class="wrap">
		<!-- 头部 -->
		<view class="header">
			<view class="top_img">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/user_background.png"></image>
			</view>
			<view class="brand_com clear">
				<image class="brand_logo" :src="url + allData.imgLogo"></image>
				<view class="middle">
					<view class="brand_title">{{allData.name}}</view>
					<view style="width:100%;overflow:hidden;">
						<view class="brand_com_item" v-for="item,index in allData.afford" :key="index">
							<view class="iconfont right"></view>
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌分店 -->
		<view class="brand_sub">
			<view class="brand_sub_title">
			    <view class="shu_line"></view>
			    品牌分店
			</view>
			<view class="brand_sub_list">
			    <view class="brand_sub_list_item" v-for="item,index in allData.otherStore" :key="index">
			        <image :src="url + item.logo" class="item_logo"></image>
			        <view class="middle">
						<view class="brand_title">{{item.name}}</view>
						<view style="width:100%;overflow:hidden;">
							<view class="brand_sub_list_item_item" v-for="item,index in item.mainBusiness" :key="index">{{item}}</view>
						</view>
			        </view>
			        <view class="distance">{{item.distance}}</view>
			    </view>
			</view>
			<view class="list_more" @tap="toOther">
			    查看全部分店
			    <view class="iconfont shuang_you"></view>
			</view>
		</view>
		<!-- 品牌介绍 -->
		<view class="brand_content">
			<view class="brand_sub_title1">
			    <view class="shu_line shuline1"></view>
			    品牌介绍
			</view>
			<!-- 关于品牌 -->
			<view class="about_brand">
				<view class="about_brand_top">
				    <image src="https://wx.fujinyangche.com/nvrnetwork/images/about_brand.png" class="about_brand_top_logo"></image>
				    <view class="about_brand_title">关于品牌</view>
				</view>
				<view class="about_brand_bottom">
				    <view class="about_brand_list_item clear">
				        <view class="content_lf">成立时间</view>
				        <view class="content_rh">{{allData.aboutBrand.setupTime}}</view>
				    </view>
				    <view class="about_brand_list_item clear">
				        <view class="content_lf">员工人数</view>
				        <view class="content_rh">{{allData.aboutBrand.people}}</view>
				    </view>
				    <view class="about_brand_list_item clear">
				        <view class="content_lf">门店数量</view>
				        <view class="content_rh">{{allData.aboutBrand.number}}</view>
				    </view>
				    <view class="about_brand_list_item clear">
				        <view class="content_lf">门店规模</view>
				        <view class="content_rh">{{allData.aboutBrand.scale}}</view>
				    </view>
				</view>
			</view>
		</view>
		<!-- 品牌故事 -->
		<view class="brand_story">
			<view class="about_brand_top">
			    <image src="https://wx.fujinyangche.com/nvrnetwork/images/gushi.png" class="about_brand_top_logo"></image>
			    <view class="about_brand_title">品牌故事</view>
			</view>
			<view class="brand_story_bottom">
			    <view class="brand_story_bottom_text"><view v-html="allData.store"></view></view>
			</view>
		</view>
		<!-- 品牌大事记 -->
		<view class="brand_big">
		    <view class="about_brand_top">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/dashiji.png" class="about_brand_top_logo"></image>
				<view class="about_brand_title">品牌大事记</view>
		    </view>
		    <view class="brand_big_bottom">
		        <view class="brand_big_bottom_item clear" v-for="item,index in allData.bigVersion" :key="index">
					<view class="radius"></view>
					<view class="brand_big_bottom_item_lf">{{item.year}}</view>
					<view class="brand_big_bottom_item_rh">{{item.bigVersion}}</view>
		        </view>
		        <!-- 竖线 -->
		        <view class="brand_big_line"></view>
		    </view>
		</view>
		<!-- 资质/授权 -->
		<view class="aptitude">
		    <view class="about_brand_top">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/zizhi.png" class="about_brand_top_logo"></image>
				<view class="about_brand_title">资质/授权</view>
		    </view>
		    <view class="aptitude_bottom">
		        <image v-for="item,index in allData.imgAuth" :key="index" :src="url + item.imgAuth" class="aptitude_bottom_img"></image>
		    </view>
		</view>
		<!-- 品牌荣誉 -->
		<view class="aptitude">
		    <view class="about_brand_top">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/rongyu.png" class="about_brand_top_logo"></image>
				<view class="about_brand_title">品牌荣誉</view>
		    </view>
		    <view class="aptitude_bottom">
		        <image v-for="item,index in allData.imgHonor" :key="index" :src="url + item.imgHonor" class="aptitude_bottom_img"></image>
		    </view>
		</view>
		<!-- 品牌故事 -->
		<view class="brand_story">
		    <view class="about_brand_top">
				<image src="https://wx.fujinyangche.com/nvrnetwork/images/gushi.png" class="about_brand_top_logo"></image>
				<view class="about_brand_title">服务理念</view>
		    </view>
		    <view class="brand_story_bottom">
				<view class="brand_story_bottom_text" v-html="allData.aim"></view>
		    </view>
		</view>
		<!-- 服务环境 -->
		<view class="fuwu">
		    <view class="brand_sub_title">
				<view class="shu_line"></view>
				服务环境
		    </view>
		    <view class="fuwu_content">
				<scroll-view scroll-x style="width:100%;white-space: nowrap; display: flex">
					<view class="fuwu_item" v-for="item,index in allData.imgEnv" :key="index">
						<image :src="url + item.imgEnv"></image>
						<view class="fuwu_item_bottom">服务环境</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer">
		  <view class="submit" @tap="toIndex">返回首页</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../../api.js";
	export default {
		data() {
			return {
				url:app.globalData.url,
				brandId:'',//品牌id
				storeId:'',//商家id
				allData:null,//页面数据
			}
		},
		onLoad(options) {
			// console.log(options);
			this.brandId = options.brandid;
			this.storeId =  options.storeid;
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token,
					id:this.brandId,//品牌id
					storeId: this.storeId,//商家id
				}
				api.getShopBrand(data).then((res)=>{
					// console.log(res);
					this.allData = res.data.data;
					console.log(this.allData)
				})
			},
			//查看全部分店
			toOther(){
				uni.navigateTo({
					url:'../other_shop/other_shop?storeid=' + this.storeId + '&brandid=' + this.brandId + '&status=1'
				})
			},
			//返回首页
			toIndex(){
				uni.reLaunch({
					url:"../../serviceView/serviceView"
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display:block;
		clear: both;
	}
	page{
	  width:100%;
	  height:100%;
	  background-color: #F7F7F7;
	}
	.header{
	  width:100%;
	  height:262rpx;
	  overflow: hidden;
	  position: relative;
	}
	.top_img{
	  width:100%;
	  height:166rpx;
	  overflow: hidden;
	}
	.top_img image{
	  width:100%;
	}
	.brand_com{
	  width:690rpx;
	  height:192rpx;
	  padding:42rpx 0 42rpx 30rpx;
	  box-sizing: border-box;
	  background-color: #ffffff;
	  position: absolute;
	  bottom:0;
	  left:30rpx;
	  border-radius: 6rpx;
	}
	.brand_logo{
	  display: block;
	  width:108rpx;
	  height:108rpx;
	  float:left;
	  /* border:2rpx solid #FFD0A7;
	  border-radius: 50%;
	  box-sizing: border-box; */
	}
	.middle{
	  float:left;
	  margin-left: 16rpx;
	  overflow: hidden;
	}
	.brand_title{
	  font-size: 30rpx;
	  color:#2A2A2A;
	  line-height: 36rpx;
	  font-weight: bold;
	  margin-top:12rpx;
	}
	.brand_com_item{
	  display: inline-block;
	  font-size: 22rpx;
	  color:#666666;
	  margin:16rpx 58rpx 0 0;
	}
	.brand_com_item:last-child{
	  margin-right: 0
	}
	.right{
	  display: inline-block;
	  margin-right: 4rpx;
	  font-size: 24rpx;
	  color:#E77817;
	}
	.brand_sub{
	  width:100%;
	  overflow: hidden;
	  margin-top:30rpx;
	  background-color: #ffffff;
	}
	.brand_sub_title{
	  font-size: 32rpx;
	  padding-left: 16rpx;
	  color:#2A2A2A;
	  position: relative;
	  margin:22rpx 0 0 30rpx;
	  font-weight: bold;
	}
	.shu_line{
	  width:6rpx;
	  height:30rpx;
	  background-color: #E77817;
	  position: absolute;
	  top:8rpx;
	  left:0;
	}
	.brand_sub_list_item{
	  width:100%;
	  height:186rpx;
	  padding:40rpx 30rpx;
	  border-bottom:1px solid #F2F2F2;
	  box-sizing: border-box;
	}
	.item_logo{
	  display: block;
	  width: 108rpx;
	  height:108rpx;
	  float:left;
	}
	.brand_sub_list_item_item{
	  font-size: 22rpx;
	  color:#E77817;
	  height:34rpx;
	  padding:0 16rpx;
	  background-color:rgba(231, 120, 23, 0.06);
	  text-align: center;
	  line-height: 34rpx;
	  float:left;
	  border-radius: 4rpx;
	  margin:16rpx 20rpx 0 0;
	}
	.brand_sub_list_item_item:last-child{
	  margin-right: 0;
	}
	.distance{
	  font-size: 24rpx;
	  color:#999999;
	  float:right;
	  margin-top:66rpx;
	}
	.list_more{
	  height:104rpx;
	  line-height: 104rpx;
	  text-align: center;
	  color:#E77817;
	  font-size: 24rpx;
	}
	.shuang_you{
	  display: inline-block;
	  font-size: 24rpx;
	  color:#E77817;
	  margin-left: 6rpx;
	}
	.brand_content{
	  width:100%;
	  overflow: hidden;
	  background-color: #ffffff;
	  margin-top:20rpx;
	}
	.brand_sub_title1{
	  font-size: 32rpx;
	  height:106rpx;
	  line-height: 106rpx;
	  border-bottom:1px solid #f2f2f2;
	  padding-left: 46rpx;
	  color: #2A2A2A;
	  position: relative;
	  font-weight: bold;
	}
	.shuline1{
	  top:38rpx;
	  left:30rpx;
	}
	.about_brand,.brand_story,.brand_big,.aptitude{
	  width:100%;
	  overflow: hidden;
	  background: #ffffff;
	  border-bottom:1px solid #f2f2f2;
	}
	.about_brand_top{
	  margin-top:30rpx;
	}
	.about_brand_top_logo{
	  display: inline-block;
	  width:36rpx;
	  height:40rpx;
	  vertical-align: middle;
	  margin:0 14rpx 0 30rpx;
	}
	.about_brand_title{
	  display: inline-block;
	  font-size: 30rpx;
	  color:#222222;
	  vertical-align: middle;
	}
	.about_brand_bottom,.brand_story_bottom,.aptitude_bottom{
	  width:calc(100% - 158rpx);
	  margin:30rpx auto 0;
	  padding-bottom:20rpx;
	}
	.about_brand_list_item{
	  margin-bottom:20rpx;
	}
	.content_lf{
	  font-size: 26rpx;
	  color:#666666;
	  float:left;
	}
	.content_rh{
	  float: right;
	  color:#999999;
	  font-size: 26rpx;
	}
	.brand_story_bottom image{
	  display: block;
	  width:100%;
	  height:162rpx;
	  margin-bottom:20rpx; 
	}
	.brand_story_bottom_text{
	  font-size: 26rpx;
	  color:#333333;
	  line-height: 44rpx;
	}
	.brand_big_bottom{
	  width: calc(100% - 158rpx);
	  margin: 44rpx auto 0;
	  position: relative;
	}
	.brand_big_bottom_item{
	  margin-bottom: 54rpx;
	  position: relative;
	  display: flex;
	}
	.brand_big_bottom_item:last-child{
	  margin-bottom:0;
	}
	.brand_big_bottom_item_lf{
	  font-size: 28rpx;
	  color:#E77817;
	  line-height:40rpx;
	  width:120rpx;
	}
	.brand_big_bottom_item_rh{
	  font-size: 24rpx;
	  color:#666666;
	  line-height: 40rpx;
	  word-break: break-all;
	}
	.brand_big_line{
	  width:4rpx;
	  height:340rpx;
	  background:rgba(250,225,203,1);
	  border-radius:4rpx;
	  opacity:0.27;
	  position: absolute;
	  top:-50rpx;
	  left:-34rpx;
	}
	.radius{
	  width:12rpx;
	  height:12rpx;
	  background-color:#E77817;
	  border-radius: 50%;
	  position: absolute;
	  left:-37rpx;
	  top:12rpx;
	  z-index: 100;
	}
	.brand_big{
	  padding-bottom:40rpx;
	}
	.aptitude_bottom_img{
	  display: block;
	  width:190rpx;
	  height:138rpx;
	  margin-right: 8rpx;
	  float:left;
	}
	.aptitude_bottom_img:last-child{
	  margin-right: 0;
	}
	.aptitude_bottom_img:first-child{
	  margin-left: 6rpx;
	}
	.aptitude{
	  padding-bottom: 40rpx;
	}
	.fuwu{
	  width:100%;
	  overflow: hidden;
	  margin-top:20rpx;
	  padding-bottom:100rpx;
	  background-color: #ffffff;
	}
	.fuwu_content{
	  width:100%;
	  padding:34rpx 0 40rpx 30rpx;
	  box-sizing: border-box;
	}
	.fuwu_item{
	  width:250rpx;
	  height:150rpx;
	  border-radius:6rpx;
	  position: relative;
	  display: inline-block;
	  margin-right: 10rpx;
	  overflow: hidden;
	}
	.fuwu_item image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.fuwu_item_bottom{
	  width:100%;
	  text-indent: 10rpx;
	  height:36rpx;
	  background:rgba(0,0,0,0.5);
	  border-radius:0px 0px 6rpx 6rpx;
	  color:#ffffff;
	  line-height: 36rpx;
	  font-size: 22rpx;
	  position: absolute;
	  bottom:0;
	  left:0;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:100;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  line-height: 80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
	.to_index{
	  width:calc(100% - 284rpx);
	  height:100%;
	  line-height: 100rpx;
	  text-align: center;
	  float:left;
	}
	.collect{
	  font-size: 40rpx;
	  color:#222222;
	}
	.ruzhu{
	  width:284rpx;
	  height:72rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  color:#ffffff;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 30rpx;
	  float:right;
	  margin-top:14rpx;
	}
</style>