jkDetail.vue 47 KB

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