FE_CRM/order/productDetail/productDetail.vue

<template>
	<view class="wrap">
		<view class="banner-wrap bg-wh">
			<view class="pic-wrap">
				<image class="pic" :src="form.mall.coverDrawing" mode="widthFix"></image>
				<view class="pro-title">{{ form.mall.productName }}</view>
			</view>
			<view class="fields">
				<view class="field">
					<image class="icon" src="@/static/image/product/1.png"></image>
					市场建议价：{{ form.mall.marketUnitPrice }}元/年
				</view>
				<view class="field">
					<image class="icon" src="@/static/image/product/2.png"></image>
					产品类型：{{ form.goodsRes.typeName }}
				</view>
			</view>
		</view>
		
		<view class="detail">
			<ul class="tabs">
				<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
			</ul>
			<view class="title">
				<image class="icon" src="@/static/image/product/3.png"></image>
				产品详情
			</view>
			<view class="texts">
				<view class="line">
					<text class="name">产品简介：</text>
					<view class="val" v-html="form.mall.productIntroduction"></view>
				</view>
				<view class="line">
					<text class="name">适用专业：</text>
					<text class="val">{{ form.goodsRes.professionalName }}</text>
				</view>
				<view v-if="form.mall.courseHours" class="line">
					<text class="name">预计课时：</text>
					<text class="val">{{ form.mall.courseHours }}</text>
				</view>
				<view v-if="form.mall.matchingCourse" class="line">
					<text class="name">匹配课程：</text>
					<text class="val">{{ form.mall.matchingCourse }}</text>
				</view>
				<view v-if="form.mall.applicationScenario" class="line">
					<text class="name">适用场景：</text>
					<text class="val">{{ form.mall.applicationScenario }}</text>
				</view>
				<view class="line">
					<text class="name">详情介绍：</text>
					<view class="val" v-html="form.mall.detailedIntroduction"></view>
				</view>
			</view>
		</view>
		
		<view v-if="form.mall.interfaceDiagram" class="detail">
			<view class="title mb">
				<image class="icon" src="@/static/image/product/4.png"></image>
				产品界面图
			</view>
			<template>
				<image v-for="(pic, i) in form.mall.interfaceDiagram" :key="i" class="pic" mode="widthFix" :src="pic"></image>
			</template>
		</view>
		
		<view v-if="form.mallAnnex && form.mallAnnex.length" class="detail">
			<view class="title-wrap">
				<view class="title">
					<image class="icon" src="@/static/image/product/5.png"></image>
					产品参数
				</view>
				<view class="download">
					下载全部
					<image class="icon" src="@/static/image/product/6.png"></image>
				</view>
			</view>
			
			<view v-if="form.mallAnnex" class="files">
				<view v-for="(file, i) in form.mallAnnex" :key="i" class="file" @click="download(file)">
					<view class="text">
						<image class="icon" src="@/static/image/product/ppt.png"></image>
						{{ file.fileName }}
					</view>
					<view class="download" @click="download(file)">下载</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="shop" @click="$util.to('../shopCart/shopCart')">
				<uni-badge size="small" :text="shopCartTotal" absolute="topRight" type="error">
					<image class="icon" src="@/static/image/product/shop.png" mode="widthFix"></image>
				</uni-badge>
				<view>购物车</view>
			</view>
			
			<view class="btns">
				<view class="btn" @click="addShop">加入购物车</view>
				<view class="btn order">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { detailsOfGoods, addToShoppingCart, shoppingCartList } from '@/apis/modules/product.js'
	export default {
		data() {
			return {
				id: '',
				curTab: 0,
				tabs: [
					{
						name: '详情介绍',
						id: 0
					},
					{
						name: '界面图',
						id: 1
					},
					{
						name: '参数',
						id: 2
					},
				],
				form: {
					classificationIds: [],
					mall: {
					  coverDrawing: ''
					},
					goodsRes: {},
					mallAnnex: []
				},
				shopCartTotal: 0
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.getInfo()
			this.getShopCart()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				detailsOfGoods(this.id).then(res => {
					this.form = res.orderDetails
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 购物车列表
			getShopCart() {
				shoppingCartList({
					pageNum: 1,
					pageSize: 1000,
				}).then(({ data }) => {
					this.shopCartTotal = data.total
				}).catch(e => {})
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
			},
			// 下载附件
			download(item) {
				this.$util.to(`/team/send/send?url=${item.filePath}&copyWriting=${item.fileName}`)
			},
			// 加入购物车
			addShop() {
				uni.showLoading({
					title: '加载中'
				})
				addToShoppingCart({
					mallId: this.id
				}).then(res => {
					this.$util.sucMsg('加购成功')
					uni.hideLoading()
					this.getShopCart()
				}).catch(e => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding-bottom: 140rpx;
}
.banner-wrap {
	width: 100%;
	border-radius: 0px 0px 20px 20px;
	.pic-wrap {
		padding: 20rpx 32rpx;
		border-bottom: 1px solid #E2E2E2;
	}
	.pic {
		width: 100%;
	}
	.pro-title {
		margin-top: 22rpx;
		font-size: 30rpx;
		color: #333;
	}
	.fields {
		padding: 26rpx 32rpx;
	}
	.field {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		&:first-child {
			margin-bottom: 22rpx;
		}
		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx ;
		}
	}
}
.tabs {
	display: flex;
	justify-content: space-around;
	margin-bottom: 32rpx;
	li {
		width: 33.33%;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
	}
	.active {
		color: #007EFF;
		&:after {
			content: '';
			display: block;
			width: 40rpx;
			height: 8rpx;
			margin: 18rpx auto 0;
			border-radius: 4px;
			background-color: #007EFF;
		}
	}
}
.detail {
	padding: 34rpx 32rpx;
	margin: 16rpx 0;
	border-radius: 20px;
	background-color: #fff;
	.title-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.download {
			display: inline-flex;
			align-items: center;
			padding: 7rpx 16rpx;
			font-size: 24rpx;
			color: #007EFF;
			text-align: center;
			background-color: #F2F8FF;
			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 4rpx;
			}
		}
	}
	.title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #333 ;
		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 11rpx;
		}
		&.mb {
			margin-bottom: 32rpx;
		}
	}
	.texts {
		margin-top: 32rpx;
	}
	.line {
		display: flex;
		margin-bottom: 18rpx;
		line-height: 40rpx;
		text {
			font-size: 26rpx;
			color: #333;
		}
		.name {
			font-weight: 600;
			white-space: nowrap;
		}
	}
	.pic {
		width: 100%;
	}
	.files {
		margin-top: 34rpx;
		.file {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			.text {
				display: inline-flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
			}
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 14rpx;
			}
			.download {
				font-size: 26rpx;
				color: #007EFF;
			}
		}
	}
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 24rpx 32rpx 24rpx 73rpx;
	background-color: #fff;
	box-sizing: border-box;
	.shop {
		text-align: center;
		font-size: 24rpx;
		color: #333;
		.icon {
			width: 56rpx;
		}
	}
	.btns {
		display: inline-flex;
		.btn {
			width: 229rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			background-color: #E5EEF7;
			border-radius: 100px 0px 0px 100px;
		}
		.order {
			color: #fff;
			background-color: #007EFF;
			border-radius: 0px 100px 100px 0px;
		}
	}
}
</style>