tire_parts_shop_applets/pages/views/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 style="display: flex;margin-right: 10rpx;">
						<image v-if="Number(inventoryDataForm.storeInventory)" src="/static/images/tabBar/11.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(inventoryDataForm.storeInventory)==0" src="/static/images/tabBar/14.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							库存:{{ inventoryDataForm.storeInventory ? Number(inventoryDataForm.storeInventory) > 10 ? '充足' : inventoryDataForm.storeInventory : '' }}
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<image v-if="Number(inventoryDataForm.storeInventoryShare)" src="/static/images/tabBar/12.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(inventoryDataForm.storeInventoryShare)==0"
							src="/static/images/tabBar/15.png" mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							库存:{{ inventoryDataForm.storeInventoryShare ? Number(inventoryDataForm.storeInventoryShare) > 10 ? '充足' : inventoryDataForm.storeInventoryShare : '' }}
						</view>
					</view>

				</view>
			</view>
			<view class="retailPrice" v-if="form.suggestedRetailPrice">
				建议零售价:￥{{form.suggestedRetailPrice}}
			</view>
			<view style="margin-top: 14rpx;">
				<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="display: flex;align-items: center;">
					<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>
		<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,
		appDetailNew,
		addToCart,
		appModifyPrice,
		stockDescList,
		stockDescListV1,
		listShareV1,
		isProcurement
	} from '@/api/tabBar/homeNew.js'
	export default {
		data() {
			return {
				inventoryDataForm: {},
				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');
			if (uni.getStorageSync('whether_openShare') == 1) {
				appDetailNew(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()
				})
			} else {
				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() {
				listShareV1({
					code: uni.getStorageSync('whether_openShare') == 1 ? this.form.goodsCode : this.form.code,
					id: this.form.id,
					whether: 0
				}).then(res => {
					this.inventoryDataForm = res.data
				})
				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
				}
				if (this.inventoryDataForm.storeInventory == 0 && this.inventoryDataForm.storeInventoryShare > 0) {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '确实要购买次日达商品吗？',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								addToCart({
									..._this.form,
									whetherIntegral: '0',
									detailsText: ''
								}).then(res => {
									uni.hideLoading();
									uni.showToast({
										title: "加入购物车成功",
										icon: "none",
									});
								}).catch(err => {
									uni.hideLoading();
								})
							}
						}
					});
				}
				if (this.inventoryDataForm.storeInventory > 0) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					addToCart({
						...this.form,
						whetherIntegral: '0',
						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
				})
			},
			shoppingCart() {
				uni.$u.route({
					url: 'pages/tabBar/shoppingCart',
					type: "switchTab"
				})
			}
		}
	}
</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);
	}

	.retailPrice {
		display: flex;
		color: #909399;
		font-size: 22rpx;
		height: 28rpx;
	}
</style>