office-tools-m/pages/trade/shoe-style/ShoeStyleView.vue

<template>
	<view class="padding">
		<uni-section title="款式信息" type="line">
			<!-- 		<uni-list>
				<uni-list-item link @click="ViewImage(data.pice)">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image img" :src="data.pice" mode="widthFix"></image>
							<image class="slot-image img" :src="data.foto" mode="widthFix"></image>
						</view>
					</template>
					
					<template v-slot:body>
						<text class="slot-box slot-text">
							<text style="display: block;">{{data.styleNum}}</text>
							<text style="display: block;font-size: 12px;color: #909399;">
								版本：{{data.version}}</text>
							<text style="display: block;font-size: 12px;color: #909399;">
								颜色：{{data.color? data.color: ''}} {{data.enColor? data.enColor: ''}}</text>
						</text>
					</template>
				</uni-list-item>
			</uni-list> -->
		<uni-grid :column="2" :highlight="true" :showBorder="false" :square="false" style="height: auto;">
				<uni-grid-item v-for="(item, index) in pics" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<img class="slot-image img" :src="item" mode="widthFix" @click="ViewImage(index)" />
					</view>
				</uni-grid-item>
			</uni-grid>
			<uni-list>
				<uni-list-item title="款号" :rightText="data.styleNum" />
				<uni-list-item title="颜色" :rightText="data.version + '-' +data.color" />
				<uni-list-item title="数量" :rightText="data.qty" />
				<uni-list-item title="尺码" :rightText="data.size" />
				<uni-list-item title="码段" :rightText="data.outsoleSegment" />
				<uni-list-item v-if="checkRole(['SalesManager','SalesMan'])" class="fob" title="FOB价" :rightText="data.fob" />
				<uni-list-item title="备注" :rightText="data.remark" />
			</uni-list>
		</uni-section>
		<view style="height: 30rpx;"></view>
		<uni-list>
			<uni-list-item title="面料" :rightText="data.upper" />
			<uni-list-item title="内里" :rightText="data.insole" />
			<uni-list-item title="面衬" :rightText="data.lining" />
			<uni-list-item title="楦头" :rightText="data.lastNumber" />
		</uni-list>
		<view style="height: 30rpx;"></view>
		<uni-list>
			<uni-list-item title="大底" :rightText="data.outsole" />
			<uni-list-item title="大底编号" :rightText="data.outsoleNumber" />
			<uni-list-item title="大底码段" :rightText="data.outsoleSegment" />
			<uni-list-item title="大底厂家" :rightText="data.outsoleFactory" />
			<uni-list-item title="日期" :rightText="formatDate(data.createTime)" />
		</uni-list>
		<view style="height: 30rpx;"></view>
		<uni-list  v-if="checkRole(['SalesManager'])">
			<uni-list-item class="outPrice" title="大底价格参考" :rightText="data.outsolePrice" />
			<uni-list-item class="outPrice" title="材料价格参考" :rightText="data.referPrice" />
		</uni-list>
<view style="height: 60px;"></view>
		<!-- 	<uni-section title="鞋底图片" type="line">
			<uni-grid :column="1" :highlight="true" :showBorder="false" :square="false" style="height: auto;">
				<uni-grid-item style="padding: 8px;">
					<image class="slot-image img" :src="data.foto" mode="widthFix" @click="ViewImage(1)"></image>
				</uni-grid-item>
			</uni-grid>
		</uni-section> -->

			<view v-if="checkRole(['shoeStyleMan'])" style="margin-top: 10px;text-align: center;">
			<button   style="position: fixed; bottom: 20px; right: 15px; left: 15px;padding: 8px 0;font-size: 14px;z-index: 999;" class="bottom" size="mini" type="primary" @click="onBackward">借出</button>
		</view>
	</view>
</template>

<script>
	import {
		getShoeStyle,
		listShoeStyle
	} from '@/api/trade/shoe-style.js'
	import {
		formatDate,
		formatDateMinute
	} from '@/utils/date.js'
	import {
		getToken,
		getTokens
	} from '@/utils/auth'
	import {
		showConfirm,
		toast
	} from '@/utils/common'
	import {
		checkPermi,
		checkRole
	} from '@/utils/permission.js'
	export default {
		data() {
			return {
				formatDate,
				getDataApi: getShoeStyle,
				checkPermi,
				checkRole,
				pics: [],
				data: {}
			}
		},
		// onLoad: function(option) {

		// },
		onShow(options) {
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length - 1];
			// 打印出当前页面中的 options
			var options = currentPage.options
			console.log(currentPage, 'currentPage.options')
			if (options.styleNum && options.version) {
				uni.setStorageSync('options', options)
			} else {
				options = uni.getStorageSync('options')
			}
			if (!getToken()) {
				uni.navigateTo({
					url: '/pages/login'
				})
				// this.$tab.reLaunch('/pages/login')
			}
			if (options.data) {
				const id = options.data
				this.getData(id)
			} else if (options.styleNum) {
				this.getData2(options)
			}
		},
		methods: {
			onBackward() {
				wx.navigateTo({
					url: '/pages/trade/shoe-style/outRep?styleNum='+this.data.styleNum+'&&version='+this.data.version
				})
			},
			ViewImage(idx) {
				const pics = [this.data.foto, this.data.pice]
				uni.previewImage({
					urls: pics,
					current: idx
				})
			},
			getData(id) {
				uni.showLoading({
					title: '加载中'
				})
				this.getDataApi(id).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code === 200) {
						this.pics = [res.data.foto, res.data.pice]
						this.data = res.data
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			getData2(item) {
				uni.showLoading({
					title: '加载中'
				})
				listShoeStyle(item).then(res => {
					uni.setStorageSync('options', '')
					if (res.rows && res.rows.length > 0) {
						this.pics = [];
						if (res.rows[0].foto) {
							this.pics.push(res.rows[0].foto)
						};
						if (res.rows[0].pice) {
							this.pics.push(res.rows[0].pice)
						};
						this.data = res.rows[0]
					} else {
						uni.showToast({
							icon: 'none',
							title: '没有当前信息'
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
		height: 100%;
		margin-right: 10px;
	}


	.f-text {
		line-height: 38px;
	}

	.ivu-form-item {
		margin-bottom: 1px;
	}

	.fob {
				background: #faf78ce8 !important;
	}
	.outPrice{
		background: #fdddc6e8 !important;
	}
</style>