order.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1" @click="toChoose">
  8. <text class="localicon iconfont icon-dingweixiao"></text>
  9. <view class="other" v-if="address._id">
  10. <view class="name">
  11. <text>{{address.name}},</text>{{address.phone}}
  12. </view>
  13. <view class="other_1">
  14. <text>{{address.province}}</text><text>{{address.city}}</text>
  15. <text>{{address.area}}</text><text>{{address.address}}</text>
  16. </view>
  17. </view>
  18. <view class="address" v-else><text>请选择一个收货地址</text></view>
  19. <text class="iconfont icon-jiantouyou"></text>
  20. </view>
  21. <view class="one_2">
  22. <view class="list" v-for="(item,index) in orderList" :key="index">
  23. <view class="list_1">
  24. <view class="l">
  25. <text class="iconfont icon-shangdian"></text>
  26. <text>{{item.shop_name}}</text>
  27. </view>
  28. </view>
  29. <view class="list_2" v-for="(tag,index) in item.goods" :key="index">
  30. <view class="l">
  31. <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
  32. mode=""></image>
  33. </view>
  34. <view class="c">
  35. <view class="name">
  36. {{tag.goods_name}}
  37. </view>
  38. <view class="Spec">
  39. 规格:{{tag.goodsSpec_name}}
  40. </view>
  41. </view>
  42. <view class="r">
  43. <view class="price" v-if="type=='0'">
  44. ¥{{tag.money}}
  45. </view>
  46. <view v-else class="price">
  47. ¥{{tag.group_sell_money}}
  48. </view>
  49. <view class="num">
  50. ×{{tag.num}}
  51. </view>
  52. </view>
  53. </view>
  54. <view class="list_3">
  55. <view class="other">
  56. <view class="other_1">配送方式</view>
  57. <view class="other_2"><text class="iconfont icon-duihao"></text>快递配送</view>
  58. </view>
  59. <view class="other">
  60. <view class="other_1">运费</view>
  61. <view class="other_2" v-if="!item.freight_total==0">¥{{item.freight_total}}
  62. </view>
  63. <view class="other_2" v-else>包邮</view>
  64. </view>
  65. <view class="other">
  66. <view class="other_1">订单备注</view>
  67. <view class="other_3">
  68. <input type="text" v-model="item.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="other" v-if="type=='0'">
  74. <view class="other_1">优惠劵</view>
  75. <view class="other_2" @click="toCoupon" v-if="couponList.length">
  76. {{coupon_name||'请选择优惠劵'}}
  77. </view>
  78. <view class="other_2" v-else>暂无优惠劵使用</view>
  79. </view>
  80. </view>
  81. </view>
  82. </scroll-view>
  83. </view>
  84. <view class="two">
  85. <view class="two_1">
  86. <view>实付金额:</view>
  87. <view>¥{{goods_total}}</view>
  88. </view>
  89. <view class="two_2">
  90. <text @click="toSubmit">提交订单</text>
  91. </view>
  92. </view>
  93. </view>
  94. <uni-popup ref="popup" background-color="#fff" type="bottom">
  95. <view class="popup" v-if="popup.type=='1'">
  96. <scroll-view scroll-y="true" class="scroll-view">
  97. <view class="list" v-for="(item,index) in addressList" :key="index">
  98. <view class="one">
  99. <view class="one_1">
  100. <view class="name">
  101. <text>{{item.name}},</text>{{item.phone}}
  102. </view>
  103. <view class="address">
  104. <text>{{item.province}}</text><text>{{item.city}}</text>
  105. <text>{{item.area}}</text><text>{{item.address}}</text>
  106. </view>
  107. </view>
  108. <text class="iconfont icon-jiantouyou"></text>
  109. </view>
  110. <view class="two">
  111. <view class="two_1">
  112. <checkbox-group @change="toCheckbox">
  113. <label>
  114. <checkbox :value="item._id" :checked="item.checked"
  115. style="transform:scale(0.7)" />
  116. 选择地址
  117. </label>
  118. </checkbox-group>
  119. </view>
  120. <view class="two_2">
  121. <text class="text" v-if="item.is_default=='1'">默认</text>
  122. <text @click="toDel(item)" class="iconfont icon-del"></text>
  123. </view>
  124. </view>
  125. </view>
  126. </scroll-view>
  127. </view>
  128. <view class="popup" v-else-if="popup.type=='2'">
  129. <scroll-view scroll-y="true" class="scroll-view">
  130. <discount :Style="Style" :couponList="couponList" @toDiscount="toDiscount"></discount>
  131. </scroll-view>
  132. </view>
  133. </uni-popup>
  134. </mobile-frame>
  135. </template>
  136. <script>
  137. import discount from '@/components/discount/index.vue';
  138. export default {
  139. components: {
  140. discount
  141. },
  142. data() {
  143. return {
  144. popup: {
  145. type: '1'
  146. },
  147. Style: {
  148. btn: true
  149. },
  150. user: {},
  151. key: '',
  152. address: {},
  153. orderList: [],
  154. shop: [],
  155. goods_total: 0,
  156. // 金额明细
  157. total_detail: {},
  158. // 收货地址
  159. addressList: [],
  160. // 优惠劵
  161. couponList: [],
  162. coupon: [],
  163. // 优惠劵名称
  164. coupon_name: '',
  165. // 是否开团
  166. type: '0',
  167. // 团id
  168. group_id: '',
  169. };
  170. },
  171. onLoad: async function(e) {
  172. const that = this;
  173. that.$set(that, `key`, e.key || '');
  174. that.$set(that, `group_id`, e.group_id || '');
  175. that.watchLogin()
  176. },
  177. methods: {
  178. // 使用优惠劵
  179. toDiscount(e) {
  180. const that = this;
  181. that.$set(that, 'coupon_name', e.name)
  182. that.coupon.push(e._id)
  183. that.$refs.popup.close();
  184. this.computedTotal();
  185. },
  186. // 选择收货地址
  187. toChoose() {
  188. const that = this;
  189. if (that.addressList.length > 0) {
  190. that.$set(that.popup, 'type', '1')
  191. that.$refs.popup.open();
  192. } else {
  193. uni.showToast({
  194. title: `暂无收货地址`,
  195. icon: 'none'
  196. })
  197. }
  198. },
  199. // 选择优惠劵
  200. toCoupon() {
  201. const that = this;
  202. that.$set(that.popup, 'type', '2')
  203. that.$set(that, 'coupon', [])
  204. that.$refs.popup.open();
  205. },
  206. // 是否选中
  207. toCheckbox(e) {
  208. const that = this;
  209. var addressList = that.addressList;
  210. var values = e.detail.value;
  211. for (var i = 0, lenI = addressList.length; i < lenI; ++i) {
  212. const item = addressList[i]
  213. if (values.includes(item._id)) {
  214. that.$set(item, 'checked', true)
  215. that.$set(that, `address`, item);
  216. } else {
  217. that.$set(item, 'checked', false)
  218. }
  219. }
  220. that.$refs.popup.close();
  221. },
  222. // 删除收货地址
  223. toDel(e) {
  224. const that = this;
  225. uni.showModal({
  226. title: '提示',
  227. content: '确定删除该地址吗?',
  228. success: async function(res) {
  229. if (res.confirm) {
  230. const arr = await that.$api(`/address/${e._id}`, 'DELETE');
  231. if (arr.errcode == '0') {
  232. uni.showToast({
  233. title: '删除信息成功',
  234. icon: 'none'
  235. })
  236. that.search();
  237. } else {
  238. uni.showToast({
  239. title: arr.errmsg,
  240. icon: 'none'
  241. })
  242. }
  243. }
  244. }
  245. });
  246. },
  247. // 提交订单
  248. async toSubmit() {
  249. const that = this;
  250. if (that.address) {
  251. let data = {
  252. address: that.address,
  253. goods: that.orderList,
  254. total_detail: that.total_detail,
  255. coupon: that.coupon,
  256. type: that.type,
  257. }
  258. if (that.group_id) {
  259. data.group = that.group_id
  260. }
  261. const arr = await that.$api(`/order`, 'POST', data)
  262. if (arr.errcode == '0') {
  263. uni.getStorage({
  264. key: 'system',
  265. success: async function(res) {
  266. // 微信小程序支付
  267. if (res.data.uniPlatform == "mp-weixin") {
  268. uni.showLoading({
  269. title: '加载中'
  270. })
  271. const res = await that.$api('/pay/toPayOrder', 'POST', {
  272. order_id: arr.data,
  273. type: '0'
  274. })
  275. uni.requestPayment({
  276. "provider": "wxpay",
  277. ...res.data,
  278. async success(res) {
  279. const group = await that.$api('/group/getGroup',
  280. 'GET', {
  281. order_id: arr.data,
  282. })
  283. if (group.errcode == '0') {
  284. if (group.data) {
  285. uni.hideLoading();
  286. uni.reLaunch({
  287. url: `/pagesHome/group/share?id=${group.data}`
  288. })
  289. } else {
  290. uni.hideLoading();
  291. uni.reLaunch({
  292. url: `/pagesMy/order/index?status=${'1'}`
  293. })
  294. }
  295. } else {
  296. uni.showToast({
  297. title: group.errmsg,
  298. icon: 'none'
  299. })
  300. }
  301. },
  302. fail(e) {
  303. console.log('in fail');
  304. uni.hideLoading();
  305. uni.reLaunch({
  306. url: `/pagesMy/order/index?status=${'0'}`
  307. })
  308. }
  309. })
  310. } else if (res.data.uniPlatform == "app") {
  311. // app支付
  312. uni.requestPayment({
  313. provider: 'alipay',
  314. orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息,键值应该全部是小写,不能采用驼峰命名】
  315. success: function(res) {
  316. console.log('success:' + JSON.stringify(res));
  317. },
  318. fail: function(err) {
  319. console.log('fail:' + JSON.stringify(err));
  320. }
  321. });
  322. } else {
  323. uni.showToast({
  324. title: `平台不支持支付`,
  325. icon: 'none'
  326. })
  327. }
  328. },
  329. fail: function(err) {}
  330. })
  331. } else {
  332. uni.showToast({
  333. title: arr.data.errmsg || '下单失败!',
  334. icon: 'none'
  335. })
  336. }
  337. } else {
  338. uni.showToast({
  339. title: `没有收货地址`,
  340. icon: 'none'
  341. })
  342. }
  343. },
  344. // 监听用户是否登录
  345. watchLogin() {
  346. const that = this;
  347. uni.getStorage({
  348. key: 'token',
  349. success: function(res) {
  350. let user = that.$jwt(res.data);
  351. that.$set(that, `user`, user);
  352. that.search()
  353. },
  354. fail: function(err) {
  355. uni.reLaunch({
  356. url: `/pages/login/index`
  357. })
  358. }
  359. })
  360. },
  361. // 查询列表
  362. async search() {
  363. const that = this;
  364. let user = that.user;
  365. const res = await that.$api(`/address`, 'GET', {
  366. customer: user._id
  367. })
  368. if (res.errcode == '0') {
  369. that.$set(that, `addressList`, res.data.reverse());
  370. }
  371. const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
  372. key: that.key
  373. })
  374. if (arr.errcode == '0') {
  375. that.$set(that, `address`, arr.data.address);
  376. that.$set(that, `orderList`, arr.data.goodsData);
  377. that.$set(that, `total_detail`, arr.data.orderTotal);
  378. that.$set(that, `type`, arr.data.type);
  379. this.computedTotal();
  380. that.$set(that, `couponList`, arr.data.couponList);
  381. }
  382. },
  383. async computedTotal() {
  384. const total_detail = this.total_detail;
  385. let total = this.$plus(total_detail.freight_total, total_detail.goods_total)
  386. if (this.coupon.length > 0) {
  387. let discount = 0;
  388. for (const coupon of this.coupon) {
  389. const r = this.couponList.find(f => f._id === coupon)
  390. if (!r) continue;
  391. const {
  392. discount_config,
  393. discount_type
  394. } = r;
  395. if (discount_type === 'min') {
  396. const min = discount_config.min;
  397. discount = this.$plus(discount, min)
  398. } else if (discount_type === 'discount') {
  399. const min = discount_config.min || 0;
  400. let discount_money = 0;
  401. const max = discount_config.max || 0;
  402. // TODO 现在是平台发放的优惠券,所以可以直接用总价*折扣,如果是店铺的折扣券,则需要将金额分开,对应店铺计算折扣
  403. // const dm = min / 10 * total;
  404. const dm = this.$multiply(this.divide(min, 10), total)
  405. if (max !== 0) {
  406. if (max > dm) discount_money = dm;
  407. else discount_money = max
  408. }
  409. discount += discount_money
  410. }
  411. }
  412. total = this.$minus(total, discount)
  413. }
  414. if (total >= 0) {
  415. this.$set(this, `goods_total`, total);
  416. } else {
  417. uni.showToast({
  418. title: `实付金额不能为负数 不能使用该优惠劵`,
  419. icon: 'none'
  420. })
  421. }
  422. }
  423. }
  424. }
  425. </script>
  426. <style lang="scss">
  427. .main {
  428. display: flex;
  429. flex-direction: column;
  430. width: 100vw;
  431. height: 100vh;
  432. .one {
  433. position: relative;
  434. flex-grow: 1;
  435. background-color: var(--f1Color);
  436. .one_1 {
  437. display: flex;
  438. justify-content: space-between;
  439. align-items: center;
  440. width: 100vw;
  441. padding: 2vw;
  442. border-bottom: 1vw dashed var(--fcColor);
  443. .address {
  444. flex-grow: 1;
  445. margin: 0 0 0 2vw;
  446. font-size: var(--font14Size);
  447. color: var(--f85Color);
  448. }
  449. .iconfont {
  450. font-size: var(--font20Szie);
  451. }
  452. .other {
  453. width: 82vw;
  454. padding: 0 2vw;
  455. .name {
  456. font-size: var(--font16Size);
  457. }
  458. .other_1 {
  459. font-size: var(--font14Size);
  460. color: var(--f85Color);
  461. text {
  462. margin: 0 1vw 0 0;
  463. }
  464. }
  465. }
  466. }
  467. .one_2 {
  468. margin: 2vw 0 0 0;
  469. .list {
  470. width: 100vw;
  471. margin: 2vw 0;
  472. .list_1 {
  473. padding: 2vw;
  474. background-color: var(--mainColor);
  475. border-bottom: 0.1vw solid var(--fcColor);
  476. text {
  477. padding: 0 0 0 1vw;
  478. }
  479. }
  480. .list_2 {
  481. padding: 2vw;
  482. display: flex;
  483. background-color: var(--mainColor);
  484. .l {
  485. width: 20vw;
  486. .image {
  487. width: 100%;
  488. height: 20vw;
  489. border-radius: 5px;
  490. }
  491. }
  492. .c {
  493. width: 60vw;
  494. padding: 0 2vw;
  495. .Spec {
  496. font-size: var(--font12Size);
  497. color: var(--f85Color);
  498. }
  499. }
  500. .r {
  501. width: 15vw;
  502. text-align: right;
  503. }
  504. }
  505. .list_3 {
  506. width: 96vw;
  507. padding: 2vw;
  508. background-color: var(--mainColor);
  509. .other {
  510. display: flex;
  511. justify-content: space-between;
  512. border-bottom: 0.1vw solid var(--fcColor);
  513. margin: 0 0 2vw 0;
  514. padding: 2vw 0;
  515. .other_1 {
  516. font-size: var(--font16Size);
  517. color: var(--f85Color);
  518. }
  519. .other_3 {
  520. flex-grow: 1;
  521. margin: 0 0 0 2vw;
  522. font-size: var(--font12Size);
  523. }
  524. text {
  525. padding: 0 1vw 0 0;
  526. font-size: var(--font20Szie);
  527. }
  528. }
  529. }
  530. }
  531. .other {
  532. display: flex;
  533. justify-content: space-between;
  534. background-color: var(--mainColor);
  535. border-bottom: 0.1vw solid var(--fcColor);
  536. margin: 0 0 2vw 0;
  537. width: 96vw;
  538. padding: 2vw;
  539. .other_1 {
  540. font-size: var(--font16Size);
  541. color: var(--f85Color);
  542. }
  543. .other_3 {
  544. flex-grow: 1;
  545. margin: 0 0 0 2vw;
  546. font-size: var(--font12Size);
  547. }
  548. text {
  549. padding: 0 1vw 0 0;
  550. font-size: var(--font20Szie);
  551. }
  552. }
  553. }
  554. }
  555. .two {
  556. display: flex;
  557. justify-content: space-between;
  558. border-top: 0.1vw solid var(--fcColor);
  559. .two_1 {
  560. display: flex;
  561. align-items: center;
  562. padding: 0 2vw;
  563. font-size: var(--font16Size);
  564. view:last-child {
  565. margin: 0 0 0 2vw;
  566. color: var(--ff0Color);
  567. font-weight: bold;
  568. }
  569. }
  570. .two_2 {
  571. padding: 3vw 4vw;
  572. color: var(--mainColor);
  573. font-size: var(--font16Size);
  574. background-color: var(--ff0Color);
  575. }
  576. }
  577. }
  578. .scroll-view {
  579. position: absolute;
  580. top: 0;
  581. left: 0;
  582. right: 0;
  583. bottom: 0;
  584. .list-scroll-view {
  585. display: flex;
  586. flex-direction: row;
  587. flex-wrap: wrap;
  588. }
  589. }
  590. .popup {
  591. display: flex;
  592. flex-direction: column;
  593. height: 100vw;
  594. overflow-x: hidden;
  595. background-color: var(--f5Color);
  596. padding: 2vw;
  597. .list {
  598. .one {
  599. display: flex;
  600. justify-content: space-between;
  601. margin: 2vw 0 0 0;
  602. padding: 2vw;
  603. background-color: var(--mainColor);
  604. .name {
  605. font-size: var(--font16Size);
  606. }
  607. .address {
  608. font-size: var(--font14Size);
  609. }
  610. .iconfont {
  611. line-height: 15vw;
  612. font-size: var(--font20Szie);
  613. }
  614. }
  615. .two {
  616. display: flex;
  617. justify-content: space-between;
  618. border-top: 0.1vw solid var(--fcColor);
  619. padding: 2vw;
  620. background-color: var(--mainColor);
  621. font-size: var(--font14Size);
  622. .text {
  623. margin: 0 2vw 0 0;
  624. border: 0.1vw solid var(--fFB1Color);
  625. padding: 1vw;
  626. font-size: var(--font12Size);
  627. border-radius: 2vw;
  628. color: var(--fFB1Color);
  629. }
  630. }
  631. }
  632. }
  633. </style>