增收赋能

This commit is contained in:
唐明明
2023-07-07 18:57:50 +08:00
parent 7bacaf7cc4
commit 5eedc7a019
7 changed files with 463 additions and 41 deletions

View File

@@ -13,7 +13,7 @@
"type" : "uniCloud" "type" : "uniCloud"
}, },
{ {
"playground" : "standard", "playground" : "custom",
"type" : "uni-app:app-android" "type" : "uni-app:app-android"
} }
] ]

View File

@@ -10,8 +10,8 @@ import router from '../router'
// 基础配置 // 基础配置
const config = { const config = {
apiUrl : 'https://douhuo.douhuofalv.com/api/', // apiUrl : 'https://douhuo.douhuofalv.com/api/',
// apiUrl : 'https://api.douhuotest.douhuofalv.com/api/', //测试环境 apiUrl : 'https://api.douhuotest.douhuofalv.com/api/', //测试环境
timeout : 60000 timeout : 60000
} }

View File

@@ -0,0 +1,48 @@
/**
* Web唐明明
* 匆匆数载恍如梦,岁月迢迢华发增。
* 碌碌无为枉半生,一朝惊醒万事空。
* moduleName: 增收赋能
*/
import { request } from '../index'
// 增收赋能列表
const lists = () =>{
return request({
url : "empower/index"
})
}
// 增收赋能详情
const info = id => {
return request({
url : "empower/" + id + "/show"
})
}
// 下单前置
const buyInit = id => {
return request({
url : "empower/" + id + "/buy/init",
method : "POST"
})
}
// 下单购买
const buy = data => {
return request({
url : "empower/buy/order",
method : "POST",
data
})
}
export {
lists,
info,
buyInit,
buy
}

View File

@@ -777,6 +777,24 @@
"navigationBarBackgroundColor": "#FFF" "navigationBarBackgroundColor": "#FFF"
} }
}, {
"path": "pages/empower/info",
"name": "EmpowerInfo",
"auth": true,
"style": {
"navigationBarTitleText": "增收赋能",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#FFF"
}
}, {
"path": "pages/empower/buy",
"name": "EmpowerBuy",
"auth": true,
"style": {
"navigationBarTitleText": "报名",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#FFF"
}
}], }],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

227
pages/empower/buy.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<view class="content">
<!-- 课程信息 -->
<view class="info">
<image class="info-cover" :src="empower.cover" mode="aspectFill"></image>
<view class="info-text">
<view class="info-title">{{empower.title}}</view>
<view class="info-subtitle">{{empower.sub_title}}</view>
<view class="info-price"><text></text>{{empower.price}}</view>
</view>
</view>
<!-- 报名信息 -->
<view class="user-title">报名人</view>
<view class="user-block" v-for="(item, index) in formData" :key="index">
<view class="user-block-flex">报名信息{{index + 1}}<view class="user-block-remove" v-if="formData.length > 1" @click="onRemoveUser(index)">删除</view></view>
<view class="user-block-input">
<label>真实姓名</label>
<input placeholder="输入姓名" v-model="item.name" maxlength="10" />
</view>
<view class="user-block-input">
<label>手机号码</label>
<input placeholder="输入手机号码" v-model="item.mobile" maxlength="11" type="number" />
</view>
<view class="user-block-input" v-if="semesters.length > 0">
<label>选择学期</label>
<picker mode="selector" :value="item.index" :range="semesters" range-key="title" @change="onChange($event, index, item)">
<view class="user-block-picker">{{semesters[item.index].title}}<uni-icons class="user-block-icon" type="bottom" size="20" color="#999"></uni-icons></view>
</picker>
</view>
</view>
<view class="user-add" @click="onAddUser"><uni-icons type="plus" size="24" color="#446EFE"></uni-icons> 添加报名人</view>
<view class="footer">
<view class="footer-text">
<view class="footer-text-price"><text></text>{{allPrice}}</view>
<view class="footer-text-subtitle">共计{{formData.length}}人报名</view>
</view>
<button class="footer-btn" @click="onSubmit">提交</button>
</view>
</view>
</template>
<script>
// ($event) => item.index = $event.detail.value
import { buyInit, buy } from '@/apis/interfaces/empower.js'
export default {
data() {
return {
semesters: [],
formData : [{
name : '',
mobile : '',
index : 0
}],
empower : {},
allPrice : '0.00'
};
},
onShow() {
buyInit(this.$Route.query.id).then(res => {
let { empower, semesters } = res;
this.empower = empower
this.semesters = semesters
this.getTotalPrice()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
// 计算价格
getTotalPrice(){
let totalPrice = 0
this.formData.map(val => {
totalPrice += Number(this.semesters[val.index].price)
})
this.allPrice = totalPrice.toFixed(2)
},
// 选择学期
onChange(e, index, item){
item.index = e.detail.value
this.$set(this.formData, index, item)
this.getTotalPrice()
},
// 删除用户数据
onRemoveUser(index){
this.formData.splice(index,1)
this.getTotalPrice()
},
// 添加新用户
onAddUser(){
this.formData.push({
name : '',
mobile : '',
index : 0
})
this.getTotalPrice()
},
// 提交报名
onSubmit(){
let submitData = this.formData.map(val => {
return {
name : val.name,
mobile : val.mobile,
semester_id : this.semesters[val.index].id
}
})
buy({
empower_id: this.$Route.query.id,
data: submitData
}).then(res => {
let { order_type, order_id } = res;
this.$Router.replace({
name : 'Pay',
params : {
paytype : 'synthesize',
orderId : order_id,
orderType : order_type.replace(/\\/g, '-')
},
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
.content{ background: $window-color; padding: 30rpx 30rpx 210rpx; }
// 报名人信息
.user-title{ padding-top: 30rpx; font-size: 30rpx; line-height: 40rpx; color: gray; }
.user-block{
background: white;
margin-top: 30rpx;
border-radius: 20rpx;
padding: 20rpx 30rpx;
&-flex{
display: flex;
justify-content: space-between;
height: 90rpx;
align-items: center;
font-size: 30rpx;
color: gray;
@extend .border-solid;
}
&-remove{ color: $main-color; line-height: 90rpx; }
&-input{
display: flex;
justify-content: space-between;
height: 90rpx;
align-items: center;
flex-wrap: wrap;
label{ font-size: 32rpx; width: 200rpx; }
picker,
input{ width: calc(100% - 200rpx); font-size: 32rpx; }
.user-block-picker{
padding-right: 50rpx;
box-sizing: border-box;
position: relative;
@extend .nowrap;
.user-block-icon{ position: absolute; right: 0; }
}
}
}
.user-add{ text-align: center; background: white; border-radius: 20rpx; margin-top: 30rpx; display: flex; align-items: center; height: 120rpx; justify-content: center; color: $main-color; font-size: 32rpx; }
// 报名课程信息
.info{
display: flex;
background: white;
padding: 30rpx;
border-radius: 20rpx;
flex-wrap: wrap;
justify-content: space-between;
&-cover{ width: 180rpx; height: 180rpx; border-radius: 10rpx; }
&-text{ width: calc(100% - 210rpx); }
&-title{ font-size: 38rpx; font-weight: bold; line-height: 50rpx; height: 50rpx; }
&-subtitle{ line-height: 40rpx; height: 80rpx; font-size: 30rpx; }
&-price{
font-weight: bold;
color: $text-price;
font-size: 42rpx;
font-family: Arial, Helvetica, sans-serif;
line-height: 50rpx;
height: 50rpx;
text{
font-size: 80%;
margin-right: 5rpx;
}
}
}
// 底部
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx 30rpx 50rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
z-index: 99;
box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .04);
background: white;
.footer-text{
width: 200rpx;
&-price{ font-weight: bold; color: $text-price; font-size: 40rpx; text{ font-size: 80%; margin-right: 5rpx; } }
&-subtitle{ font-size: 28rpx; color: gray; }
}
.footer-btn{
background: $main-color;
color: white;
line-height: 100rpx;
border-radius: 50rpx;
flex: 1;
text-align: center;
font-weight: bold;
font-size: 36rpx;
margin-left: 50rpx;
&::after{ display: none; }
}
}
</style>

138
pages/empower/info.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<view class="content">
<!-- 封面 -->
<view class="cover">
<image class="cover-src" :src="cover" mode="aspectFill"></image>
</view>
<!-- 课程信息 -->
<view class="info">
<view class="info-title">{{ title }}</view>
<view class="info-subtitle">{{ subtitle }}</view>
<view class="info-info">
<view class="info-info-item">
<label>总学期</label>
<view class="info-value">{{count.all || '-'}}</view>
</view>
<view class="info-info-item">
<label>已结束</label>
<view class="info-value">{{count.over || 0}}</view>
</view>
<view class="info-info-item" v-if="semester != null">
<label>当期时间</label>
<view class="info-value">{{semester.time.start || '-'}}</view>
</view>
<view class="info-info-item" v-if="semester != null">
<label>报名价格</label>
<view class="info-value price">{{semester.price || '0.00'}}</view>
</view>
</view>
</view>
<!-- 课程介绍 -->
<rich-text :nodes="content"></rich-text>
<!-- 报名信息 -->
<view class="footer">
<view>分享</view>
<view class="footer-btn" @click="onBuy">立即购买</view>
</view>
</view>
</template>
<script>
import { info } from '@/apis/interfaces/empower.js'
export default {
data() {
return {
id : '',
cover : '',
title : '',
subtitle : '',
price : '0.00',
semester : null,
count : {},
content : []
};
},
onShow() {
info(this.$Route.query.id).then(res => {
let { cover, title, subtitle, price, semester_current, count, content, id } = res;
this.id = id
this.cover = cover
this.title = title
this.subtitle = subtitle
this.price = price
this.semester = semester_current
this.count = count
this.content = content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
uni.setNavigationBarTitle({
title: title
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
onBuy(){
this.$Router.push({
name : 'EmpowerBuy',
params : { id: this.id }
})
}
}
}
</script>
<style lang="scss">
.content{ padding-bottom: 180rpx; }
// 封面图
.cover{
position: relative;
padding-top: 70%;
background: #f7f8f9;
&-src{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
// 信息
.info{
padding: 40rpx;
&-title{ font-weight: bold; font-size: 50rpx; margin-bottom: 20rpx; line-height: 65rpx; color: #333; text-align: justify; }
&-subtitle{ font-size: 30rpx; line-height: 50rpx; margin-bottom: 40rpx; color: #333; text-align: justify; }
&-info{
background: $window-color;
padding: 0 30rpx;
font-size: 30rpx;
border-radius: 20rpx;
&-item{
padding: 30rpx 0;
line-height: 40rpx;
display: flex;
justify-content: space-between;
@extend .border-solid;
label{ font-weight: bold; width: 170rpx; }
&:last-child::after{ display: none; }
}
}
&-value{
width: calc(100% - 170rpx);
text-align: right;
font-family: Arial, Helvetica, sans-serif;
&.price{ font-weight: bold; color: $text-price; }
}
}
// 底部
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx 30rpx 50rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
z-index: 99;
background-color: white;
box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .04);
.footer-btn{ background: $main-color; color: white; line-height: 100rpx; border-radius: 50rpx; flex: 1; text-align: center; font-weight: bold; font-size: 36rpx; margin-left: 50rpx; }
}
</style>

View File

@@ -117,37 +117,11 @@
scroll-x="true" scroll-x="true"
scroll-with-animation="true" scroll-with-animation="true"
:scroll-into-view='defaultViewId' :scroll-into-view='defaultViewId'
@click="onToast()"
> >
<view class="the-flex-item"> <view class="the-flex-item" v-for="(item, index) in empowerArr" :key="index" @click="onEmpower(item.id)">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_07.png') + ');'"></view> <view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
<view class="title nowrap">巅峰销售思维</view> <view class="title nowrap">{{item.title}}</view>
<view class="price nowrap"><text></text>2980</view> <view class="price nowrap"><text></text>{{item.price}}</view>
</view>
<view class="the-flex-item">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_08.png') + ');'"></view>
<view class="title nowrap">团队系统思维</view>
<view class="price nowrap"><text></text>3980</view>
</view>
<view class="the-flex-item">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_09.png') + ');'"></view>
<view class="title nowrap">领袖演说思维</view>
<view class="price nowrap"><text></text>4980</view>
</view>
<view class="the-flex-item">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_10.png') + ');'"></view>
<view class="title nowrap">卓越领袖能量思维</view>
<view class="price nowrap"><text></text>5980</view>
</view>
<view class="the-flex-item">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_11.png') + ');'"></view>
<view class="title nowrap">激发内在无限潜能</view>
<view class="price nowrap"><text></text>9980</view>
</view>
<view class="the-flex-item">
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_12.png') + ');'"></view>
<view class="title nowrap">其他赋能培训会议</view>
<view class="price nowrap">价格另议</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@@ -184,6 +158,7 @@
<script> <script>
import { region } from '@/apis/interfaces/address.js' import { region } from '@/apis/interfaces/address.js'
import { categories, jf, index } from '@/apis/interfaces/index.js' import { categories, jf, index } from '@/apis/interfaces/index.js'
import { lists } from '@/apis/interfaces/empower.js'
export default { export default {
data() { data() {
return { return {
@@ -208,19 +183,35 @@
appMenus : { appMenus : {
cases : [], cases : [],
service : [] service : []
} },
// 增收赋能列表
empowerArr : []
} }
}, },
onLoad() { onLoad() {
this.getCategory() this.getCategory()
this.getJf() this.getJf()
this.getIndex() this.getIndex()
// 增收赋能
this.getEmpower()
}, },
methods: { methods: {
onToast(){ // 查看增收赋能详情
uni.showToast({ onEmpower(id){
title: '即将开放,敬请期待', this.$Router.push({
icon : 'none' name : 'EmpowerInfo',
params : { id }
})
},
// 增收赋能接口
getEmpower(){
lists().then(res => {
this.empowerArr = res;
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
}) })
}, },
// 获取金法列表 // 获取金法列表