初始化
This commit is contained in:
@@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- deBug信息 -->
|
||||
<view class="web-debug web-text-success" style="display: none">
|
||||
场馆ID：{{ merchantId }} 场馆编号：{{ merchantCode }} 场馆名称：{{ merchantName }} 日期：{{ dateTime }} 星期：{{ week }} 订单总金额：{{ totalPrice }} 类型：{{
|
||||
type
|
||||
}}
|
||||
商品信息：{{ goodsList }}
|
||||
</view>
|
||||
<!-- {{ address }} -->
|
||||
|
||||
|
||||
<uni-card title="课程信息" :border="false" :is-shadow="false">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<uv-cell :title="`课程名称`" :label="form.courseName" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
<uv-cell :title="`上课课时`" :label="form.classPeriod" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
<uv-cell :title="`年龄限制`" :label="form.ageLimit" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
<uv-cell :title="`培训费用`" :label="`￥${form.price}`" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
<uv-cell :title="`上课时间`" :label="`${form.startTime}`" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
<uv-cell :title="`上课地点`" :label="`${form.address}`" :cellStyle="{ padding: '10px 0' }" :border="false" ></uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
<uni-card title="报名学员" :border="false" :is-shadow="false">
|
||||
<uv-cell
|
||||
v-if="student"
|
||||
:title="`${student.name}`"
|
||||
icon="account"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="openStudentList"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell
|
||||
v-else
|
||||
:title="`选择学员`"
|
||||
icon="account"
|
||||
:cellStyle="{ padding: '5px 0' }"
|
||||
:border="false"
|
||||
@click="openStudentList"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
|
||||
</uni-card>
|
||||
<uni-card title="选择支付方式" :border="false" :is-shadow="false">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(item, index) in payment" :key="index">
|
||||
<uv-cell
|
||||
:title="`${item.name}`"
|
||||
:icon="`${item.image}`"
|
||||
:cellStyle="{ padding: '20rpx 10rpx', borderRadius: '8rpx', backgroundColor: item.type == payType ? '#f6fff1' : '' }"
|
||||
:border="false"
|
||||
@click="onPayType(item.type)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon v-if="item.type == payType" size="30rpx" name="checkbox-mark"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsClick('分享')">
|
||||
<span class="web-text-danger">已优惠￥0.00</span>
|
||||
<span class="web-text-heading">￥{{ totalPrice || 0.0 }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>同意以下服务条款</text>
|
||||
<text class="link" @click.stop="navTo('/package/article/detail?articleId=501')">《广西体育中心预定条款》</text>
|
||||
<text class="link" @click.stop="navTo('/package/article/detail?articleId=502')">《用户服务协议和隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付按钮 -->
|
||||
<uv-gap height="50"></uv-gap>
|
||||
<view class="checkout-car">
|
||||
<view class="car-total">
|
||||
<text style="color: #ebcf00">合计￥</text>
|
||||
<uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold :endVal="totalPrice"></uv-count-to>
|
||||
</view>
|
||||
<uv-button
|
||||
class="save-btn"
|
||||
:disabled="!disabled || goodsList.length == 0"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '0 30px 30px 0', color: '#ffffff', border: 'none', padding: '22px 30px' }"
|
||||
text="提交订单"
|
||||
@click="save"
|
||||
></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 学员选择弹窗 -->
|
||||
<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card title="选择学员" :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="address-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(item, index) in studentList" :key="index">
|
||||
<uv-cell :cellStyle="{ padding: '10px 0' }" :label="item.address" @click="onAddress(item)">
|
||||
<template v-slot:icon>
|
||||
<uv-avatar :text="item.type" fontSize="12" size="32" randomBgColor></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<view class="title-bar">
|
||||
<text class="web-text-heading" style="font-weight: 700">{{ item.name }}</text>
|
||||
<text class="web-text-secondary">{{ item.phone }}</text>
|
||||
<uni-tag v-if="item.isDefault" text="默认" size="mini" inverted type="success"></uni-tag>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<uni-icons type="right" style="color: #999999"></uni-icons>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
<uv-button class="add-address" :customStyle="{ borderRadius: '30px' }" text="学员管理" @click="navTo('/package/course/student')"></uv-button>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
<!-- 支付密码弹窗 -->
|
||||
<uni-popup ref="payPasswordForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card title="请输入支付密码" :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="pay-password-card">
|
||||
<uni-forms ref="form" :label-width="80">
|
||||
<uni-forms-item label="支付密码" name="payPassword" required>
|
||||
<uv-code-input mode="box" dot :space="0" :maxlength="6" hairline v-model="payPassword"></uv-code-input>
|
||||
</uni-forms-item>
|
||||
<uv-button
|
||||
class="to-pay-btn"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '30px', color: '#ffffff' }"
|
||||
text="确定支付"
|
||||
:disabled="disabledPayPayPassword"
|
||||
@click="onPayPassword"
|
||||
></uv-button>
|
||||
</uni-forms>
|
||||
<text @click="navTo(`/package/user/pay-password`)" class="web-text-primary">忘记支付密码？</text>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/shop/order';
|
||||
import * as CourseApi from '@/api/booking/course';
|
||||
import * as BookingStudentApi from '@/api/booking/student';
|
||||
import * as PaymentApi from '@/api/system/payment';
|
||||
import { checkPayPassword } from '@/api/passport/login';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { getWeek, getKey } from '@/utils/common';
|
||||
import { useCarStore } from '@/store/modules/car';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const carStore = useCarStore();
|
||||
const { goodsList, totalPrice, carNum, merchantId, merchantName, merchantCode, type, dateTime } = storeToRefs(carStore);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
courseId: 0,
|
||||
form: {},
|
||||
orderId: 0,
|
||||
goodsId: 0,
|
||||
userInfo: {},
|
||||
student: {},
|
||||
studentList: [],
|
||||
week: 0,
|
||||
goodsList,
|
||||
// 骨架屏
|
||||
hideTools: true,
|
||||
// 订单总金额
|
||||
totalPrice,
|
||||
reducePrice: 0,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
getWeek,
|
||||
payType: 1,
|
||||
payment: [],
|
||||
isLogin: false,
|
||||
disabled: false,
|
||||
// 支付密码是否正确
|
||||
isPayPasswordCorrect: false,
|
||||
disabledPayPayPassword: false,
|
||||
payPassword: ''
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.courseId = option.id;
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
this.openLogin();
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this;
|
||||
const { orderId } = this;
|
||||
|
||||
// 当前登录用户信息
|
||||
const userInfo = await userStore.fetchUserInfo();
|
||||
app.userInfo = userInfo;
|
||||
|
||||
BookingStudentApi.pageStudent({userId: uni.getStorageSync('user_id')}).then(res => {
|
||||
app.studentList = res.list
|
||||
const arr = res.list.filter((d) => d.isDefault === true);
|
||||
app.student = arr[0];
|
||||
})
|
||||
// UserAddressApi.pageUserAddress({}).then((res) => {
|
||||
// app.addressList = res.list;
|
||||
// const arr = res.list.filter((d) => d.isDefault === true);
|
||||
// app.address = arr[0];
|
||||
// });
|
||||
|
||||
// 读取支付方式列表
|
||||
PaymentApi.select({ status: true }).then((list) => {
|
||||
app.payment = list
|
||||
.filter((d) => d.type < 2)
|
||||
.map((d) => {
|
||||
if (d.code == 'balancePay') {
|
||||
d.name = `${d.name} (￥${userInfo.balance})`;
|
||||
}
|
||||
return d;
|
||||
});
|
||||
});
|
||||
CourseApi.getCourse(app.courseId).then((data) => {
|
||||
this.form = data;
|
||||
});
|
||||
// if (orderId > 0) {
|
||||
// Api.getOrder(orderId).then(data => {
|
||||
// app.merchantId = data.merchantId
|
||||
// app.merchantName = data.merchantName
|
||||
// app.merchantCode = data.merchantCode
|
||||
// app.payType = data.payType
|
||||
// app.orderInfo = data.orderInfoList
|
||||
// app.totalPrice = data.totalPrice
|
||||
// app.dateTime = data.orderInfoList[0].dateTime
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
openUrl(url) {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
}
|
||||
},
|
||||
onAddress(item) {
|
||||
this.address = item;
|
||||
this.$refs.addForm.close();
|
||||
},
|
||||
// 切换支付方式
|
||||
onPayType(index) {
|
||||
this.payType = index;
|
||||
},
|
||||
openStudentList() {
|
||||
this.$refs.addForm.open('center');
|
||||
},
|
||||
// 弹出登录提示框
|
||||
openLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 验证支付密码
|
||||
onPayPassword() {
|
||||
if (this.payPassword == '' || !this.payPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入支付密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.disabledPayPayPassword = true;
|
||||
const { payPassword } = this;
|
||||
checkPayPassword({ payPassword })
|
||||
.then((res) => {
|
||||
this.disabledPayPayPassword = false;
|
||||
this.isPayPasswordCorrect = true;
|
||||
this.save();
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
});
|
||||
this.disabledPayPayPassword = false;
|
||||
});
|
||||
},
|
||||
save() {
|
||||
const app = this;
|
||||
const { form, payType } = this;
|
||||
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意服务协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (carStore.goodsList.length == 0) {
|
||||
uni.showToast({
|
||||
title: '订单信息不存在',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (app.payType == 0 && !this.isPayPasswordCorrect) {
|
||||
this.$refs.payPasswordForm.open('center');
|
||||
return false;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '订单提交中.'
|
||||
});
|
||||
|
||||
Api.addOrder({
|
||||
type: 0, // 0商城订单
|
||||
orderId: this.orderId,
|
||||
merchantId: this.merchantId,
|
||||
merchantCode: this.merchantCode,
|
||||
merchantName: this.merchantName,
|
||||
totalPrice: this.totalPrice,
|
||||
payPrice: this.totalPrice - this.reducePrice,
|
||||
goodsList: this.goodsList,
|
||||
comments: this.goodsList[0].goodsName,
|
||||
// 微信支付
|
||||
payType: this.payType,
|
||||
// 下单日期
|
||||
dateTime: this.dateTime
|
||||
})
|
||||
.then((data) => {
|
||||
const orderInfo = data;
|
||||
// 调起微信支付
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: orderInfo.provider, // 服务提供商
|
||||
timeStamp: orderInfo.timeStamp, // 时间戳
|
||||
nonceStr: orderInfo.nonceStr, // 随机字符串
|
||||
package: orderInfo.package,
|
||||
signType: orderInfo.signType, // 签名算法
|
||||
paySign: orderInfo.paySign, // 签名
|
||||
success: function (res) {
|
||||
// 业务逻辑。。。
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(function () {
|
||||
app.disabled = false;
|
||||
uni.navigateTo({
|
||||
url: '/package/goods/order'
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('支付失败', err);
|
||||
app.disabled = false;
|
||||
uni.navigateTo({
|
||||
url: '/package/goods/order'
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch((res) => {
|
||||
uni.showToast({
|
||||
title: res.message || '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
}
|
||||
|
||||
.checkout-car {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
|
||||
.car-selected {
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.car-total {
|
||||
display: flex;
|
||||
color: #ebcf00;
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.save-btn {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.web-text-heading {
|
||||
font-size: 38rpx;
|
||||
margin-left: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.address-body {
|
||||
width: 660rpx;
|
||||
margin: auto;
|
||||
}
|
||||
.add-address {
|
||||
width: 600rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
margin: auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
|
||||
.web-text-heading {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.web-text-secondary {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-password-card {
|
||||
width: 600rpx;
|
||||
min-height: 300rpx;
|
||||
margin: 30rpx auto;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.web-text-primary {
|
||||
line-height: 2rem;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
.to-pay-btn {
|
||||
width: 400rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,542 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="uv-demo-block">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="200" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<uni-card v-if="course.courseName" :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<uv-cell :cellStyle="{ padding: '10px 5px' }" :border="false">
|
||||
<template v-slot:title>
|
||||
<view class="merchant-name">{{ course.courseName }}</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :cellStyle="{ padding: '10px 5px' }" :border="false">
|
||||
<template v-slot:title>
|
||||
<view class="pirce-bar" style="display: flex">
|
||||
<view class="web-text-danger">￥</view>
|
||||
<view class="web-text-danger" style="font-size: 40rpx">{{ course.price }}</view>
|
||||
<view style="margin-left: 30rpx"><uni-tag :text="`${course.classPeriod}课时`" inverted type="error"></uni-tag></view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell
|
||||
:title="course.merchantName"
|
||||
:label="`距离【${course.merchantName}】3.8公里·约7分钟`"
|
||||
isLink
|
||||
:border="false"
|
||||
:cellStyle="{ padding: '10px 5px' }"
|
||||
@click="mapTo(course)"
|
||||
>
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="年龄限制" :label="course.ageLimit" :border="false" :cellStyle="{ padding: '10px 5px' }"></uv-cell>
|
||||
<uv-cell title="报名时间" :label="course.bmTime" :border="false" :cellStyle="{ padding: '10px 5px' }"></uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="课程介绍" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<uv-image :src="`https://oss.wsdns.cn/20240608/1ce5b3f9b33b48b2bc9d68644e8ba6f4.jpg`"></uv-image>
|
||||
<view v-html="course.content"></view>
|
||||
<!-- <uv-empty icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty> -->
|
||||
<!-- <uv-gap height="50"></uv-gap> -->
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="课程教练" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="teacher-list">
|
||||
<view class="teacher-item" @click="openUrl(`/package/teacher/detail?id=1`)">
|
||||
<uv-avatar
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
||||
size="54"
|
||||
></uv-avatar>
|
||||
<view class="teacher-info">
|
||||
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
||||
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="teacher-item">
|
||||
<uv-avatar
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
||||
size="50"
|
||||
></uv-avatar>
|
||||
<view class="teacher-info">
|
||||
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
||||
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="teacher-item">
|
||||
<uv-avatar
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKf8Lvm8WN0LnV2B6vYzyGJVxk2XW3j1mtDzicA60KhWRRjyU8ORiascwInkbqhVibRm2A1O1tRRbzhA/132"
|
||||
size="54"
|
||||
></uv-avatar>
|
||||
<view class="teacher-info">
|
||||
<uv-text text="游泳教练" align="center" size="16"></uv-text>
|
||||
<uv-text text="游泳企事业800" type="warning" size="12"></uv-text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<!-- <view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link"
|
||||
@click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<uv-gap height="80"></uv-gap>
|
||||
<view class="save-btn">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="openBookingTel" />
|
||||
</view>
|
||||
|
||||
<!-- <view class="save-btn">
|
||||
<uv-button
|
||||
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="立即报名" @click="save"></uv-button>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- <view class="booking-tel" @click="openBookingTel">活动订场</view> -->
|
||||
<!-- 立即报名弹窗 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="popup-checkout">
|
||||
<uv-gap height="10"></uv-gap>
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<uv-cell :cellStyle="{ padding: '10px 15px' }" :border="false">
|
||||
<template v-slot:title>
|
||||
<view class="pirce-bar" style="display: flex">
|
||||
<uv-text mode="price" color="#ff0000" bold size="20" :text="course.price"></uv-text>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="规格" :border="false"></uv-cell>
|
||||
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
||||
<template v-slot:title>
|
||||
<uni-data-checkbox mode="tag" v-model="radio2" :localdata="sex"></uni-data-checkbox>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="班级/教练" :border="false"></uv-cell>
|
||||
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
||||
<template v-slot:title>
|
||||
<uni-data-checkbox mode="tag" v-model="radio3" :localdata="teacher"></uni-data-checkbox>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="报名学员" :border="false"></uv-cell>
|
||||
<uv-cell :border="false" :cellStyle="{ padding: '0 15px' }">
|
||||
<template v-slot:title>
|
||||
<view style="display: flex">
|
||||
<uni-data-checkbox mode="tag" v-model="radio4" :localdata="student"></uni-data-checkbox>
|
||||
<uv-tags text="新增" type="info" size="mini" icon="plus" plain></uv-tags>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<view class="checkout-car">
|
||||
<view class="car-total">
|
||||
<text style="color: #ebcf00">合计￥</text>
|
||||
<!-- <uv-count-to :startVal="0" decimals="2" duration="100" color="#ebcf00" bold :endVal="totalPrice"></uv-count-to> -->
|
||||
</view>
|
||||
<uv-button
|
||||
:disabled="!disabled"
|
||||
:customStyle="{
|
||||
background: 'linear-gradient(to right, #FE6035, #EF1224)',
|
||||
borderRadius: '0 30px 30px 0',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
padding: '22px 30px'
|
||||
}"
|
||||
text="下一步"
|
||||
@click="save"
|
||||
></uv-button>
|
||||
</view>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import * as CourseApi from '@/api/booking/course';
|
||||
import { useCarStore } from '@/store/modules/car';
|
||||
const carStore = useCarStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
// 课程信息
|
||||
course: {},
|
||||
// 课程相册
|
||||
photo: [],
|
||||
isLogin: false,
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
icon: 'headphones',
|
||||
text: '客服'
|
||||
},
|
||||
{
|
||||
icon: 'upload',
|
||||
text: '分享'
|
||||
}
|
||||
],
|
||||
buttonGroup: [
|
||||
{
|
||||
text: '立即报名',
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
radio2: 0,
|
||||
sex: [
|
||||
{
|
||||
text: '幼儿基础班(10次课，10天连续上课)',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '少年基础班(10次课，10天连续上课)',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: '少年基础班(10次课，10天连续上课)',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: '成人基础班(10次课，10天连续上课)',
|
||||
value: 3
|
||||
}
|
||||
],
|
||||
teacher: [
|
||||
{
|
||||
text: '姚教练',
|
||||
value: 0
|
||||
}
|
||||
],
|
||||
student: [
|
||||
{
|
||||
text: '全红婵',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this;
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.getCourse()]).then((res) => {
|
||||
const course = res[0];
|
||||
app.course = course;
|
||||
|
||||
// 修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: course.courseName
|
||||
});
|
||||
// 加载课程相册
|
||||
if (course.files) {
|
||||
app.photo = JSON.parse(course.files);
|
||||
}
|
||||
// 更新购物车状态
|
||||
// carStore.setMerchant(merchant)
|
||||
// carStore.merchantId = course.merchantId
|
||||
// carStore.merchantName = course.merchantName
|
||||
// carStore.merchantCode = course.merchantCode
|
||||
});
|
||||
},
|
||||
getCourse() {
|
||||
return new Promise((resolve, reject) => {
|
||||
CourseApi.getCourse(this.id)
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
onClick(e) {
|
||||
const app = this;
|
||||
const { course } = app;
|
||||
console.log('e: ', e);
|
||||
if (e.index == 0) {
|
||||
// 企业微信客服
|
||||
// #ifdef H5
|
||||
window.open(`setting.config.wxqykf.url`);
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: { url: `` },
|
||||
corpId: `setting.config.wxqykf.corpId`,
|
||||
success(res) {}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
openCustomerServiceChat: true,
|
||||
corpid: `setting.config.wxqykf.corpId`,
|
||||
customerUrl: `setting.config.wxqykf.url`,
|
||||
success(res) {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail(e) {
|
||||
console.log('errCode', e.errCode, e);
|
||||
if (e.errCode === -8) {
|
||||
app.$toast('很抱歉，您的手机没有安装微信~');
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
}
|
||||
if (e.index == 1) {
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
imageUrl: '',
|
||||
title: course.name,
|
||||
miniProgram: {
|
||||
id: 'gh_abcdefg',
|
||||
path: 'package/course/detail?id=' + app.id,
|
||||
type: 0,
|
||||
webUrl: 'http://apps.gxwebsoft.com/gxtyzx-h5/#/package/course/detail?id=' + app.id
|
||||
},
|
||||
success: ret => {
|
||||
console.log(JSON.stringify(ret));
|
||||
}
|
||||
});
|
||||
}
|
||||
// uni.showToast({
|
||||
// title: `点击${e.content.text}`,
|
||||
// icon: 'none'
|
||||
// });
|
||||
},
|
||||
mapTo(item) {
|
||||
// console.log('item: ',item.lngAndLat);
|
||||
const arr = item.lngAndLat.split(',');
|
||||
// console.log('arr: ',arr);
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(arr[1]),
|
||||
longitude: parseFloat(arr[0]),
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
},
|
||||
openBookingTel() {
|
||||
uni.navigateTo({
|
||||
url: '/package/course/checkout?id=' + this.id
|
||||
})
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
// this.$refs.popup.open('bottom');
|
||||
},
|
||||
closeBookingTel() {
|
||||
this.$refs.popup.close();
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
onMap() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function (res) {
|
||||
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
||||
const latitude = this.course.latitude;
|
||||
const longitude = this.course.longitude;
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意订票协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/package/course/checkout?id=' + this.id
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 750rpx;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
padding-bottom: 30rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.booking-tel {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
background: linear-gradient(to right, #ccff66, #008e04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.popup-checkout {
|
||||
background-color: #ffffff;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
margin: auto;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.booking-content {
|
||||
padding: 10px;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.teacher-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.teacher-item {
|
||||
margin: 20rpx 12rpx;
|
||||
display: flex;
|
||||
width: 160rpx;
|
||||
height: 200rpx;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx;
|
||||
.teacher-info {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-car {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
|
||||
.car-selected {
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.car-total {
|
||||
display: flex;
|
||||
color: #ebcf00;
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.save-btn {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 列表列表 -->
|
||||
<block v-if="itemList.length > 0">
|
||||
<uv-gap height="10"></uv-gap>
|
||||
<view class="item-list">
|
||||
<uni-grid :column="5" :highlight="true" :showBorder="false" @change="onItem">
|
||||
<uni-grid-item v-for="(item, index) in itemList" :index="index" :key="index">
|
||||
<view
|
||||
class="grid-item-box"
|
||||
style="
|
||||
background-color: #ffffff;
|
||||
margin: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
"
|
||||
>
|
||||
<uv-avatar :src="item.image" :size="30" shape="square" fontSize="16" randomBgColor></uv-avatar>
|
||||
<text class="text">{{ item.name }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<uni-card :border="false" :is-shadow="false" :padding="'12px 4px'">
|
||||
<uv-skeleton rows="3" :loading="hideTools" :title="false"></uv-skeleton>
|
||||
</uni-card>
|
||||
</block>
|
||||
<!-- 热门培训 -->
|
||||
<view class="card-title web-text-heading">热门培训</view>
|
||||
<block v-if="list.length > 0">
|
||||
<view class="course-list">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view class="course-item" @click="openUrl(`/package/course/detail?id=` + item.courseId)">
|
||||
<uv-image :src="item.image" width="200" height="110"></uv-image>
|
||||
<view class="course-info">
|
||||
<uv-text class="course-name" size="15" lineHeight="24" :lines="1" :text="item.courseName"></uv-text>
|
||||
<uv-text class="course-name web-text-secondary" lineHeight="24" size="13" :text="`${item.classPeriod}课时`"></uv-text>
|
||||
<view class="flex justify-between w-full">
|
||||
<uv-text class="course-name web-text-danger" mode="price" color="#ff0000" :text="`${item.price}`"></uv-text>
|
||||
<view>
|
||||
<uv-text :text="`1.3km`" class="web-text-secondary px-2"></uv-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<uni-card :border="false" :is-shadow="false" :padding="'12px 4px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CourseApi from '@/api/booking/course';
|
||||
import * as ItemApi from '@/api/booking/item';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
// 骨架屏
|
||||
hideTools: true,
|
||||
// 项目列表
|
||||
itemList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.reload();
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
// 请求数据
|
||||
Promise.all([app.getCourseList(), app.getItemList()]).then((res) => {
|
||||
console.log('res: ', res);
|
||||
app.list = res[0];
|
||||
app.itemList = res[1];
|
||||
});
|
||||
},
|
||||
getCourseList() {
|
||||
const app = this;
|
||||
const { categoryId } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
CourseApi.pageCourse({})
|
||||
.then((result) => {
|
||||
resolve(result.list);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
getItemList() {
|
||||
const app = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
ItemApi.listItem({})
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
onItem(e){
|
||||
const { index } = e.detail;
|
||||
this.openUrl(`/package/course/list?categoryId=${this.itemList[index].id}&categoryName=${this.itemList[index].name}`)
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
width: 700rpx;
|
||||
margin: 12rpx auto;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.course-list {
|
||||
width: 700rpx;
|
||||
margin: auto !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.course-item{
|
||||
width: 335rpx;
|
||||
margin: 16rpx 0;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
.course-info{
|
||||
padding: 10rpx 16rpx;
|
||||
line-height: 35rpx;
|
||||
}
|
||||
.course-name{
|
||||
}
|
||||
.price-bar{
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.course-image{
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-list {
|
||||
width: 720rpx;
|
||||
margin: auto;
|
||||
}
|
||||
.merchant-card-title {
|
||||
width: 700rpx;
|
||||
margin: 12rpx auto;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.card-body {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
|
||||
.merchant-card {
|
||||
margin: 12rpx auto;
|
||||
border-radius: 10rpx;
|
||||
border-color: slategrey;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.merchant-image {
|
||||
width: 45vw;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
padding: 10rpx;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-desc {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="!hideTools">
|
||||
<uv-gap height="5"></uv-gap>
|
||||
<view class="course-list">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view class="course-item" @click="openUrl(`/package/course/detail?id=` + item.courseId)">
|
||||
<uv-image :src="item.image" width="200" height="110"></uv-image>
|
||||
<uv-gap height="5"></uv-gap>
|
||||
<uv-text class="course-name" size="15" :lines="1" :text="item.courseName"></uv-text>
|
||||
<uv-text class="course-name web-text-secondary" size="13" :text="`${item.classPeriod}课时`"></uv-text>
|
||||
<view class="flex justify-between w-full">
|
||||
<uv-text class="course-name web-text-danger" mode="price" color="#ff0000" :text="`${item.price}`"></uv-text>
|
||||
<view>
|
||||
<uv-text :text="`1.3km`" class="web-text-secondary px-2"></uv-text>
|
||||
</view>
|
||||
</view>
|
||||
<uv-gap height="5"></uv-gap>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<uni-card :border="false" :is-shadow="false" :padding="'12px 4px'">
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CourseApi from '@/api/booking/course';
|
||||
import * as ItemApi from '@/api/booking/item';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
categoryId: 0,
|
||||
categoryName: '',
|
||||
list: [],
|
||||
// 骨架屏
|
||||
hideTools: true,
|
||||
// 项目列表
|
||||
itemList: []
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option) {
|
||||
this.categoryId = option.categoryId;
|
||||
this.categoryName = option.categoryName
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.categoryName
|
||||
})
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
// 请求数据
|
||||
Promise.all([app.getCourseList(), app.getItemList()]).then((res) => {
|
||||
console.log('res: ', res);
|
||||
app.list = res[0];
|
||||
app.itemList = res[1];
|
||||
app.hideTools = false;
|
||||
});
|
||||
},
|
||||
getCourseList() {
|
||||
const app = this;
|
||||
const { categoryId } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
CourseApi.pageCourse({ categoryId })
|
||||
.then((result) => {
|
||||
resolve(result.list);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
getItemList() {
|
||||
const app = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
ItemApi.listItem({})
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
width: 700rpx;
|
||||
margin: 12rpx auto;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.course-list {
|
||||
width: 700rpx;
|
||||
margin: auto !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.course-item{
|
||||
width: 335rpx;
|
||||
margin: 16rpx 0;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
.course-name{
|
||||
line-height: 1.4rem;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
.price-bar{
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.course-image{
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-list {
|
||||
width: 720rpx;
|
||||
margin: auto;
|
||||
}
|
||||
.merchant-card-title {
|
||||
width: 700rpx;
|
||||
margin: 12rpx auto;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.card-body {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
|
||||
.merchant-card {
|
||||
margin: 12rpx auto;
|
||||
border-radius: 10rpx;
|
||||
border-color: slategrey;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.merchant-image {
|
||||
width: 45vw;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
padding: 10rpx;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-desc {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 其他功能 -->
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="order-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<uv-cell :cellStyle="{padding: '10px 0'}">
|
||||
<template v-slot:icon>
|
||||
<uv-avatar :text="item.type" fontSize="12" size="32" randomBgColor></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<view class="title-bar">
|
||||
<text class="web-text-heading" style="font-weight: 700;">{{ item.name }}</text>
|
||||
<text class="web-text-secondary">{{ item.phone }}</text>
|
||||
<uni-tag v-if="item.isDefault" text="默认" size="mini" inverted type="success"></uni-tag>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<uni-icons type="compose" style="color: #999999;" size="18"
|
||||
@click="openEdit(item)"></uni-icons>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<view class="btn-bar">
|
||||
<uv-button class="save-user-profile"
|
||||
:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="添加学员" @click="add"></uv-button>
|
||||
</view>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
<!-- addressEdit弹窗 -->
|
||||
<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card title="添加学员" :border="false" :is-shadow="false" :padding="'10px 6px'">
|
||||
<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="80">
|
||||
<uni-forms-item label="收件人" name="name" required>
|
||||
<uv-input placeholder="收件人姓名" v-model="formData.name" maxlength="5"></uv-input>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phone" required>
|
||||
<uv-input placeholder="收件人手机号码" v-model="formData.phone" maxlength="11"></uv-input>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="所在地区" name="region" required>
|
||||
<uni-data-picker placeholder="省、市、区、街道" popup-title="请选择所在地区" :localdata="regions"
|
||||
:map="{text:'label',value: 'value'}" v-model="formData.region" @change="onchange" @nodeclick="onnodeclick"
|
||||
@popupopened="onpopupopened" @popupclosed="onpopupclosed">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="详细地址" name="address" required>
|
||||
<uv-input placeholder="小区、写字楼、门牌号等" v-model="formData.address"></uv-input>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="标签" name="type">
|
||||
<uni-data-checkbox mode="tag" v-model="formData.type" :localdata="typeData" @change="onType"></uni-data-checkbox>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="isDefault">
|
||||
<view class="web-cell">
|
||||
<uni-data-checkbox v-model="formData.isDefault"
|
||||
:localdata="defaultData" @click="onIsDefault"></uni-data-checkbox>
|
||||
<view v-if="formData.id" class="del-btn" @click="remove(formData)">
|
||||
<uni-icons type="trash" class="web-cell" style="color: #999999;">
|
||||
<text class="web-text-danger"
|
||||
style="font-size: 22rpx; padding-left: 4rpx;">删除</text>
|
||||
</uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<uv-button class="add-address"
|
||||
:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="保存" @click="submit"></uv-button>
|
||||
</uni-forms>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/shop/userAddress';
|
||||
import * as MpMenuApi from '@/api/cms/mp-menu/index';
|
||||
import regions from '@/api/regions-data.json';
|
||||
import {
|
||||
getWxOpenId
|
||||
} from '@/api/passport/login';
|
||||
import {
|
||||
openUrl
|
||||
} from '@/utils/common';
|
||||
import {
|
||||
useUserStore
|
||||
} from '@/store/modules/user';
|
||||
import {
|
||||
useCarStore
|
||||
} from '@/store/modules/car';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const carStore = useCarStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
statusBarHeight: 104,
|
||||
isLogin: false,
|
||||
form: {
|
||||
name: '',
|
||||
phone: ''
|
||||
},
|
||||
// 表单数据
|
||||
formData: {},
|
||||
fields: {},
|
||||
logo: '',
|
||||
bookingUser: {},
|
||||
server: [],
|
||||
order: [],
|
||||
defaultData: [{
|
||||
text: '默认学员',
|
||||
value: true
|
||||
}],
|
||||
typeData: [{
|
||||
text: '家',
|
||||
value: '家'
|
||||
},
|
||||
{
|
||||
text: '公司',
|
||||
value: '公司'
|
||||
},
|
||||
{
|
||||
text: '学校',
|
||||
value: '学校'
|
||||
}
|
||||
],
|
||||
regions,
|
||||
dataTree: [{
|
||||
text: "一年级",
|
||||
value: "1-0",
|
||||
children: [{
|
||||
text: "1.1班",
|
||||
value: "1-1"
|
||||
},
|
||||
{
|
||||
text: "1.2班",
|
||||
value: "1-2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "二年级",
|
||||
value: "2-0",
|
||||
children: [{
|
||||
text: "2.1班",
|
||||
value: "2-1"
|
||||
},
|
||||
{
|
||||
text: "2.2班",
|
||||
value: "2-2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "三年级",
|
||||
value: "3-0",
|
||||
disable: true
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
// 对name字段进行必填验证
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入收件人名称',
|
||||
}]
|
||||
},
|
||||
phone: {
|
||||
rules: [{
|
||||
required: true,
|
||||
format: 'number',
|
||||
errorMessage: '请输入正确的手机号码',
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入详情地址',
|
||||
}]
|
||||
},
|
||||
region: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择所在地区',
|
||||
}, {
|
||||
validateFunction: function(rule, value, data, callback) {
|
||||
console.log('value: ', value);
|
||||
if (value.length < 2) {
|
||||
callback('请至少勾选两个兴趣爱好')
|
||||
}
|
||||
return true
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.reload()
|
||||
},
|
||||
methods: {
|
||||
async reload(e) {
|
||||
const app = this
|
||||
// 当前登录用户信息
|
||||
const userInfo = await userStore.fetchUserInfo();
|
||||
if (Object.keys(userInfo).length > 0) {
|
||||
app.isLogin = true
|
||||
app.userInfo = userInfo
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
|
||||
// 获取学员列表
|
||||
Api.pageUserAddress({
|
||||
userId: userInfo.userId
|
||||
}).then(res => {
|
||||
app.list = res.list;
|
||||
})
|
||||
|
||||
// 获取地区选择数据
|
||||
// this.regions = this.regions.map(d => {
|
||||
// console.log('d: ',d);
|
||||
// d.text = d.label
|
||||
// return d;
|
||||
// })
|
||||
// Api.getRegions().then(res => {
|
||||
// console.log('res: ',res);
|
||||
// })
|
||||
},
|
||||
navTo(item) {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom')
|
||||
return false;
|
||||
}
|
||||
openUrl(item);
|
||||
},
|
||||
// 弹出登录提示框
|
||||
openLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$refs.login.open('bottom')
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onType(e){
|
||||
this.formData.type = e.detail.value;
|
||||
},
|
||||
onIsDefault(){
|
||||
this.formData.isDefault = !this.formData.isDefault;
|
||||
},
|
||||
// 选用该地址
|
||||
onAddres(item){
|
||||
carStore.setAddress(item)
|
||||
uni.navigateBack()
|
||||
},
|
||||
add() {
|
||||
this.formData = {}
|
||||
this.$refs.addForm.open('center')
|
||||
},
|
||||
openEdit(item) {
|
||||
this.formData = item
|
||||
this.$refs.addForm.open('center')
|
||||
},
|
||||
remove(item) {
|
||||
const app = this
|
||||
uni.showModal({
|
||||
title: '确定要删除吗?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
uni.showLoading({
|
||||
title: '请求中.'
|
||||
})
|
||||
Api.removeUserAddress(item.id).then(res => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'none'
|
||||
})
|
||||
app.$refs.addForm.close()
|
||||
app.reload()
|
||||
})
|
||||
app.reload()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
// 触发提交表单
|
||||
submit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
const saveOrUpdate = this.formData.id ? Api.updateUserAddress : Api.addUserAddress
|
||||
saveOrUpdate(this.formData).then(message => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.$refs.addForm.close()
|
||||
this.reload()
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
console.log('表单数据信息：', res);
|
||||
}).catch(err => {
|
||||
console.log('表单错误信息：', err);
|
||||
})
|
||||
},
|
||||
save() {
|
||||
Api.addUserAddress(this.form).then(msg => {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
})
|
||||
this.$refs.addForm.close()
|
||||
this.reload()
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.hideLoading()
|
||||
this.$refs.addForm.close()
|
||||
this.reload()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.avatar {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.save-user-profile {
|
||||
width: 700rpx;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.add-address {
|
||||
width: 600rpx !important;
|
||||
margin: 40rpx auto;
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
margin: auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
|
||||
.web-text-heading {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.web-text-secondary {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user