create-order.vue 36 KB

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