goodsDetail.vue 20 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219
  1. <template>
  2. <block>
  3. <view class="info" >
  4. <view class="tInfo">
  5. <view class="swWrape">
  6. <swiper>
  7. <swiper-item class="iflex icenterY">
  8. <image class="infoimg" :src="info.image"></image>
  9. </swiper-item>
  10. </swiper>
  11. <view class="bannerLength">1/1</view>
  12. </view>
  13. <view class="infoname">
  14. <view class="infotitle">
  15. <view>
  16. <text class="money">
  17. {{ info.sales_price }}
  18. </text>
  19. <text class="jifen">积分</text>
  20. <!-- <text class="g-through">原价: {{info.good_price}}元</text> -->
  21. </view>
  22. <button class="shareBtn" open-type="share">
  23. <image class="shareImg"
  24. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/c767950ebad9cf6c70452c2994f452f9.png"
  25. mode="widthFix"></image>
  26. </button>
  27. </view>
  28. <view class="infocost">{{ info.title }}</view>
  29. <!-- <text class="g-describe" wx:if="{{info.good_info}}">{{info.good_info}}</text> -->
  30. <!-- <view class="iflex iwrap">
  31. <view class="g-add" wx:if="{{info.Label}}" wx:for="{{info.Label}}" wx:key='index'>
  32. <text class="iconfont ico-moon icon-gou " style="color: white"></text>
  33. <text class="g-margin">{{item}}</text>
  34. </view>
  35. </view> -->
  36. <view class="g-num">已兑 {{ info.sales }} 份 / 仅剩 {{ info.stock - info.sales }} 份</view>
  37. <view class="gbTipWrap iflex">
  38. <!-- <view class="tipItem icenterY">
  39. <image
  40. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9ea4afd2b2c18539fa5abe6e1d547e9d.png"
  41. mode="widthFix"></image>
  42. <view>运费: {{ info.freight ? '¥' + info.freight : '免运费' }}</view>
  43. </view> -->
  44. <view class="tipItem icenterY">
  45. <image
  46. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9ea4afd2b2c18539fa5abe6e1d547e9d.png"
  47. mode="widthFix"></image>
  48. <view>不与其他优惠叠加</view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="section">
  55. <view class="sectioninfo">
  56. <view class="nodesTip">商品介绍</view>
  57. <view class="width">
  58. <rich-text :nodes="info.desc"></rich-text>
  59. </view>
  60. </view>
  61. <!-- <view class="comment">
  62. <view class="nodesTip">购买须知</view>
  63. <view class="xzItem">1.本实物商品无质量问题不支持退换货。</view>
  64. <view class="xzItem">2.兑换结果以订单详情为准,可通过“我的兑换”查看订单状态。</view>
  65. <view class="xzItem">3. 同城线下兑换商品需持兑换券到实体店进行核销领取。</view>
  66. </view> -->
  67. <!-- <view class="comment" wx:if="{{nowIndex == 1}}"> -->
  68. </view>
  69. </view>
  70. <view class="foot"></view>
  71. <view class="footer iflex">
  72. <view class="footbtn1">
  73. <view class="goBtn1" @tap="toPage1('/pages/index/index')" >
  74. <image
  75. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0e26cf96bbf19ca8d369dc6743323a3c.png">
  76. </image>
  77. <view>首页</view>
  78. </view>
  79. <view class="goBtn1" @tap="toPage" data-url="/pages/intergalShop/logs">
  80. <image
  81. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/2e5635d78681e5adfa44ec2ae5205614.png">
  82. </image>
  83. <view>我的兑换</view>
  84. </view>
  85. </view>
  86. <!-- <button open-type="share" class="footbtn g-btn1">商品分享</button> -->
  87. <button @tap="duihuan" class="footbtn g-btn2" >马上兑换</button>
  88. </view>
  89. </view>
  90. <!-- 点击退出选择数量规格 -->
  91. <view @tap="emptyActive" :class="'fui-mask ' + active"></view>
  92. <!-- 选择规格 -->
  93. <view :class="'fui-modal2 picker-modal2 ' + slider" v-if="tempname == 'select-picker'">
  94. <view class="option-picker">
  95. <view class="option-picker-inner">
  96. <view class="option-picker-cell goodinfo">
  97. <view class="img">
  98. <image class="thumb" :src="info.image"
  99. style="width: 100%; height: 100%"></image>
  100. </view>
  101. <view class="infoBox">
  102. <view class="info info-price text-danger">
  103. <span>
  104. <span class="price">
  105. <text class="money" style="font-size: 36rpx">
  106. {{ info.sales_price }}
  107. </text>
  108. <text class="jifen">积分</text>
  109. </span>
  110. </span>
  111. </view>
  112. <view class="info info-total" style="margin-top: 12rpx;font-weight: 700;">
  113. {{info.title}}
  114. </view>
  115. </view>
  116. <image @tap="emptyActive" mode="widthFix" class="closePicker"
  117. src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/25554f20fb99ca391b862bf4a2269642.png">
  118. </image>
  119. </view>
  120. </view>
  121. <view class="footBtn">
  122. <view href="javascript:;" :data-id="info.id" @tap="goDetail" class="confirmbtn">确定兑换</view>
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. </block>
  128. </template>
  129. <script>
  130. var app = getApp();
  131. var running = false;
  132. export default {
  133. data() {
  134. return {
  135. id: 0,
  136. //弹框
  137. slider: '',
  138. active: '',
  139. //蒙版层
  140. specsTitle: '',
  141. tempname:'',
  142. info: {
  143. },
  144. };
  145. },
  146. /**
  147. * 生命周期函数--监听页面加载
  148. */
  149. onLoad: function(options) {
  150. var that = this;
  151. console.log(options)
  152. this.id = options.id;
  153. this.getinfo()
  154. },
  155. /**
  156. * 生命周期函数--监听页面显示
  157. */
  158. onShow: function() {},
  159. /**
  160. * 下拉刷新
  161. */
  162. onPullDownRefresh: function() {
  163. this.getinfo();
  164. uni.stopPullDownRefresh();
  165. },
  166. /**
  167. * 页面上拉触底事件的处理函数
  168. */
  169. onReachBottom: function() {
  170. },
  171. onShareTimeline: function() {
  172. },
  173. /**
  174. * 用户点击右上角分享
  175. */
  176. onShareAppMessage: function() {
  177. },
  178. methods: {
  179. /**
  180. *隐藏 选选数量、规格的 弹框
  181. */
  182. emptyActive: function() {
  183. this.active = '',
  184. this.slider = 'out' //showPicker: false,
  185. },
  186. /**
  187. * 选择规格
  188. */
  189. change_sku(t) {
  190. let that = this;
  191. let idx = t.target.dataset.idx;
  192. let sku_name = t.target.dataset.name;
  193. let r = that.select_sku;
  194. let s = '';
  195. r[idx] = sku_name;
  196. that.setData({
  197. select_sku: r
  198. });
  199. if (r.length == that.info.sku_val.length) {
  200. s = r.toString();
  201. that.info.sku_data.forEach((v, i) => {
  202. if (s == v.sku_str) {
  203. that.setData({
  204. 'info.price': v.price,
  205. 'info.integral': v.integral,
  206. 'info.sku_pic': v.img,
  207. 'info.kucun': v.kucun,
  208. sku_key: i
  209. });
  210. }
  211. });
  212. }
  213. return;
  214. },
  215. //点击确定兑换
  216. goDetail() {
  217. wx.navigateTo({
  218. url: '/pages/intergalShop/confirm?id='+this.id
  219. })
  220. },
  221. changNav(e) {
  222. // 切换nav
  223. if (this.nowIndex != e.currentTarget.dataset.index) {
  224. this.setData({
  225. nowIndex: e.currentTarget.dataset.index
  226. });
  227. }
  228. },
  229. async getinfo() {
  230. // 获取商品详情
  231. let data = await this.$api.request('/product/detail','GET',{
  232. id:this.id
  233. });
  234. data.desc = data.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
  235. console.log(data)
  236. this.info = data;
  237. },
  238. toPage(e) {
  239. app.globalData.toPage(e);
  240. },
  241. toPage1(e) {
  242. uni.switchTab({
  243. url:e
  244. })
  245. },
  246. duihuan: function() {
  247. this.active = 'active'
  248. this.slider = 'in'
  249. this.tempname = 'select-picker'
  250. },
  251. }
  252. };
  253. </script>
  254. <style>
  255. .option-picker .option-picker-cell.option {
  256. border-top: 1px solid #eee;
  257. }
  258. .option-picker .option-picker-cell {
  259. padding: 8rpx 20rpx 20rpx 20rpx;
  260. }
  261. .option-picker .option-picker-cell.option .select .nav {
  262. height: auto;
  263. width: auto;
  264. border: 0;
  265. float: left;
  266. margin: 16rpx 24rpx 0 0;
  267. padding: 4rpx 26rpx;
  268. }
  269. .option-picker .option-picker-cell.option .title {
  270. font-size: 29rpx;
  271. height: auto;
  272. overflow: hidden;
  273. float: left;
  274. color: #8f8f8f;
  275. margin-top: 32rpx;
  276. margin-right: 30rpx;
  277. }
  278. .option-picker .option-picker-cell.option .select {
  279. font-size: 29rpx;
  280. color: #666;
  281. height: auto;
  282. overflow: hidden;
  283. }
  284. .fui-navbar .confirmbtn {
  285. width: 100%;
  286. line-height: 90rpx;
  287. font-size: 30rpx;
  288. height: 100rpx;
  289. text-align: center;
  290. vertical-align: middle;
  291. display: table-cell;
  292. position: relative;
  293. }
  294. .option-picker .option-picker-cell.goodinfo .img {
  295. height: 132rpx;
  296. width: 132rpx;
  297. background: #fff;
  298. border: 1px solid #eee;
  299. border-radius: 10rpx;
  300. /* position: absolute;
  301. top: -65rpx;
  302. left: 20rpx; */
  303. box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
  304. }
  305. .fui-mask {
  306. position: fixed;
  307. top: -1000rpx;
  308. left: 0;
  309. bottom: 0;
  310. right: 0;
  311. background: rgba(0, 0, 0, 0.7);
  312. z-index: 120;
  313. display: none;
  314. width: 100%;
  315. }
  316. .option-picker .option-picker-cell.goodinfo .img image {
  317. height: 100%;
  318. width: 100%;
  319. border-radius: 10rpx;
  320. }
  321. .fui-mask.active {
  322. display: block;
  323. }
  324. .option-picker {
  325. height: auto;
  326. width: 100%;
  327. padding: 12rpx 0 50rpx;
  328. z-index: 1001;
  329. background: #fff;
  330. }
  331. .option-picker-inner {
  332. background: #fff;
  333. /* border-top: 2rpx solid #eee; */
  334. box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
  335. padding-bottom: 40rpx;
  336. }
  337. .option-picker .option-picker-cell.goodinfo {
  338. /* padding-left: 225rpx; */
  339. position: relative;
  340. display: flex;
  341. align-items: flex-start;
  342. }
  343. .option-picker .option-picker-options {
  344. margin: 0;
  345. padding: 0;
  346. overflow-y: auto;
  347. -webkit-overflow-scrolling: touch;
  348. max-height: 600rpx;
  349. }
  350. .option-picker .option-picker-cell.option {
  351. position: relative;
  352. }
  353. .option-picker .option-picker-cell {
  354. padding: 8rpx 20rpx 20rpx 20rpx;
  355. }
  356. .option-picker .fui-navbar {
  357. text-shadow: none;
  358. }
  359. .fui-modal2 {
  360. position: fixed;
  361. top: auto;
  362. bottom: 0;
  363. left: 0;
  364. right: 0;
  365. width: 100%;
  366. z-index: 1001;
  367. }
  368. .confirmbtn {
  369. width: 674rpx;
  370. height: 96rpx;
  371. background: #FB4C6F;
  372. border-radius: 60rpx;
  373. display: flex;
  374. align-items: center;
  375. justify-content: center;
  376. color: #ffffff;
  377. margin: 50rpx auto 0;
  378. font-size: 35rpx;
  379. }
  380. .fui-cell-group02 .fui-cell02 {
  381. padding-top: 20rpx;
  382. }
  383. .fui-cell-label {
  384. width: 70rpx;
  385. margin-left: 22rpx;
  386. float: left;
  387. color: #8f8f8f;
  388. font-size: 29rpx;
  389. padding-top: 18rpx;
  390. margin-right: 20rpx;
  391. }
  392. .fui-cell-mask {
  393. width: 200rpx;
  394. margin-left: 0rpx;
  395. float: left;
  396. margin-bottom: 0.6rem;
  397. }
  398. .fui-number {
  399. -webkit-backface-visibility: hidden;
  400. backface-visibility: hidden;
  401. box-sizing: border-box;
  402. position: relative;
  403. display: -webkit-box;
  404. display: -ms-flexbox;
  405. display: -webkit-flex;
  406. display: flex;
  407. font-size: 26rpx;
  408. margin: 0;
  409. height: 60rpx;
  410. width: 200rpx;
  411. -webkit-justify-content: center;
  412. justify-content: center;
  413. -webkit-align-items: center;
  414. align-items: center;
  415. border-radius: 16rpx;
  416. }
  417. .minus,
  418. .plus {
  419. width: 60rpx;
  420. height: 60rpx;
  421. font-size: 50rpx;
  422. font-weight: bold;
  423. color: #5e5e5e;
  424. position: relative;
  425. text-align: center;
  426. line-height: 55rpx;
  427. z-index: 99999999;
  428. }
  429. .fui-number .num {
  430. -webkit-box-flex: 1;
  431. -webkit-flex: 1;
  432. -ms-flex: 1;
  433. flex: 1;
  434. height: 40rpx;
  435. color: #666;
  436. text-align: center;
  437. border: 0;
  438. width: 80rpx;
  439. font-size: 34rpx;
  440. }
  441. .plus {
  442. position: relative;
  443. width: 60rpx;
  444. background: url('http://ddfwz.sssvip.net/asmce/yigou/plus.png') center center no-repeat;
  445. background-size: 40rpx 40rpx;
  446. }
  447. .minus {
  448. position: relative;
  449. width: 60rpx;
  450. background: url('http://ddfwz.sssvip.net/asmce/yigou/minus.png') center center no-repeat;
  451. background-size: 40rpx 40rpx;
  452. }
  453. .fui-modal2.picker-modal2.in {
  454. -moz-transition-duration: 300ms;
  455. -webkit-transition-duration: 300ms;
  456. transition-duration: 300ms;
  457. -webkit-transform: translate3d(0, 0, 0);
  458. transform: translate3d(0, 0, 0);
  459. }
  460. .fui-modal2.picker-modal2.out {
  461. bottom: -200rpx;
  462. -moz-transition-duration: 300ms;
  463. -webkit-transition-duration: 300ms;
  464. transition-duration: 300ms;
  465. -webkit-transform: translate3d(0, 100%, 0);
  466. transform: translate3d(0, 100%, 0);
  467. }
  468. page {
  469. background: #f7f7f7;
  470. }
  471. .info {
  472. width: 100%;
  473. overflow-x: hidden;
  474. }
  475. .flex3 {
  476. display: flex;
  477. flex-direction: column;
  478. justify-content: center;
  479. align-items: center;
  480. }
  481. .header {
  482. width: 750rpx;
  483. height: 600rpx;
  484. }
  485. .swWrape {
  486. height: 730rpx;
  487. width: 730rpx;
  488. position: relative;
  489. }
  490. swiper {
  491. height: 730rpx;
  492. width: 730rpx;
  493. background: white;
  494. border-bottom: 1px solid #ececec;
  495. border-radius: 20rpx;
  496. }
  497. .bannerLength {
  498. position: absolute;
  499. width: 76rpx;
  500. height: 36rpx;
  501. background: rgba(0, 0, 0, 0.4);
  502. border-radius: 40rpx;
  503. color: #fff;
  504. font-size: 22rpx;
  505. text-align: center;
  506. line-height: 36rpx;
  507. bottom: 30rpx;
  508. right: 20rpx;
  509. }
  510. .infoimg {
  511. width: 100%;
  512. border-radius: 20rpx;
  513. height: 100%;
  514. }
  515. .infoname {
  516. background-color: white;
  517. padding: 16rpx 20rpx 30rpx 30rpx;
  518. margin: -10rpx 0 0rpx;
  519. border-radius: 0 0 20rpx 20rpx;
  520. }
  521. .infotitle {
  522. display: flex;
  523. flex-direction: row;
  524. justify-content: space-between;
  525. align-items: center;
  526. background-color: white;
  527. font-size: 30rpx;
  528. letter-spacing: 0;
  529. padding-top: 10rpx;
  530. margin: 10rpx 0 12rpx;
  531. }
  532. .sysl {
  533. color: #ff5200;
  534. font-size: 28rpx;
  535. }
  536. .infocontent {
  537. color: #666;
  538. }
  539. .infocost {
  540. color: #333;
  541. font-size: 35rpx;
  542. /* margin-top: 10rpx; */
  543. /* border-top: 1px solid #ececec; */
  544. padding: 10rpx 0 10rpx;
  545. font-weight: 700;
  546. }
  547. .money {
  548. font-size: 46rpx;
  549. color: #FB4C6F;
  550. font-weight: bold;
  551. }
  552. .jifen {
  553. font-size: 28rpx;
  554. color: #FB4C6F;
  555. margin-left: 12rpx;
  556. }
  557. .g-through {
  558. text-decoration: line-through;
  559. font-size: 28rpx;
  560. color: #666;
  561. }
  562. .g-num {
  563. font-size: 26rpx;
  564. color: #000;
  565. margin-right: 100rpx;
  566. margin-bottom: 30rpx;
  567. }
  568. .g-describe {
  569. color: #ccc;
  570. font-size: 24rpx;
  571. width: 80%;
  572. text-overflow: ellipsis;
  573. overflow: hidden;
  574. display: -webkit-box;
  575. -webkit-line-clamp: 2;
  576. -webkit-box-orient: vertical;
  577. word-break: break-all;
  578. margin: 10rpx 0;
  579. }
  580. .g-add {
  581. font-size: 24rpx;
  582. color: #666;
  583. margin-top: 26rpx;
  584. flex-shrink: 0;
  585. min-width: 160rpx;
  586. }
  587. .g-add .iconfont {
  588. display: inline-block;
  589. background: red;
  590. height: 28rpx;
  591. width: 28rpx;
  592. text-align: center;
  593. line-height: 28rpx;
  594. border-radius: 50%;
  595. margin-right: 12rpx;
  596. }
  597. .g-navs {
  598. position: relative;
  599. padding: 34rpx 0 20rpx;
  600. }
  601. .g-navs text {
  602. width: 50%;
  603. text-align: center;
  604. color: #666;
  605. }
  606. .g-navs .active {
  607. color: #333;
  608. font-weight: 500;
  609. }
  610. .g-underLine {
  611. position: absolute;
  612. bottom: 0;
  613. height: 6rpx;
  614. width: 150rpx;
  615. background: #ea3f33;
  616. left: 0;
  617. transition: left 0.5s;
  618. }
  619. .g-btn1 {
  620. background: linear-gradient(to right, #ff7f15, #f64609);
  621. color: white;
  622. border-radius: 30px 0px 0px 30px;
  623. }
  624. .g-btn2 {
  625. background: #FB4C6F;
  626. color: white;
  627. width: 203rpx;
  628. height: 86rpx;
  629. border-radius: 30px;
  630. }
  631. .g-btn3 {
  632. background: grey;
  633. color: white;
  634. width: 223rpx;
  635. height: 86rpx;
  636. border-radius: 30px;
  637. }
  638. .money1 {
  639. font-size: 25rpx;
  640. margin-left: 20rpx;
  641. color: #999;
  642. text-decoration: line-through;
  643. }
  644. .section {
  645. /* background-color: white; */
  646. margin: 0 18rpx 30rpx;
  647. border-radius: 20rpx;
  648. }
  649. .sectioninfo {
  650. font-size: 28rpx;
  651. color: #333;
  652. margin-top: 20rpx;
  653. padding: 0 20rpx;
  654. border-radius: 12rpx;
  655. background: #fff;
  656. }
  657. .foot {
  658. width: 100%;
  659. height: 120rpx;
  660. }
  661. .footer {
  662. background-color: white;
  663. padding: 20rpx;
  664. position: fixed;
  665. bottom: 0rpx;
  666. left: 0rpx;
  667. width: 100% ;
  668. z-index: 2;
  669. color: #666;
  670. font-size: 32rpx;
  671. justify-content: space-between;
  672. }
  673. .footbtn {
  674. font-size: 30rpx;
  675. line-height: 3em;
  676. text-align: center;
  677. padding: 0;
  678. }
  679. .footbtn:after {
  680. border: none;
  681. }
  682. .footbtn .shareicon {
  683. border-radius: 50%;
  684. height: 56rpx;
  685. width: 56rpx;
  686. line-height: 56rpx;
  687. background: #e6e6e6;
  688. color: #666;
  689. display: inline-block;
  690. margin-right: 14rpx;
  691. font-size: 32rpx;
  692. }
  693. .weui-cells {
  694. font-size: 30rpx;
  695. color: #333;
  696. }
  697. .weui-cell {
  698. padding: 5px 15px;
  699. }
  700. .weui-label {
  701. width: 160rpx;
  702. }
  703. .fg {
  704. width: 8rpx;
  705. height: 34rpx;
  706. background: #ff5200;
  707. margin-top: 5rpx;
  708. position: absolute;
  709. margin-left: 30rpx;
  710. }
  711. .details {
  712. margin: 30rpx 30rpx 0;
  713. }
  714. .red {
  715. color: red;
  716. }
  717. .comment {
  718. padding: 20rpx;
  719. font-size: 28rpx;
  720. margin-top: 30rpx;
  721. background: #fff;
  722. border-radius: 12rpx;
  723. }
  724. .tuxiang {
  725. width: 72rpx;
  726. height: 72rpx;
  727. border-radius: 50%;
  728. margin-left: 20rpx;
  729. }
  730. .comment_name {
  731. font-size: 30rpx;
  732. color: #333;
  733. overflow: hidden;
  734. text-overflow: ellipsis;
  735. white-space: nowrap;
  736. }
  737. .comment_times {
  738. font-size: 22rpx;
  739. color: #999999;
  740. }
  741. .grade {
  742. width: 28rpx;
  743. height: 28rpx;
  744. float: left;
  745. margin-left: 5rpx;
  746. margin-top: 4px;
  747. }
  748. .param_content {
  749. display: block;
  750. margin-top: 16rpx;
  751. padding-left: 26rpx;
  752. font-size: 26rpx;
  753. color: #666;
  754. padding-right: 20rpx;
  755. }
  756. .comment_img {
  757. width: 100%;
  758. height: 200rpx;
  759. }
  760. .comment_time_shop {
  761. font-size: 24rpx;
  762. color: #999;
  763. height: 50rpx;
  764. position: absolute;
  765. right: 10px;
  766. margin-top: 19px;
  767. }
  768. .business_shop {
  769. display: block;
  770. font-size: 30rpx;
  771. color: gray;
  772. padding-right: 20rpx;
  773. padding-left: 26rpx;
  774. background: #e5e5e5;
  775. line-height: 31px;
  776. width: 90%;
  777. border-radius: 6px;
  778. }
  779. .wxParse-img {
  780. width: 100%;
  781. padding: 0;
  782. }
  783. .footbtn1 {
  784. display: flex;
  785. align-items: center;
  786. }
  787. .goBtn1 {
  788. display: flex;
  789. flex-direction: column;
  790. align-items: center;
  791. }
  792. .goBtn1>image {
  793. width: 47rpx;
  794. height: 47rpx;
  795. }
  796. .goBtn1>view {
  797. font-size: 25rpx;
  798. margin-top: 10rpx;
  799. color: #000;
  800. }
  801. .goBtn1:nth-child(1) {
  802. margin-left: 20rpx;
  803. padding-right: 30rpx;
  804. border-right: 1px solid #dcdcdc;
  805. }
  806. .goBtn1:nth-child(2) {
  807. margin-left: 35rpx;
  808. }
  809. .tInfo {
  810. width: 100%;
  811. padding: 10rpx 10rpx 0 10rpx;
  812. box-sizing: border-box;
  813. border-radius: 20rpx;
  814. }
  815. .gbTipWrap {
  816. margin-top: 20rpx;
  817. }
  818. .tipItem {
  819. margin-right: 40rpx;
  820. }
  821. .tipItem>view {
  822. font-size: 22rpx;
  823. color: #666;
  824. margin-left: 10rpx;
  825. }
  826. .tipItem>image {
  827. width: 24rpx;
  828. height: 24rpx;
  829. }
  830. .shopInfo {
  831. padding: 24rpx 24rpx 30rpx 24rpx;
  832. margin: 18rpx 20rpx;
  833. border-radius: 20rpx;
  834. }
  835. .shopTop-name {
  836. font-size: 28rpx;
  837. width: 500rpx;
  838. }
  839. .shopTop-btn {
  840. width: 83rpx;
  841. height: 35rpx;
  842. display: flex;
  843. justify-content: center;
  844. align-items: center;
  845. color: #fd6000;
  846. border: 1px solid #fd6000;
  847. border-radius: 30rpx;
  848. font-size: 25rpx;
  849. }
  850. .shopBot {
  851. margin-top: 30rpx;
  852. }
  853. .shopTD {
  854. flex: 1;
  855. display: flex;
  856. flex-direction: column;
  857. }
  858. .l-shopTime,
  859. .l-shopAddress {
  860. font-size: 25rpx;
  861. color: #666;
  862. line-height: 1;
  863. }
  864. .l-shopAddress {
  865. width: 410rpx;
  866. margin-top: 18rpx;
  867. }
  868. .shoploc:first-of-type {
  869. max-width: 104rpx;
  870. }
  871. .shoploc {
  872. font-size: 20rpx;
  873. color: #999;
  874. line-height: 1;
  875. }
  876. .shoploc image {
  877. width: 42rpx;
  878. height: 42rpx;
  879. margin-bottom: 12rpx;
  880. }
  881. .shopSu {
  882. height: 48rpx;
  883. width: 1rpx;
  884. background: #999999;
  885. margin: 0 38rpx;
  886. }
  887. .nodesTip {
  888. padding: 20rpx 0;
  889. display: flex;
  890. align-items: center;
  891. justify-content: space-between;
  892. font-weight: 700;
  893. font-size: 35rpx;
  894. }
  895. .nodesTip>view:nth-child(1) {
  896. font-size: 35rpx;
  897. font-weight: 700;
  898. }
  899. .nodesTip>view:nth-child(2) {
  900. font-size: 25rpx;
  901. color: #fd6000;
  902. }
  903. .xzItem {
  904. font-size: 25rpx;
  905. color: #333;
  906. margin: 0rpx 0 20rpx;
  907. }
  908. .shareImg {
  909. width: 42rpx;
  910. }
  911. .shareBtn {
  912. padding-right: 10rpx;
  913. }
  914. button::after {
  915. border: none;
  916. }
  917. button {
  918. background: #fff;
  919. padding: 0;
  920. margin: 0;
  921. line-height: 1;
  922. }
  923. button {
  924. border-radius: 0;
  925. }
  926. .button-hover {
  927. background: none;
  928. }
  929. .commentInfWrap {
  930. display: flex;
  931. align-items: center;
  932. margin-top: 24rpx;
  933. }
  934. .commentTop {
  935. height: 88rpx;
  936. justify-content: center;
  937. margin-left: 21rpx;
  938. }
  939. .infoBox {
  940. margin-left: 20rpx;
  941. margin-top: 12rpx;
  942. }
  943. .closePicker {
  944. position: absolute;
  945. width: 24rpx;
  946. right: 20rpx;
  947. top: 20rpx;
  948. }
  949. .shopPickInfo {
  950. box-sizing: border-box;
  951. padding: 0 30rpx;
  952. margin-top: 12rpx;
  953. }
  954. .shopPickTip {
  955. font-size: 25rpx;
  956. color: #333333;
  957. }
  958. .shopPickAddress {
  959. display: flex;
  960. align-items: center;
  961. justify-content: space-between;
  962. margin: 18rpx 0 30rpx;
  963. }
  964. .shopPickAddressLeft {
  965. display: flex;
  966. align-items: center;
  967. }
  968. .shopPickAddressLeft>view {
  969. font-size: 25rpx;
  970. color: #333333;
  971. margin-left: 12rpx;
  972. }
  973. .shopPickAddressLeft>image {
  974. width: 20rpx;
  975. }
  976. .shopPickAddressRight {
  977. width: 30rpx;
  978. }
  979. .shopPickStatus {
  980. width: 182rpx;
  981. height: 58rpx;
  982. text-align: center;
  983. line-height: 58rpx;
  984. border-radius: 40rpx;
  985. color: #fd6000;
  986. background: #fff0e6;
  987. font-size: 28rpx;
  988. }
  989. .iflex {
  990. display: flex;
  991. }
  992. .icentery,
  993. .icenterY {
  994. display: flex;
  995. align-items: center;
  996. flex-direction: row;
  997. }
  998. </style>