create-order.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. <template>
  2. <view class="container order clearfix">
  3. <!-- 透明模态层 -->
  4. <modal-layer v-if='modallayer'></modal-layer>
  5. <!-- 地址选择 -->
  6. <choice-address ref="choiceAddress" v-if="isAddress" :addressData="addressData"></choice-address>
  7. <!-- 商品 -->
  8. <goods-list ref='goods' v-if="isRequest" :goodsData="goodsData" @handleGoodList="handChangeInputGoodsList"></goods-list>
  9. <!-- 发票信息 -->
  10. <invoice-tent ref="invoice"
  11. v-if="isRequest"
  12. :invoiceDatas="invoiceData"
  13. @handleChoiceaInvoice="handleChoiceaInvoiceData">
  14. </invoice-tent>
  15. <!-- 运费 -->
  16. <freight ref="freight"
  17. v-if="isFreight"
  18. :freightData="freightData"
  19. @showFreightAlert="handFreightAlertShow">
  20. </freight>
  21. <freight-alert v-if="isfreightTip" ref="csPhone"></freight-alert>
  22. <!-- 余额抵扣 -->
  23. <view class="invoice-balance">
  24. <view class="balabce-t">
  25. <view class="balabce-t-le">余额抵扣</view>
  26. <view class="balabce-t-ri">
  27. <view class="money">
  28. <text>可用余额:</text>
  29. <text>¥{{userMoney.toFixed(2)}}</text>
  30. </view>
  31. <view class="checkbox-box">
  32. <button class="checkbox iconfont"
  33. hover-class="btn-hover"
  34. v-if="userMoney!=0"
  35. @click.stop="checkedBalabce"
  36. :class="[ischecked ?'icon-gouxuanl':'icon-weigouxuan']"
  37. >
  38. </button>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="balabce-b" :class="{'balabce-b--hide':!ischecked}">
  43. <view class="balabce-b-text animation" :style="{'transform':ischecked?'translateY(0)':'translateY(-50%)','-webkit-transform':ischecked?'translateY(0)':'translateY(-50%)'}">
  44. <text>当前使用:¥{{deductMoney.toFixed(2)}},剩余:¥{{surplusMoney.toFixed(2)}}</text>
  45. </view>
  46. </view>
  47. </view>
  48. <!-- 底部 -->
  49. <view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  50. <view class="footer-le">
  51. <view class="footer-count">
  52. <text>共{{allCount}}件商品</text>
  53. </view>
  54. <view class="footer-price">
  55. <text>总价:<text class="price">¥{{payAllPrice.toFixed(2)}}</text></text>
  56. </view>
  57. </view>
  58. <view class="footer-submit" @click.stop="orderSubmitMit">提交订单</view>
  59. </view>
  60. </view>
  61. </template>
  62. <script>
  63. import choiceAddress from '@/components/module/creatOrder/choiceAddress'
  64. import goodsList from '@/components/module/creatOrder/goodsList'
  65. import invoiceTent from '@/components/module/creatOrder/invoiceTent'
  66. import freight from '@/components/module/creatOrder/freight'
  67. import freightAlert from '@/components/module/modelAlert/freightAlert'
  68. import modalLayer from "@/components/modal-layer"
  69. import { queryAddressList } from "@/api/cart.js"
  70. import { createOrderInfo,createOrderSubmit,getOrderPostage } from "@/api/order.js"
  71. export default {
  72. components:{
  73. choiceAddress,
  74. goodsList,
  75. invoiceTent,
  76. freight,
  77. freightAlert,
  78. modalLayer
  79. },
  80. data() {
  81. return {
  82. modallayer:false,
  83. orderID:0,
  84. productIds:'', //获取上一级页面商品信息
  85. productCount:'', //获取上一级页面商品数量
  86. classifyIDS:'', //获取上一级页面商品分类
  87. userID:'', //用户ID
  88. cartType:'', //购买类型(1购物车提交,2直接购买提交)
  89. submitState:'', //提交状态
  90. balanceDeductionFlag:2, //勾选余额的状态(1使用,2不使用)
  91. allCount:1, //订单提交总数量
  92. payAllPrice:0.00, //订单提交总金额
  93. allPrice:0.00, //订单总金额
  94. surplusMoney:0.00, //显示勾选后的剩余抵扣
  95. userMoney:0.00, //显示可使用余额
  96. deductMoney:0.00, //显示已使用的余额
  97. addressID:'', //地址ID
  98. townID:'', //区ID
  99. isRequest:false, //是否加载完成渲染子组件
  100. isFreight:false, //是否加载完成渲染子组件
  101. isAddress:false, //是否加载完成地址
  102. isfreightTip:false, //控制邮费弹窗
  103. ischecked:false, //是否勾选余额
  104. addressData:{}, //初始化地址信息
  105. goodsData:[], //初始化商品信息
  106. invoiceData:{type:0}, //初始化发票信息
  107. freightData:{}, //邮费数据
  108. orderInfo:[], //提交的商品信息
  109. payInfo:{}, //订单信息
  110. isIphoneX:this.$store.state.isIphoneX
  111. }
  112. },
  113. onLoad(option){//商品数据
  114. let data = JSON.parse(option.data);
  115. this.allPrice = data.data.allPrice;
  116. this.allCount = data.data.allCount;
  117. this.payAllPrice = this.allPrice;
  118. if(option.type =='prodcut'){
  119. this.cartType = 2
  120. this.productCount = data.data.productCount
  121. this.productIds = data.data.productID
  122. }else{
  123. this.cartType = 1
  124. this.productCount = data.data.productCount
  125. this.productIds = data.data.productID
  126. }
  127. this.$api.getStorage().then((resolve) =>{
  128. this.userID = resolve.userID
  129. this.getInitCrearOrder(option);
  130. })
  131. },
  132. methods: {
  133. getInitCrearOrder(option){//获取订单商品信息
  134. let params ={userId:this.userID,count:this.productCount,productIds:this.productIds}
  135. createOrderInfo(params).then(response =>{
  136. let resData = response.data
  137. this.isRequest = true
  138. this.goodsData = resData.shopList
  139. this.userMoney = resData.userMoney
  140. }).catch(response =>{
  141. this.$util.msg(response.msg,2000)
  142. })
  143. },
  144. getFreightData(){//获取邮费信息
  145. let params ={
  146. userId:this.userID,
  147. productIds:this.productIds,
  148. totalPrice:this.allPrice,
  149. townId:this.addressData.townID
  150. }
  151. getOrderPostage(params).then(response =>{
  152. this.isFreight = true
  153. this.freightData = response.data
  154. if(response.data.freePostFlag== 1){
  155. this.payAllPrice = this.payAllPrice+response.data.freight
  156. }
  157. })
  158. },
  159. getAddressData(){//获取地址信息
  160. this.$api.getStorage().then((resolve) => {
  161. queryAddressList({pageNum:1,pageSize:1,userID:resolve.userID}).then(response =>{
  162. this.isAddress = true
  163. this.addressData = {}
  164. if(response.data.results != ''){
  165. this.addressID = response.data.results[0].addressID;
  166. this.townID = response.data.results[0].townID;
  167. this.addressData = response.data.results[0];
  168. this.getFreightData()
  169. }else{
  170. this.addressData = this.addressData;
  171. }
  172. })
  173. })
  174. },
  175. handChangeInputGoodsList(data){//对应供应商的留言信息
  176. this.goodsData = data;
  177. },
  178. handleChoiceaInvoiceData(data){//获取发票信息
  179. this.invoiceData = data
  180. },
  181. checkedBalabce(){//勾选使用余额
  182. if(this.userMoney > 0){
  183. this.ischecked = !this.ischecked
  184. if(this.ischecked){
  185. this.balanceDeductionFlag =1
  186. this.attributePallPrice()
  187. }else{
  188. if(this.freightData.freePostFlag == 1 || this.freightData.freePostFlag == '1'){
  189. this.payAllPrice = this.allPrice+parseInt(this.freightData.freight)
  190. }else{
  191. this.payAllPrice = this.allPrice
  192. }
  193. this.balanceDeductionFlag = 2
  194. }
  195. }else{
  196. return
  197. }
  198. },
  199. attributePallPrice(){//计算价格
  200. if(this.freightData.freePostFlag == 1 || this.freightData.freePostFlag == '1'){
  201. this.attributeHashfreight(this.freightData.freight)
  202. }else{
  203. this.attributeNofreight()
  204. }
  205. },
  206. attributeNofreight(){//计算没有邮费的支付价格
  207. if(this.userMoney>this.payAllPrice){
  208. this.payAllPrice = 0.00
  209. this.deductMoney = this.allPrice //勾选后使用抵余额
  210. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  211. }else{
  212. this.payAllPrice = this.allPrice - this.userMoney //勾选后的总价
  213. this.deductMoney = this.userMoney //勾选后使用抵余额
  214. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  215. }
  216. },
  217. attributeHashfreight(freight){//计算需要邮费的支付价格
  218. this.payAllPrice = this.allPrice+parseInt(freight)//计算不包邮的价格 总价等于商品价格+邮费
  219. if(this.userMoney>this.payAllPrice){ //余额大于支付金额
  220. this.payAllPrice =0.00
  221. this.deductMoney = this.allPrice+parseInt(freight) //勾选后使用抵余额
  222. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  223. }else{
  224. this.payAllPrice = this.allPrice+parseInt(freight) - this.userMoney //勾选后的总价
  225. this.deductMoney = this.userMoney //勾选后使用抵余额
  226. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  227. }
  228. },
  229. orderSubmitMit(){//提交订单
  230. if(this.addressID == ''){
  231. this.$util.msg('请先添加收货地址~',2000)
  232. return
  233. }
  234. this.orderInfo = this.goodsData.map(el => {
  235. let productInfo = [];
  236. el.productsList.forEach(item => {
  237. productInfo.push({
  238. productId:item.productID,
  239. productNum:item.productCount,
  240. presentNum:0
  241. })
  242. })
  243. return {shopId:el.shopID,note:el.note?el.note:'',productInfo:productInfo}
  244. })
  245. //订单信息
  246. this.payInfo = {
  247. clauseId:0,//条款(暂时保留)
  248. orderShouldPayFee:this.payAllPrice.toFixed(2),//提交的总价
  249. balancePayFlag:this.balanceDeductionFlag,//余额抵扣的状态
  250. freight:this.freightData.freight>0 ? this.freightData.freight : this.freightData.freight.toFixed(2),//邮费
  251. freePostFlag:parseInt(this.freightData.freePostFlag)//运费形式
  252. }
  253. let param = {
  254. orderSource:6,
  255. clubUserId:this.userID,
  256. cartType:this.cartType,
  257. addressId:this.addressID,
  258. orderInfo:this.orderInfo,
  259. payInfo:this.payInfo, //订单信息
  260. orderInvoice:this.invoiceData
  261. }
  262. this.modalLayer = true;
  263. createOrderSubmit({'params':JSON.stringify(param)}).then(response =>{
  264. if(response.code === 1){
  265. this.submitState ='success'
  266. let data = {orderID:response.data.orderID}
  267. this.$api.navigateTo(`/pages/user/order/order-cashier?type=${this.submitState}&data=${JSON.stringify({data:data})}`)
  268. }else if(response.code === 2){
  269. this.submitState ='nosuccess'
  270. let data = {
  271. orderID:response.data.orderID,
  272. orderNo:response.data.orderNo,
  273. orderMark:response.data.orderMark,
  274. payableAmount:response.data.payableAmount
  275. }
  276. this.$api.navigateTo(`/pages/user/order/order-cashier?type=${this.submitState}&data=${JSON.stringify({data:data})}`)
  277. }else{
  278. this.$util.msg(response.msg,2000);
  279. }
  280. }).catch(response =>{})
  281. },
  282. handFreightAlertShow(){//显示邮费弹窗
  283. this.isfreightTip = true;
  284. },
  285. hideFreight(){//关闭邮费弹窗
  286. this.isfreightTip = false;
  287. },
  288. },
  289. onShow() {
  290. // this.addressID = ''
  291. let pages = getCurrentPages();
  292. let currPage = pages[pages.length-1];
  293. if(currPage.data.select =='select'){
  294. this.isAddress = true
  295. let SelectData = uni.getStorageSync('selectAddress');
  296. this.addressID = SelectData.addressID;
  297. this.addressData = SelectData
  298. this.getFreightData()
  299. }else{
  300. this.getAddressData()
  301. }
  302. }
  303. }
  304. </script>
  305. <style lang="scss">
  306. page {
  307. height: auto;
  308. background:#F7F7F7;
  309. }
  310. .btn-hover{
  311. background: #FFFFFF;
  312. }
  313. .animation{
  314. /* transition: transform 0.3s ease;*/
  315. transition-property: transform;
  316. transition-duration: 0.3s;
  317. transition-timing-function: ease;
  318. }
  319. .order{
  320. padding-bottom: 134rpx;
  321. }
  322. .invoice-freight{
  323. width: 702rpx;
  324. padding: 0 24rpx;
  325. height: 86rpx;
  326. line-height: 86rpx;
  327. font-size: $font-size-28;
  328. color: $text-color;
  329. background: #FFFFFF;
  330. float: left;
  331. font-weight: bold;
  332. .freight-left{
  333. float: left;
  334. .icon-yunfeishuoming{
  335. height: 100%;
  336. padding: 0 15rpx;
  337. color: $color-system;
  338. font-weight: normal;
  339. }
  340. }
  341. .freight-right{
  342. float: right;
  343. color: #2A81FF;
  344. }
  345. }
  346. .invoice-balance{
  347. width: 702rpx;
  348. height: auto;
  349. padding:0 24rpx;
  350. background: #FFFFFF;
  351. float: left;
  352. margin-top: 24rpx;
  353. margin-bottom: 24rpx;
  354. .balabce-t{
  355. width: 100%;
  356. height: 86rpx;
  357. line-height: 86rpx;
  358. font-size: $font-size-28;
  359. color: $text-color;
  360. float: left;
  361. .balabce-t-le{
  362. float: left;
  363. font-weight: bold;
  364. }
  365. .balabce-t-ri{
  366. float: right;
  367. display: flex;
  368. align-items: center;
  369. .money{
  370. display: flex;
  371. float: left;
  372. }
  373. .checkbox-box{
  374. display: flex;
  375. width: 60rpx;
  376. float: left;
  377. height: 100%;
  378. font-size: $font-size-24;
  379. .checkbox{
  380. width: 40rpx;
  381. text-align: right;
  382. box-sizing: border-box;
  383. text-align: center;
  384. text-decoration: none;
  385. border-radius: 0;
  386. -webkit-tap-highlight-color: transparent;
  387. overflow: hidden;
  388. color: $color-system;
  389. }
  390. }
  391. }
  392. }
  393. .balabce-b{
  394. width: 100%;
  395. float: left;
  396. overflow: hidden;
  397. .balabce-b-text{
  398. width: 100%;
  399. line-height: 58rpx;
  400. font-size: $font-size-24;
  401. color: #FF2A2A;
  402. text-align: right;
  403. float: right;
  404. }
  405. &.balabce-b--hide {
  406. padding: 0 0;
  407. height: 0px;
  408. line-height: 0px;
  409. }
  410. }
  411. }
  412. .footer{
  413. position: fixed;
  414. left: 0;
  415. bottom: 0;
  416. z-index: 995;
  417. display: flex;
  418. align-items: center;
  419. width: 100%;
  420. height: 110rpx;
  421. line-height: 110rpx;
  422. justify-content: space-between;
  423. font-size: $font-size-28;
  424. background-color: #FFFFFF;
  425. z-index: 998;
  426. color: $text-color;
  427. .footer-le{
  428. width:550rpx;
  429. height:100%;
  430. float: left;
  431. }
  432. .footer-count{
  433. float: left;
  434. padding-left: 24rpx;
  435. font-weight: bold;
  436. }
  437. .footer-price{
  438. float: right;
  439. text-align: right;
  440. color: $text-color;
  441. font-weight: bold;
  442. padding-right: 24rpx;
  443. .price{
  444. font-size: $font-size-32;
  445. color: #FF2A2A;
  446. }
  447. }
  448. .footer-submit{
  449. display:flex;
  450. align-items:center;
  451. justify-content: center;
  452. width: 200rpx;
  453. height: 100%;
  454. color: #FFFFFF;
  455. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  456. }
  457. }
  458. </style>