index.vue 59 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174
  1. <template>
  2. <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  3. <view>
  4. <view class="product_image_box" v-if="!productInfo.photo_list.length">
  5. <image class="product_image" :src="sku_thumb"></image>
  6. </view>
  7. <view class="product_image_box" v-if="productInfo.photo_list.length">
  8. <swiper class="photo_list" :autoplay="true">
  9. <swiper-item v-for="(item,index) in productInfo.photo_list" :key="index">
  10. <image :src="item.thumb" class="photo_image"></image>
  11. </swiper-item>
  12. </swiper>
  13. </view>
  14. <view class="product_info">
  15. <view class="stock_price" v-if="isShowPrice">
  16. <view class="product_price">
  17. <text>¥{{productInfo.price}} </text>
  18. <text class="product_market">¥{{productInfo.market_price}} </text>
  19. </view>
  20. </view>
  21. <view class="product_name">
  22. <text v-if="productInfo.regiment_title" class="regiment_title">{{productInfo.regiment_title}}</text>
  23. <text v-if="productInfo.promo_title" class="regiment_title">{{productInfo.promo_title}}</text>
  24. {{productInfo.name}}
  25. </view>
  26. <view class="product_spec">
  27. <view class="spec_name">{{productInfo.spec}}</view>
  28. <view class="product_stock">剩{{productInfo.stock}}个</view>
  29. </view>
  30. </view>
  31. <view class="regiment_list" v-if="productInfo.regiment_list.length">
  32. <view class="regiment_list_title">
  33. <text class="title1">{{productInfo.regiment_list.length}}人正在拼单</text>
  34. <text class="title2" @click="openRegiment()">查看更多</text>
  35. </view>
  36. <view class="regiment">
  37. <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="2000"
  38. :circular="true" :vertical="true" :display-multiple-items="2" easing-function="linear">
  39. <swiper-item v-for="item in productInfo.regiment_list" :key="index">
  40. <view class="swiper-item">
  41. <view class="username">
  42. <image class="user_image" :src="item.userpic"></image>
  43. <text class="username_text">{{item.username}}</text>
  44. </view>
  45. <view class="regiment_right">
  46. <button class="regiment_but" data-eventsync="true"
  47. @click="showSpecPopup(4,item.id)">去拼单</button>
  48. </view>
  49. <view class="regiment_center">
  50. <view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
  51. <view class="regiment_center_time">
  52. <view class="center_title">还剩</view>
  53. <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
  54. :minute="remainder(item.end_time,2)"
  55. :second="remainder(item.end_time,3)"></uni-countdown>
  56. </view>
  57. </view>
  58. </view>
  59. </swiper-item>
  60. </swiper>
  61. </view>
  62. </view>
  63. <view class="product_business" v-if="productInfo.business_info.name">
  64. <image class="logopic" :src="productInfo.business_info.logopic"></image>
  65. <view class="business_info">
  66. <view class="business_name">
  67. {{productInfo.business_info.name}}
  68. </view>
  69. <view class="business_desc">
  70. {{productInfo.business_info.desc}}
  71. </view>
  72. </view>
  73. </view>
  74. <view class="product_description">
  75. <rich-text :nodes="productInfo.description"></rich-text>
  76. </view>
  77. <view class="product_poster" v-if="productInfo.poster">
  78. <image class="product_image" :src="productInfo.poster" mode="widthFix"></image>
  79. </view>
  80. <view class="order_car" v-if="productInfo.regiment_type === 2">
  81. <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
  82. <image src="../../static/icon/car.png" class="car_icon"></image>
  83. </navigator>
  84. <button class="show_order" data-eventsync="true"
  85. @click="showSpecPopup(3)">{{this.productInfo.regiment_title}}专享/{{this.productInfo.regiment_price}}</button>
  86. <button class="show_car" data-eventsync="true"
  87. @click="showSpecPopup(1)">单独预约/{{this.productInfo.price}}</button>
  88. </view>
  89. <view class="order_car" v-else-if="productInfo.regiment_type === 1">
  90. <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
  91. <image src="../../static/icon/car.png" class="car_icon"></image>
  92. </navigator>
  93. <view class="show_order_regiment" @click="showSpecPopup(4)">
  94. <view>立即参与多人团拼单</view>
  95. <view class="regiment_countdown">
  96. <uni-countdown color="#FFFFFF" :show-day="false"
  97. :hour="remainder(productInfo.automatic_info.end_time,1)"
  98. :minute="remainder(productInfo.automatic_info.end_time,2)"
  99. :second="remainder(productInfo.automatic_info.end_time,3)"></uni-countdown>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="order_car" v-else>
  104. <navigator url="/pages/car/index" open-type="switchTab" class="to_car">
  105. <image src="../../static/icon/car.png" class="car_icon"></image>
  106. </navigator>
  107. <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)">立即预约</button>
  108. <button class="show_car" data-eventsync="true" @click="showSpecPopup(2)">加入购物车</button>
  109. </view>
  110. <view class="to_bottom"> --- 到底了 --- </view>
  111. <uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF"
  112. @change="popupChange">
  113. <view class="order_info">
  114. <view class="custom_addr" v-if="specBtnType==1 || specBtnType==3 || specBtnType==4"
  115. @click="showAddrPopup()">
  116. <view class="contact_user">
  117. <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
  118. <text class="contact_name">{{checkedAddr.contact_name}}</text>
  119. <text class="contact_phone">{{checkedAddr.contact_phone}}</text>
  120. <text class="contact_more"> &gt;</text>
  121. <text class="contact_shop">{{checkedAddr.contact_shop}}</text>
  122. </view>
  123. <view class="contact_addr">
  124. {{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}}
  125. {{checkedAddr.contact_addr}}
  126. </view>
  127. </view>
  128. <view class="car_item">
  129. <view class="box_left">
  130. <image class="car_image" :src="sku_thumb" mode=""></image>
  131. </view>
  132. <view class="box_right">
  133. <view class="car_name">{{productInfo.name}}</view>
  134. <view v-if="productInfo.promo_title" class="promo_title">{{productInfo.promo_title}}</view>
  135. <view class="stock_price">
  136. <view class="product_price" v-if="isShowPrice">
  137. <text v-if="specBtnType==1">¥{{productInfo.price}} </text>
  138. <text v-if="specBtnType==3 || specBtnType==4">¥{{productInfo.regiment_price}} </text>
  139. <text class="car_market">¥{{productInfo.market_price}}</text>
  140. </view>
  141. <view class="product_quantity_box">
  142. <button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
  143. <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
  144. </button>
  145. <input type="number" class="product_quantity" placeholder="数量" v-model="quantity"
  146. @blur="changeQuantity(0)"></input>
  147. <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
  148. <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
  149. </button>
  150. </view>
  151. </view>
  152. <view class="product_stock">剩{{productInfo.stock}}个</view>
  153. </view>
  154. </view>
  155. <view class="select_sku" v-if="productInfo.product_attr.length">
  156. <scroll-view scroll-y="true" class="scroll_max">
  157. <view class="product_attr" v-for="(spec,spec_index) in productInfo.product_attr"
  158. :key="spec_index">
  159. <scroll-view scroll-y="true" class="scroll_y">
  160. <view class="spec_name">{{ spec.spec_name }}</view>
  161. <view class="arrt_list">
  162. <view class="arrt_option" :class="option.active?'active':''"
  163. v-for="(option,attr_index) in spec.attr_list" :key="attr_index"
  164. @click="attrChange(spec_index,attr_index)">
  165. <text> {{option.name}}</text> <text
  166. v-if="option.remark">【{{option.remark}}】</text>
  167. </view>
  168. </view>
  169. </scroll-view>
  170. </view>
  171. </scroll-view>
  172. </view>
  173. <!-- 选择优惠券 -->
  174. <view class="to_select_coupon" v-if="specBtnType==1" @click="openCoupon()">
  175. <text>优惠券</text>
  176. <view class="coupon_deduction">{{couponUsed}}</view>
  177. </view>
  178. <view class="order_price" v-if="specBtnType==1 || specBtnType==3">合计: ¥{{priceTotal}}</view>
  179. <view class="order_btn">
  180. <button class="to_order" @click="createOrder()" v-if="specBtnType==1"
  181. data-eventsync="true">预约</button>
  182. <button class="to_car" @click="createCart()" v-if="specBtnType==2"
  183. data-eventsync="true">加入购物车</button>
  184. <button class="to_order" @click="createOrder()" v-if="specBtnType==3"
  185. data-eventsync="true">拼团预约</button>
  186. <button class="to_order" @click="createOrder()" v-if="specBtnType==4"
  187. data-eventsync="true">{{ productInfo.regiment_title }}预约</button>
  188. </view>
  189. </view>
  190. </uni-popup>
  191. <uni-popup ref="couponPopup" type="bottom" class="popup" background-color="#FFFFFF">
  192. <view class="popup_title">优惠券</view>
  193. <view class="coupon_list">
  194. <view class="coupon_item" v-for="(item,index) in couponList" @click="checkedCoupon(index,false)"
  195. :key="index">
  196. <view class="box_left">
  197. <view class="rebate" v-if="item.rebate_type == 1"> ¥{{item.rebate}}</view>
  198. <view class="rebate" v-if="item.rebate_type == 2"> 打 {{item.rebate}} 折</view>
  199. <view class="rebate" v-if="item.rebate_type == 3"> 赠 <text v-if="item.rebate_scope.length">
  200. {{item.rebate_scope[0].product_name}}
  201. </text> </view>
  202. <view class="std_pay"> 满{{item.std_pay}}</view>
  203. </view>
  204. <view class="box_right">
  205. <view class="coupon_title">
  206. <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
  207. <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
  208. <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>
  209. </view>
  210. <view class="product_scope">
  211. <text class="" v-if="item.type_id == 1">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
  212. <text class="" v-if="item.type_id == 2">全场可用</text>
  213. <text class="" v-if="item.type_id == 3">{{item.is_scope?"当前商品可用":"当前商品不可用"}}</text>
  214. <view class="check_label">
  215. <view class="isstd" v-if="!item.is_std">未达标</view>
  216. <image class="checkbox" v-if="item.is_std"
  217. :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'">
  218. </image>
  219. </view>
  220. </view>
  221. <view class="coupon_info">
  222. <view class="coupon_exp">{{item.exp_time}} 到期</view>
  223. </view>
  224. </view>
  225. </view>
  226. </view>
  227. </uni-popup>
  228. <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF">
  229. <view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理
  230. </navigator>
  231. </view>
  232. <view class="addr_list">
  233. <view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
  234. <view class="radio_label">
  235. <image class="radio_icon"
  236. :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'">
  237. </image>
  238. </view>
  239. <view class="contact_user">
  240. <text class="contact_name">{{item.contact_name}}</text>
  241. <text class="contact_phone">{{item.contact_phone}}</text>
  242. <text class="contact_default" v-if="item.is_default">默认</text>
  243. <text class="contact_shop">{{item.contact_shop}}</text>
  244. </view>
  245. <view class="contact_addr">
  246. {{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
  247. </view>
  248. </view>
  249. </view>
  250. <view class="create_box">
  251. <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr">新建收货地址</navigator>
  252. </view>
  253. </uni-popup>
  254. <uni-popup ref="addFollow" type="center" class="center_popup" @change="popupChange">
  255. <view class="add_follow">
  256. <view class="close_area"><button class="close_btn" @click="closeAddFollow()">关闭</button></view>
  257. <view class="info_alter">
  258. <text v-if="follow_linkurl">点击二维码添加客服</text>
  259. <text v-if="!follow_linkurl">长按二维码添加客服</text>
  260. </view>
  261. <view class="qr_code_area" @click="followLinkurl">
  262. <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress>
  263. </image>
  264. </view>
  265. <view class="rule_info">
  266. <view class="">报单规则:</view>
  267. <view class="">1、预约报单需要添加客服人员</view>
  268. <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
  269. <view class="">3、开始预约报单</view>
  270. </view>
  271. </view>
  272. </uni-popup>
  273. <uni-popup ref="regiment" type="bottom" class="popup" background-color="#FFFFFF">
  274. <view class="popup_title">可参与的拼单</view>
  275. <view class="regiment_popup_list">
  276. <view class="regiment_popup_item" v-for="(item,index) in productInfo.regiment_list"
  277. @click="checkedCoupon(index,false)" :key="index">
  278. <view class="username">
  279. <image class="user_image" :src="item.userpic"></image>
  280. <text class="username_text">{{item.username}}</text>
  281. </view>
  282. <view class="regiment_right">
  283. <button class="regiment_but" data-eventsync="true"
  284. @click="showSpecPopup(4,item.id)">去拼单</button>
  285. </view>
  286. <view class="regiment_center">
  287. <view class="regiment_center_text">还差{{item.surplus_number}}人成团</view>
  288. <view class="regiment_center_time">
  289. <view class="center_title">还剩</view>
  290. <uni-countdown color="#E03519" :show-day="false" :hour="remainder(item.end_time,1)"
  291. :minute="remainder(item.end_time,2)"
  292. :second="remainder(item.end_time,3)"></uni-countdown>
  293. </view>
  294. </view>
  295. </view>
  296. </view>
  297. </uni-popup>
  298. </view>
  299. </template>
  300. <script>
  301. export default {
  302. data() {
  303. return {
  304. show: false, // 使用Popup组件时,阻止禁止滚动穿透
  305. productInfo: {
  306. id: 0,
  307. name: "",
  308. price: "0.00",
  309. market_price: "0.00",
  310. spec: "",
  311. stock: 0,
  312. thumb: "",
  313. poster: "",
  314. description: "",
  315. regiment_title: '',
  316. promo_title: '',
  317. automatic_info: {
  318. end_time: '',
  319. },
  320. regiment_active: [],
  321. business_info: {
  322. name: "",
  323. logopic: "",
  324. desc: "",
  325. },
  326. regiment_price: "0.00",
  327. regiment_quota: 0,
  328. regiment_list: [],
  329. product_attr: [],
  330. photo_list: [],
  331. product_sku: [],
  332. regiment_type: 0,
  333. regiment_number: 0,
  334. },
  335. requestParam: {
  336. id: 0,
  337. },
  338. // 数量
  339. quantity: 1,
  340. // 总价
  341. priceTotal: "0.00",
  342. // 优惠券列表
  343. couponList: [],
  344. // 总价
  345. priceTotal: '0.00',
  346. // 优惠券使用
  347. couponUsed: "去使用 >",
  348. // 扣减金额
  349. rebatePrice: 0.00,
  350. // 已经选择的优惠券ID
  351. customCoupon: 0,
  352. // 规格选择按钮类型
  353. specBtnType: 1, // 1预约。2购物车。3拼团
  354. // 地址列表
  355. addrList: [],
  356. // 已选地址
  357. checkedAddr: {
  358. id: 0,
  359. contact_name: "",
  360. contact_shop: "",
  361. contact_phone: "",
  362. contact_province: "",
  363. contact_city: "",
  364. contact_area: "",
  365. contact_addr: "",
  366. is_default: 0,
  367. },
  368. // 客服二维码
  369. followQrcode: "",
  370. // 二维码链接
  371. follow_linkurl: "",
  372. // 是否登录状态
  373. isShowPrice: false,
  374. // 选择的skuid
  375. sku_id: 0,
  376. sku_thumb: "",
  377. regiment_id: 0,
  378. specBtnType:0,
  379. }
  380. },
  381. onLoad(param) {
  382. // 接受路由参数,产品ID
  383. this.requestParam.id = param.product_id;
  384. // 如果有scene参数的话,获取其中的ID
  385. if( param.scene ) {
  386. // 转键值对参数
  387. let scene = this.$http.strToParam(param.scene);
  388. // 如果没有传入ID,但是传入了场景ID,获取场景ID
  389. if( !param.product_id && scene.id ) this.requestParam.id = scene.id;
  390. }
  391. var that = this;
  392. // 监听地址变动
  393. uni.$on('addr_list_change', function(data) {
  394. // 地址列表
  395. that.addrList = data.list;
  396. });
  397. // #ifdef MP-WEIXIN
  398. //分享按钮
  399. uni.showShareMenu({
  400. withShareTicket: true,
  401. menus: ['shareAppMessage', 'shareTimeline']
  402. })
  403. // #endif
  404. },
  405. onShareAppMessage(obj) {
  406. return {
  407. title: this.productInfo.name,
  408. path: '/pages/product/index?product_id=' + this.productInfo.id
  409. }
  410. },
  411. onShow() {
  412. // 没有添加客服就不显示
  413. this.isShowPrice = this.$checkAccess.checkShowPrice();
  414. // 如果有添加二维码的话,获取客户信息
  415. if (this.$checkAccess.getFollowQrcode()) {
  416. // 判断数据
  417. this.$http.request('api/custom/get_info').then((callback) => {
  418. if (callback.code == 'success') {
  419. if (!callback.data.userpic) callback.data.userpic = "../../static/icon/doctor.png";
  420. // 存储登录标识
  421. uni.setStorageSync('userInfo', callback.data);
  422. }
  423. });
  424. }
  425. // 如果存在产品ID的话
  426. if (this.requestParam.id > 0) {
  427. // 请求详情
  428. this.$http.request('api/product/get_detail', this.requestParam).then((re) => {
  429. // 成功渲染数据
  430. if (re.code == 'success') {
  431. // 刷新数据
  432. this.productInfo = re.data;
  433. if (this.productInfo.automatic_info.id) {
  434. this.regiment_id = this.productInfo.automatic_info.id
  435. }
  436. //设置默认sku
  437. this.sku_id = 0;
  438. // 显示图片
  439. this.sku_thumb = this.productInfo.thumb;
  440. } else {
  441. if (re.code != 'no_login') {
  442. uni.showModal({
  443. content: re.msg,
  444. showCancel: false,
  445. })
  446. }
  447. }
  448. });
  449. }
  450. },
  451. methods: {
  452. //计算剩余时间
  453. remainder(end_time, type) {
  454. const now = Math.floor(Date.now() / 1000);
  455. const distance = end_time - now;
  456. if (distance < 0) {
  457. return 0
  458. }
  459. const hours = Math.floor(distance / (60 * 60));
  460. const minutes = Math.floor((distance % (60 * 60)) / (60));
  461. const seconds = Math.floor((distance % (60)));
  462. if (type === 1) {
  463. return hours
  464. }
  465. if (type === 2) {
  466. return minutes
  467. }
  468. if (type === 3) {
  469. return seconds
  470. }
  471. },
  472. // 地址弹出层
  473. showAddrPopup() {
  474. // 显示下单弹出层
  475. this.$refs.addrPopup.open('bottom');
  476. },
  477. // 规格弹出层
  478. showSpecPopup(type, regiment_id = 0) {
  479. // 登录提示
  480. if (!this.$checkAccess.alterLogin()) return;
  481. // 判断是否弹出
  482. if (this.$checkAccess.getFollowQrcode()) return this.openAddFollow();
  483. if (regiment_id) {
  484. this.regiment_id = regiment_id
  485. }
  486. // 显示类型,1预约,2购物车,3拼团
  487. this.specBtnType = type;
  488. // 恢复优惠券使用按钮
  489. this.couponUsed = "去使用 >";
  490. // 恢复扣减金额
  491. this.rebatePrice = 0.00;
  492. // 选择优惠券重置
  493. this.customCoupon = 0;
  494. // 计算价格
  495. this.priceHandler();
  496. // 显示下单弹出层
  497. this.$refs.specPopup.open('bottom');
  498. // 结果
  499. this.$http.request('api/custom_coupon/get_checked', this.requestParam).then((re) => {
  500. if (re.code == 'success') {
  501. // 赋值
  502. this.couponList = re.data;
  503. // 优惠券是否可用
  504. this.checkCoupon();
  505. }
  506. });
  507. // 地址列表
  508. this.getAddrList();
  509. //只有一组sku时是否下架
  510. if (this.productInfo.product_sku.length === 1) {
  511. this.defaultSkuStatus();
  512. }
  513. },
  514. // 拼团列表弹出层
  515. openRegiment() {
  516. this.$refs.regiment.open('bottom')
  517. },
  518. // 优惠券弹出层
  519. openCoupon() {
  520. this.$refs.couponPopup.open('bottom')
  521. },
  522. // 数量调整
  523. changeQuantity(number) {
  524. // 如果不是0.表示两侧按钮点击,0表示输入的修改
  525. if (number != 0) {
  526. // 计算个数
  527. this.quantity = parseInt(this.quantity) + parseInt(number);
  528. }
  529. // 如果大于库存设置为库存
  530. if (this.quantity > this.productInfo.stock) {
  531. this.quantity = this.productInfo.stock;
  532. uni.showToast({
  533. title: "库存不足",
  534. icon: "none"
  535. })
  536. }
  537. if ((this.specBtnType === 3 || this.specBtnType == 4) && this.quantity > this.productInfo.regiment_quota) {
  538. this.quantity = this.productInfo.regiment_quota;
  539. uni.showToast({
  540. title: "拼团限购" + this.productInfo.regiment_quota + "份",
  541. icon: "none"
  542. })
  543. }
  544. // 如果小于1.设置为1
  545. if (this.quantity < 1) {
  546. this.quantity = 1;
  547. uni.showToast({
  548. title: "数量不可以小于0",
  549. icon: "none"
  550. })
  551. }
  552. // 计算价格
  553. this.priceHandler();
  554. // 优惠券是否可用
  555. this.checkCoupon();
  556. },
  557. // 创建订单
  558. createOrder() {
  559. // 不可预约
  560. if (!this.$checkAccess.alertCity()) return;
  561. // 如果有SKU,但是没有选择
  562. if (this.productInfo.product_sku.length && !this.sku_id) {
  563. // 选择提示
  564. let skuname = [];
  565. // 循环产品属性
  566. for ( let i in this.productInfo.product_attr) {
  567. // 属性名称
  568. skuname.push(this.productInfo.product_attr[i].spec_name);
  569. }
  570. uni.showToast({
  571. title: "请选择"+skuname.join(' 与 '),
  572. icon: "none"
  573. })
  574. return;
  575. }
  576. // 下单数量小于0
  577. if (this.quantity < 1) {
  578. uni.showToast({
  579. title: "至少购买1个",
  580. icon: "none"
  581. })
  582. return;
  583. }
  584. // 如果大于库存设置为库存
  585. if (this.productInfo.stock < 1) {
  586. uni.showToast({
  587. title: "库存不足",
  588. icon: "none"
  589. })
  590. return;
  591. }
  592. // 如果大于库存设置为库存
  593. if (this.productInfo.stock < this.quantity) {
  594. this.quantity = this.productInfo.stock;
  595. uni.showToast({
  596. title: "库存不足",
  597. icon: "none"
  598. })
  599. return;
  600. }
  601. if (this.specBtnType === 3 || this.specBtnType === 4) {
  602. if (this.quantity > this.productInfo.regiment_quota) {
  603. this.quantity = this.productInfo.regiment_quota;
  604. uni.showToast({
  605. title: "拼团限购" + this.productInfo.regiment_quota + "份",
  606. icon: "none"
  607. })
  608. return;
  609. }
  610. const timestamp = Math.round(new Date().getTime() / 1000).toString();
  611. if (timestamp > this.productInfo.regiment_active.end_time) {
  612. uni.showToast({
  613. title: "拼团活动已结束",
  614. icon: "none"
  615. })
  616. return;
  617. }
  618. if (this.specBtnType === 4 && timestamp > this.productInfo.automatic_info.end_time) {
  619. uni.showToast({
  620. title: "该团已过期",
  621. icon: "none"
  622. })
  623. return;
  624. }
  625. }
  626. // 地址未填
  627. if (!this.checkedAddr.id) {
  628. this.showAddrPopup();
  629. return;
  630. }
  631. //需要下单的产品信息参数传给completion页面
  632. let productInfo = [{
  633. name: this.productInfo.name,
  634. spec: this.productInfo.spec,
  635. price: this.productInfo.price
  636. }]
  637. //转成json字符串
  638. productInfo = JSON.stringify(productInfo);
  639. //加密json格式成编码数组
  640. let encodedArray = encodeURIComponent(productInfo);
  641. // 需要下单的产品列表
  642. let productList = [{
  643. product_id: this.productInfo.id,
  644. buy_num: this.quantity,
  645. product_skuid: this.sku_id
  646. }];
  647. // 转成json字符串传输
  648. productList = JSON.stringify(productList);
  649. if (this.specBtnType === 3 || this.specBtnType === 4) { //拼团
  650. // 请求接口
  651. this.$http.request('api/orders/create_regiment', {
  652. "product_list": productList,
  653. "custom_coupon_id": this.customCoupon,
  654. 'addr_id': this.checkedAddr.id,
  655. 'btn_type': this.specBtnType,
  656. 'regiment_id': this.regiment_id,
  657. 'regiment_active_id': this.productInfo.regiment_active_id
  658. }, 'post').then((re) => {
  659. // 判断结果
  660. if (re.code == 'success') {
  661. // 处理结果
  662. this.productInfo.stock = this.productInfo.stock - this.quantity;
  663. // 关闭弹窗
  664. this.$refs.specPopup.close();
  665. // 跳转到报单完成页面
  666. uni.navigateTo({
  667. url: `/pages/orders/completion?params=${encodedArray}`
  668. });
  669. } else {
  670. uni.showModal({
  671. title: re.msg,
  672. showCancel: false
  673. });
  674. }
  675. });
  676. } else {
  677. // 请求接口
  678. this.$http.request('api/orders/create', {
  679. "product_list": productList,
  680. "custom_coupon_id": this.customCoupon,
  681. 'addr_id': this.checkedAddr.id
  682. }, 'post').then((re) => {
  683. // 判断结果
  684. if (re.code == 'success') {
  685. // 处理结果
  686. this.productInfo.stock = this.productInfo.stock - this.quantity;
  687. // 关闭弹窗
  688. this.$refs.specPopup.close();
  689. // 跳转到报单完成页面
  690. uni.navigateTo({
  691. url: `/pages/orders/completion?params=${encodedArray}`
  692. });
  693. } else {
  694. uni.showModal({
  695. title: re.msg,
  696. showCancel: false
  697. });
  698. }
  699. });
  700. }
  701. },
  702. // 加入购物车
  703. createCart() {
  704. // 不可预约
  705. if (!this.$checkAccess.alertCity()) return;
  706. // 如果有SKU,但是没有选择
  707. if (this.productInfo.product_sku.length && !this.sku_id) {
  708. // 选择提示
  709. let skuname = [];
  710. // 循环产品属性
  711. for (let i in this.productInfo.product_attr) {
  712. // 属性名称
  713. skuname.push(this.productInfo.product_attr[i].spec_name);
  714. }
  715. uni.showToast({
  716. title: "请选择"+skuname.join(' 与 '),
  717. icon: "none"
  718. })
  719. return;
  720. }
  721. // 下单数量小于0
  722. if (this.quantity < 1) {
  723. uni.showToast({
  724. title: "至少购买1个"
  725. })
  726. return;
  727. }
  728. // 如果库存不足
  729. if (this.productInfo.stock < 1) {
  730. uni.showToast({
  731. title: "库存不足",
  732. icon: "none"
  733. })
  734. return;
  735. }
  736. // 如果大于库存设置为库存
  737. if (this.productInfo.stock < this.quantity) {
  738. this.quantity = this.productInfo.stock;
  739. uni.showToast({
  740. title: "库存不足",
  741. icon: "none"
  742. })
  743. return;
  744. }
  745. // 商品信息
  746. let data = {
  747. product_id: this.productInfo.id,
  748. buy_num: this.quantity,
  749. skuid: this.sku_id
  750. };
  751. // 请求接口
  752. this.$http.request('api/shop_cart/add', data, 'post').then((re) => {
  753. // 判断结果
  754. if (re.code == 'success') {
  755. // 跳转到订单列表
  756. uni.showToast({
  757. icon: "success",
  758. title: "加入购物车成功"
  759. })
  760. // 关闭结果
  761. this.$refs.specPopup.close();
  762. } else {
  763. // 跳转到订单列表
  764. uni.showToast({
  765. icon: "error",
  766. title: "加入购物车失败"
  767. })
  768. }
  769. });
  770. },
  771. // 检查优惠券是否可用
  772. checkCoupon() {
  773. // 如果存在的话
  774. if (this.couponList.length) {
  775. // 推荐使用的优惠券
  776. let oldrebatePrice = 0.00;
  777. let hasIsStd = false;
  778. // 循环优惠券
  779. for (let i in this.couponList) {
  780. /* 商品的总价格,决定是否可用 */
  781. let totalPrice = 0.00;
  782. // 如果是商品券
  783. if (this.couponList[i].type_id == 1) {
  784. // 判断商品是不是在商品范围
  785. let isScope = false;
  786. // 循环商品范围
  787. for (let k in this.couponList[i].product_scope) {
  788. // 如果存在商品范围
  789. if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
  790. }
  791. // 范围内的做计算
  792. if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
  793. .price, this.quantity));
  794. // 是否在可用范围
  795. this.couponList[i].is_scope = isScope;
  796. // 排除券
  797. } else if (this.couponList[i].type_id == 3) {
  798. // 判断商品是不是在商品范围
  799. let isScope = true;
  800. // 循环排除范围
  801. for (let k in this.couponList[i].product_exclude) {
  802. // 如果在排除范围
  803. if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope =
  804. false;
  805. }
  806. // 范围内的做计算
  807. if (isScope) totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo
  808. .price, this.quantity));
  809. // 是否在可用范围
  810. this.couponList[i].is_scope = isScope;
  811. // 店铺券
  812. } else {
  813. // 店铺券
  814. totalPrice = this.$decimal.add(totalPrice, this.$decimal.mul(this.productInfo.price, this
  815. .quantity));
  816. // 是否在可用范围
  817. this.couponList[i].is_scope = true;
  818. }
  819. // 判断价格到不到限额
  820. this.couponList[i].is_std = parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this
  821. .couponList[i].std_pay, 1).toFixed());
  822. // 如果不可用的话,该项已选择则不选
  823. if (!this.couponList[i].is_std && this.couponList[i].checked) this.checkedCoupon(i, false);
  824. // 如果可用的话,并且优惠券没有选中
  825. if (this.couponList[i].is_std) {
  826. // 优惠金额
  827. let newRebatePrice = 0.00;
  828. // 计算满减价格
  829. if (this.couponList[i].rebate_type == 1) {
  830. // 计算扣减数据
  831. newRebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
  832. }
  833. // 计算折扣价格
  834. if (this.couponList[i].rebate_type == 2) {
  835. // 折扣
  836. newRebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
  837. // 减数
  838. newRebatePrice = this.$decimal.sub(totalPrice, newRebatePrice.mul(0.1));
  839. }
  840. // 判断哪个比较优惠
  841. if (parseFloat(oldrebatePrice.toFixed(2)) <= parseFloat(newRebatePrice.toFixed(2))) {
  842. // 覆盖价格
  843. oldrebatePrice = parseFloat(newRebatePrice.toFixed(2));
  844. // 如果选中的是自己,不需要取消
  845. if (this.customCoupon == this.couponList[i].id && this.couponList[i].checked) {
  846. // 选中
  847. this.checkedCoupon(i, true);
  848. } else {
  849. // 选中
  850. this.checkedCoupon(i, false);
  851. }
  852. }
  853. }
  854. }
  855. }
  856. },
  857. // 选择优惠券
  858. checkedCoupon(index, save_checked = false) {
  859. // 单个设置选中/未选(如果保持选中,则不变)
  860. this.couponList[index].checked = save_checked ? this.couponList[index].checked : (this.couponList[index]
  861. .checked ? 0 : 1);
  862. // 循环处理
  863. for (let i in this.couponList) {
  864. // 有未选的就不做全选
  865. if (index != i) this.couponList[i].checked = 0;
  866. }
  867. // 如果未选中,提示可用
  868. if (!this.couponList[index].checked) this.couponUsed = '去使用 >';
  869. // 已经选择的优惠券ID
  870. this.customCoupon = this.couponList[index].checked ? this.couponList[index].id : 0;
  871. // 计算扣减
  872. this.couponRebate();
  873. // 计算价格
  874. this.priceHandler();
  875. // 关闭弹窗
  876. this.$refs.couponPopup.close();
  877. },
  878. // 计算价格
  879. priceHandler() {
  880. // 总价格
  881. let priceTotal = 0
  882. if (this.specBtnType == 3) {
  883. priceTotal = this.$decimal.mul(this.productInfo.regiment_price, this.quantity);
  884. } else {
  885. priceTotal = this.$decimal.mul(this.productInfo.price, this.quantity);
  886. }
  887. // 扣减数据
  888. priceTotal = priceTotal.sub(this.rebatePrice);
  889. // 小数点保留
  890. this.priceTotal = priceTotal.toFixed(2);
  891. },
  892. // 计算优惠券扣减
  893. couponRebate() {
  894. // 默认扣减0
  895. this.rebatePrice = 0;
  896. // 循环优惠券
  897. for (let i in this.couponList) {
  898. // 判断是否选中
  899. if (this.couponList[i].id != this.customCoupon) {
  900. // 未选择的不管
  901. continue;
  902. }
  903. /* 商品的总价格,决定是否可用 */
  904. var totalPrice = 0.00;
  905. // 如果是商品券
  906. if (this.couponList[i].type_id == 1) {
  907. // 判断商品是不是在商品范围
  908. var isScope = false;
  909. // 循环商品范围
  910. for (let k in this.couponList[i].product_scope) {
  911. // 如果存在商品范围
  912. if (this.couponList[i].product_scope[k].product_id == this.productInfo.id) isScope = true;
  913. }
  914. // 范围内的做计算
  915. if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
  916. // 排除券
  917. } else if (this.couponList[i].type_id == 3) {
  918. // 判断商品是不是在商品范围
  919. var isScope = true;
  920. // 循环排除范围
  921. for (let k in this.couponList[i].product_exclude) {
  922. // 如果存在排除范围
  923. if (this.couponList[i].product_exclude[k].product_id == this.productInfo.id) isScope = false;
  924. }
  925. // 范围内的做计算
  926. if (isScope) totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
  927. // 店铺券
  928. } else {
  929. // 折扣券以及满减券的话,计算价格
  930. totalPrice = this.$decimal.mul(this.productInfo.price, this.quantity);
  931. }
  932. // 如果是可以用的话
  933. if (parseFloat(totalPrice.toFixed()) >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay, 1)
  934. .toFixed())) {
  935. // 扣减金额
  936. let rebatePrice = this.$decimal.mul(1, 0);
  937. // 满减
  938. if (this.couponList[i].rebate_type == 1) {
  939. // 计算扣减数据
  940. rebatePrice = this.$decimal.mul(this.couponList[i].rebate, 1);
  941. // 替换文字
  942. this.couponUsed = "¥-" + rebatePrice.toFixed(2);
  943. }
  944. // 折扣
  945. if (this.couponList[i].rebate_type == 2) {
  946. // 折扣
  947. rebatePrice = this.$decimal.mul(totalPrice, this.couponList[i].rebate);
  948. // 减数
  949. rebatePrice = this.$decimal.sub(totalPrice, rebatePrice.mul(0.1));
  950. // 替换文字
  951. this.couponUsed = "¥-" + rebatePrice.toFixed(2);
  952. }
  953. // 赠品
  954. if (this.couponList[i].rebate_type == 3) {
  955. // 替换文字
  956. this.couponUsed = "送" + (this.couponList[i].rebate_scope.length ? this.couponList[i]
  957. .rebate_scope[0].product_name : "");
  958. }
  959. // 小数点保留
  960. this.rebatePrice = rebatePrice.toFixed(2);
  961. }
  962. }
  963. },
  964. popupChange(e) {
  965. // 禁止滚动穿透
  966. this.show = e.show
  967. },
  968. // 选择地址
  969. checkedAddrItem(item) {
  970. this.checkedAddr = item;
  971. this.$refs.addrPopup.close();
  972. },
  973. getAddrList() {
  974. // 判断数据
  975. this.$http.request('api/custom_addr/get_list').then((callback) => {
  976. // 获取成功
  977. if (callback.code == 'success') {
  978. this.addrList = callback.data;
  979. // 如果有的话
  980. if (this.addrList.length) {
  981. // 获取默认的
  982. for (let i in this.addrList) {
  983. // 如果是默认的
  984. if (this.addrList[i].is_default) this.checkedAddr = this.addrList[i];
  985. }
  986. // 如果没有默认的话
  987. if (!this.checkedAddr.id) {
  988. this.checkedAddr = this.addrList[this.addrList.length - 1];
  989. }
  990. }
  991. }
  992. });
  993. },
  994. // 客服显示
  995. openAddFollow() {
  996. // 返回结果
  997. this.followQrcode = this.$checkAccess.getFollowQrcode();
  998. // 返回结果
  999. this.follow_linkurl = this.$checkAccess.getFollowLinkUrl();
  1000. // 有图才展示
  1001. if (this.followQrcode) this.$refs.addFollow.open('center');
  1002. },
  1003. closeAddFollow() {
  1004. this.$refs.addFollow.close();
  1005. },
  1006. // 属性变更
  1007. attrChange(spec_index, attr_index) {
  1008. // 判断当前属性是否选择。选择的跳过
  1009. if (this.productInfo.product_attr[spec_index].attr_list[attr_index].active) return;
  1010. // 先记录当前规格下所有属性原来的active状态
  1011. let originalActiveStates = {};
  1012. for (let i in this.productInfo.product_attr[spec_index].attr_list) {
  1013. originalActiveStates[i] = this.productInfo.product_attr[spec_index].attr_list[i].active;
  1014. }
  1015. //循环规格下的属性
  1016. for (let i in this.productInfo.product_attr[spec_index].attr_list) {
  1017. // 全部改为未选中
  1018. this.productInfo.product_attr[spec_index].attr_list[i].active = 0;
  1019. }
  1020. //选择选项
  1021. this.productInfo.product_attr[spec_index].attr_list[attr_index].active = 1;
  1022. //选中的规格
  1023. var attr_ids = [];
  1024. // 循环规格
  1025. for (let i in this.productInfo.product_attr) {
  1026. // 再循环属性
  1027. for (let j in this.productInfo.product_attr[i].attr_list) {
  1028. // 如果选中的
  1029. if (this.productInfo.product_attr[i].attr_list[j].active) {
  1030. attr_ids.push(this.productInfo.product_attr[i].attr_list[j].id);
  1031. }
  1032. }
  1033. }
  1034. // 转成字符串
  1035. var attrids = attr_ids.join(",");
  1036. // 如果选项不足的话
  1037. if (attr_ids.length != this.productInfo.product_attr.length) return;
  1038. // 如果当前点击的属性对应的SKU状态为未下架(初始化为0)
  1039. let currentSKUStatus = 0;
  1040. // 匹配规格
  1041. if (this.productInfo.product_sku.length) {
  1042. // 是否有对应的SKU
  1043. let haveSku = 0;
  1044. // 循环sku
  1045. for (let i in this.productInfo.product_sku) {
  1046. // 如果sku不匹配
  1047. if (this.productInfo.product_sku[i].attr_ids != attrids) continue;
  1048. // 设置有SKU
  1049. haveSku = 1;
  1050. // 获取当前匹配到的SKU的状态
  1051. currentSKUStatus = this.productInfo.product_sku[i].status;
  1052. // 如果商品已经下架(status等于1),则恢复当前规格下所有属性原来的active状态
  1053. if (currentSKUStatus === 1) {
  1054. uni.showToast({
  1055. title: "该规格已下架",
  1056. icon: "none"
  1057. });
  1058. for (let k in originalActiveStates) {
  1059. this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
  1060. }
  1061. continue;
  1062. }
  1063. // 如果商品没有库存
  1064. if (this.productInfo.product_sku[i].stock <= 0) {
  1065. uni.showToast({
  1066. title: "该规格库存不足",
  1067. icon: "none"
  1068. });
  1069. for (let k in originalActiveStates) {
  1070. this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
  1071. }
  1072. continue;
  1073. }
  1074. // 产品价格修改
  1075. this.productInfo.price = this.productInfo.product_sku[i].price;
  1076. // 产品规格修改
  1077. this.productInfo.spec = this.productInfo.product_sku[i].attr_names;
  1078. // 产品库存
  1079. this.productInfo.stock = this.productInfo.product_sku[i].stock;
  1080. // 产品SKU
  1081. this.sku_id = this.productInfo.product_sku[i].id;
  1082. // 有图替换,没图使用产品原缩略图
  1083. this.sku_thumb = this.productInfo.product_sku[i].sku_thumb ? this.productInfo.product_sku[i]
  1084. .sku_thumb : this.productInfo.thumb;
  1085. // 如果有图册
  1086. if (this.productInfo.photo_list.length) {
  1087. this.productInfo.photo_list[0].thumb = this.sku_thumb;
  1088. }
  1089. // 计算价格
  1090. this.priceHandler();
  1091. // 优惠券是否可用
  1092. this.checkCoupon();
  1093. }
  1094. // 如果没有对应的SKU
  1095. if (!haveSku) {
  1096. uni.showToast({
  1097. title: "该规格已下架",
  1098. icon: "none"
  1099. });
  1100. for (let k in originalActiveStates) {
  1101. this.productInfo.product_attr[spec_index].attr_list[k].active = originalActiveStates[k];
  1102. }
  1103. }
  1104. }
  1105. },
  1106. //只有一组sku默认规格是否已下架
  1107. defaultSkuStatus() {
  1108. if (this.productInfo.product_sku.length) {
  1109. if (this.productInfo.product_sku[0].status === 1) {
  1110. uni.showToast({
  1111. title: "该规格已下架",
  1112. icon: "none",
  1113. });
  1114. this.productInfo.stock = 0;
  1115. var attr_ids = this.productInfo.product_sku[0].attr_ids.split(",");
  1116. // 循环规格列表
  1117. for (let i in this.productInfo.product_attr) {
  1118. // 再循环属性
  1119. for (let j in this.productInfo.product_attr[i].attr_list) {
  1120. // 如果不等于id
  1121. if (attr_ids.includes(this.productInfo.product_attr[i].attr_list[j].id + '')) {
  1122. // 取消选中
  1123. this.productInfo.product_attr[i].attr_list[j].active = 0;
  1124. }
  1125. }
  1126. }
  1127. return;
  1128. }
  1129. }
  1130. },
  1131. // 去往webview
  1132. followLinkurl() {
  1133. // 获取登录标识
  1134. let userInfo = uni.getStorageSync('userInfo');
  1135. // 如果不存在的话
  1136. if (!userInfo) return '';
  1137. // 未添加好友
  1138. if (!userInfo.follow_linkurl) return '';
  1139. // 获取Url
  1140. let url = userInfo.follow_linkurl;
  1141. // 没有路径,不跳转
  1142. if (!url) return;
  1143. // 判断是不是小程序链接
  1144. if (url.includes('http')) {
  1145. // 转码
  1146. let link_url = encodeURIComponent(url);
  1147. // 跳转到webview
  1148. uni.redirectTo({
  1149. url: `/pages/webview/index?link_url=${link_url}`
  1150. })
  1151. } else {
  1152. // 跳转到webview
  1153. uni.navigateTo({
  1154. url: url
  1155. });
  1156. }
  1157. }
  1158. }
  1159. }
  1160. </script>
  1161. <style lang="less">
  1162. .product_image_box {
  1163. display: block;
  1164. overflow: hidden;
  1165. background: #FFFFFF;
  1166. margin: 10rpx auto;
  1167. .product_image {
  1168. display: block;
  1169. margin: 0 auto;
  1170. width: 750rpx;
  1171. height: 750rpx;
  1172. }
  1173. .photo_list {
  1174. display: block;
  1175. width: 750rpx;
  1176. height: 750rpx;
  1177. line-height: 750rpx;
  1178. text-align: center;
  1179. .photo_image {
  1180. width: 750rpx;
  1181. height: 750rpx;
  1182. }
  1183. }
  1184. }
  1185. .product_info {
  1186. display: block;
  1187. background: #FFFFFF;
  1188. margin: 10rpx 0rpx;
  1189. padding: 10px 10px;
  1190. .product_name {
  1191. max-height: 80rpx;
  1192. font-size: 30rpx;
  1193. line-height: 40rpx;
  1194. overflow: hidden;
  1195. padding: 10rpx 0rpx;
  1196. .regiment_title {
  1197. background-color: red;
  1198. color: #F9F9F9;
  1199. }
  1200. }
  1201. .product_spec {
  1202. color: #999999;
  1203. font-size: 24rpx;
  1204. line-height: 30rpx;
  1205. overflow: hidden;
  1206. .spec_name {
  1207. float: left;
  1208. }
  1209. .product_stock {
  1210. float: right;
  1211. }
  1212. }
  1213. .stock_price {
  1214. font-size: 20rpx;
  1215. overflow: hidden;
  1216. margin-top: 10rpx;
  1217. line-height: 30rpx;
  1218. .product_price {
  1219. float: left;
  1220. color: red;
  1221. font-size: 38rpx;
  1222. line-height: 60rpx;
  1223. .product_market {
  1224. font-size: 24rpx;
  1225. color: #999999;
  1226. line-height: 30rpx;
  1227. margin-left: 10rpx;
  1228. text-decoration: line-through;
  1229. }
  1230. }
  1231. }
  1232. }
  1233. // 描述简介
  1234. .product_business {
  1235. display: block;
  1236. overflow: hidden;
  1237. padding: 20rpx 20rpx;
  1238. margin: 10rpx auto;
  1239. background: #FFFFFF;
  1240. .logopic {
  1241. float: left;
  1242. width: 80rpx;
  1243. height: 80rpx;
  1244. border-radius: 50%;
  1245. margin-right: 20rpx;
  1246. }
  1247. .business_info {
  1248. float: left;
  1249. width: 600rpx;
  1250. overflow: hidden;
  1251. .business_name {
  1252. font-size: 26rpx;
  1253. line-height: 40rpx;
  1254. }
  1255. .business_desc {
  1256. color: #999999;
  1257. font-size: 24rpx;
  1258. line-height: 40rpx;
  1259. }
  1260. }
  1261. }
  1262. .product_description {
  1263. width: 700rpx;
  1264. display: block;
  1265. overflow: hidden;
  1266. background: #FFFFFF;
  1267. min-height: 600rpx;
  1268. font-size: 26rpx;
  1269. margin: 0rpx auto;
  1270. line-height: 50rpx;
  1271. padding: 10rpx 25rpx;
  1272. [alt] {
  1273. //web_view图片
  1274. max-width: 100%; // 避免图片超宽
  1275. vertical-align: bottom; // 避免图片之间间隙
  1276. }
  1277. }
  1278. .product_poster {
  1279. display: block;
  1280. overflow: hidden;
  1281. padding: 10rpx 0rpx;
  1282. margin: 10rpx auto;
  1283. background: #FFFFFF;
  1284. .product_image {
  1285. width: 750rpx;
  1286. display: block;
  1287. }
  1288. }
  1289. .order_car {
  1290. left: 0rpx;
  1291. width: 750rpx;
  1292. height: 140rpx;
  1293. display: block;
  1294. position: fixed;
  1295. padding-top: 20rpx;
  1296. background: #FFFFFF;
  1297. bottom: var(--window-bottom);
  1298. border-top: 2rpx solid #DDDDDD;
  1299. .show_order {
  1300. float: right;
  1301. width: 280rpx;
  1302. height: 80rpx;
  1303. display: block;
  1304. color: #FFFFFF;
  1305. font-size: 30rpx;
  1306. overflow: hidden;
  1307. line-height: 80rpx;
  1308. padding: 0rpx 0rpx;
  1309. text-align: center;
  1310. margin-right: 35rpx;
  1311. background-color: #E03519;
  1312. border-radius: 0rpx;
  1313. border-top-right-radius: 20rpx;
  1314. border-bottom-right-radius: 20rpx;
  1315. }
  1316. .show_order_regiment {
  1317. float: right;
  1318. width: 280rpx;
  1319. height: 80rpx;
  1320. display: block;
  1321. color: #FFFFFF;
  1322. font-size: 25rpx;
  1323. overflow: hidden;
  1324. padding: 0rpx 0rpx;
  1325. text-align: center;
  1326. margin-right: 35rpx;
  1327. background-color: #E03519;
  1328. border-radius: 20rpx;
  1329. .regiment_countdown {
  1330. padding-left: 50rpx;
  1331. }
  1332. }
  1333. .show_car {
  1334. float: right;
  1335. width: 280rpx;
  1336. height: 80rpx;
  1337. display: block;
  1338. color: #FFFFFF;
  1339. font-size: 30rpx;
  1340. overflow: hidden;
  1341. line-height: 80rpx;
  1342. padding: 0rpx 0rpx;
  1343. text-align: center;
  1344. background-color: #F59A23;
  1345. border-radius: 0rpx;
  1346. border-top-left-radius: 20rpx;
  1347. border-bottom-left-radius: 20rpx;
  1348. }
  1349. .to_car {
  1350. float: left;
  1351. width: 100rpx;
  1352. height: 60rpx;
  1353. display: block;
  1354. text-align: center;
  1355. margin-left: 35rpx;
  1356. padding-top: 10rpx;
  1357. .car_icon {
  1358. float: left;
  1359. width: 60rpx;
  1360. height: 60rpx;
  1361. display: block;
  1362. }
  1363. }
  1364. }
  1365. .popup {
  1366. overflow: hidden;
  1367. .popup_title {
  1368. display: block;
  1369. overflow: hidden;
  1370. margin: 0rpx auto;
  1371. font-size: 36rpx;
  1372. height: 120rpx;
  1373. line-height: 120rpx;
  1374. padding: 0rpx 20rpx;
  1375. border-bottom: 10rpx solid #F8F8F8;
  1376. .to_addr_page {
  1377. float: right;
  1378. color: #F59A23;
  1379. display: block;
  1380. height: 120rpx;
  1381. line-height: 120rpx;
  1382. font-size: 26rpx;
  1383. padding: 0rpx 10rpx;
  1384. }
  1385. }
  1386. .order_info {
  1387. overflow: hidden;
  1388. background: #FFFFFF;
  1389. .custom_addr {
  1390. width: 680rpx;
  1391. display: block;
  1392. font-size: 24rpx;
  1393. overflow: hidden;
  1394. margin: 0rpx auto;
  1395. line-height: 40rpx;
  1396. padding: 20rpx 35rpx;
  1397. background-color: #FFFFFF;
  1398. border-bottom: 2rpx solid #dddddd;
  1399. .contact_user {
  1400. display: block;
  1401. font-size: 24rpx;
  1402. line-height: 50rpx;
  1403. .contact_none {
  1404. font-size: 26rpx;
  1405. font-weight: bold;
  1406. }
  1407. .contact_name {
  1408. font-size: 26rpx;
  1409. font-weight: bold;
  1410. margin-right: 16rpx;
  1411. }
  1412. .contact_shop {
  1413. float: right;
  1414. font-size: 26rpx;
  1415. margin-right: 16rpx;
  1416. }
  1417. .contact_more {
  1418. float: right;
  1419. font-size: 40rpx;
  1420. font-weight: bold;
  1421. }
  1422. }
  1423. .contact_addr {
  1424. width: 620rpx;
  1425. display: block;
  1426. font-size: 24rpx;
  1427. line-height: 30rpx;
  1428. padding: 10rpx 5rpx;
  1429. }
  1430. }
  1431. .car_item {
  1432. height: 200rpx;
  1433. display: block;
  1434. background: #FFFFFF;
  1435. margin: 20rpx auto;
  1436. .box_left {
  1437. float: left;
  1438. width: 160rpx;
  1439. height: 200rpx;
  1440. margin-left: 35rpx;
  1441. .car_image {
  1442. width: 160rpx;
  1443. height: 160rpx;
  1444. margin: 20rpx 0rpx;
  1445. border-radius: 5rpx;
  1446. }
  1447. }
  1448. .box_right {
  1449. float: left;
  1450. width: 485rpx;
  1451. margin-left: 35rpx;
  1452. padding-top: 20rpx;
  1453. .car_name {
  1454. max-height: 80rpx;
  1455. font-size: 30rpx;
  1456. line-height: 40rpx;
  1457. overflow: hidden;
  1458. padding: 0rpx 0rpx;
  1459. }
  1460. .promo_title{
  1461. max-height: 80rpx;
  1462. font-size: 20rpx;
  1463. line-height: 40rpx;
  1464. overflow: hidden;
  1465. padding: 0rpx 0rpx;
  1466. color: #dd524d;
  1467. }
  1468. .car_spec {
  1469. color: #999999;
  1470. font-size: 24rpx;
  1471. line-height: 30rpx;
  1472. padding: 0rpx 0rpx;
  1473. }
  1474. .stock_price {
  1475. width: 485rpx;
  1476. color: #dddddd;
  1477. font-size: 20rpx;
  1478. overflow: hidden;
  1479. margin-top: 10rpx;
  1480. line-height: 30rpx;
  1481. .product_price {
  1482. float: left;
  1483. color: red;
  1484. font-size: 30rpx;
  1485. line-height: 60rpx;
  1486. .car_market {
  1487. font-size: 24rpx;
  1488. color: #999999;
  1489. line-height: 30rpx;
  1490. vertical-align: middle;
  1491. text-decoration: line-through;
  1492. }
  1493. }
  1494. .product_quantity_box {
  1495. float: right;
  1496. color: #333333;
  1497. overflow: hidden;
  1498. font-size: 24rpx;
  1499. margin-top: 10rpx;
  1500. text-align: center;
  1501. .product_quantity_sub {
  1502. float: left;
  1503. border: none;
  1504. height: 36rpx;
  1505. background: none;
  1506. text-align: center;
  1507. line-height: 36rpx;
  1508. padding: 10rpx 10rpx;
  1509. .sub_icon {
  1510. width: 22rpx;
  1511. height: 22rpx;
  1512. display: block;
  1513. }
  1514. }
  1515. .product_quantity_sub::after {
  1516. border: none;
  1517. background: none;
  1518. }
  1519. .product_quantity {
  1520. float: left;
  1521. width: 100rpx;
  1522. height: 36rpx;
  1523. font-size: 24rpx;
  1524. min-height: 36rpx;
  1525. line-height: 36rpx;
  1526. padding: 0rpx 0rpx;
  1527. border-radius: 8rpx;
  1528. border: 2rpx solid #dddddd;
  1529. }
  1530. .product_quantity_add {
  1531. float: left;
  1532. border: none;
  1533. height: 36rpx;
  1534. background: none;
  1535. text-align: center;
  1536. padding: 10rpx 10rpx;
  1537. line-height: 36rpx;
  1538. .add_icon {
  1539. width: 22rpx;
  1540. height: 22rpx;
  1541. display: block;
  1542. }
  1543. }
  1544. .product_quantity_add::after {
  1545. border: none;
  1546. background: none;
  1547. }
  1548. }
  1549. }
  1550. .product_stock {
  1551. font-size: 20rpx;
  1552. line-height: 60rpx;
  1553. }
  1554. }
  1555. }
  1556. .select_sku {
  1557. font-size: 28rpx;
  1558. padding: 20rpx 35rpx;
  1559. margin-bottom: 10rpx;
  1560. .scroll_max {
  1561. height: 440rpx;
  1562. .product_attr {
  1563. display: block;
  1564. overflow: hidden;
  1565. margin-bottom: 20rpx;
  1566. .spec_name {
  1567. display: block;
  1568. height: 40rpx;
  1569. font-size: 28rpx;
  1570. line-height: 40rpx;
  1571. }
  1572. .arrt_list {
  1573. display: block;
  1574. overflow: hidden;
  1575. background-color: #F5F5F5;
  1576. .arrt_option {
  1577. float: left;
  1578. font-size: 28rpx;
  1579. line-height: 40rpx;
  1580. text-align: center;
  1581. border-radius: 6rpx;
  1582. padding: 10rpx 20rpx;
  1583. margin: 10rpx 0rpx;
  1584. margin-right: 20rpx;
  1585. background-color: #EEEEEE;
  1586. }
  1587. .arrt_option.active {
  1588. color: #FFFFFF;
  1589. background-color: #fE6000;
  1590. }
  1591. }
  1592. }
  1593. }
  1594. }
  1595. .to_select_coupon {
  1596. font-size: 28rpx;
  1597. padding: 10rpx 35rpx;
  1598. margin-bottom: 10rpx;
  1599. .coupon_deduction {
  1600. color: red;
  1601. float: right;
  1602. }
  1603. }
  1604. .order_price {
  1605. font-size: 28rpx;
  1606. text-align: right;
  1607. margin: 0rpx 35rpx;
  1608. padding: 10rpx 0rpx;
  1609. border-top: 2rpx solid #DDDDDD;
  1610. .coupon_deduction {
  1611. color: red;
  1612. float: right;
  1613. }
  1614. }
  1615. .order_btn {
  1616. width: 700rpx;
  1617. height: 100rpx;
  1618. display: block;
  1619. margin: 0 auto;
  1620. margin-top: 20rpx;
  1621. line-height: 80rpx;
  1622. text-align: center;
  1623. font-size: 30rpx;
  1624. .to_car {
  1625. color: #FFFFFF;
  1626. float: right;
  1627. width: 700rpx;
  1628. height: 80rpx;
  1629. display: block;
  1630. overflow: hidden;
  1631. font-size: 30rpx;
  1632. line-height: 80rpx;
  1633. padding: 0rpx 0rpx;
  1634. border-radius: 40rpx;
  1635. border: 0rpx solid transparent;
  1636. background-color: #F59A23;
  1637. }
  1638. .to_car::after {
  1639. border: 0rpx solid transparent;
  1640. }
  1641. .to_order {
  1642. color: #FFFFFF;
  1643. float: right;
  1644. width: 700rpx;
  1645. height: 80rpx;
  1646. display: block;
  1647. font-size: 30rpx;
  1648. overflow: hidden;
  1649. line-height: 80rpx;
  1650. padding: 0rpx 0rpx;
  1651. border-radius: 40rpx;
  1652. background-color: #E03519;
  1653. border: 0rpx solid transparent;
  1654. }
  1655. .to_order::after {
  1656. border: 0rpx solid transparent;
  1657. }
  1658. }
  1659. }
  1660. .coupon_list {
  1661. display: block;
  1662. overflow: hidden;
  1663. min-height: 600rpx;
  1664. margin: 10rpx auto;
  1665. background: #FFFFFF;
  1666. padding-bottom: 50rpx;
  1667. .coupon_item {
  1668. height: 200rpx;
  1669. display: block;
  1670. margin: 10rpx auto;
  1671. border-bottom: 2rpx solid #DDDDDD;
  1672. .box_left {
  1673. float: left;
  1674. width: 160rpx;
  1675. height: 160rpx;
  1676. font-size: 20rpx;
  1677. text-align: center;
  1678. margin-left: 35rpx;
  1679. line-height: 60rpx;
  1680. margin-top: 20rpx;
  1681. background: pink;
  1682. .rebate {
  1683. width: 120rpx;
  1684. height: 60rpx;
  1685. margin: 0rpx auto;
  1686. line-height: 60rpx;
  1687. margin-top: 20rpx;
  1688. overflow: hidden;
  1689. white-space: nowrap;
  1690. text-overflow: ellipsis;
  1691. }
  1692. }
  1693. .box_right {
  1694. float: left;
  1695. width: 485rpx;
  1696. margin-left: 35rpx;
  1697. padding-top: 20rpx;
  1698. .coupon_title {
  1699. width: 485rpx;
  1700. max-height: 80rpx;
  1701. font-size: 30rpx;
  1702. overflow: hidden;
  1703. line-height: 40rpx;
  1704. padding: 0rpx 0rpx;
  1705. .coupon_name {
  1706. float: left;
  1707. height: 40rpx;
  1708. width: 380rpx;
  1709. }
  1710. .coupon_status {
  1711. width: 85rpx;
  1712. float: right;
  1713. color: #999999;
  1714. font-size: 24rpx;
  1715. }
  1716. }
  1717. .product_scope {
  1718. width: 485rpx;
  1719. height: 80rpx;
  1720. color: #999999;
  1721. font-size: 24rpx;
  1722. overflow: hidden;
  1723. line-height: 80rpx;
  1724. .check_label {
  1725. float: right;
  1726. display: block;
  1727. overflow: hidden;
  1728. padding: 20rpx 20rpx;
  1729. .isstd {
  1730. line-height: 40rpx;
  1731. }
  1732. .checkbox {
  1733. float: right;
  1734. width: 40rpx;
  1735. height: 40rpx;
  1736. }
  1737. }
  1738. }
  1739. .coupon_info {
  1740. width: 485rpx;
  1741. max-height: 80rpx;
  1742. font-size: 30rpx;
  1743. overflow: hidden;
  1744. line-height: 40rpx;
  1745. padding: 0rpx 0rpx;
  1746. .coupon_exp {
  1747. float: left;
  1748. font-size: 20rpx;
  1749. }
  1750. }
  1751. }
  1752. }
  1753. .coupon_item:last-child {
  1754. border-bottom: none;
  1755. }
  1756. }
  1757. .addr_list {
  1758. width: 730rpx;
  1759. display: block;
  1760. overflow: hidden;
  1761. margin: 0rpx auto;
  1762. min-height: 500rpx;
  1763. .addr_item {
  1764. display: block;
  1765. font-size: 24rpx;
  1766. overflow: hidden;
  1767. line-height: 40rpx;
  1768. padding: 15rpx 10rpx;
  1769. border-radius: 15rpx;
  1770. border-bottom: 2rpx solid #dddddd;
  1771. .radio_label {
  1772. width: 40rpx;
  1773. float: left;
  1774. height: 50rpx;
  1775. padding-top: 30rpx;
  1776. margin-right: 20rpx;
  1777. .radio_icon {
  1778. float: left;
  1779. width: 40rpx;
  1780. height: 40rpx;
  1781. }
  1782. }
  1783. .contact_user {
  1784. float: left;
  1785. width: 640rpx;
  1786. display: block;
  1787. height: 50rpx;
  1788. font-size: 24rpx;
  1789. line-height: 50rpx;
  1790. .contact_name {
  1791. font-size: 26rpx;
  1792. font-weight: bold;
  1793. margin-right: 16rpx;
  1794. }
  1795. .contact_default {
  1796. color: #F59A23;
  1797. font-size: 20rpx;
  1798. margin-left: 16rpx;
  1799. border: 1rpx solid #F59A23;
  1800. }
  1801. .contact_shop {
  1802. float: right;
  1803. font-size: 26rpx;
  1804. margin-right: 16rpx;
  1805. }
  1806. }
  1807. .contact_addr {
  1808. float: left;
  1809. width: 640rpx;
  1810. display: block;
  1811. font-size: 24rpx;
  1812. line-height: 30rpx;
  1813. padding: 10rpx 5rpx;
  1814. }
  1815. }
  1816. }
  1817. .create_box {
  1818. height: 140rpx;
  1819. display: block;
  1820. .create_addr {
  1821. width: 700rpx;
  1822. height: 80rpx;
  1823. display: block;
  1824. color: #FFFFFF;
  1825. font-size: 30rpx;
  1826. overflow: hidden;
  1827. line-height: 80rpx;
  1828. padding: 0rpx 0rpx;
  1829. text-align: center;
  1830. margin: 0rpx auto;
  1831. margin-top: 20rpx;
  1832. border-radius: 40rpx;
  1833. background-color: #E03519;
  1834. }
  1835. }
  1836. .regiment_popup_list {
  1837. display: block;
  1838. overflow: hidden;
  1839. min-height: 600rpx;
  1840. margin: 10rpx auto;
  1841. background: #FFFFFF;
  1842. padding-bottom: 50rpx;
  1843. .regiment_popup_item {
  1844. height: 100rpx;
  1845. display: block;
  1846. margin: 10rpx auto;
  1847. border-bottom: 2rpx solid #DDDDDD;
  1848. .username {
  1849. float: left;
  1850. padding-left: 20rpx;
  1851. padding-top: 20rpx;
  1852. .user_image {
  1853. float: left;
  1854. display: block;
  1855. width: 80rpx;
  1856. height: 80rpx;
  1857. border-radius: 40%;
  1858. }
  1859. .username_text {
  1860. height: 80rpx;
  1861. line-height: 80rpx;
  1862. }
  1863. }
  1864. .regiment_center {
  1865. float: right;
  1866. padding-right: 18rpx;
  1867. padding-top: 25rpx;
  1868. .regiment_center_text {
  1869. font-size: 25rpx;
  1870. }
  1871. .regiment_center_time {
  1872. font-size: 25rpx;
  1873. .center_title {
  1874. float: left;
  1875. }
  1876. }
  1877. }
  1878. .regiment_right {
  1879. float: right;
  1880. padding-top: 25rpx;
  1881. .regiment_but {
  1882. font-size: 25rpx;
  1883. background-color: #E03519;
  1884. color: #F9F9F9;
  1885. }
  1886. }
  1887. }
  1888. .coupon_item:last-child {
  1889. border-bottom: none;
  1890. }
  1891. }
  1892. }
  1893. // 添加客服
  1894. .center_popup {
  1895. .add_follow {
  1896. display: block;
  1897. color: #FFFFFF;
  1898. width: 700rpx;
  1899. height: 800rpx;
  1900. margin: 0 auto;
  1901. font-size: 26rpx;
  1902. border-radius: 40rpx;
  1903. background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
  1904. .close_area {
  1905. height: 80rpx;
  1906. display: block;
  1907. line-height: 80rpx;
  1908. .close_btn {
  1909. color: #FFFFFF;
  1910. float: right;
  1911. width: 80rpx;
  1912. height: 80rpx;
  1913. font-size: 26rpx;
  1914. text-align: center;
  1915. line-height: 80rpx;
  1916. padding: 0rpx 0rpx;
  1917. border: 0rpx solid transparent;
  1918. background-color: transparent;
  1919. }
  1920. .close_btn::after {
  1921. border: 0rpx solid transparent;
  1922. }
  1923. }
  1924. .info_alter {
  1925. display: block;
  1926. height: 100rpx;
  1927. font-size: 42rpx;
  1928. font-weight: bold;
  1929. text-align: center;
  1930. line-height: 100rpx;
  1931. }
  1932. .qr_code_area {
  1933. display: block;
  1934. width: 300rpx;
  1935. height: 300rpx;
  1936. margin: 30rpx auto;
  1937. .qr_code {
  1938. float: left;
  1939. width: 300rpx;
  1940. height: 300rpx;
  1941. }
  1942. }
  1943. .save_btn {
  1944. color: #333333;
  1945. display: block;
  1946. width: 260rpx;
  1947. height: 80rpx;
  1948. font-size: 26rpx;
  1949. text-align: center;
  1950. line-height: 80rpx;
  1951. padding: 0rpx 0rpx;
  1952. margin: 40rpx auto;
  1953. border-radius: 40rpx;
  1954. background-color: #FFFFFF;
  1955. border: 0rpx solid transparent;
  1956. }
  1957. .rule_info {
  1958. width: 600rpx;
  1959. display: block;
  1960. font-size: 26rpx;
  1961. margin: 20rpx auto;
  1962. overflow: hidden;
  1963. line-height: 40rpx;
  1964. }
  1965. }
  1966. }
  1967. .regiment_list {
  1968. width: 700rpx;
  1969. margin-left: 20rpx;
  1970. background-color: red;
  1971. border-radius: 10px;
  1972. .regiment_list_title {
  1973. padding-top: 20rpx;
  1974. height: 60rpx;
  1975. .title1 {
  1976. margin-top: 20rpx;
  1977. padding-left: 20rpx;
  1978. color: #F9F9F9;
  1979. }
  1980. .title2 {
  1981. padding-left: 350rpx;
  1982. color: #F9F9F9;
  1983. }
  1984. }
  1985. .regiment {
  1986. width: 685rpx;
  1987. height: 250rpx;
  1988. background-color: #F9F9F9;
  1989. margin-left: 10rpx;
  1990. border-radius: 10px;
  1991. .swiper {
  1992. height: 250rpx;
  1993. .swiper-item {
  1994. .username {
  1995. float: left;
  1996. padding-left: 20rpx;
  1997. padding-top: 20rpx;
  1998. .user_image {
  1999. float: left;
  2000. display: block;
  2001. width: 80rpx;
  2002. height: 80rpx;
  2003. border-radius: 40%;
  2004. }
  2005. .username_text {
  2006. height: 80rpx;
  2007. line-height: 80rpx;
  2008. }
  2009. }
  2010. .regiment_center {
  2011. float: right;
  2012. padding-right: 18rpx;
  2013. padding-top: 25rpx;
  2014. .regiment_center_text {
  2015. font-size: 25rpx;
  2016. }
  2017. .regiment_center_time {
  2018. font-size: 25rpx;
  2019. .center_title {
  2020. float: left;
  2021. }
  2022. }
  2023. }
  2024. .regiment_right {
  2025. float: right;
  2026. padding-top: 25rpx;
  2027. .regiment_but {
  2028. font-size: 25rpx;
  2029. background-color: #E03519;
  2030. color: #F9F9F9;
  2031. }
  2032. }
  2033. }
  2034. }
  2035. }
  2036. }
  2037. </style>