1
0

u-attr.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  1. <template>
  2. <view class="u-attr">
  3. <view @click="turnOn">
  4. <slot name="btn"></slot>
  5. </view>
  6. <u-popup v-model="newValue" mode="bottom" border-radius="14" :safeAreaInsetBottom="true" @close="close">
  7. <view class="u-model" @touchmove.stop.prevent>
  8. <view class="u-top dir-left-nowrap u-border-box">
  9. <view class="u-pic u-border-box" @click="clickImg(imgUrl)">
  10. <image class="u-img" :src="imgUrl"></image>
  11. </view>
  12. <view class="u-info">
  13. <view :class="['cross-center', 'dir-left-nowrap', themeObject.color]">
  14. <view class="dir-left-nowrap">
  15. <slot name="priceBefore"></slot>
  16. <view class="u-price">
  17. <app-price v-if="is_show_price" :theme="themeObject.theme" :userTheme="themeObject.userTheme" :sign="sign"
  18. :price="sellPrice" :default-price="goods.price"></app-price>
  19. </view>
  20. </view>
  21. <app-member-mark v-if="goods.level_show === 1" :theme="themeObject"></app-member-mark>
  22. </view>
  23. <view class="u-stock">库存:{{stock}}</view>
  24. </view>
  25. <view class="u-close-image" @click="close">
  26. <image class="bd-close-image u-border-box" src="/static/image/icon/icon-close.png"></image>
  27. </view>
  28. </view>
  29. <view class="u-center">
  30. <scroll-view class="u-scroll-view" scroll-y="true">
  31. <slot name="extra"></slot>
  32. <view v-if="goods.type === 'goods'" class="u-attr-group u-border-box" v-for="(item, index) in newGroup" :key="index">
  33. <view class="u-group-name u-text">{{item.attr_group_name}}</view>
  34. <view class="dir-left-wrap">
  35. <view :class="['u-group-item', attr.select ? 'u-checked ' + themeObject.back : 'u-unchecked', attr.num_0 ? 'u-attr_num_0' : '']"
  36. @click="storeAttr(attr.attr_id, item.attr_group_id, attr.num_0)" v-for="(attr, key) in item.attr_list" :key="key">
  37. {{attr.attr_name}}
  38. </view>
  39. </view>
  40. </view>
  41. <view class="u-number dir-left-nowrap main-between cross-center">
  42. <view class="u-text">数量</view>
  43. <view class="dir-left-nowrap u-input-box">
  44. <view @click.stop="numberSub" :class="[number <=1 ? 'u-reduced-1' : 'u-reduced-0', 'u-number-btn']"></view>
  45. <input @blur="numberBlur" type="number" class="u-input" v-model="number">
  46. <view @click.stop="numberAdd" class="u-number-btn u-added-1"></view>
  47. </view>
  48. </view>
  49. </scroll-view>
  50. </view>
  51. <view class="u-bottom dir-left-nowrap">
  52. <view style="background: linear-gradient(to right, #A494F6, #BC8AE7, #E674B2);color: #fff;" v-if="is_show_left && (goods.type === 'goods' || is_must_left)" class="box-grow-1 borderwithe" :class="cartClass" @click="leftSubmit">
  53. <slot name="left_slot"></slot>
  54. <template v-if="!$slots.left_slot">{{leftText}}</template>
  55. </view>
  56. <view style="background: linear-gradient(to right, #E674B2, #FE3666);color: #fff;" v-if="is_show_right" class="box-grow-1" @click="rightSubmit" :class="[!$slots.right_slot ? themeObject.back + ' u-btn u-btn-color' : '']">
  57. <slot name="right_slot"></slot>
  58. <template v-if="!$slots.right_slot">{{rightText}}</template>
  59. </view>
  60. <template v-if="$slots.right">
  61. <slot name="right"></slot>
  62. </template>
  63. </view>
  64. </view>
  65. </u-popup>
  66. </view>
  67. </template>
  68. <script>
  69. import uPopup from '../../basic-component/u-popup/u-popup.vue';
  70. import appPrice from "../goods/app-price.vue";
  71. import appMemberMark from "../app-member-mark/app-member-mark.vue";
  72. export default {
  73. name: "u-attr",
  74. props: {
  75. value: {
  76. type: Boolean
  77. },
  78. goods: {
  79. type: Object
  80. },
  81. themeObject: {
  82. type: Object
  83. },
  84. checked: {
  85. type: Object
  86. },
  87. is_show_price: {
  88. type: Boolean,
  89. default: true
  90. },
  91. is_show_left: {
  92. type: Boolean,
  93. default: true
  94. },
  95. is_must_left: {
  96. type: Boolean,
  97. default: true
  98. },
  99. is_show_right: {
  100. type: Boolean,
  101. default: true
  102. },
  103. leftText: {
  104. type: String,
  105. default: '加入购物车'
  106. },
  107. rightText: {
  108. type: String,
  109. default: '立即购买'
  110. },
  111. leftFunc: {
  112. type: Boolean
  113. },
  114. rightFunc: {
  115. type: Boolean
  116. },
  117. sign: {
  118. type: String
  119. },
  120. again: {
  121. type: Number
  122. }
  123. },
  124. data() {
  125. return {
  126. newValue: false,
  127. picUrl: null,
  128. newGroup: [],
  129. number: 1
  130. }
  131. },
  132. methods: {
  133. close: function() {
  134. this.$emit('input', false);
  135. },
  136. turnOn: function() {
  137. this.$emit('input', true);
  138. },
  139. inArray: function(newVal, arr) {
  140. return arr.some(v => {
  141. return newVal === v;
  142. });
  143. },
  144. identifier: function(copyGroup, attrNum_0, select) {
  145. copyGroup.forEach(f => {
  146. f.attr_list.forEach(c => {
  147. let param = `${f.attr_group_id}-${c.attr_id}`;
  148. this.inArray(param, attrNum_0) && !this.inArray(param, select) ? c.num_0 = true : c.num_0 = false;
  149. });
  150. });
  151. },
  152. selectCheck: function(copyAttr, attrNum_0, select) {
  153. copyAttr.forEach(f => {
  154. let arr = [];
  155. let sign = 0;
  156. f.attr_list.forEach(c => {
  157. let param = `${c.attr_group_id}-${c.attr_id}`;
  158. if (!this.inArray(param, select)) {
  159. sign += 1;
  160. arr.push(param);
  161. }
  162. });
  163. if (f.stock === 0 && sign <= 1) Array.prototype.push.apply(attrNum_0, arr);
  164. if (sign === 0) {
  165. this.$emit('check', f, 1);
  166. }
  167. });
  168. },
  169. storeAttr: function(attr_id, group_id, num_0) {
  170. if (num_0 === true) return;
  171. let newGroup = this.newGroup;
  172. let copyAttr = this.copyAttr;
  173. let select = [];
  174. newGroup.forEach((i, index) => {
  175. let attr_list = i.attr_list;
  176. attr_list.forEach((k) => {
  177. if (i.attr_group_id === group_id) {
  178. if (k.attr_id === attr_id) {
  179. if (k.select === true) {
  180. k.select = false;
  181. } else {
  182. k.select = true;
  183. }
  184. } else {
  185. k.select = false;
  186. }
  187. // k.attr_id === attr_id ? k.select = true : k.select = false;
  188. }
  189. if (k.select === true) {
  190. select.push(`${i.attr_group_id}-${k.attr_id}`);
  191. if (index === 0) this.picUrl = k.pic_url;
  192. }
  193. });
  194. });
  195. let attrNum_0 = [];
  196. this.selectCheck(copyAttr, attrNum_0, select);
  197. this.$nextTick(() => {
  198. if (this.number > this.stock) this.number = this.stock;
  199. });
  200. this.identifier(newGroup, attrNum_0, select);
  201. if (select.length !== newGroup.length) {
  202. this.$emit('check', null, 1);
  203. }
  204. },
  205. firstSelect: function() {
  206. if (!this.copyGroup || !this.copyAttr) return;
  207. let copyGroup = this.copyGroup;
  208. let copyAttr = this.copyAttr;
  209. let groupLength = copyGroup.length;
  210. let select = [];
  211. copyAttr.forEach(i => {
  212. let attr_list = i.attr_list;
  213. attr_list.forEach(j => {
  214. let attr_group_id = j.attr_group_id;
  215. copyGroup.forEach(k => {
  216. if (attr_group_id === k.attr_group_id) {
  217. let groups_attr_list = k.attr_list;
  218. groups_attr_list.forEach(g => {
  219. if (g.attr_id === j.attr_id) {
  220. if (i.stock > 0) {
  221. if (groupLength > 0) {
  222. g.select = true;
  223. select.push(`${k.attr_group_id}-${g.attr_id}`);
  224. if (groupLength === copyGroup.length) {
  225. this.picUrl = g.pic_url;
  226. }
  227. groupLength--;
  228. }
  229. }
  230. }
  231. });
  232. }
  233. });
  234. });
  235. });
  236. let attrNum_0 = [];
  237. this.selectCheck(copyAttr, attrNum_0, select);
  238. this.identifier(copyGroup, attrNum_0, select);
  239. this.newGroup = copyGroup;
  240. },
  241. numberBlur: function(e) {
  242. let value = parseInt(e.detail.value);
  243. if (!value) value = 1;
  244. if (value > this.stock) {
  245. value = this.stock;
  246. uni.showToast({
  247. title: '库存不足',
  248. icon: 'none'
  249. });
  250. }
  251. this.number = value;
  252. },
  253. numberSub: function() {
  254. let value = this.number;
  255. if (value > 1) {
  256. value--;
  257. this.number = value;
  258. }
  259. },
  260. numberAdd: function() {
  261. let value = this.number;
  262. value++;
  263. if (value > this.stock) {
  264. value = this.stock;
  265. uni.showToast({
  266. title: '库存不足',
  267. icon: 'none'
  268. });
  269. }
  270. this.number = value;
  271. },
  272. leftSubmit: function() {
  273. if (this.leftFunc === true) {
  274. this.$emit('leftFunc', this.number);
  275. } else {
  276. this.cart();
  277. }
  278. this.close();
  279. },
  280. rightSubmit: function() {
  281. let attrs = [];
  282. if (!this.checked) {
  283. uni.showToast({
  284. title: '请先选规格',
  285. icon: 'none'
  286. });
  287. return false;
  288. }
  289. this.checked.attr_list.forEach(item => {
  290. attrs.push({
  291. attr_id: item.attr_id,
  292. attr_group_id: item.attr_group_id
  293. });
  294. });
  295. let goods = {
  296. mch_id: this.goods.mch_id ? this.goods.mch_id : 0,
  297. goods_list: [{
  298. id: this.goods.id,
  299. attrs,
  300. num: this.number,
  301. cat_id: 0,
  302. goods_attr_id: this.checked.id
  303. }]
  304. }
  305. if (this.rightFunc === true) {
  306. this.$emit('rightFunc', goods);
  307. } else {
  308. this.shop(goods);
  309. }
  310. this.close();
  311. },
  312. shop: function(goods) {
  313. uni.navigateTo({
  314. url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([goods])}`
  315. });
  316. },
  317. cart: function() {
  318. if (!this.checked) {
  319. uni.showToast({
  320. title: '请先选规格',
  321. icon: 'none'
  322. });
  323. return false;
  324. }
  325. if (this.goods.type === 'ecard') return;
  326. this.$request({
  327. url: this.$api.cart.add,
  328. method: 'post',
  329. data: {
  330. goods_id: this.checked.goods_id,
  331. attr: this.checked.id,
  332. num: this.number
  333. }
  334. }).then(res => {
  335. if (res.code === 0) {
  336. uni.showToast({
  337. title: res.msg,
  338. icon: 'none'
  339. });
  340. this.$emit('cart', this.checked, this.number);
  341. this.close();
  342. } else {
  343. uni.showToast({
  344. title: res.msg,
  345. icon: "none",
  346. duration: 2500
  347. });
  348. }
  349. });
  350. },
  351. clickImg(src) {
  352. uni.previewImage({
  353. current: 0,
  354. urls: [src]
  355. });
  356. }
  357. },
  358. components: {
  359. uPopup,
  360. appPrice,
  361. appMemberMark
  362. },
  363. computed: {
  364. imgUrl: function() {
  365. if (this.picUrl) {
  366. return this.picUrl;
  367. } else if (this.goods) {
  368. return this.goods.cover_pic;
  369. } else {
  370. return '';
  371. }
  372. },
  373. stock: function() {
  374. if (!this.$validation.isEmpty(this.checked)) {
  375. return this.checked.stock;
  376. } else if (!this.$validation.isEmpty(this.goods)) {
  377. return this.goods.goods_num;
  378. }
  379. },
  380. sellPrice: function() {
  381. if (!this.$validation.isEmpty(this.checked)) {
  382. return this.goods.level_show === 1 ? this.checked.price_member : this.checked.price;
  383. } else if (!this.$validation.isEmpty(this.goods)) {
  384. return this.goods.hasOwnProperty('price_min') ? this.goods.price_min : this.goods.price;
  385. }
  386. },
  387. copyGroup: function() {
  388. if (!this.goods) return;
  389. let group = this.$utils.deepClone(this.goods.attr_groups);
  390. for (let i = 0; i < group.length; i++) {
  391. group[i].attr_list.forEach(item => {
  392. item.select = false;
  393. item.num_0 = false;
  394. });
  395. }
  396. return group;
  397. },
  398. copyAttr: function() {
  399. if (!this.goods) return;
  400. return this.$utils.deepClone(this.goods.attr);
  401. },
  402. cartClass: function() {
  403. if (!this.$slots.left_slot) {
  404. if (this.themeObject.theme === 'a' || this.themeObject.theme === 'b' || this.themeObject.theme === 'f') {
  405. return this.themeObject.sBack + ' u-btn u-btn-color ';
  406. } else {
  407. return this.themeObject.sBack + ' u-btn ' + this.themeObject.color;
  408. }
  409. } else {
  410. return '';
  411. }
  412. }
  413. },
  414. watch: {
  415. value: {
  416. handler(newVal) {
  417. this.newValue = newVal;
  418. if (newVal === false) return;
  419. if (this.$validation.isEmpty(this.checked)) this.$utils.throttle(this.firstSelect, 800);
  420. },
  421. immediate: true
  422. },
  423. number: {
  424. handler(newVal) {
  425. this.$emit('check', this.checked, newVal);
  426. }
  427. },
  428. again: {
  429. handler() {
  430. this.firstSelect();
  431. }
  432. }
  433. }
  434. }
  435. </script>
  436. <style scoped>
  437. .u-model {
  438. width: 750upx;
  439. }
  440. .borderwithe{
  441. position: relative;
  442. }
  443. .borderwithe::after{
  444. content: "";
  445. position: absolute;
  446. right: 0;
  447. height: 60%;
  448. background: #ffffff;
  449. width: 1px;
  450. top: 50%;
  451. transform: translateY(-50%);
  452. }
  453. .u-top {
  454. margin: 0 24upx;
  455. border-bottom: 1upx solid #e2e2e2;
  456. height: 140upx;
  457. }
  458. .u-close-image {
  459. width: 54upx;
  460. height: 78upx;
  461. padding: 24upx 0 24rpx 24rpx;
  462. margin-left: 24rpx;
  463. }
  464. .bd-close-image {
  465. width: 30upx;
  466. height: 30upx;
  467. }
  468. .u-pic {
  469. width: 200rpx;
  470. height: 200rpx;
  471. padding: 4upx;
  472. border-radius: 8rpx;
  473. position: relative;
  474. top: -64upx;
  475. background-color: #ffffff;
  476. }
  477. .u-img {
  478. width: 192rpx;
  479. height: 192rpx;
  480. background-color: #ffffff;
  481. }
  482. .u-info {
  483. width: 424upx;
  484. height: 136upx;
  485. padding: 45upx 0 0 24upx;
  486. }
  487. .u-scroll-view {
  488. width: 100%;
  489. max-height: calc(80vh - 154upx);
  490. }
  491. .u-attr-group {
  492. margin: 24upx 32upx 0 32upx;
  493. border-bottom: 1upx solid #e2e2e2;
  494. }
  495. .u-number {
  496. height: 124upx;
  497. margin: 0 32upx;
  498. }
  499. .u-group-name {
  500. margin-bottom: 20upx;
  501. }
  502. .u-group-item {
  503. padding: 15upx 24upx;
  504. border-radius: 8upx;
  505. margin: 0 20upx 20upx 0;
  506. font-size: 26upx;
  507. }
  508. .u-checked {
  509. color: #ffffff;
  510. }
  511. .u-unchecked {
  512. background-color: #f2f2f2;
  513. color: #353535;
  514. }
  515. .u-attr_num_0 {
  516. background-color: #f7f7f7;
  517. color: #cdcdcd;
  518. }
  519. .u-stock {
  520. font-size: 24upx;
  521. color: #999999;
  522. }
  523. .u-price {
  524. margin-right: 12upx;
  525. }
  526. .u-input {
  527. width: 88upx;
  528. height: 60upx;
  529. background-color: #f7f7f7;
  530. font-size: 20upx;
  531. color: #353535;
  532. text-align: center;
  533. }
  534. .u-input-box {
  535. width: 218upx;
  536. }
  537. .u-number-btn {
  538. height: 60upx;
  539. width: 60upx;
  540. background-repeat: no-repeat;
  541. background-size: 100% 100%;
  542. background-position: center;
  543. }
  544. .u-number-btn:first-child {
  545. margin-right: 5upx;
  546. }
  547. .u-number-btn:last-child {
  548. margin-left: 5upx;
  549. }
  550. .u-reduced-1 {
  551. background-image: url("../../../static/image/icon/can-be-reduced.png");
  552. }
  553. .u-reduced-0 {
  554. background-image: url("../../../static/image/cart/can-be-reduced.png");
  555. }
  556. .u-added-1 {
  557. background-image: url("../../../static/image/cart/can-be-added.png");
  558. }
  559. .u-text {
  560. font-size: 26upx;
  561. color: #666666;
  562. }
  563. .u-bottom {
  564. height: 110upx;
  565. }
  566. .u-btn {
  567. text-align: center;
  568. line-height: 110upx;
  569. }
  570. .u-btn-color {
  571. color: #ffffff;
  572. }
  573. </style>