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="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="specVal"
			    :localdata="specRange"
				@change="specChange"
				:clear="false"
			></uni-data-select>
		</view>
		<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: '',
				specText: '',
				deviceNum: 1,
				specRange: [
					/* { text: '规格1-100', value: '100' },
					{ text: '规格1-200', value: '200' },
					{ text: '规格1-300', value: '300' },
					{ text: '规格1-400', value: '400' },
					{ text: '规格1-500', value: '500' },
					{ text: '规格1-600', value: '600' } */
				],
				companyId: '',
				status: ''
			}
		},
		methods: {
			clickParam () {
				console.log('参数');
			},
			specChange (e) {
				console.log(e, this.specRange);
				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
					}
				}
				this.devicePrice = '￥' + (e * this.deviceNum)
			},
			numChange (e) {
				console.log(e);
				this.devicePrice = '￥' + (e * this.specVal)
			},
			addCart () {
				if (this.specVal == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择规格！'
					})
				} else {
					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 = []
			// 获取机具详情
			uni.request({
				url: basePath + `/type/selectMaTypeTreeByLevel`,
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					typeId: params.id
				},
				success: (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) => {
							return {
								text: item['typeName'],
								value: item['leasePrice'],
								status: item['status']
							}
						})
					}
				}
			})
		}
	}
</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: 1vh auto;
		display: flex;
		justify-content: space-between;
	}
	.drop-menu, .select-num{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 6vh;
	}
	.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>