create-order.vue 12 KB

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