|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<view class="detail">
|
|
|
|
|
<ul class="tabs">
|
|
|
|
|
<li :class="{active: curTab === 0}" @click="tabChange(0)">主页</li>
|
|
|
|
|
<li :class="{active: curTab === 1, disabled: !form.interfaceDiagram}" @click="tabChange(1)">商品</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="!curTab" class="detail">
|
|
|
|
|
<view class="title">公司简介</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="list">
|
|
|
|
|
<!-- <view class="item">
|
|
|
|
|
<image class="pic" src="@/static/image/info-bg.jpg"></image>
|
|
|
|
|
<view class="texts">
|
|
|
|
|
<view class="name">测试标题</view>
|
|
|
|
|
<view class="price">￥12.8</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<image class="pic" src="@/static/image/info-bg.jpg"></image>
|
|
|
|
|
<view class="texts">
|
|
|
|
|
<view class="name">测试标题</view>
|
|
|
|
|
<view class="price">￥12.8</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<image class="pic" src="@/static/image/info-bg.jpg"></image>
|
|
|
|
|
<view class="texts">
|
|
|
|
|
<view class="name">测试标题</view>
|
|
|
|
|
<view class="price">￥12.8</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<image class="pic" src="@/static/image/info-bg.jpg"></image>
|
|
|
|
|
<view class="texts">
|
|
|
|
|
<view class="name">测试标题</view>
|
|
|
|
|
<view class="price">￥12.8</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
id: '',
|
|
|
|
|
curTab: 0,
|
|
|
|
|
tabs: [
|
|
|
|
|
{
|
|
|
|
|
name: '详情介绍',
|
|
|
|
|
id: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '界面图',
|
|
|
|
|
id: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '参数',
|
|
|
|
|
id: 2
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
form: {
|
|
|
|
|
classificationIds: [],
|
|
|
|
|
interfaceDiagram: [],
|
|
|
|
|
mall: {
|
|
|
|
|
coverDrawing: ''
|
|
|
|
|
},
|
|
|
|
|
goodsRes: {},
|
|
|
|
|
mallAnnex: []
|
|
|
|
|
},
|
|
|
|
|
shopCartTotal: 0,
|
|
|
|
|
types: [],
|
|
|
|
|
dotsStyles: {
|
|
|
|
|
backgroundColor: 'rgba(83, 200, 249,0.3)',
|
|
|
|
|
border: '1px rgba(83, 200, 249,0.3) solid',
|
|
|
|
|
color: '#fff',
|
|
|
|
|
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
|
|
|
|
|
selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
|
|
|
|
|
},
|
|
|
|
|
mpStyle: {
|
|
|
|
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
|
|
|
|
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
const pages = getCurrentPages()
|
|
|
|
|
const { options } = pages[pages.length - 1]
|
|
|
|
|
this.id = options.id
|
|
|
|
|
this.getInfo()
|
|
|
|
|
this.getShopCart()
|
|
|
|
|
this.getTypes()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取详情
|
|
|
|
|
getInfo() {
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
title: '加载中'
|
|
|
|
|
})
|
|
|
|
|
detailsOfGoods(this.id).then(res => {
|
|
|
|
|
const e = res.orderDetails
|
|
|
|
|
e.mall.productIntroduction = this.$util.removeTag(e.mall.productIntroduction)
|
|
|
|
|
// e.mall.detailedIntroduction = this.$util.removeTag(e.mall.detailedIntroduction)
|
|
|
|
|
this.form = e
|
|
|
|
|
const pics = this.form.mall.interfaceDiagram
|
|
|
|
|
if (pics) {
|
|
|
|
|
this.form.interfaceDiagram = pics.split(',')
|
|
|
|
|
// this.tabs.push({
|
|
|
|
|
// name: '界面图',
|
|
|
|
|
// id: 1
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
// this.form.mallAnnex && this.form.mallAnnex.length && this.tabs.push({
|
|
|
|
|
// name: '参数',
|
|
|
|
|
// id: 2
|
|
|
|
|
// })
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取购物车数量
|
|
|
|
|
getShopCart() {
|
|
|
|
|
shoppingCartList({
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 1000,
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
this.shopCartTotal = data.total
|
|
|
|
|
}).catch(e => {})
|
|
|
|
|
},
|
|
|
|
|
// 产品分类
|
|
|
|
|
getTypes() {
|
|
|
|
|
productCategoryList().then(res => {
|
|
|
|
|
this.types = res.classificationList
|
|
|
|
|
}).catch(e => {})
|
|
|
|
|
},
|
|
|
|
|
// tab切换
|
|
|
|
|
tabChange(id) {
|
|
|
|
|
this.curTab = id
|
|
|
|
|
},
|
|
|
|
|
// 下载全部
|
|
|
|
|
downloadAll() {
|
|
|
|
|
const fileName = []
|
|
|
|
|
const urls = []
|
|
|
|
|
this.form.mallAnnex.forEach(e => {
|
|
|
|
|
fileName.push(e.fileName)
|
|
|
|
|
urls.push(e.filePath)
|
|
|
|
|
})
|
|
|
|
|
uni.setStorageSync('files', {
|
|
|
|
|
copyWriting: this.form.mall.productName,
|
|
|
|
|
fileName,
|
|
|
|
|
urls
|
|
|
|
|
})
|
|
|
|
|
this.$util.to(`/team/send/send`)
|
|
|
|
|
},
|
|
|
|
|
// 下载附件
|
|
|
|
|
download(item) {
|
|
|
|
|
uni.setStorageSync('files', {
|
|
|
|
|
copyWriting: this.form.mall.productName,
|
|
|
|
|
fileName: [item.fileName],
|
|
|
|
|
urls: [item.filePath]
|
|
|
|
|
})
|
|
|
|
|
this.$util.to(`/team/send/send`)
|
|
|
|
|
},
|
|
|
|
|
// 加入购物车
|
|
|
|
|
addShop() {
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
title: '加载中'
|
|
|
|
|
})
|
|
|
|
|
addToShoppingCart({
|
|
|
|
|
mallId: this.id
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.$util.sucMsg('加购成功')
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
this.getShopCart()
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 下单
|
|
|
|
|
order() {
|
|
|
|
|
const { mall } = this.form
|
|
|
|
|
const classificationId = this.form.classificationIds[0]
|
|
|
|
|
const authority = this.$util.getOrderType(classificationId)
|
|
|
|
|
// 把该产品添加至缓存
|
|
|
|
|
uni.setStorageSync('courses', [{
|
|
|
|
|
dataOrCourseId: mall.associatedProduct, // id
|
|
|
|
|
mallId: mall.mallId,
|
|
|
|
|
productName: mall.productName, // 名称
|
|
|
|
|
periodOfUse: '', // 使用期限
|
|
|
|
|
startTime: this.$util.formatDate(new Date(), 'yyyy-MM-dd'), // 开始
|
|
|
|
|
endTime: '', // 终止
|
|
|
|
|
remainingPeriod: '', // 剩余期限
|
|
|
|
|
marketValue: '', // 市场价
|
|
|
|
|
marketPrice: mall.marketUnitPrice, // 市场单价
|
|
|
|
|
finalPrice: 0, // 成交价
|
|
|
|
|
finalValue: 0, // 成交单价（数据产品特有）
|
|
|
|
|
discountRate: '0%', // 折扣率
|
|
|
|
|
accountNum: 1, // 账号数
|
|
|
|
|
totalAmount: '', // 总价
|
|
|
|
|
isEnable: 0, // 启用否：1启用，0禁用
|
|
|
|
|
ship: 0, // 发货否（0未发货，1已发货，默认不发货）
|
|
|
|
|
authority, // 区分权限
|
|
|
|
|
options: 2,
|
|
|
|
|
miniProgramPictureAddress: mall.appletIcon || '', // 图标
|
|
|
|
|
settlementPrice: 0, // 结算价
|
|
|
|
|
settlementPriceUnit: 0, // 结算单价
|
|
|
|
|
serviceFee: 0 // 平台服务费（前端计算后展示，不入库）
|
|
|
|
|
}])
|
|
|
|
|
this.$util.to(`../orderDetail/orderDetail?shopCart=1`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</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;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
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: center;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
padding: 0 10rpx;
|
|
|
|
|
.item {
|
|
|
|
|
width: calc((100% - 40rpx) / 2);
|
|
|
|
|
margin: 20rpx 10rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.pic {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 200rpx;
|
|
|
|
|
}
|
|
|
|
|
.texts {
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.name {
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.price {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #ff0047;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
