幼教产品B2B生态平台小程序端
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.

279 lines
6.5 KiB

12 months ago
<template>
<view class="wrap">
<view class="banner">
<image class="pic" :src="form.mall.coverDrawing" mode="widthFix"></image>
</view>
<view class="info">
<view class="line">
<view class="label">状态</view>
<view class="val">进行中</view>
</view>
<view class="line">
<view class="label">人数限制</view>
<view class="val">进行中</view>
</view>
<view class="line">
<view class="label">活动地点</view>
<view class="val">进行中</view>
</view>
<view class="line">
<view class="label">主办方</view>
<view class="val">进行中</view>
</view>
<view class="line">
<view class="label">已报名人员</view>
<view class="val">进行中</view>
</view>
</view>
<ul class="tab">
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
</ul>
<view v-if="!curTab" class="detail">
</view>
<view v-else class="list">
</view>
</view>
</template>
<script>
import { detailsOfGoods, addToShoppingCart, shoppingCartList, productCategoryList } from '@/apis/modules/product.js'
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 {
.pic {
width: 100%;
}
}
.info {
position: relative;
padding: 20rpx;
margin: -150rpx 30rpx 30rpx;
background-color: #fff;
border-radius: 8px;
.line {
display: flex;
align-items: center;
margin: 20rpx 0;
}
.label {
width: 180rpx;
font-size: 28rpx;
}
.val {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
}
.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;
}
</style>