SmartStorage/pages/deviceDetail/deviceDetail.vue

<template>
	<view>
		<view class="swiper-area">
			<swiper style="overflow: hidden;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#fff" indicator-active-color="#198AFB">
				<swiper-item v-for="(pics, index) in bgList" :key="index">
					<image :src="baseUrl + pics" mode="" style="width: 100%; height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<h4 class="device-name">{{ deviceName }}</h4>
		<!-- <h4 class="device-price">{{ devicePrice }}</h4> -->
		<h5 class="tit">规格型号</h5>
		<view class="drop-menu">
			<uni-data-select
			    v-model="specVals"
			    :localdata="specRange"
				@change="specChange"
				:clear="false"
			></uni-data-select>
		</view>
		<h5 class="tit">当前型号剩余库存：{{ leftNum }}</h5>
		<h5 class="tit">预约数量</h5>
		<view class="select-num">
			<uni-number-box v-model="deviceNum" @change="numChange" :min="1"/>
		</view>
		<h5 class="tit">
			<span>参数</span>
			<uni-icons @click="clickParam" type="right" size="32"></uni-icons>
		</h5>
		<view class="operation">
			<view 
				class="add-cart"
				@click="addCart"
			>
				加入预约车
			</view>
		</view>
	</view>
</template>

<script>
import { basePath } from '../../public';
	export default {
		data() {
			return {
				deviceData: [],
				deviceName: '',
				devicePrice: '请选择规格',
				typeId: '',
				bgList: [
					
				],
				specVal: '',
				specVals: '',
				specText: '',
				deviceNum: 1,
				specRange: [
					
				],
				leftNum: '',
				companyId: '',
				status: '',
				baseUrl: 'http://112.29.103.165:21624/dev-api/system'
			}
		},
		methods: {
			clickParam () {
				console.log('参数');
			},
			specChange (e) {
				// for (let i = 0; i < this.specRange.length; i++) {
				// 	if (this.specRange[i].value == e) {
				// 		this.specText = this.specRange[i].text
				// 		this.status = this.specRange[i].status
				// 	}
				// }
				
				console.log(this.specRange[e]);
				
				this.specText = this.specRange[e].text
				this.status = this.specRange[e].status
				this.typeId = this.specRange[e].typeId
				this.specVal = this.specRange[e].leasePrice
				this.leftNum = this.specRange[e].leftNum
				this.devicePrice = '￥' + (Math.round((e * this.deviceNum) * 100)/100)
			},
			numChange (e) {
				console.log(e);
				this.devicePrice = '￥' + (Math.round((e * Number(this.specVal || 0)) * 100)/100)
			},
			addCart () {
				let that = this
				if (this.specVal == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择规格！'
					})
				} else {
					console.log(this.typeId, this.deviceNum, this.companyId, this.leftNum);
					// 向购物车内添加商品
					if (this.deviceNum > this.leftNum) {
						uni.showToast({
							icon: 'none',
							title: '当前领料数量大于库存数量！'
						})
					} else {
						that.$api.fetchMaterial.addItemToCart({
							typeId: this.typeId,
							bookNum: this.deviceNum,
							companyId: this.companyId
						}).then(res => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '加入预约车成功！',
									success: () => {
										uni.navigateTo({
											url: '/pages/orderCart/orderCart'
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '添加预约车失败，请稍后再试！'
								})
							}
						}).catch(err => {
							console.log(err);
						})
					}
					/* let localGoodList = uni.getStorageSync('goodList')
					localGoodList.push({
						pic: this.bgList[0],
						name: this.deviceName,
						typeId: this.typeId,
						price: this.specVal,
						spec: this.specText,
						num: this.deviceNum,
						companyId: this.companyId,
						status: this.status,
						checked: false
					})
					uni.setStorageSync('goodList', localGoodList)
					uni.showToast({
						icon: 'none',
						title: '加入预约车成功！',
						success: () => {
							uni.navigateTo({
								url: '/pages/orderCart/orderCart'
							})
						}
					}) */
				}
			}
		},
		onLoad(params) {
			let that = this
			console.log(params);
			that.deviceName = params.name
			that.typeId = params.id
			that.bgList = []
			// 获取机具详情
			that.$api.fetchMaterial.getDeviceDetail({
				typeId: params.id
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.companyId = res.data.data[0].companyId
					for (let i = 0; i < res.data.data.length; i++) {
						that.bgList.push(res.data.data[i].photoUrl)
					}
					that.specRange = res.data.data.map((item,index) => {
						return {
							text: item['typeName'],
							value: index,
							status: item['status'],
							typeId: item['typeId'],
							leasePrice: item['leasePrice'],
							leftNum: item['num']
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style lang="scss">
	.swiper-area{
		width: 100%;
	}
	.device-name, .device-price{
		width: 90%;
		margin: 2vh auto;
	}
	.device-price{
		color: red;
		margin-bottom: 6vh;
	}
	.tit{
		width: 90%;
		font-weight: normal;
		font-size: 14px;
		margin: 2vh auto;
		display: flex;
		justify-content: space-between;
	}
	.drop-menu, .select-num{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 2vh;
	}
	.operation{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		border-top: 2px solid #ebf4fc;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.add-cart{
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 40rpx;
			background: linear-gradient(#ff473a, #ffab23);
			font-size: 14px;
			color: #fff;
		}
	}
</style>