order_confirm.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773
  1. <!-- 订单确认页 -->
  2. <template>
  3. <view class="order_confirm" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
  4. <view class="all">
  5. <view class="title">您选择的{{ setData.packageName }}</view>
  6. <view class="menu">
  7. <view class="amounts flex jcsb">
  8. <view class="amontl">
  9. <view class="now flex aife">
  10. <text class="dw fs40">¥</text>
  11. <text class="num">{{ setData.currentPrice }}</text>
  12. <text class="unit">/条</text>
  13. </view>
  14. <view class="past flex aic">
  15. <text class="past_text fs28">原价</text>
  16. <text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
  17. </view>
  18. </view>
  19. <view class="amontr">
  20. <text class="num">{{ strip }}</text>
  21. <text class="unit">条</text>
  22. </view>
  23. </view>
  24. <view class="choose">
  25. <view v-for="(item, index) in setData.selectContents" :key="index"
  26. class="choose_item-box flex aic jcsb">
  27. <view class="choose_item flex aic">
  28. <image :src="guoxuanImg"></image>
  29. <text>{{ item.configKey }}可选 {{ item.count || 0 }} 个</text>
  30. </view>
  31. <view v-if="index == 0" class="choose_item-more flex aic" @click="toDetail">
  32. <text>查看更多</text>
  33. <image :src="moreBImg"></image>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="choosion">
  39. <view class="name">选择内容</view>
  40. <view class="content">
  41. <view v-for="(item, index) in orderContents" :key="index" class="content_item flex aic jcsb"
  42. @click="chooseScene(item, index)">
  43. <view class="aic flex">
  44. <view class="item_label">{{ item.name }}</view>
  45. <view v-if="item.scenes.length > 0" class="item_num">{{ item.scenes.join('; ') }}</view>
  46. <view v-else class="item_text">{{ setData.packageName }}可选 {{ item.count || 0 }} 个{{
  47. item.name
  48. }}
  49. </view>
  50. </view>
  51. <image class="more_img" :src="moreImg"></image>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="choosion">
  56. <view class="name">支付方式</view>
  57. <view class="content">
  58. <view class="content_item flex aic jcsb">
  59. <view class="aic flex">
  60. <image class="icon_img" :src="weixinImg"></image>
  61. <view class="item_name">微信支付</view>
  62. </view>
  63. <image class="icon_img" :src="guoyuanImg"></image>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="choosion">
  68. <view class="name">收件方式</view>
  69. <view class="content">
  70. <view class="content_item flex aic jcsb">
  71. <view class="aic flex">
  72. <view class="item_label">收件人</view>
  73. <u--input v-model="formData.recipientName" placeholder="输入收件人姓名" fontSize="14"
  74. :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
  75. </view>
  76. </view>
  77. <view class="content_item flex aic jcsb">
  78. <view class="aic flex">
  79. <view class="item_label">联系电话</view>
  80. <u--input v-model="formData.contactPhone" placeholder="输入手机号码" fontSize="14"
  81. :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
  82. </view>
  83. </view>
  84. <view class="content_item flex aic jcsb">
  85. <view class="aic flex">
  86. <view class="item_label">收件地址</view>
  87. <u--input v-model="formData.email" placeholder="输入电子邮箱或网盘" fontSize="14"
  88. :customStyle="{ 'margin-left': '48rpx', 'padding': 0 }"></u--input>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="choosion">
  94. <view class="name">需求相关</view>
  95. <view class="content">
  96. <view class="content_item flex aic jcsb">
  97. <view class="flex">
  98. <view class="item_label">以往案例</view>
  99. <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
  100. :maxCount="5">
  101. <view class="item_updata">
  102. <image :src="upImg"></image>
  103. <text>上传案例</text>
  104. </view>
  105. </u-upload>
  106. </view>
  107. </view>
  108. <view class="content_item flex aic jcsb">
  109. <view class="flex w100">
  110. <view class="item_label pt18">拍摄需求</view>
  111. <u--textarea v-model="formData.shootingRequirements" placeholder="简单描述您的拍摄需求" count
  112. maxlength="200"></u--textarea>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. <view class="agree">
  118. <text>点击“确认支付”,即代表您已阅读并同意</text>
  119. <text class="agree_text">《用户购买协议》</text>
  120. </view>
  121. </view>
  122. <view class="btom">
  123. <view class="sum">
  124. <text>应付款:</text>
  125. <text class="money">
  126. <text class="unit">¥</text>
  127. {{ numMultiR }}
  128. </text>
  129. </view>
  130. <view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="submitOrder">立即购买</view>
  131. </view>
  132. <u-popup ref="uPicker" mode="bottom" :loading="loading" :show="isSelect" round="12" @close="close" @open="open"
  133. :customStyle="{ height: '100px' }">
  134. <view class="popup_content safe-area-inset-bottom">
  135. <view class="checkbox">
  136. <u-checkbox-group v-model="checked" placement="column" iconPlacement="right"
  137. @change="checkboxChange">
  138. <u-checkbox v-for="(item, index) in configData" :key="index" :label="item" :name="item"
  139. :customStyle="{ marginBottom: '24px' }" :disabled="isDisabled(item)"></u-checkbox>
  140. </u-checkbox-group>
  141. </view>
  142. <view class="btns flex aic jcsb">
  143. <view class="cancel" @click="close">取消</view>
  144. <view class="confirm" @click="confirm">确认</view>
  145. </view>
  146. </view>
  147. </u-popup>
  148. </view>
  149. </template>
  150. <script>
  151. import {getPackageById, getConfigById, upload, save} from '@/apis/index';
  152. import {baseUrl} from "@/config"
  153. import {numMulti} from '@/utils/calculate'
  154. import wx from 'jweixin-module';
  155. import {getWxBuyConfig, submitOrder} from "../../apis";
  156. export default {
  157. components: {},
  158. data() {
  159. return {
  160. type: '',
  161. fileList1: [],
  162. count: '', //可选数量
  163. strip: '',//条数
  164. packageId: '', //套餐id
  165. setData: {}, // 套餐数据
  166. configData: [], //选择内容数据
  167. loading: false,
  168. isSelect: false,
  169. name: '',
  170. phone: '',
  171. checked: [], //多选
  172. orderContents: [], //选中后的内容
  173. configKey: '',//内容标题
  174. bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
  175. guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
  176. guoyuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuanyuan.png',
  177. moreBImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_black.png',
  178. moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more%403x.png',
  179. weixinImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_weixinzhifu.png',
  180. upImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_up.png',
  181. buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
  182. formData: {
  183. recipientName: '',
  184. contactPhone: '',
  185. email: '',
  186. shootingRequirements: '',
  187. }
  188. };
  189. },
  190. computed: {
  191. numMultiR() {
  192. return numMulti(Number(this.setData.currentPrice), Number(this.strip))
  193. }
  194. },
  195. watch: {},
  196. onLoad(options) {
  197. if (options.id) this.packageId = options.id
  198. if (options.strip) this.strip = options.strip
  199. if (options.type) this.type = options.type
  200. this.getPackage()
  201. },
  202. methods: {
  203. toDetail() {
  204. uni.navigateTo({
  205. url: '/pages/index/detail?type=' + this.type
  206. })
  207. },
  208. // 判断当前选项是否应该禁用
  209. isDisabled(value) {
  210. // 已选中6个且当前选项未被选中时禁用
  211. return this.checked.length >= this.count &&
  212. !this.checked.includes(value)
  213. },
  214. // 选择变化时的处理
  215. checkboxChange(values) {
  216. if (values.length > this.count) {
  217. // 如果超过6个,自动截断并提示
  218. this.checked = values.slice(0, thsi.count);
  219. uni.showToast({
  220. title: '最多只能选择6个选项',
  221. icon: 'none'
  222. });
  223. }
  224. },
  225. // 获取套餐内容
  226. getPackage() {
  227. getPackageById({packageId: this.packageId}).then(res => {
  228. this.setData = res
  229. this.orderContents = res.selectContents.map(item => {
  230. return {
  231. name: item.configKey,
  232. configId: item.configId,
  233. count: item.count,
  234. scenes: []
  235. }
  236. })
  237. console.log('orderContents', this.orderContents);
  238. })
  239. },
  240. open() {
  241. console.log('打开');
  242. },
  243. // 选择内容
  244. chooseScene(item, index) {
  245. if (!item.count) {
  246. uni.showToast({
  247. title: '无可选内容',
  248. icon: 'none'
  249. });
  250. return
  251. }
  252. this.loading = true
  253. getConfigById({
  254. packageId: this.packageId,
  255. configId: item.configId
  256. }).then(res => {
  257. this.loading = false
  258. this.count = item.count
  259. console.log(this.checked, this.count, '数量');
  260. this.configData = res
  261. this.configKey = item.name
  262. this.orderContents.map(itm => {
  263. if (itm.name === this.configKey && itm.scenes.length !== 0) {
  264. this.checked = itm.scenes
  265. }
  266. })
  267. this.isSelect = true
  268. })
  269. },
  270. confirm() {
  271. if (this.checked.length < this.count) {
  272. uni.showToast({
  273. title: '至少选择' + this.count + '个选项',
  274. icon: 'none',
  275. });
  276. return
  277. }
  278. this.orderContents.map(item => {
  279. if (item.name === this.configKey) {
  280. item.scenes = this.checked
  281. }
  282. })
  283. this.checked = []
  284. this.isSelect = false
  285. },
  286. close() {
  287. this.isSelect = false
  288. this.checked = []
  289. },
  290. // 删除图片
  291. deletePic(event) {
  292. this[`fileList${event.name}`].splice(event.index, 1);
  293. },
  294. // 新增图片
  295. async afterRead(event) {
  296. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  297. let lists = [].concat(event.file);
  298. let fileListLen = this[`fileList${event.name}`].length;
  299. lists.map((item) => {
  300. this[`fileList${event.name}`].push({
  301. ...item,
  302. status: "uploading",
  303. message: "上传中",
  304. });
  305. });
  306. for (let i = 0; i < lists.length; i++) {
  307. const result = await this.uploadFilePromise(lists[i].url);
  308. let item = this[`fileList${event.name}`][fileListLen];
  309. this[`fileList${event.name}`].splice(
  310. fileListLen,
  311. 1,
  312. Object.assign({
  313. // status: "success",
  314. // message: "",
  315. url: result,
  316. })
  317. );
  318. fileListLen++;
  319. }
  320. console.log(this.fileList1, 'fileList1');
  321. },
  322. uploadFilePromise(url) {
  323. console.log(url, upload, 'url');
  324. return new Promise((resolve, reject) => {
  325. let a = uni.uploadFile({
  326. url: baseUrl + '/sys/oss/upload', // 仅为示例,非真实的接口地址
  327. filePath: url,
  328. name: "file",
  329. formData: {
  330. user: "test",
  331. },
  332. success: (res) => {
  333. let data = JSON.parse(res.data);
  334. setTimeout(() => {
  335. resolve(data.data.src);
  336. }, 1000);
  337. },
  338. fail: (err) => {
  339. console.log(err, 'err');
  340. reject(err);
  341. },
  342. });
  343. });
  344. },
  345. // 校验选择内容
  346. checkContents() {
  347. for (const item of this.orderContents) {
  348. if (!item.scenes || item.scenes.length === 0) {
  349. uni.showToast({
  350. title: `请选择${item.name}`,
  351. icon: 'none',
  352. duration: 2000
  353. });
  354. return false; // 校验失败
  355. }
  356. }
  357. return true; // 校验成功
  358. },
  359. // 校验表单
  360. checkForm() {
  361. if (this.formData.recipientName === '' || this.formData.contactPhone === '' || this.formData.email === '') {
  362. uni.showToast({
  363. title: '请填写完整收件方式',
  364. icon: 'none',
  365. });
  366. return false
  367. }
  368. return true; // 校验成功
  369. },
  370. invokePayment(rePayInfo) {
  371. WeixinJSBridge.invoke(
  372. 'getBrandWCPayRequest',
  373. {
  374. appId: rePayInfo.appid,
  375. timeStamp: rePayInfo.timeStamp,
  376. nonceStr: rePayInfo.nonceStr,
  377. package: rePayInfo.packages,
  378. signType: rePayInfo.signType,
  379. paySign: rePayInfo.sign
  380. },
  381. (res) => {
  382. if (res.err_msg === 'get_brand_wcpay_request:ok') {
  383. uni.navigateTo({
  384. url: '/pages/order/success?orderId=' + rePayInfo.orderId
  385. })
  386. } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
  387. uni.showToast({
  388. title:'用户取消了支付'
  389. })
  390. } else {
  391. console.error('支付失败', res.err_msg);
  392. // 处理支付失败的逻辑
  393. }
  394. }
  395. );
  396. },
  397. // 提交订单
  398. submitOrder() {
  399. if (!this.checkContents()) {
  400. return; // 如果校验失败,停止提交
  401. }
  402. if (!this.checkForm()) {
  403. return; // 如果校验失败,停止提交
  404. }
  405. let params = {
  406. packageId: Number(this.packageId),
  407. quantity: this.strip,
  408. unitPrice: this.setData.currentPrice,
  409. totalAmount: this.numMultiR,
  410. packageName: this.setData.packageName,
  411. ...this.formData,
  412. caseFileUrls: this.fileList1.map(item => {
  413. return item.url
  414. }),
  415. orderContents: this.orderContents,
  416. }
  417. submitOrder({
  418. ...params
  419. }).then((res) => {
  420. // 检查是否在微信浏览器中
  421. if (typeof WeixinJSBridge === 'undefined') {
  422. if (document.addEventListener) {
  423. document.addEventListener('WeixinJSBridgeReady', () => {
  424. this.invokePayment(res);
  425. }, false);
  426. } else if (document.attachEvent) {
  427. document.attachEvent('WeixinJSBridgeReady', () => {
  428. this.invokePayment(res);
  429. });
  430. document.attachEvent('onWeixinJSBridgeReady', () => {
  431. this.invokePayment(res);
  432. });
  433. }
  434. } else {
  435. this.invokePayment(res);
  436. }
  437. })
  438. }
  439. },
  440. created() {
  441. },
  442. mounted() {
  443. },
  444. }
  445. </script>
  446. <style lang="scss">
  447. uni-toast {
  448. z-index: 99999 !important;
  449. }
  450. </style>
  451. <style lang='scss' scoped>
  452. .order_confirm {
  453. width: 100%;
  454. position: absolute;
  455. top: 0;
  456. bottom: 0;
  457. display: flex;
  458. flex-direction: column;
  459. background-size: contain !important;
  460. background-repeat: no-repeat !important;
  461. background-position: top;
  462. .all {
  463. padding: 0 24rpx;
  464. flex: 1;
  465. overflow: auto;
  466. .title {
  467. font-weight: 500;
  468. font-size: 36rpx;
  469. color: #0D121A;
  470. margin: 48rpx 0 40rpx;
  471. text-align: center;
  472. }
  473. .menu {
  474. width: 100%;
  475. background: linear-gradient(180deg, #E4F8FF 0%, #FFFFFF 100%);
  476. border-radius: 24rpx;
  477. border: 2rpx solid #FFFFFF;
  478. padding: 64rpx 48rpx;
  479. .amounts {
  480. .now {
  481. font-size: 32rpx;
  482. color: #0D121A;
  483. .dw {
  484. line-height: 40rpx;
  485. }
  486. .limit {
  487. margin-left: 24rpx;
  488. width: 72rpx;
  489. height: 40rpx;
  490. background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
  491. border-radius: 8rpx;
  492. font-weight: 500;
  493. font-size: 24rpx;
  494. color: #0D121A;
  495. text-align: center;
  496. line-height: 40rpx;
  497. }
  498. }
  499. .num {
  500. font-size: 72rpx;
  501. line-height: 56rpx;
  502. font-weight: bold;
  503. }
  504. .unit {
  505. margin-left: 8px;
  506. }
  507. .past {
  508. color: #0D121A;
  509. margin-top: 34rpx;
  510. .past_text {
  511. margin-right: 8rpx;
  512. }
  513. }
  514. }
  515. .choose {
  516. margin-top: 64rpx;
  517. .choose_item-box {
  518. margin-top: 16rpx;
  519. image {
  520. width: 48rpx;
  521. height: 48rpx;
  522. margin-right: 24rpx;
  523. }
  524. text {
  525. color: #0D121A;
  526. font-size: 28rpx;
  527. }
  528. }
  529. .choose_item-more {
  530. text {
  531. font-size: 28rpx;
  532. color: #0D121A;
  533. }
  534. image {
  535. width: 32rpx;
  536. height: 32rpx;
  537. margin-left: 12rpx;
  538. }
  539. }
  540. .choose_item-box:nth-child(1) {
  541. margin-top: 0;
  542. }
  543. }
  544. }
  545. .choosion {
  546. .name {
  547. font-weight: 400;
  548. font-size: 28rpx;
  549. color: #9EA3B1;
  550. margin: 32rpx 0 20rpx 32rpx;
  551. }
  552. .content {
  553. background-color: #FFFFFF;
  554. border-radius: 24rpx;
  555. .content_item {
  556. padding: 36rpx 32rpx;
  557. .item_updata {
  558. width: 168rpx;
  559. height: 168rpx;
  560. background: #F4F5F9;
  561. border-radius: 16rpx;
  562. display: flex;
  563. flex-direction: column;
  564. align-items: center;
  565. justify-content: center;
  566. // margin-left: 48rpx;
  567. image {
  568. width: 56rpx;
  569. height: 56rpx;
  570. }
  571. text {
  572. color: #9EA3B1;
  573. font-weight: 400;
  574. font-size: 24rpx;
  575. }
  576. }
  577. .item_label {
  578. font-weight: 500;
  579. font-size: 28rpx;
  580. color: #0D121A;
  581. min-width: 150rpx;
  582. white-space: nowrap;
  583. }
  584. .item_num {
  585. font-size: 28rpx;
  586. margin-left: 48rpx;
  587. }
  588. .item_text {
  589. font-size: 28rpx;
  590. color: #9EA3B1;
  591. margin-left: 48rpx;
  592. }
  593. .item_name {
  594. font-size: 28rpx;
  595. color: #0D121A;
  596. margin-left: 16rpx;
  597. }
  598. .more_img {
  599. width: 32rpx;
  600. height: 32rpx;
  601. flex-shrink: 0;
  602. }
  603. .icon_img {
  604. width: 48rpx;
  605. height: 48rpx;
  606. }
  607. input {
  608. height: 0;
  609. }
  610. }
  611. .content_item_input {
  612. }
  613. }
  614. }
  615. .agree {
  616. display: flex;
  617. justify-content: center;
  618. align-items: center;
  619. font-size: 24rpx;
  620. color: #9EA3B1;
  621. padding: 48rpx 0 32rpx;
  622. .agree_text {
  623. color: #0D121A;
  624. }
  625. }
  626. }
  627. .btom {
  628. background: #FFFFFF;
  629. flex-shrink: 1;
  630. display: flex;
  631. justify-content: space-between;
  632. align-items: center;
  633. padding: 16rpx 24rpx;
  634. padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)) !important;
  635. padding-bottom: calc(16rpx + env(safe-area-inset-bottom)) !important;
  636. .sum {
  637. font-weight: 400;
  638. font-size: 30rpx;
  639. color: #0D121A;
  640. .money {
  641. font-size: 56rpx;
  642. color: #0D121A;
  643. }
  644. .unit {
  645. font-size: 40rpx;
  646. }
  647. }
  648. .btn {
  649. width: 312rpx;
  650. height: 84rpx;
  651. display: flex;
  652. justify-content: center;
  653. align-items: center;
  654. font-weight: bold;
  655. font-size: 32rpx;
  656. color: #0D121A;
  657. background-size: 100% 100% !important;
  658. }
  659. }
  660. .pt18 {
  661. padding-top: 18rpx;
  662. }
  663. .popup_content {
  664. padding: 32rpx;
  665. max-height: 1000rpx;
  666. display: flex;
  667. flex-direction: column;
  668. .checkbox {
  669. flex: 1;
  670. overflow: auto;
  671. }
  672. .btns {
  673. flex-shrink: 1;
  674. }
  675. }
  676. .btns {
  677. padding: 0 0 16rpx;
  678. color: #0D121A;
  679. .cancel {
  680. width: 45%;
  681. height: 84rpx;
  682. background: #FFFFFF;
  683. border-radius: 16rpx;
  684. display: flex;
  685. justify-content: center;
  686. align-items: center;
  687. border: #9EA3B1 1px solid;
  688. }
  689. .confirm {
  690. width: 45%;
  691. height: 84rpx;
  692. border-radius: 16rpx;
  693. display: flex;
  694. justify-content: center;
  695. align-items: center;
  696. background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
  697. }
  698. }
  699. .u-popup {
  700. flex: 0;
  701. z-index: 999;
  702. }
  703. }
  704. </style>