tire_parts_shop_applets/pages/integralMall/buyGoods/commodityDetails.vue

<template>
	<view>
		<view style="width: 100%;height: 750rpx;">
			<image :src="form.filesList[0].url" mode="aspectFit" style="width: 100%;height: 750rpx;" @click='previewImage()'/>
		</view>
		<view style="background-color: #fff;padding: 43rpx 65rpx;margin-bottom: 20rpx;">
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;color: #E75F37;font-size: 40rpx;align-items: flex-end;">
					<view style="font-size: 26rpx;height: 40rpx;">
						￥
					</view>
					<view style="font-size: 40rpx;">
						{{ checkStatus == '通过' ? form.mallPrice|| 0 :'***'}}
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view v-if="dataForm.thisLocality" style="display: flex;margin-right: 20rpx;">
						<image v-if="Number(dataForm.thisLocality.inventory)" src="/static/images/tabBar/11.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(dataForm.thisLocality.inventory)==0" src="/static/images/tabBar/14.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							库存:{{ dataForm.thisLocality.inventory ? Number(dataForm.thisLocality.inventory) > 10 ? '充足' : dataForm.thisLocality.inventory : '' }}
						</view>
					</view>
					<view v-if="dataForm.offsite" style="display: flex;align-items: center;">
						<image v-if="Number(dataForm.offsite.inventory)" src="/static/images/tabBar/12.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(dataForm.offsite.inventory)==0" src="/static/images/tabBar/15.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							库存:{{ dataForm.offsite.inventory ? Number(dataForm.offsite.inventory) > 10 ? '充足' : dataForm.offsite.inventory : '' }}
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 38rpx;">
				<u--text :text="form.cname" size="26rpx" color='#797979' lines="2"></u--text>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 8rpx;align-items: center;">
				<view style="font-size: 24rpx;color: #C4C4C4;">
					库存:{{ form.inventory ? Number(form.inventory) > 10 ? '充足' : form.inventory : '' }}
				</view>
				<u-number-box v-model="form.goodsNum" :min="1" :max="form.inventory" buttonSize="53rpx" color="#414141"
					bgColor="#fff" iconStyle="color:#A4A4A4"></u-number-box>
			</view>
			<view style="display: flex;;margin-top: 8rpx;align-items:center;" v-for="(item, index) in inventoryData"
				:key="index">
				<view style="border-radius: 10rpx;border: 2rpx solid #F6744D;font-size: 26rpx;color: #E75F37;">
					{{item.storageName}}
				</view>
				<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 35rpx;">
					库存:{{Number(item.storeInventory) > 10 ? '充足' : Number(item.storeInventory)}}
				</view>
			</view>
		</view>
		<view style="background-color: #fff;padding:62rpx 62rpx 37rpx 62rpx;margin-bottom: 20rpx;">
			<view style="font-weight: 400;font-size: 26rpx;color: #797979;" v-show="arrow">
				<view style="display: flex;justify-content: space-between;">
					<view>
						规格型号:{{ form.specificationAndModel||'-' }}
					</view>
					<view>
						花纹:{{ form.brandItem || '-' }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 52rpx;">
					<view>
						产地:{{ form.placeProduction || '-' }}
					</view>
					<view>
						防爆:{{ form.explosionProof == 1 ? "是" : "否" }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 52rpx;">
					<view>
						原厂:{{ form.originalFactory == 1 ? '是' : '否' }}
					</view>
					<view>
						自修复:{{ form.selfRecovery == 1 ? '是' : '否' }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 52rpx;">
					<view>
						商品描述:{{ form.goodsDescription || '-' }}
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;margin-top: 49rpx;" @click="arrow = !arrow">
				<image v-if="arrow" src="/static/images/tabBar/10.png" mode="aspectFit" style="width: 33rpx;height: 26rpx;" />
				<image v-if="!arrow" src="/static/images/tabBar/10.png" mode="aspectFit" style="width: 33rpx;height: 26rpx;transform: rotate(180deg)" />
			</view>
		</view>
		<view style="background-color: #fff;padding:40rpx 62rpx;margin-bottom: 20rpx;">
			<view style="font-weight: 400;font-size: 30rpx;color: #F6744D;">
				商品详情
			</view>
		</view>
		<view style="width: 100%;background-color: #fff;" >
			<view v-html="form.detailsText"></view>
		</view>
		<view class="text-bottom">
			
		</view>
		<view style="width: 100%;position: fixed;bottom: 0;background-color: #fff;border-top:2rpx #F2F2F2 solid;"
			class="dynamic-bottom">
			<view style="display: flex;justify-content: space-around;align-items: center;">
				<view style="width: 71rpx;display: flex;flex-direction: column;align-items: center;"
					@click="shoppingCart">
					<view class="">
						<image src="/static/images/tabBar/16.png" mode="aspectFit"
							style="width: 31rpx;height: 28rpx;" />
					</view>
					<view style="font-size: 24rpx;color: #797979;">
						购物车
					</view>
				</view>
				<view style="width:360rpx;">
					<u-button v-if="form.inventory > 0" type="primary" @click="placeAnOrder" text="加入购物车"
						color="#E75F37" shape='circle'></u-button>
					<u-button v-if="form.inventory == 0" type="primary" @click="soldOut" text="已售罄" color="#c8c9cc"
						shape='circle'></u-button>
				</view>
			</view>

		</view>
		<!-- 提取去登录 -->
		<u-modal :show="adminShow" :showCancelButton="true" content='当前还未登录请先登录！！' @confirm="adminConfirm"
			@cancel="adminShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		appDetail,
		addToCart,
		appModifyPrice,
		stockDescList,
		stockDescListV1
	} from '@/api/tabBar/home.js'
	export default {
		data() {
			return {
				checkboxValue: [],
				form: {
					shareList: []
				},
				arrow: true,
				dataList: [],
				screen: {},
				columns: [],
				keyName: '',
				showWarehouse: false,
				dataForm: {
					thisLocality: {},
					offsite: {}
				},
				inventoryFalse: true,
				inventoryData: [],
				// 审核状态
				checkStatus: '',

				adminShow: false,
			}
		},
		onLoad(onLoad) {
			this.checkStatus = uni.getStorageSync('checkStatus');
			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)
				this.stockDescListfun()
			})
		},
		methods: {
			previewImage() {
				uni.previewImage({
					current: 0, // 当前显示图片的索引，默认是0
					urls: [this.form.filesList[0].url] // 需要预览的图片HTTP链接列表
				});
			},
			// admin确认
			adminConfirm() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			// 轮播图点击预览
			swiperclick(e) {
				let arr = this.form.filesList.map(item => {
					return item.url
				})
				uni.previewImage({
					count: arr[e],
					current: e,
					urls: arr
				})
			},
			inventoryFalsefun() {
				this.inventoryFalse = !this.inventoryFalse
				this.stockDescListfun()
			},
			// 库存查询
			stockDescListfun() {
				stockDescListV1({
					cname: this.form.cname,
					whether: 0
				}).then(res => {
					this.inventoryData = res.data.records
				})
			},
			soldOut() {
				uni.showToast({
					icon: "none",
					title: '商品已售罄',
					mask: true
				});
			},
			backToHome() {
				uni.$u.route({
					url: 'pages/tabBar/home',
					type: "switchTab"
				})
			},
			// 加入购物车
			placeAnOrder() {
				if (uni.getStorageSync('userInfo').tenant_id == '000000') {
					this.adminShow = true
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				addToCart({
					...this.form,
					whetherIntegral: '1',
					detailsText: ''
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: "加入购物车成功",
						icon: "none",
					});
				}).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.setStorageSync('tabKey', 2)
				uni.$u.route({
					url: 'pages/integralMall/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-number-box {
		border: 2rpx #E1E1E1 solid;
		border-radius: 8rpx;
	}

	::v-deep .u-number-box__minus {
		border-right: 2rpx #E1E1E1 solid;
	}

	::v-deep .u-number-box__plus {
		border-left: 2rpx #E1E1E1 solid;
	}

	::v-deep .u-button {
		height: 60rpx;
	}

	.dynamic-bottom {
		padding: 20rpx 20rpx 0 20rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}

	.text-bottom {
		height: calc(env(safe-area-inset-bottom) + 126rpx);
	}
	
</style>