create-order.vue 35 KB

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