create-order.vue 31 KB

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