epc/pages/mobile/OEDetail.vue

<template>
	<view class="box">
		
			<!-- <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in oedata.image.epc">
					<view class="swiper-item ">
						<image class="swiper-itemIMg" :src="item.pic" mode="aspectFit"></image>
					</view>
				</swiper-item>
				
			</swiper> -->
		<view class="TOP">
			<image :src="oedata.image.epc.pic" mode="" class="picIMg"></image>
		</view>
		<!-- <view class="brandBox">
			<span>共{{oedata.epc_info.length}}个品牌，已选品牌:{{oedata.brand}}</span>
			<view class="switch" @click="switchBrand">切换</view>
		</view> -->
		<view >
			 <picker   @change="bindChange" :value="pkvalue" class="picker-view" :range="epc_info" :range-key="'brand'">
				<view class="brandBox">
					<span>共{{oedata.epc_info.length}}个品牌，已选品牌:{{brandName}}</span>
					<view class="switch" @click="switchBrand" >切换</view><!-- v-if="oedata.epc_info.length>1" -->
				</view>
			</picker>
			
		</view>
		<view class="line">
			<view class="lineLeft">结构位置</view>
			<view class="lineRight">{{oedata.image.epc.refernum}}</view>
		</view>
		<view class="line">
			<view class="lineLeft">配件OE</view>
			<view class="lineRight">{{partsnum}}</view>
		</view>
		<view class="line">
			<view class="lineLeft">配件名称</view>
			<view class="lineRight">{{oedata.caption}}</view>
		</view>
		<view class="line">
			<view class="lineLeft">4S店价：</view>
			<view class="lineRight">￥{{oedata.price}}</view>
		</view>
		<view class="line">
			<view class="lineLeft">备注</view>
			<view class="lineRight">{{oedata.remark}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components: {

		},

		data() {
			return {
				partsnum:'',
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				oedata:"",
				index:0,
				brand_id:'',
				epc_id:'',
				brandShow:false,
				pkvalue:0,
				brandName:'',
				epc_info:'',
			}
		},
		onLoad(opt) {
			console.log('opt+', opt);
			this.partsnum = opt.partnum;
			this.find()

		},
		methods: {
			switchBrand(){
				this.brandShow=true;
			},
			bindChange(e){
				console.log(e)
				this.brandName=this.epc_info[e.detail.value].brand
				this.epc_id=this.oedata.epc_info[e.detail.value].epc_id;
				this.brand_id=this.oedata.epc_info[e.detail.value].brand_id;
				this.find2()
			},
			
			// 配件查询
			find() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/parts/detail', {
					partsnum: this.partsnum,
					brand_id:this.brand_id,
					epc_id:this.epc_id
				}, 'GET').then(res => {
					uni.hideLoading();
                    if (res.data.number == 200 || res.data.number == 5212) {
                    	this.oedata=res.data.result
                    	this.brandName=res.data.result.brand;
					    this.epc_info=res.data.result.epc_info;
                    } else {
                    	uni.showToast({
                    		title: res.data.message,
                    		icon: 'none',
                    		duration: 3000
                    	});
                    }
					


				});
			},
			find2() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/parts/detail', {
					partsnum: this.partsnum,
					brand_id:this.brand_id,
					epc_id:this.epc_id
				}, 'GET').then(res => {
					uni.hideLoading();
			        if (res.data.number == 200 || res.data.number == 5212) {
			        	this.oedata=res.data.result
			        	
			        } else {
			        	uni.showToast({
			        		title: res.data.message,
			        		icon: 'none',
			        		duration: 3000
			        	});
			        }
					
			
			
				});
			},

		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			// this.page = 1
			// this.getItemData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.swiper-item{
		width: 750rpx;
		height: 500rpx;
	}
	.swiper{
		width: 750rpx;
		height: 500rpx;
	}
    .swiper-itemIMg{
		width: 750rpx;
		height: 500rpx;
	}
	.picIMg{
		width: 100%;
	}
	.brandBox{
		padding:20rpx 24px;
		color: #333333;
		border-bottom: 1rpx solid #eeeeee;
		font-size: 28rpx;
	}
	.line{
		padding:20rpx 24px;
		color: #333333;
		border-bottom: 1rpx solid #eeeeee;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}
	.brandBox{
		display: flex;
        justify-content: space-between;
	}
	.lineLeft{
		width: 200rpx;
	}
	.switch{
		    color: #3F90F7;
			padding-left: 20rpx;
	}
	.lineRight{
		width: 500rpx;
		
	}
</style>