tire_parts_shop_applets/pages/views/buyGoods/commodityDetails.vue

<template>
	<view style="padding-top: 0.01rpx;">
		<view style="width: 100%;margin: 0 auto;height: 800rpx;">
			<!-- <image v-for="(ite,ind) in form.filesList" :key="ind" v-if="ite.version === '0'" :src="ite.url" style="width: 100%;height: 100%;border-radius: 20rpx;"></image> -->
			<u-swiper :list="form.filesList" indicator indicatorMode="dot" :autoplay="false" height="800rpx"></u-swiper>
		</view>
		<view class="contentBox">
			<view style="display: flex;align-items: center;">
				<view>
					<text style="font-size: 58rpx;color: red;margin-right: 20rpx;">￥{{form.mallPrice || 0}}</text>
					<!-- <text style="font-size: 48rpx;text-decoration:line-through;">￥{{form.standardPrice}}</text> -->
				</view>
				<view style="display: flex;">
					<view v-if="form.billType == 0"
						style="font-size: 16rpx;background-color: #FD4B09;color: #fff;padding: 6rpx;border-radius: 6rpx;">
						今日达</view>
					<view v-else
						style="font-size: 16rpx;background-color: #5ac725;color: #fff;padding: 6rpx;border-radius: 6rpx;">
						次日达</view>
				</view>
			</view>
			<view>
				<text>{{form.cname}}</text>
			</view>
		</view>
		<view class="head">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<u-cell :isLink="false" :border="false" center>
					<template slot="value">
						<u-radio-group
						    v-model="dataForm.type"
						    placement="row"
						    @change="groupChange">
						    <u-radio activeColor="#FD4B09" v-if="dataForm.thisLocality" :label="`今日达(库存:${~~(dataForm.thisLocality.inventory) || 0})`" :name="0"></u-radio>
						    <u-radio activeColor="#FD4B09" v-if="dataForm.offsite" :label="`次日达(库存:${~~(dataForm.offsite.inventory) || 0})`" :name="1"></u-radio>
						  </u-radio-group>
					</template>
				</u-cell>
				<!-- <u-cell title="所属公司：" :isLink="true" :border="false" center
					@click="filterAll(['salesCompanyName','salesCompanyId'])">
					<template slot="value">
						<text>{{form.salesCompanyName}}</text>
					</template>
				</u-cell> -->
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<text>库存：{{form.inventory?~~(form.inventory):''}}</text>
					</template>
					<template slot="value">
						<u-number-box v-model="form.goodsNum" :min="1" :max="form.inventory"></u-number-box>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="head">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false" v-if="arrow">
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<text>规格型号：</text>
					</template>
					<template slot="value">
						<text>{{form.specificationAndModel||''}}</text>
					</template>
				</u-cell>
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<text>花纹：</text>
					</template>
					<template slot="value">
						<text>{{form.brandItem||''}}</text>
					</template>
				</u-cell>
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<text>产地：{{form.placeProduction||''}}</text>
					</template>
					<template slot="value">
						<text>防爆：{{form.explosionProof==1?"是":"否"}}</text>
					</template>
				</u-cell>
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<text>原厂：{{form.originalFactory==1?'是':'否'}}</text>
					</template>
					<template slot="value">
						<text>自修补：{{form.selfRecovery==1?'是':'否'}}</text>
					</template>
				</u-cell>
			</u-cell-group>
			<view style="margin: 0 auto;" @click="arrow = !arrow">
				<u-icon name="arrow-up" labelPos="top" size="28" v-if="arrow"></u-icon>
				<u-icon name="arrow-down" labelPos="top" size="28" v-else></u-icon>
			</view>
		</view>
		<u-divider text="商品详情"></u-divider>
		<view style="width: 100%;margin-bottom: 100rpx;">
			<view v-html="form.detailsText"></view>
		</view>
		<view style="width: 100%;position: fixed;bottom: 0;background-color: #fff;border-top: 1rpx solid #ccc;padding-bottom: 20rpx;">
			<view style="width: 100%;display: flex;font-size: 24rpx;">
				<view @click="shoppingCart"
					style="width: 25%;display: grid;justify-items: center;padding: 10rpx 0;border-right: 1rpx solid #ccc;">
					<u-icon name="shopping-cart"></u-icon>
					<view>购物车</view>
				</view>
				<view @click="placeAnOrder" v-if="form.inventory > 0"
					style="width: 75%;background-color: #fd4b09;display: grid;justify-items: center;">
					<u-icon name="checkmark" color="#fff"></u-icon>
					<view style="color: #fff;">加入购物车</view>
				</view>
				<view @click="soldOut" v-else
					style="width: 75%;background-color: #969696;display: grid;justify-items: center;">
					<u-icon name="close" color="#fff"></u-icon>
					<view style="color: #fff;">已售罄</view>
				</view>
			</view>
		</view>
		<u-picker :show="showWarehouse" :columns="columns" :keyName="keyName" @confirm="confirmWarehouse"
			@cancel="showWarehouse = false"></u-picker>
	</view>
</template>

<script>
	import {
		appDetail,
		addToCart,
		appModifyPrice
	} from '@/api/tabBar/home.js'
	export default {
		data() {
			return {
				checkboxValue:[],
				form: {
					shareList: []
				},
				arrow:false,
				dataList: [],
				screen: {},
				columns: [],
				keyName: '',
				showWarehouse: false,
				dataForm:{
					thisLocality:{},
					offsite:{}
				}
			}
		},
		onLoad(onLoad) {
			appDetail(onLoad).then(res => {
				this.dataForm = res.data
				if(res.data.type == 0){
					this.form = res.data.thisLocality
				}else{
					this.form = res.data.offsite
				}
				this.form.goodsNum = Number(this.form.goodsNum)
			})
		},
		methods: {
			soldOut() {
				uni.showToast({
					icon: "none",
					title: '商品已售罄',
					mask: true
				});
			},
			backToHome() {
				uni.$u.route({
					url: 'pages/tabBar/home',
					type: "switchTab"
				})
			},
			placeAnOrder() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				addToCart({
					...this.form,
					detailsText: ''
				}).then(res => {
					uni.showToast({
						title: "加入购物车成功",
						icon: "none",
						mask:true
					});
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			filterAll(screen) {
				this.screen = screen
				switch (screen[1]) {
					case "salesCompanyId":
						this.columns = [this.form.shareList]
						this.keyName = screen[1]
						this.showWarehouse = true
						break
				}
			},
			confirmWarehouse(e) {
				appModifyPrice({
					id: e.value[0].id
				}).then(res => {
					this.form.salesCompanyName = e.value[0].salesCompanyName
					this.form.salesCompanyId = e.value[0].salesCompanyId
					this.form.mallPrice = res.data.mallPrice
					this.form.inventory = res.data.inventory
					this.showWarehouse = false
				})
			},
			groupChange(val){
				console.log(val)
				if(val == 0){
					this.form = this.dataForm.thisLocality
				}else{
					this.form = this.dataForm.offsite
				}
			},
			shoppingCart() {
				uni.$u.route({
					url: 'pages/tabBar/shoppingCart',
					type: "switchTab"
				})
			}
		}
	}
</script>

<style scoped>
	/* page {
		background-color: #f2f2f2 !important;
	} */

	.head {
		width: calc(96% - 40rpx);
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	.contentBox {
		width: 96%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		/* box-shadow: 0 5rpx 14rpx 0 rgba(101, 176, 249, 0.42); */
		padding-top: 15rpx;
		padding-bottom: 10rpx;
	}

	.textBox {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		align-items: flex-end;
	}
</style>