index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  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. uni.showToast({
  304. title: `支付失败`,
  305. icon: 'none'
  306. })
  307. uni.hideLoading();
  308. uni.reLaunch({
  309. url: `/pagesMy/order/index?status=${'0'}`
  310. })
  311. }
  312. })
  313. } else if (res.data.uniPlatform == "app") {
  314. // app支付
  315. uni.requestPayment({
  316. provider: 'alipay',
  317. orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息,键值应该全部是小写,不能采用驼峰命名】
  318. success: function(res) {
  319. console.log('success:' + JSON.stringify(res));
  320. },
  321. fail: function(err) {
  322. console.log('fail:' + JSON.stringify(err));
  323. }
  324. });
  325. } else {
  326. uni.showToast({
  327. title: `平台不支持支付`,
  328. icon: 'none'
  329. })
  330. }
  331. },
  332. fail: function(err) {}
  333. })
  334. } else {
  335. uni.showToast({
  336. title: arr.data.errmsg || '下单失败!',
  337. icon: 'none'
  338. })
  339. }
  340. } else {
  341. uni.showToast({
  342. title: `没有收货地址`,
  343. icon: 'none'
  344. })
  345. }
  346. },
  347. // 监听用户是否登录
  348. watchLogin() {
  349. const that = this;
  350. uni.getStorage({
  351. key: 'token',
  352. success: function(res) {
  353. let user = that.$jwt(res.data);
  354. that.$set(that, `user`, user);
  355. that.search()
  356. },
  357. fail: function(err) {
  358. uni.reLaunch({
  359. url: `/pages/login/index`
  360. })
  361. }
  362. })
  363. },
  364. // 查询列表
  365. async search() {
  366. const that = this;
  367. let user = that.user;
  368. const res = await that.$api(`/address`, 'GET', {
  369. customer: user._id
  370. })
  371. if (res.errcode == '0') {
  372. that.$set(that, `addressList`, res.data.reverse());
  373. }
  374. const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
  375. key: that.key
  376. })
  377. if (arr.errcode == '0') {
  378. that.$set(that, `address`, arr.data.address);
  379. that.$set(that, `orderList`, arr.data.goodsData);
  380. that.$set(that, `total_detail`, arr.data.orderTotal);
  381. that.$set(that, `type`, arr.data.type);
  382. this.computedTotal();
  383. that.$set(that, `couponList`, arr.data.couponList);
  384. }
  385. },
  386. async computedTotal() {
  387. const total_detail = this.total_detail;
  388. let total = this.$plus(total_detail.freight_total, total_detail.goods_total)
  389. if (this.coupon.length > 0) {
  390. let discount = 0;
  391. for (const coupon of this.coupon) {
  392. const r = this.couponList.find(f => f._id === coupon)
  393. if (!r) continue;
  394. const {
  395. discount_config,
  396. discount_type
  397. } = r;
  398. if (discount_type === 'min') {
  399. const min = discount_config.min;
  400. discount = this.$plus(discount, min)
  401. } else if (discount_type === 'discount') {
  402. const min = discount_config.min || 0;
  403. let discount_money = 0;
  404. const max = discount_config.max || 0;
  405. // TODO 现在是平台发放的优惠券,所以可以直接用总价*折扣,如果是店铺的折扣券,则需要将金额分开,对应店铺计算折扣
  406. // const dm = min / 10 * total;
  407. const dm = this.$multiply(this.divide(min, 10), total)
  408. if (max !== 0) {
  409. if (max > dm) discount_money = dm;
  410. else discount_money = max
  411. }
  412. discount += discount_money
  413. }
  414. }
  415. total = this.$minus(total, discount)
  416. }
  417. if (total >= 0) {
  418. this.$set(this, `goods_total`, total);
  419. } else {
  420. uni.showToast({
  421. title: `实付金额不能为负数 不能使用该优惠劵`,
  422. icon: 'none'
  423. })
  424. }
  425. }
  426. }
  427. }
  428. </script>
  429. <style lang="scss">
  430. .main {
  431. display: flex;
  432. flex-direction: column;
  433. width: 100vw;
  434. height: 100vh;
  435. .one {
  436. position: relative;
  437. flex-grow: 1;
  438. background-color: var(--f1Color);
  439. .one_1 {
  440. display: flex;
  441. justify-content: space-between;
  442. align-items: center;
  443. width: 100vw;
  444. padding: 2vw;
  445. border-bottom: 1vw dashed var(--fcColor);
  446. .address {
  447. flex-grow: 1;
  448. margin: 0 0 0 2vw;
  449. font-size: var(--font14Size);
  450. color: var(--f85Color);
  451. }
  452. .iconfont {
  453. font-size: var(--font20Szie);
  454. }
  455. .other {
  456. width: 82vw;
  457. padding: 0 2vw;
  458. .name {
  459. font-size: var(--font16Size);
  460. }
  461. .other_1 {
  462. font-size: var(--font14Size);
  463. color: var(--f85Color);
  464. text {
  465. margin: 0 1vw 0 0;
  466. }
  467. }
  468. }
  469. }
  470. .one_2 {
  471. margin: 2vw 0 0 0;
  472. .list {
  473. width: 100vw;
  474. margin: 2vw 0;
  475. .list_1 {
  476. padding: 2vw;
  477. background-color: var(--mainColor);
  478. border-bottom: 0.1vw solid var(--fcColor);
  479. text {
  480. padding: 0 0 0 1vw;
  481. }
  482. }
  483. .list_2 {
  484. padding: 2vw;
  485. display: flex;
  486. background-color: var(--mainColor);
  487. .l {
  488. width: 20vw;
  489. .image {
  490. width: 100%;
  491. height: 20vw;
  492. border-radius: 5px;
  493. }
  494. }
  495. .c {
  496. width: 60vw;
  497. padding: 0 2vw;
  498. .Spec {
  499. font-size: var(--font12Size);
  500. color: var(--f85Color);
  501. }
  502. }
  503. .r {
  504. width: 15vw;
  505. text-align: right;
  506. }
  507. }
  508. .list_3 {
  509. width: 96vw;
  510. padding: 2vw;
  511. background-color: var(--mainColor);
  512. .other {
  513. display: flex;
  514. justify-content: space-between;
  515. border-bottom: 0.1vw solid var(--fcColor);
  516. margin: 0 0 2vw 0;
  517. padding: 2vw 0;
  518. .other_1 {
  519. font-size: var(--font16Size);
  520. color: var(--f85Color);
  521. }
  522. .other_3 {
  523. flex-grow: 1;
  524. margin: 0 0 0 2vw;
  525. font-size: var(--font12Size);
  526. }
  527. text {
  528. padding: 0 1vw 0 0;
  529. font-size: var(--font20Szie);
  530. }
  531. }
  532. }
  533. }
  534. .other {
  535. display: flex;
  536. justify-content: space-between;
  537. background-color: var(--mainColor);
  538. border-bottom: 0.1vw solid var(--fcColor);
  539. margin: 0 0 2vw 0;
  540. width: 96vw;
  541. padding: 2vw;
  542. .other_1 {
  543. font-size: var(--font16Size);
  544. color: var(--f85Color);
  545. }
  546. .other_3 {
  547. flex-grow: 1;
  548. margin: 0 0 0 2vw;
  549. font-size: var(--font12Size);
  550. }
  551. text {
  552. padding: 0 1vw 0 0;
  553. font-size: var(--font20Szie);
  554. }
  555. }
  556. }
  557. }
  558. .two {
  559. display: flex;
  560. justify-content: space-between;
  561. border-top: 0.1vw solid var(--fcColor);
  562. .two_1 {
  563. display: flex;
  564. align-items: center;
  565. padding: 0 2vw;
  566. font-size: var(--font16Size);
  567. view:last-child {
  568. margin: 0 0 0 2vw;
  569. color: var(--ff0Color);
  570. font-weight: bold;
  571. }
  572. }
  573. .two_2 {
  574. padding: 3vw 4vw;
  575. color: var(--mainColor);
  576. font-size: var(--font16Size);
  577. background-color: var(--ff0Color);
  578. }
  579. }
  580. }
  581. .scroll-view {
  582. position: absolute;
  583. top: 0;
  584. left: 0;
  585. right: 0;
  586. bottom: 0;
  587. .list-scroll-view {
  588. display: flex;
  589. flex-direction: row;
  590. flex-wrap: wrap;
  591. }
  592. }
  593. .popup {
  594. display: flex;
  595. flex-direction: column;
  596. height: 100vw;
  597. overflow-x: hidden;
  598. background-color: var(--f5Color);
  599. padding: 2vw;
  600. .list {
  601. .one {
  602. display: flex;
  603. justify-content: space-between;
  604. margin: 2vw 0 0 0;
  605. padding: 2vw;
  606. background-color: var(--mainColor);
  607. .name {
  608. font-size: var(--font16Size);
  609. }
  610. .address {
  611. font-size: var(--font14Size);
  612. }
  613. .iconfont {
  614. line-height: 15vw;
  615. font-size: var(--font20Szie);
  616. }
  617. }
  618. .two {
  619. display: flex;
  620. justify-content: space-between;
  621. border-top: 0.1vw solid var(--fcColor);
  622. padding: 2vw;
  623. background-color: var(--mainColor);
  624. font-size: var(--font14Size);
  625. .text {
  626. margin: 0 2vw 0 0;
  627. border: 0.1vw solid var(--fFB1Color);
  628. padding: 1vw;
  629. font-size: var(--font12Size);
  630. border-radius: 2vw;
  631. color: var(--fFB1Color);
  632. }
  633. }
  634. }
  635. }
  636. </style>