goods.vue 23 KB

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