TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
张冬雪
2023-09-04 14:11:37 +08:00
parent eab46f3108
commit 149b75a7dd
8 changed files with 1657 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>