index.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209
  1. <template>
  2. <!-- 不同类型进入的loadType(1:学校课程;2:体育馆课程;3:教练课程) -->
  3. <view class="content">
  4. <view class="g-orderinfo-card">
  5. <view class="g-shoping-info" v-if="previewCourseInfo">
  6. <image class="shoping-img" :src="previewCourseInfo.cover" mode=""></image>
  7. <view class="shoping-info">
  8. <view class="name">{{ previewCourseInfo.placeName || previewCourseInfo.name }}</view>
  9. <view class="price-info">
  10. <!-- previewCourseInfo?.originalPrice字段用来判断是课程订单还是场地订单 -->
  11. <view class="price"><text class="mini-text">¥</text>{{ previewCourseInfo?.originalPrice ?
  12. previewCourseInfo?.originalPrice : previewCourseInfo?.sellingPrice.toFixed(2)
  13. }}</view>
  14. <view class="price-stepper">
  15. <view class="minus" @click="minusNum">-</view>
  16. <input v-model="countTotal" disabled type="number" />
  17. <view class="add" @click="addNum">+</view>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="g-shoping-total">
  23. <view class="total-price">
  24. <view class="">商品总价(共{{ countTotal }}件)</view>
  25. <view class="">¥{{
  26. previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice * countTotal).toFixed(2) :
  27. previewCourseInfo?.sellingPrice.toFixed(2)
  28. * countTotal }}</view>
  29. </view>
  30. <view class="total-price">
  31. <view class="">
  32. <text v-if="buyType == 1">试听优惠</text>
  33. <text v-if="buyType == 0 || placeId">团购优惠</text>
  34. </view>
  35. <view class="">-¥
  36. <!-- <text v-if="buyType == 0 || !placeId">{{ previewCourseInfo?.discountPrice }}</text> -->
  37. <text v-if="buyType == 1">{{ previewCourseInfo?.sellingPrice.toFixed(2) }}</text>
  38. <text v-else>{{
  39. previewCourseInfo?.originalPrice ? ((previewCourseInfo?.originalPrice -
  40. previewCourseInfo?.sellingPrice.toFixed(2)) * countTotal).toFixed(2) : (((previewCourseInfo?.sellingPrice-previewCourseInfo?.totalPrice.toFixed(2))) * countTotal).toFixed(2) }}</text>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="subtotal">小计 ¥
  45. <text v-if="buyType == 1">{{ (0 + totalInsurePrice).toFixed(2) }}</text>
  46. <text v-else>{{ previewCourseInfo?.originalPrice ? (previewCourseInfo?.sellingPrice *
  47. countTotal).toFixed(2) : ((previewCourseInfo?.sellingPrice - (previewCourseInfo?.sellingPrice
  48. - previewCourseInfo?.totalPrice)) * countTotal).toFixed(2) }}</text>
  49. </view>
  50. </view>
  51. <!-- 课程进入 -->
  52. <view class="r-insurance" v-for="item in insureIdList" :key="item.id">
  53. <view class="r-insurance-infobox">
  54. <view class="r-image-box">
  55. <image :src="item.coverImg" mode=""></image>
  56. </view>
  57. <view class="r-insurance-title">
  58. <view class="r-insurance-name">
  59. <view class="r-name">{{ item.name }}</view>
  60. <view class="r-tags">不支持退款</view>
  61. </view>
  62. <view class="r-insurance-desc" v-for="(desc, index) in item.insuranceObvious" :key="index">
  63. <text v-for="([key, value], idx) in Object.entries(desc)" :key="key + idx">{{ key }}, {{
  64. value }};</text>
  65. </view>
  66. <view class="r-insurance-type">保险公司:{{ item.insuranceName_dictText }}</view>
  67. <view class="r-insurance-price">
  68. <view class="r-price">¥{{ item.priceDataList[0].insurePrice }}/天·人</view>
  69. <view class="r-insurance-btn" v-if="insureData.length < 1"
  70. @click="gotoInsuracePage(item, item.priceDataList)">去投保
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <view class="line" v-if="insureData.length > 0 && insureId == item.id"></view>
  76. <blcok v-if="insureData.length > 0 && insureId == item.id">
  77. <view class="r-insurance-adduser" v-for="(insureUser, index) in insureData" :key="index">
  78. <view class="r-adduser-btn">
  79. <view class="r-celar" @click="clearUser">清除</view>
  80. <view class="r-edit"
  81. @click="RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(item.priceDataList)}`)">
  82. 修改</view>
  83. </view>
  84. <view class="r-userinfo-list">
  85. <view class="r-userinfo-item">
  86. <view class="r-item-title">被保人</view>
  87. <view class="r-item-info">{{ insureUser.userData.length }}人(<text
  88. v-for="(user, index) in insureUser.userData" :key="user.id">{{ user.fullName }}{{
  89. index < insureUser.userData.length - 1 ? ',' : '' }}</text>)
  90. </view>
  91. </view>
  92. <view class="r-userinfo-item">
  93. <view class="r-item-title">生效时间</view>
  94. <view class="r-item-info">{{ insureUser.slectObj.insureDay }}天({{ insureUser.startDate }}-{{
  95. insureUser.endDate }})
  96. </view>
  97. </view>
  98. <view class="r-userinfo-item">
  99. <view class="r-item-title">保费总金额</view>
  100. <view class="r-item-info">¥{{ insureUser.totalPrice }}</view>
  101. </view>
  102. </view>
  103. </view>
  104. </blcok>
  105. </view>
  106. <view class="g-userinfo-card" v-if="!placeId">
  107. <view class="r-user">
  108. <view class="user-title">用户信息 <text class="mini-text">至少需选择{{ countTotal }}人</text></view>
  109. <view class="invite">
  110. <zzx-icon name="wechat" size="16"></zzx-icon>
  111. <view style="margin-bottom: 8rpx;">邀请微信好友</view>
  112. <zzx-icon name="ashRight" size="12"></zzx-icon>
  113. <button class="g-share-btn" open-type="share"></button>
  114. </view>
  115. </view>
  116. <view class="r-user-list" v-for="item in userData" :key="item.id">
  117. <view class="minus-user" @click="deleteUser(item)">-</view>
  118. <view class="r-list">
  119. <view class="name">{{ item.fullName }}</view>
  120. <view class="id-num">身份证 {{ idCardHide(item.identityCard) }}</view>
  121. </view>
  122. </view>
  123. <view class="g-adduser-btn" @click="toUserList">
  124. <view class="add-icon">+</view>
  125. <view class="add-text">添加用户</view>
  126. </view>
  127. </view>
  128. <view class="g-userinfo-card" v-for="(item, index) in userData" :key="item.id">
  129. <view style="font-size: 28rpx;font-weight: bold;">补充信息{{ index + 1 }}({{ item.fullName }})</view>
  130. <view class="use-is-schoolStutent">
  131. <view class="is-schoolStutent"><text style="color: red;">*</text>是否本校({{ schoolName }})学生</view>
  132. <view class="radio-box">
  133. <view class="select-radio" @click="setSchoolStudent(index, true)">
  134. <zzx-icon :name="schoolStudentStatus[index] === true ? 'selected' : 'unchecked'"
  135. size="14"></zzx-icon>
  136. <view style="margin-bottom: 6rpx;">是</view>
  137. </view>
  138. <view style="width: 40rpx;"></view>
  139. <view class="select-radio" @click="setSchoolStudent(index, false)">
  140. <zzx-icon :name="schoolStudentStatus[index] === false ? 'selected' : 'unchecked'"
  141. size="14"></zzx-icon>
  142. <view style="margin-bottom: 6rpx;">否</view>
  143. </view>
  144. </view>
  145. </view>
  146. <view class="use-select-grade-class" v-if="schoolStudentStatus[index] === true">
  147. <view class="select-grade-title"><text style="color: red;">*</text>年级班级</view>
  148. <view class="select-grade-input">
  149. <input type="text" placeholder="请输入" v-model="gradeClassInfo[index].grade" />
  150. <view>年级</view>
  151. <input type="text" placeholder="请输入" v-model="gradeClassInfo[index].class" />
  152. <view>班</view>
  153. </view>
  154. <view class="select-grade-tips">请输入数字,年级范围为1-12,班级范围为1-40</view>
  155. </view>
  156. </view>
  157. <view class="g-usetips-card">
  158. <view class="use-title">{{ placeId ? '使用须知' : '购买须知' }}</view>
  159. <block v-if="previewCourseInfo?.usableCount && previewCourseInfo?.indate">
  160. <view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">有效期</view>
  161. <view class="use-text">购买后{{ previewCourseInfo?.indate }}天有效</view>
  162. <view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">除外日期</view>
  163. <view class="use-text">每<text v-for="item in previewCourseInfo?.downTime">{{ '周' + item + ' '
  164. }}</text>不可用
  165. </view>
  166. <view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">预约信息</view>
  167. <view class="use-text">{{ previewCourseInfo?.advanceTime == 0 ? '免预约' :
  168. '请你提前' + previewCourseInfo?.advanceTime + '小时预约' }}</view>
  169. <view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">适用人数</view>
  170. <view class="use-text">每张券最多{{ previewCourseInfo?.usableCount }}人使用</view>
  171. <view class="use-title" style="font-size: 24rpx;margin-top: 14rpx;">温馨提示</view>
  172. </block>
  173. <view class="use-text">
  174. <view class="item-text">
  175. <rich-text :nodes="fixImgStyle(previewCourseInfo?.reminder)"></rich-text>
  176. </view>
  177. </view>
  178. </view>
  179. <view class="g-usetips-card">
  180. <view class="use-title">服务保障</view>
  181. <view class="use-text">
  182. <view>退款规则</view>
  183. <view class="item-text">
  184. {{ previewCourseInfo?.refundType == 1 ? '未消费随时退款,过期未消费自动退款。' : '不支退款,请慎重考虑后购买。' }}
  185. </view>
  186. </view>
  187. </view>
  188. <view style="height: 166rpx;"></view>
  189. <view class="footer footer-box">
  190. <view class="footer-price">
  191. <view class="total-price">合计:</view>
  192. <view class="price">
  193. <text class="mini-text">¥</text>
  194. <text>{{
  195. previewCourseInfo?.originalPrice ? (previewCourseInfo?.originalPrice * countTotal).toFixed(2) :
  196. ((previewCourseInfo?.sellingPrice
  197. || 0) * countTotal + totalInsurePrice).toFixed(2) }}</text>
  198. </view>
  199. <view class="discount">优惠¥
  200. <text v-if="buyType == 1">{{ previewCourseInfo?.sellingPrice.toFixed(2) }}</text>
  201. <text v-else>{{
  202. previewCourseInfo?.originalPrice ? ((previewCourseInfo?.originalPrice -
  203. previewCourseInfo?.sellingPrice.toFixed(2)) * countTotal).toFixed(2) : (((previewCourseInfo?.sellingPrice
  204. -
  205. previewCourseInfo?.totalPrice.toFixed(2))) * countTotal).toFixed(2) }}</text>
  206. </view>
  207. </view>
  208. <view class="footer-btn" @click="submitOrder">
  209. <button>
  210. <view class="btn-price">
  211. <text v-if="buyType == 1">{{ (0 + totalInsurePrice).toFixed(2) }}</text>
  212. <text v-else>
  213. ¥{{ previewCourseInfo?.originalPrice ? (previewCourseInfo?.sellingPrice *
  214. countTotal).toFixed(2) :
  215. (((previewCourseInfo?.sellingPrice || 0) - ((previewCourseInfo?.sellingPrice || 0) -
  216. (previewCourseInfo?.totalPrice || 0))) * countTotal + totalInsurePrice).toFixed(2) }}</text>
  217. </view>
  218. <view class="btn-price">立即支付</view>
  219. </button>
  220. </view>
  221. </view>
  222. </view>
  223. <uni-popup ref="insurePopup" type="center">
  224. <view class="r-center-popup" v-if="agreementContent">
  225. <view class="r-popup-title">{{ agreementContent.protocolName }}</view>
  226. <view class="r-popup-content">
  227. <rich-text :nodes="agreementContent.protocolContent"></rich-text>
  228. </view>
  229. <view class="r-popup-footer">
  230. <view class="r-popup-needbtn" @click="toNeed">我需要购买保险</view>
  231. <view class="r-popup-refusebtn" @click="toRefuse">我拒绝购买保险</view>
  232. <view class="r-popup-checkbox" @click="select_insurance = !select_insurance">
  233. <zzx-icon :name="select_insurance ? 'selected' : 'unchecked'" size="14"></zzx-icon>
  234. <text>我已认真阅读及确认</text>
  235. </view>
  236. </view>
  237. </view>
  238. </uni-popup>
  239. </template>
  240. <script lang="ts" setup>
  241. import { ref, onMounted, computed, watch } from 'vue';
  242. import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
  243. import { RouterUtils, TipsUtils, idCardHide, debounce, fixImgStyle } from '@/utils/util';
  244. import { http } from '@/utils/http'
  245. import { useCacheStore } from '@/stores/cache'
  246. const cache = useCacheStore()
  247. const insurePopup = ref()
  248. const select_insurance = ref(false)
  249. const loadType = ref(1)
  250. const buyType = ref()
  251. const placeId = ref()
  252. const schoolName = ref()
  253. onLoad((options) => {
  254. console.log(options);
  255. loadType.value = options.type
  256. courseId.value = options.courseId
  257. placeId.value = options.placeId
  258. buyType.value = options.buyType
  259. schoolName.value = options.schoolName
  260. orderFormData.value.type = options.orderType
  261. orderFormData.value.orFreeOrder = options.buyType
  262. orderFormData.value.amount = 1
  263. })
  264. onShareAppMessage((res) => {
  265. if (res.from === 'button') {
  266. console.log(res.target)
  267. }
  268. return {
  269. title: '邀请您加入',
  270. path: `pages/index/userList/index?userId=${cache.get('USER_INFO').id}`
  271. }
  272. })
  273. onMounted(() => {
  274. if (placeId.value) {
  275. getEventsDetail()
  276. } else {
  277. get_previewOrderCourse()
  278. }
  279. get_userData()
  280. getInsureData()
  281. })
  282. // 设置某个用户是否为学生
  283. const setSchoolStudent = (index, isStudent) => {
  284. if (schoolStudentStatus.value[index] === true && isStudent === false) {
  285. gradeClassInfo.value[index].grade = '';
  286. gradeClassInfo.value[index].class = '';
  287. }
  288. schoolStudentStatus.value[index] = isStudent;
  289. };
  290. const toUserList = () => {
  291. RouterUtils.to_page('/pages/index/userList/index')
  292. }
  293. const userData = ref([])
  294. const get_userData = () => {
  295. uni.$on('userData', function (data) {
  296. userData.value = data
  297. if (data.length > 0) {
  298. let familyIds = data.map(item => item.id)
  299. orderFormData.value.familyIds = familyIds.join(',')
  300. } else {
  301. orderFormData.value.familyIds = []
  302. }
  303. })
  304. }
  305. const schoolStudentStatus = ref([])
  306. const gradeClassInfo = ref([])
  307. // 分班状态监听
  308. watch(userData, (newUserData) => {
  309. schoolStudentStatus.value = new Array(newUserData.length).fill(null);
  310. gradeClassInfo.value = new Array(newUserData.length).fill(null).map(() => ({
  311. grade: '',
  312. class: ''
  313. }));
  314. }, { immediate: true });
  315. const deleteUser = async (e) => {
  316. let res: any = await TipsUtils.tips_alert('确定删除该用户吗?', true)
  317. if (res.confirm) {
  318. userData.value = userData.value.filter(user => user.id !== e.id)
  319. let familyIds = userData.value.map(item => item.id)
  320. orderFormData.value.familyIds = familyIds.join(',')
  321. }
  322. }
  323. const priceDataListData = ref([])
  324. const insureId = ref()
  325. const gotoInsuracePage = (e1: any, e2: any) => {
  326. insureId.value = e1.id
  327. getFindByType(e1.insuranceName)
  328. priceDataListData.value = e2
  329. orderFormData.value.insureOrderInfoForm.insureId = e1.id
  330. }
  331. const agreementContent = ref()
  332. const getFindByType = (insuranceName: any) => {
  333. http.get('/my/feedback/findByType', { data: { insuranceName: insuranceName, protocolType: 0 }, loading: true }).then((res: any) => {
  334. agreementContent.value = res.result
  335. insurePopup.value.open()
  336. })
  337. }
  338. const courseId = ref()
  339. const previewCourseInfo = ref()
  340. const insureIdList = ref([]) // 保险列表
  341. const insurePrice = ref() // 保险价格
  342. // 课程预览
  343. const get_previewOrderCourse = () => {
  344. http.get('/order/previewOrderCourse', { data: { courseId: courseId.value }, loading: true }).then((res) => {
  345. previewCourseInfo.value = res.result
  346. orderFormData.value.productIds = res.result.id
  347. res.result.insureIdList.map((item: any) => {
  348. item.insuranceObvious = JSON.parse(item.insuranceObvious)
  349. item.insuranceObvious = [item.insuranceObvious]
  350. item.priceDataList.map((item2: any) => {
  351. if (item2.insureDay === 1) {
  352. insurePrice.value = item2.insurePrice
  353. }
  354. })
  355. })
  356. insureIdList.value = res.result.insureIdList
  357. })
  358. }
  359. // 场地预览
  360. const getEventsDetail = () => {
  361. http.get('/order/PreviewOrderPlaceGymnasiumNoFixation', { data: { placeId: placeId.value }, loading: true }).then((res) => {
  362. previewCourseInfo.value = res.result
  363. orderFormData.value.productIds = res.result.id || res.result.placeId
  364. })
  365. }
  366. const insureData = ref([])
  367. const getInsureData = () => {
  368. uni.$on('insureData', function (data) {
  369. insureData.value = data
  370. console.log(insureData.value, '投保人信息');
  371. orderFormData.value.insureOrderInfoForm.assertStartTime = insureData.value[0].startDate
  372. orderFormData.value.insureOrderInfoForm.assertEndTime = insureData.value[0].endDate
  373. orderFormData.value.insureOrderInfoForm.insurePriceId = insureData.value[0].slectObj.id
  374. if (data.length > 0) {
  375. let familyMembersIds = data[0].userData.map(item => item.id)
  376. orderFormData.value.insureOrderInfoForm.familyMembersIds = familyMembersIds.join(',')
  377. } else {
  378. orderFormData.value.insureOrderInfoForm.familyMembersIds = []
  379. }
  380. })
  381. }
  382. // 计算保费
  383. const totalInsurePrice = computed(() => {
  384. if (!insureData.value || insureData.value.length === 0) {
  385. return 0;
  386. }
  387. if (insureData.value.length === 1) {
  388. return parseFloat(insureData.value[0].totalPrice) || 0;
  389. }
  390. return insureData.value.reduce((total, insure) => total + (parseFloat(insure.totalPrice) || 0), 0);
  391. });
  392. const clearUser = async () => {
  393. let res: any = await TipsUtils.tips_alert('确定清除投保人信息吗?', true)
  394. if (res.confirm) {
  395. insureData.value = []
  396. }
  397. }
  398. const countTotal = ref(1)
  399. const minusNum = () => {
  400. if (countTotal.value > 1) {
  401. countTotal.value--
  402. orderFormData.value.amount = countTotal.value
  403. }
  404. }
  405. const addNum = () => {
  406. if (buyType.value == 1) return TipsUtils.tips_toast('试听课程不支持多个购买')
  407. if (courseId.value) {
  408. get_checkCourseLimitNum(countTotal.value + 1)
  409. } else {
  410. countTotal.value++
  411. }
  412. }
  413. const get_checkCourseLimitNum = (targetNum) => {
  414. http.get('/order/checkCourseLimitNum', {
  415. data: {
  416. courseId: courseId.value,
  417. limitNum: targetNum
  418. },
  419. loading: true
  420. }).then((res) => {
  421. if (res.result === true) {
  422. countTotal.value = targetNum
  423. } else {
  424. TipsUtils.tips_toast('超出可购数量')
  425. }
  426. })
  427. }
  428. const toNeed = () => {
  429. if (!select_insurance.value) return TipsUtils.tips_toast('请先阅读并同意协议')
  430. RouterUtils.to_page(`/pages/index/insure/index?priceDataList=${JSON.stringify(priceDataListData.value)}`)
  431. insurePopup.value.close()
  432. }
  433. const toRefuse = () => {
  434. if (select_insurance.value) {
  435. insurePopup.value.close()
  436. } else {
  437. TipsUtils.tips_toast('请先阅读并同意协议')
  438. }
  439. }
  440. let orderFormData = ref({
  441. type: null,
  442. orderType: null,
  443. orFreeOrder: null, //0正常 1试听
  444. productIds: null,
  445. amount: null,
  446. familyIds: '',
  447. insureOrderInfoForm: {
  448. insureId: '',
  449. assertStartTime: '',
  450. assertEndTime: '',
  451. insurePriceId: '',
  452. familyMembersIds: '',
  453. },
  454. addGradeLevelInformation: []
  455. })
  456. const orderCode = ref(null)
  457. const orderId = ref(null)
  458. const submitOrderImpl = () => {
  459. orderFormData.value.amount = countTotal.value
  460. for (let i = 0; i < userData.value.length; i++) {
  461. if (schoolStudentStatus.value[i] === null || schoolStudentStatus.value[i] === undefined) {
  462. return TipsUtils.tips_toast(`请为${userData.value[i].fullName}选择是否本校学生`);
  463. }
  464. if (schoolStudentStatus.value[i] === true) {
  465. const grade = gradeClassInfo.value[i].grade;
  466. const clazz = gradeClassInfo.value[i].class;
  467. if (!grade || !clazz) {
  468. return TipsUtils.tips_toast(`请为${userData.value[i].fullName}输入完整的年级和班级信息`);
  469. }
  470. const gradeNum = parseInt(grade);
  471. const classNum = parseInt(clazz);
  472. if (isNaN(gradeNum) || gradeNum < 1 || gradeNum > 12) {
  473. return TipsUtils.tips_toast(`请为${userData.value[i].fullName}输入有效的年级(1-12)`);
  474. }
  475. if (isNaN(classNum) || classNum < 1 || classNum > 40) {
  476. return TipsUtils.tips_toast(`请为${userData.value[i].fullName}输入有效的班级(1-40)`);
  477. }
  478. }
  479. }
  480. orderFormData.value.addGradeLevelInformation = userData.value.map((user, index) => ({
  481. class: schoolStudentStatus.value[index] === true ? gradeClassInfo.value[index].class : '',
  482. familyId: user.id,
  483. levelInfo: schoolStudentStatus.value[index] === true ? `${gradeClassInfo.value[index].grade}年级 ${gradeClassInfo.value[index].class}班` : ''
  484. }));
  485. // 计算总金额
  486. let totalPrice = 0;
  487. if (previewCourseInfo.value?.originalPrice) {
  488. totalPrice = previewCourseInfo.value.originalPrice * countTotal.value;
  489. } else {
  490. const sellingPrice = previewCourseInfo.value?.sellingPrice || 0;
  491. const totalPriceValue = previewCourseInfo.value?.totalPrice || 0;
  492. totalPrice = ((sellingPrice - (sellingPrice - totalPriceValue)) * countTotal.value + totalInsurePrice.value);
  493. }
  494. if (!placeId.value) {
  495. if (!userData.value) return TipsUtils.tips_toast('请添加用户信息')
  496. if (userData.value.length < countTotal.value) return TipsUtils.tips_toast(`请至少选择${countTotal.value}人`)
  497. if (userData.value.length > countTotal.value) return TipsUtils.tips_toast(`最多选择${countTotal.value}人`)
  498. orderFormData.value.orderType = 5
  499. orderFormData.value.type = 2
  500. } else {
  501. orderFormData.value.type = 0
  502. orderFormData.value.orderType = 2
  503. }
  504. let data = { ...orderFormData.value };
  505. if (!insureData.value || insureData.value.length === 0) {
  506. delete data.insureOrderInfoForm;
  507. }
  508. if (!userData || userData.value.length === 0) {
  509. delete data.familyIds
  510. }
  511. // 如果总金额为0,直接创建订单并跳转,不调用微信支付
  512. if (totalPrice === 0 || buyType.value == 1) {
  513. http.post('/order/createOrder', data, { loading: true }).then((res) => {
  514. orderCode.value = res.result.orderCode
  515. orderId.value = res.result.orderId
  516. // 直接查询订单状态,模拟支付成功
  517. getOrderQuery(orderCode.value, orderId.value)
  518. })
  519. return;
  520. }
  521. uni.requestSubscribeMessage({
  522. tmplIds: ['HbK-qbIC_iTY0w08xfkgirdeR_VrVhetLwEIBo3Lue4', 'T2icwNiI--oBnLfTiAniAoAJAwq1Ukb78bCjIcpuTRQ'],
  523. success(res) {
  524. TipsUtils.tips_toast('订阅成功')
  525. http.post('/order/createOrder', data, { loading: true }).then((res) => {
  526. orderCode.value = res.result.orderCode
  527. orderId.value = res.result.orderId
  528. paymentOrder(res.result.params)
  529. })
  530. },
  531. fail(err) {
  532. console.log(err, '订阅消息失败')
  533. http.post('/order/createOrder', data, { loading: true }).then((res) => {
  534. orderCode.value = res.result.orderCode
  535. orderId.value = res.result.orderId
  536. paymentOrder(res.result.params)
  537. })
  538. }
  539. })
  540. }
  541. const paymentOrder = (payInfo: object) => {
  542. // getOrderQuery(orderCode.value, orderId.value)
  543. console.log(payInfo, '支付参数');
  544. uni.requestPayment({
  545. provider: 'wxpay',
  546. ...payInfo,
  547. success: function (res) {
  548. console.log('支付成功', res);
  549. setTimeout(() => {
  550. getOrderQuery(orderCode.value, orderId.value)
  551. }, 500)
  552. },
  553. fail: function (err) {
  554. console.log('支付失败', err);
  555. if (err.errMsg == 'requestPayment:fail cancel') {
  556. RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${orderId.value}&orderType=${orderFormData.value.orderType}`)
  557. return
  558. } else {
  559. RouterUtils.to_page(`/pages/index/payError/index?errMsg=${err.errMsg}`)
  560. }
  561. // TipsUtils.tips_toast('支付失败,请稍后重试');
  562. }
  563. });
  564. }
  565. const submitOrder = debounce(submitOrderImpl, 500)
  566. // code编码 "100001支付成功";"100002查询失败"; "100003查询中 "; "100004支付失败"
  567. const getOrderQuery = (orderCode: string, orderId: string, retryCount = 0) => {
  568. http.get('/order/orderQuery', { data: { orderCode: orderCode }, loading: true }).then((res) => {
  569. if (res.result == '100001') {
  570. RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${orderId}&orderType=${orderFormData.value.orderType}`)
  571. } else if (retryCount <= 3) {
  572. setTimeout(() => {
  573. getOrderQuery(orderCode, orderId, retryCount + 1)
  574. }, 1000)
  575. } else {
  576. if (res.result == '100003') {
  577. console.log('查询中,但已达到最大查询次数')
  578. } else if (res.result == '100002') {
  579. console.log('查询失败')
  580. } else if (res.result == '100004') {
  581. console.log('支付失败')
  582. TipsUtils.tips_toast('支付失败')
  583. }
  584. }
  585. }).catch((error) => {
  586. console.error('查询订单失败:', error)
  587. if (retryCount < 2) {
  588. setTimeout(() => {
  589. getOrderQuery(orderCode, orderId, retryCount + 1)
  590. }, 1000)
  591. }
  592. })
  593. }
  594. </script>
  595. <style lang="less" scoped>
  596. .g-orderinfo-card {
  597. background: #FFFFFF;
  598. border-radius: 32rpx;
  599. padding: 20rpx;
  600. margin-top: 20rpx;
  601. .g-shoping-info {
  602. display: flex;
  603. align-items: center;
  604. gap: 20rpx;
  605. .shoping-img {
  606. width: 200rpx;
  607. height: 200rpx;
  608. border-radius: 32rpx;
  609. }
  610. .shoping-info {
  611. width: 440rpx;
  612. .name {
  613. font-weight: 800;
  614. font-size: 32rpx;
  615. color: #222222;
  616. line-height: 44rp
  617. }
  618. .price-info {
  619. display: flex;
  620. align-items: center;
  621. justify-content: space-between;
  622. margin-top: 26rpx;
  623. .price {
  624. font-weight: 800;
  625. font-size: 48rpx;
  626. color: #FB5B5B;
  627. }
  628. .price-stepper {
  629. display: flex;
  630. align-items: center;
  631. border: 1rpx solid #F0F0F0;
  632. border-radius: 8rpx;
  633. .minus {
  634. text-align: center;
  635. width: 44rpx;
  636. border-right: 1rpx solid #F0F0F0;
  637. }
  638. &>input {
  639. width: 80rpx;
  640. font-size: 28rpx;
  641. color: #222222;
  642. text-align: center;
  643. }
  644. .add {
  645. text-align: center;
  646. width: 44rpx;
  647. border-left: 1rpx solid #F0F0F0;
  648. }
  649. }
  650. }
  651. }
  652. }
  653. .g-shoping-total {
  654. height: 148rpx;
  655. margin-top: 24rpx;
  656. border-top: 1rpx solid #F0F0F0;
  657. .total-price {
  658. margin-top: 24rpx;
  659. display: flex;
  660. align-items: center;
  661. justify-content: space-between;
  662. font-size: 28rpx;
  663. color: #222222;
  664. }
  665. }
  666. .subtotal {
  667. border-top: 1rpx solid #F0F0F0;
  668. height: 84rpx;
  669. line-height: 84rpx;
  670. font-weight: bold;
  671. font-size: 28rpx;
  672. color: #FB5B5B;
  673. text-align: right;
  674. }
  675. }
  676. .g-buy-tips {
  677. margin-top: 20rpx;
  678. .tips-title {
  679. font-weight: bold;
  680. font-size: 32rpx;
  681. color: #222222;
  682. }
  683. .tips-info-card {
  684. background: #FFFFFF;
  685. border-radius: 32rpx;
  686. padding: 20rpx;
  687. margin-top: 20rpx;
  688. .title {
  689. font-weight: bold;
  690. font-size: 28rpx;
  691. color: #222222;
  692. }
  693. .text {
  694. font-size: 24rpx;
  695. color: #AAAAAA;
  696. margin-top: 20rpx;
  697. margin-bottom: 20rpx;
  698. }
  699. }
  700. }
  701. .r-insurance {
  702. margin-top: 20rpx;
  703. padding: 20rpx;
  704. background: #FFFFFF;
  705. border-radius: 32rpx;
  706. .r-insurance-infobox {
  707. display: flex;
  708. align-items: center;
  709. justify-content: space-between;
  710. gap: 20rpx;
  711. margin-bottom: 20rpx;
  712. .r-image-box {
  713. &>image {
  714. width: 200rpx;
  715. height: 200rpx;
  716. border-radius: 32rpx;
  717. }
  718. }
  719. .r-insurance-title {
  720. .r-insurance-name {
  721. display: flex;
  722. align-items: center;
  723. gap: 16rpx;
  724. .r-name {
  725. font-weight: 800;
  726. font-size: 28rpx;
  727. color: #222222;
  728. }
  729. .r-tags {
  730. width: 136rpx;
  731. height: 36rpx;
  732. background: #FDD143;
  733. border-radius: 8rpx;
  734. font-size: 22rpx;
  735. color: #222222;
  736. text-align: center;
  737. line-height: 36rpx;
  738. }
  739. }
  740. .r-insurance-desc {
  741. width: 440rpx;
  742. margin-top: 10rpx;
  743. font-size: 24rpx;
  744. color: #AAAAAA;
  745. }
  746. .r-insurance-type {
  747. margin-top: 10rpx;
  748. font-size: 24rpx;
  749. color: #AAAAAA;
  750. }
  751. .r-insurance-price {
  752. display: flex;
  753. align-items: center;
  754. justify-content: space-between;
  755. .r-price {
  756. font-weight: bold;
  757. font-size: 28rpx;
  758. color: #FB5B5B;
  759. }
  760. .r-insurance-btn {
  761. width: 200rpx;
  762. height: 68rpx;
  763. background: #C8FF0C;
  764. border-radius: 60rpx;
  765. font-weight: bold;
  766. font-size: 28rpx;
  767. color: #222222;
  768. text-align: center;
  769. line-height: 68rpx;
  770. }
  771. }
  772. }
  773. }
  774. .r-insurance-adduser {
  775. background: #F6F6F6;
  776. border-radius: 32rpx;
  777. padding: 20rpx;
  778. margin-top: 20rpx;
  779. .r-adduser-btn {
  780. display: flex;
  781. align-items: center;
  782. justify-content: flex-end;
  783. gap: 20rpx;
  784. .r-celar {
  785. width: 192rpx;
  786. height: 60rpx;
  787. background: #FFFFFF;
  788. border-radius: 60rpx;
  789. border: 2rpx solid #FB5B5B;
  790. font-weight: bold;
  791. font-size: 28rpx;
  792. color: #FB5B5B;
  793. text-align: center;
  794. line-height: 68rpx;
  795. }
  796. .r-edit {
  797. width: 200rpx;
  798. height: 68rpx;
  799. background: #C8FF0C;
  800. border-radius: 60rpx;
  801. font-weight: bold;
  802. font-size: 28rpx;
  803. color: #222222;
  804. text-align: center;
  805. line-height: 68rpx;
  806. }
  807. }
  808. .r-userinfo-list {
  809. .r-userinfo-item {
  810. display: flex;
  811. align-items: center;
  812. justify-content: space-between;
  813. margin-top: 20rpx;
  814. .r-item-title {
  815. font-size: 28rpx;
  816. color: #AAAAAA;
  817. }
  818. .r-item-info {
  819. font-size: 28rpx;
  820. color: #222222;
  821. }
  822. }
  823. }
  824. }
  825. }
  826. .g-userinfo-card {
  827. margin-top: 20rpx;
  828. padding: 20rpx;
  829. background: #FFFFFF;
  830. border-radius: 32rpx;
  831. .use-is-schoolStutent {
  832. .is-schoolStutent {
  833. font-size: 24rpx;
  834. color: #222222;
  835. }
  836. .radio-box {
  837. display: flex;
  838. align-items: center;
  839. font-size: 24rpx;
  840. margin-top: 20rpx;
  841. .select-radio {
  842. display: flex;
  843. align-items: center;
  844. gap: 8rpx;
  845. }
  846. }
  847. }
  848. .use-select-grade-class {
  849. margin-top: 20rpx;
  850. font-size: 24rpx;
  851. .select-grade-title {
  852. margin-top: 20rpx;
  853. }
  854. .select-grade-input {
  855. display: flex;
  856. align-items: center;
  857. gap: 8rpx;
  858. margin-top: 20rpx;
  859. &>input {
  860. width: 132rpx;
  861. height: 60rpx;
  862. background-color: rgba(246, 246, 246, 1);
  863. border-radius: 16rpx;
  864. text-align: center;
  865. }
  866. }
  867. .select-grade-tips {
  868. margin-top: 20rpx;
  869. font-size: 24rpx;
  870. color: #AAAAAA;
  871. }
  872. }
  873. .r-user {
  874. display: flex;
  875. align-items: center;
  876. justify-content: space-between;
  877. .user-title {
  878. font-weight: bold;
  879. font-size: 28rpx;
  880. color: #222222;
  881. }
  882. .invite {
  883. display: flex;
  884. align-items: center;
  885. gap: 8rpx;
  886. font-size: 24rpx;
  887. color: #AAAAAA;
  888. position: relative;
  889. .g-share-btn {
  890. position: absolute;
  891. width: 200rpx;
  892. height: 60rpx;
  893. opacity: 0;
  894. }
  895. }
  896. }
  897. .user-tags {
  898. margin-top: 20rpx;
  899. width: 112rpx;
  900. height: 40rpx;
  901. background: #FDD143;
  902. border-radius: 8rpx;
  903. line-height: 40rpx;
  904. font-weight: bold;
  905. font-size: 28rpx;
  906. color: #222222;
  907. text-align: center;
  908. font-size: 28rpx;
  909. color: #222222;
  910. }
  911. .r-user-list {
  912. margin-top: 20rpx;
  913. display: flex;
  914. align-items: center;
  915. gap: 20rpx;
  916. border-top: 1rpx solid #F0F0F0;
  917. height: 140rpx;
  918. .minus-user {
  919. width: 30rpx;
  920. height: 30rpx;
  921. border-radius: 50%;
  922. background: #FB5B5B;
  923. text-align: center;
  924. line-height: 20rpx;
  925. font-weight: 600;
  926. color: #fff;
  927. font-size: 40rpx;
  928. }
  929. .r-list {
  930. .name {
  931. font-weight: bold;
  932. font-size: 28rpx;
  933. color: #222222;
  934. }
  935. .id-num {
  936. font-size: 28rpx;
  937. color: #222222;
  938. }
  939. }
  940. }
  941. .g-adduser-btn {
  942. display: flex;
  943. height: 88rpx;
  944. align-items: center;
  945. justify-content: center;
  946. gap: 20rpx;
  947. border-top: 1rpx solid #F0F0F0;
  948. .add-icon {
  949. width: 30rpx;
  950. height: 30rpx;
  951. border-radius: 50%;
  952. background: #FDD143;
  953. font-size: 30rpx;
  954. font-weight: 600;
  955. color: #fff;
  956. text-align: center;
  957. line-height: 20rpx;
  958. }
  959. .add-text {
  960. font-size: 28rpx;
  961. color: #FDD143;
  962. }
  963. }
  964. }
  965. .g-usetips-card {
  966. margin-top: 20rpx;
  967. padding: 20rpx;
  968. background: #FFFFFF;
  969. border-radius: 32rpx;
  970. .use-title {
  971. font-weight: bold;
  972. font-size: 28rpx;
  973. color: #222222;
  974. }
  975. .use-text {
  976. font-size: 24rpx;
  977. color: #222222;
  978. .item-text {
  979. margin-top: 20rpx;
  980. }
  981. }
  982. .use-tips-more {
  983. margin-top: 20rpx;
  984. .more-text {
  985. text-align: center;
  986. font-size: 24rpx;
  987. color: #CCCCCC;
  988. }
  989. .use-line {
  990. margin: auto;
  991. margin-top: 10rpx;
  992. width: 38rpx;
  993. height: 4rpx;
  994. background: #CCCCCC;
  995. border-radius: 2rpx;
  996. }
  997. }
  998. }
  999. .footer {
  1000. left: 0;
  1001. .footer-price {
  1002. display: flex;
  1003. align-items: center;
  1004. .total-price {
  1005. font-weight: bold;
  1006. font-size: 28rpx;
  1007. color: #222222;
  1008. }
  1009. .price {
  1010. font-weight: 800;
  1011. font-size: 48rpx;
  1012. color: #FB5B5B;
  1013. }
  1014. .discount {
  1015. margin-left: 10rpx;
  1016. font-size: 24rpx;
  1017. color: #222222;
  1018. }
  1019. }
  1020. .footer-btn {
  1021. &>button {
  1022. width: 226rpx;
  1023. height: 100rpx;
  1024. background: #C8FF0C;
  1025. border-radius: 60rpx;
  1026. font-weight: bold;
  1027. font-size: 26rpx;
  1028. color: #222222;
  1029. line-height: 30rpx;
  1030. .btn-price:nth-child(1) {
  1031. margin-top: 20rpx;
  1032. }
  1033. }
  1034. &>button::after {
  1035. border: none;
  1036. }
  1037. }
  1038. }
  1039. .r-center-popup {
  1040. width: 646rpx;
  1041. max-height: 1000rpx;
  1042. background: #F6F6F6;
  1043. border-radius: 32rpx;
  1044. padding: 20rpx;
  1045. .r-popup-title {
  1046. font-weight: bold;
  1047. font-size: 32rpx;
  1048. color: #222222;
  1049. text-align: center;
  1050. }
  1051. .r-popup-content {
  1052. margin-top: 28rpx;
  1053. font-size: 28rpx;
  1054. color: #222222;
  1055. max-height: 600rpx;
  1056. overflow: auto;
  1057. }
  1058. .r-popup-footer {
  1059. margin-top: 20rpx;
  1060. .r-popup-needbtn {
  1061. margin: auto;
  1062. width: 598rpx;
  1063. height: 100rpx;
  1064. background: #C8FF0C;
  1065. border-radius: 60rpx;
  1066. font-weight: bold;
  1067. font-size: 32rpx;
  1068. color: #222222;
  1069. text-align: center;
  1070. line-height: 100rpx;
  1071. }
  1072. .r-popup-refusebtn {
  1073. margin: auto;
  1074. margin-top: 24rpx;
  1075. width: 598rpx;
  1076. height: 100rpx;
  1077. background: #f0eeee;
  1078. border-radius: 60rpx;
  1079. font-weight: bold;
  1080. font-size: 32rpx;
  1081. color: #AAAAAA;
  1082. text-align: center;
  1083. line-height: 100rpx;
  1084. }
  1085. .r-popup-checkbox {
  1086. margin-top: 20rpx;
  1087. display: flex;
  1088. align-items: center;
  1089. justify-content: center;
  1090. gap: 16rpx;
  1091. font-size: 24rpx;
  1092. color: #AAAAAA;
  1093. &>text {
  1094. margin-bottom: 8rpx;
  1095. }
  1096. }
  1097. }
  1098. }
  1099. </style>