tire_parts_shop_applets/pages/integralMall/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"
				@click="swiperclick" imgMode="aspectFit"></u-swiper>
		</view>
		<view class="contentBox" v-if="Number(form.inventory)>0">
			<view style="display: flex;align-items: center;">
				<view>
					<text
						style="font-size: 58rpx;color: red;margin-right: 20rpx;margin-left: 8rpx;">{{checkStatus == '通过'?Number(form.mallPrice) || 0:'***'}}<text style="font-size: 24rpx;margin-bottom: 8rpx;margin-left: 4rpx;">积分</text></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="contentBox" v-if="Number(form.inventory)==0" style="color:#909399;">
			<view style="display: flex;align-items: center;">
				<view>
					<text
						style="font-size: 58rpx;color:#909399;margin-right: 20rpx;margin-left: 8rpx;">{{checkStatus == '通过'?form.mallPrice || 0:'***'}}<text style="font-size: 24rpx;margin-bottom: 8rpx;margin-left: 4rpx;">积分</text></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: #909399;color: #fff;padding: 6rpx;border-radius: 6rpx;">
						今日达</view>
					<view v-else
						style="font-size: 16rpx;background-color: #909399;color: #fff;padding: 6rpx;border-radius: 6rpx;">
						次日达</view>
				</view>
			</view>
			<view>
				<text>{{form.cname}}</text>
			</view>
		</view>
		<view class="head" v-if="Number(form.inventory)>0">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<u-radio-group v-model="dataForm.type" placement="row" @change="groupChange">
							<u-radio activeColor="#FD4B09" v-if="dataForm.thisLocality"
								:label="`今日达(库存:${~~(dataForm.thisLocality.inventory) > 10?'充足':~~(dataForm.thisLocality.inventory)})`"
								:name="0"></u-radio>
							<u-radio activeColor="#FD4B09" v-if="dataForm.offsite"
								:label="`次日达(库存:${~~(dataForm.offsite.inventory) > 10?'充足':~~(dataForm.offsite.inventory)})`"
								:name="1"></u-radio>
						</u-radio-group>
					</template>
					<template slot="value">
						<view>
							<u-icon :name="inventoryFalse?'arrow-up':'arrow-down'"
								@click="inventoryFalsefun()"></u-icon>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<!-- <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) > 10?'充足':~~(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>
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false" v-if="inventoryFalse">
				<u-cell v-for="(item,index) in inventoryData" :key="index" titleStyle="color:#fd4b09;font-weight: 600;"
					:title="item.storageName"
					:value="Number(item.storeInventory) > 10?'充足':Number(item.storeInventory)"></u-cell>
			</u-cell-group>


		</view>
		<view class="head" v-if="Number(form.inventory)==0">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<u-cell :isLink="false" :border="false" center>
					<template slot="title">
						<u-radio-group v-model="dataForm.type" placement="row" @change="groupChange">
							<u-radio activeColor="#909399" v-if="dataForm.thisLocality"
								:label="`今日达(库存:${~~(dataForm.thisLocality.inventory) > 10?'充足':~~(dataForm.thisLocality.inventory)})`"
								:name="0"></u-radio>
							<u-radio activeColor="#909399" v-if="dataForm.offsite"
								:label="`次日达(库存:${~~(dataForm.offsite.inventory) > 10?'充足':~~(dataForm.offsite.inventory)})`"
								:name="1"></u-radio>
						</u-radio-group>
					</template>
					<template slot="value">
						<view>
							<u-icon :name="inventoryFalse?'arrow-up':'arrow-down'"
								@click="inventoryFalsefun()"></u-icon>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<!-- <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
							style="color: #909399;">库存：{{form.inventory?~~(form.inventory) > 10?'充足':~~(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>
			<u-cell-group title-bg-color="#909399" :border="false" v-if="inventoryFalse">
				<u-cell v-for="(item,index) in inventoryData" :key="index" titleStyle="color:#909399;font-weight: 600;"
					:title="item.storageName"
					:value="Number(item.storeInventory) > 10?'充足':Number(item.storeInventory)"></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>商品描述：{{form.detailsText?form.detailsText:'-'}}</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: env(safe-area-inset-bottom);">
			<view style="width: 100%;display: flex;font-size: 24rpx;">
				<view @click="shoppingCart"
					style="width: 50%;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: 50%;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: 50%;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>

		<!-- 提取去登录 -->
		<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: {
			// 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 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>