cm-unit-popup.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. <template name="cm-parameter">
  2. <!-- 相关规格 -->
  3. <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
  4. <view class="tui-popup-box clearfix">
  5. <view class="tui-shopping-main" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  6. <view class="tui-sku-title">
  7. <view class="tui-sku-image"> <image :src="skuProduct.image" mode=""></image> </view>
  8. <view class="tui-sku-price">
  9. <view class="sku-price-viw">
  10. <view
  11. class="sku-price-text"
  12. :class="
  13. PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
  14. ? 'none'
  15. : ''
  16. "
  17. >
  18. ¥{{
  19. (PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
  20. ? skuProduct.originalPrice
  21. : skuProduct.price) | NumFormat
  22. }}
  23. </view>
  24. </view>
  25. <view class="sku-price-vip">
  26. <view class="floor-item-act">
  27. <view class="coupon-tags" v-if="skuProduct.couponsLogo">优惠券</view>
  28. <template v-if="skuProduct.actStatus == 1 && skuProduct.promotions">
  29. <view v-if="PromotionsFormat(skuProduct.promotions)" class="floor-tags">
  30. {{ skuProduct.promotions.name }}
  31. <text v-if="skuProduct.promotions != null && skuProduct.promotions.type != 3">
  32. :¥{{
  33. skuProduct.promotions == null
  34. ? '0.00'
  35. : skuProduct.promotions.touchPrice | NumFormat
  36. }}
  37. </text>
  38. </view>
  39. <view v-else-if="skuProduct.promotions.type != 3" class="floor-tags">
  40. {{ skuProduct.promotions.name }}
  41. </view>
  42. </template>
  43. <template v-if="skuProduct.actStatus == null && skuProduct.ladderFlag == 1">
  44. <view class="floor-tags">阶梯价格</view>
  45. </template>
  46. <template v-if="skuProduct.svipProductFlag == 1">
  47. <view class="svip-tags">
  48. <view class="tags">SVIP</view>
  49. <view class="price">{{ skuProduct.svipPriceTag }}</view>
  50. </view>
  51. </template>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="tui-sku-unit">
  57. <view class="sku-unit-h1">规格:</view>
  58. <view class="sku-unit-li">
  59. <view
  60. class="unit-li"
  61. v-for="(sku, index) in skuList"
  62. @click="handleChoisSku(sku, index)"
  63. :key="index"
  64. :class="skuIndex === index ? 'active' : ''"
  65. >
  66. {{ sku.unit }} <text class="tips" v-if="sku.stock === 0">缺货</text>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="sku-unit-nunbox">
  71. <view class="sku-unit-nunbox" v-if="skuProduct.step === 2">
  72. <view class="text">*该商品只能以起订量的整数倍购买</view>
  73. </view>
  74. <view class="sku-unit-nunbox-t">
  75. <view class="sku-unit-nunbox-text">购买数量:</view>
  76. <view class="sku-unit-nunbox-num">
  77. <view class="number-box">
  78. <view
  79. class="iconfont icon-jianhao"
  80. @click="changeCountSub"
  81. :class="[isQuantity == true ? 'disabled' : '']"
  82. ></view>
  83. <input
  84. class="btn-input"
  85. type="number"
  86. v-model="productCount"
  87. maxlength="4"
  88. @blur="changeNumber($event)"
  89. />
  90. <view
  91. class="iconfont icon-jiahao"
  92. @click="changeCountAdd"
  93. :class="[isStock == true ? 'disabled' : '']"
  94. ></view>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  101. <view class="tui-modal-flex">
  102. <button
  103. class="tui-modal-button confirm"
  104. :class="[isBtnDisabled ? 'disabled' : '']"
  105. :disabled="isBtnDisabled"
  106. @click="handleBuyConfirm"
  107. >
  108. 加入购物车
  109. </button>
  110. </view>
  111. </view>
  112. </view>
  113. </tui-bottom-popup>
  114. </template>
  115. <script>
  116. import { mapState, mapMutations } from 'vuex'
  117. export default {
  118. name: 'cm-unit-popup',
  119. props: {
  120. skuProduct: {
  121. type: Object
  122. },
  123. popupShow: {
  124. type: Boolean,
  125. default: false
  126. },
  127. type: {
  128. type: Number,
  129. default: 1
  130. }
  131. },
  132. data() {
  133. return {
  134. skuIndex: 0,
  135. userIdentity: 0,
  136. productCount: 0,
  137. isStock: false, //
  138. isQuantity: false,
  139. handleStock: 0, // 规格库存
  140. handleMinNumber: 1, // 规格起订量
  141. skuList: [],
  142. addParams: {
  143. serviceProviderId: 0, //协销Id
  144. skuId: 0,
  145. clubId: 0,
  146. productCount: 1,
  147. type: 1
  148. },
  149. isBtnDisabled: false,
  150. ladderPriceList:[]
  151. }
  152. },
  153. filters: {
  154. NumFormat(value) {
  155. //处理金额
  156. return Number(value).toFixed(2)
  157. }
  158. },
  159. created() {
  160. this.initData()
  161. },
  162. computed: {
  163. ...mapState(['hasLogin'])
  164. },
  165. methods: {
  166. async initData(data) {
  167. const clubInfo = await this.$api.getComStorage('orderUserInfo')
  168. const userInfo = await this.$api.getStorage()
  169. this.userIdentity = userInfo.userIdentity
  170. this.skuList = this.skuProduct.skus
  171. this.isBtnDisabled = this.skuList[0].stock === 0
  172. this.productCount = this.skuList[0].minBuyNumber
  173. this.handleMinNumber = this.skuList[0].minBuyNumber
  174. this.handleStock = this.skuList[0].stock
  175. this.skuProduct.price = this.skuList[0].price
  176. this.addParams.skuId = this.skuList[0].skuId
  177. this.addParams.clubId = clubInfo.clubId ? clubInfo.clubId : 0
  178. this.addParams.serviceProviderId = userInfo.serviceProviderId
  179. if(this.skuList[0].ladderPriceList){
  180. this.isShowLadder = true
  181. this.ladderPriceList = this.skuList[0].ladderPriceList
  182. }
  183. },
  184. PromotionsFormat(promo) {
  185. //促销活动类型数据处理
  186. if (promo != null) {
  187. if (promo.type == 1 && promo.mode == 1) {
  188. return true
  189. } else {
  190. return false
  191. }
  192. }
  193. return false
  194. },
  195. //popup弹窗数量增加按钮
  196. changeCountAdd() {
  197. if (this.productCount === this.handleStock) {
  198. this.isStock = true
  199. return
  200. }
  201. if (this.skuProduct.step == 2) {
  202. this.productCount += this.handleMinNumber
  203. } else {
  204. this.productCount++
  205. }
  206. this.totalLadderPrice()
  207. },
  208. //popup弹窗数量减按钮
  209. changeCountSub() {
  210. if (this.productCount <= this.handleMinNumber) {
  211. this.productCount = this.handleMinNumber
  212. this.isQuantity = true
  213. this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
  214. return
  215. } else {
  216. if (this.skuProduct.step == 2) {
  217. this.productCount -= this.handleMinNumber
  218. } else {
  219. this.productCount--
  220. }
  221. this.totalLadderPrice()
  222. this.isQuantity = false
  223. }
  224. },
  225. changeNumber(e) {
  226. let _value = e.detail.value
  227. if (!this.$api.isNumber(_value)) {
  228. this.productCount = this.handleMinNumber
  229. } else if (_value < this.handleMinNumber) {
  230. this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
  231. this.productCount = this.handleMinNumber
  232. } else if (_value % this.handleMinNumber != 0) {
  233. this.$util.msg('购买量必须为起订量的整数倍', 2000)
  234. this.productCount = this.handleMinNumber
  235. } else if (_value > this.handleStock) {
  236. this.productCount = this.handleStock
  237. } else {
  238. this.productCount = e.detail.value
  239. }
  240. this.totalLadderPrice()
  241. },
  242. totalLadderPrice() {
  243. //单独处理活动价格和阶梯价格
  244. if(this.ladderPriceList.length>0){
  245. this.ladderPriceList.forEach((ladder, index) => {
  246. if (this.productCount >= ladder.buyNum) {
  247. this.skuProduct.price = ladder.buyPrice
  248. }
  249. })
  250. }
  251. console.log('22222222',this.skuProduct.price)
  252. },
  253. handleBuyConfirm() {
  254. this.addParams.productCount = this.productCount
  255. this.handleAddClubCart(this.addParams)
  256. },
  257. handleAddClubCart(params) {
  258. //增加购物车成功和toast弹窗提示成功
  259. this.SellerService.ShoppingCartAddCart(params)
  260. .then(response => {
  261. this.$parent.popupShow = false
  262. this.$util.msg('加入购物车成功', 1500, true, 'success')
  263. this.$parent.getClubProductNum()
  264. this.$emit('handleFuction')
  265. })
  266. .catch(error => {
  267. this.$util.msg(error.msg, 2000)
  268. })
  269. },
  270. handleChoisSku(sku, index) {
  271. // 选择SKU
  272. this.skuIndex = index
  273. this.productCount = this.addParams.productCount = this.handleMinNumber = sku.minBuyNumber
  274. this.addParams.skuId = sku.skuId
  275. this.handleStock = sku.stock
  276. this.skuProduct.price = sku.price
  277. this.skuProduct.originalPrice = sku.originalPrice
  278. this.isBtnDisabled = sku.stock === 0
  279. if(sku.ladderPriceList.length>0){
  280. this.ladderPriceList = sku.ladderPriceList
  281. }
  282. this.$emit('skuClick', sku)
  283. },
  284. hidePopup() {
  285. this.$parent.popupShow = false
  286. }
  287. }
  288. }
  289. </script>
  290. <style lang="scss">
  291. .tui-popup-box {
  292. padding: 40rpx 24rpx 0 24rpx;
  293. }
  294. .tui-shopping-main {
  295. width: 100%;
  296. .tui-sku-title {
  297. width: 100%;
  298. height: 136rpx;
  299. float: left;
  300. margin-bottom: 30rpx;
  301. .tui-sku-image {
  302. width: 138rpx;
  303. height: 138rpx;
  304. float: left;
  305. border-radius: 8rpx;
  306. margin-right: 30rpx;
  307. box-sizing: border-box;
  308. border: 1px dashed #e1e1e1;
  309. image {
  310. width: 134rpx;
  311. height: 134rpx;
  312. border-radius: 10rpx;
  313. }
  314. }
  315. .tui-sku-price {
  316. height: 136rpx;
  317. float: left;
  318. .sku-price-viw {
  319. width: 100%;
  320. height: 40rpx;
  321. margin-bottom: 24rpx;
  322. .sku-price-text {
  323. font-size: 28rpx;
  324. line-height: 40rpx;
  325. color: #f94b4b;
  326. font-weight: bold;
  327. .sku-price-l {
  328. float: left;
  329. font-weight: normal;
  330. }
  331. &.none {
  332. text-decoration: line-through;
  333. color: #999999;
  334. font-weight: normal;
  335. }
  336. }
  337. }
  338. .sku-price-vip {
  339. width: 100%;
  340. height: 40rpx;
  341. }
  342. }
  343. }
  344. .tui-sku-unit {
  345. width: 100%;
  346. height: auto;
  347. float: left;
  348. .sku-unit-h1 {
  349. font-size: 28rpx;
  350. line-height: 40rpx;
  351. color: #333333;
  352. font-weight: bold;
  353. }
  354. .sku-unit-li {
  355. width: 100%;
  356. height: auto;
  357. .unit-li {
  358. padding: 0 24rpx;
  359. line-height: 48rpx;
  360. text-align: center;
  361. font-size: 24rpx;
  362. color: #666666;
  363. background: #f5f5f5;
  364. float: left;
  365. margin-right: 16rpx;
  366. margin-top: 12rpx;
  367. margin-bottom: 12rpx;
  368. border-radius: 24rpx;
  369. position: relative;
  370. box-sizing: border-box;
  371. border: 1px solid #f5f5f5;
  372. &.active {
  373. border-color: $color-system;
  374. background: #fff1eb;
  375. color: $color-system;
  376. .tips {
  377. background: #FF5B00;
  378. }
  379. }
  380. .tips {
  381. padding: 0 10rpx;
  382. line-height: 32rpx;
  383. text-align: center;
  384. font-size: 22rpx;
  385. color: #ffffff;
  386. background: #cccccc;
  387. float: left;
  388. border-radius: 16rpx;
  389. position: absolute;
  390. right: -12rpx;
  391. top: -15rpx;
  392. }
  393. }
  394. }
  395. }
  396. .sku-unit-nunbox {
  397. justify-content: space-between;
  398. align-items: center;
  399. width: 100%;
  400. height: auto;
  401. float: left;
  402. margin-top: 30rpx;
  403. .sku-unit-nunbox-t {
  404. width: 100%;
  405. height: 44rpx;
  406. position: relative;
  407. margin-bottom: 20rpx;
  408. .text {
  409. font-size: $font-size-24;
  410. line-height: 48rpx;
  411. color: #999999;
  412. }
  413. .sku-unit-nunbox-text {
  414. line-height: 44rpx;
  415. font-size: $font-size-28;
  416. float: left;
  417. font-weight: bold;
  418. }
  419. .sku-unit-nunbox-num {
  420. float: right;
  421. .number-box {
  422. display: flex;
  423. justify-content: center;
  424. align-items: center;
  425. border: 2rpx solid #ffe6dc;
  426. border-radius: 30rpx;
  427. height: 48rpx;
  428. margin-left: 20rpx;
  429. .iconfont {
  430. font-size: $font-size-24;
  431. padding: 0 18rpx;
  432. color: #999999;
  433. text-align: center;
  434. line-height: 48rpx;
  435. font-weight: bold;
  436. background: #fef6f3;
  437. &.icon-jianhao {
  438. border-radius: 30rpx 0 0 30rpx;
  439. }
  440. &.icon-jiahao {
  441. border-radius: 0 30rpx 30rpx 0;
  442. }
  443. }
  444. .btn-input {
  445. width: 62rpx;
  446. height: 48rpx;
  447. line-height: 48rpx;
  448. background: #ffffff;
  449. border-radius: 4rpx;
  450. text-align: center;
  451. font-size: $font-size-28;
  452. }
  453. }
  454. }
  455. }
  456. }
  457. }
  458. .tui-popup-btn {
  459. width: 100%;
  460. float: left;
  461. .tui-modal-flex {
  462. width: 100%;
  463. height: 84rpx;
  464. margin-top: 40rpx;
  465. display: flex;
  466. .tui-modal-button {
  467. flex: 1;
  468. line-height: 84rpx;
  469. font-size: $font-size-28;
  470. text-align: center;
  471. border-radius: 42rpx;
  472. padding: 0;
  473. margin: 0 15rpx;
  474. box-sizing: border-box;
  475. &.confirm {
  476. background: $btn-confirm;
  477. color: #ffffff;
  478. &.disabled {
  479. background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
  480. }
  481. }
  482. }
  483. }
  484. }
  485. </style>