submitorder.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <template>
  2. <view class="">
  3. <u-navbar
  4. title="提交订单"
  5. @leftClick="leftClick"
  6. :autoBack="true"
  7. :safeAreaInsetTop="true"
  8. >
  9. </u-navbar>
  10. <view class="addr page-wrap u-flex u-row-between">
  11. <view class="left">
  12. <view class="top">
  13. <text class="label" v-if="orderInfo.receive.ifDefault">默认</text>{{receive.address}}
  14. </view>
  15. <view class="center">{{receive.receiveAdress}}</view>
  16. <view class="bottom">{{receive.receiveName}} {{receive.receivePhone}}</view>
  17. </view>
  18. <u-icon name="arrow-right" color="#676767" size="20" @click="selectAddr"></u-icon>
  19. </view>
  20. <!-- <view class="payway page-wrap u-flex u-row-between">
  21. <view class="left">支付方式</view>
  22. <view class="u-flex">
  23. 微信支付
  24. <u-icon name="arrow-right" color="#676767" size="20"></u-icon>
  25. </view>
  26. </view> -->
  27. <view class="order-product page-wrap">
  28. <view class="product u-flex" v-for="(item,index) in orderInfo.goodsList" :key="item.id">
  29. <u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
  30. <view class="text">
  31. <view class="up">
  32. <view class="name ellipsis-2">{{item.goodsName}}</view>
  33. <view class="info">
  34. {{item.specification}}
  35. {{item.unit}}
  36. </view>
  37. </view>
  38. <view class="down u-flex u-row-between">
  39. <view class="left">
  40. <view class="" v-if="vuex_member_info.priceType>1">
  41. <text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
  42. <text class="vip-icon">VIP</text>
  43. <text class="original-price gray line-through">¥ {{item.salePrice}}</text>
  44. </view>
  45. <view class="" v-else>
  46. <text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
  47. </view>
  48. </view>
  49. <u-number-box
  50. v-if="fromPage!='creditOrder'"
  51. v-model="item.quantity"
  52. :max="item.stock"
  53. :asyncChange="true"
  54. @change="changeQuantity(index, $event)" integer>
  55. </u-number-box>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="page-wrap order-reduced">
  61. <!-- <view class="reduced-item u-flex u-row-between u-border-bottom">
  62. <view class="left">
  63. <text>优惠券</text>
  64. <text class="label">已选一张</text>
  65. </view>
  66. <view class="right u-flex">
  67. <text class="price red">-¥ <text class="price-num">1000</text></text>
  68. <u-icon name="arrow-right" color="#676767" size="20"></u-icon>
  69. </view>
  70. </view> -->
  71. <view class="reduced-item integral u-flex u-row-between" v-if="orderTotalCredit">
  72. <view class="left">
  73. <text>积分</text>
  74. <!-- <text class="num">3676</text> -->
  75. <!-- <text class="tip">满1000可用</text> -->
  76. </view>
  77. <view class="right u-flex">
  78. <text class="price red" >- <text class="price-num">{{orderTotalCredit}}</text></text>
  79. <!-- <u-checkbox-group @change="integralCheckboxChange">
  80. <u-checkbox shape="circle" activeColor="#02AB35" name="integral" ></u-checkbox>
  81. </u-checkbox-group> -->
  82. </view>
  83. </view>
  84. </view>
  85. <view class="page-wrap total">
  86. <view class="total-item u-flex u-row-between u-border-bottom">
  87. <view class="left">
  88. 商品金额
  89. </view>
  90. <view class="right red">
  91. ¥ {{totalAmount}}
  92. </view>
  93. </view>
  94. <view class="total-item u-flex u-row-between">
  95. <view class="left">
  96. 运费
  97. <text class="gray">总重:{{totalWeight}}</text>
  98. </view>
  99. <view class="right red">
  100. <text v-if="distribution.distributionPrice">+ ¥ {{distribution.distributionPrice}}</text>
  101. <text v-else>免运费</text>
  102. </view>
  103. </view>
  104. </view>
  105. <view class="cart-bottom">
  106. <view class="inner u-flex u-row-between">
  107. <view class="left u-flex">
  108. <view class="total-price">
  109. 待支付:<text class="red">¥ {{payAmount + distribution.distributionPrice}}</text>
  110. </view>
  111. </view>
  112. <view class="btn gray" v-if="orderTotalCredit&&userTotalCredit<orderTotalCredit">积分不够</view>
  113. <view class="" v-else>
  114. <view class="btn" v-if="cansubmit" @click="submitOrder">去结算</view>
  115. <view class="btn gray" v-else>去结算</view>
  116. </view>
  117. </view>
  118. </view>
  119. </view>
  120. </template>
  121. <script>
  122. export default {
  123. data() {
  124. return {
  125. cansubmit:true,
  126. fromPage:'',
  127. useIntegral:false,
  128. dataList:[],
  129. receiveId:'',
  130. receive:{},
  131. isDefaultAddr:false,
  132. orderInfo:{goodsList:[]},
  133. distribution:{},//物流信息
  134. totalAmount:null,//订单总金额
  135. payAmount:null,//订单支付金额
  136. userTotalBalance:null,//用户总余额
  137. userTotalCredit:null,//用户总积分
  138. orderTotalCredit:null,//订单需要的总积分
  139. }
  140. },
  141. onLoad(page) {
  142. // console.log('page',page);
  143. // console.log('this.creditGoods',this.creditGoods);
  144. this.fromPage = page.fromPage;
  145. // if(this.cartGoods>0&&this.fromPage!='cart'){
  146. // console.log('fromPagecart',this.fromPage);
  147. // this.orderInfo.goodsList = this.cartGoods;
  148. // }
  149. // if(this.creditGoods.length>0&&this.fromPage=='creditOrder'){
  150. // console.log('fromPagecreditOrder',this.fromPage);
  151. // this.orderInfo.goodsList = this.creditGoods;
  152. // }
  153. this.orderInfo.goodsList = this.cartGoods;
  154. this.settlement();
  155. },
  156. onShow() {
  157. if(this.fromPage=='addrlist'){
  158. this.settlement()
  159. }
  160. console.log('cartGoods===',this.cartGoods);
  161. },
  162. computed: {
  163. totalWeight() {
  164. let that = this;
  165. return this.orderInfo.goodsList.reduce((total, item) => {
  166. let weight = null;
  167. weight = item.weight
  168. total += weight * item.quantity;
  169. return total;
  170. }, 0);
  171. }
  172. },
  173. methods: {
  174. leftClick(e){
  175. console.log('leftClick',e);
  176. },
  177. integralCheckboxChange(e){
  178. this.useIntegral = e[0] && e[0] === 'integral' ? true : false;
  179. },
  180. selectAddr(){
  181. uni.$u.route('/center/addrlist', {
  182. from: 'settlement'
  183. });
  184. },
  185. // getAddrList(){
  186. // this.$u.api.addrList().then(res=>{
  187. // this.theAddr = res.data.rows;
  188. // let defaultAddress;
  189. // let firstAddress = res.data.rows[0];
  190. // res.data.rows.forEach(address => {
  191. // if (address.ifDefault) { // 如果有默认地址标识
  192. // defaultAddress = address;
  193. // this.isDefaultAddr = true;
  194. // }
  195. // });
  196. // if (!defaultAddress) { // 如果没有默认地址标识
  197. // defaultAddress = firstAddress;
  198. // }
  199. // this.theAddr = defaultAddress;
  200. // }).catch(err=>{
  201. // console.log('getAddrList',err.data);
  202. // })
  203. // },
  204. // 改变商品数量
  205. changeQuantity(index, value) {
  206. // console.log('goodsList',this.orderInfo.goodsList);
  207. // console.log('index',index);
  208. // console.log('value',value);
  209. this.orderInfo.goodsList[index].quantity = value.value;
  210. this.settlement();
  211. },
  212. settlement(){
  213. let orderType = 1;
  214. // console.log('settlement',this.selectGoods);
  215. let param = {
  216. receiveId:this.receive.id
  217. };
  218. if(this.fromPage == 'creditOrder'){
  219. orderType = 2
  220. }
  221. param.orderType = orderType;
  222. param.goodsList = this.orderInfo.goodsList.map(item=>{
  223. return {goodsId:item.id||item.goodsId,quantity:item.quantity}
  224. });
  225. console.log('param',param);
  226. this.$u.api.getSettlement(param).then(res=>{
  227. console.log('res',res.data);
  228. this.setData(res.data)
  229. }).catch(err=>{
  230. console.log('getSettlement',err);
  231. })
  232. },
  233. setData(originData){
  234. console.log('originData',originData);
  235. let dataType = typeof originData;
  236. let jsonData;
  237. if(dataType=='string'){
  238. jsonData = JSON.parse(originData);
  239. }else{
  240. jsonData = originData
  241. }
  242. let {
  243. receive,
  244. distribution,
  245. totalAmount,
  246. payAmount,
  247. userTotalBalance,
  248. userTotalCredit,
  249. orderTotalCredit } = jsonData || {};
  250. console.log('orderTotalCredit',orderTotalCredit);
  251. this.orderInfo = jsonData;
  252. this.receive = receive;
  253. this.distribution = distribution;//物流信息
  254. this.totalAmount = totalAmount;//订单总金额
  255. this.payAmount = payAmount;// 订单支付金额
  256. this.userTotalBalance = userTotalBalance;// 用户总余额
  257. this.userTotalCredit = userTotalCredit;// 用户总积分
  258. this.orderTotalCredit = orderTotalCredit;//订单需要的总积分
  259. },
  260. submitOrder(){
  261. let that = this;
  262. this.cansubmit = false;
  263. let orderType = 1;
  264. let param = {
  265. receiveId:this.receive.id,
  266. distribution:this.distribution,
  267. };
  268. if(this.fromPage == 'creditOrder'){
  269. orderType = 2
  270. }
  271. param.orderType = orderType;
  272. param.goodsList = this.orderInfo.goodsList.map(item=>{
  273. return {goodsId:item.id,quantity:item.quantity}
  274. })
  275. //获取经纬度
  276. uni.getLocation({
  277. type: 'gcj02',
  278. success: (res) => {
  279. param.latitude = res.latitude;
  280. param.longitude = res.longitude;
  281. that.$u.api.submitOrder(param).then(res=>{
  282. console.log('res',res.data);
  283. that.cansubmit = true;
  284. if(res.data.payAmount>0){
  285. uni.$u.route('/shopping/pay', {
  286. orderId: res.data.orderId,
  287. fromPage:that.fromPage,
  288. payAmount:res.data.payAmount
  289. });
  290. }else{
  291. uni.$u.route('/shopping/paysuccess', {
  292. fromPage:'nocash'
  293. });
  294. }
  295. }).catch(err=>{
  296. that.cansubmit = true;
  297. console.log('submitOrder',err);
  298. })
  299. },
  300. });
  301. }
  302. }
  303. }
  304. </script>
  305. <style>
  306. page{
  307. background-color: #F5F5F5;
  308. /* padding-top: 50px; */
  309. }
  310. </style>
  311. <style lang="scss" scoped>
  312. .page-wrap{
  313. background-color: #fff;
  314. margin-bottom: 20rpx;
  315. }
  316. .addr{
  317. .top{
  318. margin-bottom: 16rpx;
  319. font-size: 26rpx;
  320. color: #999;
  321. .label{
  322. background-color: #FFEBEB;
  323. border: 1px solid #FF5F62;
  324. color: #FF5F62;
  325. padding: 5rpx 20rpx;
  326. border-radius: 30rpx;
  327. margin-right: 10rpx;
  328. }
  329. }
  330. .center{
  331. margin-bottom: 10rpx;
  332. font-size: 30rpx;
  333. color: #333;
  334. line-height: 50rpx;
  335. font-weight: 600;
  336. }
  337. .bottom{
  338. font-size: 30rpx;
  339. color: #666;
  340. }
  341. }
  342. .order-reduced{
  343. .reduced-item{
  344. &:not(:last-child){
  345. margin-bottom: 30rpx;
  346. padding-bottom: 30rpx;
  347. }
  348. .label{
  349. border-radius: 2px;
  350. border: 1px solid #FF3C3F;
  351. margin-left: 20rpx;
  352. font-size: 20rpx;
  353. color: #FF3C3F;
  354. padding: 0 10rpx;
  355. }
  356. }
  357. .integral{
  358. .num{
  359. font-size: 30rpx;
  360. color: #02AB35;
  361. font-weight: 600;
  362. margin-left: 30rpx;
  363. margin-right: 16rpx;
  364. }
  365. .tip{
  366. font-size: 24rpx;
  367. color: #999;
  368. }
  369. .price{
  370. margin-right: 10rpx;
  371. }
  372. }
  373. }
  374. .total{
  375. .total-item{
  376. &:not(:last-child){
  377. margin-bottom: 30rpx;
  378. padding-bottom: 30rpx;
  379. }
  380. .right{
  381. font-weight: 600;
  382. }
  383. }
  384. .gray{
  385. font-size: 24rpx;
  386. margin-left: 15rpx;
  387. }
  388. }
  389. .cart-bottom{
  390. height: 98rpx;
  391. .inner{
  392. position: fixed;
  393. background-color: #fff;
  394. height: 98rpx;
  395. left: 0;
  396. right: 0;
  397. bottom: 0;
  398. padding: 0 20rpx;
  399. .total-price{
  400. font-size: 30rpx;
  401. color: #333;
  402. font-weight: 600;
  403. margin-left: 30rpx;
  404. }
  405. .btn{
  406. height: 80rpx;
  407. line-height: 80rpx;
  408. border-radius: 50rpx;
  409. padding: 0 50rpx;
  410. background-color: #FF3C3F;
  411. color: #fff;
  412. text-align: center;
  413. &.gray{
  414. background-color: #ddd;
  415. color: #999;
  416. }
  417. }
  418. }
  419. }
  420. .product{
  421. .text{
  422. .name{
  423. height: auto;
  424. }
  425. .info{
  426. font-size: 24rpx;
  427. font-weight: 400;
  428. color: #666666;
  429. }
  430. }
  431. }
  432. </style>