shopDetail.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
  1. <template>
  2. <view class="center">
  3. <view class="store-info flex">
  4. <view class="store-top flex">
  5. <image class="simage" :src="info.image" mode=""></image>
  6. <view class="stop-main">
  7. <view class="stop-title">{{ info.name }}</view>
  8. <view class="stop-address">
  9. <image class="mrt-image" src="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
  10. <view class="mrt-font">距离您{{ info.jl }}KM</view>
  11. </view>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="store-item">
  16. <image class="store-image1" src="https://hy.liuniu946.com/app/img/store2.png" mode=""></image>
  17. <view class="store-font">营业时间:{{ info.day_time }}</view>
  18. </view>
  19. <view class="store-item" v-if="info.phone">
  20. <image class="store-image2" src="https://hy.liuniu946.com/app/img/store3.png" mode=""></image>
  21. <view class="store-font">预约电话:{{ info.phone }}</view>
  22. </view>
  23. <view class="store-item">
  24. <image class="store-image3" src="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
  25. <view class="store-font">门店地址:{{ info.detailed_address }}</view>
  26. </view>
  27. <view class="store-item">
  28. <image class="store-image1" src="https://hy.liuniu946.com/app/img/store2.png" mode=""></image>
  29. <view class="store-font">商家介绍:{{ info.introduction }}</view>
  30. </view>
  31. <view class="store-main" v-if="info.slider_image != null">
  32. <view class="smain-title">店内照片</view>
  33. <scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true"
  34. scroll-left="10px">
  35. <view class="scroll-item" v-for="(item, index) in info.slider_image" :key="index">
  36. <image class="scroll-image" :src="item" mode="heightFix" @click="openImg(info.slider_image, item)">
  37. </image>
  38. </view>
  39. </scroll-view>
  40. </view>
  41. <view class="main" v-if="art != ''" v-for="(ls, index) in art.content" :key="index">
  42. <view v-if="ls.type == 'rich-text'" v-html="ls.value" class="main-item"></view>
  43. <view style="width:100%;height: 300px;" v-if="ls.type == 'video' && ls.value">
  44. <view v-if="ls.jd == 1" style="width:100%;height: 300px; background: black;" @click="djbf(ls)">
  45. <image style="width:100%;height: 300px;" src="../../static/img/spfm.png" mode=""></image>
  46. </view>
  47. <video :src="ls.value" autoplay v-if="ls.jd ==2" style="width:100%;height: 300px;">
  48. </video>
  49. </view>
  50. </view>
  51. <!-- <jyf-parser class="main" :html="art.content"></jyf-parser> -->
  52. <view class="" style="height: 100rpx;"></view>
  53. <view class="btn-box flex" v-if="info.phone">
  54. <view class="btn-left" @click="tocall()">拨打电话</view>
  55. <!-- #ifdef H5 -->
  56. <view class="btn-right" @click="toGaodeMap()">导航到店</view>
  57. <!-- #endif -->
  58. <!-- #ifdef MP -->
  59. <view class="btn-right" @click="dh()">导航到店</view>
  60. <!-- #endif -->
  61. <!-- #ifdef APP-PLUS -->
  62. <view class="btn-right" @click="gomapApp(info.latitude, info.longitude, info.name)">导航到店</view>
  63. <!-- #endif -->
  64. </view>
  65. <view class="btn-box dhdd flex" v-if="!info.phone">
  66. <!-- #ifdef H5 -->
  67. <view class="btn-right" @click="toGaodeMap()">导航到店</view>
  68. <!-- #endif -->
  69. <!-- #ifdef MP -->
  70. <view class="btn-right" @click="dh()">导航到店</view>
  71. <!-- #endif -->
  72. <!-- #ifdef APP-PLUS -->
  73. <view class="btn-right" @click="gomapApp(info.latitude, info.longitude, info.name)">导航到店</view>
  74. <!-- #endif -->
  75. </view>
  76. </view>
  77. </template>
  78. <script>
  79. import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
  80. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  81. import {
  82. getVip
  83. } from '@/api/index.js';
  84. // #ifdef H5
  85. import {
  86. weixindata,
  87. shareLoad
  88. } from '@/utils/wxAuthorized';
  89. // #endif
  90. import {
  91. saveUrl,
  92. interceptor
  93. } from '@/utils/loginUtils.js';
  94. import {
  95. mapState,
  96. mapMutations
  97. } from 'vuex';
  98. import {
  99. spread,
  100. orderData,
  101. getUserInfo,
  102. details
  103. } from '@/api/user.js';
  104. import {
  105. getStoreDetail
  106. } from '@/api/shop.js';
  107. import {
  108. calculation
  109. } from '@/api/order.js';
  110. import {
  111. setCoupons
  112. } from '@/api/functionalUnit.js';
  113. import {
  114. store_details
  115. } from '@/api/index.js';
  116. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  117. export default {
  118. components: {
  119. uniLoadMore,
  120. jyfParser
  121. },
  122. data() {
  123. return {
  124. money: '',
  125. vipList: [], //商品列表
  126. page: 1,
  127. limit: 10,
  128. loadingType: 'more',
  129. id: '',
  130. info: {},
  131. art: '',
  132. address: '',
  133. userInfo: ''
  134. };
  135. },
  136. computed: {
  137. ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
  138. ...mapMutations('user', ['setUserInfo', 'setOrderInfo'])
  139. },
  140. onLoad(option) {
  141. let obj = this;
  142. getUserInfo({}).then(({
  143. data
  144. }) => {
  145. obj.userInfo = data;
  146. console.log(data, '123456');
  147. });
  148. if (option.spread) {
  149. // 存储邀请人
  150. uni.setStorageSync('puid', option.spread);
  151. }
  152. console.log(option.spread, '邀请人');
  153. this.id = option.id;
  154. this.getStoreDetail();
  155. },
  156. onShow() {
  157. // #ifdef MP-WEIXIN
  158. wx.showShareMenu({
  159. withShareTicket: true,
  160. menus: ['shareAppMessage', 'shareTimeline']
  161. });
  162. //#endif
  163. },
  164. // #ifdef MP-WEIXIN
  165. onShareAppMessage(res) {
  166. let obj = this;
  167. // 保存分享人id链接
  168. let url = 'pages/store/shopDetail' + '?spread=' + this.userInfo.uid + '&id=' + obj.info.id;
  169. if (res.from === 'button') {
  170. // 来自页面内分享按钮
  171. console.log(res.target);
  172. }
  173. return {
  174. path: url, // 分享链接
  175. imageUrl: obj.info.images, // 分享图标
  176. desc: '我在这家店领取了超多消费券哦!',
  177. title: this.userInfo.nickname + '给您推荐了' + obj.info.name
  178. };
  179. },
  180. //分享到朋友圈
  181. onShareTimeline(res) {
  182. console.log(this.userInfo);
  183. let obj = this;
  184. let url = 'pages/store/shopDetail' + '?spread=' + this.userInfo.uid + '&id=' + obj.info.id;
  185. return {
  186. path: url, // 分享链接
  187. imageUrl: obj.info.images, // 分享图标
  188. desc: '我在这家店领取了超多消费券哦!',
  189. title: this.userInfo.nickname + '给您推荐了' + obj.info.name
  190. };
  191. },
  192. //#endif
  193. methods: {
  194. navToDetailPage(item) {
  195. let id = item.id;
  196. uni.navigateTo({
  197. url: '/pages/product/product?id=' + id + '&isVip=' + 8 + '&store_id=' + item.store_id
  198. });
  199. },
  200. navTo(url) {
  201. if (this.money <= 0) {
  202. return this.$api.msg('请输入金额');
  203. }
  204. calculation({
  205. price: this.money,
  206. store_id: this.id,
  207. integral: 1
  208. })
  209. .then(({
  210. data
  211. }) => {
  212. uni.navigateTo({
  213. url
  214. });
  215. })
  216. .then(e => {
  217. this.cancel();
  218. });
  219. },
  220. cancel() {
  221. this.money = '';
  222. this.$refs.popup.close();
  223. },
  224. // 获取门店详情
  225. getStoreDetail() {
  226. let obj = this;
  227. console.log('进入');
  228. getStoreDetail({}, obj.id).then(res => {
  229. obj.info = res.data;
  230. obj.info.jl = obj.getFlatternDistance(obj.latitude, obj.longitude, obj.info.latitude, obj.info
  231. .longitude);
  232. if (obj.info.link_articel != '') {
  233. obj.getarticel(obj.info.link_articel);
  234. }
  235. });
  236. },
  237. getarticel(id) {
  238. details({}, id).then(({
  239. data
  240. }) => {
  241. data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g,
  242. '<p class="pHeight"><img');
  243. data.content = this.getVideo(data.content);
  244. this.art = data;
  245. console.log(this.art, 'nierong');
  246. });
  247. },
  248. djbf(opt) {
  249. console.log(opt, '2222');
  250. opt.jd = 2
  251. },
  252. getVideo(data) {
  253. console.log(data, '源数据')
  254. let videoList = [];
  255. let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
  256. let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
  257. let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
  258. let articleList = data.split('</video>'); // 把字符串 从视频标签分成数组
  259. arr.forEach((item, index) => {
  260. var src = item.match(srcReg);
  261. videoList.push(src[1]); //所要显示的字符串中 所有的video 标签 的路径
  262. });
  263. let needArticleList = [];
  264. articleList.forEach((item, index) => {
  265. if (item != '' && item != undefined) {
  266. let wuvideo = item.split('<video')
  267. let js = wuvideo[0].replace('<video', '')
  268. // 常见的标签渲染
  269. needArticleList.push({
  270. type: 'rich-text',
  271. value: js
  272. });
  273. }
  274. let articleListLength = articleList.length; // 插入到原有video 标签位置
  275. if (index < articleListLength && videoList[index] != undefined) {
  276. needArticleList.push({
  277. type: 'video',
  278. jd: 1,
  279. value: videoList[index]
  280. });
  281. }
  282. });
  283. console.log(needArticleList, '完成');
  284. return needArticleList;
  285. },
  286. markertap(e) {
  287. let obj = this;
  288. // #ifdef H5
  289. weixindata().then(wxOjb => {
  290. console.log(wxOjb, '获取微信');
  291. wxOjb.openLocation({
  292. latitude: obj.info.latitude, // 纬度,浮点数,范围为90 ~ -90
  293. longitude: obj.info.longitude, // 经度,浮点数,范围为180 ~ -180。
  294. name: obj.info.name, // 位置名
  295. address: obj.info.detailed_address, // 地址详情说明
  296. scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
  297. infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
  298. });
  299. });
  300. // #endif
  301. },
  302. //根据经纬度计算距离
  303. getFlatternDistance(lat1, lng1, lat2, lng2) {
  304. console.log(lat1, lng1, lat2, lng2);
  305. let radLat1 = (lat1 * Math.PI) / 180.0;
  306. let radLat2 = (lat2 * Math.PI) / 180.0;
  307. let a = radLat1 - radLat2;
  308. let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
  309. let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
  310. .pow(Math.sin(b / 2), 2)));
  311. s = s * 6378.137;
  312. s = Math.round(s * 10000) / 10000;
  313. s = s.toFixed(2) * 1;
  314. return s;
  315. },
  316. scroll(e) {
  317. console.log(e, '123456');
  318. },
  319. tocall() {
  320. let num = this.info.phone;
  321. console.log(num);
  322. uni.makePhoneCall({
  323. phoneNumber: num //仅为示例
  324. });
  325. },
  326. // tocall() {
  327. // this.$refs.popup.open();
  328. // },
  329. // 点击触发领取优惠券
  330. setCoupons(item) {
  331. // 判断是否已经领取了优惠券
  332. let obj = this;
  333. uni.showModal({
  334. title: '领取提示',
  335. content: '是否领取优惠券',
  336. success(e) {
  337. if (e.confirm) {
  338. setCoupons({
  339. couponId: item.id
  340. }).then(e => {
  341. item.is_use = true;
  342. uni.showToast({
  343. title: '领取成功',
  344. type: 'top',
  345. duration: 2000
  346. });
  347. });
  348. }
  349. }
  350. });
  351. },
  352. getaddress() {
  353. console.log('dizhi+++++++++++');
  354. let obj = this;
  355. // #ifndef H5
  356. uni.getLocation({
  357. type: 'gcj02',
  358. success: res => {
  359. console.log(res, 123456);
  360. obj.setLat(res.latitude);
  361. obj.setLon(res.longitude);
  362. obj.getStoreDetail();
  363. },
  364. fail: err => {
  365. console.log(err, 'shi+++++++++++++++');
  366. openMap().then(e => {
  367. this.getaddress();
  368. });
  369. }
  370. });
  371. // #endif
  372. // #ifdef H5
  373. uni.getLocation({
  374. type: 'wgs84',
  375. success: res => {
  376. console.log(res, 123456);
  377. let wz = obj.wgs84Togcj02(res.longitude, res.latitude);
  378. obj.setLat(wz[1]);
  379. obj.setLon(wz[0]);
  380. obj.getStoreDetail();
  381. },
  382. fail: err => {
  383. console.log(err, 'shi+++++++++++++++');
  384. openMap().then(e => {
  385. this.getaddress();
  386. });
  387. }
  388. });
  389. // weixindata().then(wxOjb => {
  390. // console.log(wxOjb, '获取微信');
  391. // wxOjb.getLocation({
  392. // type: 'gcj02',
  393. // success: res => {
  394. // console.log(res, 123456);
  395. // obj.setLat(res.latitude);
  396. // obj.setLon(res.longitude);
  397. // obj.getStoreDetail();
  398. // },
  399. // fail: err => {
  400. // console.log(err, 'shi+++++++++++++++');
  401. // openMap().then(e => {
  402. // obj.getaddress();
  403. // });
  404. // }
  405. // });
  406. // });
  407. // #endif
  408. },
  409. wgs84Togcj02(lng, lat) {
  410. if (this.out_of_china(lng, lat)) {
  411. return [lng, lat];
  412. }
  413. //定义一些常量
  414. //GCJ02 转换为 WGS84
  415. var that = this;
  416. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  417. const PI = 3.1415926535897932384626;
  418. const a = 6378245.0;
  419. const ee = 0.00669342162296594323;
  420. let dlat = that.transformlat(lng - 105.0, lat - 35.0);
  421. let dlng = that.transformlng(lng - 105.0, lat - 35.0);
  422. let radlat = (lat / 180.0) * PI;
  423. let magic = Math.sin(radlat);
  424. magic = 1 - ee * magic * magic;
  425. let sqrtmagic = Math.sqrt(magic);
  426. dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
  427. dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
  428. var mglat = lat + dlat;
  429. var mglng = lng + dlng;
  430. return [mglng, mglat];
  431. },
  432. out_of_china(lng, lat) {
  433. return lng < 72.004 || lng > 137.8347 || (lat < 0.8293 || lat > 55.8271 || false);
  434. },
  435. transformlat(lng, lat) {
  436. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  437. const PI = 3.1415926535897932384626;
  438. const a = 6378245.0;
  439. const ee = 0.00669342162296594323;
  440. let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(
  441. lng));
  442. ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
  443. ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
  444. ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
  445. return ret;
  446. },
  447. transformlng(lng, lat) {
  448. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  449. const PI = 3.1415926535897932384626;
  450. const a = 6378245.0;
  451. const ee = 0.00669342162296594323;
  452. let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  453. ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
  454. ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
  455. ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
  456. return ret;
  457. },
  458. //
  459. openImg(list, item) {
  460. uni.previewImage({
  461. current: item,
  462. urls: list
  463. });
  464. },
  465. // 调用高德
  466. toGaodeMap() {
  467. let obj = this;
  468. window.location.href =
  469. `https://uri.amap.com/marker?position=${obj.info.longitude},${obj.info.latitude}&name=${obj.info.name}`;
  470. },
  471. // 导航
  472. dh() {
  473. let obj = this;
  474. wx.openLocation({
  475. latitude: obj.info.latitude * 1,
  476. longitude: obj.info.longitude * 1,
  477. name: obj.info.name,
  478. address: obj.info.detailed_address
  479. });
  480. },
  481. gomapApp(latitude, longitude, name) {
  482. let url = '';
  483. if (plus.os.name == 'Android') {
  484. //判断是安卓端
  485. plus.nativeUI.actionSheet({
  486. //选择菜单
  487. title: '选择地图应用',
  488. cancel: '取消',
  489. buttons: [{
  490. title: '腾讯地图'
  491. }, {
  492. title: '百度地图'
  493. }, {
  494. title: '高德地图'
  495. }]
  496. },
  497. function(e) {
  498. switch (e.index) {
  499. //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
  500. case 1:
  501. //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
  502. url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
  503. break;
  504. case 2:
  505. url =
  506. `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
  507. break;
  508. case 3:
  509. url =
  510. `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  511. break;
  512. default:
  513. break;
  514. }
  515. if (url != '') {
  516. url = encodeURI(url);
  517. //plus.runtime.openURL(url,function(e){})调起手机APP应用
  518. plus.runtime.openURL(url, function(e) {
  519. plus.nativeUI.alert('本机未安装指定的地图应用');
  520. });
  521. }
  522. }
  523. );
  524. } else {
  525. // iOS上获取本机是否安装了百度高德地图,需要在manifest里配置
  526. // 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
  527. //(如urlschemewhitelist:["iosamap","baidumap"])
  528. plus.nativeUI.actionSheet({
  529. title: '选择地图应用',
  530. cancel: '取消',
  531. buttons: [{
  532. title: '腾讯地图'
  533. }, {
  534. title: '百度地图'
  535. }, {
  536. title: '高德地图'
  537. }]
  538. },
  539. function(e) {
  540. switch (e.index) {
  541. case 1:
  542. url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
  543. break;
  544. case 2:
  545. url =
  546. `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
  547. break;
  548. case 3:
  549. url =
  550. `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  551. break;
  552. default:
  553. break;
  554. }
  555. if (url != '') {
  556. url = encodeURI(url);
  557. plus.runtime.openURL(url, function(e) {
  558. plus.nativeUI.alert('本机未安装指定的地图应用');
  559. });
  560. }
  561. }
  562. );
  563. }
  564. }
  565. }
  566. };
  567. </script>
  568. <style lang="less">
  569. .center,
  570. page {
  571. background: #f8f8f8;
  572. height: 100%;
  573. }
  574. .dhdd {
  575. view {
  576. margin: 0 auto;
  577. }
  578. }
  579. .store-info {
  580. background: #ffffff;
  581. .store-top {
  582. padding: 40rpx 20rpx;
  583. justify-content: flex-start;
  584. .simage {
  585. width: 130rpx;
  586. height: 130rpx;
  587. background: #f44939;
  588. }
  589. .stop-main {
  590. height: 130rpx;
  591. padding: 6rpx 0;
  592. margin-left: 20rpx;
  593. display: flex;
  594. flex-direction: column;
  595. justify-content: space-between;
  596. align-items: flex-start;
  597. .stop-title {
  598. font-size: 36rpx;
  599. font-family: PingFang SC;
  600. font-weight: 500;
  601. color: #000000;
  602. }
  603. .stop-address {
  604. display: flex;
  605. justify-content: flex-end;
  606. align-items: center;
  607. .mrt-image {
  608. width: 20rpx;
  609. height: 28rpx;
  610. }
  611. .mrt-font {
  612. margin-left: 8rpx;
  613. font-size: 22rpx;
  614. font-family: PingFang SC;
  615. font-weight: 500;
  616. color: #666666;
  617. }
  618. }
  619. }
  620. }
  621. }
  622. .store-item {
  623. background: #ffffff;
  624. display: flex;
  625. justify-content: flex-start;
  626. align-items: center;
  627. padding: 30rpx 30rpx 30rpx 44rpx;
  628. .store-image1 {
  629. width: 36rpx;
  630. height: 36rpx;
  631. }
  632. .store-image2 {
  633. margin: 0 1rpx;
  634. width: 34rpx;
  635. height: 34rpx;
  636. }
  637. .store-image3 {
  638. margin: 0 7rpx;
  639. width: 22rpx;
  640. height: 28rpx;
  641. }
  642. .store-font {
  643. margin-left: 22rpx;
  644. font-size: 26rpx;
  645. font-family: PingFang SC;
  646. font-weight: 500;
  647. color: #2d2d2d;
  648. }
  649. }
  650. .store-main {
  651. margin-top: 16rpx;
  652. background: #ffffff;
  653. padding: 30rpx 42rpx 40rpx;
  654. .smain-title {
  655. font-size: 30rpx;
  656. font-family: PingFang SC;
  657. font-weight: 500;
  658. color: #464646;
  659. }
  660. }
  661. .scroll-box {
  662. white-space: nowrap;
  663. margin-top: 30rpx;
  664. height: 240rpx;
  665. .scroll-item:first-child {
  666. margin-left: 0;
  667. }
  668. .scroll-item {
  669. margin-left: 20rpx;
  670. display: inline-block;
  671. height: 240rpx;
  672. // width: 240rpx;
  673. }
  674. .scroll-image {
  675. height: 240rpx;
  676. // width: 240rpx;
  677. }
  678. }
  679. .btn-box {
  680. position: fixed;
  681. bottom: 0rpx;
  682. left: 0;
  683. right: 0;
  684. width: 750rpx;
  685. background: rgba(255, 255, 255, 0.6);
  686. box-shadow: 0rpx 0rpx 20rpx 0px rgba(50, 50, 52, 0.06);
  687. padding: 22rpx 68rpx;
  688. .btn-left {
  689. width: 280rpx;
  690. height: 80rpx;
  691. background: linear-gradient(180deg, #ffa30b, #ffd158);
  692. box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
  693. border-radius: 40rpx;
  694. text-align: center;
  695. line-height: 80rpx;
  696. font-size: 32rpx;
  697. font-family: PingFang SC;
  698. font-weight: 500;
  699. color: #ffffff;
  700. }
  701. .btn-right {
  702. width: 280rpx;
  703. height: 80rpx;
  704. background: linear-gradient(180deg, #ff6223, #ffab60);
  705. box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
  706. border-radius: 40rpx;
  707. text-align: center;
  708. line-height: 80rpx;
  709. font-size: 32rpx;
  710. font-family: PingFang SC;
  711. font-weight: 500;
  712. color: #ffffff;
  713. }
  714. }
  715. .popup_row {
  716. width: 100%;
  717. height: 500rpx;
  718. background-color: #ffffff;
  719. border-radius: 20rpx;
  720. display: flex;
  721. justify-content: center;
  722. align-items: center;
  723. .rows {
  724. width: 100%;
  725. padding: 0 24rpx;
  726. .rows-item {
  727. height: 80rpx;
  728. line-height: 80rpx;
  729. text-align: center;
  730. width: 100%;
  731. font-size: 32rpx;
  732. color: #303133;
  733. // border-bottom: 1rpx solid #f0f0f0;
  734. }
  735. // .row-1 {
  736. // margin: auto;
  737. // .first_aid {
  738. // width: 300rpx;
  739. // height: 300rpx;
  740. // }
  741. // }
  742. // .row-2 {
  743. // font-size: 38rpx;
  744. // margin-top: 20rpx;
  745. // }
  746. }
  747. }
  748. .shop-dhq {
  749. width: 702rpx;
  750. height: 171rpx;
  751. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.15);
  752. margin: auto;
  753. border-radius: 20rpx;
  754. background-color: #fff;
  755. padding: 0 48rpx 0 26rpx;
  756. margin-bottom: 20rpx;
  757. .dhq-left {
  758. .dhq-name {
  759. overflow: hidden;
  760. width: 28%;
  761. font-size: 28rpx;
  762. font-weight: bold;
  763. color: #333333;
  764. }
  765. .dhq-price {
  766. padding-top: 20rpx;
  767. .j-price {
  768. font-size: 38rpx;
  769. font-weight: bold;
  770. color: #ff4c4c;
  771. &::before {
  772. content: '¥';
  773. font-size: 24rpx;
  774. color: #ff4c4c;
  775. }
  776. }
  777. .j-zk {
  778. margin: 10rpx;
  779. display: inline-block;
  780. margin-left: 10rpx;
  781. line-height: 32rpx;
  782. height: 32rpx;
  783. border: 1px solid #ff4c4c;
  784. border-radius: 5rpx;
  785. font-size: 22rpx;
  786. font-weight: 500;
  787. color: #ff4c4c;
  788. padding: 0 8rpx;
  789. }
  790. }
  791. }
  792. .dhq-right {
  793. .right-btn {
  794. width: 105rpx;
  795. line-height: 56rpx;
  796. background: linear-gradient(143.2747deg, #ff6a00, #ee0979);
  797. border: 1rpx solid #ff4c4c;
  798. border-radius: 27rpx;
  799. text-align: center;
  800. color: #fff;
  801. font-size: 28rpx;
  802. font-weight: bold;
  803. }
  804. }
  805. }
  806. .jx-box-content {
  807. display: flex;
  808. .content-left {
  809. margin: 20rpx 15rpx;
  810. width: 236rpx;
  811. height: 236rpx;
  812. background: #e2e2e2;
  813. border-radius: 10rpx;
  814. image {
  815. width: 100%;
  816. height: 100%;
  817. }
  818. }
  819. .content-right {
  820. display: flex;
  821. flex-direction: column;
  822. justify-content: space-around;
  823. .shop-name {
  824. width: 382rpx;
  825. font-size: 32rpx;
  826. font-weight: bold;
  827. color: #333333;
  828. overflow: hidden;
  829. text-overflow: ellipsis;
  830. display: -webkit-box;
  831. -webkit-box-orient: vertical;
  832. -webkit-line-clamp: 2;
  833. }
  834. .shop-content {
  835. width: 455rpx;
  836. display: flex;
  837. justify-content: space-between;
  838. .shop-content-left {
  839. display: flex;
  840. flex-direction: column;
  841. .price-box {
  842. display: flex;
  843. align-items: center;
  844. .yuan-price {
  845. font-size: 26rpx;
  846. font-weight: 500;
  847. text-decoration: line-through;
  848. color: #999999;
  849. }
  850. image {
  851. margin: 0 10rpx;
  852. width: 16rpx;
  853. height: 18rpx;
  854. }
  855. .j-price {
  856. font-size: 24rpx;
  857. font-weight: bold;
  858. color: #b59467;
  859. }
  860. }
  861. .price-x {
  862. font-size: 36rpx;
  863. font-weight: bold;
  864. color: #ff4c4c;
  865. }
  866. }
  867. .shop-content-right {
  868. margin-top: 20rpx;
  869. align-items: center;
  870. text-align: center;
  871. width: 137rpx;
  872. height: 52rpx;
  873. font-size: 26rpx;
  874. font-weight: 500;
  875. color: #fff;
  876. background: #f75022;
  877. border-radius: 26rpx;
  878. line-height: 52rpx;
  879. }
  880. }
  881. }
  882. }
  883. .main {
  884. padding: 10rpx;
  885. display: flex;
  886. flex-direction: column;
  887. }
  888. /deep/ .main {
  889. .rich-img {
  890. width: 100% !important;
  891. height: auto;
  892. }
  893. }
  894. </style>