create-order.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  1. <template>
  2. <view class="container order clearfix" :style="{paddingBottom :isIphoneX ? '170rpx' : '134rpx'}">
  3. <!-- 地址选择 -->
  4. <choice-address ref="choiceAddress" v-if="isAddress" :addressData="addressData"></choice-address>
  5. <!-- 商品 -->
  6. <goods-list ref='goods' v-if="isRequest" :goodsData="goodsData" @handleGoodList="handChangeInputGoodsList"></goods-list>
  7. <!-- 发票信息 -->
  8. <invoice-tent ref="invoice"
  9. v-if="isRequest"
  10. :invoiceDatas="invoiceData"
  11. @handleChoiceaInvoice="handleChoiceaInvoiceData">
  12. </invoice-tent>
  13. <!-- 优惠券选择弹窗 -->
  14. <coupon ref="coupon"
  15. v-if="isCouponShow"
  16. :couponList="couponList"
  17. @handleChoiceaCoupon="handleChoiceaCouponData">
  18. </coupon>
  19. <!-- 兑换优惠券弹窗 -->
  20. <exchangeCoupon v-if="isExchangePopup"></exchangeCoupon>
  21. <!-- 运费 -->
  22. <freight ref="freight"
  23. v-if="isFreight"
  24. :freightData="freightData"
  25. @confirmFreight="hanldFreightFn"
  26. @confirmFreightBeans = "hanldFreightBeans"
  27. >
  28. </freight>
  29. <freight-alert v-if="isfreightTip" ref="csPhone"></freight-alert>
  30. <!-- 余额抵扣 -->
  31. <view class="invoice-balance" v-show="!rechargeGoods">
  32. <view class="balabce-t">
  33. <view class="balabce-t-le">余额抵扣</view>
  34. <view class="balabce-t-ri">
  35. <view class="money">
  36. <text>可用余额:</text>
  37. <text>¥{{userMoney | NumFormat}}</text>
  38. </view>
  39. <view class="checkbox-box">
  40. <button class="checkbox iconfont"
  41. hover-class="btn-hover"
  42. v-if="userMoney!=0"
  43. @click.stop="checkedBalabce"
  44. :class="[ischecked ?'icon-yixuanze':'icon-weixuanze']"
  45. >
  46. </button>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="balabce-b" :class="{'balabce-b--hide':!ischecked}">
  51. <view class="balabce-b-text animation" :style="{'transform':ischecked?'translateY(0)':'translateY(-50%)','-webkit-transform':ischecked?'translateY(0)':'translateY(-50%)'}">
  52. <text>当前使用:¥{{deductMoney | NumFormat}},剩余:¥{{surplusMoney | NumFormat}}</text>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- 底部 -->
  57. <view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  58. <view class="footer-le">
  59. <view class="footer-count">
  60. <text>共{{ totalCount }}件商品</text>
  61. </view>
  62. <view class="footer-price">
  63. <view class="sum" :class="totalDiscountAmount == 0 ? 'none' : ''">
  64. 总价:<text class="price">¥{{ orderShouldPayFee | NumFormat }}</text>
  65. </view>
  66. <view class="sum-none" v-if="totalDiscountAmount > 0">
  67. <text class="money-reduced">共减<text>¥{{ totalDiscountAmount | NumFormat}}</text></text>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="footer-submit" @click.stop="orderSubmitMit">
  72. <view class="btn" :class="isSubLoading ? 'disabled' : ''" >提交订单</view>
  73. </view>
  74. </view>
  75. <!-- 优惠券 -->
  76. <view class="coupon-content-model" v-if="isCouponModel">
  77. <view class="coupon-alert-content">
  78. <view class="coupon">
  79. <view class="coupon-list">
  80. <view class="list-cell-tags">{{ ExchangeCouponData.couponType | TypeFormat }}</text></view>
  81. <view class="list-cell-le">
  82. <view class="coupon-maxMoney">
  83. <text class="small">¥</text>
  84. {{ ExchangeCouponData.couponAmount }}
  85. </view>
  86. <view class="coupon-minMoney">
  87. <text class="txt">满{{ ExchangeCouponData.touchPrice }}可用</text>
  88. </view>
  89. </view>
  90. <view class="list-cell-ri">
  91. <view class="list-cell-top">
  92. <text v-if="ExchangeCouponData.couponType == 0">
  93. {{ ExchangeCouponData.productType && ExchangeCouponData.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
  94. </text>
  95. <text v-if="ExchangeCouponData.couponType == 1">
  96. {{ ExchangeCouponData.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
  97. </text>
  98. <text v-if="ExchangeCouponData.couponType == 3">仅限购买店铺【{{ ExchangeCouponData.shopName }}】的商品</text>
  99. <text v-if="ExchangeCouponData.couponType == 4 || ExchangeCouponData.couponType == 2">全商城商品通用</text>
  100. </view>
  101. <view class="list-cell-time">{{ ExchangeCouponData.startDate }} - {{ ExchangeCouponData.endDate }}</view>
  102. </view>
  103. </view>
  104. <view class="coupon-btn" @click.stop="handleClickCancel">立即收下</view>
  105. </view>
  106. </view>
  107. </view>
  108. <!-- 提示弹窗 -->
  109. <tui-modal
  110. :show="showModal"
  111. @click="handleClick"
  112. @cancel="hideMobel"
  113. :content="contentModalText"
  114. :button="modalButton"
  115. color="#333"
  116. :size="28"
  117. shape="circle"
  118. :maskClosable="false"
  119. ></tui-modal>
  120. </view>
  121. </template>
  122. <script>
  123. import { mapState, mapMutations } from 'vuex'
  124. import choiceAddress from './components/choiceAddress'
  125. import goodsList from './components/goodsList'
  126. import invoiceTent from './components/invoiceTent'
  127. import coupon from './components/coupon'
  128. import exchangeCoupon from './components/exchangeCoupon'
  129. import freight from './components/freight'
  130. import freightAlert from '@/components/cm-module/modelAlert/freightAlert'
  131. export default {
  132. components:{
  133. choiceAddress,
  134. goodsList,
  135. invoiceTent,
  136. coupon,
  137. exchangeCoupon,
  138. freight,
  139. freightAlert
  140. },
  141. data() {
  142. return {
  143. isIphoneX:this.$store.state.isIphoneX,
  144. isSubLoading:false,
  145. confirmType:1,
  146. orderID:0,
  147. cartParam: {// 购物车立即结算确认订单参数
  148. skuIds:0, // 商品Id(逗号隔开)
  149. source:2, // 来源:1WWW 2小程序
  150. userId:0 // 用户Id
  151. },
  152. productParam: {// 商品立即购买确认订单参数
  153. productCount:0, // 商品数量
  154. productId:0, // 商品Id
  155. source:2, // 来源:1WWW 2小程序
  156. userId:0 // 用户Id
  157. },
  158. supportParm:{// 组合商品立即购买确认订单参数
  159. productInfo:'',
  160. source:2, // 来源:1WWW 2小程序
  161. userId:0 // 用户Id
  162. },
  163. postageParam: {// 邮费计算参数
  164. productIds:0, // 商品Id(逗号隔开)
  165. userId:0, // 用户Id
  166. townId:0 // 地区Id
  167. },
  168. confirmParam: {
  169. cartType:1, // 购买类型:(1自主下单, 3协销下单)
  170. orderSource:6, // 订单来源 1WWW 6小程序[采美,星范]
  171. addressId:0, // 收货地址Id
  172. clubCouponId:0, // 关联优惠券Id
  173. clubId:0, // 机构Id
  174. orderInfo:[], // 订单商品数据
  175. orderInvoice:{type:0}, // 订单发票信息
  176. payInfo:{ // 订单金额数据
  177. orderShouldPayFee: 0, // 订单最终支付金额
  178. balancePayFlag: 0, // 勾选余额的状态(1使用,0不使用)
  179. clauseId:0, // 条款Id
  180. postage: 0, // 运费金额
  181. postageFlag: 0, // 运费类型
  182. userBeans: 0, // 抵扣采美豆数量
  183. rebateFlag:0 // 是否返佣订单
  184. },
  185. unionId:uni.getStorageSync('unionId'),// 用户unionId
  186. }, // 提交订单参数
  187. productIds:'', // 获取上一级页面商品信息
  188. submitState:'', // 提交状态
  189. totalCount:1, // 订单提交总数量
  190. reducedPrice:0, // 满减金额
  191. couponAmount:0, // 优惠券金额
  192. totalDiscountAmount:0, // 共减金额
  193. allPrice:0.00, // 订单总金额
  194. orderShouldPayFee:0, // 订单最终支付金额
  195. surplusMoney:0.00, // 显示勾选后的剩余抵扣
  196. userMoney:0.00, // 显示可使用余额
  197. deductMoney:0.00, // 显示已使用的余额
  198. isRequest:false, // 是否加载完成渲染子组件
  199. isFreight:false, // 是否加载完成渲染子组件
  200. isAddress:false, // 是否加载完成地址
  201. isExchangePopup:false, // 控制兑换优惠券弹窗
  202. isfreightTip:false, // 控制邮费弹窗
  203. ischecked:false, // 是否勾选余额
  204. hanldFreePostFlag:'', // 邮费状态
  205. hanldFreight:'', // 邮费
  206. addressData:{}, // 初始化地址信息
  207. goodsData:[], // 初始化商品信息
  208. couponList:[], // 初始化优惠券信息
  209. invoiceData:{type:0}, // 初始化发票信息
  210. freightData:{}, // 邮费数据
  211. orderInfo:[], // 提交的商品信息
  212. rechargeGoods:null, // 判断订单里有定金商品或者充值商品时,余额抵扣部分不显示
  213. freightBeansMoney:0, // 存储采美豆抵扣金额
  214. isCouponShow:false, // 是否显示可选优惠券
  215. isCheckedBeans:false, // 是否抵扣采美豆
  216. isCouponModel:false, // 兑换优惠券成功提示
  217. ExchangeCouponData:{}, // 兑换优惠券信息
  218. contentModalText: '采购金额过小,将扣除500采美豆,建议您前往采美旗下“颜选美学”小程序购买小额商品。', //操作文字提示语句
  219. modalButton: [
  220. {
  221. text: '前往颜选美学',
  222. type: 'gray',
  223. plain: true //是否空心
  224. },
  225. {
  226. text: '继续提交',
  227. customStyle: {
  228. color: '#fff',
  229. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  230. },
  231. plain: false
  232. }
  233. ],
  234. showModal: false,
  235. showModalstauts:0
  236. }
  237. },
  238. onLoad(option){//商品数据
  239. this.initStorage(option)
  240. },
  241. filters:{
  242. NumFormat(value) {//处理金额
  243. return Number(value).toFixed(2)
  244. },
  245. },
  246. methods: {
  247. async initStorage(option){
  248. const data = JSON.parse(option.data)
  249. const userInfo = await this.$api.getStorage()
  250. console.log('data',data)
  251. this.productParam.userId =
  252. this.cartParam.userId =
  253. this.supportParm.userId =
  254. this.postageParam.userId = userInfo.userId ? userInfo.userId : 0
  255. this.confirmParam.clubId = userInfo.clubId ? userInfo.clubId : 0
  256. switch(option.type){
  257. case '1':// 商品详情立即购买
  258. this.confirmParam.cartType = 2
  259. this.productParam.productCount = data.data.productCount
  260. this.productParam.productId = data.data.productIds
  261. this.productParam.skuId = data.data.skuId
  262. this.productIds = data.data.productIds
  263. this.GetProductCreateOrderInfo()
  264. break
  265. case '2':// 购物车结算
  266. this.confirmParam.cartType = 1
  267. this.confirmType = 2
  268. this.cartParam.skuIds = data.data.skuIds
  269. this.CartCreateOrderInfo()
  270. break
  271. case '3':// 组合商品立即购买
  272. this.confirmParam.cartType = 2
  273. this.confirmType = 2
  274. this.supportParm.productInfo = JSON.stringify(data.data)
  275. this.GetOrderClubProductSupporting()
  276. }
  277. },
  278. GetProductCreateOrderInfo(){// 商品立即购买确认订单数据初始化
  279. this.OrderService.ProductCreateOrderInfo(this.productParam).then(response =>{
  280. this.setCreatDataInfo(response.data)
  281. })
  282. .catch(error =>{
  283. this.$util.msg(error.msg,2000)
  284. })
  285. },
  286. GetOrderClubProductSupporting(){// 组合商品立即购买确认订单数据初始化
  287. this.OrderService.OrderClubProductSupporting(this.supportParm).then(response =>{
  288. this.setCreatDataInfo(response.data)
  289. })
  290. .catch(error =>{
  291. this.$util.msg(error.msg,2000)
  292. })
  293. },
  294. CartCreateOrderInfo(){// 购物车去结算确认订单数据初始化
  295. this.OrderService.CartCreateOrderInfo(this.cartParam).then(response =>{
  296. this.setCreatDataInfo(response.data)
  297. })
  298. .catch(error =>{
  299. this.$util.msg(error.msg,2000)
  300. })
  301. },
  302. setCreatDataInfo(data){// 公共初始化数据
  303. this.isRequest = true
  304. this.goodsData = data.list
  305. this.couponList = data.couponList
  306. this.userMoney = data.userMoney
  307. this.reducedPrice = data.reducedPrice
  308. this.totalCount = data.totalCount
  309. this.allPrice = data.totalPrice
  310. this.rechargeGoods = data.rechargeGoods
  311. if(this.couponList.length>0){
  312. this.isCouponShow = true
  313. this.couponAmount = data.couponList[0].couponAmount
  314. this.confirmParam.clubCouponId = data.couponList[0].clubCouponId
  315. }
  316. this.orderShouldPayFee = this.allPrice - this.couponAmount
  317. this.totalDiscountAmount = this.reducedPrice + this.couponAmount
  318. this.postageParam.productIds = this.getProductIds(data.list)
  319. this.getAddressData()
  320. },
  321. // 获取订单商品id列表
  322. getProductIds(list){
  323. const productIds = []
  324. list.forEach(function(supplier){
  325. supplier.cartList.forEach(function(product){
  326. productIds.push(product.productId)
  327. })
  328. })
  329. // console.log(list);
  330. return productIds.join(',')
  331. },
  332. getFreightData(){// 获取邮费信息
  333. this.isFreight = false
  334. this.OrderService.GetOrderPostage(this.postageParam).then(response =>{
  335. const data = response.data
  336. this.isFreight = true
  337. this.isCheckedBeans = false
  338. this.freightData = data
  339. this.hanldFreePostFlag = data.postageFlag
  340. this.hanldFreight = data.postage
  341. if(this.hanldFreePostFlag == 1){
  342. if( this.freightData.userBeans > 0 ){
  343. this.freightBeansMoney = this.hanldFreight
  344. }else{
  345. this.freightBeansMoney = 0
  346. }
  347. this.orderShouldPayFee = this.allPrice + data.postage
  348. this.attributePallPrice()
  349. this.hanldFreightBeans(this.isCheckedBeans)
  350. }else{
  351. if( this.freightData.userBeans > 0 ){
  352. this.freightBeansMoney = 30
  353. }else{
  354. this.freightBeansMoney = 0
  355. }
  356. this.orderShouldPayFee = this.allPrice
  357. this.attributePallPrice()
  358. this.hanldFreightBeans(this.isCheckedBeans)
  359. }
  360. })
  361. },
  362. async getAddressData(){//获取地址信息
  363. const userInfo = await this.$api.getStorage()
  364. this.UserService.QueryAddressList(
  365. {
  366. pageNum:1,
  367. pageSize:1,
  368. userId:userInfo.userId,
  369. }
  370. ).then(response =>{
  371. let data = response.data
  372. this.isAddress = true
  373. this.addressData = {}
  374. if( data.list && data.list.length > 0 ){
  375. this.confirmParam.addressId = data.list[0].addressId
  376. this.postageParam.townId = data.list[0].townId
  377. this.addressData = data.list[0]
  378. this.getFreightData()
  379. }else{
  380. this.addressData = this.addressData
  381. }
  382. })
  383. },
  384. handChangeInputGoodsList(data){//对应供应商的留言信息
  385. this.goodsData = data
  386. },
  387. handleChoiceaInvoiceData(data){//获取发票信息
  388. this.confirmParam.orderInvoice = data
  389. },
  390. hanldFreightFn(data){//显示邮费弹窗
  391. console.log('邮费信息',data)
  392. switch(data.postageFlag){
  393. case 1:
  394. this.hanldFreight = this.freightData.postage
  395. this.hanldFreePostFlag = data.postageFlag
  396. this.freightBeansMoney = data.freightBeansMoney
  397. this.orderShouldPayFee =this.allPrice + this.hanldFreight
  398. this.attributePallPrice()
  399. this.hanldFreightBeans(this.isCheckedBeans)
  400. break
  401. case -1:
  402. this.hanldFreight = 0
  403. this.hanldFreePostFlag = data.postageFlag
  404. this.freightBeansMoney = data.freightBeansMoney
  405. this.orderShouldPayFee = this.allPrice
  406. this.attributePallPrice()
  407. this.hanldFreightBeans(this.isCheckedBeans)
  408. break
  409. }
  410. },
  411. hanldFreightBeans(data){//是否勾选采美豆抵扣
  412. this.isCheckedBeans = data
  413. console.log(this.confirmParam.payInfo)
  414. if(this.isCheckedBeans){
  415. // 判断如果采美豆大于等于运费*100
  416. if( this.freightData.userBeans > 0 ){
  417. this.confirmParam.payInfo.userBeans = this.freightBeansMoney*100
  418. }else{
  419. this.confirmParam.payInfo.userBeans = 0
  420. }
  421. // 计算抵扣后的总价
  422. if(this.hanldFreePostFlag == 1){
  423. // 如果使用了余额 最终价格
  424. if(this.ischecked){
  425. let totalAmount = this.allPrice - this.couponAmount
  426. if(this.userMoney >= totalAmount){
  427. this.orderShouldPayFee = 0.00
  428. this.deductMoney = this.allPrice - this.couponAmount // 当前使用金额等于订单金额
  429. this.surplusMoney = this.userMoney - this.deductMoney // 剩余金额等于余额-当前使用金额
  430. }else{
  431. this.orderShouldPayFee = this.allPrice - this.userMoney - this.couponAmount // 订单最终支付金额等于订单金额-账户余额
  432. this.deductMoney = this.userMoney // 当前使用金额等于总余额
  433. this.surplusMoney = this.userMoney - this.deductMoney // 剩余余额等于总余额-当前使用金额
  434. }
  435. }else{
  436. this.orderShouldPayFee = this.allPrice + this.hanldFreight - this.freightBeansMoney - this.couponAmount
  437. }
  438. console.log('抵扣',this.orderShouldPayFee)
  439. }
  440. }else{// 采美豆不抵扣运费
  441. this.confirmParam.payInfo.userBeans = 0
  442. // 不抵扣时计算总价
  443. if(this.hanldFreePostFlag == 1){
  444. this.attributeHashfreight(this.hanldFreight)
  445. }
  446. }
  447. },
  448. handleChoiceaCouponData(data){// 勾选使用优惠券
  449. console.log('优惠券信息',data)
  450. this.couponAmount = data.couponAmount
  451. this.totalDiscountAmount = this.reducedPrice + this.couponAmount
  452. this.confirmParam.clubCouponId = data.clubCouponId
  453. this.attributePallPrice()
  454. this.hanldFreightBeans(this.isCheckedBeans)
  455. },
  456. checkedBalabce(){//勾选使用余额
  457. if(this.userMoney > 0){
  458. this.ischecked = !this.ischecked
  459. if(this.ischecked){
  460. this.confirmParam.payInfo.balancePayFlag = 1
  461. this.attributePallPrice()
  462. }else{
  463. this.confirmParam.payInfo.balancePayFlag = 0
  464. if(this.hanldFreePostFlag == 1 || this.hanldFreePostFlag == '1'){ //如果是有运费时
  465. if(this.isCheckedBeans){
  466. this.orderShouldPayFee = this.allPrice - this.couponAmount
  467. }else{
  468. this.orderShouldPayFee = this.allPrice+parseInt(this.freightData.postage) - this.couponAmount
  469. }
  470. }else{
  471. this.orderShouldPayFee = this.allPrice - this.couponAmount
  472. }
  473. }
  474. console.log('最终订单支付金额',this.orderShouldPayFee)
  475. console.log('优惠券金额',this.couponAmount)
  476. }else{
  477. return
  478. }
  479. },
  480. attributePallPrice(){// 计算价格
  481. if(this.hanldFreePostFlag == 1 || this.hanldFreePostFlag == '1'){
  482. this.attributeHashfreight(this.freightData.postage)
  483. }else{
  484. this.attributeNofreight()
  485. }
  486. },
  487. attributeNofreight(){// 计算没有邮费的支付价格
  488. if(this.ischecked){
  489. let totalAmount = this.allPrice - this.couponAmount
  490. if(this.userMoney >= totalAmount){
  491. this.orderShouldPayFee = 0.00
  492. this.deductMoney = this.allPrice - this.couponAmount // 当前使用金额等于订单金额
  493. this.surplusMoney = this.userMoney - this.deductMoney // 剩余金额等于余额-当前使用金额
  494. }else{
  495. this.orderShouldPayFee = this.allPrice - this.userMoney - this.couponAmount // 订单最终支付金额等于订单金额-账户余额
  496. this.deductMoney = this.userMoney // 当前使用金额等于总余额
  497. this.surplusMoney = this.userMoney - this.deductMoney // 剩余余额等于总余额-当前使用金额
  498. }
  499. }else{
  500. this.orderShouldPayFee = this.allPrice - this.couponAmount
  501. this.deductMoney = 0.00 // 当前使用
  502. this.surplusMoney = this.userMoney // 剩余余额
  503. }
  504. console.log('最终订单支付金额',this.orderShouldPayFee)
  505. console.log('优惠券金额',this.couponAmount)
  506. },
  507. attributeHashfreight(postage){// 计算需要邮费的支付价格
  508. console.log()
  509. let totalAmount = this.allPrice + parseInt(postage) - this.couponAmount//计算不包邮的价格 总价等于商品价格+邮费
  510. if(this.ischecked){
  511. if(this.userMoney >= totalAmount){// 全部抵扣
  512. this.orderShouldPayFee =0.00
  513. if(this.isCheckedBeans){// 抵扣运费了
  514. this.deductMoney = this.allPrice - this.couponAmount // 当前使用金额等于订单金额
  515. this.surplusMoney = this.userMoney - this.deductMoney // 剩余金额等于余额减去当前使用金额
  516. }else{
  517. this.deductMoney = this.allPrice + parseInt(postage)- this.couponAmount // 当前使用金额等于订单金额+运费金额
  518. this.surplusMoney = this.userMoney - this.deductMoney // 剩余余额等于总余额-当前使用金额
  519. }
  520. }else{// 部分抵扣
  521. if(this.isCheckedBeans){// 抵扣运费了
  522. this.orderShouldPayFee = this.allPrice - this.userMoney - this.couponAmount // 订单最终支付金额等于总订单金额-账户余额-优惠券金额
  523. this.deductMoney = this.userMoney // 当前使用金额等于账户余额
  524. this.surplusMoney = this.userMoney - this.deductMoney // 剩余余额等于账户余额-当前使用金额
  525. }else{
  526. this.orderShouldPayFee = this.allPrice + parseInt(postage) - this.userMoney - this.couponAmount//订单支付金额等于订单金额+运费-账户余额-优惠券
  527. this.deductMoney = this.userMoney // 当前使用金额等于账户余额
  528. this.surplusMoney = this.userMoney - this.deductMoney // 剩余余额等于账户余额-当前使用金额
  529. }
  530. }
  531. }else{
  532. this.orderShouldPayFee = this.allPrice + parseInt(postage) - this.couponAmount
  533. this.deductMoney = 0.00 // 当前使用金额
  534. this.surplusMoney = this.userMoney // 剩余余额
  535. }
  536. console.log('最终订单支付金额',this.orderShouldPayFee)
  537. console.log('优惠券金额',this.couponAmount)
  538. },
  539. orderSubmitMit(){// 提交订单按钮点击事件
  540. if(this.allPrice <1000){
  541. this.showModal = true
  542. this.contentModalText = '采购金额过小,将扣除500采美豆,建议您前往采美旗下“颜选美学”小程序购买小额商品。' //操作文字提示语句
  543. this.showModalstauts = 1
  544. this.modalButton= [
  545. {
  546. text: '前往颜选美学',
  547. type: 'gray',
  548. plain: true //是否空心
  549. },
  550. {
  551. text: '继续提交',
  552. customStyle: {
  553. color: '#fff',
  554. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  555. },
  556. plain: false
  557. }
  558. ]
  559. }else{
  560. this.handleClickOrderSubmitMit()
  561. }
  562. },
  563. handleClickOrderSubmitMit(){// 提交订单
  564. if(this.isSubLoading){ return }
  565. if(this.confirmParam.addressId == ''){
  566. this.$util.msg('请先添加收货地址~',2000)
  567. return
  568. }
  569. this.confirmParam.orderInfo = this.goodsData.map(el => {
  570. let productInfo = []
  571. el.cartList.forEach(pros => {
  572. productInfo.push({
  573. skuId:pros.skuId,
  574. productNum:pros.number,
  575. presentNum:0,
  576. productType:pros.giftType
  577. })
  578. })
  579. return {splitCode:el.splitCode,shopId:el.shopId,note:el.note?el.note:'',productInfo:productInfo}
  580. })
  581. this.confirmParam.payInfo.postage = parseInt(this.hanldFreight).toFixed(2)
  582. this.confirmParam.payInfo.postageFlag = parseInt(this.hanldFreePostFlag)
  583. this.confirmParam.payInfo.orderShouldPayFee = this.orderShouldPayFee.toFixed(2)
  584. this.confirmParam.payInfo = JSON.stringify(this.confirmParam.payInfo)
  585. this.confirmParam.orderInfo = JSON.stringify(this.confirmParam.orderInfo)
  586. this.confirmParam.orderInvoice = JSON.stringify(this.confirmParam.orderInvoice)
  587. console.log(this.confirmParam)
  588. this.isSubLoading = true
  589. this.OrderService.CreatedOrderSubmit(this.confirmParam).then(response =>{
  590. let data = response.data
  591. // 友盟埋点收集机构自主提交订单
  592. if(process.env.NODE_ENV != 'development'){
  593. this.$uma.trackEvent('Um_Event_ConfirmOrder', {
  594. Um_Key_PageName: '机构提交订单',
  595. Um_Key_SourcePage: '确认订单',
  596. Um_Key_OrderID:`${data.orderId}`
  597. })
  598. }
  599. if(data.code === 1){
  600. this.submitState ='success'
  601. setTimeout(()=>{
  602. this.isSubLoading = false
  603. },2000)
  604. this.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({data:{orderId:data.orderId}})}`)
  605. }else{
  606. this.submitState ='confirm'
  607. this.$util.msg('订单提交成功',2000,true,'success')
  608. setTimeout(()=>{
  609. this.isSubLoading = false
  610. if(data.onlinePayFlag === 1){
  611. this.$api.redirectTo(`/pages/user/order/order-payunder?orderId=${data.orderId}`)
  612. }else{
  613. this.$api.redirectTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
  614. }
  615. },2000)
  616. }
  617. }).catch(error =>{
  618. this.isSubLoading = false
  619. this.confirmParam.payInfo = JSON.parse(this.confirmParam.payInfo)
  620. this.confirmParam.orderInfo = JSON.parse(this.confirmParam.orderInfo)
  621. this.confirmParam.orderInvoice = JSON.parse(this.confirmParam.orderInvoice)
  622. if(error.code == -3){// 已提交2个小于1000元的订单提示
  623. this.showModal = true
  624. this.contentModalText = '您已有2个采购金额过小的订单,本次不能再进行采购。建议您前往采美旗下“颜选美学”小程序购买小额商品。' //操作文字提示语句
  625. this.showModalstauts = 3
  626. this.modalButton=[
  627. {
  628. text: '了解',
  629. type: 'gray',
  630. plain: true //是否空心
  631. },
  632. {
  633. text: '前往颜选美学',
  634. customStyle: {
  635. color: '#fff',
  636. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  637. },
  638. plain: false
  639. }
  640. ]
  641. }else if(error.code == -4){// 采美豆为负数
  642. this.showModal = true
  643. this.contentModalText = '采美豆不足,不能提交订单。建议您前往采美旗下“颜选美学”小程序购买小额商品。' //操作文字提示语句
  644. this.showModalstauts = 3
  645. this.modalButton=[
  646. {
  647. text: '了解',
  648. type: 'gray',
  649. plain: true //是否空心
  650. },
  651. {
  652. text: '前往颜选美学',
  653. customStyle: {
  654. color: '#fff',
  655. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  656. },
  657. plain: false
  658. }
  659. ]
  660. }else{
  661. this.$util.msg(error.msg,3000)
  662. }
  663. })
  664. },
  665. handFreightAlertShow(){//显示邮费弹窗
  666. this.isfreightTip = true
  667. },
  668. handleClickCancel(){// 关闭优惠券弹窗
  669. this.isCouponModel = false
  670. if(this.confirmType == 1){
  671. this.GetProductCreateOrderInfo()
  672. }else{
  673. this.CartCreateOrderInfo()
  674. }
  675. },
  676. handleClick(e){// 采购量过小提示弹窗
  677. if (e.index == 1) {
  678. if( this.showModalstauts == 1){
  679. this.showModal = false
  680. this.handleClickOrderSubmitMit()
  681. }else{
  682. this.showModal = false
  683. this.handleClickHeHeMiniApplet()
  684. }
  685. }else{
  686. if( this.showModalstauts == 1 ){
  687. this.showModal = false
  688. this.handleClickHeHeMiniApplet()
  689. }else{
  690. this.showModal = false
  691. }
  692. }
  693. },
  694. handleClickHeHeMiniApplet(){ // 跳转颜选美学小程序
  695. uni.navigateToMiniProgram({
  696. appId: 'wx2c3b0a7f343235b1',
  697. path: '/pages/tabBar/index/index',
  698. extraData: {
  699. 'data1': 'test'
  700. },
  701. envVersion: 'develop',
  702. success(res) {
  703. // 打开成功
  704. console.log(res)
  705. }
  706. })
  707. },
  708. hideFreight(){//关闭邮费弹窗
  709. this.isfreightTip = false
  710. },
  711. },
  712. onShow() {
  713. let pages = getCurrentPages()
  714. let currPage = pages[pages.length-1]
  715. if(currPage.data.select =='select'){
  716. this.isAddress = true
  717. let SelectData = uni.getStorageSync('selectAddress')
  718. this.confirmParam.addressId = SelectData.addressId
  719. this.postageParam.townId = SelectData.townId
  720. this.addressData = SelectData
  721. this.getFreightData()
  722. }else{
  723. this.getAddressData()
  724. }
  725. }
  726. }
  727. </script>
  728. <style lang="scss">
  729. page {
  730. height: auto;
  731. background:#F7F7F7;
  732. }
  733. .btn-hover{
  734. background: #FFFFFF;
  735. }
  736. .animation{
  737. /* transition: transform 0.3s ease;*/
  738. transition-property: transform;
  739. transition-duration: 0.3s;
  740. transition-timing-function: ease;
  741. }
  742. .order{
  743. padding-bottom: 134rpx;
  744. }
  745. .invoice-freight{
  746. width: 702rpx;
  747. padding: 0 24rpx;
  748. height: auto;
  749. font-size: $font-size-28;
  750. color: $text-color;
  751. background: #FFFFFF;
  752. float: left;
  753. font-weight: bold;
  754. }
  755. .invoice-balance{
  756. width: 702rpx;
  757. height: auto;
  758. padding:0 24rpx;
  759. background: #FFFFFF;
  760. float: left;
  761. margin-top: 24rpx;
  762. margin-bottom: 24rpx;
  763. .balabce-t{
  764. width: 100%;
  765. height: 86rpx;
  766. line-height: 86rpx;
  767. font-size: $font-size-28;
  768. color: $text-color;
  769. float: left;
  770. .balabce-t-le{
  771. float: left;
  772. font-weight: bold;
  773. }
  774. .balabce-t-ri{
  775. float: right;
  776. display: flex;
  777. align-items: center;
  778. .money{
  779. display: flex;
  780. float: left;
  781. }
  782. .checkbox-box{
  783. display: flex;
  784. width: 60rpx;
  785. float: left;
  786. height: 100%;
  787. font-size: $font-size-24;
  788. .checkbox{
  789. width: 40rpx;
  790. text-align: right;
  791. box-sizing: border-box;
  792. text-align: center;
  793. text-decoration: none;
  794. border-radius: 0;
  795. -webkit-tap-highlight-color: transparent;
  796. overflow: hidden;
  797. color: $color-system;
  798. }
  799. }
  800. }
  801. }
  802. .balabce-b{
  803. width: 100%;
  804. float: left;
  805. overflow: hidden;
  806. .balabce-b-text{
  807. width: 100%;
  808. line-height: 58rpx;
  809. font-size: $font-size-24;
  810. color: #FF2A2A;
  811. text-align: right;
  812. float: right;
  813. }
  814. &.balabce-b--hide {
  815. padding: 0 0;
  816. height: 0px;
  817. line-height: 0px;
  818. }
  819. }
  820. }
  821. .footer{
  822. position: fixed;
  823. left: 0;
  824. bottom: 0;
  825. display: flex;
  826. align-items: center;
  827. width: 100%;
  828. height: 110rpx;
  829. line-height: 110rpx;
  830. justify-content: space-between;
  831. font-size: $font-size-28;
  832. background-color: #FFFFFF;
  833. z-index: 990;
  834. color: $text-color;
  835. .footer-le{
  836. width:570rpx;
  837. height:100%;
  838. float: left;
  839. }
  840. .footer-count{
  841. float: left;
  842. padding-left: 24rpx;
  843. width:180rpx;
  844. box-sizing: border-box;
  845. }
  846. .footer-price{
  847. width:370rpx;
  848. float: right;
  849. text-align: right;
  850. color: $text-color;
  851. padding: 10rpx 20rpx 10rpx 0;
  852. box-sizing: border-box;
  853. .sum-none{
  854. width: 100%;
  855. height: 45rpx;
  856. line-height: 45rpx;
  857. color: $text-color;
  858. float: left;
  859. text-align: right;
  860. .money{
  861. font-size: $font-size-26;
  862. color: #999999;
  863. text-decoration: line-through;
  864. }
  865. .money-sign{
  866. font-size: $font-size-26;
  867. color: #999999;
  868. text-decoration: line-through;
  869. }
  870. .money-reduced{
  871. margin-left: 10rpx;
  872. font-size: $font-size-26;
  873. color:#FF2A2A;
  874. }
  875. }
  876. .sum{
  877. width: 100%;
  878. height: 45rpx;
  879. line-height: 45rpx;
  880. float: left;
  881. &.none{
  882. height: 90rpx;
  883. line-height: 90rpx;
  884. }
  885. .price{
  886. font-size: $font-size-32;
  887. color: #FF2A2A;
  888. }
  889. }
  890. }
  891. .footer-submit{
  892. display:flex;
  893. align-items:center;
  894. justify-content: center;
  895. width: 180rpx;
  896. height: 100%;
  897. box-sizing: border-box;
  898. padding: 15rpx 5rpx;
  899. .btn{
  900. width: 100%;
  901. height: 100%;
  902. color: #FFFFFF;
  903. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  904. font-size: $font-size-26;
  905. text-align: center;
  906. line-height: 80rpx;
  907. border-radius: 40rpx;
  908. &.disabled{
  909. background: #e4e8eb;
  910. color: #999999;
  911. }
  912. }
  913. }
  914. }
  915. .coupon-content-model{
  916. width: 100%;
  917. height: 100%;
  918. background: rgba(0,0,0,.5);
  919. position: fixed;
  920. top: 0;
  921. left: 0;
  922. z-index: 8888;
  923. transition: all 0.4s;
  924. .coupon-alert-content{
  925. width: 600rpx;
  926. height: 612rpx;
  927. position: absolute;
  928. top: 0;
  929. left: 0;
  930. bottom: 0;
  931. right: 0;
  932. margin: auto;
  933. box-sizing: border-box;
  934. padding-top: 92rpx;
  935. .coupon{
  936. width: 600rpx;
  937. height: 522rpx;
  938. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
  939. background-size: cover;
  940. box-sizing: border-box;
  941. padding: 230rpx 40rpx 0 40rpx;
  942. .coupon-list{
  943. width: 100%;
  944. height: 147rpx;
  945. margin-bottom: 32rpx;
  946. box-sizing: border-box;
  947. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
  948. background-size: cover;
  949. position: relative;
  950. .list-cell-tags{
  951. display: inline-block;
  952. padding: 0 10rpx;
  953. height: 32rpx;
  954. line-height: 32rpx;
  955. background-color: #f94b4b;
  956. color: #FFFFFF;
  957. font-size: 18rpx;
  958. border-radius: 16rpx 0 16rpx 0;
  959. text-align: center;
  960. position: absolute;
  961. top: 0;
  962. left: 0;
  963. }
  964. .list-cell-le{
  965. width: 154rpx;
  966. height: 100%;
  967. box-sizing: border-box;
  968. padding: 30rpx 0;
  969. float: left;
  970. .coupon-maxMoney{
  971. width: 100%;
  972. height: 54rpx;
  973. line-height: 54rpx;
  974. font-size: 42rpx;
  975. color: #f94b4b;
  976. text-align: center;
  977. margin-top: 10rpx;
  978. .small{
  979. font-size: $font-size-20;
  980. }
  981. }
  982. .coupon-minMoney{
  983. width: 100%;
  984. height: 28rpx;
  985. float: left;
  986. box-sizing: border-box;
  987. padding-left: 24rpx;
  988. .txt{
  989. display: block;
  990. height: 28rpx;
  991. line-height: 28rpx;
  992. font-size: 16rpx;
  993. color: #f94b4b;
  994. text-align: center;
  995. padding: 0 5rpx;
  996. background-color: #fff1eb;
  997. border-radius: 4rpx;
  998. float: left;
  999. }
  1000. }
  1001. }
  1002. .list-cell-ri{
  1003. width: 366rpx;
  1004. height: 100%;
  1005. box-sizing: border-box;
  1006. padding:30rpx 20rpx;
  1007. float: left;
  1008. .list-cell-top{
  1009. width: 100%;
  1010. height: 64rpx;
  1011. line-height: 64rpx;
  1012. font-size: $font-size-26;
  1013. color: #333333;
  1014. float: left;
  1015. text-overflow:ellipsis;
  1016. display: -webkit-box;
  1017. word-break: break-all;
  1018. -webkit-box-orient: vertical;
  1019. -webkit-line-clamp: 1;
  1020. overflow: hidden;
  1021. }
  1022. .list-cell-time{
  1023. width: 100%;
  1024. height: 28rpx;
  1025. line-height: 28rpx;
  1026. text-align: left;
  1027. font-size: $font-size-20;
  1028. color: #999999;
  1029. }
  1030. }
  1031. }
  1032. .coupon-btn{
  1033. width: 100%;
  1034. height: 78rpx;
  1035. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
  1036. background-size: cover;
  1037. line-height: 78rpx;
  1038. text-align: center;
  1039. color: #FFFFFF;
  1040. font-size: $font-size-36;
  1041. }
  1042. }
  1043. }
  1044. }
  1045. </style>