create-order.vue 36 KB

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