sku-action.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. <template>
  2. <view>
  3. <view class="sku-action" :class="{'sku-show': value==true}">
  4. <view class="sku-header">
  5. <view class="sku-header-image">
  6. <image :src="goods.photo">
  7. </view>
  8. <view class="sku-header-goods-info">
  9. <slot name="sku-header-price" v-bind:price="goodsPrice">
  10. <view class="sku-header-goods-price">
  11. <text class="symbol">¥</text>
  12. <text class="price">{{goodsPrice||""}}</text>
  13. </view>
  14. </slot>
  15. <view class="sku-header-item">
  16. <view class="sku-stock">
  17. 剩余<text class="stock-num">{{goodsStockNumber||goods.store_nums||"0"}}</text>件
  18. </view>
  19. </view>
  20. <view class="sku-header-item">{{specSelected||""}}</view>
  21. </view>
  22. </view>
  23. <view class="sku-body" :style="{'max-height':maxHeight+'px'}">
  24. <view class="sku-group-container">
  25. <view class="sku-row" v-for="(item,index) in attribute" :key="index">
  26. <view class="sku-row-title">{{item.name}}</view>
  27. <view
  28. v-for="(childItem, childIndex) in item.list"
  29. :key="childIndex"
  30. class="sku-row-item"
  31. :class="{'sku-row-item-active': childItem.selected && childItem.disable == false,'sku-row-item-disable':childItem.disable}"
  32. >
  33. <text
  34. class="sku-row-item-name"
  35. @click="onSelected(item.id, childItem.id)"
  36. >{{childItem.value}}</text>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="sku-stepper-stock">
  41. <view class="sku-stepper-title">购买数量</view>
  42. <view class="stepper sku-stepper">
  43. <view @click.stop="minus" class="stepper-minus" :class="{'stepper-minus-disabled':number<=1}"></view>
  44. <input type="number" class="stepper-input" :value="number" disabled="disabled">
  45. <view @click.stop="plus" class="stepper-plus" :class="{'stepper-minus-disabled':number >= goodsStockNumber}"></view>
  46. </view>
  47. </view>
  48. <view style="width: 100%;height: 110rpx;"></view>
  49. </view>
  50. <text class="iconfont close" @click.stop="onClose">&#xe601;</text>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. // import Popup from '../../components/popup/popup';
  56. export default {
  57. // components: {
  58. // [Popup.name]: Popup,
  59. // },
  60. props: {
  61. value: {
  62. type: Boolean,
  63. default: false
  64. },
  65. fields:{
  66. required: true,
  67. type: Array,
  68. default: function() {
  69. return [];
  70. }
  71. },
  72. goods:{
  73. default: function() {
  74. return {}
  75. }
  76. },
  77. attribute:{
  78. default: function() {
  79. return []
  80. }
  81. },
  82. item:{
  83. default: function() {
  84. return {}
  85. }
  86. },
  87. goodsInfo: {
  88. default: function() {
  89. return {}
  90. }
  91. }
  92. },
  93. data(){
  94. return {
  95. maxHeight:0,
  96. number: 1,
  97. minNumber:1,
  98. maxNumber:0,
  99. specSelected: '',
  100. selectedSku:[],
  101. goodsPrice: "",
  102. goodsStockNumber: "",
  103. selectedGoodsInfo: {}
  104. };
  105. },
  106. mounted() {
  107. let info = this.$utils.getSystemInfo();
  108. this.maxHeight = info.h - this.$utils.px2rpx(200);
  109. },
  110. watch:{
  111. goods:{
  112. handler(newValue, oldValue) {
  113. this.goodsStockNumber = this.goods.store_nums;
  114. this.goodsPrice = this.goods.sell_price;
  115. let fields = {};
  116. for(let i in this.goods){
  117. if(this.$utils.in_array(i,this.fields)){
  118. fields[i] = this.goods[i];
  119. }
  120. }
  121. Object.assign(fields,{
  122. num: this.number,
  123. isSubmit:true,
  124. selectedSku: { id: "", specSelected: "" }
  125. });
  126. this.selectedGoodsInfo = fields;
  127. },
  128. deep: true
  129. },
  130. attribute:{
  131. handler(newValue, oldValue) {
  132. if(this.attribute.length <= 0){
  133. return ;
  134. }
  135. let arr = [];
  136. this.selectedSku = [];
  137. for(let obj in this.attribute){
  138. for(let index in this.attribute[obj]['list']){
  139. if(this.attribute[obj]['list'][index]['selected'] && !this.attribute[obj]['list'][index]['disable']){
  140. this.selectedSku.push(this.attribute[obj]['list'][index]);
  141. arr.push({ name:this.attribute[obj].name, value:this.attribute[obj]['list'][index].value });
  142. }
  143. }
  144. }
  145. let selectedIndex = [];
  146. for(let obj in this.selectedSku){
  147. selectedIndex.push(this.selectedSku[obj].pid+"_"+this.selectedSku[obj].id);
  148. }
  149. if(this.attribute.length == selectedIndex.length && this.item[selectedIndex.join("_")] != undefined){
  150. let g = this.item[selectedIndex.join("_")];
  151. this.goodsPrice = g.sell_price;
  152. this.goodsStockNumber = g.store_nums;
  153. if(this.number >= g.store_nums){
  154. this.number = g.store_nums;
  155. }
  156. this.selectedGoodsInfo.selectedSku.id = g.product_id;
  157. this.selectedGoodsInfo.isSubmit = true;
  158. }else{
  159. this.selectedGoodsInfo.isSubmit = false;
  160. }
  161. this.specSelected = '';
  162. let s = [];
  163. for(let i in arr){
  164. s.push(arr[i].name + ":" + arr[i].value);
  165. }
  166. if(s.length > 0){
  167. this.selectedGoodsInfo.selectedSku.specSelected = s.join(",");
  168. this.specSelected = "已选择:" + s.join(",");
  169. }
  170. },
  171. deep: true
  172. },
  173. selectedGoodsInfo:{
  174. handler(newValue, oldValue) {
  175. this.$emit("update:goods-info",this.selectedGoodsInfo);
  176. },
  177. deep: true
  178. }
  179. },
  180. methods: {
  181. minus(){
  182. if(this.number <= 1){
  183. return ;
  184. }
  185. this.number -= 1;
  186. this.selectedGoodsInfo.num = this.number;
  187. },
  188. plus(){
  189. if(this.number >= this.goodsStockNumber){
  190. return ;
  191. }
  192. this.number += 1;
  193. this.selectedGoodsInfo.num = this.number;
  194. },
  195. onClose(){
  196. this.$emit("input",!this.value)
  197. },
  198. checkStatus(id, pid){
  199. let attr = this.attribute;
  200. let flag = false;
  201. for(let i in attr){
  202. if(id != attr[i]['id']){
  203. continue;
  204. }
  205. for(let j in attr[i]['list']){
  206. let value = attr[i]['list'][j];
  207. if((id == value['pid'] && pid == value['id']) && value['disable']){
  208. flag = true;
  209. break;
  210. }
  211. }
  212. }
  213. return flag;
  214. },
  215. onSelected(id, pid){
  216. if(this.checkStatus(id, pid)){
  217. return ;
  218. }
  219. let specArray = [];
  220. for(let i in this.attribute){
  221. specArray[i] = "[A-Za-z0-9_\\:\\,]+";
  222. if(id == this.attribute[i]['id']){
  223. for(let j in this.attribute[i]['list']){
  224. let value = this.attribute[i]['list'][j];
  225. if(id == value['pid'] && pid == value['id']){
  226. let flag = !value.selected;
  227. this.$set(this.attribute[i]['list'][j], 'selected', flag);
  228. // #ifdef MP-WEIXIN
  229. this.$emit("sku",this.attribute);
  230. // #endif
  231. if(flag == true){
  232. specArray[i] = value.pid+":"+value.id;
  233. }
  234. }else{
  235. this.$set(this.attribute[i]['list'][j], 'selected', false);
  236. // #ifdef MP-WEIXIN
  237. this.$emit("sku",this.attribute);
  238. // #endif
  239. }
  240. }
  241. }
  242. }
  243. for(let i in this.attribute){
  244. for(let j in this.attribute[i]['list']){
  245. let value = this.attribute[i]['list'][j];
  246. let temp = specArray.slice();
  247. temp[i] = value.pid + ":" + value.id;
  248. let flag = true;
  249. for(let j in this.item){
  250. let reg = new RegExp(temp.join(","));
  251. if(reg.test(this.item[j].key) && this.item[j].store_nums > 0) {
  252. flag = false;
  253. }
  254. }
  255. this.$set(this.attribute[i]['list'][j], 'disable', flag);
  256. // #ifdef MP-WEIXIN
  257. this.$emit("sku",this.attribute);
  258. // #endif
  259. }
  260. }
  261. }
  262. }
  263. }
  264. </script>
  265. <style lang="scss" scoped>
  266. .sku-action{
  267. box-shadow:0px 1px 10px #999;
  268. position: fixed;
  269. left: 0;
  270. bottom: 0;
  271. background-color: #fff;
  272. width: 100%;
  273. border-radius: 20rpx 20rpx 0 0;
  274. display: flex;
  275. flex-direction: column;
  276. align-items: stretch;
  277. min-height: 50%;
  278. max-height: 80%;
  279. font-size: 28rpx;
  280. z-index: 9999;
  281. overflow: hidden;
  282. transition:all .3s cubic-bezier(.65,.7,.7,.9);
  283. transform:translate3d(0,100%,0);
  284. .sku-header {
  285. margin: 0 32rpx;
  286. border-bottom: 2rpx solid #ebedf0;
  287. .sku-header-image{
  288. position: relative;
  289. float: left;
  290. width: 192rpx;
  291. height: 192rpx;
  292. margin: 24rpx 0;
  293. overflow: hidden;
  294. background: #f7f8fa;
  295. border-radius: 8rpx;
  296. image {
  297. position: absolute;
  298. top: 0;
  299. right: 0;
  300. bottom: 0;
  301. left: 0;
  302. max-width: 100%;
  303. max-height: 100%;
  304. margin: auto;
  305. }
  306. }
  307. .sku-header-goods-info{
  308. display: flex;
  309. flex-direction: column;
  310. justify-content: flex-end;
  311. min-height: 96px;
  312. padding: 24rpx 40rpx 24rpx 16rpx;
  313. overflow: hidden;
  314. .sku-header-goods-price{
  315. color: #ee0a24;
  316. .symbol {
  317. font-size: 32rpx;
  318. vertical-align: bottom;
  319. }
  320. .price{
  321. font-weight: 500;
  322. font-size: 44rpx;
  323. vertical-align: bottom;
  324. word-wrap: break-word;
  325. }
  326. }
  327. .sku-header-item {
  328. margin-top: 16rpx;
  329. color: #969799;
  330. font-size: 24rpx;
  331. line-height: 32rpx;
  332. .sku-stock{
  333. display: inline-block;
  334. margin-right: 16rpx;
  335. color: #969799;
  336. font-size: 24rpx;
  337. .stock-num {
  338. display: inline-block;
  339. margin:0 8rpx;
  340. color: #969799;
  341. font-size: 24rpx;
  342. font-style: normal;
  343. }
  344. }
  345. }
  346. }
  347. }
  348. .sku-body {
  349. flex: 1 1 auto;
  350. min-height: 88rpx;
  351. overflow-y: scroll;
  352. -webkit-overflow-scrolling: touch;
  353. .sku-group-container{
  354. padding-top: 24rpx;
  355. .sku-row{
  356. margin: 0 32rpx 24rpx;
  357. border-bottom: 2rpx solid #ebedf0;
  358. .sku-row-title {
  359. padding-bottom: 24rpx;
  360. }
  361. .sku-row-item{
  362. position: relative;
  363. display: inline-flex;
  364. align-items: center;
  365. justify-content: center;
  366. min-width: 80rpx;
  367. margin: 0 24rpx 24rpx 0;
  368. overflow: hidden;
  369. color: #323233;
  370. font-size: 26rpx;
  371. line-height: 32rpx;
  372. vertical-align: middle;
  373. border-radius: 8rpx;
  374. cursor: pointer;
  375. &:before {
  376. position: absolute;
  377. top: 0;
  378. left: 0;
  379. width: 100%;
  380. height: 100%;
  381. background: #f7f8fa;
  382. content: "";
  383. }
  384. text {
  385. font-style: normal;
  386. z-index: 1;
  387. padding: 16rpx;
  388. }
  389. }
  390. .sku-row-item-active {
  391. color: #ee0a24;
  392. &:before {
  393. background: #ee0a24;
  394. opacity: .1;
  395. }
  396. }
  397. .sku-row-item-disable {
  398. color: #a8a7a7;
  399. }
  400. }
  401. }
  402. .sku-stepper-stock{
  403. padding: 24rpx 32rpx;
  404. overflow: hidden;
  405. line-height: 60rpx;
  406. .sku-stepper-title {
  407. float: left;
  408. }
  409. .stepper {
  410. font-size: 0;
  411. user-select: none;
  412. }
  413. .sku-stepper {
  414. float: right;
  415. padding-left: 8rpx;
  416. }
  417. .stepper-input {
  418. box-sizing: border-box;
  419. width: 64rpx;
  420. height: 56rpx;
  421. margin: 0 4rpx;
  422. padding: 0;
  423. color: #323233;
  424. font-size: 28rpx;
  425. line-height: normal;
  426. text-align: center;
  427. vertical-align: middle;
  428. background-color: #f2f3f5;
  429. border: 0;
  430. border-width: 2rpx 0;
  431. border-radius: 0;
  432. -webkit-appearance: none;
  433. float: left;
  434. }
  435. .stepper-minus { float: left; }
  436. .stepper-plus { float: right; }
  437. .stepper-minus,
  438. .stepper-plus {
  439. display: inline-block;
  440. position: relative;
  441. box-sizing: border-box;
  442. width: 56rpx;
  443. height: 56rpx;
  444. margin: 0;
  445. padding: 0;
  446. color: #323233;
  447. vertical-align: middle;
  448. background-color: #f2f3f5;
  449. border: 0;
  450. cursor: pointer;
  451. }
  452. .stepper-minus:before,
  453. .stepper-plus:before {
  454. width: 50%;
  455. height: 2rpx;
  456. }
  457. .stepper-plus:after {
  458. width: 2rpx;
  459. height: 50%;
  460. }
  461. .stepper-minus:after,
  462. .stepper-minus:before,
  463. .stepper-plus:after,
  464. .stepper-plus:before {
  465. position: absolute;
  466. top: 50%;
  467. left: 50%;
  468. background-color: rgb(50, 50, 51);
  469. -webkit-transform: translate(-50%,-50%);
  470. transform: translate(-50%,-50%);
  471. content: "";
  472. }
  473. .stepper-minus-disabled,
  474. .stepper-plus-disabled {
  475. color: #c8c9cc;
  476. background-color: #f7f8fa;
  477. cursor: not-allowed;
  478. }
  479. .stepper-minus-disabled:after,
  480. .stepper-minus-disabled:before,
  481. .stepper-plus-disabled:after,
  482. .stepper-plus-disabled:before {
  483. color: #c8c9cc;
  484. background-color: #c8c9cc;
  485. }
  486. .stepper-minus {
  487. border-radius: 8rpx 0 0 8rpx;
  488. }
  489. }
  490. }
  491. .close { position: absolute; display: inline-block; top: 30rpx; right: 30rpx; z-index: 1; color: #c8c9cc; font-size: 44rpx; cursor: pointer; }
  492. }
  493. .sku-show{
  494. transform:translate3d(0,0,0);
  495. }
  496. </style>