index.vue 55 KB

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