discountCardDetail.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935
  1. <template>
  2. <view class="box">
  3. <view style="width: 750rpx;height: 172rpx;" class="boxtop" :style="{background:'#'+themeColor}"></view>
  4. <view class="detailBg" v-if="detail">
  5. <view class="detailTop">
  6. <view class="leftB" v-if="detail.discountType==1">
  7. <view class="use">¥<span class="use2">{{detail.actMoney}}</span></view>
  8. <view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
  9. </view>
  10. <view v-if="detail.discountType!=1" class="leftB" style="display: flex;align-items: center;justify-content: center;">
  11. <image src="http://dmsphoto.66km.com.cn/thFiles/5340A784-FEE2-43FA-8ED1-C509FADFDBED.png"
  12. mode="" style="width: 77rpx;height:48rpx;"></image>
  13. </view>
  14. <view class="centerB">
  15. <view class="name">
  16. <span class="djq" v-if="detail.discountType==1">代金券</span>
  17. <span class="djq" v-if="detail.discountType==2">商品券</span>
  18. <span class="djq" v-if="detail.discountType==3">服务券</span>
  19. <span>{{detail.actName}}</span>
  20. </view>
  21. <view class="time" v-if="detail.startTime">
  22. 有效期:{{detail.startTime.slice(0,10)}}至{{detail.endTime.slice(0,10)}}</view>
  23. <view class="time" v-else>有效期:领取后 <span v-if="detail.endOffsetDays">{{detail.endOffsetDays}}</span> 天
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="comtentBox">
  29. <view style="margin-bottom: 30rpx;">
  30. <view style="display: flex;justify-content: space-between;">
  31. <view class="titleBox">
  32. <image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
  33. <view class="title">适用门店</view>
  34. </view>
  35. <view v-if="detail.shopList.length" @click="spShopS" style="color: #666666;font-size: 24rpx;line-height: 24rpx;display: flex;">
  36. {{detail.shopList.length}}家门店通用
  37. <image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
  38. </view>
  39. </view>
  40. <view v-if="shopInfo" class="symendinaBox">
  41. <view class="shopline" >
  42. <view class="newdistance" v-if="shopInfo.distance&&shopInfo.distance!= '0.00'">
  43. <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
  44. <view style="padding-top: 6rpx;"><span >{{shopInfo.distance}}km</span></view>
  45. </view>
  46. <view class="shoplineLeft">
  47. <image :src="shopInfo.doorImg1" mode="" class="shopImg" v-if="shopInfo.doorImg1"></image>
  48. <image :src="shopInfo.doorImg2" mode="" class="shopImg" v-else-if="shopInfo.doorImg2"></image>
  49. <image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
  50. </view>
  51. <view class="shopright">
  52. <view style="width: 475rpx;">
  53. <view class="shopTop">
  54. <view class="shopName">{{shopInfo.shopName}}</view>
  55. </view>
  56. </view>
  57. <view class="shopTime">营业时间:<span v-if="detail.shopList[0].startTime">{{detail.shopList[0].startTime}}</span> - <span
  58. v-if="detail.shopList[0].endTime">{{detail.shopList[0].endTime}}</span> </view>
  59. <view class="shopBottomLeft">
  60. <span class="shopaddress"
  61. v-if="detail.shopList[0].address">{{detail.shopList[0].provinceName}}{{detail.shopList[0].cityName}}{{detail.shopList[0].areaName}}{{detail.shopList[0].address}}</span>
  62. <!-- <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span> -->
  63. </view>
  64. <view class="shopdhBox">
  65. <view class="shopcall" @click.stop="goMap(detail.shopList[0])">
  66. <image class="shopcallIcon" src="../../static/img2/dhjt.png" mode=""></image>
  67. <view class="shopcallTxt">导航</view>
  68. </view>
  69. <view class="shopcall" @click.stop="makePhoneCall(detail.shopList[0].contactorPhone)">
  70. <image class="shopcallIcon" src="../../static/img2/call.png" mode=""></image>
  71. <view class="shopcallTxt">电话</view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. <view class="nodataBox" v-if="detail.shopList.length==0">
  78. <image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
  79. <view class="noTxt">暂无可用门店</view>
  80. </view>
  81. </view>
  82. <view>
  83. <view class="titleBox">
  84. <image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
  85. <view class="title">使用说明</view>
  86. </view>
  87. <view style="font-size: 20rpx;" v-if="detail.couContent" v-html="detail.couContent"></view>
  88. <view v-else class="content">暂无</view>
  89. </view>
  90. </view>
  91. <view class="comtentBox" v-if="detail.usedState==1">
  92. <view class="titleBox">
  93. <image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
  94. <view class="title">使用记录</view>
  95. </view>
  96. <view class="couponCodeBox">
  97. <view class="couponCodeYd"></view>
  98. <view class="ouponCode">{{detail.couponCode}}</view>
  99. <view class="couponCodeUse">已使用</view>
  100. </view>
  101. <view class="couponCodeLine">
  102. <view class="couponCodeLeft">核销时间:</view>
  103. <view class="couponCodeLineRight">{{detail.usedTime}}</view>
  104. </view>
  105. <view class="couponCodeLine">
  106. <view class="couponCodeLeft">核销门店:</view>
  107. <view class="couponCodeLineRight">{{detail.usedShopName}}</view>
  108. </view>
  109. </view>
  110. <view style="height: 120rpx;"></view>
  111. <view class="useBox" v-if="detail.state==0">
  112. <view class="useBtn" @click="hxHide">去使用</view>
  113. </view>
  114. <!-- 核销码 -->
  115. <view class="authorizBox" v-if="hxShow" @click="hxclose">
  116. <view class="hxBox" @click.stop="">
  117. <view class="chBox">
  118. <img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="hxclose"/>
  119. </view>
  120. <view class="hxName">{{detail.actName}}</view>
  121. <view class="hxTime" v-if="detail.startTime">
  122. 有效期:{{detail.startTime.slice(0,10)}}至{{detail.endTime.slice(0,10)}}</view>
  123. <view class="hxTime" v-else>有效期:领取后{{detail.endOffsetDays}}天</view>
  124. <view style="display: flex;justify-content: center;padding-top:50rpx;">
  125. <tki-qrcode cid="qrcode1" ref="qrcode" :val="detail.couponCode" :size="400" :unit="unit"
  126. :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
  127. :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  128. </view>
  129. <view class="couponCode">{{detail.couponCode}}</view>
  130. <view class="couponCodeTs">请到店出示券码即可开始服务</view>
  131. </view>
  132. </view>
  133. <!-- 适用门店 -->
  134. <view class="authorizBox" v-if="spShopShow" @click="spShopHide">
  135. <view class="syShopBox" @click.stop="">
  136. <view class="chBox2">
  137. <view class="syShopTitle">适用门店</view>
  138. <img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="spShopHide"/>
  139. </view>
  140. <view class="spShopLineBox">
  141. <view class="spShopLine" >
  142. <view class="spShopLineke" v-for="(item,index) in detail.shopList">
  143. <view class="shopline">
  144. <view class="newdistance" v-if="item.distance&&item.distance!= '0.00'">
  145. <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
  146. <view style="padding-top: 6rpx;"><span >{{item.distance}}km</span></view>
  147. </view>
  148. <view class="shoplineLeft">
  149. <image :src="item.doorImg1" mode="" class="shopImg" v-if="item.doorImg1"></image>
  150. <image :src="item.doorImg2" mode="" class="shopImg" v-else-if="item.doorImg2"></image>
  151. <image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
  152. </view>
  153. <view class="shopright">
  154. <view style="width: 500rpx;">
  155. <view class="shopTop">
  156. <view class="shopName">{{item.shopName}}</view>
  157. </view>
  158. </view>
  159. <view class="shopTime">营业时间:<span v-if="item.startTime">{{item.startTime}}</span> - <span
  160. v-if="item.endTime">{{item.endTime}}</span> </view>
  161. <view class="shopBottomLeft">
  162. <span class="shopaddress"
  163. v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
  164. <!-- <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span> -->
  165. </view>
  166. <view class="shopdhBox">
  167. <view class="shopcall" @click.stop="goMap(item)">
  168. <image class="shopcallIcon" src="../../static/img2/dhjt.png" mode=""></image>
  169. <view class="shopcallTxt">导航</view>
  170. </view>
  171. <view class="shopcall" @click.stop="makePhoneCall(item.contactorPhone)">
  172. <image class="shopcallIcon" src="../../static/img2/call.png" mode=""></image>
  173. <view class="shopcallTxt">电话</view>
  174. </view>
  175. </view>
  176. </view>
  177. </view>
  178. </view>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. <!-- 手机号授权 -->
  184. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  185. <view class="authorizCont" @click.stop="">
  186. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  187. <view class="authorizMs">未注册的手机号登录后将自动创建会员账号,如果您不同意授权获取手机号,会影响您使用我们的产品和服务。</view>
  188. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  189. </view>
  190. <view style="text-align: center;padding-top: 56rpx;">
  191. <image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  192. </view>
  193. </view>
  194. </view>
  195. </template>
  196. <script>
  197. import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  198. export default {
  199. components: {
  200. tkiQrcode,
  201. },
  202. data() {
  203. return {
  204. id: '',
  205. detail: {},
  206. themeColor:'',
  207. type:'',
  208. userInfo:'',
  209. ext:'',
  210. wxOpenData:'',
  211. authorizShow:false,
  212. onval: true, // val值变化时自动重新生成二维码
  213. loadMake: true, // 组件加载完成后自动生成二维码
  214. val: '二维码', // 要生成的二维码值
  215. unit: 'upx', // 单位
  216. background: '#b4e9e2', // 背景色
  217. foreground: '#309286', // 前景色
  218. pdground: '#262637', // 角标色
  219. icon: '', // 二维码图标
  220. iconsize: 40, // 二维码图标大小
  221. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  222. src: '', // 二维码生成后的图片地址或base64
  223. hxShow:false,
  224. spShopShow:false,
  225. location: {
  226. lng: '',
  227. lat: '',
  228. },
  229. shopInfo:'',
  230. }
  231. },
  232. onLoad(opt) {
  233. this.themeColor = uni.getStorageSync("themeColor");
  234. this.id = opt.id;
  235. this.type=opt.type;
  236. this.userInfo=this.$store.state.userInfo;
  237. this.ext=this.$common.getExtStoreId();
  238. if(this.userInfo){
  239. if (this.id) {
  240. this.getData();
  241. }
  242. }else{
  243. this.$common.automaticlogin().then(val => {
  244. this.userInfo=this.$store.state.userInfo;
  245. this.wxOpenData=this.$store.state.wxOpenData;
  246. this.themeColor = uni.getStorageSync("themeColor");
  247. if (this.id) {
  248. this.getData();
  249. }
  250. if(!this.userInfo){
  251. this.authorizShow=true
  252. }
  253. })
  254. }
  255. //this.getData();
  256. },
  257. methods: {
  258. spShopHide(){
  259. this.spShopShow=false;
  260. },
  261. spShopS(){
  262. this.spShopShow=true;
  263. },
  264. hxHide(){
  265. this.hxShow=true;
  266. },
  267. hxclose(){
  268. this.hxShow=false;
  269. },
  270. getData() {
  271. var that=this
  272. uni.showLoading({
  273. title: '加载中'
  274. });
  275. uni.authorize({
  276. scope: 'scope.userLocation',
  277. success() {
  278. uni.getLocation({
  279. type: 'gcj02',
  280. success: function(res) {
  281. console.log(res)
  282. that.location.lat = res.latitude
  283. that.location.lng = res.longitude
  284. that.getData2();
  285. },
  286. fail(err) {
  287. console.log("定位失败")
  288. that.getData2();
  289. }
  290. });
  291. },
  292. fail: (err) => {
  293. console.log(err)
  294. that.getData2();
  295. }})
  296. },
  297. getData2(){
  298. if(this.type==2){
  299. var url='opencoupon/detailsCouponDetails';
  300. var params={
  301. id: this.id,
  302. custId:this.$store.state.wxOpenData.loginInfo.customerInfo.id,
  303. lat: this.location.lat ? this.location.lat : '',
  304. lng: this.location.lng ? this.location.lng : '',
  305. }
  306. }else{
  307. var url='opencoupon/detailsCoupon'
  308. var params={
  309. id: this.id,
  310. lat: this.location.lat ? this.location.lat : '',
  311. lng: this.location.lng ? this.location.lng : '',
  312. }
  313. }
  314. this.$http(url, params, 'GET').then(res => {
  315. uni.hideLoading();
  316. if(res.data.couContent){
  317. res.data.couContent=res.data.couContent.replaceAll('font-size:15px', 'font-size:12px');
  318. res.data.couContent=res.data.couContent.replaceAll('font-size: 15px', 'font-size:12px');
  319. res.data.couContent=res.data.couContent.replaceAll('font-size:14px', 'font-size:12px');
  320. }
  321. this.detail = res.data;
  322. this.getInfo()
  323. })
  324. },
  325. getInfo(){
  326. this.$http('openreservation/getInfo', {
  327. lat: this.location.lat ? this.location.lat : '',
  328. lng: this.location.lng ? this.location.lng : '',
  329. }, 'GET').then(res => {
  330. var shopinfo=res.data.shopInfo;
  331. if(this.location.lng){
  332. this.shopInfo=this.detail.shopList[0]
  333. }else{
  334. this.detail.shopList.forEach(item=>{
  335. if(item.id==shopinfo.id){
  336. this.ckshopdata=shopinfo
  337. this.shopInfo=shopinfo
  338. this.shopName=this.shopInfo.shopName
  339. }
  340. })
  341. if(this.shopInfo==''){
  342. this.shopInfo=this.detail.shopList[0]
  343. //this.shopName=this.shopInfo.shopName
  344. }
  345. }
  346. })
  347. },
  348. makePhoneCall(num){
  349. uni.makePhoneCall({
  350. phoneNumber:num
  351. });
  352. },
  353. goMap(item){
  354. var that = this;
  355. if (!item.lat || !item.lng) {
  356. uni.showToast({
  357. title: '该店铺未设置定位',
  358. icon: 'none',
  359. duration: 3000
  360. });
  361. } else {
  362. uni.openLocation({
  363. latitude: Number(item.lat),
  364. longitude: Number(item.lng),
  365. name: item.shopName,
  366. address: item.provinceName + item.cityName + item.areaName +
  367. item.address,
  368. success: function() {
  369. console.log('success');
  370. },
  371. fail(err) {
  372. console.log(err)
  373. }
  374. });
  375. }
  376. },
  377. }
  378. }
  379. </script>
  380. <style scoped>
  381. .djq{
  382. background: linear-gradient(128deg, #FFE4C5 0%, #FDC692 100%);
  383. border-radius: 4rpx;
  384. height: 34rpx;
  385. width: 76rpx;
  386. line-height: 34rpx;
  387. text-align: center;
  388. color: #2B2219;
  389. font-size: 20rpx;
  390. margin-top: 4rpx;
  391. margin-right: 10rpx;
  392. }
  393. .titleBox span{
  394. font-size: 12px;
  395. }
  396. .centerB{
  397. padding-top: 10rpx;
  398. }
  399. .syShopBox{
  400. background: #FFFFFF;
  401. border-radius: 32rpx 32rpx 0rpx 0rpx;
  402. width: 750rpx;
  403. height: 80vh;
  404. margin-top: 20vh;
  405. }
  406. .spShopLineBox{
  407. height: calc(80vh - 90rpx);
  408. overflow-y: scroll;
  409. }
  410. .spShopLine{
  411. color: #333333;font-size: 26rpx;
  412. padding: 10rpx 24rpx;
  413. /* border-bottom: 1px solid #EEEEEE; */
  414. }
  415. .chBox2{
  416. display: flex;justify-content: space-between;
  417. padding-left: 30rpx;
  418. padding-top: 30rpx;
  419. padding-right: 24rpx;
  420. padding-bottom: 10rpx;
  421. }
  422. .syShopTitle{
  423. font-weight: 500;
  424. color: #333333;
  425. font-size: 30rpx;
  426. line-height: 42rpx;
  427. }
  428. .hxBox{
  429. width: 750rpx;
  430. height: 70vh;
  431. margin-top: 30vh;
  432. background: #FFFFFF;
  433. border-radius: 32rpx 32rpx 0rpx 0rpx;
  434. }
  435. .couponCode{
  436. font-weight: 500;
  437. color: #333333;
  438. font-size: 30rpx;
  439. padding-top: 40rpx;
  440. text-align: center;
  441. }
  442. .couponCodeTs{
  443. color: #666666;font-size: 24rpx;
  444. text-align: center;padding-top: 10rpx;
  445. }
  446. .hxName{
  447. font-weight: 500;
  448. color: #333333;
  449. line-height: 42rpx;
  450. font-size: 30rpx;
  451. text-align: center;
  452. padding-top: 26rpx;
  453. }
  454. .hxTime{
  455. color: #3C3C3C;font-size: 24rpx; text-align: center;padding-top: 16rpx;
  456. padding-bottom: 50rpx;
  457. border-bottom: 1px dashed #C3C3C3;
  458. }
  459. .chahaoImg{
  460. width: 36rpx;height: 36rpx;
  461. }
  462. .chBox{
  463. text-align: right;
  464. padding-top: 33rpx;
  465. padding-right: 24rpx;
  466. }
  467. .couponCodeBox{
  468. display: flex;
  469. padding-top: 15rpx;
  470. }
  471. .useBox{
  472. height: 120rpx;
  473. width: 750rpx;
  474. position: fixed;
  475. left: 0;
  476. bottom: 0;
  477. background: #FFFFFF;
  478. box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(153,153,153,0.2);
  479. }
  480. .useBtn{
  481. width: 690rpx;
  482. height: 74rpx;
  483. background: #EC0F0A;
  484. border-radius: 37rpx;
  485. font-weight: 500;
  486. color: #FFFFFF;
  487. font-size: 30rpx;
  488. text-align: center;
  489. line-height: 74rpx;
  490. margin-top: 23rpx;
  491. margin-left: 30rpx;
  492. }
  493. .couponCodeYd{
  494. width: 10rpx;
  495. height: 10rpx;
  496. background: #EC0F0A;
  497. border-radius: 50%;
  498. margin-top: 10rpx;
  499. margin-right: 12rpx;
  500. }
  501. .ouponCode{
  502. color: #666666;
  503. line-height: 33rpx;
  504. font-size: 24rpx;
  505. text-decoration: line-through;
  506. }
  507. .couponCodeUse{
  508. width: 86rpx;
  509. height: 32rpx;
  510. border-radius: 4rpx;
  511. border: 1rpx solid #DDDDDD;
  512. color: #999999;
  513. line-height: 32rpx;
  514. text-align: center;
  515. font-size: 22rpx;
  516. margin-left: 12rpx;
  517. }
  518. .couponCodeLine{
  519. padding-left: 20rpx;display: flex;
  520. color: #999999;font-size: 24rpx;
  521. line-height: 33rpx;padding-top: 8rpx;
  522. }
  523. .boxtop{
  524. background: #EC0F0A;
  525. }
  526. .box {
  527. min-height: 100vh;
  528. background: #F4F5F7;
  529. }
  530. .detailBg {
  531. margin: -100rpx 24rpx 0rpx;
  532. background-color: #FFFFFF;
  533. border-radius: 10rpx;
  534. padding: 40rpx 20rpx;
  535. }
  536. .detailTop {
  537. display: flex;
  538. justify-content: flex-start;
  539. }
  540. .use {
  541. text-align: center;
  542. font-size: 26rpx;
  543. color: #EC0F0A;
  544. }
  545. .use2 {
  546. font-size: 40rpx;
  547. font-weight: 500;
  548. color: #EC0F0A;
  549. line-height: 56rpx;
  550. }
  551. .used {
  552. font-size: 26rpx;
  553. color: #666666;
  554. }
  555. .used2 {
  556. font-size: 40rpx;
  557. font-weight: 500;
  558. color: #666666;
  559. line-height: 56rpx;
  560. }
  561. .tiaojian {
  562. font-size: 24rpx;
  563. color: #666666;
  564. }
  565. .name {
  566. line-height: 42rpx;
  567. font-size: 30rpx;
  568. display: flex;
  569. font-weight: 500;
  570. color: #333333;
  571. }
  572. .time {
  573. font-size: 24rpx;
  574. color: #666666;
  575. }
  576. .leftB {
  577. margin-right: 15rpx;
  578. width: 170rpx;
  579. }
  580. .centerB{
  581. width: 500rpx;
  582. }
  583. .comtentBox {
  584. margin: 20rpx 24rpx;
  585. background-color: #FFFFFF;
  586. border-radius: 10rpx;
  587. padding: 20rpx;
  588. }
  589. .titleBox {
  590. display: flex;
  591. align-items: center;
  592. }
  593. .redPoint {
  594. width: 18rpx;
  595. height: 18rpx;
  596. margin-right: 10rpx;
  597. }
  598. .title {
  599. font-size: 30rpx;
  600. color: #333333;
  601. font-weight: bold;
  602. }
  603. .content {
  604. font-size: 26rpx;
  605. color: #666666;
  606. margin-top: 16rpx;
  607. margin-left: 28rpx;
  608. }
  609. .authorizBox{
  610. width: 100vw;
  611. height: 100vh;
  612. background: rgba(0, 0, 0, 0.5);
  613. position: fixed;
  614. top: 0;
  615. left: 0;
  616. }
  617. .authorizCont{
  618. margin-top: 30vh;
  619. width: 564rpx;
  620. height: 408rpx;
  621. background: #FFFFFF;
  622. border-radius: 24rpx;
  623. margin-left: 93rpx;
  624. position: relative;
  625. }
  626. .authorizCloseImg{
  627. width: 62rpx;
  628. height: 62rpx;
  629. }
  630. .sqLogoBox{
  631. width: 180rpx;
  632. height: 180rpx;
  633. background: #FFFFFF;
  634. border-radius: 90rpx;
  635. text-align: center;
  636. position: absolute;
  637. top: -50rpx;
  638. left: 192rpx;
  639. }
  640. .authorizName{
  641. color: #333333;
  642. line-height: 42rpx;
  643. font-size: 30rpx;
  644. text-align: center;
  645. padding-top: 58rpx;
  646. }
  647. .authorizMs{
  648. color: #999999;
  649. line-height: 36rpx;
  650. font-size: 26rpx;
  651. width: 452rpx;
  652. padding-top: 24rpx;
  653. text-align: center;
  654. margin-left: 56rpx;
  655. }
  656. .authorizContbutton{
  657. width: 422rpx;
  658. height: 88rpx;
  659. background: #EC0F0A;
  660. border-radius: 44rpx;
  661. line-height: 88rpx;
  662. text-align: center;
  663. font-size:30rpx;
  664. color: #FFFFFF;
  665. margin-top: 62rpx;
  666. margin-left:71rpx;
  667. }
  668. .shopBoxpt{
  669. margin-top: 20rpx;
  670. }
  671. button::after{
  672. border: none;
  673. }
  674. button{
  675. position: relative;
  676. display: block;
  677. margin-left: 0;
  678. margin-right: 0;
  679. padding-left: 0px;
  680. padding-right: 0px;
  681. box-sizing: border-box;
  682. // font-size: 18px;
  683. text-align: center;
  684. text-decoration: none;
  685. // line-height: 1;
  686. line-height: 1.35;
  687. // border-radius: 5px;
  688. -webkit-tap-highlight-color: transparent;
  689. overflow: hidden;
  690. color: #000000;
  691. background-color: #fff;
  692. height: 100%;
  693. }
  694. .shopline {
  695. margin: 20rpx 0rpx 24rpx 20rpx;
  696. /* padding: 20rpx; */
  697. background-color: #FFFFFF;
  698. border-radius: 10rpx;
  699. position: relative;
  700. display: flex;
  701. }
  702. .newdistance{
  703. position: absolute;top: 2rpx;right: 0rpx;
  704. text-align: center;
  705. font-size: 22rpx;
  706. color: #666666;
  707. }
  708. .shopbox {
  709. padding: 0 16rpx;
  710. }
  711. .shopImg {
  712. width: 146rpx;
  713. height: 146rpx;
  714. border-radius: 10rpx;
  715. }
  716. .shopCallImg {
  717. width: 38rpx;
  718. height: 46rpx;
  719. }
  720. .shopTop {
  721. display: flex;
  722. justify-content: space-between;
  723. width: 510rpx;
  724. }
  725. .shopright {
  726. padding-left: 20rpx;
  727. }
  728. .shopName {
  729. width: 450rpx;
  730. white-space: nowrap;
  731. overflow: hidden;
  732. text-overflow: ellipsis;
  733. }
  734. .shopScore1 {
  735. font-size: 36rpx;
  736. font-weight: bold;
  737. color: #FF4F00;
  738. height: 50rpx;
  739. line-height: 50rpx;
  740. }
  741. .shopScore11 {
  742. font-size: 22rpx;
  743. color: #FF4F00;
  744. margin-right: 14rpx;
  745. }
  746. .shopScore2 {
  747. font-size: 22rpx;
  748. color: #666666;
  749. margin-right: 14rpx;
  750. padding: 8rpx 0;
  751. }
  752. .shopScore3 {
  753. font-size: 22rpx;
  754. color: #333333;
  755. padding-left: 20rpx;
  756. }
  757. .shopaddress {
  758. width: 400rpx;
  759. /* 隐藏文字显示 ...不换行 */
  760. overflow: hidden;
  761. text-overflow: ellipsis;
  762. white-space: nowrap;
  763. color: #999999;
  764. }
  765. .shopCont {
  766. padding-left: 22rpx;
  767. width: 520rpx;
  768. }
  769. .shopName {
  770. font-size: 32rpx;
  771. font-weight: bold;
  772. color: #222222;
  773. line-height: 40rpx;
  774. width: 450rpx;
  775. white-space: nowrap;
  776. overflow: hidden;
  777. text-overflow: ellipsis;
  778. }
  779. .shopTime {
  780. color: #666666;
  781. font-size: 26rpx;
  782. padding-top: 4rpx;
  783. }
  784. .addressBox {
  785. color: #666666;
  786. font-size: 22rpx;
  787. }
  788. .shopaddress {
  789. width: 470rpx;
  790. /* 隐藏文字显示 ...不换行 */
  791. overflow: hidden;
  792. text-overflow: ellipsis;
  793. white-space: nowrap;
  794. color: #999999;
  795. }
  796. .shopBottomLeft {
  797. font-size: 25rpx;
  798. color: #666666;
  799. line-height: 30rpx;
  800. padding-top: 10rpx;
  801. display: flex;
  802. justify-content: space-between;
  803. padding-right: 10rpx;
  804. }
  805. .shopdhBox{
  806. display: flex;padding-top: 20rpx;
  807. justify-content: space-between;
  808. }
  809. .shopcall{
  810. display: flex;
  811. }
  812. .shopcallIcon{
  813. width: 26rpx;height: 26rpx;margin-top: 2rpx;
  814. }
  815. .shopcallTxt{
  816. font-size: 24rpx;
  817. color: #222222;
  818. line-height: 33rpx;padding-left: 8rpx;
  819. }
  820. .dhImg{
  821. width: 35rpx;height: 35rpx;border-radius: 6rpx;
  822. }
  823. .nodataImg {
  824. width: 400rpx;
  825. padding-top: 100rpx;
  826. }
  827. .noTxt {
  828. font-size: 30rpx;
  829. color: #999999;
  830. padding-top: 50rpx;
  831. }
  832. .nodataBox {
  833. text-align: center;
  834. }
  835. .symendinaBox{
  836. border-bottom: 2rpx dashed #eaeaea;
  837. }
  838. .spShopLine .shopline{
  839. margin: 0;
  840. margin-top: 20rpx;
  841. padding: 10rpx 0 20rpx 0;
  842. }
  843. .spShopLineke{
  844. border-bottom: 1px solid #eeeeee;
  845. }
  846. </style>