gubersail-shop-app/pages/goods/details.vue

<template>
	<view>
		<view style="width: 100%;height: 750rpx;">
			<image :src="form.url" mode="aspectFit" style="width: 100%;height: 750rpx;" />
		</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: #03803B;font-size: 40rpx;align-items: flex-end;">
					<view style="font-size: 26rpx;height: 40rpx;">
						￥
					</view>
					<view style="font-size: 40rpx;">
						{{ checkStatus == '审核通过' ? form.price|| 0 :'***'}}
					</view>
				</view>
			<!-- 	<view style="display: flex;align-items: center;">
					<view style="display: flex;align-items: center;margin-right: 10rpx;">
						<image v-if="Number(form.balanceQuantity)" src="/static/images/goods/11.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(form.balanceQuantity)==0" src="/static/images/goods/14.png"
							 mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							:{{ form.balanceQuantity ? Number(form.balanceQuantity) > 10 ? '充足' : form.balanceQuantity : '' }}
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<image v-if="Number(form.total)" src="/static/images/goods/12.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<image v-if="Number(form.total)==0" src="/static/images/goods/15.png"
							mode="aspectFit" style="width: 102rpx;height: 36rpx;" />
						<view style="font-size: 24rpx;color: #C4C4C4;margin-left: 10rpx;">
							:{{ form.total ? Number(form.total) > 10 ? '充足' : form.total : '' }}
						</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.balanceQuantity ? Number(form.balanceQuantity) > 10 ? '充足' : Number(form.balanceQuantity) : '' }}
				</view>
				<u-number-box v-model="form.goodsNum" :min="1" :max="form.balanceQuantity" 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: #03803B;">
						{{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.typeNo||'-' }}
					</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/goods/10.png" mode="aspectFit"
					style="width: 33rpx;height: 26rpx;" />
				<image v-if="!arrow" src="/static/images/goods/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: 80rpx;display: flex;flex-direction: column;align-items: center;"
					@click="shoppingCart">
					<view class="">
						<image src="/static/images/goods/16.png" mode="aspectFit" style="width: 31rpx;height: 28rpx;" />
					</view>
					<view style="font-size: 24rpx;color: #797979;">
						购物车
					</view>
				</view>
				<view style="width:360rpx;">
					<debounce-button style="border-radius: 100rpx;" v-if="form.balanceQuantity > 0" @click="placeAnOrder"
						text="加入购物车"  bgColor='#03803B'></debounce-button>
					<debounce-button v-if="form.balanceQuantity == 0&&form.total==0" type="primary" @click="soldOut" text="已售罄"
						color="#c8c9cc" shape='circle'></debounce-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		appDetail,
		appDetailNew,
		addToCart,
		appModifyPrice,
		listShareV1,
		getGoodsDetailStockByCloud,
		appDetailCloud,
	} from '@/api/home/index.js'
	import {
		isProcurement
	} from '@/api/goods/index.js'
	export default {
		data() {
			return {
				inventoryDataForm: {},
				checkboxValue: [],
				form: {
				},
				arrow: true,
				dataList: [],
				screen: {},
				columns: [],
				keyName: '',
				showWarehouse: false,
				dataForm: {
					thisLocality: {},
					offsite: {}
				},
				inventoryFalse: true,
				inventoryData: [],
				// 审核状态
				checkStatus: '',
			}
		},
		onLoad(onLoad) {
			this.checkStatus = uni.getStorageSync('checkStatus');
			this.loadList(onLoad)
		},
		methods: {
			loadList(onLoad) {
				appDetail(onLoad).then(res => {
					this.dataForm = res.data
					res.data.goodsNum = 1
					this.form = res.data
				})
			},

			loadByCloud(id) {
				getGoodsDetailStockByCloud(id).then(res => {
					this.inventoryData = res.data.weChatDetailStockVos
					this.inventoryDataForm.storeInventory = res.data.storeInventory
					this.inventoryDataForm.storeInventoryShare = res.data.storeInventoryShare
				})
			},
			// previewImage() {
			// 	uni.previewImage({
			// 		current: 0, // 当前显示图片的索引，默认是0
			// 		urls: [this.form.url] // 需要预览的图片HTTP链接列表
			// 	});
			// },
			// admin确认
			adminConfirm() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: '/pages/login/index'
				})
			},
			soldOut() {
				uni.showToast({
					icon: "none",
					title: '商品已售罄',
					mask: true
				});
			},
			backToHome() {
				uni.$u.route({
					url: 'pages/home/index',
					type: "switchTab"
				})
			},
			// 加入购物车
			placeAnOrder() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				addToCart({
					...this.form,
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: "加入购物车成功",
						icon: "none",
					});
				}).catch(err => {
					uni.hideLoading();
				})
			},
			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.balanceQuantity = res.data.balanceQuantity
					this.showWarehouse = false
				})
			},
			shoppingCart() {
				uni.reLaunch({
					url: '/pages/shoppingCart/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) + 30rpx);
	}

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

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