create-order.vue 33 KB

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