order.vue 16 KB

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