cm-unit-popup.vue 12 KB

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