|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
+ <!-- 不同类型进入的type(1:学校课程;2:体育馆课程;3:教练课程) -->
|
|
|
<view class="content">
|
|
|
<view class="g-orderinfo-card">
|
|
|
<view class="g-shoping-info">
|
|
|
- <image class="shoping-img" src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode="">
|
|
|
- </image>
|
|
|
+ <image class="shoping-img" :src="previewCourseInfo.cover" mode=""></image>
|
|
|
<view class="shoping-info">
|
|
|
- <view class="name">一对一篮球30分钟室内精品课程,一对一篮球30分</view>
|
|
|
+ <view class="name">{{previewCourseInfo.name}}</view>
|
|
|
<view class="price-info">
|
|
|
- <view class="price"><text class="mini-text">¥</text>25.9</view>
|
|
|
+ <view class="price"><text class="mini-text">¥</text>{{previewCourseInfo.sellingPrice}}</view>
|
|
|
<view class="price-stepper">
|
|
|
- <view class="minus">-</view>
|
|
|
- <input type="number" />
|
|
|
- <view class="add">+</view>
|
|
|
+ <view class="minus" @click="minusNum">-</view>
|
|
|
+ <input v-model="countTotal" disabled type="number" />
|
|
|
+ <view class="add" @click="addNum">+</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -19,17 +19,20 @@
|
|
|
<view class="g-shoping-total">
|
|
|
<view class="total-price">
|
|
|
<view class="">商品总价(共1件)</view>
|
|
|
- <view class="">¥25.9</view>
|
|
|
+ <view class="">¥{{previewCourseInfo.sellingPrice}}</view>
|
|
|
</view>
|
|
|
<view class="total-price">
|
|
|
- <view class="">团购优惠</view>
|
|
|
- <view class="">-¥25.90</view>
|
|
|
+ <view class="">
|
|
|
+ <text v-if="loadType==1||loadType==2">试听优惠</text>
|
|
|
+ <text v-if="loadType==3">团购优惠</text>
|
|
|
+ </view>
|
|
|
+ <view class="">-¥{{previewCourseInfo.discountPrice}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="subtotal">小计 ¥125</view>
|
|
|
+ <view class="subtotal">小计 ¥{{previewCourseInfo.subtotal}}</view>
|
|
|
</view>
|
|
|
<!-- 无固定场进入 -->
|
|
|
- <view class="g-buy-tips" v-if="loadType==1">
|
|
|
+ <view class="g-buy-tips" v-if="loadType==4">
|
|
|
<view class="tips-title">购买须知</view>
|
|
|
<view class="tips-info-card">
|
|
|
<view class="title">有效期</view>
|
|
@@ -46,7 +49,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 课程进入 -->
|
|
|
- <view class="g-insurance-card" v-if="loadType==2">
|
|
|
+ <!-- v-if="loadType==1||loadType==3" -->
|
|
|
+ <view class="g-insurance-card">
|
|
|
<view class="g-insurance-info">
|
|
|
<view class="insurance-type">
|
|
|
<view class="type-name">
|
|
@@ -68,6 +72,7 @@
|
|
|
<view class="price">¥6</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- v-if="loadType==1||loadType==3" -->
|
|
|
<view class="g-userinfo-card">
|
|
|
<view class="r-user">
|
|
|
<view class="user-title">用户信息</view>
|
|
@@ -75,27 +80,29 @@
|
|
|
<zzx-icon name="wechat" size="16"></zzx-icon>
|
|
|
<view style="margin-bottom: 8rpx;">邀请微信好友</view>
|
|
|
<zzx-icon name="ashRight" size="12"></zzx-icon>
|
|
|
+ <button class="g-share-btn" open-type="share"></button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="user-tags">张三</view>
|
|
|
- <view class="r-user-list" v-for="item in 2">
|
|
|
- <view class="minus-user">-</view>
|
|
|
+ <!-- <view class="user-tags">张三</view> -->
|
|
|
+ <view class="r-user-list" v-for="item in userData" :key="item.id">
|
|
|
+ <view class="minus-user" @click="deleteUser(item)">-</view>
|
|
|
<view class="r-list">
|
|
|
- <view class="name">张三</view>
|
|
|
- <view class="id-num">身份证 51**************10</view>
|
|
|
+ <view class="name">{{item.fullName}}</view>
|
|
|
+ <view class="id-num">身份证 {{idCardHide(item.identityCard)}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="g-adduser-btn">
|
|
|
+ <view class="g-adduser-btn" @click="toUserList">
|
|
|
<view class="add-icon">+</view>
|
|
|
<view class="add-text">添加用户</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- v-if="loadType==1" -->
|
|
|
<view class="g-usetips-card">
|
|
|
<view class="use-title">使用须知</view>
|
|
|
<view class="use-text">
|
|
|
- <view class="item-text">1.购买后,需按照课表按时上课;</view>
|
|
|
- <view class="item-text">2.如有特殊情况,需上传相关证明;</view>
|
|
|
- <view class="item-text">3.由于特殊情况耽误了课程,后续会发布补课表,集中补课</view>
|
|
|
+ <view class="item-text">
|
|
|
+ <rich-text :nodes="previewCourseInfo.reminder"></rich-text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="use-tips-more" @click="RouterUtils.to_page('/pages/index/useNotice/index')">
|
|
|
<view class="more-text">查看更多</view>
|
|
@@ -106,12 +113,12 @@
|
|
|
<view class="footer footer-box">
|
|
|
<view class="footer-price">
|
|
|
<view class="total-price">合计:</view>
|
|
|
- <view class="price"><text class="mini-text">¥</text>50.59</view>
|
|
|
- <view class="discount">优惠¥22.59</view>
|
|
|
+ <view class="price"><text class="mini-text">¥</text>{{previewCourseInfo.totalPrice}}</view>
|
|
|
+ <view class="discount">优惠¥{{previewCourseInfo.totalDiscount}}</view>
|
|
|
</view>
|
|
|
<view class="footer-btn" @click="to_pay">
|
|
|
<button>
|
|
|
- <view class="btn-price">¥57.8</view>
|
|
|
+ <view class="btn-price">¥{{previewCourseInfo.totalPrice}}</view>
|
|
|
<view class="btn-price">立即支付</view>
|
|
|
</button>
|
|
|
</view>
|
|
@@ -120,19 +127,83 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref } from 'vue';
|
|
|
+ import { ref, onMounted,computed } from 'vue';
|
|
|
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
|
|
- import { RouterUtils } from '@/utils/util';
|
|
|
+ import { RouterUtils, TipsUtils,idCardHide } from '@/utils/util';
|
|
|
+ import { http } from '@/utils/http'
|
|
|
const select_insurance = ref(false);
|
|
|
- const loadType=ref(1)
|
|
|
- onLoad((options)=>{
|
|
|
- loadType.value=options.type
|
|
|
-
|
|
|
+ const loadType = ref(1)
|
|
|
+ onLoad((options) => {
|
|
|
+ console.log(options);
|
|
|
+ loadType.value = options.type
|
|
|
+ courseId.value = options.courseId
|
|
|
+ })
|
|
|
+ onMounted(() => {
|
|
|
+ get_previewOrderCourse()
|
|
|
+ get_userData()
|
|
|
})
|
|
|
|
|
|
- const to_pay=()=>{
|
|
|
+
|
|
|
+ const to_pay = () => {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/index/cancelOrder/index'
|
|
|
+ url: '/pages/index/toBeUsed/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const toUserList = () => {
|
|
|
+ RouterUtils.to_page('/pages/index/userList/index')
|
|
|
+ }
|
|
|
+
|
|
|
+ const userData=ref()
|
|
|
+ const get_userData=()=>{
|
|
|
+ uni.$on('userData',function(data){
|
|
|
+ userData.value=data
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const deleteUser=async(e)=>{
|
|
|
+ let res = await TipsUtils.tips_alert('确定删除该用户吗?',true)
|
|
|
+ if(res.confirm){
|
|
|
+ userData.value=userData.value.filter(user=>user.id!==e.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const courseId = ref()
|
|
|
+ const previewCourseInfo = ref()
|
|
|
+ const get_previewOrderCourse = () => {
|
|
|
+ http.get('/order/previewOrderCourse', { data: { courseId: courseId.value }, loading: true }).then((res) => {
|
|
|
+ previewCourseInfo.value = res.result
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const countTotal = ref(1)
|
|
|
+ const minusNum = () => {
|
|
|
+ if (countTotal.value > 1) {
|
|
|
+ countTotal.value--
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // const subtotal=computed(()=>{
|
|
|
+ // return (previewCourseInfo.value.subtotal*countTotal.value).toFixed(2)-previewCourseInfo.value.
|
|
|
+ // })
|
|
|
+
|
|
|
+ const addNum = () => {
|
|
|
+ get_checkCourseLimitNum(countTotal.value + 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ const get_checkCourseLimitNum = (targetNum) => {
|
|
|
+ http.get('/order/checkCourseLimitNum', {
|
|
|
+ data: {
|
|
|
+ courseId: courseId.value,
|
|
|
+ limitNum: targetNum
|
|
|
+ },
|
|
|
+ loading: true
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.result === true) {
|
|
|
+ countTotal.value = targetNum
|
|
|
+ } else {
|
|
|
+ TipsUtils.tips_toast('超出可购数量')
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
@@ -193,6 +264,7 @@
|
|
|
width: 80rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.add {
|
|
@@ -340,29 +412,40 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .g-userinfo-card{
|
|
|
+ .g-userinfo-card {
|
|
|
margin-top: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 32rpx;
|
|
|
+
|
|
|
.r-user {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.user-title {
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
- .invite{
|
|
|
+
|
|
|
+ .invite {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #AAAAAA;
|
|
|
+ position: relative;
|
|
|
+ .g-share-btn{
|
|
|
+ position: absolute;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .user-tags{
|
|
|
+
|
|
|
+ .user-tags {
|
|
|
margin-top: 20rpx;
|
|
|
width: 112rpx;
|
|
|
height: 40rpx;
|
|
@@ -376,85 +459,99 @@
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
- .r-user-list{
|
|
|
+
|
|
|
+ .r-user-list {
|
|
|
margin-top: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20rpx;
|
|
|
border-top: 1rpx solid #F0F0F0;
|
|
|
height: 140rpx;
|
|
|
- .minus-user{
|
|
|
+
|
|
|
+ .minus-user {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #FB5B5B;
|
|
|
text-align: center;
|
|
|
- line-height:20rpx;
|
|
|
+ line-height: 20rpx;
|
|
|
font-weight: 600;
|
|
|
color: #fff;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
- .r-list{
|
|
|
- .name{
|
|
|
+
|
|
|
+ .r-list {
|
|
|
+ .name {
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
- .id-num{
|
|
|
+
|
|
|
+ .id-num {
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .g-adduser-btn{
|
|
|
+
|
|
|
+ .g-adduser-btn {
|
|
|
display: flex;
|
|
|
height: 88rpx;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 20rpx;
|
|
|
border-top: 1rpx solid #F0F0F0;
|
|
|
- .add-icon{
|
|
|
+
|
|
|
+ .add-icon {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #FDD143;
|
|
|
- font-size:30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
line-height: 20rpx;
|
|
|
}
|
|
|
- .add-text{
|
|
|
+
|
|
|
+ .add-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #FDD143;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .g-usetips-card{
|
|
|
+
|
|
|
+ .g-usetips-card {
|
|
|
margin-top: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 32rpx;
|
|
|
- .use-title{
|
|
|
+
|
|
|
+ .use-title {
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
- .use-text{
|
|
|
+
|
|
|
+ .use-text {
|
|
|
font-size: 24rpx;
|
|
|
color: #222222;
|
|
|
- .item-text{
|
|
|
+
|
|
|
+ .item-text {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
- .use-tips-more{
|
|
|
+
|
|
|
+ .use-tips-more {
|
|
|
margin-top: 20rpx;
|
|
|
- .more-text{
|
|
|
+
|
|
|
+ .more-text {
|
|
|
text-align: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #CCCCCC;
|
|
|
}
|
|
|
- .use-line{
|
|
|
+
|
|
|
+ .use-line {
|
|
|
margin: auto;
|
|
|
margin-top: 10rpx;
|
|
|
width: 38rpx;
|
|
@@ -464,6 +561,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
left: 0;
|
|
|
|