detail.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. <template>
  2. <view class="page">
  3. <view class="swiper-sec">
  4. <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
  5. <swiper-item v-for="(item, idx) in 3" :key="idx" class="swiper-item">
  6. <view class="img-wrap"><image src="/static/temp/pro.png" mode="aspectFill" class="img"></image></view>
  7. </swiper-item>
  8. </swiper>
  9. <view class="ic-wrap align-center justify-center"><image src="/static/love-full.png" mode="aspectFill" class="ic"></image></view>
  10. </view>
  11. <view class="header-sec">
  12. <view class="flex-col name-wrap">
  13. <view class="flex-col">
  14. <view class="flex-row">
  15. <text class="text_2 clamp">幸福西饼Rice盲盒</text>
  16. <view class="text-wrapper text_3 clamp">仅剩3份</view>
  17. </view>
  18. <image
  19. src="/static/mangd-rarrow.png"
  20. class="image_8 image_9"
  21. />
  22. </view>
  23. <view class="align-center group_10">
  24. <view class="stars align-center">
  25. <image
  26. src="/static/mang_star.png"
  27. class="image_10"
  28. v-for="(item,idx) in 3"
  29. :key="idx"
  30. />
  31. </view>
  32. <text class="text_4">随机搭配</text>
  33. </view>
  34. </view>
  35. <view class="border-wrap"></view>
  36. <view class="flex-row time-wrap">
  37. <text class="text_5">自提时间</text>
  38. <text class="text_6">今天15:00~22:00</text>
  39. </view>
  40. <view class="border-wrap"></view>
  41. <view class="flex-col loc-wrap">
  42. <view class="flex-row justify-between items-start">
  43. <view class="flex-row">
  44. <image
  45. src="/static/temp/pro.png"
  46. class="image_12"
  47. mode="aspectFill"
  48. />
  49. <view class="flex-col items-start group_15">
  50. <text class="text_7 clamp">幸福西饼万达店</text>
  51. <text class="text_8 clamp2">河东区万达广场1F东门入口</text>
  52. </view>
  53. </view>
  54. <view class="flex-row group_16">
  55. <view class="flex-col items-center image-wrapper">
  56. <image
  57. src="/static/mangd-loc.png"
  58. class="image_13"
  59. mode="aspectFill"
  60. />
  61. </view>
  62. <view class="section_5"><!--*--></view>
  63. <view class="flex-col items-center image-wrapper view_3">
  64. <image
  65. src="/static/mang-phone.png"
  66. class="image_14"
  67. mode="aspectFill"
  68. />
  69. </view>
  70. </view>
  71. </view>
  72. <view class="group_17">
  73. <text class="text_9">距离您</text>
  74. <text class="text_10">864m</text>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="line-wrap"></view>
  79. <view class="flex-col items-start tips-wrap">
  80. <text class="title">盲盒内能得到什么</text>
  81. <text class="text_12">随机获得四拼蛋糕,奶油慕斯蛋糕二选一<br/>精致蛋挞、南瓜蛋糕二选一</text>
  82. </view>
  83. <view class="line-wrap"></view>
  84. <view class="review-sec">
  85. <view class="title-wrap align-center justify-between">
  86. <text class="text_14">商品评价</text>
  87. <view class="flex-row group_21">
  88. <text class="text_15">查看全部</text>
  89. <image
  90. src="/static/mangd-rarrow.png"
  91. class="image_8 image_15"
  92. mode="aspectFill"
  93. />
  94. </view>
  95. </view>
  96. <evaItem v-for="(item,idx) in 3" :key="idx" />
  97. </view>
  98. <view class="line-wrap"></view>
  99. <view class="rich-wrap">
  100. <rich-text :nodes="richTxt" class="rich"></rich-text>
  101. </view>
  102. <view class="btn-wrap">
  103. <view class="flex-row group_34">
  104. <view class="flex-col justify-center items-start section_7">
  105. <view class="group_35 align-center">
  106. <text class="text_26">¥</text>
  107. <text class="text_27 clamp">149.00</text>
  108. </view>
  109. </view>
  110. <view class="flex-col items-center text-wrapper_1"><text class="text_30">下单</text></view>
  111. </view>
  112. </view>
  113. <safe-area />
  114. </view>
  115. </template>
  116. <script>
  117. import evaItem from './components/eva-item.vue';
  118. export default {
  119. components: {
  120. evaItem,
  121. },
  122. data() {
  123. return {
  124. info:{},
  125. loadingType:'more',
  126. page:1,
  127. pageSize:20,
  128. list:[],
  129. richTxt:'<p>你知道吗,盲go good</p>', // this.richTxt = this.$tools.replaceDetail(this.info.content || '');
  130. };
  131. },
  132. onLoad(e) {
  133. this.id = e.id;
  134. this.getInfo();
  135. },
  136. methods:{
  137. async getInfo(){
  138. let sendData={
  139. id:this.id,
  140. page: this.page,
  141. limit: this.pageSize,
  142. lng: this.addrInfo.address ? this.addrInfo.address_lng : '',
  143. lat: this.addrInfo.address ? this.addrInfo.address_lat : '',
  144. }
  145. let res = await this.$request('goods.info',sendData);
  146. },
  147. // async tapLove(type){
  148. // let url = type === 'add' ? 'favorite.add' : 'favorite.cancel'
  149. // let sendData={
  150. // id:this.id,
  151. // }
  152. // let res = await this.$request(url,sendData);
  153. // },
  154. previewImg(idx){
  155. let url = [];
  156. this.$tools.previewImg(url)
  157. }
  158. }
  159. };
  160. </script>
  161. <style lang="scss">
  162. .swiper-sec{
  163. position: relative;
  164. .swiper{
  165. width: 750rpx;
  166. height: 750rpx;
  167. .img-wrap{
  168. position: relative;
  169. &::after{
  170. content: '';
  171. position: absolute;
  172. left: 0;
  173. top: 0;
  174. width: 100%;
  175. height: 100%;
  176. background-color: rgba(0,0,0,.4);
  177. }
  178. }
  179. .img{
  180. width: 750rpx;
  181. height: 750rpx;
  182. }
  183. }
  184. .ic-wrap{
  185. position: absolute;
  186. z-index: 2;
  187. right: 0;
  188. bottom: 0;
  189. width: 118rpx;
  190. height: 94rpx;
  191. .ic{
  192. width: 54rpx;
  193. height: 54rpx;
  194. }
  195. }
  196. }
  197. .name-wrap {
  198. padding: 34rpx 31rpx 37rpx;
  199. .text_2 {
  200. margin: 7rpx 0 6rpx;
  201. color: #333333;
  202. font-size: 32rpx;
  203. font-family: PingFang;
  204. letter-spacing: 1.28rpx;
  205. max-width: 500rpx;
  206. }
  207. .text-wrapper {
  208. margin-left: 10rpx;
  209. padding: 10rpx 10rpx 11rpx;
  210. background-color: #92b99c;
  211. border-radius: 10rpx;
  212. height: 44rpx;
  213. max-width: 160rpx;
  214. }
  215. .text_3 {
  216. margin-left: 10rpx;
  217. margin-right: 5rpx;
  218. color: #ffffff;
  219. font-size: 24rpx;
  220. font-family: PingFang;
  221. // max-width: 110rpx;
  222. text-align: center;
  223. }
  224. .image_8 {
  225. width: 11rpx;
  226. height: 18rpx;
  227. }
  228. .image_9 {
  229. margin-right: 9rpx;
  230. flex-shrink: 0;
  231. align-self: flex-end;
  232. }
  233. .group_10 {
  234. margin-top: 6rpx;
  235. }
  236. .image_10 {
  237. width: 28rpx;
  238. height: 28rpx;
  239. margin-right: 4rpx;
  240. }
  241. .text_4 {
  242. margin-left: 20rpx;
  243. color: #999999;
  244. font-size: 24rpx;
  245. font-family: PingFang;
  246. }
  247. }
  248. .border-wrap{
  249. margin: 0 auto;
  250. width: 710rpx;
  251. height: 2rpx;
  252. background-color: #eee;
  253. }
  254. .time-wrap {
  255. padding: 40rpx 33rpx 39rpx;
  256. .text_5 {
  257. color: #333333;
  258. font-size: 28rpx;
  259. font-family: PingFang;
  260. letter-spacing: 1.12rpx;
  261. }
  262. .text_6 {
  263. margin-left: 28rpx;
  264. margin-top: 3rpx;
  265. color: #999999;
  266. font-size: 24rpx;
  267. font-family: PingFang;
  268. }
  269. }
  270. .loc-wrap {
  271. padding: 40rpx 30rpx 41rpx;
  272. .image_12 {
  273. margin-top: 5rpx;
  274. width: 68rpx;
  275. height: 68rpx;
  276. border-radius: 68rpx;
  277. }
  278. .group_15 {
  279. margin-left: 16rpx;
  280. }
  281. .text_7 {
  282. color: #333333;
  283. font-size: 30rpx;
  284. font-family: PingFang;
  285. max-width: 420rpx;
  286. }
  287. .text_8 {
  288. margin-top: 20rpx;
  289. color: #999999;
  290. font-size: 24rpx;
  291. font-family: PingFang;
  292. max-width: 420rpx;
  293. line-height: 36rpx;
  294. }
  295. .group_16 {
  296. margin-right: 20rpx;
  297. margin-top: 37rpx;
  298. }
  299. .image-wrapper {
  300. align-self: center;
  301. width: 28rpx;
  302. }
  303. .image_13 {
  304. width: 28rpx;
  305. height: 33rpx;
  306. }
  307. .section_5 {
  308. margin-left: 41rpx;
  309. background-color: #0000001a;
  310. width: 1rpx;
  311. height: 65rpx;
  312. }
  313. .view_3 {
  314. margin-left: 40rpx;
  315. }
  316. .image_14 {
  317. width: 28rpx;
  318. height: 28rpx;
  319. }
  320. .group_17 {
  321. margin-left: 3rpx;
  322. align-self: flex-start;
  323. line-height: 23rpx;
  324. margin-top: 10rpx;
  325. }
  326. .text_9 {
  327. color: #999999;
  328. font-size: 24rpx;
  329. font-family: PingFang;
  330. line-height: 23rpx;
  331. }
  332. .text_10 {
  333. color: #92b99c;
  334. font-size: 24rpx;
  335. font-family: PingFang;
  336. line-height: 19rpx;
  337. }
  338. }
  339. .line-wrap {
  340. background-color: #0000000f;
  341. height: 17rpx;
  342. }
  343. .tips-wrap {
  344. padding: 40rpx 32rpx;
  345. .title {
  346. color: #333333;
  347. font-size: 30rpx;
  348. font-family: PingFang;
  349. }
  350. .text_12 {
  351. margin-left: 4rpx;
  352. margin-top: 20rpx;
  353. color: #999999;
  354. font-size: 24rpx;
  355. font-family: PingFang;
  356. line-height: 36rpx;
  357. }
  358. }
  359. .review-sec{
  360. padding-top: 35rpx;
  361. }
  362. .title-wrap {
  363. height: 37rpx;
  364. margin-bottom: 10rpx;
  365. padding: 0 30rpx;
  366. .text_14 {
  367. color: #333333;
  368. font-size: 28rpx;
  369. font-family: PingFang;
  370. letter-spacing: 1.12rpx;
  371. }
  372. .group_21 {
  373. margin-right: 9rpx;
  374. }
  375. .text_15 {
  376. color: #999999;
  377. font-size: 24rpx;
  378. font-family: PingFang;
  379. }
  380. .image_8 {
  381. width: 11rpx;
  382. height: 18rpx;
  383. }
  384. .image_15 {
  385. margin-left: 11rpx;
  386. margin-bottom: 3rpx;
  387. flex-shrink: 0;
  388. }
  389. }
  390. .rich-wrap{
  391. background-color: #fff;
  392. .rich {
  393. line-height: normal;
  394. }
  395. }
  396. .btn-wrap{
  397. // margin-top: 67rpx;
  398. padding: 0 20rpx;
  399. position: fixed;
  400. /* #ifdef H5 */
  401. bottom: calc(var(--window-bottom) / 2);
  402. /* #endif */
  403. /* #ifdef MP */
  404. bottom: calc(var(--safe-area-inset-bottom) / 2);
  405. /* #endif */
  406. z-index: 10;
  407. left: 20rpx;
  408. right: 20rpx;
  409. .section_7 {
  410. padding: 15rpx 30rpx 14rpx;
  411. flex: 1 1 auto;
  412. background-color: #333333;
  413. border-radius: 47rpx 0px 0px 47rpx;
  414. height: 94rpx;
  415. }
  416. .group_35 {
  417. line-height: 26rpx;
  418. }
  419. .text_26 {
  420. color: #ffffff;
  421. font-size: 24rpx;
  422. font-family: PingFang;
  423. }
  424. .text_27 {
  425. color: #ffffff;
  426. font-size: 34rpx;
  427. font-family: PingFang;
  428. max-width: 300rpx;
  429. letter-spacing: 1.36rpx;
  430. }
  431. .text-wrapper_1 {
  432. padding: 31rpx 0;
  433. flex-shrink: 0;
  434. background-color: #92b99c;
  435. border-radius: 0px 47rpx 47rpx 0px;
  436. width: 165rpx;
  437. height: 94rpx;
  438. }
  439. .text_30 {
  440. color: #ffffff;
  441. font-size: 34rpx;
  442. font-family: PingFang;
  443. line-height: 32rpx;
  444. letter-spacing: 1.36rpx;
  445. }
  446. }
  447. </style>