goods.vue 24 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010
  1. <template>
  2. <view class="container">
  3. <view class="view-alert" v-if="showHint">
  4. <view class="alert-text">
  5. 点击右上角按钮,然后在弹出的菜单中,点击在浏览器中打开。
  6. </view>
  7. <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
  8. </view>
  9. <view class="product">
  10. <view class="u-bg-fff pb40">
  11. <view class="pic">
  12. <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
  13. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular="true">
  14. <swiper-item v-if="dataForm.video_url">
  15. <video :src="dataForm.video_url" style="height:100%"></video>
  16. </swiper-item>
  17. <swiper-item v-for="(item, index) in imglist" :key="index">
  18. <image :src="item" mode="aspectFill"></image>
  19. </swiper-item>
  20. </swiper>
  21. <view class="p-price">
  22. <view class="pd24 u-flex-center">
  23. <view class="u-FFF u-font36" v-if="type == 1">
  24. <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text>
  25. </view>
  26. <view class="u-FFF u-font36" v-if="type == 2 || type == 3">
  27. <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
  28. </view>
  29. <view class="u-FFF u-font36" v-if="type == 5">
  30. {{ dataForm.min_exchange_point }}积分
  31. <!-- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text> -->
  32. </view>
  33. <text class="discount u-font24 u-ml20 u-del" v-if="type == 1">¥{{ dataForm.max_market_price }}</text>
  34. <text class="discount u-font24 u-ml20 u-del"
  35. v-if="type == 2 || type == 3">¥{{ dataForm.max_sale_price }}</text>
  36. </view>
  37. <view class="p-ab u-flex-center" v-if="type == 2 || type == 3">
  38. <view class="triangle-bottomright"></view>
  39. <view class="seckill u-text-center u-font28">
  40. <!-- active_state 0:未开始 * 1:进行中 * 2:已结束 -->
  41. <view class="u-bold" v-if="dataForm.active_state == 2">已结束</view>
  42. <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>
  43. <view class="u-bold" v-if="dataForm.active_state == 0">离开抢</view>
  44. <view v-if="dataForm.active_state != 2">
  45. <uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#00321e'"
  46. :splitorColor="'#00321e'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
  47. :minute="time1[2]" :second="time1[3]"></uni-countdown>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="mt30 u-plr30">
  53. <view>
  54. <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
  55. </view>
  56. <view class="u-font24 u-mt15 u-999" v-if="type==1 ">
  57. <text>已售
  58. <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件,仅剩<text class="u-FF0000">{{
  59. dataForm.residual_inventory
  60. }}</text>件</text>
  61. </view>
  62. <view class="u-font24 u-mt15 u-999" v-else>
  63. <text>已售
  64. <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件</text>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="u-bg-fff u-mt10">
  70. <view class="u-plr30 u-flex-center-sb pt-pb35">
  71. <view class="u-flex-center">
  72. <view>
  73. <image class="u-avatar104" :src="shop.logo"></image>
  74. </view>
  75. <view class="u-ml25">
  76. <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
  77. <view class="u-999 u-font24 u-mt5 u-text2">
  78. <text class="iconfont u-193E2C">&#xe64b;</text>
  79. {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
  80. }}{{ shop.address }}
  81. </view>
  82. </view>
  83. </view>
  84. <!-- <view class="iconfont">&#xe6c7;</view> -->
  85. </view>
  86. </view>
  87. <view class="u-bg-fff u-mt10">
  88. <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
  89. :style="`top: calc(${statusBarHeight}px + 44px)`">
  90. <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
  91. <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">
  92. 用户评论({{ commentList.length }})</view>
  93. </view>
  94. <view class="u-mt10">
  95. <!--商品详情-->
  96. <view v-if="isChecked == 0">
  97. <view class="richText ql-editor-box">
  98. <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
  99. </view>
  100. </view>
  101. <!--评论-->
  102. <view class="u-plr30" v-else>
  103. <comment :value="commentList"></comment>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="bottom-btn u-bg-fff">
  109. <view class="pt-pb30 u-plr30 u-flex-center-sb">
  110. <view class="leftbox">
  111. <button @click="handleTip()" class="u-text-center goods-tools">
  112. <view class="iconfont2 u-font44 u-999">&#xe684;</view>
  113. <view class="u-font28 u-1A1A1A">分享</view>
  114. </button>
  115. <view class="goods-tools service" @click="handleTip()">
  116. <image src="@/static/kefu.png" mode="aspectFill"></image>
  117. <view class="u-font28 u-1A1A1A">客服</view>
  118. </view>
  119. <view class="cart" @click="handleTip()">
  120. <view class="u-text-center goods-tools">
  121. <view class="iconfont2 car-icon u-font44 u-999">&#xe600;</view>
  122. <view class="u-font28 u-1A1A1A">购物车</view>
  123. </view>
  124. </view>
  125. </view>
  126. <!--普通商品-->
  127. <view class="u-flex-center">
  128. <button class="cart-btn u-font30" @click="handleTip()" v-if="dataForm.area_feature != 1">
  129. 加入购物车
  130. </button>
  131. <button class="buy-btn u-font30" @click="handleTip()">
  132. 立即购买
  133. </button>
  134. </view>
  135. </view>
  136. </view>
  137. <view class="jump-box" @click="openApp">
  138. <image class="logo-img" src="/static/logo.png" mode="aspectFill"></image>
  139. <view class="tip">打开宜格服务APP</view>
  140. </view>
  141. <view class="wx-open">
  142. <wx-open-launch-app id="launch-btn" appid="wx2cbf40f5fffa9e80" :extinfo="query" @launch="launchApp" @error="errorApp">
  143. <script type="text/wxtag-template">
  144. <style>.btn { padding: 50px;width: 300px;height:100px; }</style>
  145. <button class="btn">App内查看</button>
  146. </script>
  147. </wx-open-launch-app>
  148. </view>
  149. <ldLoading isFullScreen :active="loading"></ldLoading>
  150. </view>
  151. </template>
  152. <script>
  153. import comment from "@/components/ld-comment/ld-comment.vue";
  154. export default {
  155. components: {
  156. comment
  157. },
  158. data() {
  159. return {
  160. config: {
  161. back: false, //false是tolbar页面 是则不写
  162. title: "商品详情",
  163. color: "#FFFFFF",
  164. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  165. backgroundColor: [1, "#00321E"],
  166. statusBarFontColor: "#FFFFFF",
  167. backTabPage: "",
  168. },
  169. //手机状态栏高度
  170. statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
  171. imglist: [], //详情图片数组
  172. dataForm: {}, //商品详情
  173. shop: {}, //店铺信息
  174. cover: "",
  175. loading: true,
  176. btnText: "打开App",
  177. time1: [0, 0, 0, 0],
  178. type: null,
  179. commentList: [],
  180. isChecked: 0,
  181. goodsInfo: {},
  182. timer: null,
  183. showHint: false,
  184. query: {}
  185. };
  186. },
  187. props: {
  188. options: {
  189. type: Object,
  190. default: null,
  191. },
  192. },
  193. watch: {
  194. options(n) {
  195. this.options = n;
  196. },
  197. },
  198. created() {
  199. this.type = this.options.type;
  200. this.query = {
  201. jumpType: "goods",
  202. goodsType: this.options.type,
  203. goodsId: this.options.id
  204. }
  205. if ((this.options.type == 1 || this.options.type == 5) && this.options.id) {
  206. this.getDefaultDetailInfo(this.options.id);
  207. }
  208. if (this.options.type == 2 && this.options.id) {
  209. this.getSeckillDetail(this.options.id);
  210. }
  211. if (this.options.type == 3 && this.options.id) {
  212. this.getGroupsDetailInfo(this.options.id);
  213. }
  214. if (this.options.type == 4 && this.options.id) {
  215. this.getserviceDetailInfo(this.options.id);
  216. }
  217. this.goodsDetail(this.options.id)
  218. this.loadComment(this.options.id);
  219. },
  220. onShow() {
  221. document.addEventListener("visibilitychange", function() {
  222. if (that.timer) {
  223. that.opening = false
  224. clearTimeout(that.timer)
  225. }
  226. }, false);
  227. },
  228. onLoad(options) {},
  229. methods: {
  230. launchApp(e) {
  231. console.log(e, 1111)
  232. },
  233. errorApp(e) {
  234. console.log(e, 1111)
  235. },
  236. openApp() {
  237. const ua = navigator.userAgent.toLowerCase()
  238. const isWeixin = ua.indexOf('micromessenger') != -1;
  239. if (isWeixin) {
  240. this.showHint = isWeixin;
  241. uni.pageScrollTo({
  242. scrollTop: 0
  243. })
  244. } else {
  245. const osName = uni.getSystemInfoSync().osName
  246. if (osName == 'android') {
  247. this.getData(0)
  248. } else {
  249. this.getData(1)
  250. }
  251. }
  252. },
  253. getData(type) {
  254. this.$http.get("/app/version/newest", {
  255. type: type
  256. }).then((res) => {
  257. if (res && res.data && res.code == 200) {
  258. // try {
  259. // if (type == 0) {
  260. // window.location = "ygfwUrlSchemes://"
  261. // }
  262. // } catch (e) {}
  263. // window.location.href = res.data.downloadLink;
  264. this.browserOpenApp(type, res.data.downloadLink)
  265. } else {
  266. this.$mUtil.toast("暂无下载地址")
  267. }
  268. });
  269. },
  270. browserOpenApp(type, url) {
  271. let that = this
  272. that.opening = true
  273. let params = JSON.stringify({
  274. goodsTypeJump: that.options.type,
  275. goodsIdJump: that.options.id
  276. })
  277. let schemeUrl = `ygfwUrlSchemes://jumpType=goods&goodsType=${that.options.type}&goodsId=${that.options.id}`
  278. if (type == 0) { // 安卓处理
  279. let ifr = document.createElement('iframe');
  280. ifr.src = schemeUrl;
  281. ifr.style.display = 'none';
  282. document.body.appendChild(ifr);
  283. that.timer = window.setTimeout(function() { // 未安装的情况
  284. that.opening = false
  285. document.body.removeChild(ifr);
  286. // 提示下载
  287. let r = confirm("未安装APP? 是否去下载页下载!")
  288. if (r) {
  289. uni.navigateTo({
  290. url: '/pages/down'
  291. })
  292. }
  293. }, 5000)
  294. } else { // IOS处理
  295. window.location = schemeUrl
  296. that.timer = setTimeout(function() { // 未安装的情况
  297. that.opening = false
  298. // 跳转app store
  299. let r = confirm("未安装APP? 是否去下载页下载!")
  300. if (r) {
  301. uni.navigateTo({
  302. url: '/pages/down'
  303. })
  304. }
  305. }, 5000);
  306. }
  307. },
  308. handleTip() {
  309. uni.showToast({
  310. title: '请前往宜格服务APP操作!',
  311. icon: 'none',
  312. duration: 2000
  313. })
  314. },
  315. // 获取主页数据
  316. getIndexList(shopid) {
  317. this.$shopHttp.get("/yxt/shop/info/" + shopid).then((res) => {
  318. uni.stopPullDownRefresh();
  319. this.loading = false;
  320. if (res.data && res.code == 200) {
  321. this.shop = res.data;
  322. }
  323. });
  324. },
  325. //普通商品
  326. getDefaultDetailInfo(id) {
  327. this.$shopHttp.get("/goods/info/" + id).then((res) => {
  328. this.loading = false;
  329. if (res && res.code == 200) {
  330. this.dataForm = res.data;
  331. this.goodsId = res.data.id;
  332. this.imglist = res.data.images;
  333. this.shareImg = res.data.cover;
  334. this.shareTitle = res.data.title;
  335. if (res.data.point_goods) {
  336. this.type = 5;
  337. }
  338. this.getIndexList(res.data.shop_id);
  339. }
  340. });
  341. },
  342. /**组团商品*/
  343. getGroupsDetailInfo(id) {
  344. this.$shopHttp.get("/groupbuy/activitygoods/goodsInfo/" + id).then((res) => {
  345. this.loading = false;
  346. if (res && res.code == 200) {
  347. this.dataForm = res.data;
  348. this.goodsId = res.data.id;
  349. this.imglist = res.data.cover.split(",");
  350. this.getIndexList(res.data.shop_id);
  351. if (res.data.active_state == 0) {
  352. this.time1 = this.$mUtil
  353. .countDown(res.data.activity_start_time)
  354. .split(":");
  355. } else {
  356. this.time1 = this.$mUtil
  357. .countDown(res.data.finish_time)
  358. .split(":")
  359. .map((val) => Number(val));
  360. }
  361. }
  362. });
  363. },
  364. getSeckillDetail(id) {
  365. this.$shopHttp
  366. .get("/marketing/seckillActivityGoods/info/" + id)
  367. .then((res) => {
  368. this.loading = false;
  369. if (res && res.code == 200) {
  370. this.dataForm = res.data;
  371. this.goodsId = res.data.id;
  372. this.$shopHttp.get("/yxt/shop/info/" + res.data.shop_id).then((res) => {
  373. if (res.data && res.code == 200) {
  374. this.shop = res.data;
  375. }
  376. });
  377. this.imglist = res.data.cover.split(",");
  378. if (res.data.active_state == 0) {
  379. this.time1 = this.$mUtil
  380. .countDown(res.data.activity_start_time)
  381. .split(":");
  382. } else {
  383. this.time1 = this.$mUtil
  384. .countDown(res.data.finish_time)
  385. .split(":");
  386. }
  387. }
  388. });
  389. },
  390. getserviceDetailInfo(id) {
  391. this.$shopHttp.get("/service/goods/info/" + id).then((res) => {
  392. this.loading = false;
  393. if (res && res.code == 200) {
  394. this.dataForm = res.data;
  395. this.goodsId = res.data.id;
  396. this.imglist = res.data.images;
  397. this.shareImg = res.data.cover;
  398. this.shareTitle = res.data.title;
  399. this.getIndexList(res.data.shop_id);
  400. }
  401. });
  402. },
  403. /**
  404. * 详情
  405. * */
  406. goodsDetail(id) {
  407. this.$shopHttp.get(`/goods/content/${id}`).then((res) => {
  408. if (res && res.code == 200) {
  409. this.goodsInfo = res.data;
  410. }
  411. });
  412. },
  413. /*评论*/
  414. loadComment(id) {
  415. this.$shopHttp
  416. .get(`/comment/orderGoods/getgoodscomments/${id}`)
  417. .then((res) => {
  418. if (res && res.code == 200) {
  419. this.commentList = res.list;
  420. }
  421. });
  422. },
  423. //评论,商品详情切换
  424. change(i) {
  425. this.isChecked = i;
  426. },
  427. },
  428. };
  429. </script>
  430. <style lang="scss">
  431. page {
  432. background-color: #f5f5f5;
  433. }
  434. .pd24 {
  435. padding: 24rpx;
  436. }
  437. .pd20 {
  438. padding: 20rpx;
  439. }
  440. .pt20-pb14 {
  441. padding-top: 20rpx;
  442. padding-bottom: 14rpx;
  443. }
  444. .pt28-pb18 {
  445. padding-top: 28rpx;
  446. padding-bottom: 18rpx;
  447. }
  448. .pb30 {
  449. padding-bottom: 30rpx;
  450. }
  451. .pb40 {
  452. padding-bottom: 40rpx;
  453. }
  454. .pb50 {
  455. padding-bottom: 50rpx;
  456. }
  457. .pt-pb30 {
  458. padding-top: 30rpx;
  459. padding-bottom: 30rpx;
  460. }
  461. .pt-pb35 {
  462. padding-top: 35rpx;
  463. padding-bottom: 35rpx;
  464. }
  465. .ml54 {
  466. margin-left: 54rpx;
  467. }
  468. .ml138 {
  469. margin-left: 138rpx;
  470. }
  471. .br-rd10 {
  472. border-radius: 10rpx;
  473. }
  474. .br-rd20 {
  475. border-radius: 20rpx;
  476. }
  477. .stb-btn {
  478. padding: 8rpx 18rpx;
  479. border-radius: 10rpx;
  480. }
  481. .br-FF0000 {
  482. border: 1rpx solid #ff0000;
  483. border-radius: 24rpx;
  484. padding: 6rpx 12rpx;
  485. }
  486. .bg-FFF6EE {
  487. background-color: #fff6ee;
  488. }
  489. .mt30 {
  490. margin-top: 30rpx;
  491. }
  492. .product {
  493. padding-bottom: 150rpx;
  494. }
  495. .pic {
  496. width: 100%;
  497. position: relative;
  498. .swiper {
  499. height: 700rpx;
  500. video {
  501. width: 100%;
  502. height: 700rpx;
  503. }
  504. image {
  505. width: 100%;
  506. height: 700rpx;
  507. }
  508. }
  509. .p-price {
  510. width: 100%;
  511. position: absolute;
  512. top: 580rpx;
  513. background: #FA6138;
  514. position: relative;
  515. top: 0px;
  516. z-index: 9;
  517. .discount {
  518. color: #ffffff;
  519. }
  520. .p-ab {
  521. position: absolute;
  522. top: -5px;
  523. right: 0;
  524. }
  525. }
  526. }
  527. .richText {
  528. padding: 30rpx;
  529. /deep/ img {
  530. margin-top: 0 !important;
  531. vertical-align: middle;
  532. }
  533. }
  534. // 富文本展示
  535. .ql-editor-box {
  536. text-align: justify;
  537. /deep/ .ql-indent-1 {
  538. margin-left: 96rpx;
  539. }
  540. /deep/ .ql-indent-2 {
  541. margin-left: 192rpx;
  542. }
  543. /deep/ .ql-indent-3 {
  544. margin-left: 288rpx;
  545. }
  546. /deep/ .ql-indent-4 {
  547. margin-left: 384rpx;
  548. }
  549. /deep/ .ql-indent-5 {
  550. margin-left: 480rpx;
  551. }
  552. /deep/ .ql-indent-6 {
  553. margin-left: 576rpx;
  554. }
  555. /deep/ .ql-indent-7 {
  556. margin-left: 672rpx;
  557. }
  558. /deep/ .ql-indent-8 {
  559. margin-left: 768rpx;
  560. }
  561. /deep/ img {
  562. max-width: 100%;
  563. }
  564. /deep/ .ql-align-center {
  565. text-align: center;
  566. }
  567. /deep/ .ql-align-right {
  568. text-align: right;
  569. }
  570. /deep/ blockquote {
  571. display: block;
  572. border-left: 8px solid #d0e5f2;
  573. padding: 5px 10px;
  574. margin: 10px 0;
  575. line-height: 1.4;
  576. font-size: 100%;
  577. background-color: #f1f1f1;
  578. }
  579. /deep/ .ql-indent-1 {
  580. margin-left: 60rpx;
  581. }
  582. /deep/ .ql-indent-2 {
  583. margin-left: 120rpx;
  584. }
  585. /deep/ .ql-indent-3 {
  586. margin-left: 180rpx;
  587. }
  588. /deep/ .ql-indent-4 {
  589. margin-left: 240rpx;
  590. }
  591. /deep/ .ql-indent-5 {
  592. margin-left: 300rpx;
  593. }
  594. /deep/ .ql-size-huge {
  595. font-size: 80rpx;
  596. display: inline-block;
  597. line-height: 90rpx;
  598. }
  599. /deep/ .ql-size-large {
  600. font-size: 48rpx;
  601. display: inline-block;
  602. line-height: 50rpx;
  603. }
  604. /deep/ .ql-size-small {
  605. font-size: 24rpx;
  606. display: inline-block;
  607. line-height: 30rpx;
  608. }
  609. /deep/ .ql-font-serif {
  610. font-family: Georgia, Times New Roman, serif;
  611. }
  612. /deep/ .ql-font-monospace {
  613. font-family: Monaco, Courier New, monospace;
  614. }
  615. }
  616. //秒杀,拼团样式
  617. .p-ab {
  618. position: absolute;
  619. top: 448rpx;
  620. }
  621. .stb-list {
  622. padding-bottom: 10rpx;
  623. }
  624. .triangle-bottomright {
  625. width: 0;
  626. height: 0;
  627. border-bottom: 108rpx solid #FA6138;
  628. border-left: 60rpx solid transparent;
  629. }
  630. .seckill {
  631. background-color: #FA6138;
  632. color: #00321e;
  633. padding: 16rpx;
  634. padding-right: 28rpx;
  635. border-radius: 5rpx 20rpx 0px 0px;
  636. }
  637. .seckill-btn {
  638. width: 86%;
  639. }
  640. .br-284534 {
  641. border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  642. }
  643. .gb-te {
  644. padding-top: 20rpx;
  645. padding-bottom: 15rpx;
  646. }
  647. .gb-btn {
  648. padding: 18rpx 80rpx 8rpx;
  649. line-height: 30rpx;
  650. }
  651. .btn-bg-dccda4 {
  652. background: #FA6138;
  653. border-radius: 48rpx 0rpx 0rpx 48rpx;
  654. }
  655. .btn-bg-00321E {
  656. background: #00321e;
  657. border-radius: 0px 48px 48px 0px;
  658. }
  659. .tab {
  660. position: sticky;
  661. top: 0;
  662. background-color: #fff;
  663. padding-top: 38rpx;
  664. z-index: 9;
  665. .pb30 {
  666. position: relative;
  667. &::before {
  668. content: '';
  669. position: absolute;
  670. left: 50%;
  671. bottom: 0;
  672. transform: translateX(-50%);
  673. width: 0;
  674. height: 2px;
  675. background: #FA6138;
  676. transition: all 0.3s;
  677. }
  678. &.active {
  679. font-size: 30rpx;
  680. color: #FA6138;
  681. font-weight: 700;
  682. &::before {
  683. width: 100%;
  684. }
  685. }
  686. }
  687. }
  688. .bottom-btn {
  689. width: 100%;
  690. position: fixed;
  691. bottom: 0;
  692. z-index: 9;
  693. border-top: 1rpx solid #e6e6e6;
  694. .leftbox {
  695. display: flex;
  696. align-items: center;
  697. height: 84rpx;
  698. .u-text-center {
  699. margin-right: 20rpx;
  700. }
  701. .service {
  702. image {
  703. width: 40rpx;
  704. height: 40rpx;
  705. margin: 0 auto;
  706. }
  707. margin-right: 20rpx;
  708. }
  709. }
  710. .cart {
  711. position: relative;
  712. .car-icon {
  713. position: relative;
  714. .nums {
  715. font-size: 20rpx;
  716. color: #FFFFFF;
  717. font-weight: 400;
  718. padding: 4rpx;
  719. height: 30rpx;
  720. min-width: 30rpx;
  721. line-height: 23rpx;
  722. background-color: #FF0000;
  723. border-radius: 15rpx;
  724. position: absolute;
  725. right: 5rpx;
  726. top: -10rpx;
  727. }
  728. }
  729. .number {
  730. position: absolute;
  731. top: -10rpx;
  732. left: 45rpx;
  733. padding: 4rpx 8rpx;
  734. background-color: #ff0000;
  735. border: 4rpx solid #ffffff;
  736. border-radius: 40rpx;
  737. }
  738. }
  739. .cart-btn {
  740. width: 200rpx;
  741. height: 85rpx;
  742. line-height: 85rpx;
  743. background: #FF9651;
  744. color: white;
  745. border-radius: 40rpx;
  746. margin-right: 10rpx;
  747. }
  748. .buy-btn {
  749. width: 200rpx;
  750. height: 85rpx;
  751. color: white;
  752. line-height: 85rpx;
  753. background: #FA6138;
  754. border-radius: 40rpx;
  755. margin-left: 10rpx;
  756. }
  757. }
  758. .flex-sb {
  759. display: flex;
  760. justify-content: space-between;
  761. }
  762. //弹窗
  763. .spec {
  764. border-radius: 18rpx 18rpx 0rpx 0rpx;
  765. padding-top: 30rpx;
  766. max-height: 900rpx;
  767. overflow-y: auto;
  768. .spec-item {
  769. background-color: #f6f6f6;
  770. border: 1px solid #f6f6f6;
  771. padding: 12rpx 30rpx;
  772. font-size: 24rpx;
  773. color: #1a1a1a;
  774. border-radius: 4px;
  775. }
  776. .activeColor {
  777. background-color: #e1e6e3;
  778. border: 1px solid #01321d;
  779. color: #01321d;
  780. border-radius: 4px;
  781. }
  782. .spec-item:not(:last-child) {
  783. margin-right: 24rpx;
  784. }
  785. //减号
  786. .minus {
  787. width: 50rpx;
  788. height: 50rpx;
  789. line-height: 50rpx;
  790. text-align: center;
  791. background: #dedede;
  792. border-radius: 8rpx 0rpx 0rpx 8rpx;
  793. }
  794. .num {
  795. width: 74rpx;
  796. height: 46rpx;
  797. line-height: 46rpx;
  798. text-align: center;
  799. border: 1px solid #dedede;
  800. }
  801. //加号
  802. .plus-sign {
  803. width: 50rpx;
  804. height: 50rpx;
  805. line-height: 50rpx;
  806. text-align: center;
  807. background: #dedede;
  808. border-radius: 0rpx 8rpx 8rpx 0rpx;
  809. }
  810. .specOpen-btn {
  811. margin-top: 68rpx;
  812. padding-bottom: 34rpx;
  813. button {
  814. background-color: #01331f;
  815. color: #ffffff;
  816. }
  817. }
  818. }
  819. .goods-tools {
  820. display: flex;
  821. flex-direction: column;
  822. justify-content: flex-end;
  823. height: 84rpx;
  824. line-height: 42rpx;
  825. }
  826. .jump-box {
  827. position: fixed;
  828. left: 50%;
  829. bottom: 200rpx;
  830. display: flex;
  831. justify-content: center;
  832. align-items: center;
  833. width: 350rpx;
  834. height: 80rpx;
  835. color: #fff;
  836. background-color: #6be5f8;
  837. border-radius: 40rpx;
  838. transform: translateX(-50%);
  839. z-index: 99;
  840. .logo-img {
  841. width: 40rpx;
  842. height: 40rpx;
  843. margin-right: 10rpx;
  844. box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
  845. }
  846. .tip {
  847. font-size: 28rpx;
  848. }
  849. }
  850. .view-alert {
  851. /* position: absolute;
  852. left: 0;
  853. top: 0;
  854. z-index: 9; */
  855. width: 750rpx;
  856. background: rgb(52, 52, 52);
  857. margin-left: 0px;
  858. margin-right: 0px;
  859. padding: 60rpx 30rpx 60rpx 60rpx;
  860. box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
  861. display: flex;
  862. justify-content: space-between;
  863. align-items: stretch;
  864. box-sizing: border-box;
  865. .alert-text {
  866. flex: 1;
  867. color: #7f7e7e;
  868. font-weight: 400 !important;
  869. padding-right: 60rpx;
  870. line-height: 1.5;
  871. }
  872. .alert-arrow {
  873. flex-shrink: 0;
  874. width: 60rpx;
  875. height: 60rpx;
  876. margin-top: -30rpx;
  877. }
  878. }
  879. .wx-open {
  880. position: fixed;
  881. bottom: 400rpx;
  882. left: 50%;
  883. width: 300rpx;
  884. height: 100rpx;
  885. color: #fff;
  886. background-color: red;
  887. transform: translateX(-50%);
  888. z-index: 9;
  889. #launch-btn {
  890. width: 100%;
  891. height: 100%;
  892. }
  893. }
  894. </style>