s-select-groupon-sku.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. <template>
  2. <!-- 拼团商品规格弹窗 -->
  3. <su-popup :show="show" round="10" @close="emits('close')">
  4. <view class="ss-modal-box bg-white ss-flex-col">
  5. <view class="modal-header ss-flex ss-col-center">
  6. <view class="header-left ss-m-r-30">
  7. <image
  8. class="sku-image"
  9. :src="sheep.$url.cdn(state.selectedSkuPrice.image || goodsInfo.image)"
  10. mode="aspectFill"
  11. >
  12. </image>
  13. </view>
  14. <view class="header-right ss-flex-col ss-row-between ss-flex-1">
  15. <view class="goods-title ss-line-2">
  16. <view class="tig ss-flex ss-col-center">
  17. <view class="tig-icon ss-flex ss-col-center ss-row-center">
  18. <view class="groupon-tag">
  19. <image :src="sheep.$url.static('/static/img/shop/goods/groupon-tag-white.png')">
  20. </image>
  21. </view>
  22. </view>
  23. <view class="tig-title">拼团价</view>
  24. </view>
  25. <view class="info-title">
  26. {{ goodsInfo.title }}
  27. </view>
  28. </view>
  29. <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
  30. <view class="price-text"> {{ goodsPrice }}</view>
  31. <view class="stock-text ss-m-l-20">
  32. 库存{{ state.selectedSkuPrice.stock || goodsInfo.stock }}件
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="modal-content ss-flex-1">
  38. <scroll-view scroll-y="true" class="modal-content-scroll">
  39. <view
  40. v-if="grouponAction === 'create' && activityType === 'groupon_ladder'"
  41. class="sku-item ss-m-b-20"
  42. >
  43. <view class="label-text ss-m-b-20">拼团人数</view>
  44. <view class="ss-flex ss-col-center ss-flex-wrap">
  45. <button
  46. v-for="(ladder, key) in goodsInfo.activity.rules.ladders"
  47. :key="key"
  48. class="ss-reset-button spec-btn"
  49. :class="[
  50. {
  51. 'checked-btn': state.grouponNum == ladder,
  52. },
  53. ]"
  54. @tap="onSelectLadder(ladder)"
  55. >
  56. {{ ladder }}人团
  57. </button>
  58. </view>
  59. </view>
  60. <view class="sku-item ss-m-b-20" v-for="sku1 in goodsInfo.skus" :key="sku1.id">
  61. <view class="label-text ss-m-b-20">{{ sku1.name }}</view>
  62. <view class="ss-flex ss-col-center ss-flex-wrap">
  63. <button
  64. class="ss-reset-button spec-btn"
  65. v-for="sku2 in sku1.children"
  66. :class="[
  67. {
  68. 'checked-btn': state.currentSkuArray[sku2.parent_id] == sku2.id,
  69. },
  70. {
  71. 'disabled-btn': sku2.disabled == true,
  72. },
  73. ]"
  74. :key="sku2.id"
  75. :disabled="sku2.disabled == true"
  76. @tap="onSelectSku(sku2.parent_id, sku2.id)"
  77. >
  78. {{ sku2.name }}
  79. </button>
  80. </view>
  81. </view>
  82. <view class="buy-num-box ss-flex ss-col-center ss-row-between">
  83. <view class="label-text">购买数量</view>
  84. <su-number-box
  85. :min="1"
  86. :max="state.selectedSkuPrice.stock"
  87. :step="1"
  88. v-model="state.selectedSkuPrice.goods_num"
  89. activity="groupon"
  90. ></su-number-box>
  91. </view>
  92. </scroll-view>
  93. </view>
  94. <view class="modal-footer ss-p-y-20">
  95. <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
  96. <view class="ss-flex">
  97. <button class="ss-reset-button origin-price-btn ss-flex-col">
  98. <view class="btn-title">{{
  99. state.grouponNum === 0 ? '阶梯团' : state.grouponNum + '人团'
  100. }}</view>
  101. </button>
  102. <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
  103. <view class="btn-price">
  104. {{
  105. grouponAction === 'create' && goodsInfo.activity.rules.is_leader_discount == 1
  106. ? leaderPrice
  107. : goodsPrice
  108. }}
  109. </view>
  110. <view
  111. v-if="
  112. grouponAction === 'create' && goodsInfo.activity.rules.is_leader_discount == 0
  113. "
  114. >立即开团</view
  115. >
  116. <view
  117. v-else-if="
  118. grouponAction === 'create' && goodsInfo.activity.rules.is_leader_discount == 1
  119. "
  120. >团长立减价</view
  121. >
  122. <view v-else-if="grouponAction === 'join'">参与拼团</view>
  123. </button>
  124. </view>
  125. </view>
  126. </view>
  127. </view>
  128. </su-popup>
  129. </template>
  130. <script setup>
  131. import { computed, reactive, watch } from 'vue';
  132. import sheep from '@/sheep';
  133. import { formatPrice } from '@/sheep/hooks/useGoods';
  134. import { isEmpty } from 'lodash';
  135. const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-btn-long.png');
  136. const emits = defineEmits(['change', 'addCart', 'buy', 'close', 'ladder']);
  137. const props = defineProps({
  138. show: {
  139. type: Boolean,
  140. default: false,
  141. },
  142. goodsInfo: {
  143. type: Object,
  144. default() {},
  145. },
  146. grouponAction: {
  147. type: String,
  148. default: 'create',
  149. },
  150. grouponNum: {
  151. type: [Number, String],
  152. default: 0,
  153. },
  154. });
  155. const state = reactive({
  156. selectedSkuPrice: {},
  157. currentSkuArray: [],
  158. grouponNum: props.grouponNum,
  159. });
  160. // 默认单规格
  161. if (!props.goodsInfo.is_sku) {
  162. state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
  163. }
  164. // 活动类型
  165. const activityType = props.goodsInfo.activity_type;
  166. // 可选规格
  167. const skuPrices = computed(() => {
  168. let skuPrices = props.goodsInfo.sku_prices;
  169. if (props.goodsInfo.is_sku) {
  170. skuPrices.forEach((item) => {
  171. item.goods_sku_id_arr = item.goods_sku_ids.split(',');
  172. });
  173. }
  174. return skuPrices;
  175. });
  176. const skuList = props.goodsInfo.skus;
  177. // 规格价格
  178. const goodsPrice = computed(() => {
  179. if (isEmpty(state.selectedSkuPrice)) {
  180. console.log(222);
  181. return formatPrice(props.goodsInfo.price);
  182. }
  183. if (state.grouponNum === 0 && activityType === 'groupon_ladder') {
  184. console.log(1111);
  185. return formatPrice(props.goodsInfo.price);
  186. }
  187. if (activityType === 'groupon') {
  188. return state.selectedSkuPrice.groupon_price;
  189. }
  190. if (activityType === 'groupon_ladder') {
  191. const ladder = getSkuPriceByLadder();
  192. state.selectedSkuPrice.ladder_price = ladder.ladder_price;
  193. return ladder.ladder_price;
  194. }
  195. });
  196. // 团长优惠
  197. const leaderPrice = computed(() => {
  198. if (isEmpty(state.selectedSkuPrice)) {
  199. return formatPrice(props.goodsInfo.price);
  200. }
  201. if (state.grouponNum === 0 && activityType === 'groupon_ladder') {
  202. return formatPrice(props.goodsInfo.price);
  203. }
  204. if (activityType === 'groupon') {
  205. return state.selectedSkuPrice.leader_price;
  206. }
  207. if (activityType === 'groupon_ladder') {
  208. const ladder = getSkuPriceByLadder();
  209. return ladder.leader_ladder_price;
  210. }
  211. });
  212. // 获取阶梯价
  213. function getSkuPriceByLadder() {
  214. return state.selectedSkuPrice.ladders.find((item) => item.ladder == state.grouponNum);
  215. }
  216. watch(
  217. () => state.selectedSkuPrice,
  218. (newVal) => {
  219. emits('change', newVal);
  220. },
  221. {
  222. immediate: true, // 立即执行
  223. deep: true, // 深度监听
  224. },
  225. );
  226. // 点击购买
  227. function onBuy() {
  228. if (!state.selectedSkuPrice.goods_id) {
  229. sheep.$helper.toast('请选择规格');
  230. return;
  231. }
  232. if (state.selectedSkuPrice.stock <= 0) {
  233. sheep.$helper.toast('库存不足');
  234. return;
  235. }
  236. emits('buy', state.selectedSkuPrice);
  237. }
  238. // 改变禁用状态
  239. function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
  240. let newPrice = []; // 所有可以选择的 skuPrice
  241. if (isChecked) {
  242. // 选中规格
  243. // 当前点击选中规格下的 所有可用 skuPrice
  244. for (let price of skuPrices.value) {
  245. if (price.stock <= 0) {
  246. // this.goodsNum 不判断是否大于当前选择数量,在 uni-number-box 判断,并且 取 stock 和 goods_num 的小值
  247. continue;
  248. }
  249. if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
  250. newPrice.push(price);
  251. }
  252. }
  253. } else {
  254. // 取消选中
  255. // 当前所选规格下,所有可以选择的 skuPrice
  256. newPrice = getCanUseSkuPrice();
  257. }
  258. // 所有存在并且有库存未选择的规格项 的 子项 id
  259. let noChooseSkuIds = [];
  260. for (let price of newPrice) {
  261. noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
  262. }
  263. // 去重
  264. noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
  265. if (isChecked) {
  266. // 去除当前选中的规格项
  267. let index = noChooseSkuIds.indexOf(skuId.toString());
  268. noChooseSkuIds.splice(index, 1);
  269. } else {
  270. // 循环去除当前已选择的规格项
  271. state.currentSkuArray.forEach((sku) => {
  272. if (sku.toString() != '') {
  273. // sku 为空是反选 填充的
  274. let index = noChooseSkuIds.indexOf(sku.toString());
  275. if (index >= 0) {
  276. // sku 存在于 noChooseSkuIds
  277. noChooseSkuIds.splice(index, 1);
  278. }
  279. }
  280. });
  281. }
  282. // 当前已选择的规格大类
  283. let chooseSkuKey = [];
  284. if (!isChecked) {
  285. // 当前已选择的规格大类
  286. state.currentSkuArray.forEach((sku, key) => {
  287. if (sku != '') {
  288. // sku 为空是反选 填充的
  289. chooseSkuKey.push(key);
  290. }
  291. });
  292. } else {
  293. // 当前点击选择的规格大类
  294. chooseSkuKey = [pid];
  295. }
  296. for (let i in skuList) {
  297. // 当前点击的规格,或者取消选择时候 已选中的规格 不进行处理
  298. if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
  299. continue;
  300. }
  301. for (let j in skuList[i]['children']) {
  302. // 如果当前规格项 id 不存在于有库存的规格项中,则禁用
  303. if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
  304. skuList[i]['children'][j]['disabled'] = false;
  305. } else {
  306. skuList[i]['children'][j]['disabled'] = true;
  307. }
  308. }
  309. }
  310. }
  311. // 当前所选规格下,获取所有有库存的 skuPrice
  312. function getCanUseSkuPrice() {
  313. let newPrice = [];
  314. for (let price of skuPrices.value) {
  315. if (price.stock <= 0) {
  316. // || price.stock < this.goodsNum 不判断是否大于当前选择数量,在 uni-number-box 判断,并且 取 stock 和 goods_num 的小值
  317. continue;
  318. }
  319. var isOk = true;
  320. state.currentSkuArray.forEach((sku) => {
  321. // sku 不为空,并且,这个 条 skuPrice 没有被选中,则排除
  322. if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
  323. isOk = false;
  324. }
  325. });
  326. if (isOk) {
  327. newPrice.push(price);
  328. }
  329. }
  330. return newPrice;
  331. }
  332. // 选择阶梯拼团人数
  333. function onSelectLadder(ladder) {
  334. state.grouponNum = ladder;
  335. emits('ladder', ladder);
  336. }
  337. // 选择规格
  338. function onSelectSku(pid, skuId) {
  339. // 清空已选择
  340. if (activityType === 'groupon_ladder' && state.grouponNum == 0) {
  341. sheep.$helper.toast('请选择拼团人数');
  342. return;
  343. }
  344. let isChecked = true; // 选中 or 取消选中
  345. if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) {
  346. // 点击已被选中的,删除并填充 ''
  347. isChecked = false;
  348. state.currentSkuArray.splice(pid, 1, '');
  349. } else {
  350. // 选中
  351. state.currentSkuArray[pid] = skuId;
  352. }
  353. let chooseSkuId = []; // 选中的规格大类
  354. state.currentSkuArray.forEach((sku) => {
  355. if (sku != '') {
  356. // sku 为空是反选 填充的
  357. chooseSkuId.push(sku);
  358. }
  359. });
  360. // 当前所选规格下,所有可以选择的 skuPric
  361. let newPrice = getCanUseSkuPrice();
  362. // 判断所有规格大类是否选择完成
  363. if (chooseSkuId.length == skuList.length && newPrice.length) {
  364. newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
  365. state.selectedSkuPrice = newPrice[0];
  366. } else {
  367. state.selectedSkuPrice = {};
  368. }
  369. // 改变规格项禁用状态
  370. changeDisabled(isChecked, pid, skuId);
  371. }
  372. changeDisabled(false);
  373. </script>
  374. <style lang="scss" scoped>
  375. // 购买
  376. .buy-btn {
  377. margin: 0 20rpx;
  378. width: 100%;
  379. height: 80rpx;
  380. border-radius: 40rpx;
  381. background: linear-gradient(90deg, #ff6000, #fe832a);
  382. color: #fff;
  383. }
  384. .btn-tox {
  385. width: 382rpx;
  386. height: 80rpx;
  387. font-size: 24rpx;
  388. font-weight: 600;
  389. margin-left: -50rpx;
  390. background-image: v-bind(headerBg);
  391. background-repeat: no-repeat;
  392. background-size: 100% 100%;
  393. color: #ffffff;
  394. line-height: normal;
  395. border-radius: 0px 40rpx 40rpx 0px;
  396. .btn-price {
  397. font-family: OPPOSANS;
  398. &::before {
  399. content: '¥';
  400. }
  401. }
  402. }
  403. .origin-price-btn {
  404. width: 370rpx;
  405. height: 80rpx;
  406. background: rgba(#ff5651, 0.1);
  407. color: #ff6000;
  408. border-radius: 40rpx 0px 0px 40rpx;
  409. line-height: normal;
  410. font-size: 24rpx;
  411. font-weight: 500;
  412. .btn-price {
  413. font-family: OPPOSANS;
  414. &::before {
  415. content: '¥';
  416. }
  417. }
  418. .btn-title {
  419. font-size: 28rpx;
  420. }
  421. }
  422. .ss-modal-box {
  423. border-radius: 30rpx 30rpx 0 0;
  424. max-height: 1000rpx;
  425. .modal-header {
  426. position: relative;
  427. padding: 80rpx 20rpx 40rpx;
  428. .sku-image {
  429. width: 160rpx;
  430. height: 160rpx;
  431. border-radius: 10rpx;
  432. }
  433. .header-right {
  434. height: 160rpx;
  435. }
  436. .close-icon {
  437. position: absolute;
  438. top: 10rpx;
  439. right: 20rpx;
  440. font-size: 46rpx;
  441. opacity: 0.2;
  442. }
  443. .goods-title {
  444. font-size: 28rpx;
  445. font-weight: 500;
  446. line-height: 42rpx;
  447. position: relative;
  448. .tig {
  449. border: 2rpx solid #ff6000;
  450. border-radius: 4rpx;
  451. width: 126rpx;
  452. height: 38rpx;
  453. position: absolute;
  454. left: 0;
  455. top: 0;
  456. .tig-icon {
  457. width: 40rpx;
  458. height: 40rpx;
  459. background: #ff6000;
  460. margin-left: -2rpx;
  461. border-radius: 4rpx 0 0 4rpx;
  462. .groupon-tag {
  463. width: 32rpx;
  464. height: 32rpx;
  465. }
  466. }
  467. .tig-title {
  468. font-size: 24rpx;
  469. font-weight: 500;
  470. line-height: normal;
  471. color: #ff6000;
  472. width: 86rpx;
  473. display: flex;
  474. justify-content: center;
  475. align-items: center;
  476. }
  477. }
  478. .info-title {
  479. text-indent: 132rpx;
  480. }
  481. }
  482. .price-text {
  483. font-size: 30rpx;
  484. font-weight: 500;
  485. color: $red;
  486. font-family: OPPOSANS;
  487. &::before {
  488. content: '¥';
  489. font-size: 24rpx;
  490. }
  491. }
  492. .stock-text {
  493. font-size: 26rpx;
  494. color: #999999;
  495. }
  496. }
  497. .modal-content {
  498. padding: 0 20rpx;
  499. .modal-content-scroll {
  500. max-height: 600rpx;
  501. .label-text {
  502. font-size: 26rpx;
  503. font-weight: 500;
  504. }
  505. .buy-num-box {
  506. height: 100rpx;
  507. }
  508. .spec-btn {
  509. height: 60rpx;
  510. min-width: 100rpx;
  511. padding: 0 30rpx;
  512. background: #f4f4f4;
  513. border-radius: 30rpx;
  514. color: #434343;
  515. font-size: 26rpx;
  516. margin-right: 10rpx;
  517. margin-bottom: 10rpx;
  518. }
  519. .checked-btn {
  520. background: linear-gradient(90deg, #ff6000, #fe832a);
  521. font-weight: 500;
  522. color: #ffffff;
  523. }
  524. .disabled-btn {
  525. font-weight: 400;
  526. color: #c6c6c6;
  527. background: #f8f8f8;
  528. }
  529. }
  530. }
  531. }
  532. image {
  533. width: 100%;
  534. height: 100%;
  535. }
  536. </style>