epc/pages/mobile/vinDetail.vue

<template>
	<view class="content">
		<view class="top">
			
			<!-- 轮播图 -->
			<swiper class="swiper" :circular="true" :indicator-dots="true" indicator-active-color="#FF4F00"
				v-if="bannerArr.length>0">
				<swiper-item v-for="(item,index) in bannerArr">
				
					<image :src="item.pic_url" mode="" class="swpImg"></image>
					
					<image @click="previewImage(item.pic_url)" src="../../static/img/icon_fangda@2x.png" mode="" class="enlarge">
					</image>
					
				</swiper-item>
				
			</swiper>
			
		</view>
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="mainBox">
			<view class="mainTop">
				<view v-if="tabIndex > 1" class="arrowBox">
					<image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="arrow"></image>
					<view class="title" @click="upGroup">上一组</view>
				</view>
				<view v-else class="arrowBox">
					<image src="../../static/img/icon_arrow_jindian_l@2x.png" mode="" class="arrow"></image>
					<view class="title" style="color: #999999;">上一组</view>
				</view>
				<view class="page">{{tabIndex}}/{{groupData.length}}</view>
				<view v-if="tabIndex < groupData.length" class="arrowBox">
					<view class="title" @click="downGroup">下一组</view>
					<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" class="arrow"></image>
				</view>
				<view v-else class="arrowBox">
					<view class="title" style="color: #999999;">下一组</view>
					<image src="../../static/img/icon_arrow_jindian_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(item)" class="code">{{item.extened.join()}}</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: [],
				bannerArr: [],
				tabIndex: 1,
				page: 1,
				total_page: 1
			}
		},
		onLoad(opt) {
			// console.log('opt++',opt);
			this.vin = opt.vin;
			this.tabIndex = Number( opt.tabIndex)+1;
			this.groupData = uni.getStorageSync('childrenList');
			this.token = opt.token;
			this.param = opt.param;
			this.access_time = opt.access_time;
			this.getItemData();


		},
		methods: {
			upGroup() {
				this.tabIndex -= 1;
				if (this.tabIndex <= 0) {
					this.tabIndex = 1
				}

				this.param = this.groupData[this.tabIndex - 1].param;
				this.token = this.groupData[this.tabIndex - 1].token;


				this.getItemData();
			},
			downGroup() {
				this.tabIndex += 1;
				if (this.tabIndex >= this.groupData.length) {
					this.tabIndex = this.groupData.length
				}

				this.param = this.groupData[this.tabIndex - 1].param;
				this.token = this.groupData[this.tabIndex - 1].token;


				this.getItemData();
			},
			
			// 子组配件列表
			getItemData() {

				uni.showLoading({
					title: '加载中'
				});
				this.$http('/advancedEpc/getParts', {
					vin: this.vin,
					token: this.token,
					param: this.param,
					access_time: this.access_time,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.epc_id = res.data.result.epc_id;
					this.itemList = res.data.result.list.rows;
					this.bannerArr = res.data.result.list.image_info;
					console.log('itemList++', this.itemList);
				});
			},
			
			goOemDetail(item) {
				uni.navigateTo({
					url: 'OemDetail?epc_id=' + this.epc_id + '&partsnum=' + item.partnum + '&weizhi=' + item
						.refernum + '&yongliang=' + item.qty
				})
			},
			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);
						}
					}
				});
			}
		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			// this.page = 1
			// this.getItemData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page <= this.total_page) {
				this.page++;

				this.getPeijianData()
			}
		}
	}
</script>

<style scoped>
	.comment{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.quanImg {
		
		width: 100vw;
		height: 352rpx;
	}
	
	.swiper,
	.swiper-item,
	.swpImg {
		width: 100%;
		height: 352rpx;
		
	}
	.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: 24rpx;
		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>