immediatelyList.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. <template>
  2. <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
  3. <view class="good-search clearfix" v-if="searchStatus">
  4. <view class="nav-tab-bar u-f-ajc">
  5. <block v-for="(tab,index) in tabBars" :key='tab.id' :class="{ current: tabIndex === index }">
  6. <view class="tabstyle u-f-ajc" :class="{'addstyle':tabIndex==index}" @tap="changeTab(index)">{{tab.name}}
  7. <i v-if='(tabIndex==index)' class='nav-tab-line iconfont icon-gou'></i>
  8. </view>
  9. </block>
  10. </view>
  11. <view class="search-from name">
  12. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  13. <input class="input"
  14. type="text"
  15. focus
  16. confirm-type="search"
  17. v-model="searchInputVal"
  18. placeholder="请输入商品关键词"
  19. @input="onShowClose"
  20. @confirm="searchOpertor"
  21. maxlength="20"/>
  22. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  23. </view>
  24. <view class="search-btn" :class="tabIndex">
  25. <button class="search-btn" type="default" @click.stop="searchOpertor(tabIndex)" >搜索</button>
  26. </view>
  27. </view>
  28. <list-skeleton v-if="showSkeleton"></list-skeleton>
  29. <view class="empty-container" v-if="isShowEmpty" >
  30. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
  31. <text class="error-text">{{isShowEmptyText}}</text>
  32. </view>
  33. <!-- 单一商品 -->
  34. <view class="product-container" v-else :style="{paddingTop:searchStatus?'112rpx':''}" >
  35. <view :class="tabIndex" v-if="tabIndex === 0">
  36. <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
  37. <view v-for="(item,index) in productList" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
  38. <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
  39. <view class="list-details-info">
  40. <text class="list-details-title">{{item.name}}</text>
  41. <text class="list-details-specs">规格:{{item.unit?item.unit:''}}</text>
  42. <text class="list-details-miniQuantity list-details-specs">起订量:{{item.minBuyNumber}}</text>
  43. <view class="list-details-specs" v-if="item.productCode!=''&&item.productCode!=null">
  44. <view>商品编码:{{item.productCode}}</view>
  45. </view>
  46. <view class="list-details-price">
  47. <view class="list-shop">
  48. <view class="list-price" >
  49. <text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
  50. <text class="price-larger" >¥{{item.retailPrice.toFixed(2)}}</text>
  51. <text class="price-view ladder" v-if="item.ladderPriceFlag == '1'" @click.stop="alertjieti(item)">阶</text>
  52. </view>
  53. <view class="list-price-none" v-if="item.repurchasePriceState">
  54. <text class="price-none">¥{{item.discountPrice}}</text>
  55. <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
  56. </view>
  57. </view>
  58. <button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
  59. </view>
  60. </view>
  61. </view>
  62. <view v-if="showLoading && productList.length > 4 && !showRegularBtn">
  63. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
  64. <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
  65. </view>
  66. </scroll-view>
  67. </view>
  68. <!-- 组合商品 -->
  69. <view :class="tabIndex" v-if="tabIndex === 1">
  70. <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y>
  71. <view class="all-zuhe-list" v-for="(item,index) in combinationProduct" :key="index" :id="item.id">
  72. <view class="zuhe_title" :class="index%2==0 ? 'active' : ''">{{item.name}}</view>
  73. <view v-for="(pros,proIndex) in item.combinationProductList" :class="index%2==0 ? 'stylecontent' : ''" :key="proIndex" :id="pros.productID" class="zuhe-list-content commodity-list" >
  74. <view class="list-details-info" >
  75. <text class="list-details-title zuhe_list_text">商品编码:{{pros.productCode}}</text>
  76. <text class="list-details-specs zuhe_list_text" @click.stop="navToDetailPage(pros.productID)">{{pros.name}}</text>
  77. <view class="list-details-price zuhe_list_price">
  78. <view class="list-shop">
  79. <view class="list-price zuhe_list_price" >
  80. <text class="zuhe_price-larger zuhe_list_text" >价格:¥{{pros.retailPrice.toFixed(2)}}</text>
  81. <text class="price-two zuhe_list_text" >
  82. 总价:<text class="zuhe_list_zj">¥ {{pros.totalPrice.toFixed(2)}}</text>
  83. <text class="price-view ladder" v-if="pros.ladderPriceFlag == '1'" @click.stop="alertjieti(pros)">阶</text>
  84. </text>
  85. <text class="price-view activity" v-if="pros.actStatus == '1'">活动价</text>
  86. </view>
  87. <view class="list-price-none" v-if="pros.repurchasePriceState">
  88. <text class="price-none">价格:¥{{pros.discountPrice}}</text>
  89. <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
  90. </view>
  91. <view class="count">
  92. <view class="number-box">
  93. <view class="iconfont icon-jianhao" @click.stop="changeCountSub(item,pros)"></view>
  94. <input class="btn-input" type="number" maxlength='4' v-model="pros.initProductNum" @blur="changeNnmber($event,item,pros)">
  95. <view class="iconfont icon-jiahao" @click.stop="changeCountAdd(item,pros)"></view>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="foot_conten" >
  103. <view class="zuhe_foot-box">
  104. <!-- -->
  105. <text>种类:{{item.productKind}}</text>
  106. <text >总数:{{item.productTotalNum}}</text>
  107. <text>总额:{{item.productTotalAmount.toFixed(2)}}</text>
  108. </view>
  109. <button type="default" class="buycart" @click.stop="operationHanld(item)">加入购物车</button>
  110. </view>
  111. </view>
  112. </scroll-view>
  113. </view>
  114. </view>
  115. <view class="cart-icon" @click="toCartPage">
  116. <text v-if="cartQuantity > 0" class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  117. {{cartQuantity >= 100 ? '99+' : cartQuantity}}
  118. </text>
  119. <image src='../../../static/icon-cart-active@3x.png' mode="widthFix"></image>
  120. </view>
  121. <!-- 透明模态层 -->
  122. <modal-layer v-if='isModallayer'></modal-layer>
  123. </view>
  124. </template>
  125. <script>
  126. import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
  127. import modalLayer from "@/components/modal-layer"
  128. import uniStars from '@/components/uni-stars/uni-stars.vue'
  129. import { getSellerProduct,getcombinationProduct } from "@/api/seller.js"
  130. import { mapState,mapMutations } from 'vuex';
  131. export default{
  132. name:'productList',
  133. components:{
  134. listSkeleton,
  135. modalLayer,
  136. uniStars
  137. },
  138. props: {
  139. searchStatus:{
  140. type:Boolean,
  141. default:false
  142. }
  143. },
  144. data(){
  145. return{
  146. isShowClose:false,
  147. searchInputVal:'',
  148. isModallayer:false,
  149. windowHeight: '',
  150. showSkeleton: false,
  151. isShowEmpty: false,
  152. isShowEmptyText: '搜索相关商品',
  153. clubUserId: '',
  154. scrollHeight: '',
  155. productList: [],
  156. combinationProduct:[],
  157. zuheProductList:[],//组合商品列表
  158. showLoading: false,
  159. loadingNow: true,
  160. loadingText: '上拉加载更多',
  161. pageSize: 10,
  162. pageNum: 1,
  163. hasNextPage: false,
  164. pullFlag: true,
  165. fromRegularPurchasePage: false,
  166. cartQuantity: 0,
  167. showRegularBtn: false,
  168. isPrecedence:false,
  169. ladderPriceList:[],//是否 阶梯,
  170. tabIndex:0,
  171. goodsList:[],
  172. tabBars:[
  173. {name:'单一商品',id:'danyi'},
  174. {name:'组合商品',id:'zuhe'}
  175. ],
  176. isShow: false,
  177. }
  178. },
  179. created() {
  180. this.setScrollHeight();
  181. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  182. this.clubUserId = resolve.userID
  183. })
  184. },
  185. computed: {
  186. ...mapState(['hasLogin','userInfo'])
  187. },
  188. methods:{
  189. scrolltolower() {
  190. if(this.hasNextPage && this.pullFlag) {
  191. if(tabIndex ==0){
  192. this.getProductAgainInfo(true);
  193. }else if(tabIndex==1){
  194. console.log('tabindex11111')
  195. getcombinationProduct(true);
  196. }
  197. }
  198. },
  199. setScrollHeight() {
  200. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  201. this.windowHeight = windowHeight - 1;
  202. this.scrollHeight = windowHeight - 1;
  203. },
  204. getProductAgainInfo(loadMore) {
  205. this.showLoading = true;
  206. this.loadingNow = true;
  207. this.loadingText = '加载中';
  208. this.isShowEmpty = false;
  209. if(loadMore) {this.pageNum += 1;}
  210. let params = {clubUserId:this.clubUserId,pageNum:this.pageNum,pageSize:this.pageSize,searchWord:this.searchInputVal}
  211. getSellerProduct(params).then(response =>{
  212. this.isShowWrapper = true
  213. const responseData = response.data;
  214. if(responseData.results && responseData.results.length > 0){
  215. this.hasNextPage = responseData.hasNextPage;
  216. this.isShowEmpty = false;
  217. if(loadMore) {
  218. this.productList = [...this.productList,...responseData.results];
  219. } else {
  220. this.productList = [...responseData.results];
  221. this.showSkeleton = false;
  222. }
  223. //价格显示处理
  224. let isActFlg,newProductList=[];
  225. this.productList.map((item, index)=> {
  226. if(item.actStatus == 1){
  227. isActFlg = true
  228. }else if(item.actStatus == 1 && item.ladderPriceFlag == '1'){
  229. isActFlg = true
  230. }else{
  231. isActFlg = false
  232. }
  233. newProductList.push(Object.assign({},item,{isShowActFlg:isActFlg}))
  234. })
  235. this.productList = newProductList
  236. // 防上拉暴滑
  237. this.pullFlag = false;
  238. setTimeout(()=>{
  239. this.pullFlag = true;
  240. },500)
  241. // 底部提示文案
  242. if(this.hasNextPage) {
  243. this.loadingText = '上拉加载更多';
  244. } else {
  245. this.showLoading = true;
  246. this.loadingNow = false;
  247. }
  248. } else {
  249. this.isShowEmpty = true;
  250. this.isShowEmptyText ='暂无相关商品'
  251. }
  252. }).catch(error =>{
  253. this.$util.msg(error.msg,2000);
  254. })
  255. },
  256. searchOpertor(tabIndex){//搜索商品
  257. if(tabIndex == 0){
  258. if(this.searchInputVal == ''){
  259. this.$util.msg('请输入商品关键词',2000)
  260. }else{
  261. this.pageNum = 1
  262. this.showSkeleton = true;
  263. this.getProductAgainInfo();
  264. }
  265. }else{
  266. this.pageNum = 1
  267. this.showSkeleton = true;
  268. this.getcombinationProduct();
  269. }
  270. },
  271. getcombinationProduct(loadMore){//组合搜索商品
  272. this.showLoading = true;
  273. this.loadingNow = true;
  274. this.loadingText = '加载中';
  275. this.isShowEmpty = false;
  276. if(loadMore) {this.pageNum += 1;}
  277. let params = {clubUserId:this.clubUserId,pageNum:this.pageNum,pageSize:this.pageSize,searchWord:this.searchInputVal}
  278. getcombinationProduct(params).then(response =>{
  279. this.isShowWrapper = true
  280. const responseData = response.data;
  281. if(responseData.results && responseData.results.length > 0){
  282. this.hasNextPage = responseData.hasNextPage;
  283. this.isShowEmpty = false;
  284. if(loadMore) {
  285. this.combinationProduct = [...this.combinationProduct,...responseData.results];
  286. } else {
  287. this.combinationProduct = [...responseData.results];
  288. this.showSkeleton = false;
  289. }
  290. // 防上拉暴滑
  291. this.pullFlag = false;
  292. setTimeout(()=>{
  293. this.pullFlag = true;
  294. },500)
  295. // 底部提示文案
  296. if(this.hasNextPage) {
  297. this.loadingText = '上拉加载更多';
  298. } else {
  299. this.showLoading = true;
  300. this.loadingNow = false;
  301. }
  302. } else {
  303. this.isShowEmpty = true;
  304. this.isShowEmptyText ='暂无相关商品'
  305. }
  306. }).catch(error =>{
  307. this.$util.msg(error.msg,2000);
  308. })
  309. },
  310. changeCountAdd(item,pros){//商品数量加加
  311. if(pros.initProductNum == 0){
  312. pros.initProductNum = pros.minBuyNumber
  313. this.processActivityPrice(pros)
  314. }else if(pros.initProductNum >= pros.minBuyNumber){
  315. pros.initProductNum++
  316. this.processActivityPrice(pros)
  317. }
  318. this.totalPeice(item)
  319. this.totalCount(item)
  320. this.totalKind(item)
  321. },
  322. changeCountSub(item,pros){//商品数量减减
  323. if(pros.initProductNum==0){
  324. this.$util.msg(`采购数量不能小于0`,2000);
  325. return
  326. }else if(pros.initProductNum == pros.minBuyNumber){
  327. pros.initProductNum = 0;
  328. this.processActivityPrice(pros);
  329. }else{
  330. pros.initProductNum--
  331. this.processActivityPrice(pros)
  332. }
  333. this.totalPeice(item)
  334. this.totalCount(item)
  335. this.totalKind(item)
  336. },
  337. changeNnmber(e,item,pros){//输入商品数量更新
  338. let _value = e.detail.value;
  339. if(!this.$api.isNumber(_value)){
  340. pros.initProductNum = pros.minBuyNumber
  341. }else if(_value < pros.minBuyNumber){
  342. this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
  343. pros.initProductNum = pros.minBuyNumber
  344. }else{
  345. pros.initProductNum = e.detail.value
  346. this.processActivityPrice(pros)
  347. }
  348. this.totalPeice(item)
  349. this.totalCount(item)
  350. this.totalKind(item)
  351. },
  352. totalPeice(item){ //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
  353. let prosPrice=0;
  354. let productsList =[];
  355. productsList=item.combinationProductList;
  356. productsList.forEach(pros=>{
  357. prosPrice+=pros.retailPrice*pros.initProductNum;
  358. item.productTotalAmount = prosPrice;
  359. })
  360. // console.log(prosPrice)
  361. },
  362. totalCount(item){//计算总数量
  363. let prosAllCount=0
  364. let productsList =[];
  365. productsList = item.combinationProductList
  366. productsList.forEach(pros=>{
  367. prosAllCount+=parseInt(pros.initProductNum);
  368. item.productTotalNum = prosAllCount
  369. })
  370. // console.log(prosAllCount)
  371. },
  372. totalKind(item){//计算商品种类
  373. let productsList =[];
  374. let checkList = [];
  375. productsList=item.combinationProductList;
  376. productsList.forEach(pros=>{
  377. if(pros.initProductNum>0){
  378. checkList.push(pros)
  379. item.productKind = checkList.length;
  380. }else{
  381. item.productKind = checkList.length;
  382. }
  383. })
  384. },
  385. processActivityPrice(pros){//单独处理活动价格和阶梯价格
  386. let ladderPriceList = pros.ladderPriceList;
  387. if(pros.ladderPriceFlag == '0' || pros.actStatus == 1){
  388. pros.totalPrice = pros.initProductNum*pros.retailPrice
  389. }else{
  390. ladderPriceList.forEach((item,index)=>{
  391. if(pros.initProductNum>=item.buyNum){
  392. pros.retailPrice = item.buyPrice
  393. pros.totalPrice = pros.initProductNum*item.buyPrice
  394. }
  395. })
  396. }
  397. },
  398. operationHanld(prop){
  399. this.$emit('operationConfim',prop);
  400. },
  401. alertjieti(pros){
  402. this.$emit('alertjietiConfim',pros);
  403. },
  404. changeTab(index){
  405. this.tabIndex = index;
  406. if(index == 0){
  407. this.loadingNow = false;
  408. }
  409. this.$emit('changetab',index);
  410. },
  411. navToDetailPage(id) {
  412. this.isModallayer = true;
  413. this.$api.navigateTo(`/pages/goods/product?id=${id}`);
  414. this.isModallayer = false;
  415. },
  416. toCartPage() {
  417. this.$emit('goCartPage')
  418. },
  419. repurchModel(){
  420. this.$util.modal('','此商品的价格有变化,原来的购买价已不适用','知道了','',false,() =>{})
  421. },
  422. onShowClose () {//输入框失去焦点时触发
  423. if(this.searchInputVal != ''){
  424. this.isShowClose = true
  425. }else{
  426. this.isShowClose = false
  427. }
  428. },
  429. delInputText(){//清除输入框内容
  430. this.searchInputVal = ''
  431. this.isShowClose = false
  432. }
  433. }
  434. }
  435. </script>
  436. <style lang="scss">
  437. .all-zuhe-list{
  438. background: #FFFFFF;
  439. }
  440. .foot_conten{
  441. width: 100%;
  442. background: #fff;
  443. font-size: 28rpx;
  444. text-align: center;
  445. height: 120rpx;
  446. line-height: 120rpx;
  447. display: inherit;
  448. margin-bottom: 20rpx;
  449. }
  450. .zuhe_foot-box{
  451. float: left;
  452. margin-left: 40rpx;
  453. }
  454. .zuhe_foot-box text{
  455. margin-right: 30rpx;
  456. }
  457. .foot_conten .buycart{
  458. width: 162rpx;
  459. height: 64rpx;
  460. background: #EFAF00 !important;
  461. color: #fff;
  462. font-size: 28rpx;
  463. border-radius: 36rpx;
  464. text-align: center;
  465. line-height: 64rpx;
  466. bottom: -25rpx;
  467. margin-right: 30rpx
  468. }
  469. .price-none{
  470. font-size: 24rpx;
  471. color: #666666;
  472. }
  473. .zuhe_title{
  474. background:#FFFFFF;
  475. height: 76rpx;
  476. font-size: 28rpx;
  477. color: #1675E1;
  478. border-bottom: 4rpx solid #1675E1 ;
  479. line-height: 76rpx;
  480. padding-left: 30rpx;
  481. &.active{
  482. color: #E15616;
  483. border-bottom: 4rpx solid #E15616;
  484. }
  485. }
  486. .icon-gou{
  487. color: #E15616;
  488. position: absolute;
  489. top: 22rpx;
  490. right: 0rpx;
  491. font-weight: bold
  492. }
  493. .addstyle{
  494. background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
  495. color: #FFFFFF;
  496. }
  497. .tabstyle{
  498. width: 128rpx;
  499. height: 64rpx;
  500. font-size: 26rpx;
  501. display: inline-block;
  502. border-radius: 10rpx;
  503. text-align: center;
  504. line-height: 64rpx;
  505. border: 2rpx solid #EEEEEE;
  506. position: relative;
  507. margin-right: 12rpx;
  508. }
  509. .commodity-list-wrapper {
  510. scroll-view {
  511. height: 100%;
  512. }
  513. .show-more-btn {
  514. width: 276rpx;
  515. height: 52rpx;
  516. line-height: 52rpx;
  517. border: 2rpx solid #D8D8D8;
  518. background: #F7F7F7;
  519. font-size: 26rpx;
  520. margin: 26rpx 0;
  521. position: absolute;
  522. left: 50%;
  523. margin-left: -138rpx;
  524. }
  525. }
  526. .good-search{
  527. height: 64rpx;
  528. width: 702rpx;
  529. padding: 24rpx;
  530. background: #FFFFFF;
  531. display: flex;
  532. align-items: center;
  533. margin-bottom: 20rpx;
  534. position: fixed;
  535. top: 0;
  536. left: 0;
  537. z-index: 999;
  538. .search-from{
  539. width: 326rpx;
  540. height: 64rpx;
  541. background: #F7F7F7;
  542. border-radius: 14rpx;
  543. float: left;
  544. position: relative;
  545. .input{
  546. // width: 500rpx;
  547. height: 64rpx;
  548. float: left;
  549. line-height: 64rpx;
  550. color: $text-color;
  551. font-size: $font-size-24;
  552. }
  553. .icon-iconfonticonfontsousuo1{
  554. width: 64rpx;
  555. height: 64rpx;
  556. line-height: 64rpx;
  557. text-align: center;
  558. display: block;
  559. font-size: $font-size-38;
  560. float: left;
  561. color: #999999;
  562. }
  563. .icon-shanchu1{
  564. font-size: $font-size-32;
  565. color: #999999;
  566. position: absolute;
  567. width: 64rpx;
  568. height: 64rpx;
  569. line-height: 64rpx;
  570. top: 0;
  571. right: 0;
  572. text-align: center;
  573. z-index: 10;
  574. }
  575. }
  576. .search-btn{
  577. // width: 120rpx;
  578. line-height: 64rpx;
  579. text-align: center;
  580. font-size: $font-size-28;
  581. color: $color-system;
  582. float: left;
  583. background: #FFFFFF;
  584. margin-left: 10rpx;
  585. }
  586. }
  587. .all-type-list-content {
  588. height: 240rpx;
  589. padding: 24rpx;
  590. background: #fff;
  591. margin-bottom: 2rpx;
  592. display: flex;
  593. flex-direction: row;
  594. box-sizing: content-box;
  595. .list-img {
  596. width: 240rpx;
  597. height: 240rpx !important;
  598. margin-right: 26rpx;
  599. border-radius: 10rpx;
  600. border: 2rpx solid #f3f3f3;
  601. }
  602. }
  603. .zuhe-list-content{
  604. width: 655rpx;
  605. // height: 214rpx;
  606. background: #fff;
  607. border: 2rpx solid #DEF4FF;
  608. display: flex;
  609. flex-direction: row;
  610. box-sizing: content-box;
  611. margin-top: 10rpx;
  612. border-radius: 14rpx;
  613. margin: 10rpx auto;
  614. padding: 20rpx;
  615. &.stylecontent{
  616. border: 2rpx solid #FFF0DE;
  617. }
  618. }
  619. .list-details-info {
  620. width: 100%;
  621. flex-direction: column;
  622. font-size: 26rpx;
  623. position: relative;
  624. .list-details-title {
  625. line-height: 38rpx;
  626. text-overflow: ellipsis;
  627. overflow: hidden;
  628. display: -webkit-box;
  629. -webkit-line-clamp: 2;
  630. line-clamp: 2;
  631. -webkit-box-orient: vertical;
  632. }
  633. .list-details-specs {
  634. width: 100%;
  635. display: inline-block;
  636. margin-top: 8rpx;
  637. color: #666666;
  638. }
  639. .list-details-miniQuantity {
  640. width: 100%;
  641. display: inline-block;
  642. margin-top: 7rpx;
  643. }
  644. }
  645. .list-details-price {
  646. width: 100%;
  647. display: flex;
  648. flex-direction: row;
  649. justify-content: space-between;
  650. .price-icon {
  651. width: 22rpx;
  652. height: 28rpx;
  653. vertical-align: middle;
  654. margin-right: 10rpx;
  655. }
  656. .price-icon + text {
  657. font-size: 25rpx;
  658. vertical-align: middle;
  659. }
  660. .list-login-now {
  661. width: 375rpx;
  662. color: #F8C499;
  663. position: absolute;
  664. bottom: 0;
  665. .p-no{
  666. float: left;
  667. font-size: $font-size-24;
  668. color: $color-system;
  669. margin-right: 10rpx;
  670. }
  671. }
  672. .login-now {
  673. padding: 10rpx 10rpx 10rpx 0;
  674. }
  675. .list-none{
  676. margin-top: 15rpx;
  677. .price-small{
  678. font-size:$font-size-24;
  679. line-height: 40rpx;
  680. color: #FF2A2A;
  681. }
  682. }
  683. .list-shop{
  684. width: 100%;
  685. height: auto;
  686. flex: 6;
  687. overflow: hidden;
  688. .list-price {
  689. // width: 100%;
  690. color: #FF2A2A;
  691. float: left;
  692. line-height:36rpx ;
  693. align-items: center;
  694. justify-content: center;
  695. .price-larger {
  696. margin-top: 20rpx;
  697. font-size: $font-size-30;
  698. display: inline-block;
  699. margin-right: 20rpx;
  700. }
  701. .zuhe_price-larger{
  702. color: #666666;
  703. float: left;
  704. }
  705. .price-two{
  706. color: #666666;
  707. float: right;
  708. }
  709. .zuhe_list_zj{
  710. color: #FF2A2A;
  711. }
  712. .price-view{
  713. display: inline-block;
  714. width: 40rpx;
  715. border-radius: 10rpx;
  716. font-size: $font-size-24;
  717. text-align: center;
  718. color: #FFFFFF;
  719. height: 36rpx;
  720. line-height: 36rpx;
  721. margin-right: 8rpx;
  722. &.ladder{
  723. background: linear-gradient(135deg,rgba(255,0,0,1) 0%,rgba(242,143,49,1) 100%);
  724. }
  725. &.activity{
  726. background: linear-gradient(135deg,rgba(128,0,255,1) 0%,rgba(242,49,153,1) 100%);
  727. }
  728. }
  729. }
  730. .zuhe_list_price .price-view{
  731. margin-left:10rpx;
  732. }
  733. .zuhe_list_price{
  734. width: 470rpx;
  735. overflow: hidden;
  736. }
  737. .count{
  738. margin-top: 10rpx;
  739. float: right;
  740. border: 1px solid #EEEEEE;
  741. border-radius: 10rpx;
  742. .number-box{
  743. display: flex;
  744. justify-content: center;
  745. align-items: center;
  746. .iconfont{
  747. font-size: $font-size-24;
  748. padding:0 16rpx;
  749. color: $text-color;
  750. text-align: center;
  751. line-height: 48rpx;
  752. font-weight: bold;
  753. }
  754. .btn-input{
  755. width: 48rpx;
  756. height: 48rpx;
  757. line-height: 48rpx;
  758. background: #F8F8F8;
  759. border-radius: 4rpx;
  760. text-align: center;
  761. font-size: $font-size-24;
  762. border-right: 1px solid #EEEEEE;
  763. border-left: 1px solid #EEEEEE;
  764. }
  765. }
  766. }
  767. .list-price-none{
  768. width: 100%;
  769. .price-none{
  770. text-decoration: line-through;
  771. color: #999999;
  772. display: inline-block;
  773. }
  774. .icon-wenhao{
  775. font-size: $font-size-32;
  776. color: #0091FF;
  777. margin-left: 6rpx;
  778. }
  779. }
  780. }
  781. .add-cart-btn {
  782. flex: 4;
  783. width: 156rpx;
  784. height: 64rpx;
  785. line-height: 64rpx;
  786. border-radius: 32rpx;
  787. color: #333333;
  788. font-size: 26rpx;
  789. margin-right: 0;
  790. // background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  791. background: #FFFFFF;
  792. border: 2rpx solid #C9C9C9;
  793. }
  794. .zuhe_btn{
  795. float: right;
  796. }
  797. }
  798. .zuhe_list_price{
  799. display: block !important;
  800. }
  801. .cart-icon {
  802. width: 92rpx;
  803. height: 92rpx;
  804. border-radius: 50%;
  805. background: rgba(255, 147, 0, 0.5);
  806. position: fixed;
  807. right: 24rpx;
  808. bottom: 37%;
  809. display: flex;
  810. align-items: center;
  811. justify-content: center;
  812. cursor: pointer;
  813. image {
  814. width: 58rpx;
  815. height: 58rpx;
  816. }
  817. text {
  818. font-size: 28rpx;
  819. position: absolute;
  820. top: -10rpx;
  821. right: 0;
  822. }
  823. }
  824. .zuhe_list_text{
  825. margin-top: 20rpx;
  826. }
  827. </style>