jkDetail.vue 46 KB

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