epc/pages/mobile/modelThree.vue

<template>
	<view class="content">
		<view class="top">
			<image class="topIMg" :src=groupData[tabIndex-1].image_url mode="">
			</image>
			<image @click="previewImage(groupData[tabIndex-1].image_url)"
				src="../../static/img/icon_fangda@2x.png" mode="" class="enlarge"></image>
		</view>
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="mainBox">
			<view class="mainTop">
				<view class="arrowBox">
					<image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="arrow"></image>
					<view class="title" @click="upGroup">上一组</view>
				</view>
				<view class="page">{{tabIndex}}/{{groupData.length}}</view>
				<view class="arrowBox">
					<view class="title" @click="downGroup">下一组</view>
					<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" class="arrow"></image>
				</view>
			</view>

			<view class="commentBox" v-for="(item,index) in itemList" :key="index">
				<view class="line">
					<view class="wei">{{item.refernum}}</view>
					<view class="yong">{{item.qty}}</view>
				</view>
				<view class="name">{{item.description}}</view>
				<view class="comment">{{item.remark}}</view>
				<view class="forLine">
					<view @click="goOemDetail()" class="code">{{item.extened}}</view>
					<view class="price">4S店价：
						<span class="orangePrice">¥ {{item.price}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				vin: '',
				epc_id: '',
				token: '',
				param: '',
				access_time: '',
				groupData: [],
				itemList: [],
				imgUrl:'',
				tabIndex:1,
				son_vin: '',
				son_epc_id: '',
				son_token: '',
				son_param: '',
				son_access_time: '',
			}
		},
		onLoad(opt) {
			// console.log('opt++',opt);
			this.vin = opt.vin;
			this.epc_id = opt.epc_id;
			this.token = opt.token;
			this.param = opt.param;
			this.access_time = opt.access_time;
			
			this.getGroupData();
		},
		methods: {
			upGroup() {
				this.tabIndex -= 1;
				if (this.tabIndex <= 0) {
					this.tabIndex = 1
				}
				
				this.son_param = this.groupData[this.tabIndex-1].param;
				this.son_token = this.groupData[this.tabIndex-1].token;
				this.son_access_time = this.groupData[this.tabIndex-1].access_time;
				
				this.getItemData();
			},
			downGroup(){
				this.tabIndex += 1;
				if (this.tabIndex >= this.groupData.length) {
					this.tabIndex = this.groupData.length
				}
				
				this.son_param = this.groupData[this.tabIndex-1].param;
				this.son_token = this.groupData[this.tabIndex-1].token;
				this.son_access_time = this.groupData[this.tabIndex-1].access_time;
				
				this.getItemData();
			},
			// 车型子组列表
			getGroupData() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				this.$http('/advancedEpc/getSubgroupPc', {
					vin: this.vin,
					epc_id: this.epc_id,
					token: this.token,
					param: this.param,
					access_time: this.access_time,
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.groupData = res.data.result.list;
					
					this.son_epc_id = res.data.result.epc_id;
					this.son_param = this.groupData[0].param;
					this.son_token = this.groupData[0].token;
					this.son_access_time = res.data.result.access_time;
					
					that.getItemData();
				});
			},
			// 子组配件列表
			getItemData() {
				
				uni.showLoading({
					title: '加载中'
				});
				this.$http('/advancedEpc/getPartsPc', {
					vin: this.son_vin,
					epc_id: this.son_epc_id,
					token: this.son_token,
					param: this.son_param,
					access_time: this.son_access_time,
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.itemList = res.data.result.list.rows;
					// this.imgUrl = res.data.result.list.image_info[0].pic_url;
					console.log('itemList++',this.itemList);
				});
			},
			goOemDetail(id) {
				uni.navigateTo({
					url: 'OemDetail?id=' + id
				})
			},
			previewImage(imgUrl) {
				var arr = [];
				var img = imgUrl
				arr.push(img)

				// 预览图片
				uni.previewImage({
					urls: arr,
					current: img,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.topIMg {
		width: 100%;
		display: block;
	}

	.top {
		position: relative;
	}

	.enlarge {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		right: 30rpx;
		bottom: 34rpx;
	}

	.mainBox {
		width: 100vw;
	}

	.mainTop {
		padding: 28rpx 25rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.arrowBox {
		display: flex;
		align-items: center;
	}

	.arrow {
		width: 25rpx;
		height: 24rpx;
	}

	.title {
		font-size: 24rpx;
		color: #3F90F7;
	}

	.page {
		font-size: 28rpx;
		color: #333333;
	}

	.commentBox {

		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.line {
		display: flex;
		align-items: center;
	}

	.wei {
		color: #F19D01;
		font-size: 22rpx;
		background: #FDF7EB;
		border-radius: 4px;
		padding: 0 8rpx;
	}

	.yong {
		color: #666666;
		font-size: 22rpx;
		margin-left: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 16rpx;
		padding-bottom: 10rpx;
	}

	.comment {
		color: #999999;
		font-size: 24rpx;
		padding-bottom: 14rpx;
	}

	.forLine {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.code {
		color: #3F90F7;
		font-size: 24rpx;
	}

	.price {
		color: #999999;
		font-size: 24rpx;
	}

	.orangePrice {
		color: #FF4F00;
		font-weight: bold;
	}
</style>