提取支付界面的公共模块
This commit is contained in:
ywyonui
parent
cb258688c7
commit
c245940f0f
98
src/pages/base/components/XkPayXkqd/index.vue
Normal file
98
src/pages/base/components/XkPayXkqd/index.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<view class="xkqd-list">
|
||||||
|
<!-- 课程信息卡片 -->
|
||||||
|
<view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
|
||||||
|
<view class="card-title">课程信息</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<view class="course-info">
|
||||||
|
<image
|
||||||
|
class="course-image"
|
||||||
|
:src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
<view class="course-details">
|
||||||
|
<view class="course-name">{{ xkqd.xkmc }}</view>
|
||||||
|
<view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
|
||||||
|
<view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
|
||||||
|
<view class="course-price"
|
||||||
|
>金额：<text class="price-value">¥{{ xkqd.jfje }}</text></view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { imagUrl } from "@/utils";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
|
const { getData } = useDataStore();
|
||||||
|
|
||||||
|
// 课程信息
|
||||||
|
const xkqdList = computed(() => getData.xkqdList);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-card {
|
||||||
|
margin: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-info {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.course-image {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-details {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.course-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-teacher,
|
||||||
|
.course-location {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-price {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
.price-value {
|
||||||
|
color: #ff6b00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
93
src/pages/base/components/XkPayXs/index.vue
Normal file
93
src/pages/base/components/XkPayXs/index.vue
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<view class="info-card">
|
||||||
|
<view class="card-title">报名信息</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<view class="student-info">
|
||||||
|
<view class="student-avatar">
|
||||||
|
<image :src="curXs.xstxUrl || '/static/base/home/11222.png'" class="tx-img"></image>
|
||||||
|
</view>
|
||||||
|
<view class="student-details">
|
||||||
|
<view class="student-name">
|
||||||
|
{{ curXs.xm }}
|
||||||
|
</view>
|
||||||
|
<view class="student-class"
|
||||||
|
>{{ curXs.njmc }}{{ curXs.bjmc }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
|
const { getCurXs, getUser } = useUserStore();
|
||||||
|
const { setData, getData } = useDataStore();
|
||||||
|
|
||||||
|
const curXs = computed(() => getCurXs)
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
margin: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.student-avatar {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-right: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-details {
|
||||||
|
.student-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
.gender-icon {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-class {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -18,57 +18,11 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 学生信息卡片 -->
|
<!-- 学生信息卡片 -->
|
||||||
<view class="info-card student-card">
|
<XkPayXs />
|
||||||
<view class="card-title">报名信息</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
|
|
||||||
<view class="student-info">
|
|
||||||
<view class="student-avatar">
|
|
||||||
<image
|
|
||||||
src="/static/images/student-avatar.jpg"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
<view class="student-details">
|
|
||||||
<view class="student-name">
|
|
||||||
{{ student.name }}
|
|
||||||
<view class="gender-icon">
|
|
||||||
<u-icon
|
|
||||||
v-if="student.gender === '男'"
|
|
||||||
name="man"
|
|
||||||
color="#2879ff"
|
|
||||||
size="18"
|
|
||||||
></u-icon>
|
|
||||||
<u-icon v-else name="woman" color="#ff6b9d" size="18"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="student-id">{{ student.id }}</view>
|
|
||||||
<view class="student-class">{{ student.class }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 课程信息卡片 -->
|
<!-- 课程信息卡片 -->
|
||||||
<view class="info-card">
|
<XkPayXkqd />
|
||||||
<view class="card-title">课程信息</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
|
|
||||||
<view class="course-info">
|
|
||||||
<image
|
|
||||||
class="course-image"
|
|
||||||
:src="course.image"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<view class="course-details">
|
|
||||||
<view class="course-name">{{ course.title }}</view>
|
|
||||||
<view class="course-teacher">开课老师：{{ course.teacher }}</view>
|
|
||||||
<view class="course-location">上课地点：{{ course.time }}</view>
|
|
||||||
<view class="course-price"
|
|
||||||
>金额：<text class="price-value">¥{{ course.price }}</text></view
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<template #bottom>
|
<template #bottom>
|
||||||
<!-- <view class="white-bg-color py-5">
|
<!-- <view class="white-bg-color py-5">
|
||||||
@ -86,25 +40,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import XkPayXs from "@/pages/base/components/XkPayXs/index.vue"
|
||||||
|
import XkPayXkqd from "@/pages/base/components/XkPayXkqd/index.vue"
|
||||||
// 学生信息
|
|
||||||
const student = ref({
|
|
||||||
name: "何明远",
|
|
||||||
gender: "男",
|
|
||||||
id: "202111115724522",
|
|
||||||
class: "三年级2班",
|
|
||||||
});
|
|
||||||
|
|
||||||
// 课程信息
|
|
||||||
const course = ref({
|
|
||||||
id: 2,
|
|
||||||
title: "机器人创客",
|
|
||||||
teacher: "叶老师",
|
|
||||||
time: "星期一",
|
|
||||||
price: 142,
|
|
||||||
image: "/static/images/robot-course.jpg",
|
|
||||||
});
|
|
||||||
|
|
||||||
// 返回上一页
|
// 返回上一页
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
@ -113,9 +50,6 @@ const goBack = () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 实际应用中，应从页面参数或缓存获取课程和学生信息
|
// 实际应用中，应从页面参数或缓存获取课程和学生信息
|
||||||
// const courseId = uni.getStorageSync('selectedCourseId');
|
|
||||||
// const studentId = uni.getStorageSync('currentStudentId');
|
|
||||||
// fetchSuccessInfo(courseId, studentId);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -198,111 +132,4 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
&.student-card {
|
|
||||||
background-color: #eef4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background-color: #eee;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.student-avatar {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-details {
|
|
||||||
.student-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
.gender-icon {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-id,
|
|
||||||
.student-class {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-info {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.course-image {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-details {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.course-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teacher,
|
|
||||||
.course-location {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-price {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
color: #ff6b00;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -13,46 +13,10 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 学生信息卡片 -->
|
<!-- 学生信息卡片 -->
|
||||||
<view class="info-card">
|
<XkPayXs />
|
||||||
<view class="card-title">报名信息</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
|
|
||||||
<view class="student-info">
|
|
||||||
<view class="student-avatar">
|
|
||||||
<image :src="curXs.xstxUrl || '/static/base/home/11222.png'" class="tx-img"></image>
|
|
||||||
</view>
|
|
||||||
<view class="student-details">
|
|
||||||
<view class="student-name">
|
|
||||||
{{ curXs.xm }}
|
|
||||||
</view>
|
|
||||||
<view class="student-class"
|
|
||||||
>{{ curXs.njmc }}{{ curXs.bjmc }}</view
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 课程信息卡片 -->
|
<!-- 课程信息卡片 -->
|
||||||
<view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
|
<XkPayXkqd />
|
||||||
<view class="card-title">课程信息</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
|
|
||||||
<view class="course-info">
|
|
||||||
<image
|
|
||||||
class="course-image"
|
|
||||||
:src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
<view class="course-details">
|
|
||||||
<view class="course-name">{{ xkqd.xkmc }}</view>
|
|
||||||
<view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
|
|
||||||
<view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
|
|
||||||
<view class="course-price"
|
|
||||||
>金额：<text class="price-value">¥{{ xkqd.jfje }}</text></view
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 底部支付区域 -->
|
<!-- 底部支付区域 -->
|
||||||
<view class="payment-footer">
|
<view class="payment-footer">
|
||||||
@ -70,13 +34,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import XkPayXs from "@/pages/base/components/XkPayXs/index.vue"
|
||||||
|
import XkPayXkqd from "@/pages/base/components/XkPayXkqd/index.vue"
|
||||||
import { jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
|
import { jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
|
||||||
import { imagUrl } from "@/utils";
|
|
||||||
import { useUserStore } from "@/store/modules/user";
|
import { useUserStore } from "@/store/modules/user";
|
||||||
import { useDataStore } from "@/store/modules/data";
|
import { useDataStore } from "@/store/modules/data";
|
||||||
import { result } from "lodash";
|
|
||||||
const { getCurXs, getUser } = useUserStore();
|
const { getCurXs, getUser } = useUserStore();
|
||||||
const { setData, getData } = useDataStore();
|
const { getData } = useDataStore();
|
||||||
|
|
||||||
// 学生信息
|
// 学生信息
|
||||||
const curXs = computed(() => getCurXs);
|
const curXs = computed(() => getCurXs);
|
||||||
@ -261,104 +225,6 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background-color: #eee;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.student-avatar {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-details {
|
|
||||||
.student-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
.gender-icon {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.student-class {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-info {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.course-image {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-details {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.course-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teacher,
|
|
||||||
.course-location {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-price {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
color: #ff6b00;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-footer {
|
.payment-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user