integralgoodsDetail.vue 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072
  1. <template>
  2. <view class="box">
  3. <view class="spwBox">
  4. <swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
  5. <swiper-item v-for="(item,index) in info.imgList">
  6. <view class="swiper-item">
  7. <img mode="aspectFit" :src="item.img" alt="" class="swiper-itemImg" v-if="item.imgType==1">
  8. <video :src="item.url" v-if="item.imgType==2" show-fullscreen-btn controls style="width: 100%;height: 100%;"></video>
  9. </view>
  10. </swiper-item>
  11. <swiper-item v-for="(item,index) in info.detailImgList">
  12. <view class="swiper-item">
  13. <img mode="aspectFit" :src="item.img" alt="" class="swiper-itemImg" >
  14. </view>
  15. </swiper-item>
  16. </swiper>
  17. </view>
  18. <view class="shopCont">
  19. <view class="goodsName">{{info.name}}</view>
  20. <view class="jfNumBox" style="padding-left: 24rpx;padding-bottom: 20rpx;">
  21. <span class="jfspan1 jfspan11">{{info.integral}}</span> <span class="jfspan2">积分</span>
  22. <span class="marketvalue" v-if="info.salePrice">市场价 ¥{{info.salePrice}}</span>
  23. </view>
  24. </view>
  25. <!-- 商品详情 -->
  26. <view class="goodsDetail" v-if="info.details">
  27. <view class="goodsDetailTitle">商品详情</view>
  28. <!-- <view v-html="info.details" style="background: #fff;"></view> -->
  29. <rich-text :nodes="info.details" style="background: #fff;"></rich-text>
  30. </view>
  31. <view style="height: 120rpx;padding-bottom: env(safe-area-inset-bottom)"></view>
  32. <view class="bottomBox">
  33. <view class="ktyong" style="padding-top: 46rpx;">可用 <span class="ktyong1" style="font-weight: 500;">{{avaIntegral}}</span><span class="ktyong2">积分</span> </view>
  34. <view class="bottomBtn" :style="{background:'#'+themeColor}" @click="ljbuy">立即兑换</view>
  35. </view>
  36. <!-- 立即购买 -->
  37. <view class="buyBox" v-if="buyShow" @click="buyShow=false">
  38. <view class="buyCont" @click.stop="">
  39. <image src="../../static/timg/chahao.png" mode="" class="buyContCh" @click="buyShow=false"></image>
  40. <view class="goodsBox">
  41. <view class="hotGoodsLine" >
  42. <view>
  43. <image :src="info.imgList[0].img" mode="" v-if="info.imgList.length>0" class="hotGoodsLineImg"></image>
  44. <image src="../../static/timg/noimg.png" class="hotGoodsLineImg" v-else></image>
  45. </view>
  46. <view class="hotGoodsLineRIght">
  47. <view class="goodsName2">{{info.name}}</view>
  48. <view class="goodsPriceTk">
  49. <view class="jfNumBox">
  50. <span class="jfspan1">{{info.integral}}</span> <span class="jfspan2">积分</span>
  51. <span class="marketvalue" v-if="info.salePrice">市场价 ¥{{info.salePrice}}</span>
  52. </view>
  53. <view class="surplus">剩余{{shopInfo.qty>0?shopInfo.qty:0}}个</view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="buyNumBox">
  59. <view class="bugNUm">
  60. <view class="bugNUmLeft">
  61. <view class="buySl">数量</view>
  62. <!-- <view class="buyXg" v-if="info.oneQty">限购{{info.oneQty}}件</view> -->
  63. </view>
  64. <view class="numJsbox">
  65. <view class="numJj" @click="calculation(1)">-</view>
  66. <view class="goodsnum">
  67. <input type="number" value="" v-model="goodsnum" class="goodsnumInput" @input="goodsnumInput"/>
  68. </view>
  69. <view class="numJj" @click="calculation(2)">+</view>
  70. </view>
  71. </view>
  72. <view class="buySHop" @click="ckShop" style="border-bottom: 1px solid #EEEEEE;">
  73. <view>服务门店</view>
  74. <view class="buyShopRight" >
  75. <view v-if="shopInfo.shopId">{{shopInfo.ShopName}}</view>
  76. <view v-else>请选择</view>
  77. <image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
  78. </view>
  79. </view>
  80. <view class="buySHop" v-if="info.oneCount&&info.dayCount">
  81. <view>兑换限制</view>
  82. <view class="buyShopRight" >
  83. 每人限兑{{info.oneCount?info.oneCount:0}}个,每天限兑{{info.dayCount?info.dayCount:0}}个
  84. </view>
  85. </view>
  86. <view class="buySHop" v-else></view>
  87. </view>
  88. <view class="buybtnBox">
  89. <view class="ktyong"><view>合计 <span class="ktyong1" style="font-weight: 500;">{{totalIntegral}}</span><span class="ktyong2">积分</span> </view>
  90. <view class="kyNum">可用积分:{{avaIntegral}}</view>
  91. </view>
  92. <view class="bottomBtn" @click="goBuy" :style="{background:'#'+themeColor}">立即兑换</view>
  93. </view>
  94. </view>
  95. </view>
  96. <!-- 手机号授权 -->
  97. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  98. <view class="authorizCont" @click.stop="">
  99. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  100. <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
  101. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  102. </view>
  103. <view style="text-align: center;padding-top: 56rpx;">
  104. <image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  105. </view>
  106. </view>
  107. <!-- <view :style="{color:colorX}">asdfas</view> -->
  108. <!-- 门店弹框 -->
  109. <view class="baomingBox ckshopBox" v-if="ckshopShow" @click="noShowShop">
  110. <view class="baomingCont" @click.stop="">
  111. <view class="bmTop">
  112. <view class="bmTitle">选择门店</view>
  113. <img src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop">
  114. </view>
  115. <view style="padding: 0 24rpx; height: 45vh;overflow-y: scroll;">
  116. <view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop2(item)">
  117. <view class="shopName"> {{item.ShopName}}</view>
  118. <view class="surplus" style="padding-top: 2rpx;">剩余{{item.qty>0?item.qty:0}}个</view>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. </template>
  125. <script>
  126. export default {
  127. components: {
  128. },
  129. data() {
  130. return {
  131. userInfo:'',
  132. goodsnum:1,
  133. buyShow:false,
  134. id:'',
  135. info:'',
  136. shopInfo:{
  137. shopName:'',
  138. shopId:''
  139. },
  140. authorizShow:false,
  141. code:'',
  142. wxOpenData:'',
  143. ext:'',
  144. categoryIds:'',
  145. thenShow:false,
  146. activityEnd:true,
  147. shengyuD:1,
  148. shengyuH:12,
  149. shengyuM:21,
  150. totalIntegral:'',
  151. avaIntegral:'',
  152. ckshopShow:false,
  153. themeColor:'',
  154. //snapup:
  155. }
  156. },
  157. onLoad(opt) {
  158. this.id=opt.id;
  159. this.avaIntegral=opt.avaIntegral;
  160. //this.id='F58D6DEA-726A-4E28-93FA-EE6E5D6E3BDF'
  161. //this.userInfo = uni.getStorageSync("userInfo");
  162. this.userInfo=this.$store.state.userInfo;
  163. this.ext=this.$common.getExtStoreId();
  164. this.themeColor = uni.getStorageSync("themeColor");
  165. if(this.userInfo){
  166. this.wxOpenData=this.$store.state.wxOpenData;
  167. this.openGoodsDetailById();
  168. }else{
  169. this.$common.automaticlogin().then(val => {
  170. this.userInfo=this.$store.state.userInfo;
  171. this.wxOpenData=this.$store.state.wxOpenData;
  172. this.openGoodsDetailById();
  173. console.log(this.userInfo)
  174. })
  175. }
  176. },
  177. onShow() {
  178. //this.shopInfo=this.$store.state.ckshopInfo;
  179. //console.log(this.shopInfo)
  180. },
  181. onPullDownRefresh(){
  182. this.openGoodsDetailById();
  183. setTimeout(() => {
  184. uni.stopPullDownRefresh(); // 关闭下拉刷新
  185. }, 2000);
  186. },
  187. methods: {
  188. sharewx(){
  189. },
  190. goodsnumInput(){
  191. console.log(this.goodsnum)
  192. var qty=this.shopInfo.qty?this.shopInfo.qty:0
  193. if(this.goodsnum>qty){
  194. uni.showToast({
  195. title: '服务门店库存不足',
  196. icon: 'none',
  197. duration: 3000
  198. });
  199. this.goodsnum=qty
  200. }
  201. },
  202. noShowShop(){
  203. this.ckshopShow=false;
  204. },
  205. ckShop(){
  206. this.ckshopShow=true;
  207. },
  208. ckshop2(item){
  209. if(item.qty){
  210. this.shopInfo=item;
  211. this.ckshopShow=false;
  212. }else{
  213. uni.showToast({
  214. title: '服务门店库存不足',
  215. icon: 'none',
  216. duration: 3000
  217. });
  218. }
  219. },
  220. openGoodsDetailById(){
  221. this.$http('openIntegralMall/integralGoodsDetailById', {
  222. id:this.id,
  223. },'GET').then(res => {
  224. this.info=res.data;
  225. if(this.info.details){
  226. this.info.details = this.info.details.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
  227. this.info.details=this.info.details.replace(/\<p/gi, '<p style="display: inline-block"');
  228. }
  229. this.shopInfo=res.data.shopList[0];
  230. this.totalIntegral=this.goodsnum*this.info.integral
  231. //this.$store.commit('mutationsckshopInfo', '')
  232. //this.szShop()
  233. })
  234. },
  235. ljbuy(){
  236. if(!this.userInfo){
  237. this.authorizShow=true
  238. }else{
  239. this.buyShow=true
  240. }
  241. },
  242. goINdex(){
  243. uni.switchTab({
  244. url:'../index/index'
  245. })
  246. },
  247. goBuy(){
  248. if(this.goodsnum>this.info.dayCount){
  249. uni.showToast({
  250. title:'超过兑换限制',
  251. icon:'none',
  252. })
  253. return false;
  254. }
  255. if(!this.shopInfo.qty){
  256. uni.showToast({
  257. title: '库存不足',
  258. icon: 'none',
  259. duration: 3000
  260. });
  261. return false;
  262. }
  263. if(this.shopInfo.qty<0){
  264. uni.showToast({
  265. title: '库存不足',
  266. icon: 'none',
  267. duration: 3000
  268. });
  269. return false;
  270. }
  271. if(!this.shopInfo.shopId){
  272. uni.showToast({
  273. title: '请选择服务门店',
  274. icon: 'none',
  275. duration: 3000
  276. });
  277. return false;
  278. }
  279. var that=this;
  280. uni.setStorage({
  281. key: 'jfgoodsDetail',
  282. data: that.info,
  283. success: function () {
  284. uni.navigateTo({
  285. url:'integralConfirm?shopID='+that.shopInfo.shopId+'&shopName='+that.shopInfo.ShopName+'&goodsnum='+that.goodsnum+'&avaIntegral='+that.avaIntegral
  286. })
  287. }
  288. });
  289. },
  290. calculation(type){
  291. if(type==1){
  292. if(this.goodsnum>1){
  293. this.goodsnum--
  294. }
  295. }else{
  296. //console.log("+++")
  297. if(this.goodsnum<this.info.dayCount){
  298. if(this.goodsnum<this.shopInfo.qty){
  299. this.goodsnum++
  300. }else{
  301. uni.showToast({
  302. title:'剩余个数不足',
  303. icon:'none',
  304. })
  305. }
  306. }else{
  307. uni.showToast({
  308. title:'超过兑换限制',
  309. icon:'none',
  310. })
  311. }
  312. }
  313. this.totalIntegral=this.goodsnum*this.info.integral
  314. },
  315. decryptPhoneNumber: function(e) {
  316. console.log(e);
  317. this.code=e.detail.code
  318. this.wxPhoneLogin()
  319. this.authorizShow=false;
  320. },
  321. wxPhoneLogin(){
  322. var that=this;
  323. this.$http('miniApp2/sys/wxPhoneLogin', {
  324. appId:this.ext.appId,
  325. unionId:this.ext.unionId,
  326. code:this.code,
  327. openId:this.wxOpenData.openid
  328. },'POST').then(res => {
  329. var data = res.data;
  330. if(data.loginInfo){
  331. this.userInfo=data.loginInfo.openUser;
  332. this.wxOpenData=data.loginInfo;
  333. this.$store.commit('mutationswxOpenData', data)
  334. this.$store.commit('mutationsuserInfo', this.userInfo)
  335. this.szShop()
  336. }
  337. })
  338. },
  339. },
  340. onShareAppMessage(res) {
  341. var img='';
  342. if(this.info.ImgList.length>0){
  343. img=this.info.ImgList[0].url
  344. }
  345. return {
  346. title: this.info.name,
  347. imageUrl:img,
  348. path: 'pages/shop/goodsDetail?id=' + this.id,
  349. success(res){
  350. uni.showToast({
  351. title:'分享成功'
  352. })
  353. },
  354. fail(res){
  355. uni.showToast({
  356. title:'分享失败',
  357. icon:'none',
  358. duration: 3000
  359. })
  360. }
  361. }
  362. },
  363. }
  364. </script>
  365. <style scoped lang="less">
  366. .ckshopLine{
  367. display: flex;
  368. justify-content: space-between;
  369. padding: 20rpx 0;
  370. border-bottom: 1px solid #EEEEEE;
  371. }
  372. .shopName{
  373. font-size: 28rpx;
  374. color: #333333;
  375. width: 500rpx;
  376. }
  377. .ckshopBox{
  378. width: 750rpx;
  379. height: 100vh;
  380. background: rgba(0, 0, 0, 0.4);
  381. position: fixed;
  382. top: 0;
  383. left: 0;
  384. z-index: 111 !important;
  385. }
  386. .baomingCont{
  387. position: absolute;
  388. width: 750rpx;
  389. /* height:850rpx; */
  390. /* padding-bottom: constant(safe-area-inset-bottom);
  391. padding-bottom: env(safe-area-inset-bottom); */
  392. left: 0;
  393. bottom: 0;
  394. background: #ffffff;
  395. border-radius: 24rpx 24rpx 0px 0px;
  396. }
  397. .bmTop{
  398. display: flex;
  399. justify-content: space-between;
  400. padding: 40rpx 24rpx 10rpx 24rpx;
  401. }
  402. .bmTitle{
  403. font-weight: 500;
  404. color: #3C3C3C;
  405. font-size: 30rpx;
  406. line-height: 36rpx;
  407. }
  408. .bmChimg{
  409. width: 36rpx;
  410. height: 36rpx;
  411. }
  412. .kyNum{
  413. color: #999999;
  414. font-size: 24rpx;
  415. }
  416. .goodsPriceTk{
  417. display: flex;
  418. justify-content: space-between;
  419. width: 460rpx;
  420. }
  421. .surplus{
  422. color: #FF0000;font-size: 24rpx;padding-top: 6rpx;
  423. }
  424. .ktyong{
  425. color: #666666;
  426. font-size: 24rpx;
  427. padding-left: 30rpx;
  428. padding-top: 18rpx;
  429. } .ktyong1{
  430. color: #FF0000;
  431. font-size: 32rpx;
  432. }
  433. .ktyong2{
  434. color: #FF0000;
  435. font-size: 24rpx;
  436. }
  437. .jfspan1{
  438. font-weight: 500;
  439. color: #FF0000;
  440. font-size:32rpx;
  441. line-height: 45rpx;
  442. }
  443. .jfspan11{
  444. font-size: 40rpx !important;
  445. }
  446. .jfspan2{
  447. font-weight: 400;
  448. color: #FF0000;
  449. font-size:24rpx;
  450. line-height: 45rpx;
  451. padding-left: 10rpx;
  452. }
  453. .marketvalue{
  454. font-weight: 400;
  455. color: #999999;
  456. font-size:24rpx;
  457. line-height: 45rpx;
  458. padding-left: 10rpx;
  459. text-decoration: line-through;
  460. }
  461. .timeTbox{
  462. width: 750rpx;
  463. height: 60rpx;
  464. background:#FFF5F0;
  465. border-radius: 24rpx 24rpx 0px 0px;
  466. border: 1px solid #EFE1D5;
  467. display: flex;
  468. justify-content: center;
  469. font-size: 24rpx;
  470. font-family: PingFangSC-Regular, PingFang SC;
  471. font-weight: 400;
  472. color: #764D49;
  473. }
  474. .timeTbox2{
  475. height: 60rpx;
  476. }
  477. .timeviewTxt{
  478. line-height: 41rpx;
  479. padding-top: 10rpx;
  480. }
  481. .timeDivTxt{
  482. line-height: 60rpx;
  483. padding: 0 10rpx;
  484. }
  485. .timeK{
  486. height: 41rpx;
  487. line-height: 41rpx;
  488. color: #FFFFFF;
  489. width: 41rpx;
  490. text-align: center;
  491. background: #F03B3B;
  492. border-radius: 6rpx;
  493. margin-top: 9rpx;
  494. margin-left: 15rpx;
  495. margin-right: 15rpx;
  496. }
  497. .bottomHz{
  498. width: 750rpx;
  499. /* height: 180rpx; */
  500. position: fixed;left: 0;
  501. bottom: 0;
  502. border-radius: 24rpx 24rpx 0px 0px;
  503. }
  504. .box{
  505. background: #F4F5F7;
  506. min-height: 100vh;
  507. }
  508. .buySHop{
  509. display: flex;
  510. justify-content: space-between;
  511. font-size:28rpx ;
  512. color: #666666;
  513. padding-top: 30rpx;
  514. padding-bottom: 30rpx;
  515. }
  516. .buybtnBox{
  517. width: 750rpx;
  518. height: 120rpx;
  519. background: #FFFFFF;
  520. box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
  521. display: flex;
  522. justify-content: space-between;
  523. }
  524. .buyBox{
  525. width: 750rpx;
  526. height: 100vh;
  527. position: fixed;
  528. left: 0;
  529. top: 0;
  530. background: rgba(0,0,0,0.5);
  531. }
  532. .buyBtn{
  533. width: 690rpx;
  534. height: 74rpx;
  535. background: #D53533;
  536. border-radius: 37rpx;
  537. text-align: center;
  538. line-height: 74rpx;
  539. color: #FFFFFF;
  540. font-size: 30rpx;
  541. margin-left: 30rpx;
  542. }
  543. .buyShopRightJt{
  544. width: 12rpx;
  545. height: 20rpx;
  546. margin-top: 8rpx;
  547. margin-left: 10rpx;
  548. }
  549. .buyShopRight{
  550. display: flex;
  551. }
  552. .bugNUm{
  553. border-top: 1px solid #EEEEEE;
  554. border-Bottom: 1px solid #EEEEEE;
  555. padding: 28rpx 0;
  556. display: flex;
  557. justify-content: space-between;
  558. }
  559. .buyXg{
  560. width: 110rpx;
  561. height: 36rpx;
  562. border-radius: 4rpx;
  563. border: 1px solid #F19D01;
  564. text-align: center;
  565. line-height: 36rpx;
  566. color: #F19D01;
  567. font-size: 24rpx;
  568. }
  569. .numJj{
  570. width: 44rpx;
  571. height: 44rpx;
  572. background: #F4F5F7;
  573. border-radius: 0px 6rpx 6rpx 0px;
  574. text-align: center;
  575. line-height: 44rpx;
  576. font-size: 32rpx;
  577. color: #999999;
  578. }
  579. .bugNUmLeft{
  580. display: flex;
  581. }
  582. .buySl{
  583. color: #666666;font-size: 28rpx;padding-right: 30rpx;
  584. }
  585. .goodsnum{
  586. width: 88rpx;
  587. height: 44rpx;
  588. background: #F4F5F7;
  589. line-height: 44rpx;
  590. text-align: center;
  591. font-weight: 500;
  592. color: #333333;
  593. font-size: 24rpx;
  594. margin: 0 4rpx;
  595. }
  596. .goodsnumInput{
  597. width: 88rpx;
  598. height: 44rpx;
  599. background: #F4F5F7;
  600. line-height: 44rpx;
  601. text-align: center;
  602. font-weight: 500;
  603. color: #333333;
  604. font-size: 24rpx;
  605. }
  606. .numJsbox{
  607. display: flex;
  608. }
  609. .buyCont{
  610. position: absolute;
  611. left: 0;
  612. bottom: 0;
  613. width: 750rpx;
  614. /* height: 688rpx; */
  615. background: #FFFFFF;
  616. border-radius: 26rpx 26rpx 0px 0px;
  617. }
  618. .buyNumBox{
  619. padding: 30rpx;
  620. padding-top: 10rpx;
  621. }
  622. .buyContCh{
  623. position: absolute;
  624. top: 53rpx;
  625. right: 36rpx;
  626. width: 36rpx;
  627. height: 36rpx;
  628. }
  629. .hotGoodsLine{
  630. margin-top: 30rpx;
  631. padding: 20rpx;
  632. background: #FFFFFF;
  633. border-radius: 16rpx;
  634. display: flex;
  635. }
  636. .hotGoodsLineImg{
  637. width: 208rpx;
  638. height: 194rpx;
  639. border-radius: 16rpx;
  640. border: 1px solid #EEEEEE;
  641. }
  642. .goodsName2{
  643. font-size: 28rpx;
  644. font-family: PingFangSC-Regular, PingFang SC;
  645. font-weight: 400;
  646. color: #333333;
  647. line-height: 40rpx;
  648. text-overflow: -o-ellipsis-lastline;
  649. overflow: hidden;
  650. text-overflow: ellipsis;
  651. display: -webkit-box;
  652. -webkit-line-clamp: 2;
  653. line-clamp: 2;
  654. -webkit-box-orient: vertical;
  655. min-height: 80rpx;
  656. width: 370rpx;
  657. }
  658. .hotGoodsLineRIght{
  659. padding-left: 24rpx;
  660. display: flex;
  661. flex-direction: column;
  662. justify-content: space-between;
  663. }
  664. .goodsPrice{
  665. display: flex;
  666. padding-top: 10rpx;
  667. }
  668. .goodsPrice11{
  669. font-size: 24rpx;
  670. font-weight: 400;
  671. color: #FF0000;
  672. padding-top: 8rpx;
  673. padding-right: 10rpx;
  674. }
  675. .goodsPrice22{
  676. font-size: 22rpx;
  677. font-weight: 400;
  678. color: #FF0000;
  679. padding-top: 8rpx;
  680. }
  681. .goodsPrice33{
  682. font-size: 32rpx;
  683. font-weight: 500;
  684. color: #FF0000;
  685. }
  686. .goodsPrice44{
  687. font-size: 24rpx;
  688. font-weight: 400;
  689. color: #999999;
  690. padding-top: 8rpx;
  691. padding-left: 5rpx;
  692. text-decoration:line-through;
  693. }
  694. .bottomBox{
  695. width: 750rpx;
  696. height: 120rpx;
  697. background: #FFFFFF;
  698. box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
  699. padding-bottom: env(safe-area-inset-bottom);
  700. background: #FFFFFF;
  701. display: flex;
  702. position: fixed;
  703. left: 0;
  704. justify-content: space-between;
  705. bottom: 0;
  706. }
  707. .bottomTxt{
  708. color: #666666;font-size: 22rpx;
  709. }
  710. .bottomImg{
  711. width: 48rpx;height: 48rpx;
  712. }
  713. .bottomImgBox{
  714. text-align: center;
  715. padding-top: 20rpx;
  716. padding-left: 40rpx;
  717. }
  718. .shareBtn{
  719. width: 100rpx;
  720. background: #FFFFFF;
  721. }
  722. button::after{
  723. border: none;
  724. }
  725. button{
  726. position: relative;
  727. display: block;
  728. margin-left: 0;
  729. margin-right: 0;
  730. padding-left: 0px;
  731. padding-right: 0px;
  732. box-sizing: border-box;
  733. // font-size: 18px;
  734. text-align: center;
  735. text-decoration: none;
  736. // line-height: 1;
  737. line-height: 1.35;
  738. // border-radius: 5px;
  739. -webkit-tap-highlight-color: transparent;
  740. overflow: hidden;
  741. color: #000000;
  742. background-color: #fff;
  743. height: 100%;
  744. }
  745. .bottomBtn{
  746. width: 204rpx;
  747. height: 74rpx;
  748. background: #D53533;
  749. border-radius: 37rpx;
  750. line-height: 74rpx;
  751. text-align: center;
  752. color: #FFFFFF;
  753. font-size: 30rpx;
  754. margin-top: 23rpx;
  755. margin-left: 70rpx;
  756. margin-right: 30rpx;
  757. }
  758. .bottomBtn2{
  759. width: 450rpx;
  760. height: 74rpx;
  761. background: #DDDDDD;
  762. border-radius: 37rpx;
  763. line-height: 74rpx;
  764. text-align: center;
  765. color: #FFFFFF;
  766. font-size: 30rpx;
  767. margin-top: 23rpx;
  768. margin-left: 70rpx;
  769. }
  770. .goodsDetailTitle{
  771. color: #333333;
  772. font-size: 30rpx;
  773. font-weight: 500;
  774. background: #FFFFFF;
  775. padding: 20rpx 24rpx;
  776. }
  777. .goodsDetail{
  778. margin-top: 20rpx;
  779. padding-bottom: 30rpx;
  780. background: #FFFFFF;
  781. }
  782. .goodsDetail img{
  783. width: 750rpx;
  784. }
  785. .goodsDetail image{
  786. width: 750rpx;
  787. }
  788. .mealBox{
  789. background: #FFFFFF;
  790. padding: 20rpx 24rpx;
  791. margin-top: 20rpx;
  792. }
  793. .mealTopRight{
  794. display: flex;
  795. }
  796. .mealLine{
  797. margin-top: 20rpx;
  798. }
  799. .itemname{
  800. width: 441rpx;
  801. text-overflow: -o-ellipsis-lastline;
  802. overflow: hidden;
  803. text-overflow: ellipsis;
  804. display: -webkit-box;
  805. -webkit-line-clamp: 2;
  806. line-clamp: 2;
  807. -webkit-box-orient: vertical;
  808. }
  809. .itemline{
  810. display: flex;
  811. padding: 10rpx 20rpx;
  812. justify-content: space-between;
  813. line-height: 37rpx;
  814. font-size: 26rpx;
  815. color: #333333;
  816. }
  817. .itemlinebOX{
  818. border-radius: 0px 0px 10px 10px;
  819. border: 2Rpx solid #EEEEEE;
  820. padding: 10rpx 0;
  821. }
  822. .mealTop{
  823. display: flex;
  824. justify-content: space-between;
  825. height: 72rpx;
  826. background: #F19D01 linear-gradient(90deg, #FFF7EB 0%, #FFEFD5 100%);
  827. border-radius: 10rpx 10rpx 0px 0px;
  828. line-height: 72rpx;
  829. color: #333333;
  830. font-size: 26rpx;
  831. padding: 0 20rpx;
  832. }
  833. .fwlcTitle{
  834. color: #333333;font-size: 30rpx;font-weight: 500;
  835. }
  836. .fuwuliucBox{
  837. background: #FFFFFF;
  838. padding: 20rpx 24rpx;
  839. margin-top: 20rpx;
  840. }
  841. .fwlcxian{
  842. padding:30rpx 42rpx 10rpx 42rpx ;
  843. display: flex;
  844. }
  845. .fwlcyuan{
  846. width: 16rpx;
  847. height: 16rpx;
  848. background: #FF0000;
  849. border-radius: 50%;
  850. }
  851. .fwHx{
  852. height: 4rpx;
  853. background: #FF0000;
  854. width: 186rpx;
  855. margin-top: 7rpx;
  856. }
  857. .fwTxt{
  858. display: flex;
  859. justify-content: space-between;
  860. }
  861. .fwTxtline{
  862. color: #333333;
  863. line-height: 37px;
  864. font-size: 26rpx;
  865. }
  866. .swiper{
  867. width: 750rpx;
  868. height: 700rpx;
  869. background: #FFFFFF;
  870. border-bottom: 1px solid #EEEEEE;
  871. }
  872. .swiper-item{
  873. width: 750rpx;
  874. height: 700rpx;
  875. }
  876. .swiper-itemImg{
  877. width: 750rpx;
  878. height: 700rpx;
  879. }
  880. .shopCtop{
  881. display: flex;
  882. padding: 20rpx 24rpx;
  883. justify-content: space-between;
  884. background: #FFFFFF;
  885. }
  886. .goodsPrice{
  887. display: flex;
  888. }
  889. .goodsPrice1{
  890. font-size: 24rpx;
  891. font-weight: 400;
  892. color: #FF0000;
  893. padding-top: 14rpx;
  894. padding-right: 14rpx;
  895. }
  896. .goodsPrice2{
  897. font-size: 28rpx;
  898. font-weight: 400;
  899. color: #FF0000;
  900. padding-top: 10rpx;
  901. }
  902. .goodsPrice3{
  903. font-size: 40rpx;
  904. font-weight: 500;
  905. color: #FF0000;
  906. }
  907. .goodsPrice4{
  908. font-size: 24rpx;
  909. font-weight: 400;
  910. color: #999999;
  911. padding-top: 14rpx;
  912. text-decoration:line-through;
  913. padding-left: 10rpx;
  914. }
  915. .Sold{
  916. font-weight: 400;
  917. color: #999999;
  918. font-size: 24rpx;
  919. padding-top: 18rpx;
  920. }
  921. .goodsName{
  922. font-size: 30rpx;
  923. line-height: 42rpx;
  924. font-weight: 500;
  925. color: #333333;
  926. padding: 20rpx 24rpx;
  927. padding-top: 20rpx;
  928. padding-bottom: 16rpx;
  929. }
  930. .goodsMd{
  931. font-weight: 400;
  932. color: #999999;
  933. font-size: 26rpx;
  934. padding: 0 24rpx;
  935. padding-bottom: 20rpx;
  936. }
  937. .shopCont{
  938. background: #FFFFFF;
  939. }
  940. .modeBox{
  941. margin-top:20rpx ;
  942. padding: 5rpx 0;
  943. background: #FFFFFF;
  944. }
  945. .modeline{
  946. display: flex;
  947. padding: 15rpx 24rpx;
  948. }
  949. .modelineLeft{
  950. color: #999999;
  951. font-size: 26rpx;
  952. width: 150rpx;
  953. }
  954. .modeLineRight{
  955. color: #333333;
  956. font-size: 26rpx;
  957. width: 550rpx;
  958. }
  959. .expireNumber{
  960. width: 110rpx;
  961. text-align: right;
  962. }
  963. .authorizBox{
  964. width: 100vw;
  965. height: 100vh;
  966. background: rgba(0, 0, 0, 0.5);
  967. position: fixed;
  968. top: 0;
  969. left: 0;
  970. }
  971. .authorizCont{
  972. margin-top: 30vh;
  973. width: 564rpx;
  974. height: 408rpx;
  975. background: #FFFFFF;
  976. border-radius: 24rpx;
  977. margin-left: 93rpx;
  978. position: relative;
  979. }
  980. .authorizCloseImg{
  981. width: 62rpx;
  982. height: 62rpx;
  983. }
  984. .sqLogoBox{
  985. width: 180rpx;
  986. height: 180rpx;
  987. background: #FFFFFF;
  988. border-radius: 90rpx;
  989. text-align: center;
  990. position: absolute;
  991. top: -50rpx;
  992. left: 192rpx;
  993. }
  994. .authorizName{
  995. color: #333333;
  996. line-height: 42rpx;
  997. font-size: 30rpx;
  998. text-align: center;
  999. padding-top: 58rpx;
  1000. }
  1001. .authorizMs{
  1002. color: #999999;
  1003. line-height: 36rpx;
  1004. font-size: 26rpx;
  1005. width: 452rpx;
  1006. padding-top: 24rpx;
  1007. text-align: center;
  1008. margin-left: 56rpx;
  1009. }
  1010. .authorizContbutton{
  1011. width: 422rpx;
  1012. height: 88rpx;
  1013. background: #D53533;
  1014. border-radius: 44rpx;
  1015. line-height: 88rpx;
  1016. text-align: center;
  1017. font-size:30rpx;
  1018. color: #FFFFFF;
  1019. margin-top: 62rpx;
  1020. margin-left:71rpx;
  1021. }
  1022. </style>