create-order.vue 41 KB

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