You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
344 lines
7.1 KiB
344 lines
7.1 KiB
1 year ago
|
<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">下载</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="footer">
|
||
|
|
<view class="shop">
|
||
|
|
<image class="icon" src="@/static/image/product/shop.png" mode="widthFix"></image>
|
||
|
|
<view>购物车</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="btns">
|
||
|
|
<view class="btn">加入购物车</view>
|
||
|
|
<view class="btn order">下单</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { detailsOfGoods } 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: []
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const { options } = pages[pages.length - 1]
|
||
|
|
this.id = options.id
|
||
|
|
this.getInfo()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取详情
|
||
|
|
getInfo() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
detailsOfGoods(this.id).then(res => {
|
||
|
|
this.form = res.orderDetails
|
||
|
|
uni.hideLoading()
|
||
|
|
}).catch(e => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// tab切换
|
||
|
|
tabChange(tab) {
|
||
|
|
this.curTab = tab.id
|
||
|
|
},
|
||
|
|
// 下载附件
|
||
|
|
download(item) {
|
||
|
|
this.$util.to(`../send/send?url=${item.filePath}©Writing=${item.fileName}`)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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 {
|
||
|
|
.icon {
|
||
|
|
width: 56rpx;
|
||
|
|
}
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.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>
|