collection.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982
  1. <template>
  2. <view class="container product clearfix">
  3. <view class="superv-header" v-if="!isEmpty">
  4. <view class="superv-header-click">
  5. <view class="oltext"
  6. >共<text class="red">{{ totalRecord }}</text
  7. >件商品</view
  8. >
  9. <view class="ortext" @click="showPopup(0)" v-if="!popupShow">编辑</view>
  10. <view class="ortext" @click="hidePopup(0)" v-else>完成</view>
  11. </view>
  12. </view>
  13. <view class="product-content" :style="{ paddingBottom: popupShow ? '68rpx' : '0' }">
  14. <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
  15. <!-- 空白页 -->
  16. <view class="empty-container" v-if="isEmpty">
  17. <image
  18. class="empty-container-image"
  19. :src="StaticUrl + '/icon/icon-collection-empty@2x.png'"
  20. ></image>
  21. <text class="error-text">暂无收藏商品~</text>
  22. </view>
  23. <!-- 列表 -->
  24. <view class="tui-cart-cell tui-mtop" v-for="(pros, index) in productList" :key="index">
  25. <view class="tui-goods-item">
  26. <view class="tui-goods-main">
  27. <view class="tui-goods-checkBox" v-if="popupShow">
  28. <view
  29. class="checkbox iconfont"
  30. :class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
  31. @click="checkedSoperv(pros)"
  32. >
  33. </view>
  34. </view>
  35. <view class="tui-goods-image" @click.stop="navToDetailPage(pros.productId)"
  36. >
  37. <image :src="pros.image" class="tui-goods-img" />
  38. <view class="tui-goods-type" v-if="pros.productType == 2">医疗器械</view>
  39. </view>
  40. <view
  41. class="tui-goods-info"
  42. :style="{ width: popupShow ? '420rpx' : '528rpx' }"
  43. @click.stop="navToDetailPage(pros.productId)"
  44. >
  45. <text class="list-details-title">{{ pros.name }}</text>
  46. <text class="list-details-specs">规格:{{ pros.unit != null ? pros.unit : '' }}</text>
  47. <template v-if="userIdentity == 4 && vipFlag != 1">
  48. <view class="list-details-price" v-if="pros.priceFlag == 1">
  49. <view class="list-none"><view class="price-small">¥未公开价格</view></view>
  50. </view>
  51. <view class="list-details-price" v-else-if="pros.priceFlag == 2">
  52. <view class="list-none"><view class="price-small">¥价格仅会员可见</view></view>
  53. </view>
  54. <view class="list-details-price" v-else-if="pros.priceFlag == 3">
  55. <view class="list-none"><view class="price-small">¥仅医美机构可见</view></view>
  56. </view>
  57. <template v-else>
  58. <view class="list-details-price">
  59. <view class="list-price">
  60. <text
  61. class="price-larger"
  62. :class="PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''"
  63. >
  64. ¥{{
  65. (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
  66. ? pros.originalPrice
  67. : pros.price) | NumFormat
  68. }}
  69. </text>
  70. </view>
  71. <view class="add-cart-btn" v-if="!popupShow" @click.stop="showPopup(1, pros)"
  72. >数量</view
  73. >
  74. </view>
  75. <view class="list-details-price none">
  76. <view class="floor-item-act">
  77. <view class="coupon-tags" v-if="item.product.couponsLogo">优惠券</view>
  78. <template v-if="pros.actStatus == 1">
  79. <view
  80. class="floor-tags"
  81. v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
  82. >
  83. {{ pros.promotions.name }}
  84. <text>:¥{{ pros.price | NumFormat }}</text>
  85. </view>
  86. <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
  87. </template>
  88. <template v-if="pros.svipProductFlag == 1">
  89. <view class="svip-tags">
  90. <view class="tags" :class="{ none: vipFlag == 0 }">SVIP</view>
  91. <view class="price" v-if="isShowVipFlag(pros)">{{
  92. pros.svipPriceTag
  93. }}</view>
  94. </view>
  95. </template>
  96. </view>
  97. </view>
  98. </template>
  99. </template>
  100. <template v-else>
  101. <view class="list-details-price" v-if="pros.priceFlag == 1">
  102. <view class="list-none"><view class="price-small">¥未公开价格</view></view>
  103. </view>
  104. <view class="list-details-price" v-else-if="pros.priceFlag == 3 && (firstClubType!=1)">
  105. <view class="list-none"><view class="price-small">¥仅医美机构可见</view></view>
  106. </view>
  107. <template v-else>
  108. <view class="list-details-price">
  109. <view class="list-price">
  110. <text
  111. class="price-larger"
  112. :class="PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1 ? 'none' : ''"
  113. >
  114. ¥{{
  115. (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
  116. ? pros.originalPrice
  117. : pros.price) | NumFormat
  118. }}
  119. </text>
  120. </view>
  121. <view class="add-cart-btn" v-if="!popupShow" @click.stop="showPopup(1, pros)"
  122. >数量</view
  123. >
  124. </view>
  125. <view class="list-details-price none">
  126. <view class="floor-item-act">
  127. <template v-if="pros.actStatus == 1">
  128. <view
  129. class="floor-tags"
  130. v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
  131. >
  132. {{ pros.promotions.name }}
  133. <text v-if="hasLogin && userIdentity == 2 && pros.priceFlag != 1"
  134. >:¥{{ pros.price | NumFormat }}</text
  135. >
  136. </view>
  137. <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
  138. </template>
  139. <template v-if="pros.svipProductFlag == 1">
  140. <view class="svip-tags">
  141. <view class="tags" :class="{ none: !isShowVipFlag(pros) }">SVIP</view>
  142. <view class="price" v-if="isShowVipFlag(pros)">{{
  143. pros.svipPriceTag
  144. }}</view>
  145. </view>
  146. </template>
  147. </view>
  148. </view>
  149. </template>
  150. </template>
  151. </view>
  152. </view>
  153. </view>
  154. </view>
  155. <!--加载loadding-->
  156. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  157. <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
  158. <!--加载loadding-->
  159. </view>
  160. </view>
  161. <!-- 取消收藏操作 -->
  162. <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
  163. <view class="tui-popup-box clearfix">
  164. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
  165. <view class="tui-flex-1">
  166. <view class="superv-header-checked">
  167. <view class="oltext" @click="isCheckedAll">
  168. <view
  169. class="checkbox iconfont"
  170. :class="[isAllChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
  171. ></view>
  172. <view class="text">全选</view>
  173. </view>
  174. </view>
  175. <view class="tui-button" :class="isProductChecked ? 'active' : ''" @click="handleAllUnder"
  176. >取消收藏</view
  177. >
  178. </view>
  179. </view>
  180. </view>
  181. </tui-bottom-popup>
  182. <!-- 选择规格弹窗 -->
  183. <cm-unit-popup v-if="popupShow1" :popupShow="popupShow1" :skuProduct="handleData" @skuClick="handleSkuClick"></cm-unit-popup>
  184. <!-- 弹窗提示 -->
  185. <tui-modal
  186. :show="modal"
  187. @click="handleClick"
  188. @cancel="hideMobel"
  189. :content="contentModalText"
  190. :button="modalButton"
  191. color="#333"
  192. :size="32"
  193. shape="circle"
  194. :maskClosable="false"
  195. >
  196. </tui-modal>
  197. <!-- 可拖动悬浮按钮 -->
  198. <cm-drag
  199. :cartNum="cartQuantity"
  200. :isDock="true"
  201. :existTabBar="true"
  202. @btnClick="btnClick"
  203. @btnTouchstart="btnTouchstart"
  204. @btnTouchend="btnTouchend"
  205. >
  206. </cm-drag>
  207. </view>
  208. </template>
  209. <script>
  210. import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
  211. import tuiNomore from '@/components/tui-components/nomore/nomore'
  212. import cmDrag from '@/components/cm-custom/cm-drag.vue'
  213. import cmUnitPopup from '@/components/cm-module/productDetails/cm-unit-popup.vue'
  214. import { mapState, mapMutations } from 'vuex'
  215. const defaultListQuery = {
  216. userId: 0,
  217. pageNum: 1,
  218. pageSize: 10
  219. }
  220. export default {
  221. components: {
  222. tuiLoadmore,
  223. tuiNomore,
  224. cmDrag,
  225. cmUnitPopup
  226. },
  227. data() {
  228. return {
  229. StaticUrl: this.$Static,
  230. isIphoneX: this.$store.state.isIphoneX,
  231. modalButton: [
  232. {
  233. text: '取消',
  234. type: 'gray',
  235. plain: true //是否空心
  236. },
  237. {
  238. text: '确认',
  239. customStyle: {
  240. color: '#fff',
  241. bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
  242. },
  243. plain: false
  244. }
  245. ],
  246. totalRecord: 0,
  247. cartQuantity: 0,
  248. popupShow: false,
  249. popupShow1: false,
  250. isProductChecked: false,
  251. listQuery: Object.assign({}, defaultListQuery),
  252. productList: [],
  253. handleData: {},
  254. scrollTop: 0,
  255. isEmpty: false,
  256. isAllChecked: false,
  257. loadding: false,
  258. pullUpOn: true,
  259. pullFlag: true,
  260. hasNextPage: false,
  261. navbarHeight: '',
  262. nomoreText: '上拉显示更多',
  263. contentModalText: '', //操作文字提示语句
  264. modal: false,
  265. vipFlag:0,
  266. userIdentity:0,
  267. firstClubType:0
  268. }
  269. },
  270. onLoad() {
  271. this.initGetStotage()
  272. },
  273. filters: {
  274. NumFormat: function(value) {
  275. //处理金额
  276. if (!value) return '0.00'
  277. let number = Number(value).toFixed(2)
  278. return number
  279. }
  280. },
  281. computed: {
  282. ...mapState(['hasLogin', 'userInfo','clubType'])
  283. },
  284. methods: {
  285. ...mapMutations(['login', 'logout']),
  286. async initGetStotage() {
  287. const userInfo = await this.$api.getStorage()
  288. this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
  289. this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
  290. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  291. this.firstClubType = this.clubType
  292. this.GetProductListInfo()
  293. this.ProductCartNumber()
  294. },
  295. GetProductListInfo() {
  296. this.productList = []
  297. this.listQuery.pageNum = 1
  298. this.ProductService.getProductUserLikeList(this.listQuery)
  299. .then(response => {
  300. let data = response.data
  301. if (data.results && data.results.length > 0) {
  302. this.isEmpty = false
  303. this.hasNextPage = data.hasNextPage
  304. this.totalRecord = data.totalRecord
  305. this.productList = data.results
  306. this.pullFlag = false
  307. setTimeout(() => {
  308. this.pullFlag = true
  309. }, 500)
  310. if (this.hasNextPage) {
  311. this.pullUpOn = false
  312. this.nomoreText = '上拉显示更多'
  313. } else {
  314. if (this.productList.length < 8) {
  315. this.pullUpOn = true
  316. } else {
  317. this.pullUpOn = false
  318. this.loadding = false
  319. this.nomoreText = '已至底部'
  320. }
  321. }
  322. } else {
  323. this.isEmpty = true
  324. }
  325. this.isRequest = true
  326. })
  327. .catch(error => {
  328. this.$util.msg(error.msg, 2000)
  329. })
  330. },
  331. GetOnReachBottomData(index) {
  332. //上拉加载
  333. this.listQuery.pageNum += 1
  334. this.ProductService.getProductUserLikeList(this.listQuery)
  335. .then(response => {
  336. let data = response.data
  337. if (data.results && data.results.length > 0) {
  338. this.hasNextPage = data.hasNextPage
  339. this.productList = this.productList.concat(data.results)
  340. this.pullFlag = false // 防上拉暴滑
  341. setTimeout(() => {
  342. this.pullFlag = true
  343. }, 500)
  344. if (this.hasNextPage) {
  345. this.pullUpOn = false
  346. this.nomoreText = '上拉显示更多'
  347. } else {
  348. this.pullUpOn = false
  349. this.loadding = false
  350. this.nomoreText = '已至底部'
  351. }
  352. }
  353. })
  354. .catch(error => {
  355. this.$util.msg(error.msg, 2000)
  356. })
  357. },
  358. handleSkuClick(sku){
  359. this.handleData.price = sku.price
  360. },
  361. ProductCartNumber() {
  362. // 获取用户购物车储量
  363. this.ProductService.ProductCartNumber({
  364. userId: this.listQuery.userId
  365. })
  366. .then(response => {
  367. this.cartQuantity = response.data
  368. })
  369. .catch(error => {
  370. console.log('获取购物车数量失败')
  371. })
  372. },
  373. handleAllUnder() {
  374. //批量下架操作
  375. let checkedArray = []
  376. this.productIds = ''
  377. if (this.isProductChecked) {
  378. this.productList.forEach(el => {
  379. if (el.isChecked) {
  380. checkedArray.push(el)
  381. }
  382. })
  383. checkedArray.forEach(el => {
  384. this.productIds += el.productId + ','
  385. })
  386. this.modal = true
  387. this.contentModalText = '确定要取消收藏吗?'
  388. }
  389. },
  390. handleClick(e) {
  391. //取消收藏
  392. if (e.index == 1) {
  393. this.handleDeleteUserLike()
  394. }
  395. this.modal = false
  396. },
  397. handleDeleteUserLike() {
  398. //操作取消收藏
  399. this.ProductService.getDeleteUserLike({
  400. productIds: this.productIds,
  401. userId: this.listQuery.userId
  402. })
  403. .then(response => {
  404. this.$util.msg('取消收藏成功', 2000, true, 'success')
  405. setTimeout(() => {
  406. this.GetProductListInfo()
  407. }, 2000)
  408. })
  409. .catch(error => {
  410. this.$util.msg(error.msg, 2000)
  411. })
  412. },
  413. hideMobel() {
  414. this.modal = false
  415. },
  416. updateCheckAllBtn() {
  417. //勾选单个判断全选
  418. let goodsCheckedLength = 0
  419. this.productList.forEach(item => {
  420. if (item.isChecked) {
  421. goodsCheckedLength++
  422. }
  423. })
  424. this.isAllChecked = goodsCheckedLength === this.productList.length
  425. if (goodsCheckedLength > 0) {
  426. this.isProductChecked = true
  427. } else {
  428. this.isProductChecked = false
  429. }
  430. },
  431. updateBothCheckBtn() {
  432. //全选勾选判断
  433. this.productList.forEach(item => {
  434. item.isChecked = this.isAllChecked
  435. })
  436. },
  437. isCheckedAll() {
  438. //全选
  439. this.isAllChecked = !this.isAllChecked
  440. if (this.isAllChecked) {
  441. this.isProductChecked = true
  442. } else {
  443. this.isProductChecked = false
  444. }
  445. this.updateBothCheckBtn()
  446. },
  447. checkedSoperv(item) {
  448. //选择
  449. item.isChecked = !item.isChecked
  450. console.log(item)
  451. this.updateCheckAllBtn()
  452. },
  453. PromotionsFormat(promo) {
  454. //促销活动类型数据处理
  455. if (promo != null) {
  456. if (promo.type == 1 && promo.mode == 1) {
  457. return true
  458. } else {
  459. return false
  460. }
  461. }
  462. return false
  463. },
  464. showPopup(index, pros) {
  465. // 弹窗显示
  466. switch (index) {
  467. case 0:
  468. this.popupShow = true
  469. break
  470. case 1:
  471. this.popupShow1 = true
  472. this.handleData = pros
  473. break
  474. }
  475. },
  476. hidePopup(index) {
  477. // 弹窗隐藏
  478. switch (index) {
  479. case 0:
  480. this.popupShow = false
  481. break
  482. case 1:
  483. this.popupShow1 = false
  484. break
  485. }
  486. },
  487. isShowVipFlag(pros) {
  488. /**
  489. *显示SVIP和超级会员价格:
  490. * 个人机构(不是超级会员,但价格所有机构可见),
  491. * 资质机构(不是超级会员,但价格所有机构可见或仅会员可见),
  492. * 超级会员(价格所有机构可见或仅会员可见),超级会员(是医美机构,价格仅医美可见)
  493. *商品价格是否可见:priceFlag 0:所有机构可见 1:未公开价格 2:仅会员可见 3:仅医美机构可见
  494. * 普通机构
  495. * 超级会员 && priceFlag === 0
  496. * 资质机构
  497. * priceFlag !== 1 ||
  498. * 超级会员
  499. * 商品priceFlag === 3 && 是否是医美机构
  500. */
  501. // 未登录 || 非会员
  502. if(!this.hasLogin || !this.vipFlag === 1) return false
  503. // 商品所有机构可见
  504. if(pros.priceFlag === 0 ) return true
  505. // 商品价格仅资质机构可见
  506. if(pros.priceFlag === 2 && this.userIdentity === 2) return true
  507. // 商品价格仅医美机构可见
  508. if(pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
  509. // 其它
  510. return false
  511. },
  512. navToDetailPage(id) {
  513. this.isModallayer = true
  514. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  515. this.isModallayer = false
  516. },
  517. btnClick() {
  518. this.$api.switchTabTo('/pages/tabBar/cart/index')
  519. },
  520. btnTouchstart() {
  521. // console.log('btnTouchstart');
  522. },
  523. btnTouchend() {
  524. // console.log('btnTouchend');
  525. }
  526. },
  527. onPageScroll(e) {
  528. //实时获取到滚动的值
  529. },
  530. onReachBottom() {
  531. if (this.hasNextPage) {
  532. this.loadding = true
  533. this.pullUpOn = true
  534. this.GetOnReachBottomData()
  535. }
  536. },
  537. onPullDownRefresh() {
  538. setTimeout(() => {
  539. this.listQuery.pageNum = 1
  540. uni.stopPullDownRefresh()
  541. }, 200)
  542. },
  543. onShow() {}
  544. }
  545. </script>
  546. <style lang="scss">
  547. @import '@/uni.scss';
  548. page {
  549. background: #fff;
  550. }
  551. .empty-container {
  552. z-index: 9999;
  553. }
  554. .superv-header {
  555. width: 100%;
  556. height: 80rpx;
  557. background-color: #f7f7f7;
  558. line-height: 80rpx;
  559. position: fixed;
  560. top: 0;
  561. left: 0;
  562. box-sizing: border-box;
  563. padding: 0 24rpx;
  564. z-index: 99;
  565. .superv-header-click {
  566. width: 100%;
  567. height: 80rpx;
  568. font-size: $font-size-30;
  569. .oltext {
  570. float: left;
  571. color: #666666;
  572. .red {
  573. color: $color-system;
  574. }
  575. }
  576. .ortext {
  577. float: right;
  578. color: #333333;
  579. text-align: right;
  580. }
  581. }
  582. }
  583. .tui-header {
  584. width: 100%;
  585. font-size: 16px;
  586. font-weight: 500;
  587. height: 32px;
  588. display: flex;
  589. align-items: center;
  590. justify-content: center;
  591. position: relative;
  592. padding: 0 40rpx;
  593. }
  594. .header-sit {
  595. width: 100%;
  596. box-sizing: border-box;
  597. height: 80rpx;
  598. line-height: 80rpx;
  599. box-sizing: border-box;
  600. padding: 0 40rpx;
  601. text-align: left;
  602. font-size: $font-size-40;
  603. color: #ffffff;
  604. font-weight: 600;
  605. font-family: '正楷';
  606. margin-top: 30rpx;
  607. .iconfont {
  608. font-size: 42rpx;
  609. margin-left: 30rpx;
  610. }
  611. }
  612. .mine {
  613. width: 100%;
  614. height: 100%;
  615. position: relative;
  616. }
  617. .product-content {
  618. width: 100%;
  619. height: auto;
  620. position: relative;
  621. padding: 0;
  622. padding-top: 80rpx;
  623. box-sizing: border-box;
  624. .empty-container-image {
  625. width: 260rpx;
  626. height: 260rpx;
  627. margin-top: -300rpx;
  628. }
  629. }
  630. .tui-goods-item {
  631. padding: 30rpx 20rpx 0 20rpx;
  632. box-sizing: border-box;
  633. position: relative;
  634. .tui-goods-main {
  635. display: flex;
  636. width: 100%;
  637. height: 100%;
  638. border-bottom: 1px solid #ebebeb;
  639. padding-bottom: 24rpx;
  640. }
  641. }
  642. .tui-goods-checkBox {
  643. display: flex;
  644. align-items: center;
  645. margin: 0 15rpx;
  646. .checkbox {
  647. display: flex;
  648. margin: 0;
  649. padding: 0;
  650. display: flex;
  651. flex-direction: column;
  652. align-items: center;
  653. box-sizing: border-box;
  654. text-align: center;
  655. text-decoration: none;
  656. border-radius: 0;
  657. -webkit-tap-highlight-color: transparent;
  658. overflow: hidden;
  659. background-color: #ffffff;
  660. font-size: 36rpx;
  661. color: $color-system;
  662. }
  663. .text {
  664. font-size: $font-size-24;
  665. margin-left: 10rpx;
  666. }
  667. }
  668. .tui-goods-image {
  669. width: 180rpx;
  670. height: 180rpx !important;
  671. border: 2rpx solid #f3f3f3;
  672. border-radius: 12rpx;
  673. position: relative;
  674. border: 2rpx solid #f3f3f3;
  675. .tui-goods-img {
  676. width: 180rpx;
  677. height: 180rpx !important;
  678. border-radius: 12rpx;
  679. flex-shrink: 0;
  680. display: block;
  681. }
  682. .tui-goods-type{
  683. width: 64rpx;
  684. height: 64rpx;
  685. text-align: justify;
  686. box-sizing: border-box;
  687. padding: 10rpx;
  688. border-radius: 0 0 8rpx 8rpx;
  689. background-color: #33CCBF;
  690. font-size: $font-size-22;
  691. color: #FFFFFF;
  692. line-height: 25rpx;
  693. position: absolute;
  694. top: 0;
  695. right: 10rpx;
  696. }
  697. }
  698. .tui-goods-info {
  699. padding-left: 20rpx;
  700. box-sizing: border-box;
  701. position: relative;
  702. .list-details-title {
  703. line-height: 38rpx;
  704. text-overflow: ellipsis;
  705. overflow: hidden;
  706. display: -webkit-box;
  707. -webkit-line-clamp: 2;
  708. line-clamp: 2;
  709. -webkit-box-orient: vertical;
  710. font-size: 26rpx;
  711. color: #333333;
  712. }
  713. .list-details-specs {
  714. width: 100%;
  715. display: inline-block;
  716. margin-top: 8rpx;
  717. color: #999999;
  718. font-size: 24rpx;
  719. }
  720. .list-details-price {
  721. width: 100%;
  722. line-height: 54rpx;
  723. float: left;
  724. &.none {
  725. height: 32rpx;
  726. line-height: 32rpx;
  727. }
  728. .floor-item-act {
  729. height: 54rpx;
  730. text-align: center;
  731. box-sizing: border-box;
  732. float: left;
  733. }
  734. .price-icon {
  735. width: 22rpx;
  736. height: 28rpx;
  737. vertical-align: middle;
  738. margin-right: 10rpx;
  739. }
  740. .price-icon + text {
  741. font-size: 25rpx;
  742. vertical-align: middle;
  743. }
  744. .list-login-now {
  745. width: 375rpx;
  746. color: #f8c499;
  747. position: absolute;
  748. bottom: 0;
  749. .p-no {
  750. float: left;
  751. font-size: $font-size-24;
  752. color: $color-system;
  753. margin-right: 10rpx;
  754. }
  755. }
  756. .login-now {
  757. padding: 10rpx 10rpx 10rpx 0;
  758. }
  759. .list-none {
  760. margin-top: 20rpx;
  761. .price-small {
  762. font-size: $font-size-26;
  763. line-height: 40rpx;
  764. color: #ff2a2a;
  765. }
  766. }
  767. .list-price {
  768. color: #ff2a2a;
  769. float: left;
  770. line-height: 54rpx;
  771. align-items: center;
  772. justify-content: center;
  773. .price-larger {
  774. font-size: $font-size-30;
  775. display: inline-block;
  776. &.none {
  777. text-decoration: line-through;
  778. color: #999999;
  779. }
  780. }
  781. }
  782. .add-cart-btn {
  783. float: right;
  784. width: 140rpx;
  785. height: 54rpx;
  786. line-height: 54rpx;
  787. border-radius: 30rpx;
  788. color: #fff;
  789. font-size: 24rpx;
  790. margin-right: 0;
  791. background: #ffffff;
  792. border: 1px solid #c9c9c9;
  793. color: $text-color;
  794. text-align: center;
  795. }
  796. }
  797. }
  798. .tui-popup-box {
  799. position: relative;
  800. box-sizing: border-box;
  801. min-height: 168rpx;
  802. padding: 6rpx 24rpx;
  803. .tui-popup-content {
  804. padding-top: 30rpx;
  805. }
  806. }
  807. .layer-smimg {
  808. width: 114rpx;
  809. height: 114rpx;
  810. float: left;
  811. border-radius: 10rpx;
  812. margin-right: 24rpx;
  813. image {
  814. width: 114rpx;
  815. height: 114rpx;
  816. border-radius: 10rpx;
  817. }
  818. }
  819. .layer-nunbox {
  820. justify-content: space-between;
  821. align-items: center;
  822. width: 536rpx;
  823. height: 88rpx;
  824. padding: 13rpx 0 0 0;
  825. float: left;
  826. .layer-nunbox-t {
  827. width: 100%;
  828. height: 44rpx;
  829. position: relative;
  830. display: flex;
  831. .layer-nunbox-text {
  832. line-height: 44rpx;
  833. font-size: $font-size-28;
  834. }
  835. .number-box {
  836. display: flex;
  837. justify-content: center;
  838. align-items: center;
  839. border: 2rpx solid #ffe6dc;
  840. border-radius: 30rpx;
  841. height: 48rpx;
  842. margin-left: 20rpx;
  843. .iconfont {
  844. font-size: $font-size-24;
  845. padding: 0 18rpx;
  846. color: #999999;
  847. text-align: center;
  848. line-height: 48rpx;
  849. font-weight: bold;
  850. background: #fef6f3;
  851. &.icon-jianhao {
  852. border-radius: 30rpx 0 0 30rpx;
  853. }
  854. &.icon-jiahao {
  855. border-radius: 0 30rpx 30rpx 0;
  856. }
  857. }
  858. .btn-input {
  859. width: 62rpx;
  860. height: 48rpx;
  861. line-height: 48rpx;
  862. background: #ffffff;
  863. border-radius: 4rpx;
  864. text-align: center;
  865. font-size: $font-size-28;
  866. }
  867. }
  868. .product-step {
  869. position: absolute;
  870. left: 45rpx;
  871. bottom: 0;
  872. height: 44rpx;
  873. background: #ffffff;
  874. }
  875. }
  876. .layer-nunbox-b {
  877. width: 100%;
  878. height: 44rpx;
  879. margin-top: 13rpx;
  880. }
  881. .text {
  882. line-height: 44rpx;
  883. font-size: $font-size-28;
  884. .p {
  885. color: #ff2a2a;
  886. }
  887. .p:first-child {
  888. margin-left: 30rpx;
  889. }
  890. .p.sm {
  891. font-size: $font-size-24;
  892. }
  893. }
  894. }
  895. .tui-popup-btn {
  896. width: 100%;
  897. height: auto;
  898. float: left;
  899. box-sizing: border-box;
  900. margin-top: 30rpx;
  901. .superv-header-checked {
  902. float: left;
  903. font-size: $font-size-30;
  904. .oltext {
  905. width: 120rpx;
  906. float: left;
  907. color: #666666;
  908. display: flex;
  909. margin-left: 10rpx;
  910. .checkbox {
  911. display: flex;
  912. margin: 0;
  913. padding: 0;
  914. display: flex;
  915. flex-direction: column;
  916. align-items: center;
  917. box-sizing: border-box;
  918. text-align: center;
  919. text-decoration: none;
  920. border-radius: 0;
  921. -webkit-tap-highlight-color: transparent;
  922. overflow: hidden;
  923. font-size: 34rpx;
  924. color: $color-system;
  925. line-height: 80rpx;
  926. }
  927. .text {
  928. float: left;
  929. line-height: 80rpx;
  930. margin-left: 15rpx;
  931. }
  932. }
  933. .ortext {
  934. width: 120rpx;
  935. float: right;
  936. color: $color-system;
  937. text-align: right;
  938. }
  939. }
  940. .tui-button {
  941. width: 210rpx;
  942. height: 88rpx;
  943. float: right;
  944. background: #e1e1e1;
  945. line-height: 88rpx;
  946. text-align: center;
  947. color: #ffffff;
  948. font-size: $font-size-28;
  949. border-radius: 44rpx;
  950. &.active {
  951. background: $btn-confirm;
  952. }
  953. }
  954. .tui-flex-btn {
  955. width: 100%;
  956. height: 88rpx;
  957. display: flex;
  958. box-sizing: border-box;
  959. padding: 0 34rpx;
  960. .button {
  961. width: 280rpx;
  962. height: 88rpx;
  963. color: #fff;
  964. display: flex;
  965. align-items: center;
  966. justify-content: center;
  967. font-size: $font-size-28;
  968. border-radius: 44rpx;
  969. &.buy {
  970. background: $btn-confirm;
  971. margin-left: 78rpx;
  972. }
  973. &.add {
  974. background: #ffe6dc;
  975. color: #FF5B00;
  976. }
  977. }
  978. }
  979. }
  980. </style>