create-order.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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/cm-module/creatOrder/choiceAddress'
  64. import goodsList from '@/components/cm-module/creatOrder/goodsList'
  65. import invoiceTent from '@/components/cm-module/creatOrder/invoiceTent'
  66. import freight from '@/components/cm-module/creatOrder/freight'
  67. import freightAlert from '@/components/cm-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(error =>{
  141. this.$util.msg(error.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.allPrice + response.data.freight
  156. }else{
  157. this.payAllPrice = this.allPrice
  158. }
  159. })
  160. },
  161. getAddressData(){//获取地址信息
  162. this.$api.getStorage().then((resolve) => {
  163. queryAddressList({pageNum:1,pageSize:1,userID:resolve.userID}).then(response =>{
  164. this.isAddress = true
  165. this.addressData = {}
  166. if(response.data.results != ''){
  167. this.addressID = response.data.results[0].addressID;
  168. this.townID = response.data.results[0].townID;
  169. this.addressData = response.data.results[0];
  170. this.getFreightData()
  171. }else{
  172. this.addressData = this.addressData;
  173. }
  174. })
  175. })
  176. },
  177. handChangeInputGoodsList(data){//对应供应商的留言信息
  178. this.goodsData = data;
  179. },
  180. handleChoiceaInvoiceData(data){//获取发票信息
  181. this.invoiceData = data
  182. },
  183. checkedBalabce(){//勾选使用余额
  184. if(this.userMoney > 0){
  185. this.ischecked = !this.ischecked
  186. if(this.ischecked){
  187. this.balanceDeductionFlag =1
  188. this.attributePallPrice()
  189. }else{
  190. if(this.freightData.freePostFlag == 1 || this.freightData.freePostFlag == '1'){
  191. this.payAllPrice = this.allPrice+parseInt(this.freightData.freight)
  192. }else{
  193. this.payAllPrice = this.allPrice
  194. }
  195. this.balanceDeductionFlag = 2
  196. }
  197. }else{
  198. return
  199. }
  200. },
  201. attributePallPrice(){//计算价格
  202. if(this.freightData.freePostFlag == 1 || this.freightData.freePostFlag == '1'){
  203. this.attributeHashfreight(this.freightData.freight)
  204. }else{
  205. this.attributeNofreight()
  206. }
  207. },
  208. attributeNofreight(){//计算没有邮费的支付价格
  209. if(this.userMoney>this.payAllPrice){
  210. this.payAllPrice = 0.00
  211. this.deductMoney = this.allPrice //勾选后使用抵余额
  212. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  213. }else{
  214. this.payAllPrice = this.allPrice - this.userMoney //勾选后的总价
  215. this.deductMoney = this.userMoney //勾选后使用抵余额
  216. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  217. }
  218. },
  219. attributeHashfreight(freight){//计算需要邮费的支付价格
  220. this.payAllPrice = this.allPrice+parseInt(freight)//计算不包邮的价格 总价等于商品价格+邮费
  221. if(this.userMoney>this.payAllPrice){ //余额大于支付金额
  222. this.payAllPrice =0.00
  223. this.deductMoney = this.allPrice+parseInt(freight) //勾选后使用抵余额
  224. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  225. }else{
  226. this.payAllPrice = this.allPrice+parseInt(freight) - this.userMoney //勾选后的总价
  227. this.deductMoney = this.userMoney //勾选后使用抵余额
  228. this.surplusMoney = this.userMoney - this.deductMoney //勾选后的剩余抵扣
  229. }
  230. },
  231. orderSubmitMit(){//提交订单
  232. if(this.addressID == ''){
  233. this.$util.msg('请先添加收货地址~',2000)
  234. return
  235. }
  236. this.orderInfo = this.goodsData.map(el => {
  237. let productInfo = [];
  238. el.productsList.forEach(item => {
  239. productInfo.push({
  240. productId:item.productID,
  241. productNum:item.productCount,
  242. presentNum:0
  243. })
  244. })
  245. return {shopId:el.shopID,note:el.note?el.note:'',productInfo:productInfo}
  246. })
  247. //订单信息
  248. this.payInfo = {
  249. clauseId:0,//条款(暂时保留)
  250. orderShouldPayFee:this.payAllPrice.toFixed(2),//提交的总价
  251. balancePayFlag:this.balanceDeductionFlag,//余额抵扣的状态
  252. freight:parseInt(this.freightData.freight).toFixed(2),//邮费
  253. freePostFlag:parseInt(this.freightData.freePostFlag)//运费形式
  254. }
  255. let param = {
  256. orderSource:6,
  257. clubUserId:this.userID,
  258. cartType:this.cartType,
  259. addressId:this.addressID,
  260. orderInfo:this.orderInfo,
  261. payInfo:this.payInfo, //订单信息
  262. orderInvoice:this.invoiceData
  263. }
  264. this.modalLayer = true;
  265. createOrderSubmit({'params':JSON.stringify(param)}).then(response =>{
  266. if(response.code === 1){
  267. this.submitState ='success'
  268. let data = {orderID:response.data.orderID}
  269. this.$api.navigateTo(`/pages/user/order/success?data=${JSON.stringify({data:data})}`)
  270. }else if(response.code === 2){
  271. this.submitState ='confirm'
  272. this.$api.redirectTo(`/pages/user/order/order-payment?type=${this.submitState}&orderID=${response.data.orderID}`)
  273. }else{
  274. this.$util.msg(response.msg,2000);
  275. }
  276. }).catch(error =>{})
  277. },
  278. handFreightAlertShow(){//显示邮费弹窗
  279. this.isfreightTip = true;
  280. },
  281. hideFreight(){//关闭邮费弹窗
  282. this.isfreightTip = false;
  283. },
  284. },
  285. onShow() {
  286. // this.addressID = ''
  287. let pages = getCurrentPages();
  288. let currPage = pages[pages.length-1];
  289. if(currPage.data.select =='select'){
  290. this.isAddress = true
  291. let SelectData = uni.getStorageSync('selectAddress');
  292. this.addressID = SelectData.addressID;
  293. this.addressData = SelectData
  294. this.getFreightData()
  295. }else{
  296. this.getAddressData()
  297. }
  298. }
  299. }
  300. </script>
  301. <style lang="scss">
  302. page {
  303. height: auto;
  304. background:#F7F7F7;
  305. }
  306. .btn-hover{
  307. background: #FFFFFF;
  308. }
  309. .animation{
  310. /* transition: transform 0.3s ease;*/
  311. transition-property: transform;
  312. transition-duration: 0.3s;
  313. transition-timing-function: ease;
  314. }
  315. .order{
  316. padding-bottom: 134rpx;
  317. }
  318. .invoice-freight{
  319. width: 702rpx;
  320. padding: 0 24rpx;
  321. height: 86rpx;
  322. line-height: 86rpx;
  323. font-size: $font-size-28;
  324. color: $text-color;
  325. background: #FFFFFF;
  326. float: left;
  327. font-weight: bold;
  328. .freight-left{
  329. float: left;
  330. .icon-yunfeishuoming{
  331. height: 100%;
  332. padding: 0 15rpx;
  333. color: $color-system;
  334. font-weight: normal;
  335. }
  336. }
  337. .freight-right{
  338. float: right;
  339. color: #2A81FF;
  340. }
  341. }
  342. .invoice-balance{
  343. width: 702rpx;
  344. height: auto;
  345. padding:0 24rpx;
  346. background: #FFFFFF;
  347. float: left;
  348. margin-top: 24rpx;
  349. margin-bottom: 24rpx;
  350. .balabce-t{
  351. width: 100%;
  352. height: 86rpx;
  353. line-height: 86rpx;
  354. font-size: $font-size-28;
  355. color: $text-color;
  356. float: left;
  357. .balabce-t-le{
  358. float: left;
  359. font-weight: bold;
  360. }
  361. .balabce-t-ri{
  362. float: right;
  363. display: flex;
  364. align-items: center;
  365. .money{
  366. display: flex;
  367. float: left;
  368. }
  369. .checkbox-box{
  370. display: flex;
  371. width: 60rpx;
  372. float: left;
  373. height: 100%;
  374. font-size: $font-size-24;
  375. .checkbox{
  376. width: 40rpx;
  377. text-align: right;
  378. box-sizing: border-box;
  379. text-align: center;
  380. text-decoration: none;
  381. border-radius: 0;
  382. -webkit-tap-highlight-color: transparent;
  383. overflow: hidden;
  384. color: $color-system;
  385. }
  386. }
  387. }
  388. }
  389. .balabce-b{
  390. width: 100%;
  391. float: left;
  392. overflow: hidden;
  393. .balabce-b-text{
  394. width: 100%;
  395. line-height: 58rpx;
  396. font-size: $font-size-24;
  397. color: #FF2A2A;
  398. text-align: right;
  399. float: right;
  400. }
  401. &.balabce-b--hide {
  402. padding: 0 0;
  403. height: 0px;
  404. line-height: 0px;
  405. }
  406. }
  407. }
  408. .footer{
  409. position: fixed;
  410. left: 0;
  411. bottom: 0;
  412. z-index: 995;
  413. display: flex;
  414. align-items: center;
  415. width: 100%;
  416. height: 110rpx;
  417. line-height: 110rpx;
  418. justify-content: space-between;
  419. font-size: $font-size-28;
  420. background-color: #FFFFFF;
  421. z-index: 998;
  422. color: $text-color;
  423. .footer-le{
  424. width:550rpx;
  425. height:100%;
  426. float: left;
  427. }
  428. .footer-count{
  429. float: left;
  430. padding-left: 24rpx;
  431. font-weight: bold;
  432. }
  433. .footer-price{
  434. float: right;
  435. text-align: right;
  436. color: $text-color;
  437. font-weight: bold;
  438. padding-right: 24rpx;
  439. .price{
  440. font-size: $font-size-32;
  441. color: #FF2A2A;
  442. }
  443. }
  444. .footer-submit{
  445. display:flex;
  446. align-items:center;
  447. justify-content: center;
  448. width: 200rpx;
  449. height: 100%;
  450. color: #FFFFFF;
  451. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  452. }
  453. }
  454. </style>