second.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. <template>
  2. <view class="container all-type-list-wrapper">
  3. <second-hand ref="productList"
  4. :search-status="true"
  5. @operationConfim="hanldOperationConfim"
  6. >
  7. </second-hand>
  8. <!--底部选择模态层弹窗组件 -->
  9. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec" >
  10. <!-- 遮罩层 -->
  11. <view class="mask"></view>
  12. <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-370rpx' : '-360rpx'}">
  13. <view class="content">
  14. <view class="layer-smimg">
  15. <image :src="handleData.image" mode=""></image>
  16. </view>
  17. <view class="layer-nunbox">
  18. <view class="layer-nunbox-t">
  19. <view class="layer-nunbox-text">数量:</view>
  20. <view class="number-box">
  21. <view class="iconfont icon-jianhao" :class="[isQuantity?'disabled':'']" @click="changeCountSub()"></view>
  22. <input class="btn-input" type="number" v-model="number" maxlength='6' @blur="changeNumber($event)">
  23. <view class="iconfont icon-jiahao" :class="[isStock?'disabled':'']" @click="changeCountAdd()"></view>
  24. </view>
  25. </view>
  26. <view class="layer-nunbox-b">
  27. <view class="text">单价:
  28. <text class="p sm">¥</text>
  29. <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="btn">
  35. <view class="button add" @click="toConfirmation">立即购买</view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import secondHand from './components/secondHand'
  43. export default{
  44. components:{
  45. secondHand
  46. },
  47. data(){
  48. return{
  49. clubID:'', //机构ID
  50. serviceProviderId:'',//协销ID
  51. serverUrl: '',
  52. emptyText: '',
  53. lastPageType: '',
  54. lastPageVal: '',
  55. isIphoneX:this.$store.state.isIphoneX,
  56. specClass: '',//规格弹窗css类,控制开关动画
  57. specClasszuhe:'',//组合加购物车弹窗
  58. specClassjieti:'',//阶梯展示弹窗
  59. ladderPriceList:{},
  60. handleData:{},
  61. isQuantity:false,
  62. isStock:false,
  63. number:1,
  64. buyRetailPrice:0,
  65. productKind:0,
  66. productTotalNum:0,
  67. productTotalAmount:0,
  68. buyNumRangeShow:'',//起订量范围
  69. buyPrice:'',//起订量范围价格
  70. buyRetailPriceStep:1,
  71. secondProductType:'',
  72. }
  73. },
  74. onLoad() {
  75. },
  76. methods:{
  77. getClubProductNum(){
  78. this.SellerService.GetSellerProductNum({clubId:this.clubID,serviceProviderId:this.serviceProviderId}).then(response =>{
  79. this.$refs.productList.cartQuantity = response.data
  80. })
  81. },
  82. hanldOperationConfim(data){//显示选择数量确认弹窗
  83. console.log(this.handleData)
  84. this.handleData = data
  85. this.number = 1
  86. this.buyRetailPrice = Number(data.price);
  87. this.secondProductType = data.secondProductType
  88. this.specClass = 'show';
  89. },
  90. hideSpec() {//关闭选择数量确认弹窗
  91. this.specClass = 'hide';
  92. setTimeout(() => {
  93. this.specClass = 'none';
  94. }, 200);
  95. },
  96. changeCountAdd(){//popup弹窗数量增加按钮
  97. if(this.handleData.secondHandType == 2||this.handleData.secondHandType == 3){
  98. // if(this.number >= this.handleData.stock){
  99. // this.number= this.handleData.stock
  100. // this.isStock =true
  101. // this.$util.msg(`购买数量最高为${this.handleData.stock}`,2000);
  102. // return
  103. // }else{
  104. this.number++
  105. this.isQuantity =false
  106. // }
  107. this.buyRetailPrice = this.number*this.handleData.price1
  108. }else{
  109. this.isStock =true
  110. this.$util.msg(`该商品购买数量只能为1`,2000);
  111. }
  112. },
  113. changeCountSub(){//popup弹窗数量减按钮
  114. if(this.handleData.secondHandType == 2||this.handleData.secondHandType == 3){
  115. // if(this.number <= 1){
  116. // this.number= 1
  117. // this.isQuantity =true
  118. // this.$util.msg(`购买数量最低为1`,2000);
  119. // return
  120. // }else{
  121. this.number--
  122. this.isQuantity =false
  123. // }
  124. this.buyRetailPrice = this.number*this.handleData.price1
  125. }else{
  126. this.isQuantity =true
  127. this.$util.msg(`该商品购买数量只能为1`,2000);
  128. }
  129. },
  130. // changeNumber(e){
  131. // let _value = e.detail.value;
  132. // if(!this.$api.isNumber(_value)){
  133. // this.number = this.minBuyNumber
  134. // }else if(_value < this.minBuyNumber){
  135. // this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
  136. // this.number = this.minBuyNumber
  137. // }else if( _value % this.minBuyNumber !=0 ){
  138. // this.$util.msg(`购买量必须为起订量的整数倍`,2000);
  139. // this.number = this.minBuyNumber
  140. // }else{
  141. // this.number = e.detail.value
  142. // }
  143. // },
  144. changeNumber(e){
  145. let _value = e.detail.value;
  146. if(!this.$api.isNumber(_value)){
  147. this.number = 1
  148. }else if(_value <= 1){
  149. this.$util.msg(`该商品最小起订量为1`,2000);
  150. this.number = 1
  151. }else{
  152. this.number = e.detail.value
  153. }
  154. this.buyRetailPrice = this.number*this.handleData.price1
  155. },
  156. clearProduct(){//成功加入购物车后清空所选值
  157. this.handleData.productKind= 0;
  158. this.handleData.productTotalNum = 0;
  159. this.handleData.productTotalAmount = 0;
  160. this.handleData.combinationProductList.forEach(item =>{
  161. item.initProductNum = 0;
  162. })
  163. },
  164. toConfirmation(){//跳转确认订单页面
  165. this.specClass = 'hide';
  166. let productStp ={
  167. productIds:this.handleData.productId,
  168. productCount:this.number
  169. }
  170. this.$api.navigateTo(`/pages/seller/order/create-order?type=1&data=${JSON.stringify({data:productStp})}`)
  171. setTimeout(() => {
  172. this.specClass = 'none';
  173. }, 200);
  174. },
  175. hanldToCartPage(){
  176. this.$api.navigateTo('/pages/seller/cart/cart')
  177. },
  178. discard(){
  179. //丢弃
  180. }
  181. },
  182. onShow() {
  183. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  184. this.clubID = resolve.clubId
  185. })
  186. this.$api.getStorage().then((resolve) =>{
  187. this.serviceProviderId = resolve.serviceProviderId
  188. this.getClubProductNum()
  189. })
  190. },
  191. }
  192. </script>
  193. <style lang="scss">
  194. // 阶梯价格弹窗
  195. .jieti_box{
  196. width: 596rpx;
  197. // height: 496rpx;
  198. top: 10%;
  199. right: 50%;
  200. transform: translate(50%,50%);
  201. position: absolute;
  202. background:#FFFFFF;
  203. color: #000;
  204. font-size: 28rpx;
  205. border-radius: 10rpx;
  206. text-align: center;
  207. line-height: 84rpx;
  208. padding: 20rpx;
  209. z-index: 99999;
  210. }
  211. .jieti_box_one{
  212. // width: 548rpx;
  213. overflow: hidden;
  214. border: 2rpx solid #F5F5F5;
  215. border-bottom: 0;
  216. margin: auto;
  217. }
  218. .jieti_left{
  219. width: 298rpx;
  220. float: left;
  221. }
  222. .jieti_left view{
  223. height: 84rpx;
  224. border-bottom:2rpx solid #F5F5F5 ;
  225. border-right:2rpx solid #F5F5F5 ;
  226. }
  227. .ladder-a{
  228. letter-spacing: 4rpx;
  229. }
  230. .jieti_right{
  231. width: 294rpx;
  232. float: right;
  233. }
  234. .jieti_right view{
  235. height: 84rpx;
  236. border-bottom:2rpx solid #F5F5F5;
  237. }
  238. .addbtn{
  239. height: 84rpx;
  240. background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
  241. text-align: center;
  242. font-size: 28rpx;
  243. color: #fff;
  244. line-height: 84rpx;
  245. border-radius: 10rpx;
  246. margin: 20rpx auto
  247. }
  248. .zuhe-content{
  249. display: inline-block;
  250. }
  251. .number-left{
  252. float: left;
  253. }
  254. .number-right{
  255. margin-left: 30rpx;
  256. float: left;
  257. }
  258. .number-left text{
  259. margin-left: 30rpx;
  260. }
  261. .number-right-text{
  262. color: #FF2A2A;
  263. }
  264. page {
  265. background: $sub-bg-color;
  266. .all-type-list-wrapper {
  267. display: flex;
  268. flex-direction: column;
  269. }
  270. }
  271. /* 加入购物模态层*/
  272. @keyframes showPopup {
  273. 0% {
  274. opacity: 0;
  275. }
  276. 100% {
  277. opacity: 1;
  278. }
  279. }
  280. @keyframes hidePopup {
  281. 0% {
  282. opacity: 1;
  283. }
  284. 100% {
  285. opacity: 0;
  286. }
  287. }
  288. @keyframes showLayer {
  289. 0% {
  290. transform: translateY(0);
  291. }
  292. 100% {
  293. transform: translateY(-100%);
  294. }
  295. }
  296. @keyframes hideLayer {
  297. 0% {
  298. transform: translateY(-100%);
  299. }
  300. 100% {
  301. transform: translateY(0);
  302. }
  303. }
  304. @keyframes showAmnation {
  305. 0% {
  306. top: -12rpx;
  307. opacity: 0;
  308. }
  309. 50% {
  310. top: -60rpx;
  311. opacity: 1;
  312. }
  313. 100% {
  314. top: -100rpx;
  315. opacity: 0;
  316. }
  317. }
  318. @keyframes hideAmnation {
  319. 0% {
  320. top: -100rpx;
  321. opacity: 0;
  322. }
  323. 100% {
  324. top: -12rpx;
  325. opacity: 0;
  326. }
  327. }
  328. .popup {
  329. position: fixed;
  330. top: 0;
  331. width: 100%;
  332. height: 100%;
  333. z-index: 999;
  334. display: none;
  335. .mask{
  336. position: fixed;
  337. top: 0;
  338. width: 100%;
  339. height: 100%;
  340. z-index: 21;
  341. background-color: rgba(0, 0, 0, 0.6);
  342. }
  343. .layer {
  344. position: fixed;
  345. z-index: 22;
  346. bottom: -360rpx;
  347. width: 702rpx;
  348. padding: 24rpx 24rpx 36rpx 24rpx;
  349. // height: 236rpx;
  350. border-radius: 20rpx 20rpx 0 0;
  351. background-color: #fff;
  352. display: flex;
  353. flex-wrap: wrap;
  354. align-content: space-between;
  355. .content {
  356. width: 100%;
  357. margin-top: 20rpx;
  358. }
  359. .btn {
  360. width: 100%;
  361. // height: 88rpx;
  362. display: flex;
  363. .button {
  364. width: 702rpx;
  365. height: 88rpx;
  366. color: #fff;
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. font-size: $font-size-28;
  371. border-radius: 44rpx;
  372. background: $btn-confirm;
  373. margin-top: 20rpx;
  374. }
  375. }
  376. }
  377. .layer-nunbox-m{
  378. font-size: 28rpx;
  379. }
  380. &.show {
  381. display: block;
  382. .mask{
  383. animation: showPopup 0.2s linear both;
  384. }
  385. .layer {
  386. animation: showLayer 0.2s linear both;
  387. }
  388. }
  389. &.hide {
  390. display: block;
  391. .mask{
  392. animation: hidePopup 0.2s linear both;
  393. }
  394. .layer {
  395. animation: hideLayer 0.2s linear both;
  396. }
  397. }
  398. &.none {
  399. display: none;
  400. }
  401. &.service {
  402. .row {
  403. margin: 30upx 0;
  404. .title {
  405. font-size: 30upx;
  406. margin: 10upx 0;
  407. }
  408. .description {
  409. font-size: 28upx;
  410. color: #999;
  411. }
  412. }
  413. }
  414. .layer-smimg{
  415. width: 158rpx;
  416. height: 158rpx;
  417. float: left;
  418. border-radius: 10rpx;
  419. margin-right: 24rpx;
  420. image{
  421. width: 158rpx;
  422. height: 158rpx;
  423. border-radius: 10rpx;
  424. }
  425. }
  426. .layer-nunbox{
  427. justify-content: space-between;
  428. align-items: center;
  429. width: 510rpx;
  430. height: 88rpx;
  431. padding: 10rpx 0 0 0;
  432. float: left;
  433. .layer-nunbox-t{
  434. width: 100%;
  435. height:44rpx;
  436. position:relative;
  437. display: flex;
  438. margin-top: 10rpx;
  439. .layer-nunbox-text{
  440. line-height: 44rpx;
  441. font-size: $font-size-28;
  442. }
  443. .number-box{
  444. display: flex;
  445. justify-content: center;
  446. align-items: center;
  447. border: 2rpx solid #ffe6dc;
  448. border-radius: 30rpx;
  449. height: 48rpx;
  450. margin-left: 20rpx;
  451. .iconfont{
  452. font-size: $font-size-24;
  453. padding:0 18rpx;
  454. color: #999999;
  455. text-align: center;
  456. line-height: 48rpx;
  457. font-weight: bold;
  458. background: #fef6f3;
  459. &.icon-jianhao{
  460. border-radius: 30rpx 0 0 30rpx;
  461. }
  462. &.icon-jiahao{
  463. border-radius: 0 30rpx 30rpx 0;
  464. }
  465. }
  466. .btn-input{
  467. width: 80rpx;
  468. height: 48rpx;
  469. line-height: 48rpx;
  470. background: #FFFFFF;
  471. border-radius: 4rpx;
  472. text-align: center;
  473. font-size: $font-size-28;
  474. }
  475. }
  476. .product-step{
  477. position: absolute;
  478. left: 45rpx;
  479. bottom: 0;
  480. height: 44rpx;
  481. background: #FFFFFF;
  482. }
  483. }
  484. .layer-nunbox-b{
  485. width: 100%;
  486. height:44rpx;
  487. margin-top: 13rpx;
  488. }
  489. .text{
  490. line-height: 44rpx;
  491. font-size: $font-size-28;
  492. .p{
  493. color: #FF2A2A;
  494. }
  495. .p:first-child{
  496. margin-left: 30rpx;
  497. }
  498. .p.sm{
  499. font-size: $font-size-24;
  500. }
  501. }
  502. }
  503. }
  504. .zuhe .layer{
  505. bottom: -270rpx;
  506. height: 200rpx;
  507. }
  508. </style>