jkDetail.vue 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190
  1. <template>
  2. <view class="content">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'活动详情'"></homenav>
  4. <view class="top">
  5. <img :src="mainImg" alt="" class="topimg" mode="widthFix">
  6. </view>
  7. <view class="cont" v-if="info">
  8. <view class="name">
  9. <view class="ptNameBz" v-if="info.groupType">
  10. {{info.groupNumber}}人团
  11. </view>
  12. <view style="width: 550rpx;"> {{info.activityName}}</view>
  13. </view>
  14. <view class="name2">{{info.startTime.slice(0,10)}}~{{info.endTime.slice(0,10)}}</view>
  15. <view class="name3">{{info.activityContent}}</view>
  16. </view>
  17. <!-- 拼团 -->
  18. <view class="ptBox" v-if="info.groupList&&info.groupList.length>0">
  19. <view class="ptBoxtop">
  20. <view class="ptNum">{{info.groupList.length}}人正在拼团,可直接参与</view>
  21. <view class="ptMore" @click="ptMore">
  22. <sapn>查看更多</sapn>
  23. <img src="../../static/timg/jt2.png" alt="" class="shopjt">
  24. </view>
  25. </view>
  26. <view class="ptLine" v-for="(item,index) in info.groupList" v-if="index<3">
  27. <view class="FirstMobilePhone">{{item.FirstMobilePhone?item.FirstMobilePhone:'***'}}</view>
  28. <view class="ptlineRight">
  29. <view class="ptlinexx">
  30. <view class="DiffBNumber">还差 <span>{{item.DiffBNumber}}人</span>拼成 </view>
  31. <view class="ptdjs">剩余{{item.EndTime | limitTimeFilter }}</view><!-- | limitTimeFilter -->
  32. </view>
  33. <button open-type="share" class=" shareBtn" :data-obj="item" v-if="item.IfMyself">
  34. <view class="ptBtn" >邀请好友 </view>
  35. </button>
  36. <view class="ptBtn" @click="join(item)" v-else>去拼团 </view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="couponPackageData" v-if="info.couponPackageName">
  41. <view class="couponPackageTitle">{{info.couponPackageName}}</view>
  42. <view class="linecouponCont" v-for="item in info.couponList">
  43. <view class="linecouponContLeft">
  44. <view class="couponType" v-if="item.discountType==1">满减券</view>
  45. <view class="couponType" v-if="item.discountType==2">商品券</view>
  46. <view class="couponType" v-if="item.discountType==3">服务券</view>
  47. <view class="couponName">{{item.actName}}</view>
  48. </view>
  49. <view class="couponNum">x{{item.actQty}}</view>
  50. </view>
  51. </view>
  52. <view class="shopBox">
  53. <view class="shopBoxTop">
  54. <view class="shopMs">活动门店</view>
  55. <view class="shopTy" @click="useShow">
  56. <view class="shopTyTxt">{{info.shopCount}}家门店通用</view>
  57. <img src="../../static/timg/jt2.png" alt="" class="shopjt">
  58. </view>
  59. </view>
  60. <view class="shopCont">
  61. <view class="shopContLeft">
  62. <view class="shopName">{{shopInfo.shopName}}</view>
  63. <view class="shopTime"><span v-if="shopInfo.startTime">{{shopInfo.startTime}}</span> - <span
  64. v-if="shopInfo.endTime">{{shopInfo.endTime}}</span> </view>
  65. <view class="shopaddress">{{shopInfo.address?shopInfo.address:''}}</view>
  66. </view>
  67. <view class="shopContRight">
  68. <view class="shopContRightLine" @click="getmap">
  69. <image src="../../static/timg/icon_map.png" alt="" class="shopRightIcon"></image>
  70. <view class="shopRightTxt">地图</view>
  71. </view>
  72. <view class="shopRightSx"></view>
  73. <view class="shopContRightLine" @click="call">
  74. <image src="../../static/timg/icon_phone.png" alt="" class="shopRightIcon"></image>
  75. <view class="shopRightTxt">电话</view>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 多少人报名 -->
  81. <view class="signupBox" v-if="info.signUserList.length">
  82. <view class="signupTop">
  83. <span class="signupTops1">{{info.sumNum}}</span>
  84. <span class="signupTops1">人已报名</span>
  85. </view>
  86. <view class="signupCont">
  87. <view class="signupLine" v-for="(item,index) in info.signUserList">
  88. <view class="signupLineL">
  89. <img :src="item.headImg" alt="" class="signupLineLImg">
  90. <view class="signupLineLName" v-if="item.nickName!='null'">{{item.nickName?item.nickName:'微信用户'}}</view>
  91. <view class="signupLineLName" v-else>微信用户</view>
  92. </view>
  93. <view class="signupLineM" v-if="item.plateNumber">{{item.plateNumber | maskLicensePlate}}</view>
  94. <view class="signupLineR">{{item.signTime}}</view>
  95. </view>
  96. </view>
  97. </view>
  98. <!-- 多少人报名 -->
  99. <!-- 多少人看过 -->
  100. <view class="signupBox" v-if="info.lookCount">
  101. <view class="signupTop">
  102. <span class="signupTops1">{{info.lookCount}}</span>
  103. <span class="signupTops1">人看过</span>
  104. </view>
  105. <!-- <view class="seeBox">
  106. <view class="seeLine" v-for="(item,index) in 15">
  107. <img src="http://dmsphoto.66km.com.cn/marketing//accompany/3885B510-6405-4A5E-BD64-B6C09CEE070E.jpg" alt="" class="signupLineLImg">
  108. </view>
  109. </view> -->
  110. </view>
  111. <view class="detailBOx" v-if="dimgList.length>0">
  112. <view class="detailTitle">活动详情</view>
  113. <view class="detailImgBox" v-for="(item,index) in dimgList">
  114. <img :src="item.img" alt="" class="detailImg" mode="widthFix">
  115. </view>
  116. </view>
  117. <view class="companyName">©{{info.supportInfo}}</view>
  118. <view style="height: 200rpx;padding-bottom: constant(safe-area-inset-bottom);
  119. padding-bottom: env(safe-area-inset-bottom);"></view>
  120. <view class="bottom">
  121. <view class="timeTbox" v-if="!activityEnd">
  122. <view class="timeviewTxt" v-if="activityNoOpen"> 距开始</view>
  123. <view class="timeviewTxt" v-if="!activityNoOpen"> 距结束</view>
  124. <view class="timeK">{{shengyuD}}</view>
  125. <view class="timeviewTxt" > 天</view>
  126. <view class="timeK">{{shengyuH}}</view>
  127. <view class="timeviewTxt"> 时</view>
  128. <view class="timeK">{{shengyuM}}</view>
  129. <view class="timeviewTxt" > 分</view>
  130. </view>
  131. <view class="bottomBtnBox">
  132. <view class="bottomBtnBoxLeft" @click="shareShowzs">
  133. <image src="../../static/timg/share.png" alt="" class="shareIcon"></image>
  134. <view class="shareTxt">分享</view>
  135. </view>
  136. <!-- <button open-type="share" class="bottomBtnBoxLeft shareBtn" >
  137. <image src="../../static/timg/share.png" mode="" class="shareIcon"></image>
  138. <view class="shareTxt">分享</view>
  139. </button> -->
  140. <!-- 状态1未开始 2进行中3已结束 -->
  141. <view class="bottomBtn commonBtn" v-if="info.state==2&&info.groupType!=1" @click="signUp" >
  142. <span v-if="info.payType==1">¥{{info.money}} &nbsp; 立即抢购</span>
  143. <span v-else>立即报名</span>
  144. </view>
  145. <view class="bottomPtBox" v-if="info.state==2&&info.groupType==1" >
  146. <view class="separate" @click="signUp">
  147. <view class="separateTop">¥{{info.money}}</view>
  148. <view class="separateTxt">单独购买</view>
  149. </view>
  150. <view class="groupBtn" @click="groupFn">
  151. <view class="groupBtnTop">¥{{info.groupMoney}}</view>
  152. <view class="groupBtnTxt">发起拼团</view>
  153. </view>
  154. </view>
  155. <view class="bottomBtn2" v-if="info.state==1">报名未开始</view>
  156. <view class="bottomBtn2" v-if="info.state==3">报名已结束</view>
  157. </view>
  158. </view>
  159. <!-- 报名弹框 -->
  160. <view class="baomingBox" v-if="bmShow" @click="nobmshow">
  161. <view class="baomingCont applicationTk" @click.stop="" :style="{bottom: jpHeight}">
  162. <view class="bmTop">
  163. <view class="bmTitle">登记信息</view>
  164. <image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="nobmshow"></image>
  165. </view>
  166. <view style="padding: 0 24rpx;">
  167. <!-- <view class="bmshopLine" @click="showCkshop">
  168. <view class="bmshopname" v-if="!shopName">请选择门店</view>
  169. <view class="bmshopname" style="color: #333333;">{{shopName}}</view>
  170. <image src="../../static/timg/icon_arrow_right.png" alt="" class="bmshopjt"></image>
  171. </view> -->
  172. <!-- clWhere报名凭证1,2,3,4 1手机号2车牌号3姓名4单位 -->
  173. <view class="bmLine" v-if="info.clWhere.indexOf(1)!=-1" @click="focusState1cl">
  174. <!-- :focus="focusState1" --> <input type="number" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="mobilePhone" class="bmlineInput" placeholder="输入手机号" placeholder-style="color:#999999">
  175. </view>
  176. <view class="bmLine" v-if="info.clWhere.indexOf(2)!=-1" @click="focusState2cl">
  177. <input type="text" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="plateNumber" class="bmlineInput" placeholder="输入车牌号" placeholder-style="color:#999999">
  178. </view>
  179. <view class="bmLine" v-if="info.clWhere.indexOf(3)!=-1" @click="focusState3cl">
  180. <input type="text" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="customerName" class="bmlineInput" placeholder="输入姓名" placeholder-style="color:#999999">
  181. </view>
  182. <view class="bmLine" v-if="info.clWhere.indexOf(4)!=-1" @click="focusState4cl">
  183. <input type="text" :adjust-position="false" :hold-keyboard="true" @blur="inputBindBlur" @focus="inputBindFocus" v-model="unit" class="bmlineInput" placeholder="输入单位" placeholder-style="color:#999999">
  184. </view>
  185. <view class="buySHop" @click="showCkshop">
  186. <view>服务门店</view>
  187. <view class="buyShopRight" >
  188. <view v-if="shopName">切换门店</view><!-- {{shopInfo.shopName}} -->
  189. <view v-else>请选择</view>
  190. <image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
  191. </view>
  192. </view>
  193. <view class="buyShopBox"v-if="shopName">
  194. <view class="buyShop">
  195. <view class="buyShopTop">
  196. <view class="buyShopTleft">
  197. <!-- <view class="shopbq">距离最近</view> -->
  198. <view class="buyshopName">{{shopInfo.shopName}}</view>
  199. </view>
  200. <view class="buyShopTRgiht">
  201. <image src="/static/timg/icon_checked@2x.png" mode="" class="duihao"></image>
  202. </view>
  203. </view>
  204. <view class="buyShopCont">
  205. <image :src="shopInfo.doorImg1" v-if="shopInfo.doorImg1" mode="" class="buyShopContImg"></image>
  206. <image :src="shopInfo.doorImg2" v-else-if="shopInfo.doorImg2" mode="" class="buyShopContImg"></image>
  207. <image src="/static/timg/noimg.png" v-else class="buyShopContImg"></image>
  208. <view class="buyShopContAdress">
  209. <span v-if="shopInfo.provinceName">{{shopInfo.provinceName}}</span>
  210. <span v-if="shopInfo.cityName">{{shopInfo.cityName}}</span>
  211. <span v-if="shopInfo.areaName">{{shopInfo.areaName}}</span>
  212. <span v-if="shopInfo.address">{{shopInfo.address}}</span>
  213. </view>
  214. <view class="buyShopJl" v-if="shopInfo.distance&&shopInfo.distance!= '0.00'">{{shopInfo.distance}}km</view>
  215. </view>
  216. </view>
  217. </view>
  218. </view>
  219. <view class="bmTtnBox">
  220. <view style="height: 1rpx;"></view>
  221. <view class="bmBtn commonBtn" @click="submitOrder" >
  222. <span v-if="groupOwner">
  223. ¥{{info.groupMoney}} &nbsp; {{groupOwner==1?'发起拼团':'立即拼团'}}
  224. </span>
  225. <span v-else>
  226. <span v-if="info.payType==1">¥{{info.money}} &nbsp; {{info.groupType==1?'单独购买':'立即抢购'}} </span>
  227. <span v-else>立即报名</span>
  228. </span>
  229. </view>
  230. </view>
  231. </view>
  232. </view>
  233. <!-- 门店弹框 -->
  234. <view class="baomingBox ckshopBox" v-if="ckshopShow">
  235. <view class="baomingCont">
  236. <view class="bmTop">
  237. <view class="bmTitle">选择门店</view>
  238. <image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop"></image>
  239. </view>
  240. <view style="padding: 0 24rpx; height: 65vh;overflow-y: scroll;">
  241. <view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop(item)">
  242. <view class="shoplineLeft">
  243. <image :src="item.doorImg1" mode="" class="shopImg" v-if="item.doorImg1"></image>
  244. <image :src="item.doorImg2" mode="" class="shopImg" v-else-if="item.doorImg2"></image>
  245. <image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
  246. </view>
  247. <view class="shopright" style="padding-left: 20rpx;">
  248. <view class="shopTop">
  249. <view class="shopName">{{item.shopName}}</view>
  250. </view>
  251. <!-- <view class="brandsBg" v-if="item.brands">
  252. <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
  253. </view> -->
  254. <view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
  255. v-if="item.endTime">{{item.endTime}}</span> </view>
  256. <view class="shopBottomLeft">
  257. <span class="shopaddress"
  258. v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
  259. <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
  260. </view>
  261. </view>
  262. </view>
  263. </view>
  264. </view>
  265. </view>
  266. <!-- 适用门店 -->
  267. <view class="baomingBox ckshopBox" v-if="useShopShow" @click="noShowShop2">
  268. <view class="baomingCont" @click.stop="">
  269. <view class="bmTop">
  270. <view class="bmTitle">选择门店</view>
  271. <image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop2"></image>
  272. </view>
  273. <view style="padding: 0 24rpx; height: 65vh;overflow-y: scroll;">
  274. <view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop(item)">
  275. <view class="newdistance" v-if="item.distance&&item.distance!= '0.00'">
  276. <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
  277. <view style="padding-top: 6rpx;"><span >{{item.distance}}km</span></view>
  278. </view>
  279. <view class="shoplineLeft">
  280. <image :src="item.doorImg1" mode="" class="shopImg" v-if="item.doorImg1"></image>
  281. <image :src="item.doorImg2" mode="" class="shopImg" v-else-if="item.doorImg2"></image>
  282. <image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
  283. </view>
  284. <view class="shopright" style="padding-left: 20rpx;">
  285. <view class="shopTop">
  286. <view class="shopName">{{item.shopName}}</view>
  287. </view>
  288. <!-- <view class="brandsBg" v-if="item.brands">
  289. <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
  290. </view> -->
  291. <view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
  292. v-if="item.endTime">{{item.endTime}}</span> </view>
  293. <view class="shopBottomLeft">
  294. <span class="shopaddress"
  295. v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
  296. <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
  297. </view>
  298. <view class="shopdhBox">
  299. <view class="shopcall" @click.stop="goMap(item)">
  300. <image class="shopcallIcon" src="../../static/img2/dhjt.png" mode=""></image>
  301. <view class="shopcallTxt">导航</view>
  302. </view>
  303. <view class="shopcall" @click.stop="makePhoneCall(item.contactorPhone)">
  304. <image class="shopcallIcon" src="../../static/img2/call.png" mode=""></image>
  305. <view class="shopcallTxt">电话</view>
  306. </view>
  307. <!-- <view class="shopcall"></view> -->
  308. </view>
  309. </view>
  310. </view>
  311. </view>
  312. </view>
  313. </view>
  314. <image src="../../static/timg/mp3.png" class="mp3Img" @click="play()" v-if="!payshow&mp3Url!=''"></image>
  315. <image src=".../../static/timg/mp31.png" class="mp3Img" @click="play2()" id="bofang" v-if="payshow&mp3Url!=''"></image>
  316. <view class="shareBox" v-if="shareShow" @click="shareShowyc">
  317. <img :src="shareQrCode" alt=""style="width: 300rpx;height:300rpx">
  318. <view class="shareCont" >
  319. <button open-type="share" class=" shareBtn" >
  320. <image src="../../static/timg/icon_wxhy.png" mode="" class="shareBimg"></image>
  321. <view class="bottomTxtshare">分享</view>
  322. </button>
  323. <view @click="gowp">
  324. <img src="../../static/timg/icon_haibao.png" alt="" class="shareBimg">
  325. <view class="bottomTxtshare">生成海报</view>
  326. </view>
  327. </view>
  328. </view>
  329. <!-- 手机号授权 -->
  330. <view class="authorizBox" v-if="authorizShow" @click="authorizShowno">
  331. <view class="authorizCont" @click.stop="">
  332. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  333. <view class="authorizMs">未注册的手机号登录后将自动创建会员账号,如果您不同意授权获取手机号,会影响您使用我们的产品和服务。</view>
  334. <view class="sqLine">
  335. <view class="sqRefuse" @click="authorizShowHide">拒绝</view>
  336. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  337. </view>
  338. </view>
  339. <view style="text-align: center;padding-top: 56rpx;">
  340. <image src="../../static/timg/icon_guanbi@2x.png" @click="authorizShowno" mode="" class="authorizCloseImg"></image>
  341. </view>
  342. </view>
  343. <!-- 拼单更多 -->
  344. <view class="baomingBox" v-if="djsMoreShow">
  345. <view class="djsCont">
  346. <view class="bmTop">
  347. <view class="bmTitle">{{info.groupList.length}}人正在拼团,可直接参与</view>
  348. <image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="ptMorehide"></image>
  349. </view>
  350. <view class="djsLineBox">
  351. <view class="ptLine" v-for="(item,index) in info.groupList">
  352. <view class="FirstMobilePhone">{{item.FirstMobilePhone?item.FirstMobilePhone:'***'}}</view>
  353. <view class="ptlineRight">
  354. <view class="ptlinexx">
  355. <view class="DiffBNumber">还差 <span>{{item.DiffBNumber}}人</span>拼成 </view>
  356. <view class="ptdjs">剩余{{item.EndTime | limitTimeFilter }}</view><!-- | limitTimeFilter -->
  357. </view>
  358. <button open-type="share" class=" shareBtn" :data-obj="item" v-if="item.IfMyself">
  359. <view class="ptBtn" >邀请好友 </view>
  360. </button>
  361. <view class="ptBtn" @click="join(item)" v-else>去拼团</view>
  362. </view>
  363. </view>
  364. </view>
  365. </view>
  366. </view>
  367. </view>
  368. </template>
  369. <script>
  370. import homenav from "../../components/homenav/nav.vue"
  371. let that;
  372. export default {
  373. components: {
  374. homenav
  375. },
  376. data() {
  377. return {
  378. info:'',
  379. type:'',
  380. shopNum:'',
  381. shopInfo:'',
  382. activityEnd:true,
  383. activityNoOpen:true,
  384. shengyuD:'',
  385. shengyuH:'',
  386. shengyuM:'',
  387. queryShopList:'',
  388. collectingID:'',
  389. bmShow:false,
  390. ckshopShow:false,
  391. mainImg:'',
  392. dimgList:[],
  393. shopName:'',
  394. ckshopdata:'',
  395. customerName:'',
  396. mobilePhone:'',
  397. unit:'',
  398. plateNumber:'',
  399. comment:'',
  400. userInfo:'',
  401. useShopShow:false,
  402. jpHeight:0,
  403. isPlay: false,
  404. mp3Url:'',
  405. payshow:false,
  406. jpNum:1,
  407. focusState1:false,
  408. focusState2:false,
  409. focusState3:false,
  410. focusState4:false,
  411. shareShow:false,
  412. ext:'',
  413. shareId:'',
  414. scene:'',
  415. themeColor:'',
  416. authorizShow:false,
  417. wxOpenData:'',
  418. ext:'',
  419. iStatusBarHeight:'',
  420. groupOwner:'',
  421. groupID:'',
  422. ticker: null,
  423. djsMoreShow:false,
  424. isgo:true,
  425. location: {
  426. lng: '',
  427. lat: '',
  428. },
  429. }
  430. },
  431. onLoad(opt) {
  432. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  433. console.log(opt)
  434. this.collectingID=opt.id;
  435. if(opt.shareId){
  436. this.shareId=opt.shareId
  437. }
  438. this.ext=this.$common.getExtStoreId();
  439. // opt.scene='10002'
  440. if(this.userInfo){
  441. this.userInfo=this.$store.state.userInfo;
  442. this.wxOpenData=this.$store.state.wxOpenData;
  443. this.themeColor = uni.getStorageSync("themeColor");
  444. this.queryGoodsLook()
  445. if(opt.scene&&opt.scene!='undefined'){
  446. this.scene=opt.scene;
  447. this.getShareParams()
  448. }else{
  449. //this.getInfo();
  450. this.queryActivityInfo();
  451. this.queryGoodsLook()
  452. }
  453. }else{
  454. this.$common.automaticlogin().then(val => {
  455. this.themeColor = uni.getStorageSync("themeColor");
  456. this.userInfo=this.$store.state.userInfo;
  457. this.wxOpenData=this.$store.state.wxOpenData;
  458. if(opt.scene&&opt.scene!='undefined'){
  459. this.scene=opt.scene;
  460. this.getShareParams()
  461. }else{
  462. //this.getInfo();
  463. this.queryActivityInfo();
  464. this.queryGoodsLook()
  465. }
  466. //this.queryActivityInfo();
  467. })
  468. }
  469. this.shopckList= uni.getStorageSync("shopckList");
  470. //this.ckmusic=uni.getStorageSync("ckmusic");
  471. //这一段是防止进入页面出去后再进来计时器重复启动
  472. if (this.ticker) {
  473. clearInterval(this.ticker);
  474. }
  475. /* uni.showShareMenu({
  476. withShareTicket: true,
  477. menus: ['shareAppMessage', 'shareTimeline'], // 自定义分享面板的菜单项
  478. }); */
  479. },
  480. onShow() {
  481. this.shopName=this.$store.state.ckshopInfo.shopName;
  482. if(this.$store.state.ckshopInfo){
  483. this.ckshopdata=this.$store.state.ckshopInfo
  484. this.shopInfo=this.$store.state.ckshopInfo
  485. }
  486. /* console.log(this.shopName)
  487. console.log(this.shopInfo) */
  488. },
  489. onPullDownRefresh(){
  490. //this.getInfo();
  491. this.queryActivityInfo();
  492. setTimeout(() => {
  493. uni.stopPullDownRefresh(); // 关闭下拉刷新
  494. }, 1000);
  495. },
  496. onHide(){
  497. this.bgmMusic.stop(()=>{
  498. console.log('背景音乐停止了');
  499. });
  500. if (this.ticker) {
  501. clearInterval(this.ticker);
  502. }
  503. },
  504. onUnload(){
  505. this.bgmMusic.stop()
  506. },
  507. methods: {
  508. ptMore(){
  509. this.djsMoreShow=true;
  510. },
  511. ptMorehide(){
  512. this.djsMoreShow=false;
  513. },
  514. beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
  515. // console.log("??????????????????"+this.info.groupType)
  516. if(this.info.groupType){
  517. this.ticker = setInterval(() => {
  518. this.info.groupList= JSON.parse(JSON.stringify( this.info.groupList))
  519. /* for (let i = 0, len = this.info.groupList.length; i < len; i++) {
  520. const item = this.info.groupList[i];
  521. if (item.EndTime) {
  522. }
  523. } */
  524. }, 1000);
  525. }
  526. },
  527. setDate(time) {
  528. var t_s = Date.parse(new Date(time)); //转化为时间戳毫秒数
  529. // console.log(t_s)
  530. var newt=t_s - 1000; //设置新时间比旧时间少一秒
  531. return this.formatDate(newt)
  532. } ,
  533. formatDate(time) {
  534. let date = new Date(time);
  535. let YY = date.getFullYear();
  536. let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  537. let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  538. let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  539. let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  540. let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  541. // 这里可以修改返回的日期格式
  542. return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
  543. },
  544. authorizShowno(){
  545. this.authorizShow=false
  546. },
  547. getShareParams(){
  548. this.$http('openMall/getShareParams', {
  549. scene:this.scene,
  550. },'GET').then(res => {
  551. this.collectingID=res.data.goodsID;
  552. this.shareId=res.data.operatorID
  553. this.queryActivityInfo();
  554. this.queryGoodsLook()
  555. })
  556. },
  557. gowp(){
  558. var time=''
  559. if(this.info.startTime){
  560. var time = this.info.startTime.slice(0,10) + '~' +this.info.endTime.slice(0,10)
  561. }else{
  562. }
  563. var sellingPoint='';
  564. if(this.info.activityContent){
  565. sellingPoint=this.info.activityContent
  566. }
  567. //console.log(sellingPoint)
  568. this.shareShow=false;
  569. uni.navigateTo({
  570. url:'../shop/wp?img='+this.mainImg+'&name='+this.info.activityName+'&time='+time+'&sellingPoint='+sellingPoint+'&id='+this.collectingID+'&type=2'+'&groupType='+this.info.groupType
  571. })
  572. },
  573. shareShowyc(){
  574. this.shareShow=false;
  575. },
  576. shareShowzs(){
  577. this.shareShow=true;
  578. },
  579. focusState1cl(){
  580. this.focusState1=true;
  581. },
  582. focusState2cl(){
  583. this.focusState2=true;
  584. },
  585. focusState3cl(){
  586. this.focusState3=true;
  587. },
  588. focusState4cl(){
  589. this.focusState4=true;
  590. },
  591. inputBindFocus(e){
  592. //console.log( e.detail.height);
  593. this.jpHeight=e.detail.height+ "px";
  594. //console.log(this.jpHeight)
  595. },
  596. inputBindBlur(){
  597. //return false;
  598. uni.onKeyboardHeightChange((obj)=>{
  599. console.log("inputBindBlur"+obj.height)
  600. let _sysInfo = uni.getSystemInfoSync();
  601. let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
  602. let _diff = obj.height - _heightDiff;
  603. console.log(_diff)
  604. if(_diff<0||_diff==0){
  605. this.jpHeight=0
  606. }
  607. // 键盘高度
  608. //this.jpHeight = (_diff > 0 ? _diff : 0) - 2 + "px";
  609. })
  610. if(this.jpNum==1){
  611. this.jpHeight=0
  612. }
  613. this.jpNum++;
  614. },
  615. queryGoodsLook(){
  616. this.$http('openmy/queryGoodsLook', {
  617. goodsId:this.collectingID,
  618. openId:this.userInfo.openId
  619. },'POST').then(res => {
  620. })
  621. },
  622. noShowShop2(){
  623. this.useShopShow=false;
  624. },
  625. useShow(){
  626. this.useShopShow=true;
  627. },
  628. submitOrder(){
  629. uni.hideKeyboard()
  630. var jsonArray={
  631. itemId:this.collectingID,
  632. itemName:this.info.activityName,
  633. itemQty:1,
  634. salePrice:this.info.money?this.info.money:0,
  635. totalPrice:this.info.money?this.info.money:0,
  636. }
  637. if(this.ckshopdata==''){
  638. uni.showToast({
  639. title: '请选择服务门店',
  640. icon: 'none',
  641. duration: 3000
  642. });
  643. return false;
  644. }
  645. if(this.info.clWhere.indexOf(1)!=-1&&this.mobilePhone==''){
  646. uni.showToast({
  647. title: '请输入手机号',
  648. icon: 'none',
  649. duration: 3000
  650. });
  651. return false;
  652. }
  653. if(this.info.clWhere.indexOf(2)!=-1&&this.plateNumber==''){
  654. uni.showToast({
  655. title: '请输入车牌号',
  656. icon: 'none',
  657. duration: 3000
  658. });
  659. return false;
  660. }
  661. if(this.info.clWhere.indexOf(3)!=-1&&this.customerName==''){
  662. uni.showToast({
  663. title: '请输入姓名',
  664. icon: 'none',
  665. duration: 3000
  666. });
  667. return false;
  668. }
  669. if(this.info.clWhere.indexOf(4)!=-1&&this.unit==''){
  670. uni.showToast({
  671. title: '请输入单位',
  672. icon: 'none',
  673. duration: 3000
  674. });
  675. return false;
  676. }
  677. var arr=[]
  678. arr.push(jsonArray)
  679. var params={
  680. sheetType:'6',
  681. sheetContent:this.info.activityName,
  682. customerName:this.customerName,
  683. mobilePhone:this.mobilePhone,
  684. unit:this.unit,
  685. plateNumber:this.plateNumber,
  686. //carModel:this.carInfo.carModel,
  687. totalMoney:this.info.money?this.info.money:0,
  688. shopId:this.ckshopdata.id,
  689. comment:this.comment,
  690. sheetDetail:JSON.stringify(arr),
  691. payType:this.info.payType,
  692. shareId:this.shareId,
  693. groupType:0,
  694. }
  695. if(this.groupOwner==1){
  696. params.groupOwner=1;
  697. params.groupType=1;
  698. params.totalMoney=this.info.groupMoney
  699. }
  700. if(this.groupOwner==2){
  701. params.groupOwner=2;
  702. params.groupType=1;
  703. params.groupID=this.groupID;
  704. params.totalMoney=this.info.groupMoney
  705. }
  706. uni.showLoading({
  707. title: '加载中'
  708. })
  709. if(!this.isgo){
  710. return false
  711. }
  712. this.isgo=false;
  713. this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
  714. uni.hideLoading();
  715. this.isgo=true;
  716. if(res.code==0){
  717. this.orderData=res.data
  718. if(this.info.payType==1){
  719. this.unifiedPay(res.data)
  720. }else{
  721. uni.showToast({
  722. title: '报名成功',
  723. icon: 'none',
  724. duration: 3000
  725. });
  726. uni.redirectTo({
  727. url: "../user/myOrder/activityOrderDetail?id=" + this.orderData.id +"&SheetType=" + this.orderData.sheetType
  728. })
  729. }
  730. }else{
  731. uni.showToast({
  732. title: res.msg,
  733. icon: 'none',
  734. duration: 3000
  735. });
  736. }
  737. })
  738. },
  739. unifiedPay(res){
  740. this.$http('openMallOrder/unifiedPay', {
  741. sheetId:res.id
  742. },'POST').then(res => {
  743. if(res.code==0){
  744. this.requestPayment(res.data)
  745. }else{
  746. uni.showToast({
  747. title: res.msg,
  748. icon: 'none',
  749. duration: 3000
  750. });
  751. }
  752. })
  753. },
  754. requestPayment(res){
  755. var payInfo=res;
  756. //console.log(payInfo)
  757. //console.log(String(Date.now()))
  758. var that=this;
  759. uni.requestPayment({
  760. provider: 'wxpay',
  761. //timeStamp: String(Date.now()),
  762. timeStamp: payInfo.timeStamp,
  763. nonceStr: payInfo.nonceStr,
  764. package:payInfo.package,
  765. signType: payInfo.signType,
  766. paySign: payInfo.paySign,
  767. appid:payInfo.appId,
  768. success: function (res) {
  769. console.log('success:' + JSON.stringify(res));
  770. uni.showToast({
  771. title: '支付成功',
  772. icon:'none',
  773. duration: 2000
  774. });
  775. uni.navigateTo({
  776. url:'../subPack/paySuccess?id=' + that.orderData.id +"&SheetType=" + that.orderData.sheetType+'&sx=1'+"&orderType=jike"
  777. })
  778. /* uni.redirectTo({
  779. url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType+'&sx=1'
  780. }) */
  781. },
  782. fail: function (err) {
  783. console.log(err)
  784. uni.showToast({
  785. title: '支付失败',
  786. icon:'none',
  787. duration: 2000
  788. });
  789. console.log(that.orderData)
  790. /* uni.redirectTo({
  791. url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
  792. }) */
  793. uni.navigateTo({
  794. url:'../subPack/paySuccess?id=' + that.orderData.id +"&SheetType=" + that.orderData.sheetType+'&sx=1'+"&orderType=jike"
  795. })
  796. }
  797. });
  798. },
  799. signUp(){
  800. this.groupOwner=0;
  801. if(this.userInfo){
  802. console.log(this.wxOpenData)
  803. /* this.info.shopList.forEach(item=>{
  804. if(item.id == this.shopInfo.id){
  805. this.ckshopdata=item;
  806. this.shopName=item.shopName;
  807. }
  808. }) */
  809. this.mobilePhone= this.userInfo.mobilePhone
  810. if(this.wxOpenData.loginInfo.customerInfo){
  811. this.customerName=this.wxOpenData.loginInfo.customerInfo.customerName
  812. }
  813. if(this.$store.state.carInfo){
  814. this.plateNumber=this.$store.state.carInfo.plateNumber;
  815. }
  816. this.bmShow=true;
  817. }else{
  818. this.authorizShow=true
  819. }
  820. },
  821. groupFn(){
  822. this.groupOwner=1;
  823. if(this.userInfo){
  824. this.bmShow=true;
  825. }else{
  826. this.authorizShow=true
  827. }
  828. },
  829. join(e){
  830. this.groupOwner=2;
  831. this.groupID=e.ID
  832. if(this.userInfo){
  833. this.bmShow=true;
  834. }else{
  835. this.authorizShow=true
  836. }
  837. },
  838. nobmshow(){
  839. this.bmShow=false;
  840. },
  841. ckshop(item){
  842. this.ckshopdata=item;
  843. this.shopName=item.shopName;
  844. this.ckshopShow=false;
  845. this.shopInfo=item
  846. this.useShopShow=false;
  847. },
  848. showCkshop(){
  849. console.log("选择门店")
  850. //this.ckshopShow=true;
  851. uni.navigateTo({
  852. url:'/pages/shop/ckshopList?goodsId='+this.collectingID+'&type=5'
  853. })
  854. },
  855. noShowShop(){
  856. this.ckshopShow=false;
  857. },
  858. queryActivityInfo(){
  859. uni.showLoading({
  860. title: '加载中'
  861. })
  862. this.$http('openHome/queryActivityInfo', {
  863. collectingID:this.collectingID
  864. }, 'GET').then(res => {
  865. //uni.hideLoading();
  866. this.info = res.data;
  867. console.log(this.info)
  868. this.getInfo();
  869. this.dimgList=[]
  870. if(this.info.imgList){
  871. this.info.imgList.forEach(item=>{
  872. if(item.imgType==1){
  873. this.mainImg=item.img
  874. }else{
  875. this.dimgList.push(item)
  876. }
  877. })
  878. }
  879. if (this.info.endTime < this.info.startTime) {
  880. // this.$vux.toast.text('时间设置错误')
  881. return
  882. }
  883. // this.activityNoOpen
  884. if (Number(new Date().getTime()) > (Number(new Date(this.info.startTime.replace(/-/g, '/')).getTime()) || 0)) {
  885. console.log("现在时间大于开始时间")
  886. this.activityNoOpen = false
  887. } else {
  888. this.activityNoOpen = true
  889. }
  890. if (Number(new Date().getTime()) > Number(new Date(this.info.endTime.replace(/-/g, '/')).getTime())) {
  891. console.log("现在时间大于结束时间")
  892. this.activityEnd = true
  893. } else {
  894. this.activityEnd = false
  895. }
  896. if (!this.activityNoOpen && !this.activityEnd) {
  897. this.clock()
  898. }
  899. if (this.activityNoOpen && !this.activityEnd) {
  900. this.clock2()
  901. }
  902. if(this.info.music){
  903. this.bgmMusic = uni.createInnerAudioContext();
  904. this.bgmMusic.autoplay = true;//自动播放
  905. this.bgmMusic.loop = true;//循环播放
  906. //this.mp3Url='http://dmsimg.66km.com/music/sakuratears.mp3';
  907. //this.bgmMusic.src ='http://dmsimg.66km.com/music/sakuratears.mp3'//, mp3Url;//背景音乐地址
  908. this.mp3Url=this.info.music.music;
  909. this.bgmMusic.src =this.info.music.music; //
  910. this.bgmMusic.onPlay(function(){
  911. console.log('背景音乐播放中');
  912. });
  913. this.bgmMusic.onError((res) => {
  914. console.log(res.errMsg);
  915. console.log(res.errCode);
  916. });
  917. }
  918. })
  919. },
  920. play2(){
  921. this.bgmMusic.play();
  922. this.payshow=false;
  923. },
  924. play(){
  925. this.payshow=true;
  926. this.bgmMusic.stop(()=>{
  927. console.log('背景音乐停止了');
  928. });
  929. },
  930. getInfo(){
  931. var that=this
  932. that.getInfo2();
  933. /* uni.authorize({
  934. scope: 'scope.userLocation',
  935. success() {
  936. uni.getLocation({
  937. type: 'gcj02',
  938. success: function(res) {
  939. console.log(res)
  940. that.location.lat = res.latitude
  941. that.location.lng = res.longitude
  942. that.getInfo2();
  943. },
  944. fail(err) {
  945. console.log("定位失败")
  946. that.getInfo2();
  947. }
  948. });
  949. },
  950. fail: (err) => {
  951. console.log(err)
  952. that.getInfo2();
  953. }}) */
  954. },
  955. getInfo2(){
  956. this.$http('openreservation/getInfo', {
  957. lat: this.location.lat ? this.location.lat : '',
  958. lng: this.location.lng ? this.location.lng : '',
  959. }, 'GET').then(res => {
  960. uni.hideLoading();
  961. //this.shopInfo = res.data.shopInfo
  962. var shopinfo=res.data.shopInfo;
  963. this.info.shopList.forEach(item=>{
  964. if(item.id==shopinfo.id){
  965. this.ckshopdata=shopinfo
  966. this.shopInfo=shopinfo
  967. this.shopName=this.shopInfo.shopName
  968. }
  969. })
  970. if(this.shopInfo==''){
  971. this.shopInfo=this.info.shopList[0]
  972. //this.shopName=this.shopInfo.shopName
  973. }
  974. })
  975. this.beginTimer();
  976. },
  977. call() {
  978. uni.makePhoneCall({
  979. phoneNumber: this.shopInfo.contactorPhone
  980. });
  981. },
  982. getmap() {
  983. console.log("打开地图")
  984. var that = this;
  985. if (!that.shopInfo.lat || !that.shopInfo.lng) {
  986. uni.showToast({
  987. title: '该店铺未设置定位',
  988. icon: 'none',
  989. duration: 3000
  990. });
  991. } else {
  992. uni.openLocation({
  993. latitude: Number(that.shopInfo.lat),
  994. longitude: Number(that.shopInfo.lng),
  995. name: that.shopInfo.shopName,
  996. address: that.shopInfo.provinceName + that.shopInfo.cityName + that.shopInfo.areaName + that.shopInfo.address,
  997. success: function() {
  998. console.log('success');
  999. },
  1000. fail(err) {
  1001. console.log(err)
  1002. }
  1003. });
  1004. }
  1005. },
  1006. clock () {
  1007. let _this = this
  1008. let today = new Date() // 当前时间
  1009. let h = today.getHours()
  1010. let m = today.getMinutes()
  1011. let s = today.getSeconds()
  1012. let stopTime = new Date(_this.info.endTime.replace(/-/g, '/')) // 结束时间
  1013. if (Number(new Date(_this.info.endTime).getTime()) < Number(new Date().getTime())) {
  1014. this.activityEnd = true
  1015. return
  1016. }
  1017. let stopH = stopTime.getHours()
  1018. let stopM = stopTime.getMinutes()
  1019. let stopS = stopTime.getSeconds()
  1020. let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
  1021. let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
  1022. let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
  1023. let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
  1024. let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
  1025. let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
  1026. let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
  1027. let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
  1028. this.daojishi = '报名倒计时:' + shengyuD + '天' + shengyuH + '小时' + shengyuM + '分' + S + '秒'
  1029. // setTimeout("clock()",500);
  1030. this.shengyuM=shengyuM;
  1031. this.shengyuD=shengyuD;
  1032. this.shengyuH=shengyuH;
  1033. setTimeout(_this.clock, 500)
  1034. },
  1035. clock2(){
  1036. let _this = this
  1037. let today = new Date() // 当前时间
  1038. let h = today.getHours()
  1039. let m = today.getMinutes()
  1040. let s = today.getSeconds()
  1041. let startTime = new Date(_this.info.startTime.replace(/-/g, '/')) // 结束时间
  1042. if (Number(new Date(_this.info.startTime).getTime()) < Number(new Date().getTime())) {
  1043. this.activityNoOpen = true
  1044. return
  1045. }
  1046. let stopH = startTime.getHours()
  1047. let stopM = startTime.getMinutes()
  1048. let stopS = startTime.getSeconds()
  1049. let shenyu = startTime.getTime() - today.getTime() // 倒计时毫秒数
  1050. let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
  1051. let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
  1052. let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
  1053. let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
  1054. let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
  1055. let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
  1056. let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
  1057. this.daojishi = '报名倒计时:' + shengyuD + '天' + shengyuH + '小时' + shengyuM + '分' + S + '秒'
  1058. // setTimeout("clock()",500);
  1059. this.shengyuM=shengyuM;
  1060. this.shengyuD=shengyuD;
  1061. this.shengyuH=shengyuH;
  1062. setTimeout(_this.clock2, 500)
  1063. },
  1064. decryptPhoneNumber: function(e) {
  1065. console.log(e);
  1066. this.code=e.detail.code
  1067. this.wxPhoneLogin()
  1068. this.authorizShow=false;
  1069. },
  1070. wxPhoneLogin(){
  1071. var that=this;
  1072. this.$http('miniApp2/sys/wxPhoneLogin', {
  1073. appId:this.ext.appId,
  1074. unionId:this.ext.unionId,
  1075. code:this.code,
  1076. openId:this.wxOpenData.openid
  1077. },'POST').then(res => {
  1078. var data = res.data;
  1079. if(data.loginInfo){
  1080. this.userInfo=data.loginInfo.openUser;
  1081. this.wxOpenData=data.loginInfo;
  1082. this.$store.commit('mutationswxOpenData', data)
  1083. this.$store.commit('mutationsuserInfo', this.userInfo)
  1084. this.getInfo()
  1085. }
  1086. })
  1087. },
  1088. makePhoneCall(num){
  1089. uni.makePhoneCall({
  1090. phoneNumber:num
  1091. });
  1092. },
  1093. goMap(item){
  1094. var that = this;
  1095. if (!item.lat || !item.lng) {
  1096. uni.showToast({
  1097. title: '该店铺未设置定位',
  1098. icon: 'none',
  1099. duration: 3000
  1100. });
  1101. } else {
  1102. uni.openLocation({
  1103. latitude: Number(item.lat),
  1104. longitude: Number(item.lng),
  1105. name: item.shopName,
  1106. address: item.provinceName + item.cityName + item.areaName +
  1107. item.address,
  1108. success: function() {
  1109. console.log('success');
  1110. },
  1111. fail(err) {
  1112. console.log(err)
  1113. }
  1114. });
  1115. }
  1116. },
  1117. },
  1118. filters: {
  1119. // 拼团有效期的filter
  1120. limitTimeFilter (val) {
  1121. //console.log('limitTimeFilter')
  1122. //https://blog.csdn.net/qq_39905409/article/details/104478623
  1123. if (val) {
  1124. //console.log(val)
  1125. let formateLimitTimes = that.$common.formateTimeStamp(val);
  1126. let txt = `${formateLimitTimes.hour} : ${formateLimitTimes.min} : ${formateLimitTimes.seconds} `;
  1127. /* if (formateLimitTimes.day != '00') {
  1128. txt = `${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分 ${formateLimitTimes.seconds} 秒`;
  1129. } */
  1130. return txt;
  1131. } else {
  1132. const twtxt = `0 : 0 : 0 `
  1133. return twtxt;
  1134. }
  1135. },
  1136. maskLicensePlate(value) {
  1137. return value.replace(/(\w{1})(\w{3})(\w{1})/, '$1***$3');
  1138. }
  1139. },
  1140. beforeCreate: function () {
  1141. that = this;
  1142. },
  1143. onShareAppMessage(res) {
  1144. console.log(res)
  1145. var img='';
  1146. if(this.mainImg){
  1147. img=this.mainImg
  1148. }else{
  1149. img="http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png"
  1150. }
  1151. /* if(this.info.ImgList.length>0){
  1152. img=this.info.ImgList[0].url
  1153. } */
  1154. console.log(this.info.groupType)
  1155. if(this.info.groupType){
  1156. //console.log(res.target.dataset.obj.ID)
  1157. var url= 'pages/subPack/jkDetail?id=' + this.collectingID+'&shareId='+this.userInfo.openId+'&shareName='+this.userInfo.nickName+'&groupID='+res.target.dataset.obj.ID
  1158. }else{
  1159. var url= 'pages/activity/jkDetail?id=' + this.collectingID+'&shareId='+this.userInfo.openId
  1160. }
  1161. return {
  1162. title: this.info.activityName,
  1163. imageUrl:img,
  1164. //imageUrl:this.mainImg,
  1165. //imageUrl:'http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png',
  1166. path:url,
  1167. success(res){
  1168. uni.showToast({
  1169. title:'分享成功'
  1170. })
  1171. },
  1172. fail(res){
  1173. uni.showToast({
  1174. title:'分享失败',
  1175. icon:'none',
  1176. duration: 3000
  1177. })
  1178. }
  1179. }
  1180. },
  1181. onShareTimeline(res) {
  1182. if(this.info.groupType){
  1183. //console.log(res.target.dataset.obj.ID)
  1184. var url= 'id=' + this.collectingID+'&shareId='+this.userInfo.openId+'&shareName='+this.userInfo.nickName//+'&groupID='+res.target.dataset.obj.ID
  1185. }else{
  1186. var url= 'id=' + this.collectingID+'&shareId='+this.userInfo.openId
  1187. }
  1188. return {
  1189. title: this.info.activityName,
  1190. query:url,
  1191. imageUrl:'http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png',
  1192. }
  1193. }
  1194. }
  1195. </script>
  1196. <style scoped>
  1197. .ptNameBz{
  1198. font-weight: 500;line-height: 34rpx;
  1199. font-size: 22rpx;height: 32rpx;
  1200. color: #FD0F00;margin-top: 6rpx;margin-right: 10rpx;
  1201. background: url('http://dmsphoto.66km.com.cn/thFiles/2AF1130F-C318-45D3-B057-FA0728B41046.png') no-repeat;
  1202. background-size: 100% 100%;
  1203. padding-left: 64rpx;padding-right: 4rpx;
  1204. }
  1205. .name{
  1206. display: flex;
  1207. }
  1208. .djsCont{
  1209. width: 638rpx;
  1210. height: 50vh;
  1211. background: #fff;
  1212. margin-top: 20vh;
  1213. margin-left:56rpx ;border-radius: 15rpx;
  1214. }
  1215. .djsCont .ptLine{
  1216. border-top:0;
  1217. border-bottom: 1px solid #EEEEEE;
  1218. }
  1219. .djsCont .bmTop{
  1220. border-bottom: 1px solid #EEEEEE;
  1221. padding: 24rpx;
  1222. }
  1223. .djsLineBox{
  1224. height: calc(60vh - 120rpx);
  1225. overflow-y: scroll;
  1226. }
  1227. .ptLine{
  1228. display: flex;
  1229. justify-content: space-between;
  1230. padding: 26rpx 24rpx;border-top: 1px solid #EEEEEE;
  1231. }
  1232. .FirstMobilePhone{
  1233. font-weight: 400;
  1234. color: #222222;font-size: 28rpx;line-height: 60rpx;
  1235. }
  1236. .DiffBNumber{
  1237. font-weight: 400;text-align: right;
  1238. color: #222222;font-size: 26rpx;
  1239. }
  1240. .ptlineRight{
  1241. display: flex;
  1242. }
  1243. .ptlinexx{
  1244. padding-right: 12rpx;
  1245. }
  1246. .ptBtn{
  1247. width: 137rpx;font-weight: 400;
  1248. color: #FFFFFF;font-size: 26rpx;
  1249. height: 60rpx;text-align: center;
  1250. background: #E02E24;line-height: 60rpx;
  1251. border-radius: 6rpx;
  1252. margin-top: 4rpx;
  1253. }
  1254. .ptdjs{
  1255. font-weight: 400;
  1256. color: #666666;font-size: 24rpx;
  1257. }
  1258. .ptBox{
  1259. background: #ffffff;margin-top: 20rpx;
  1260. }
  1261. .bottomPtBox{
  1262. display: flex;padding-top: 24rpx;
  1263. }
  1264. .ptNum{
  1265. font-weight: 400;
  1266. color: #222222;font-size: 28rpx;
  1267. }
  1268. .ptBoxtop{
  1269. display: flex;justify-content: space-between;
  1270. padding: 20rpx 24rpx;
  1271. }
  1272. .ptMore{
  1273. font-weight: 400;
  1274. color: #666666;font-size: 24rpx;
  1275. }
  1276. .separate{
  1277. width: 284rpx;margin-left: 30rpx;
  1278. height: 70rpx;
  1279. /* background: #ffe1f1; */
  1280. border-radius: 37rpx;
  1281. text-align: center;color:#EC0F0A;
  1282. border: 2rpx solid #EC0F0A;
  1283. }
  1284. .separate .separateTop{
  1285. color:#EC0F0A;
  1286. }
  1287. .separate .separateTxt{
  1288. color:#EC0F0A;
  1289. }
  1290. .groupBtn{
  1291. width: 284rpx;text-align: center;color: #ffffff;
  1292. height: 74rpx;margin-left: 30rpx;
  1293. background: #EC0F0A;
  1294. border-radius: 37rpx;
  1295. }
  1296. .separateTop{
  1297. font-weight: 500;font-size: 28rpx;
  1298. color: #FFFFFF;padding-top: 2rpx;
  1299. }
  1300. .separateTxt{
  1301. color: #FFFFFF;font-size: 26rpx;line-height: 26rpx;
  1302. }
  1303. .companyName{
  1304. font-size: 24rpx;
  1305. font-family: PingFangSC-Medium, PingFang SC;
  1306. font-weight: 500;
  1307. color: #666666;
  1308. line-height: 33rpx;
  1309. text-align: center;
  1310. padding: 40rpx;
  1311. }
  1312. .shareBtn{
  1313. /* width: 100rpx; */
  1314. background: #F4F5F7;
  1315. }
  1316. .shareBimg{
  1317. width: 102rpx;
  1318. height: 102rpx;
  1319. }
  1320. .bottomTxtshare{
  1321. color: #333333;
  1322. font-size: 22rpx;
  1323. padding-top: 20rpx;
  1324. }
  1325. .shareBox{
  1326. width: 100%;
  1327. height: 100vh;
  1328. background: rgba(0, 0, 0, 0.5);
  1329. position: fixed;
  1330. left: 0;
  1331. bottom: 0;
  1332. z-index: 11;
  1333. }
  1334. .shareCont{
  1335. width: 100%;
  1336. background: #F4F5F7;
  1337. position: absolute;
  1338. left: 0;
  1339. bottom: 0;
  1340. display: flex;
  1341. justify-content: space-around;
  1342. padding: 50rpx 0;
  1343. border-radius: 40rpx 40rpx 0px 0px;
  1344. }
  1345. .mp3Img{
  1346. /* transform: translate(-1584.4%, 121.5%) scale(1); */
  1347. position: fixed;
  1348. top: 40rpx;
  1349. right: 40rpx;
  1350. width: 60rpx;
  1351. height: 60rpx;
  1352. }
  1353. .ckshopBox{
  1354. z-index: 111 !important;
  1355. }
  1356. .shopline {
  1357. padding: 20rpx 0;
  1358. background-color: #FFFFFF;
  1359. border-radius: 10rpx;
  1360. display: flex;
  1361. }
  1362. .baomingBox{
  1363. width: 750rpx;
  1364. height: 100vh;
  1365. background: rgba(0, 0, 0, 0.4);
  1366. position: fixed;
  1367. top: 0;
  1368. left: 0;
  1369. z-index: 11;
  1370. /* display: flex;
  1371. align-items: center; */
  1372. }
  1373. .bmTtnBox{
  1374. width: 750rpx;
  1375. height: 120rpx;
  1376. background: #FFFFFF;
  1377. box-shadow: 0px -2px 10rpx 0px rgba(153,153,153,0.2000);
  1378. position: absolute;
  1379. left: 0;
  1380. bottom: 0;
  1381. padding-bottom: constant(safe-area-inset-bottom);
  1382. padding-bottom: env(safe-area-inset-bottom);
  1383. }
  1384. .bmBtn{
  1385. width: 690rpx;
  1386. height: 70rpx;
  1387. background: #EC0F0A;
  1388. border-radius: 37rpx;
  1389. text-align: center;
  1390. line-height: 74rpx;
  1391. color: #ffffff;
  1392. font-size: 30rpx;
  1393. margin-top: 23rpx;
  1394. margin-left: 30rpx;
  1395. margin-top: 20rpx;
  1396. /* border: 2rpx solid #EC0F0A; */
  1397. }
  1398. .bmshopjt{
  1399. width: 12rpx;
  1400. height: 20rpx;
  1401. margin-top: 10rpx;
  1402. }
  1403. .bmlineInput{
  1404. color: #333333;
  1405. font-size: 28rpx;
  1406. height: 98rpx;
  1407. line-height: 98rpx;
  1408. }
  1409. .bmshopname{
  1410. font-weight: 400;
  1411. color: #999999;
  1412. font-size: 28rpx;
  1413. line-height: 40rpx;
  1414. width: 500rpx;
  1415. white-space:nowrap;
  1416. overflow:hidden;
  1417. text-overflow:ellipsis;
  1418. }
  1419. .bmshopLine{
  1420. display: flex;
  1421. justify-content: space-between;
  1422. padding: 26rpx 0;
  1423. border-bottom: 1px solid #EEEEEE;
  1424. }
  1425. .bmLine{
  1426. border-bottom: 1px solid #EEEEEE;
  1427. }
  1428. .bmTop{
  1429. display: flex;
  1430. justify-content: space-between;
  1431. padding: 30rpx 24rpx 10rpx 24rpx;
  1432. }
  1433. .bmTitle{
  1434. font-weight: 500;
  1435. color: #3C3C3C;
  1436. font-size: 30rpx;
  1437. line-height: 36rpx;
  1438. }
  1439. .bmChimg{
  1440. width: 36rpx;
  1441. height: 36rpx;
  1442. }
  1443. .baomingCont{
  1444. position: absolute;
  1445. width: 750rpx;
  1446. /* height:850rpx; */
  1447. /* padding-bottom: constant(safe-area-inset-bottom);
  1448. padding-bottom: env(safe-area-inset-bottom); */
  1449. left: 0;
  1450. bottom: 0;
  1451. background: #ffffff;
  1452. border-radius: 24rpx 24rpx 0px 0px;
  1453. padding-bottom: 10rpx;
  1454. }
  1455. .shareIcon{
  1456. width: 48rpx;
  1457. height: 48rpx;
  1458. display: block;
  1459. }
  1460. .bottomBtnBox{
  1461. display: flex;
  1462. }
  1463. .bottomBtnBoxLeft{
  1464. padding-left: 40rpx;
  1465. padding-top: 21rpx;
  1466. }
  1467. .shareTxt{
  1468. color: #666666;font-size: 20rpx;
  1469. text-align: center;
  1470. }
  1471. .bottomBtn{
  1472. width: 598rpx;
  1473. height: 74rpx;
  1474. background: #EC0F0A;
  1475. border-radius: 37rpx;
  1476. line-height: 74rpx;
  1477. text-align: center;
  1478. color: #ffffff;
  1479. font-size: 30rpx;
  1480. margin-top: 24rpx;
  1481. margin-left: 34rpx;
  1482. }
  1483. .bottomBtn2{
  1484. width: 598rpx;
  1485. height: 74rpx;
  1486. background: #DDDDDD;
  1487. border-radius: 37rpx;
  1488. line-height: 74rpx;
  1489. text-align: center;
  1490. color: #ffffff;
  1491. font-size: 30rpx;
  1492. margin-top: 24rpx;
  1493. margin-left: 34rpx;
  1494. }
  1495. .timeTbox{
  1496. width: 750rpx;
  1497. height: 60rpx;
  1498. background:#FFF5F0;
  1499. border-radius: 24rpx 24rpx 0px 0px;
  1500. border: 1px solid #EFE1D5;
  1501. display: flex;
  1502. justify-content: center;
  1503. font-size: 24rpx;
  1504. font-family: PingFangSC-Regular, PingFang SC;
  1505. font-weight: 400;
  1506. color: #764D49;
  1507. }
  1508. .timeviewTxt{
  1509. line-height: 41rpx;
  1510. padding-top: 10rpx;
  1511. }
  1512. .timeDivTxt{
  1513. line-height: 60rpx;
  1514. padding: 0 10rpx;
  1515. }
  1516. .timeK{
  1517. height: 41rpx;
  1518. line-height: 41rpx;
  1519. color: #FFFFFF;
  1520. width: 41rpx;
  1521. text-align: center;
  1522. background: #EC0F0A;
  1523. border-radius: 6rpx;
  1524. margin-top: 9rpx;
  1525. margin-left: 15rpx;
  1526. margin-right: 15rpx;
  1527. }
  1528. .bottom{
  1529. width: 750rpx;
  1530. height: 180rpx;
  1531. background: #FFFFFF;
  1532. border-radius: 24rpx 24rpx 0px 0px;
  1533. position: fixed;
  1534. left: 0;
  1535. bottom: 0;
  1536. padding-bottom: constant(safe-area-inset-bottom);
  1537. padding-bottom: env(safe-area-inset-bottom);
  1538. }
  1539. .signupBox{
  1540. background: #ffffff;
  1541. margin-top: 20rpx;
  1542. }
  1543. .seeBox{
  1544. display: flex;
  1545. flex-wrap: wrap;
  1546. padding-left: 24rpx;
  1547. padding-bottom: 20rpx;
  1548. }
  1549. .seeLine{
  1550. padding-top: 14rpx;
  1551. padding-right: 16rpx;
  1552. }
  1553. .signupLine{
  1554. display: flex;
  1555. justify-content: space-between;
  1556. padding: 11rpx 0;
  1557. border-bottom: 1px solid #DDDDDD;
  1558. }
  1559. .signupLineM{
  1560. color: #3C3C3C;font-size: 26rpx;
  1561. line-height: 56rpx;
  1562. }
  1563. .signupLineR{
  1564. color: #999999;
  1565. font-size: 26rpx;
  1566. line-height: 56rpx;
  1567. }
  1568. .signupLineLName{
  1569. font-weight: 400;
  1570. color: #3C3C3C;
  1571. font-size: 26rpx;
  1572. padding-left: 16rpx;
  1573. line-height: 56rpx;
  1574. width: 150rpx;
  1575. white-space:nowrap;
  1576. overflow:hidden;
  1577. text-overflow:ellipsis;
  1578. }
  1579. .signupCont{
  1580. padding: 0 24rpx;
  1581. }
  1582. .signupLineLImg{
  1583. width: 56rpx;
  1584. height: 56rpx;
  1585. border-radius: 8rpx;
  1586. }
  1587. .signupLineL{
  1588. display: flex;
  1589. }
  1590. .signupTop{
  1591. width: 750rpx;
  1592. height: 78rpx;
  1593. background: url(http://dmsphoto.66km.com.cn/thFiles/FF582E15-1971-4C04-8AB3-F7618FFB961D.png);
  1594. background-size: 100% 100%;
  1595. text-align: center;
  1596. line-height: 78rpx;
  1597. }
  1598. .signupTops1{
  1599. color: #EC0F0A;font-weight: 500;
  1600. font-size: 28rpx;
  1601. }
  1602. .signupTops1{
  1603. color: #703917;font-weight: 500;
  1604. font-size: 28rpx;
  1605. }
  1606. .shopRightIcon{
  1607. width: 44rpx;
  1608. height: 44rpx;
  1609. display: block;
  1610. margin: 0 auto;
  1611. margin-bottom: 10rpx;
  1612. }
  1613. .shopName{
  1614. color: #3C3C3C;
  1615. font-size: 28rpx;
  1616. width: 500rpx;
  1617. }
  1618. .shopaddress{
  1619. font-weight: 400;
  1620. color: #999999;
  1621. font-size: 24rpx;
  1622. padding-top: 10rpx;
  1623. width: 500rpx;
  1624. }
  1625. .shopRightSx{
  1626. width: 2rpx;
  1627. height: 69rpx;
  1628. background:#EEEEEE ;
  1629. margin-left: 34rpx;
  1630. margin-right: 34rpx;
  1631. margin-top: 14rpx;
  1632. }
  1633. .shopCont{
  1634. display: flex;
  1635. justify-content: space-between;
  1636. padding-top: 25rpx;
  1637. }
  1638. .shopContRight{
  1639. display: flex;
  1640. }
  1641. .shopContRightLine{
  1642. text-align: center;
  1643. color: #999999;
  1644. font-size: 24rpx;
  1645. }
  1646. .content{
  1647. min-height: 100vh;
  1648. background:#F4F5F7;
  1649. }
  1650. .detailImg{
  1651. width: 750rpx;
  1652. display: block;
  1653. }
  1654. .detailBOx{
  1655. background: #ffffff;
  1656. margin-top: 20rpx;
  1657. }
  1658. .detailTitle{
  1659. color: #222222;
  1660. font-weight: 500;
  1661. padding: 20rpx 24rpx;
  1662. font-size: 30rpx;
  1663. }
  1664. .topimg{
  1665. width: 750rpx;
  1666. }
  1667. .shopMs{
  1668. font-weight: 500;
  1669. color: #222222;
  1670. line-height: 42rpx;
  1671. font-size: 30rpx;
  1672. }
  1673. .shopBox{
  1674. background: #ffffff;
  1675. margin-top: 20rpx;
  1676. padding: 20rpx 24rpx;
  1677. }
  1678. .shopBoxTop{
  1679. display: flex;
  1680. justify-content: space-between;
  1681. }
  1682. .shopTy{
  1683. display: flex;
  1684. }
  1685. .shopTyTxt{
  1686. font-weight: 400;
  1687. color: #666666;
  1688. font-size: 24rpx;
  1689. line-height: 42rpx;
  1690. }
  1691. .shopjt{
  1692. width: 14rpx;
  1693. height: 23rpx;
  1694. margin-top: 10rpx;
  1695. margin-left: 10rpx;
  1696. }
  1697. .cont{
  1698. background: #ffffff;
  1699. border-radius: 24rpx 24rpx 0px 0px;
  1700. margin-top: -30rpx;
  1701. padding: 30rpx 24rpx;
  1702. position: relative;
  1703. }
  1704. .name{
  1705. color: #3C3C3C;
  1706. line-height: 42rpx;
  1707. font-weight: 500;
  1708. font-size: 30rpx;
  1709. }
  1710. .name2{
  1711. color: #3C3C3C;
  1712. line-height: 36rpx;
  1713. font-weight: 400;
  1714. font-size: 26rpx;
  1715. padding-top: 16rpx;
  1716. }
  1717. .name3{
  1718. color: #999999;
  1719. line-height: 36rpx;
  1720. font-weight: 400;
  1721. font-size: 26rpx;
  1722. padding-top: 16rpx;
  1723. }
  1724. .shopImg {
  1725. width: 146rpx;
  1726. height: 146rpx;
  1727. border-radius: 6rpx;
  1728. }
  1729. .shopBox2 {
  1730. padding-top: 30rpx;
  1731. display: flex;
  1732. }
  1733. .flex {
  1734. display: flex;
  1735. justify-content: space-between;
  1736. }
  1737. .shopCont2 {
  1738. padding-left: 22rpx;
  1739. width: 520rpx;
  1740. }
  1741. .shopName {
  1742. color: #333333;
  1743. font-size: 26rpx;
  1744. font-weight: 600;
  1745. }
  1746. .span1 {
  1747. color: #FF4F00;
  1748. font-size: 36rpx;
  1749. }
  1750. .span2 {
  1751. color: #FF4F00;
  1752. font-size: 22rpx;
  1753. }
  1754. .span3 {
  1755. color: #333333;
  1756. font-size: 22rpx;
  1757. padding-left: 22rpx;
  1758. }
  1759. .shopBq {
  1760. color: #FF4F00;
  1761. font-size: 22rpx;
  1762. border-radius: 4rpx;
  1763. border: 1px solid #FF4F00;
  1764. line-height: 30rpx;
  1765. height: 30rpx;
  1766. padding: 0rpx 5rpx;
  1767. margin-top: 10rpx;
  1768. }
  1769. .brandsBg {
  1770. display: flex;
  1771. height: 38rpx;
  1772. flex-wrap: wrap;
  1773. align-items: center;
  1774. overflow: hidden;
  1775. padding: 5rpx 0rpx;
  1776. }
  1777. .brands {
  1778. border-radius: 4rpx;
  1779. padding: 0 5rpx;
  1780. color: #F19D01;
  1781. height: 28rpx;
  1782. border: 1px solid #F19D01;
  1783. font-size: 20rpx;
  1784. line-height: 28rpx;
  1785. margin: 5rpx 10rpx 5rpx 0rpx;
  1786. }
  1787. .timeBg {
  1788. display: flex;
  1789. }
  1790. .shopTime {
  1791. color: #666666;
  1792. font-size: 22rpx;
  1793. }
  1794. .addressBox {
  1795. color: #666666;
  1796. font-size: 22rpx;
  1797. }
  1798. .ckshopLine{
  1799. display: flex;
  1800. padding: 20rpx 0;
  1801. border-bottom: 1px solid #EEEEEE;
  1802. }
  1803. button::after{
  1804. border: none;
  1805. }
  1806. button{
  1807. position: relative;
  1808. display: block;
  1809. margin-left: 0;
  1810. margin-right: 0;
  1811. padding-left: 0px;
  1812. padding-right: 0px;
  1813. box-sizing: border-box;
  1814. text-align: center;
  1815. text-decoration: none;
  1816. line-height: 1.35;
  1817. -webkit-tap-highlight-color: transparent;
  1818. overflow: hidden;
  1819. color: #000000;
  1820. background-color: #fff;
  1821. height: 100%;
  1822. }
  1823. .authorizBox{
  1824. width: 100vw;
  1825. height: 100vh;
  1826. background: rgba(0, 0, 0, 0.5);
  1827. position: fixed;
  1828. top: 0;
  1829. left: 0;
  1830. }
  1831. .authorizCont{
  1832. margin-top: 30vh;
  1833. width: 564rpx;
  1834. height: 408rpx;
  1835. background: #FFFFFF;
  1836. border-radius: 24rpx;
  1837. margin-left: 93rpx;
  1838. position: relative;
  1839. }
  1840. .authorizCloseImg{
  1841. width: 62rpx;
  1842. height: 62rpx;
  1843. }
  1844. .sqLogoBox{
  1845. width: 180rpx;
  1846. height: 180rpx;
  1847. background: #FFFFFF;
  1848. border-radius: 90rpx;
  1849. text-align: center;
  1850. position: absolute;
  1851. top: -50rpx;
  1852. left: 192rpx;
  1853. }
  1854. .authorizName{
  1855. color: #333333;
  1856. line-height: 42rpx;
  1857. font-size: 30rpx;
  1858. text-align: center;
  1859. padding-top: 58rpx;
  1860. }
  1861. .authorizMs{
  1862. color: #999999;
  1863. line-height: 36rpx;
  1864. font-size: 26rpx;
  1865. width: 452rpx;
  1866. padding-top: 24rpx;
  1867. text-align: center;
  1868. margin-left: 56rpx;
  1869. }
  1870. .authorizContbutton{
  1871. width: 210rpx;
  1872. height: 66rpx;
  1873. background: #EC0F0A;
  1874. border-radius: 44rpx;
  1875. line-height: 66rpx;
  1876. text-align: center;
  1877. font-size:30rpx;
  1878. color: #FFFFFF;
  1879. margin-right: 40rpx;
  1880. }
  1881. .sqRefuse{
  1882. width: 210rpx;
  1883. height: 66rpx;
  1884. border: 1px solid #eaeaea;
  1885. line-height: 66rpx;
  1886. border-radius: 36rpx;
  1887. text-align: center;
  1888. font-size:30rpx;
  1889. margin-left:40rpx;
  1890. color: #999999;
  1891. }
  1892. .sqLine{
  1893. margin-top: 62rpx;
  1894. display: flex;
  1895. justify-content: space-between;
  1896. }
  1897. .applicationTk{
  1898. height: 60vh;
  1899. }
  1900. .groupBtnTxt{
  1901. color: #FFFFFF;font-size: 26rpx;line-height: 26rpx;
  1902. }
  1903. .groupBtnTop{
  1904. font-weight: 500;font-size: 28rpx;
  1905. color: #FFFFFF;padding-top: 2rpx;
  1906. }
  1907. .couponPackageData{
  1908. background: #ffffff;
  1909. margin-top: 20rpx;
  1910. }
  1911. .couponPackageTitle{
  1912. padding-left: 24rpx;
  1913. padding-top: 30rpx;
  1914. color: #333333;
  1915. font-size: 32rpx;
  1916. line-height: 45rpx;
  1917. font-weight: 500;
  1918. }
  1919. .linecoupon{
  1920. justify-content: space-between;
  1921. }
  1922. .linecouponCont{
  1923. display: flex;
  1924. justify-content: space-between;
  1925. padding: 15rpx 24rpx;
  1926. }
  1927. .linecouponContLeft{
  1928. display: flex;
  1929. }
  1930. .couponType{
  1931. color: #FFA511;
  1932. border: 1px solid #FFA511;
  1933. border-radius: 4rpx;
  1934. font-size: 18rpx;
  1935. line-height: 26rpx;
  1936. padding: 0 8rpx;
  1937. height: 26rpx;
  1938. margin-top: 5rpx;
  1939. }
  1940. .couponName{
  1941. font-size: 26rpx;line-height: 38rpx;color: #3C3C3C;
  1942. padding-left: 20rpx;
  1943. }
  1944. .couponNum{
  1945. font-size: 26rpx;line-height: 38rpx;color: #999999;
  1946. }
  1947. .buySHop{
  1948. display: flex;
  1949. justify-content: space-between;
  1950. font-size:28rpx ;
  1951. color: #666666;
  1952. padding-top: 30rpx;
  1953. }
  1954. .buyShopBox{
  1955. /* padding: 0 24rpx; */
  1956. padding-top: 20rpx;
  1957. }
  1958. .nobuyShopBox{
  1959. height: 220rpx;
  1960. }
  1961. .duihao{
  1962. width: 28rpx;height: 28rpx;
  1963. }
  1964. .buyShopTRgiht{
  1965. display: flex;
  1966. align-items: center;
  1967. }
  1968. .buyShop{
  1969. background: #F9F9F9;
  1970. border-radius:6rpx;
  1971. overflow: hidden;
  1972. }
  1973. .buyShopTop{
  1974. display: flex;justify-content: space-between;
  1975. padding: 16rpx 22rpx;
  1976. background: #F9EFF0;
  1977. }
  1978. .shopbq{
  1979. color: #FF063A;font-size: 22rpx;
  1980. border-radius: 6rpx;
  1981. border: 1rpx solid #FF063A;
  1982. padding: 0rpx 6rpx;
  1983. height: 30rpx;line-height: 30rpx;
  1984. margin-top: 4rpx;
  1985. }
  1986. .buyShopTleft{
  1987. display: flex;
  1988. }
  1989. .buyshopName{
  1990. font-size: 26rpx;
  1991. color: #222222;
  1992. line-height: 37rpx;
  1993. /* padding-left: 8rpx; */
  1994. }
  1995. .buyShopCont{
  1996. display: flex;
  1997. padding: 22rpx;
  1998. }
  1999. .buyShopContImg{
  2000. width: 102rpx;
  2001. height: 102rpx;
  2002. border-radius: 6rpx;
  2003. }
  2004. .buyShopContAdress{
  2005. font-weight: 400;
  2006. font-size: 22rpx;
  2007. color: #666E80;
  2008. line-height: 34rpx;
  2009. width: 440rpx;
  2010. padding-left: 12rpx;
  2011. }
  2012. .buyShopJl{
  2013. font-size: 22rpx;
  2014. color: #666E80; line-height: 34rpx;
  2015. width: 110rpx;
  2016. text-align: right;
  2017. }
  2018. .buyNumlineActive{
  2019. border-radius: 25rpx;
  2020. border: 1rpx solid #FF0035;
  2021. color: #FF0035;
  2022. background: #ffffff;
  2023. height: 48rpx;
  2024. line-height: 48rpx;width: 147rpx;
  2025. }
  2026. .buyShopRightJt{
  2027. width: 12rpx;
  2028. height: 20rpx;
  2029. margin-top: 8rpx;
  2030. margin-left: 10rpx;
  2031. }
  2032. .buyShopRight{
  2033. display: flex;
  2034. }
  2035. .bugNUm{
  2036. border-top: 1px solid #EEEEEE;
  2037. border-Bottom: 1px solid #EEEEEE;
  2038. padding: 28rpx 0;
  2039. display: flex;
  2040. justify-content: space-between;
  2041. }
  2042. .buyXg{
  2043. min-width: 110rpx;
  2044. height: 36rpx;
  2045. border-radius: 4rpx;
  2046. border: 1px solid #F19D01;
  2047. text-align: center;
  2048. line-height: 36rpx;
  2049. color: #F19D01;
  2050. font-size: 24rpx;
  2051. }
  2052. .dhImg{
  2053. width: 35rpx;height: 35rpx;border-radius: 6rpx;
  2054. }
  2055. .newdistance{
  2056. position: absolute;top: 22rpx;right: 18rpx;
  2057. text-align: center;
  2058. font-size: 22rpx;
  2059. color: #666666;
  2060. }
  2061. .shopdhBox{
  2062. display: flex;padding-top: 20rpx;
  2063. justify-content: space-between;
  2064. }
  2065. .shopcall{
  2066. display: flex;
  2067. }
  2068. .shopcallIcon{
  2069. width: 26rpx;height: 26rpx;margin-top: 2rpx;
  2070. }
  2071. .shopcallTxt{
  2072. font-size: 24rpx;
  2073. color: #222222;
  2074. line-height: 33rpx;padding-left: 8rpx;
  2075. }
  2076. </style>