create-order.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086
  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.OrderService.CreatedOrderSubmit(this.confirmParam).then(response =>{
  625. let data = response.data
  626. // 友盟埋点收集机构自主提交订单
  627. if(process.env.NODE_ENV != 'development'){
  628. this.$uma.trackEvent('Um_Event_ConfirmOrder', {
  629. Um_Key_PageName: '机构提交订单',
  630. Um_Key_SourcePage: '确认订单',
  631. Um_Key_OrderID:`${data.orderId}`
  632. })
  633. }
  634. if(data.code === 1){
  635. this.submitState ='success'
  636. setTimeout(()=>{
  637. this.isSubLoading = false
  638. },2000)
  639. this.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({data:{orderId:data.orderId}})}`)
  640. }else{
  641. this.submitState ='confirm'
  642. this.$util.msg('订单提交成功',2000,true,'success')
  643. setTimeout(()=>{
  644. this.isSubLoading = false
  645. if(data.onlinePayFlag === 1){
  646. this.$api.redirectTo(`/pages/user/order/order-payunder?orderId=${data.orderId}`)
  647. }else{
  648. this.$api.redirectTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
  649. }
  650. },2000)
  651. }
  652. }).catch(error =>{
  653. this.isSubLoading = false
  654. this.confirmParam.payInfo = JSON.parse(this.confirmParam.payInfo)
  655. this.confirmParam.orderInfo = JSON.parse(this.confirmParam.orderInfo)
  656. this.confirmParam.orderInvoice = JSON.parse(this.confirmParam.orderInvoice)
  657. if(error.code == -3){// 已提交2个小于1000元的订单提示
  658. this.showModal = true
  659. this.contentModalText = '您已有2个采购金额过小的订单,本次不能再进行采购。建议您前往采美旗下“颜选美学”小程序购买小额商品。' //操作文字提示语句
  660. this.showModalstauts = 3
  661. this.modalButton=[
  662. {
  663. text: '了解',
  664. type: 'gray',
  665. plain: true //是否空心
  666. },
  667. {
  668. text: '前往颜选美学',
  669. customStyle: {
  670. color: '#fff',
  671. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  672. },
  673. plain: false
  674. }
  675. ]
  676. }else if(error.code == -4){// 采美豆为负数
  677. this.showModal = true
  678. this.contentModalText = '采美豆不足,不能提交订单。建议您前往采美旗下“颜选美学”小程序购买小额商品。' //操作文字提示语句
  679. this.showModalstauts = 3
  680. this.modalButton=[
  681. {
  682. text: '了解',
  683. type: 'gray',
  684. plain: true //是否空心
  685. },
  686. {
  687. text: '前往颜选美学',
  688. customStyle: {
  689. color: '#fff',
  690. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  691. },
  692. plain: false
  693. }
  694. ]
  695. }else{
  696. this.$util.msg(error.msg,3000)
  697. }
  698. })
  699. },
  700. handFreightAlertShow(){//显示邮费弹窗
  701. this.isfreightTip = true
  702. },
  703. handleClickCancel(){// 关闭优惠券弹窗
  704. this.isCouponModel = false
  705. if(this.confirmType == 1){
  706. this.GetProductCreateOrderInfo()
  707. }else{
  708. this.CartCreateOrderInfo()
  709. }
  710. },
  711. handleClick(e){// 采购量过小提示弹窗
  712. if (e.index == 1) {
  713. if( this.showModalstauts == 1){
  714. this.showModal = false
  715. this.handleClickOrderSubmitMit()
  716. }else{
  717. this.showModal = false
  718. this.handleClickHeHeMiniApplet()
  719. }
  720. }else{
  721. if( this.showModalstauts == 1 ){
  722. this.showModal = false
  723. this.handleClickHeHeMiniApplet()
  724. }else{
  725. this.showModal = false
  726. }
  727. }
  728. },
  729. handleClickHeHeMiniApplet(){ // 跳转颜选美学小程序
  730. uni.navigateToMiniProgram({
  731. appId: 'wx2c3b0a7f343235b1',
  732. path: '/pages/tabBar/index/index',
  733. extraData: {
  734. 'data1': 'test'
  735. },
  736. envVersion: 'develop',
  737. success(res) {
  738. // 打开成功
  739. console.log(res)
  740. }
  741. })
  742. },
  743. hideFreight(){//关闭邮费弹窗
  744. this.isfreightTip = false
  745. },
  746. },
  747. onShow() {
  748. let pages = getCurrentPages()
  749. let currPage = pages[pages.length-1]
  750. if(currPage.data.select =='select'){
  751. this.isAddress = true
  752. let SelectData = uni.getStorageSync('selectAddress')
  753. this.confirmParam.addressId = SelectData.addressId
  754. this.postageParam.townId = SelectData.townId
  755. this.addressData = SelectData
  756. this.getFreightData()
  757. }else{
  758. this.getAddressData()
  759. }
  760. }
  761. }
  762. </script>
  763. <style lang="scss">
  764. page {
  765. height: auto;
  766. background:#F7F7F7;
  767. }
  768. .btn-hover{
  769. background: #FFFFFF;
  770. }
  771. .animation{
  772. /* transition: transform 0.3s ease;*/
  773. transition-property: transform;
  774. transition-duration: 0.3s;
  775. transition-timing-function: ease;
  776. }
  777. .order{
  778. padding-bottom: 134rpx;
  779. }
  780. .invoice-freight{
  781. width: 702rpx;
  782. padding: 0 24rpx;
  783. height: auto;
  784. font-size: $font-size-28;
  785. color: $text-color;
  786. background: #FFFFFF;
  787. float: left;
  788. font-weight: bold;
  789. }
  790. .invoice-balance{
  791. width: 702rpx;
  792. height: auto;
  793. padding:0 24rpx;
  794. background: #FFFFFF;
  795. float: left;
  796. margin-top: 24rpx;
  797. margin-bottom: 24rpx;
  798. .balabce-t{
  799. width: 100%;
  800. height: 86rpx;
  801. line-height: 86rpx;
  802. font-size: $font-size-28;
  803. color: $text-color;
  804. float: left;
  805. .balabce-t-le{
  806. float: left;
  807. font-weight: bold;
  808. }
  809. .balabce-t-ri{
  810. float: right;
  811. display: flex;
  812. align-items: center;
  813. .money{
  814. display: flex;
  815. float: left;
  816. }
  817. .checkbox-box{
  818. display: flex;
  819. width: 60rpx;
  820. float: left;
  821. height: 100%;
  822. font-size: $font-size-24;
  823. .checkbox{
  824. width: 40rpx;
  825. text-align: right;
  826. box-sizing: border-box;
  827. text-align: center;
  828. text-decoration: none;
  829. border-radius: 0;
  830. -webkit-tap-highlight-color: transparent;
  831. overflow: hidden;
  832. color: $color-system;
  833. }
  834. }
  835. }
  836. }
  837. .balabce-b{
  838. width: 100%;
  839. float: left;
  840. overflow: hidden;
  841. .balabce-b-text{
  842. width: 100%;
  843. line-height: 58rpx;
  844. font-size: $font-size-24;
  845. color: #FF2A2A;
  846. text-align: right;
  847. float: right;
  848. }
  849. &.balabce-b--hide {
  850. padding: 0 0;
  851. height: 0px;
  852. line-height: 0px;
  853. }
  854. }
  855. }
  856. .footer-wrapper{
  857. position: fixed;
  858. left: 0;
  859. bottom: 0;
  860. background-color: #FFFFFF;
  861. z-index: 990;
  862. .footer{
  863. display: flex;
  864. align-items: center;
  865. width: 100%;
  866. height: 110rpx;
  867. line-height: 110rpx;
  868. justify-content: space-between;
  869. font-size: $font-size-28;
  870. color: $text-color;
  871. }
  872. .footer-le{
  873. width:570rpx;
  874. height:100%;
  875. float: left;
  876. }
  877. .footer-count{
  878. float: left;
  879. padding-left: 24rpx;
  880. width:180rpx;
  881. box-sizing: border-box;
  882. }
  883. .footer-price{
  884. width:370rpx;
  885. float: right;
  886. text-align: right;
  887. color: $text-color;
  888. padding: 10rpx 20rpx 10rpx 0;
  889. box-sizing: border-box;
  890. .sum-none{
  891. width: 100%;
  892. height: 45rpx;
  893. line-height: 45rpx;
  894. color: $text-color;
  895. float: left;
  896. text-align: right;
  897. .money{
  898. font-size: $font-size-26;
  899. color: #999999;
  900. text-decoration: line-through;
  901. }
  902. .money-sign{
  903. font-size: $font-size-26;
  904. color: #999999;
  905. text-decoration: line-through;
  906. }
  907. .money-reduced{
  908. margin-left: 10rpx;
  909. font-size: $font-size-26;
  910. color:#FF2A2A;
  911. }
  912. }
  913. .sum{
  914. width: 100%;
  915. height: 45rpx;
  916. line-height: 45rpx;
  917. float: left;
  918. &.none{
  919. height: 90rpx;
  920. line-height: 90rpx;
  921. }
  922. .price{
  923. font-size: $font-size-32;
  924. color: #FF2A2A;
  925. }
  926. }
  927. }
  928. .footer-submit{
  929. display:flex;
  930. align-items:center;
  931. justify-content: center;
  932. width: 180rpx;
  933. height: 100%;
  934. box-sizing: border-box;
  935. padding: 15rpx 5rpx;
  936. .btn{
  937. width: 100%;
  938. height: 100%;
  939. color: #FFFFFF;
  940. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  941. font-size: $font-size-26;
  942. text-align: center;
  943. line-height: 80rpx;
  944. border-radius: 40rpx;
  945. &.disabled{
  946. background: #e4e8eb;
  947. color: #999999;
  948. }
  949. }
  950. }
  951. }
  952. .coupon-content-model{
  953. width: 100%;
  954. height: 100%;
  955. background: rgba(0,0,0,.5);
  956. position: fixed;
  957. top: 0;
  958. left: 0;
  959. z-index: 8888;
  960. transition: all 0.4s;
  961. .coupon-alert-content{
  962. width: 600rpx;
  963. height: 612rpx;
  964. position: absolute;
  965. top: 0;
  966. left: 0;
  967. bottom: 0;
  968. right: 0;
  969. margin: auto;
  970. box-sizing: border-box;
  971. padding-top: 92rpx;
  972. .coupon{
  973. width: 600rpx;
  974. height: 522rpx;
  975. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
  976. background-size: cover;
  977. box-sizing: border-box;
  978. padding: 230rpx 40rpx 0 40rpx;
  979. .coupon-list{
  980. width: 100%;
  981. height: 147rpx;
  982. margin-bottom: 32rpx;
  983. box-sizing: border-box;
  984. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
  985. background-size: cover;
  986. position: relative;
  987. .list-cell-tags{
  988. display: inline-block;
  989. padding: 0 10rpx;
  990. height: 32rpx;
  991. line-height: 32rpx;
  992. background-color: #f94b4b;
  993. color: #FFFFFF;
  994. font-size: 18rpx;
  995. border-radius: 16rpx 0 16rpx 0;
  996. text-align: center;
  997. position: absolute;
  998. top: 0;
  999. left: 0;
  1000. }
  1001. .list-cell-le{
  1002. width: 154rpx;
  1003. height: 100%;
  1004. box-sizing: border-box;
  1005. padding: 30rpx 0;
  1006. float: left;
  1007. .coupon-maxMoney{
  1008. width: 100%;
  1009. height: 54rpx;
  1010. line-height: 54rpx;
  1011. font-size: 42rpx;
  1012. color: #f94b4b;
  1013. text-align: center;
  1014. margin-top: 10rpx;
  1015. .small{
  1016. font-size: $font-size-20;
  1017. }
  1018. }
  1019. .coupon-minMoney{
  1020. width: 100%;
  1021. height: 28rpx;
  1022. float: left;
  1023. box-sizing: border-box;
  1024. padding-left: 24rpx;
  1025. .txt{
  1026. display: block;
  1027. height: 28rpx;
  1028. line-height: 28rpx;
  1029. font-size: 16rpx;
  1030. color: #f94b4b;
  1031. text-align: center;
  1032. padding: 0 5rpx;
  1033. background-color: #fff1eb;
  1034. border-radius: 4rpx;
  1035. float: left;
  1036. }
  1037. }
  1038. }
  1039. .list-cell-ri{
  1040. width: 366rpx;
  1041. height: 100%;
  1042. box-sizing: border-box;
  1043. padding:30rpx 20rpx;
  1044. float: left;
  1045. .list-cell-top{
  1046. width: 100%;
  1047. height: 64rpx;
  1048. line-height: 64rpx;
  1049. font-size: $font-size-26;
  1050. color: #333333;
  1051. float: left;
  1052. text-overflow:ellipsis;
  1053. display: -webkit-box;
  1054. word-break: break-all;
  1055. -webkit-box-orient: vertical;
  1056. -webkit-line-clamp: 1;
  1057. overflow: hidden;
  1058. }
  1059. .list-cell-time{
  1060. width: 100%;
  1061. height: 28rpx;
  1062. line-height: 28rpx;
  1063. text-align: left;
  1064. font-size: $font-size-20;
  1065. color: #999999;
  1066. }
  1067. }
  1068. }
  1069. .coupon-btn{
  1070. width: 100%;
  1071. height: 78rpx;
  1072. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
  1073. background-size: cover;
  1074. line-height: 78rpx;
  1075. text-align: center;
  1076. color: #FFFFFF;
  1077. font-size: $font-size-36;
  1078. }
  1079. }
  1080. }
  1081. }
  1082. </style>