index.vue 69 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596
  1. <template name="navbars">
  2. <view>
  3. <tui-skeleton
  4. v-if="skeletonShow"
  5. backgroundColor="#fafafa"
  6. borderRadius="10rpx"
  7. :isLoading="true"
  8. :loadingType="5"
  9. ></tui-skeleton>
  10. <view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
  11. <template v-if="pathType == 0">
  12. <view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length > 0">
  13. <view class="foot-text"
  14. >共<text>{{ kindCount }}</text
  15. >件商品</view
  16. >
  17. <view class="delBtn" @tap.stop="showDelManager">删除</view>
  18. </view>
  19. </template>
  20. <template v-else>
  21. <view
  22. class="foot-check-delbtn"
  23. v-if="!isshowDelbtn && goodsList.length > 0"
  24. :style="{ top: CustomBar + 'px' }"
  25. >
  26. <view class="foot-text"
  27. >共<text>{{ kindCount }}</text
  28. >件商品</view
  29. >
  30. <view class="delBtn" @tap.stop="showDelManager">删除</view>
  31. </view>
  32. </template>
  33. <view v-if="!isEmpty" class="container-cart">
  34. <view class="cart-content" :style="{ paddingBottom: isIphoneX ? '130rpx' : '100rpx' }">
  35. <view class="goods-list">
  36. <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
  37. <view class="shoptitle">
  38. <!--选择商店的全部商品"-->
  39. <view class="checkbox-box" @click.stop="checkShop(item)">
  40. <view
  41. class="checkbox iconfont"
  42. :class="[item.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
  43. ></view>
  44. </view>
  45. <view v-if="item.promotions" class="floor-item-act">
  46. <view class="floor-tags" @click.stop="clickPopupShow(item, 2)">{{
  47. item.promotions.name
  48. }}</view>
  49. </view>
  50. <view class="text" @click.stop="goSuppile(item)">{{ item.shopName }} </view>
  51. <view class="text-coupon" @click="showPopup(0, item)" v-if="item.couponsLogo"
  52. >领券</view
  53. >
  54. </view>
  55. <view class="productlist">
  56. <view class="goods-pros" v-for="(pros, idx) in item.cartList" :key="idx">
  57. <view class="goods-pros-t">
  58. <!--选择商品-->
  59. <view class="checkbox-box" @click.stop="ischeck(item, pros)">
  60. <view
  61. class="checkbox iconfont"
  62. :class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
  63. ></view>
  64. </view>
  65. <view class="pros-img" @click.stop="navToListPage(pros.productId)"
  66. ><image :src="pros.image ? pros.image : ''" alt=""
  67. /><view class="pros-type" v-if="pros.productType == 2">医疗器械</view>
  68. </view>
  69. <view class="pros-product">
  70. <view class="producttitle" @click.stop="navToListPage(pros.productId)">{{
  71. pros.name
  72. }}</view>
  73. <view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
  74. <view class="productprice">
  75. <!--使用过滤器对总价改变-->
  76. <view
  77. class="price"
  78. :class="
  79. PromotionsFormat(pros.promotions) ||
  80. (pros.svipProductFlag == 1 && vipFlag == 1)
  81. ? 'disabled'
  82. : ''
  83. "
  84. >
  85. <text>¥</text>
  86. {{
  87. (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
  88. ? pros.originalPrice
  89. : pros.price) | NumFormat
  90. }}
  91. </view>
  92. <view
  93. class="count"
  94. v-if="pros.validFlag == 2"
  95. :class="[isshowDelbtn ? 'none' : 'show']"
  96. >
  97. <text class="count-tips" v-if="pros.number < pros.min"
  98. >起订量:{{ pros.min }}</text
  99. >
  100. <text class="count-tips step" v-if="pros.isStep"
  101. >购买量必须为起订量的整数倍</text
  102. >
  103. <view class="number-box">
  104. <view
  105. class="iconfont icon-jianhao"
  106. @click="changeCountSub(item, pros)"
  107. ></view>
  108. <input
  109. class="btn-input"
  110. type="number"
  111. maxlength="4"
  112. v-model="pros.number"
  113. @blur="changeNnmber($event, item, pros)"
  114. @focus="changeInput(pros)"
  115. />
  116. <view
  117. class="iconfont icon-jiahao"
  118. @click="changeCountAdd(item, pros)"
  119. ></view>
  120. </view>
  121. </view>
  122. </view>
  123. <view class="floor-item-act">
  124. <template v-if="pros.actStatus == 1 && pros.promotions">
  125. <view
  126. v-if="PromotionsFormat(pros.promotions)"
  127. class="floor-tags"
  128. @click.stop="clickPopupShow(pros, 1)"
  129. >
  130. {{ pros.promotions.name }}
  131. <text
  132. v-if="pros.promotions != null && pros.promotions.type != 3"
  133. >
  134. :¥{{
  135. pros.promotions == null
  136. ? '0.00'
  137. : pros.promotions.touchPrice | NumFormat
  138. }}
  139. </text>
  140. </view>
  141. <view
  142. v-else-if="pros.promotions.type != 3"
  143. class="floor-tags"
  144. @click.stop="clickPopupShow(pros, 2)"
  145. >
  146. {{ pros.promotions.name }}
  147. </view>
  148. </template>
  149. <template v-if="pros.actStatus == null && pros.ladderFlag == 1">
  150. <view class="floor-tags" @click.stop="clickPopupShow(pros, 2)"
  151. >阶梯价格</view
  152. >
  153. </template>
  154. <template v-if="pros.svipProductFlag == 1">
  155. <view class="svip-tags">
  156. <view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
  157. <view class="price" v-if="isShowVipFlag(pros)">{{
  158. pros.svipPriceTag
  159. }}</view>
  160. </view>
  161. </template>
  162. </view>
  163. </view>
  164. </view>
  165. </view>
  166. </view>
  167. <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
  168. <view class="sum-none" v-if="item.reducedPrice > 0">
  169. <text class="money-sign">¥</text>
  170. <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
  171. <text class="money-reduced"
  172. >减<text>¥{{ item.reducedPrice | NumFormat }}</text></text
  173. >
  174. </view>
  175. <view class="sum"
  176. >合计:<text class="money"
  177. ><text class="money-sign">¥</text>{{ item.totalPrice | NumFormat }}</text
  178. ></view
  179. >
  180. </view>
  181. </view>
  182. </view>
  183. <view class="failure-list" v-if="failureList.length > 0">
  184. <view class="failure-title">
  185. <view class="title-txt"
  186. >失效商品<text>{{ failureList.length }}件</text></view
  187. >
  188. <view class="title-btn" @click.stop="deletefailureList"
  189. ><text class="butto">清空失效商品</text></view
  190. >
  191. </view>
  192. <view class="productlist">
  193. <view class="goods-pros" v-for="(failure, failureIdx) in failureList" :key="failureIdx">
  194. <view class="goods-pros-t" @click.stop="failureToProduct(failure)">
  195. <!--选择商品-->
  196. <view
  197. class="checkbox-box"
  198. @click.stop="ischeckFailure(failure)"
  199. v-if="isshowDelbtn"
  200. >
  201. <button
  202. class="checkbox iconfont"
  203. :class="[failure.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
  204. ></button>
  205. </view>
  206. <text class="img-tip">失效</text>
  207. <view class="pros-img">
  208. <image :src="failure.image ? failure.image : ''" alt="" />
  209. <view class="pros-type" v-if="failure.productType == 2">医疗器械</view>
  210. </view>
  211. <view class="pros-product">
  212. <view class="producttitle">{{ failure.name }}</view>
  213. <view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
  214. <view class="productstate">{{ failureStateText(failure.status) }}</view>
  215. </view>
  216. <view class="pros-marks" v-if="failure.isFailureLayer"></view>
  217. </view>
  218. </view>
  219. </view>
  220. </view>
  221. </view>
  222. <!-- 脚部菜单 -->
  223. <template v-if="pathType == 0">
  224. <view class="footer">
  225. <view class="footer-le">
  226. <view class="foot-check checkbox-box" @tap.stop="checkAll()">
  227. <button
  228. class="checkbox iconfont"
  229. :class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
  230. ></button>
  231. <view class="text">全选</view>
  232. </view>
  233. <view class="sum">
  234. <view class="sum-price" :class="isDiscount ? '' : 'none'">
  235. 总价:<text class="money-sign">¥</text
  236. ><text class="money">{{ (allPrice - couponPrice) | NumFormat }}</text>
  237. </view>
  238. <view class="sum-none" v-if="isDiscount">
  239. <text class="money-reduced"
  240. >共减<text>¥{{ totalDiscountAmount | NumFormat }}</text></text
  241. >
  242. <text class="money-popup" @click="showPopup(1)"
  243. >优惠明细<text class="iconfont icon-xiangshangjiantou"></text
  244. ></text>
  245. </view>
  246. </view>
  247. </view>
  248. <view v-if="!isshowDelbtn" class="footer-ri">
  249. <view class="btn hanld-btn" @tap="toConfirmation">去结算({{ allCount }})</view>
  250. </view>
  251. <view v-else class="footer-del">
  252. <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
  253. <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
  254. </view>
  255. </view>
  256. </template>
  257. <template v-else>
  258. <view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
  259. <view class="footer-le">
  260. <view class="foot-check checkbox-box" @tap.stop="checkAll()">
  261. <button
  262. class="checkbox iconfont"
  263. :class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
  264. ></button>
  265. <view class="text">全选</view>
  266. </view>
  267. <view class="sum">
  268. <view class="sum-price" :class="isDiscount ? '' : 'none'">
  269. 总价:<text class="money-sign">¥</text
  270. ><text class="money">{{ (allPrice - couponPrice) | NumFormat }}</text>
  271. </view>
  272. <view class="sum-none" v-if="isDiscount">
  273. <text class="money-reduced"
  274. >共减<text>¥{{ totalDiscountAmount | NumFormat }}</text></text
  275. >
  276. <text class="money-popup" @click="showPopup(1)"
  277. >优惠明细<text class="iconfont icon-xiangshangjiantou"></text
  278. ></text>
  279. </view>
  280. </view>
  281. </view>
  282. <view v-if="!isshowDelbtn" class="footer-ri">
  283. <view class="btn hanld-btn" @tap="toConfirmation">去结算({{ allCount }})</view>
  284. </view>
  285. <view v-else class="footer-del">
  286. <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
  287. <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
  288. </view>
  289. </view>
  290. </template>
  291. </view>
  292. <view v-else class="cart-content empty">
  293. <view class="empty-container">
  294. <image
  295. class="empty-container-image"
  296. src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png"
  297. mode="aspectFit"
  298. ></image>
  299. <text class="error-text">购物车空空如也,快去商城逛逛吧~</text>
  300. <view class="login-btn" @click="goIndex">去商城</view>
  301. </view>
  302. </view>
  303. </view>
  304. <!-- 促销活动弹窗 -->
  305. <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
  306. <!-- 透明模态层 -->
  307. <modal-layer v-if="modallayer"></modal-layer>
  308. <!-- 优惠券 -->
  309. <tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
  310. <view class="tui-popup-box clearfix">
  311. <view class="title">优惠券</view>
  312. <view class="tui-popup-close" @click="hidePopup(0)">
  313. <text class="iconfont icon-iconfontguanbi"></text>
  314. </view>
  315. <view class="tui-popup-tabs">
  316. <coupon-tabs
  317. :tabs="navbar"
  318. :currentTab="currentTab > 2 ? 0 : currentTab"
  319. @change="couponChange"
  320. :itemWidth="100 / navbar.length + '%'"
  321. selectedColor="#e15616"
  322. sliderBgColor="#e15616"
  323. >
  324. </coupon-tabs>
  325. </view>
  326. <div class="tui-popup-main coupon">
  327. <scroll-view class="tui-popup-scroll" scroll-y="true">
  328. <view class="coupon-empty" v-if="isCouponEmpty">
  329. <image
  330. class="empty-container-image"
  331. :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
  332. ></image>
  333. <text class="error-text">暂无优惠券~</text>
  334. </view>
  335. <template v-else>
  336. <view
  337. v-for="(coupon, index) in productCouponList"
  338. :key="index"
  339. :id="coupon.couponId"
  340. class="coupon-list"
  341. >
  342. <view class="list-cell-le">
  343. <view class="coupon-maxMoney"
  344. ><text class="small">¥</text>{{ coupon.couponAmount }}</view
  345. >
  346. <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
  347. </view>
  348. <view class="list-cell-ri">
  349. <view class="list-cell-top">
  350. <view class="list-cell-type">
  351. <view class="list-cell-tags">
  352. <template v-if="coupon.moneyCouponFlag == 1">
  353. <text class="tags" v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</text>
  354. <text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
  355. </template>
  356. <template v-else>
  357. <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
  358. </template>
  359. </view>
  360. <view
  361. class="list-cell-texts"
  362. :class="currentTab == 1 || currentTab == 2 ? 'none' : ''"
  363. >
  364. <text v-if="coupon.couponType == 0">
  365. {{
  366. coupon.productType && coupon.productType == 1
  367. ? '全商城商品通用'
  368. : '仅可购买指定商品'
  369. }}
  370. </text>
  371. <text v-if="coupon.couponType == 1">
  372. {{
  373. coupon.categoryType == 1
  374. ? '仅限购买产品类商品'
  375. : '仅限购买仪器类商品'
  376. }}
  377. </text>
  378. <text v-if="coupon.couponType == 3"
  379. >仅限购买店铺【{{ coupon.shopName }}】的商品</text
  380. >
  381. <text v-if="coupon.couponType == 4 || coupon.couponType == 2"
  382. >全商城商品通用</text
  383. >
  384. </view>
  385. </view>
  386. <view class="list-cell-btn">
  387. <view class="icon-used">
  388. <template v-if="coupon.couponBtnType == 0">
  389. <template v-if="coupon.couponPayWay == 2">
  390. <view class="icon-used-text">{{ coupon.moneyCouponPrice }}采美豆</view>
  391. <view
  392. class="icon-used-btn receive"
  393. @click="toDeductCoupon(coupon)"
  394. >抵扣</view
  395. >
  396. </template>
  397. <template v-else-if="coupon.couponPayWay == 1">
  398. <view class="icon-used-text">购买</view>
  399. <view
  400. class="icon-used-btn receive"
  401. @click="toPayCoupon(coupon)"
  402. >¥{{ coupon.moneyCouponPrice }}</view
  403. >
  404. </template>
  405. <template v-else>
  406. <view
  407. class="icon-used-btn receive"
  408. @click="receiveCoupon(coupon)"
  409. >领取</view
  410. >
  411. </template>
  412. </template>
  413. <view class="icon-used-btn make" v-if="coupon.couponBtnType == 1"
  414. >已领取</view
  415. >
  416. </view>
  417. </view>
  418. </view>
  419. <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
  420. </view>
  421. </view>
  422. </template>
  423. </scroll-view>
  424. </div>
  425. </view>
  426. </tui-bottom-popup>
  427. <!-- 优惠明细 -->
  428. <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
  429. <view class="tui-popup-box clearfix">
  430. <view class="title">优惠明细</view>
  431. <view class="tui-popup-close" @click="hidePopup(1)">
  432. <text class="iconfont icon-iconfontguanbi"></text>
  433. </view>
  434. <div class="tui-popup-main coupon">
  435. <view class="tui-popup-coupon">
  436. <view class="tui-popup-h1">
  437. <view class="tui-popup-text left">商品总额</view>
  438. <view class="tui-popup-text right bold">¥{{ totalAmount | NumFormat }}</view>
  439. </view>
  440. <view class="tui-popup-h1" v-if="reducedPrice > 0">
  441. <view class="tui-popup-text left">促销满减</view>
  442. <view class="tui-popup-text right bold red">-¥{{ reducedPrice | NumFormat }}</view>
  443. </view>
  444. <view class="tui-popup-h1" v-if="couponPrice > 0">
  445. <view class="tui-popup-text left">优惠券</view>
  446. <view class="tui-popup-text right bold red">-¥{{ couponPrice | NumFormat }}</view>
  447. </view>
  448. <view class="tui-popup-h1" v-if="svipReducedPrice > 0">
  449. <view class="tui-popup-text left">超级会员优惠</view>
  450. <view class="tui-popup-text right bold red">-¥{{ svipReducedPrice | NumFormat }}</view>
  451. </view>
  452. <view class="tui-popup-h1">
  453. <view class="tui-popup-text left bold">共减</view>
  454. <view class="tui-popup-text right bold red">-¥{{ totalDiscountAmount | NumFormat }}</view>
  455. </view>
  456. <view class="tui-popup-h1">
  457. <view class="tui-popup-text left bold">总价</view>
  458. <view class="tui-popup-text right bold"
  459. >¥{{ (totalAmount - totalDiscountAmount) | NumFormat }}</view
  460. >
  461. </view>
  462. </view>
  463. </div>
  464. </view>
  465. </tui-bottom-popup>
  466. <!-- 弹窗提示 -->
  467. <tui-modal
  468. :show="modal"
  469. @click="handleClick"
  470. @cancel="hideMobel"
  471. :content="contentModalText"
  472. :button="modalButton"
  473. color="#333"
  474. :size="32"
  475. shape="circle"
  476. :maskClosable="false"
  477. >
  478. </tui-modal>
  479. </view>
  480. </template>
  481. <script>
  482. import authorize from '@/common/config/authorize.js'
  483. import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
  484. import tuiNomore from '@/components/tui-components/nomore/nomore'
  485. import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
  486. import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
  487. import modalLayer from '@/components/modal-layer'
  488. import payMixins from '@/mixins/payMixins.js'
  489. import { mapState, mapMutations } from 'vuex'
  490. export default {
  491. name: 'cartComponents',
  492. mixins: [payMixins],
  493. props: {
  494. pathType: {
  495. type: Number
  496. }
  497. },
  498. components: {
  499. tuiLoadmore,
  500. tuiNomore,
  501. activiPopup,
  502. couponTabs,
  503. modalLayer
  504. },
  505. data() {
  506. return {
  507. StaticUrl: this.$Static, // 静态图片路径
  508. CustomBar: this.CustomBar, // 顶部导航栏高度
  509. isIphoneX: this.$store.state.isIphoneX,
  510. userId: 0,
  511. userIdentity: 0,
  512. alertType: '',
  513. isStock: '',
  514. handlerPros: {}, // 监听单挑促销商品
  515. failureList: [], // 失效商品列表
  516. goodsList: [], // 购物车的商品
  517. promotionsList: [], // 促销列表
  518. totalCouponList: [], // 优惠券算列表
  519. eligibleCoupons: [], // 最终需要用到优惠券
  520. delGoodsList: '', // 要删除的商品
  521. setGoodData: '', // 确认订单的商品
  522. isCheckAll: false, // 是否全选
  523. kindCount: 0, // 购物车宝贝数量
  524. totalAmount: 0, // 商品最终合计总价
  525. allPrice: 0, // 所有价格
  526. totalOriginalPrice: 0, // 所有原价价
  527. reducedPrice: 0, // 促销满减
  528. couponPrice: 0, // 优惠金额
  529. svipReducedPrice: 0, // 超级会员优惠金额
  530. totalDiscountAmount: 0, // 总共减去金额
  531. isDiscount: false, // 控制显示优惠明细
  532. allCount: 0, // 被选中的产品数量
  533. isModallayer: false,
  534. skeletonShow: true,
  535. isshowDelbtn: false,
  536. isDisabled: false, // 供应商/店铺全选是否禁用状态
  537. isNoConfim: false,
  538. isEmpty: false, // 显示空购物车
  539. scrollHeight: 'auto',
  540. nomoreText: '上拉显示更多',
  541. hasNextPage: false,
  542. loadding: false,
  543. pullUpOn: true,
  544. pullFlag: true,
  545. pageSize: 10,
  546. pageNum: 1,
  547. submitIds: [],
  548. checkenProsList:[],
  549. popupShow: false,
  550. popupShow0: false,
  551. popupShow1: false,
  552. currentTab: 1,
  553. navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
  554. couponParam: {
  555. // 获取弹窗优惠券领取参数
  556. userId: 0,
  557. shopId: 0,
  558. status: 1,
  559. source: 2
  560. },
  561. productCouponList: [], // 优惠券弹窗列表
  562. isCouponEmpty: false,
  563. contentModalText: '', //操作文字提示语句
  564. modal: false,
  565. modalButton: [
  566. {
  567. text: '取消',
  568. type: 'gray',
  569. plain: true //是否空心
  570. },
  571. {
  572. text: '去升级',
  573. customStyle: {
  574. color: '#fff',
  575. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  576. },
  577. plain: false
  578. }
  579. ],
  580. }
  581. },
  582. created() {
  583. this.setScrollHeight()
  584. console.log('pathType', this.pathType)
  585. },
  586. computed: {
  587. ...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
  588. },
  589. watch: {
  590. //深度监听所有数据,每次改变重新计算总价和总数
  591. goodsList: {
  592. deep: true,
  593. handler(val, oldval) {
  594. this.totalPeice()
  595. this.totalCount()
  596. }
  597. }
  598. },
  599. filters: {
  600. NumFormat(value) {
  601. //处理金额
  602. return Number(value).toFixed(2)
  603. },
  604. totalprice(val, count) {
  605. //单件商品的价格 × 数量
  606. return (val * count).toFixed(2)
  607. },
  608. TypeFormat(value) {
  609. switch (value) {
  610. case 0:
  611. return '活动券'
  612. break
  613. case 1:
  614. return '品类券'
  615. break
  616. case 2:
  617. return '用户专享券'
  618. break
  619. case 3:
  620. return '店铺券'
  621. break
  622. case 4:
  623. return '新用户券'
  624. break
  625. }
  626. }
  627. },
  628. methods: {
  629. async initData() {
  630. const userInfo = await this.$api.getStorage()
  631. this.isModallayer = false //遮罩层 防止多次点击
  632. this.skeletonShow = true //预加载圆圈
  633. this.isCheckAll = false //是否全选
  634. this.submitIds = []
  635. this.checkenProsList = []
  636. this.couponPrice = 0
  637. this.reducedPrice = 0
  638. this.totalDiscountAmount = 0
  639. this.isDiscount = false
  640. this.eligibleCoupons = []
  641. this.userId = this.couponParam.userId = userInfo.userId ? userInfo.userId : 0
  642. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  643. this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
  644. this.initGetCartGoodsList()
  645. },
  646. isShowVipFlag(pros) {
  647. if (pros.priceFlag != 1) {
  648. if (this.userIdentity == 4 && this.vipFlag == 1) {
  649. return true
  650. } else if (this.userIdentity == 2) {
  651. return true
  652. }
  653. }
  654. },
  655. initLogin() {
  656. this.$api.redirectTo('/pages/login/login')
  657. },
  658. clickPopupShow(pros, type) {
  659. this.popupShow = true
  660. this.handlerPros = pros
  661. },
  662. setScrollHeight() {
  663. // 窗口高度-footer高度
  664. const { windowHeight, pixelRatio } = uni.getSystemInfoSync()
  665. setTimeout(() => {
  666. const query = uni.createSelectorQuery().in(this)
  667. query.selectAll('.footer').boundingClientRect()
  668. query.exec(res => {
  669. this.windowHeight = windowHeight
  670. if (res[0][0]) {
  671. this.scrollHeight = windowHeight - res[0][0].height
  672. }
  673. })
  674. }, 500)
  675. },
  676. initGetCartGoodsList() {
  677. //初始化购物车 index:1
  678. this.ProductService.QueryShoppingCartList({ userId: this.userId, source: 2 })
  679. .then(response => {
  680. this.skeletonShow = false
  681. let data = response.data
  682. this.kindCount = data.kindCount
  683. this.promotionsList = data.promotions
  684. this.totalCouponList = data.couponList
  685. this.$store.commit('updateAllNum', data.kindCount)
  686. if (data.list.length > 0 || data.invalid.length > 0) {
  687. this.isEmpty = false
  688. } else {
  689. this.isEmpty = true
  690. }
  691. if (data.list && data.list.length > 0) {
  692. this.goodsList = data.list
  693. this.goodsList.forEach((item, index) => {
  694. item.cartList.forEach(pros => {
  695. pros.shopId = item.shopId
  696. pros.isStep = false
  697. if (pros.step === 2) {
  698. if (pros.number % pros.min != 0) {
  699. pros.number = pros.min
  700. this.totalShopPeice()
  701. this.updateShoppogNum(pros)
  702. }
  703. }
  704. })
  705. })
  706. this.totalShopPeice()
  707. } else {
  708. this.goodsList = []
  709. }
  710. if (data.invalid && data.invalid.length > 0) {
  711. let newFailureList = [],
  712. isFailureLayer
  713. data.invalid.forEach((failure, index) => {
  714. if (failure.status == 1 || failure.status == 2) {
  715. isFailureLayer = true
  716. } else {
  717. isFailureLayer = false
  718. }
  719. newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
  720. })
  721. this.failureList = newFailureList
  722. } else {
  723. this.failureList = []
  724. }
  725. })
  726. .catch(error => {
  727. this.$util.msg(error.msg, 2000)
  728. })
  729. },
  730. ischeckFailure(failure) {
  731. failure.isChecked = !failure.isChecked
  732. this.updateCheckAllBtn()
  733. },
  734. ischeck(item, pro) {
  735. //为未选中的时候改变为true,反之为true
  736. pro.isChecked = !pro.isChecked
  737. if (pro.isChecked) {
  738. if (!this.submitIds.includes(pro.productId * 1)) {
  739. this.submitIds.push(pro.productId)
  740. this.checkenProsList.push(pro)
  741. }
  742. } else {
  743. var lent = this.submitIds.indexOf(pro.productId * 1)
  744. if (lent >= 0) {
  745. this.submitIds.splice(lent, 1)
  746. this.checkenProsList.splice(lent, 1)
  747. }
  748. }
  749. this.updateProductCheckedAllBtn(item)
  750. this.updateCheckAllBtn()
  751. },
  752. updateProductCheckedAllBtn(item) {
  753. // 单独每个供应商的勾选判断
  754. let productsList = item.cartList,
  755. productsCheckedLength = 0,
  756. disabledLength = 0
  757. if (this.isshowDelbtn) {
  758. productsList.forEach(pros => {
  759. if (pros.isChecked) {
  760. productsCheckedLength++
  761. }
  762. })
  763. } else {
  764. productsList.forEach(pros => {
  765. if (pros.isChecked) {
  766. productsCheckedLength++
  767. }
  768. })
  769. }
  770. item.isChecked = productsCheckedLength === productsList.length
  771. },
  772. updateCheckAllBtn() {
  773. // 全选勾选判断
  774. let goodsCheckedLength = 0,
  775. goodsList = this.goodsList,
  776. failureList = this.failureList
  777. goodsList.forEach(item => {
  778. if (item.isChecked) {
  779. goodsCheckedLength++
  780. }
  781. })
  782. failureList.forEach(failureItem => {
  783. if (failureItem.isChecked) {
  784. goodsCheckedLength++
  785. }
  786. })
  787. if (this.isshowDelbtn) {
  788. this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length
  789. } else {
  790. this.isCheckAll = goodsCheckedLength === goodsList.length
  791. }
  792. },
  793. checkShop(item) {
  794. //与单选商品类似
  795. item.isChecked = !item.isChecked
  796. this.setProductChecked(item)
  797. this.updateCheckAllBtn()
  798. },
  799. setProductChecked(item) {
  800. item.cartList.forEach(pros => {
  801. if (item.isChecked) {
  802. pros.isChecked = true
  803. if (!this.submitIds.includes(pros.productId * 1)) {
  804. this.submitIds.push(pros.productId)
  805. this.checkenProsList.push(pros)
  806. }
  807. } else {
  808. pros.isChecked = false
  809. var lent = this.submitIds.indexOf(pros.productId * 1)
  810. if (lent >= 0) {
  811. this.submitIds.splice(lent, 1)
  812. this.checkenProsList.splice(lent, 1)
  813. }
  814. }
  815. })
  816. },
  817. updateBothCheckBtn() {
  818. if (this.isshowDelbtn) {
  819. // 当管理删除按钮出现时,失效的商品可被选择
  820. this.goodsList.forEach(item => {
  821. item.isChecked = this.isCheckAll
  822. this.setProductChecked(item)
  823. })
  824. //删除按钮 全选包括失效商品勾选
  825. this.failureList.forEach(failureItem => {
  826. failureItem.isChecked = this.isCheckAll
  827. })
  828. } else {
  829. this.goodsList.forEach(item => {
  830. item.isChecked = this.isCheckAll && !item.isDisabled
  831. this.setProductChecked(item)
  832. })
  833. }
  834. },
  835. checkAll() {
  836. //全选方法内调用方法
  837. this.isCheckAll = !this.isCheckAll
  838. if (!this.isCheckAll) {
  839. this.popupShow1 = false
  840. }
  841. this.updateBothCheckBtn()
  842. },
  843. totalShopPeice() {
  844. //每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
  845. let touchPrice = 0
  846. let reducedPrice = 0 //商铺合计满减价
  847. this.goodsList.map((item, index) => {
  848. //计算店铺满减后店铺合计
  849. if (item.promotions && item.promotions.mode == 2) {
  850. let prosPrice = 0 // 店铺价格合计
  851. let prosDiscountNum = 0 // 店铺促销叠加次数
  852. let totalOriginalPrice = 0 //店铺原价合计
  853. item.cartList.forEach(pros => {
  854. prosPrice += pros.price * pros.number
  855. totalOriginalPrice += pros.originalPrice * pros.number
  856. })
  857. if(item.promotions.discount == 1){// 支持促销叠加条件的店铺满减 执行
  858. prosDiscountNum = parseInt(prosPrice/item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
  859. console.log('店铺满减促销叠加通道叠加次数',`${prosDiscountNum}次`)
  860. if (prosPrice >= item.promotions.touchPrice) {// 满足店铺满减条件下执行
  861. item.totalPrice = prosPrice - item.promotions.reducedPrice*prosDiscountNum
  862. item.reducedPrice = item.promotions.reducedPrice*prosDiscountNum
  863. item.totalOriginalPrice = totalOriginalPrice
  864. } else {
  865. item.reducedPrice = 0 //统计合计价格
  866. item.totalPrice = prosPrice
  867. }
  868. }else{
  869. console.log('店铺满减促销非叠加通道')
  870. if (prosPrice >= item.promotions.touchPrice) {// 满足店铺满减条件下执行
  871. item.totalPrice = prosPrice - item.promotions.reducedPrice
  872. item.reducedPrice = item.promotions.reducedPrice
  873. item.totalOriginalPrice = totalOriginalPrice
  874. } else {
  875. item.reducedPrice = 0 //统计合计价格
  876. item.totalPrice = prosPrice
  877. }
  878. }
  879. } else {
  880. //以下为计算除店铺满减以外的单品满减以及正常商品合计
  881. let _totalPrice = 0
  882. let _reducedPrice = 0
  883. let discountNum = 0
  884. let _totalOriginalPrice = 0
  885. item.cartList.forEach(pros => {
  886. let _price = pros.price * pros.number
  887. _totalOriginalPrice += _price
  888. if (pros.promotions && pros.promotions.type != 2 && pros.promotions.mode == 2) {
  889. if(pros.promotions.discount == 1){
  890. discountNum = parseInt(_price/pros.promotions.touchPrice)
  891. console.log('单品满减促销叠加通道叠加次数',`${discountNum}次`)
  892. if (_price >= pros.promotions.touchPrice) {
  893. _price = _price - pros.promotions.reducedPrice*discountNum
  894. _reducedPrice += pros.promotions.reducedPrice*discountNum
  895. }
  896. _totalPrice += _price
  897. }else{
  898. console.log('单品满减非促销叠加通道')
  899. if (_price >= pros.promotions.touchPrice) {
  900. _price = _price - pros.promotions.reducedPrice
  901. _reducedPrice += pros.promotions.reducedPrice
  902. }
  903. _totalPrice += _price
  904. }
  905. } else {
  906. _reducedPrice = 0
  907. _totalPrice += pros.price * pros.number
  908. }
  909. })
  910. item.reducedPrice = _reducedPrice
  911. item.totalOriginalPrice = _totalOriginalPrice
  912. item.totalPrice = _totalPrice
  913. }
  914. })
  915. },
  916. totalPeice() {
  917. //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
  918. let totalPrice = 0
  919. let reducedPrice = 0
  920. let originalPrice = 0
  921. let svipReducedPrice = 0
  922. let totalAmount = 0
  923. this.goodsList.forEach((item, index) => {
  924. let supplierPrice = 0
  925. let supplierReducedPrice = 0
  926. item.totalprice = 0
  927. item.reducedprice = 0
  928. item.originalprice = 0
  929. item.cartList.forEach(pros => {
  930. if (pros.isChecked) {
  931. supplierPrice += pros.price * pros.number
  932. svipReducedPrice += item.svipReducedPrice
  933. if( pros.svipProductFlag == 1 ){
  934. totalAmount += item.originalPrice
  935. }else{
  936. item.totalprice = supplierPrice
  937. totalAmount += item.totalprice
  938. }
  939. // 单品满减
  940. if (pros.promotions && pros.promotions.type * 1 === 1 && pros.promotions.mode * 1 === 2) {
  941. let _price = pros.price * pros.number
  942. if(pros.promotions.discount == 1){
  943. let discountNum = parseInt(_price/pros.promotions.touchPrice)
  944. console.log('单品满减促销叠加通道叠加次数',`${discountNum}次`)
  945. // 单品满减-重新计算供应商总价/满减金额
  946. if ( _price >= pros.promotions.touchPrice) {
  947. supplierPrice -= pros.promotions.reducedPrice*discountNum
  948. supplierReducedPrice += pros.promotions.reducedPrice*discountNum
  949. }
  950. }else{
  951. console.log(' 单品满减非促销叠加通道')
  952. // 单品满减-重新计算供应商总价/满减金额
  953. if ( _price >= pros.promotions.touchPrice) {
  954. supplierPrice -= pros.promotions.reducedPrice
  955. supplierReducedPrice += pros.promotions.reducedPrice
  956. }
  957. }
  958. }
  959. }
  960. })
  961. // 店铺满减
  962. if (item.promotions && item.promotions.mode * 1 === 2) {
  963. if(item.promotions.discount == 1){// 支持促销叠加条件的店铺满减 执行
  964. let prosDiscountNum = parseInt(supplierPrice/item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
  965. console.log('店铺满减促销叠加通道叠加次数',`${prosDiscountNum}次`)
  966. if (supplierPrice >= item.promotions.touchPrice) {
  967. supplierPrice -= item.promotions.reducedPrice*prosDiscountNum
  968. supplierReducedPrice += item.promotions.reducedPrice*prosDiscountNum
  969. }
  970. }else{
  971. console.log('店铺满减非促销叠加通道')
  972. // 店铺满减-计算供应商总价/满减金额
  973. if (supplierPrice >= item.promotions.touchPrice) {
  974. supplierPrice -= item.promotions.reducedPrice
  975. supplierReducedPrice += item.promotions.reducedPrice
  976. }
  977. }
  978. }
  979. item.totalprice = supplierPrice
  980. item.reducedprice = supplierReducedPrice
  981. item.originalprice = supplierPrice + supplierReducedPrice
  982. totalPrice += item.totalprice
  983. reducedPrice += item.reducedprice
  984. originalPrice += item.originalprice
  985. this.totalAmount = totalAmount
  986. })
  987. // 总促销计算
  988. this.promotionsList.forEach(promotions => {
  989. // 凑单满减
  990. if (promotions.mode === 2 && promotions.type === 2) {
  991. let collecTotal = 0
  992. let collecDiscountNum = 0
  993. promotions.productList.forEach(pros => {
  994. collecTotal += this.collecTotalPrice(pros)
  995. })
  996. if(promotions.discount == 1){// 支持凑单满减促销叠加条件的执行
  997. collecDiscountNum += parseInt(collecTotal/promotions.touchPrice) // 凑单满减促销叠加次数 = 凑单商品合计价格/凑单满减促销价格
  998. console.log('凑单促销满减叠加通道叠加次数',`${collecDiscountNum}次`)
  999. if (collecTotal >= promotions.touchPrice) {
  1000. totalPrice -= promotions.reducedPrice*collecDiscountNum
  1001. reducedPrice += promotions.reducedPrice*collecDiscountNum
  1002. }
  1003. }else{
  1004. console.log('凑单促销满减非叠加通道')
  1005. if (collecTotal >= promotions.touchPrice) {
  1006. totalPrice -= promotions.reducedPrice
  1007. reducedPrice += promotions.reducedPrice
  1008. }
  1009. }
  1010. }
  1011. })
  1012. // 最后勾选的超级会员优惠价
  1013. this.svipReducedPrice = svipReducedPrice
  1014. // 最后统计商品原价
  1015. this.totalOriginalPrice = originalPrice
  1016. // 最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
  1017. this.reducedPrice = reducedPrice
  1018. // 最终合计价格 = 店铺满减合计 + 单品满减 + 正常合计 + 凑单满减
  1019. this.allPrice = totalPrice
  1020. console.log('最后统计商品原价', `${this.totalOriginalPrice}元`)
  1021. console.log('最后满减金额', `${this.reducedPrice}元`)
  1022. console.log('最终合计价格', `${this.allPrice}元`)
  1023. // 计算优惠券
  1024. if (this.totalCouponList.length > 0) {
  1025. let eligibleCoupons = this.calculationCoupon()
  1026. if (eligibleCoupons.length > 0) {
  1027. this.eligibleCoupons.splice(0, this.eligibleCoupons.length)
  1028. this.eligibleCoupons = eligibleCoupons.sort((a, b) => b.couponAmount - a.couponAmount)
  1029. this.couponPrice = this.eligibleCoupons[0].couponAmount
  1030. } else {
  1031. this.couponPrice = 0
  1032. }
  1033. }
  1034. // 最终优惠金额 = 促销优惠金额 + 优惠券优惠金额 + 超级会员优惠金额
  1035. this.totalDiscountAmount = this.reducedPrice + this.couponPrice + this.svipReducedPrice
  1036. console.log('最终优惠金额', `${this.totalDiscountAmount}元`)
  1037. // 控制显示优惠明细
  1038. this.isDiscount = this.totalDiscountAmount > 0 ? true : false
  1039. },
  1040. collecTotalPrice(pros){// 凑单满减计算勾选的凑单商品总价
  1041. let price
  1042. this.checkenProsList.find(el => {
  1043. if(pros.productId == el.productId ){
  1044. price = el.number * el.price
  1045. }
  1046. })
  1047. return price
  1048. },
  1049. totalCount() {
  1050. //计算总数量
  1051. this.allCount = 0
  1052. let prosAllCount = 0
  1053. let validCount = 0
  1054. let validList = []
  1055. let productsList = []
  1056. this.goodsList.forEach(item => {
  1057. productsList = item.cartList
  1058. productsList.forEach(pros => {
  1059. if (pros.isChecked) {
  1060. prosAllCount += parseInt(pros.number)
  1061. this.allCount = prosAllCount
  1062. }
  1063. })
  1064. })
  1065. },
  1066. calculationCoupon() {
  1067. // 优惠券计算
  1068. let eligibleCoupons = []
  1069. this.goodsList.forEach(shop => {
  1070. shop.cartList.forEach(pros => {
  1071. if (pros.isChecked) {
  1072. this.totalCouponList.forEach(coupon => {
  1073. //循环优惠券
  1074. switch (coupon.couponType) {
  1075. case 0: // 活动券
  1076. if (coupon.productType == 1) {
  1077. // 活动券-全商城商品
  1078. if (this.allPrice >= coupon.touchPrice) {
  1079. eligibleCoupons.push(coupon)
  1080. }
  1081. } else if (coupon.productType == 2) {
  1082. // 活动券-指定商品
  1083. if (coupon.productIds && coupon.productIds.includes(pros.productId)) {
  1084. if (this.allPrice >= coupon.touchPrice) {
  1085. eligibleCoupons.push(coupon)
  1086. }
  1087. }
  1088. }
  1089. break
  1090. case 1: // 品类券适用于产品或者仪器 categoryType(commodityType) : 1 产品 2 仪器
  1091. if (coupon.categoryType && coupon.categoryType == pros.commodityType) {
  1092. if (this.allPrice >= coupon.touchPrice) {
  1093. eligibleCoupons.push(coupon)
  1094. }
  1095. }
  1096. break
  1097. case 2: // 用户专享券 适用于商城全部商品
  1098. if (this.allPrice >= coupon.touchPrice) {
  1099. eligibleCoupons.push(coupon)
  1100. }
  1101. break
  1102. case 3: // 店铺券适用于某个供应商的全部商品
  1103. if (coupon.shopId && pros.supplierId == coupon.shopId) {
  1104. if (this.allPrice >= coupon.touchPrice) {
  1105. eligibleCoupons.push(coupon)
  1106. }
  1107. }
  1108. break
  1109. case 4: //新用户券 适用于商城全部商品
  1110. if (this.allPrice >= coupon.touchPrice) {
  1111. eligibleCoupons.push(coupon)
  1112. }
  1113. break
  1114. }
  1115. })
  1116. } else {
  1117. console.log('没有选择商品')
  1118. return
  1119. }
  1120. })
  1121. })
  1122. return eligibleCoupons
  1123. },
  1124. changeCountAdd(item, pros) {
  1125. //商品数量加加
  1126. if (pros.step === 2) {
  1127. pros.isStep = false
  1128. pros.number += pros.min
  1129. this.processActivityPrice(pros)
  1130. this.isStock = false
  1131. } else {
  1132. pros.number++
  1133. this.processActivityPrice(pros)
  1134. this.isStock = false
  1135. }
  1136. this.updateShoppogNum(pros)
  1137. this.totalShopPeice()
  1138. },
  1139. changeCountSub(item, pros) {
  1140. //商品数量减减
  1141. if (pros.number <= pros.min) {
  1142. pros.number = pros.min
  1143. this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
  1144. return
  1145. } else {
  1146. if (pros.step === 2) {
  1147. pros.isStep = false
  1148. pros.number -= pros.min
  1149. } else {
  1150. pros.number--
  1151. }
  1152. this.processActivityPrice(pros)
  1153. }
  1154. this.updateShoppogNum(pros)
  1155. this.totalShopPeice()
  1156. },
  1157. changeInput(pros) {
  1158. //输入商品数量更新
  1159. pros.isStep = false
  1160. },
  1161. changeNnmber(e, item, pros) {
  1162. //输入商品数量更新
  1163. let _value = Number(e.detail.value)
  1164. if (!this.$api.isNumber(_value)) {
  1165. pros.number = pros.min
  1166. } else if (_value < pros.min) {
  1167. this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
  1168. pros.number = pros.min
  1169. } else if (_value % pros.min != 0) {
  1170. pros.isStep = true
  1171. pros.number = pros.min
  1172. } else {
  1173. pros.isStep = false
  1174. pros.number = e.detail.value
  1175. this.processActivityPrice(pros)
  1176. }
  1177. this.updateShoppogNum(pros)
  1178. this.totalShopPeice()
  1179. },
  1180. processActivityPrice(pros) {
  1181. //单独处理活动价格和阶梯价格
  1182. let ladderPriceList = pros.ladderPrices
  1183. if (pros.ladderFlag == 0 || pros.actStatus == 1) {
  1184. pros.price = pros.price
  1185. } else {
  1186. ladderPriceList.forEach((item, index) => {
  1187. if (pros.number >= item.buyNum) {
  1188. pros.price = item.buyPrice
  1189. }
  1190. })
  1191. }
  1192. },
  1193. updateShoppogNum(pros) {
  1194. //加减购物车商品更新到后台
  1195. this.ProductService.ShoppingCartUpdate({
  1196. userId: this.userId,
  1197. productId: pros.productId,
  1198. productCount: pros.number,
  1199. source: 2
  1200. })
  1201. .then(response => {
  1202. this.isshowDelbtn = false
  1203. // this.initGetCartGoodsList()
  1204. })
  1205. .catch(error => {
  1206. this.$util.msg(error.msg, 2000)
  1207. })
  1208. },
  1209. toConfirmation() {
  1210. //跳转确认订单页面
  1211. let setGoodsList = []
  1212. this.goodsList.forEach(res => {
  1213. let products = res.cartList
  1214. products.forEach(pros => {
  1215. if (pros.isChecked) {
  1216. setGoodsList.push(pros.productId)
  1217. }
  1218. })
  1219. })
  1220. if (setGoodsList == '') {
  1221. this.$util.msg('请先选择结算商品~', 2000)
  1222. return
  1223. } else {
  1224. this.isNoConfim = false
  1225. this.goodsList.forEach(el => {
  1226. el.cartList.forEach(pros => {
  1227. if (pros.isChecked) {
  1228. if (pros.number < pros.min) {
  1229. this.isNoConfim = true
  1230. }
  1231. }
  1232. })
  1233. })
  1234. if (this.isNoConfim) {
  1235. this.$util.modal(
  1236. '',
  1237. '有商品的购买量没达到最小起订量,请修改数量后再次提交结算',
  1238. '去修改',
  1239. '',
  1240. false,
  1241. () => {}
  1242. )
  1243. return
  1244. }
  1245. let productIds = ''
  1246. this.goodsList.forEach(el => {
  1247. //获取勾选的商品ID拼接字符串逗号隔开,最后一个逗号去掉
  1248. el.cartList.forEach(pros => {
  1249. if (pros.isChecked) {
  1250. productIds += pros.productId + ','
  1251. }
  1252. })
  1253. })
  1254. let cartPramsData = { productIds: productIds.substring(0, productIds.lastIndexOf(',')) }
  1255. // 友盟埋点购物车去结算点击事件
  1256. if (process.env.NODE_ENV != 'development') {
  1257. this.$uma.trackEvent('Um_Event_shoppingCartConfirmOrder', {
  1258. Um_Key_PageName: '去结算',
  1259. Um_Key_SourcePage: '底部菜单购物车'
  1260. })
  1261. }
  1262. this.$api.navigateTo(`/pages/user/order/create-order?type=2&data=${JSON.stringify({ data: cartPramsData })}`)
  1263. }
  1264. },
  1265. showDelManager() {
  1266. //显示删除商品管理
  1267. this.isshowDelbtn = true
  1268. if (this.isCheckAll) {
  1269. this.updateBothCheckBtn()
  1270. } else {
  1271. this.goodsList.forEach(item => {
  1272. if (item.isChecked) {
  1273. item.cartList.forEach(pros => {
  1274. pros.isChecked = true
  1275. })
  1276. }
  1277. })
  1278. this.updateCheckAllBtn()
  1279. }
  1280. // 失效也被勾选
  1281. this.failureList.forEach(failureItem => {
  1282. if (failureItem.isFailureLayer) {
  1283. failureItem.isFailureLayer = false
  1284. }
  1285. })
  1286. },
  1287. hideDelManage() {
  1288. //隐藏删除商品管理
  1289. this.isshowDelbtn = false
  1290. let isFailureLayer,
  1291. newFailureList = []
  1292. if (this.isCheckAll) {
  1293. this.updateBothCheckBtn()
  1294. } else {
  1295. // 失效商品取消勾选
  1296. this.goodsList.forEach(item => {
  1297. if (item.isDisabled) {
  1298. item.isChecked = false
  1299. }
  1300. item.cartList.forEach(pros => {
  1301. if (pros.validFlag == 3) {
  1302. pros.isChecked = false
  1303. }
  1304. })
  1305. })
  1306. this.updateCheckAllBtn()
  1307. }
  1308. this.failureList.forEach((failure, index) => {
  1309. if (failure.failureState == 1 || failure.failureState == 2) {
  1310. isFailureLayer = true
  1311. } else {
  1312. isFailureLayer = false
  1313. }
  1314. newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
  1315. })
  1316. this.failureList = newFailureList
  1317. },
  1318. deleteList() {
  1319. //删除购物车商品
  1320. this.delGoodsList = []
  1321. this.goodsList.forEach(delitem => {
  1322. let products = delitem.cartList
  1323. products.forEach(pros => {
  1324. if (pros.isChecked) {
  1325. this.delGoodsList += pros.productId + ','
  1326. }
  1327. })
  1328. })
  1329. this.failureList.forEach(failure => {
  1330. if (failure.isChecked) {
  1331. this.delGoodsList += failure.productId + ','
  1332. }
  1333. })
  1334. if (this.delGoodsList.length == 0) {
  1335. this.$util.msg('请选择要删除的商品~', 2000)
  1336. return
  1337. } else {
  1338. this.$util.modal('', '确定删除选中的商品吗?', '确定', '取消', true, () => {
  1339. this.ProductService.ShoppingCartDelete({
  1340. userId: this.userId,
  1341. productIds: this.delGoodsList
  1342. })
  1343. .then(response => {
  1344. this.$util.msg('删除成功', 2000)
  1345. setTimeout(() => {
  1346. this.isshowDelbtn = false
  1347. this.initGetCartGoodsList()
  1348. }, 2000)
  1349. })
  1350. .catch(error => {
  1351. this.$util.msg(error.msg, 2000)
  1352. })
  1353. })
  1354. }
  1355. },
  1356. deletefailureList() {
  1357. this.failureList.forEach(failure => {
  1358. this.delGoodsList += failure.productId + ','
  1359. })
  1360. this.$util.modal('', '确定清空全部失效商品吗?', '确定', '取消', true, () => {
  1361. this.ProductService.ShoppingCartDelete({
  1362. userId: this.userId,
  1363. productIds: this.delGoodsList
  1364. })
  1365. .then(response => {
  1366. this.$util.msg('删除成功', 2000)
  1367. setTimeout(() => {
  1368. this.isshowDelbtn = false
  1369. this.initGetCartGoodsList()
  1370. }, 2000)
  1371. })
  1372. .catch(error => {
  1373. this.$util.msg(error.msg, 2000)
  1374. })
  1375. })
  1376. },
  1377. goIndex() {
  1378. uni.switchTab({
  1379. url: '/pages/tabBar/home/index'
  1380. })
  1381. },
  1382. goSuppile(shop) {//跳转店铺
  1383. if(shop.shopType === 2){
  1384. return
  1385. }
  1386. this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${shop.shopId}`)
  1387. },
  1388. goNavto(url) {
  1389. uni.navigateTo({
  1390. url
  1391. })
  1392. },
  1393. navToListPage(id) {
  1394. this.isModallayer = true
  1395. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  1396. },
  1397. failureToProduct(failure) {
  1398. if (failure.status == 1) {
  1399. this.$util.msg('商品已丢失,不能查看', 2000)
  1400. return
  1401. } else if (failure.status == 2) {
  1402. this.$util.msg('商品已停售,不能查看', 2000)
  1403. return
  1404. } else {
  1405. this.isModallayer = true
  1406. this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
  1407. }
  1408. },
  1409. failureStateText(state) {
  1410. let stateText = '',
  1411. stateTextObject = {
  1412. 1: '商品已丢失',
  1413. 2: '商品已停售',
  1414. 3: '商品已下架',
  1415. 4: '商品已售罄',
  1416. 5: '价格仅会员可见,您不能购买',
  1417. 6: '未公开价格',
  1418. 7: '库存不足',
  1419. 8: '价格仅医美机构可见'
  1420. }
  1421. Object.keys(stateTextObject).forEach(key => {
  1422. if (key == state) {
  1423. stateText = stateTextObject[key]
  1424. }
  1425. })
  1426. return stateText
  1427. },
  1428. setHeaderBtnPosi() {
  1429. // 获得胶囊按钮位置信息
  1430. let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
  1431. return headerBtnPosi
  1432. },
  1433. setSysteminfo() {
  1434. let systeminfo
  1435. uni.getSystemInfo({
  1436. // 获取设备信息
  1437. success: res => {
  1438. systeminfo = res
  1439. }
  1440. })
  1441. return systeminfo
  1442. },
  1443. PromotionsFormat(promo) {
  1444. //促销活动类型数据处理
  1445. if (promo != null) {
  1446. if (promo.type == 1 && promo.mode == 1) {
  1447. return true
  1448. } else {
  1449. return false
  1450. }
  1451. }
  1452. return false
  1453. },
  1454. queryPopupCoupons() {
  1455. // 获取弹窗优惠券列表
  1456. this.ProductService.ShoppingCartGetCoupon(this.couponParam)
  1457. .then(response => {
  1458. let data = response.data
  1459. this.navbar[0].num = data.notCouponNum
  1460. this.navbar[1].num = data.couponNum
  1461. if (data.couponList && data.couponList.length > 0) {
  1462. this.productCouponList = data.couponList
  1463. this.isCouponEmpty = false
  1464. } else {
  1465. this.isCouponEmpty = true
  1466. }
  1467. })
  1468. .catch(error => {
  1469. console.log('获取优惠券列表失败')
  1470. })
  1471. },
  1472. receiveCoupon(coupon) {
  1473. // 点击优惠券领取按钮,友盟埋点收集领取优惠券
  1474. if (process.env.NODE_ENV != 'development') {
  1475. this.$uma.trackEvent('Um_Event_cartCouponReceive', {
  1476. Um_Key_PageName: '机构购物车',
  1477. Um_Key_EvenName: '领取优惠券',
  1478. Um_Key_CouponId: `${coupon.couponId}`,
  1479. })
  1480. }
  1481. this.ProductService.ReceiveCoupon({
  1482. userId: this.couponParam.userId,
  1483. couponId: coupon.couponId,
  1484. source: 1
  1485. })
  1486. .then(response => {
  1487. this.$util.msg('领取成功', 1500, true, 'success')
  1488. setTimeout(() => {
  1489. this.currentTab = 1
  1490. this.couponParam.status = 2
  1491. this.queryPopupCoupons()
  1492. }, 1500)
  1493. })
  1494. .catch(error => {
  1495. this.$util.msg(error.msg, 2000)
  1496. })
  1497. },
  1498. toDeductCoupon(coupon) {
  1499. // 点击采美豆抵扣优惠券
  1500. if (process.env.NODE_ENV != 'development') {
  1501. this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
  1502. Um_Key_PageName: '领券中心',
  1503. Um_Key_EvenName: '抵扣优惠券',
  1504. Um_Key_CouponId: `${coupon.couponId}`,
  1505. })
  1506. }
  1507. if (this.hasLogin) {
  1508. if (this.userIdentity === 1 || this.userIdentity === 3) {
  1509. this.$util.msg('您的身份暂不支持领取优惠券', 2000)
  1510. return
  1511. }
  1512. this.WeChatPayCouponBeans(coupon)
  1513. } else {
  1514. this.$api.navigateTo('/pages/login/login')
  1515. }
  1516. },
  1517. WeChatPayCouponBeans(coupon){
  1518. // 采美豆抵扣优惠券
  1519. this.PayService.WeChatPayCouponBeans({
  1520. source: 1, //领取渠道 1 小程序 2 网站
  1521. userId: this.couponParam.userId,
  1522. couponId: coupon.couponId
  1523. })
  1524. .then(response => {
  1525. this.$util.msg('抵扣成功', 1500)
  1526. setTimeout(() => {
  1527. this.currentTab = 1
  1528. this.couponParam.status = 2
  1529. this.queryPopupCoupons()
  1530. }, 1500)
  1531. })
  1532. .catch(error => {
  1533. this.$util.msg(error.msg, 2000)
  1534. })
  1535. },
  1536. toPayCoupon(coupon){
  1537. // 点击购买优惠券,友盟埋点收集购买优惠券
  1538. if (process.env.NODE_ENV != 'development') {
  1539. this.$uma.trackEvent('Um_Event_cartCouponBuy', {
  1540. Um_Key_PageName: '机构购物车',
  1541. Um_Key_EvenName: '购买优惠券',
  1542. Um_Key_CouponId: `${coupon.couponId}`,
  1543. })
  1544. }
  1545. this.createCouponRecord(coupon)
  1546. },
  1547. createCouponRecord(coupon){
  1548. // 生成购买优惠券记录Id
  1549. this.PayService.WeChatCouponRecord({
  1550. userId: this.userId,
  1551. couponId: coupon.couponId
  1552. })
  1553. .then(response => {
  1554. this.MiniWxPayFor(coupon,response.data.couponRecordId)
  1555. })
  1556. .catch(error => {
  1557. if(error.code == -1){//个人机构不能购买
  1558. this.contentModalText ='该优惠券仅限医美机构购买,请升级为医美机构后再次购买。'
  1559. this.modal = true
  1560. }else if(error.code == -2){//会员机构不是医美机构不能购买
  1561. this.$util.msg('该优惠券仅限医美机构购买', 2000)
  1562. }
  1563. })
  1564. },
  1565. async MiniWxPayFor(coupon,couponRecordId){
  1566. const wechatcode = await authorize.getCode('weixin')
  1567. const params = {
  1568. userId: this.userId,
  1569. couponId: coupon.couponId,
  1570. couponRecordId:couponRecordId,
  1571. payType:'XCX',
  1572. code: wechatcode,
  1573. source: 1 //支付来源 1 小程序 2 WWW
  1574. }
  1575. this.weChatMiniCouponWxPay(params,'Um_Event_cartCouponPay','机构购物车','线上支付优惠券',coupon.couponId,this.userId)
  1576. },
  1577. hideMobel(){
  1578. this.modal = false
  1579. },
  1580. handleClick(e){
  1581. //个人机构跳转升级页面
  1582. if (e.index == 1) {
  1583. this.$api.navigateTo('/pages/login/apply')
  1584. }
  1585. this.modal = false
  1586. },
  1587. showPopup(index, shop) {
  1588. // 显示popup弹窗
  1589. switch (index) {
  1590. case 0:
  1591. // 友盟埋点收集领券按钮
  1592. if (process.env.NODE_ENV != 'development') {
  1593. this.$uma.trackEvent('Um_Event_cartCouponButton', {
  1594. Um_Key_PageName: '机构购物车',
  1595. Um_Key_EvenName: '点击领券按钮',
  1596. Um_Key_userId: `${this.userId}`,
  1597. })
  1598. }
  1599. this.currentTab = 0
  1600. this.couponParam.status = 1
  1601. this.couponParam.shopId = shop.shopId
  1602. this.queryPopupCoupons()
  1603. this.popupShow0 = true
  1604. break
  1605. case 1:
  1606. this.popupShow1 = true
  1607. break
  1608. }
  1609. },
  1610. hidePopup(index) {
  1611. // 隐藏popup弹窗
  1612. switch (index) {
  1613. case 0:
  1614. this.popupShow0 = false
  1615. break
  1616. case 1:
  1617. this.popupShow1 = false
  1618. break
  1619. }
  1620. },
  1621. couponChange(e) {
  1622. this.currentTab = e.index
  1623. switch (this.currentTab) {
  1624. case 0:
  1625. this.couponParam.status = 1
  1626. this.queryPopupCoupons()
  1627. break
  1628. case 1:
  1629. this.couponParam.status = 2
  1630. this.queryPopupCoupons()
  1631. break
  1632. }
  1633. }
  1634. }
  1635. }
  1636. </script>
  1637. <style lang="scss">
  1638. page {
  1639. background: #f7f7f7;
  1640. height: auto;
  1641. }
  1642. .cart-content {
  1643. position: relative;
  1644. }
  1645. .container-cart-main.none {
  1646. display: none;
  1647. }
  1648. .container-cart-main.show {
  1649. display: block;
  1650. }
  1651. .cart-content.empty.none {
  1652. display: none;
  1653. }
  1654. .cart-content.empty.show {
  1655. display: block;
  1656. }
  1657. .container-cart.show {
  1658. display: block;
  1659. }
  1660. .container-cart.none {
  1661. display: none;
  1662. }
  1663. .empty-container.none {
  1664. display: none;
  1665. }
  1666. .empty-container.show {
  1667. display: flex;
  1668. }
  1669. .foot-check-delbtn {
  1670. width: 100%;
  1671. height: 80rpx;
  1672. position: fixed;
  1673. top: 0;
  1674. left: 0;
  1675. box-sizing: border-box;
  1676. padding: 15rpx 24rpx;
  1677. background-color: #f7f7f7;
  1678. z-index: 990;
  1679. .foot-text {
  1680. font-size: $font-size-26;
  1681. height: 50rpx;
  1682. line-height: 50rpx;
  1683. color: #666666;
  1684. float: left;
  1685. padding-left: 10rpx;
  1686. text {
  1687. margin: 0 6rpx;
  1688. }
  1689. }
  1690. .delBtn {
  1691. width: 100rpx;
  1692. display: inline-block;
  1693. padding: 0 15rpx;
  1694. font-size: $font-size-26;
  1695. height: 50rpx;
  1696. line-height: 50rpx;
  1697. border-radius: 30rpx;
  1698. background: #ffffff;
  1699. border: 1px solid #e15616;
  1700. color: #e15616;
  1701. float: right;
  1702. text-align: center;
  1703. &.none {
  1704. display: none;
  1705. }
  1706. }
  1707. }
  1708. .checkbox-box {
  1709. display: flex;
  1710. align-items: center;
  1711. .checkbox {
  1712. display: flex;
  1713. margin: 0;
  1714. padding: 5rpx;
  1715. display: flex;
  1716. flex-direction: column;
  1717. align-items: center;
  1718. box-sizing: border-box;
  1719. text-align: center;
  1720. text-decoration: none;
  1721. border-radius: 0;
  1722. -webkit-tap-highlight-color: transparent;
  1723. overflow: hidden;
  1724. background-color: #ffffff;
  1725. font-size: 36rpx;
  1726. color: #999999;
  1727. &.icon-yixuanze {
  1728. color: $color-system;
  1729. }
  1730. }
  1731. &.disabled {
  1732. .checkbox {
  1733. color: #999999;
  1734. }
  1735. }
  1736. .text {
  1737. font-size: $font-size-24;
  1738. margin-left: 10rpx;
  1739. }
  1740. }
  1741. .goods-list {
  1742. width: 100%;
  1743. height: auto;
  1744. background-color: #f7f7f7;
  1745. .goods-item {
  1746. width: 702rpx;
  1747. padding: 0 24rpx;
  1748. background: #ffffff;
  1749. margin-bottom: 24rpx;
  1750. }
  1751. .shoptitle {
  1752. height: 80rpx;
  1753. line-height: 80rpx;
  1754. .checkbox-box {
  1755. float: left;
  1756. line-height: 80rpx;
  1757. display: inline-block;
  1758. box-sizing: border-box;
  1759. }
  1760. .text {
  1761. width: 400rpx;
  1762. float: left;
  1763. display: block;
  1764. overflow: hidden;
  1765. text-overflow: ellipsis;
  1766. white-space: nowrap;
  1767. line-height: 80rpx;
  1768. margin-left: 20rpx;
  1769. font-size: $font-size-28;
  1770. color: $text-color;
  1771. text-align: left;
  1772. font-weight: bold;
  1773. }
  1774. .text-coupon {
  1775. float: right;
  1776. line-height: 80rpx;
  1777. font-size: $font-size-30;
  1778. color: #e15616;
  1779. }
  1780. .floor-item-act {
  1781. width: 120rpx;
  1782. height: 80rpx;
  1783. text-align: center;
  1784. box-sizing: border-box;
  1785. float: left;
  1786. padding: 24rpx 0;
  1787. margin-left: 20rpx;
  1788. }
  1789. }
  1790. .goods-pros {
  1791. width: 100%;
  1792. height: auto;
  1793. margin-bottom: 20rpx;
  1794. }
  1795. .goods-pros-t {
  1796. display: flex;
  1797. align-items: center;
  1798. width: 100%;
  1799. height: 210rpx;
  1800. padding: 0 0 26rpx 0;
  1801. .checkbox-box {
  1802. // padding: 10rpx;
  1803. }
  1804. .pros-img {
  1805. width: 210rpx;
  1806. height: 100%;
  1807. border-radius: 10rpx;
  1808. margin: 0 20rpx;
  1809. border: 1px solid #f3f3f3;
  1810. position: relative;
  1811. image {
  1812. width: 100%;
  1813. height: 100%;
  1814. border-radius: 10rpx;
  1815. }
  1816. .pros-type{
  1817. width: 64rpx;
  1818. height: 64rpx;
  1819. text-align: justify;
  1820. box-sizing: border-box;
  1821. padding: 10rpx;
  1822. border-radius: 0 0 8rpx 8rpx;
  1823. background-color: #33CCBF;
  1824. font-size: $font-size-22;
  1825. color: #FFFFFF;
  1826. line-height: 25rpx;
  1827. position: absolute;
  1828. top: 0;
  1829. right: 10rpx;
  1830. }
  1831. }
  1832. }
  1833. .goods-pros-b {
  1834. width: 100%;
  1835. height: auto;
  1836. padding: 0 0 24rpx 0;
  1837. box-sizing: border-box;
  1838. &.show {
  1839. display: block;
  1840. }
  1841. &.none {
  1842. display: none;
  1843. }
  1844. .sum-none {
  1845. width: 100%;
  1846. height: 48rpx;
  1847. line-height: 48rpx;
  1848. color: $text-color;
  1849. float: left;
  1850. text-align: right;
  1851. .money {
  1852. font-size: $font-size-26;
  1853. color: #999999;
  1854. text-decoration: line-through;
  1855. }
  1856. .money-sign {
  1857. font-size: $font-size-26;
  1858. color: #999999;
  1859. text-decoration: line-through;
  1860. }
  1861. .money-reduced {
  1862. margin-left: 10rpx;
  1863. font-size: $font-size-26;
  1864. color: $color-system;
  1865. .iconfont {
  1866. font-size: $font-size-34;
  1867. }
  1868. }
  1869. }
  1870. .sum {
  1871. width: 100%;
  1872. height: 40rpx;
  1873. font-size: $font-size-26;
  1874. line-height: 40rpx;
  1875. color: $text-color;
  1876. float: left;
  1877. display: flex;
  1878. justify-content: flex-end;
  1879. font-weight: bold;
  1880. .money {
  1881. color: #ff2a2a;
  1882. font-size: $font-size-26;
  1883. }
  1884. .money-sign {
  1885. font-size: $font-size-24;
  1886. color: #ff2a2a;
  1887. }
  1888. }
  1889. }
  1890. .pros-product {
  1891. width: 416rpx;
  1892. height: 100%;
  1893. line-height: 36rpx;
  1894. font-size: $font-size-28;
  1895. position: relative;
  1896. .producttitle {
  1897. width: 100%;
  1898. display: inline-block;
  1899. height: auto;
  1900. text-overflow: ellipsis;
  1901. display: -webkit-box;
  1902. word-break: break-all;
  1903. -webkit-box-orient: vertical;
  1904. -webkit-line-clamp: 2;
  1905. overflow: hidden;
  1906. margin-bottom: 15rpx;
  1907. .no-text {
  1908. display: inline-block;
  1909. height: 36rpx;
  1910. padding: 0 12rpx;
  1911. line-height: 36rpx;
  1912. background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
  1913. border-radius: 18rpx;
  1914. text-align: center;
  1915. color: #ffffff;
  1916. font-size: $font-size-28;
  1917. margin-right: 24rpx;
  1918. }
  1919. }
  1920. .productspec {
  1921. height: 36rpx;
  1922. color: #999999;
  1923. font-size: $font-size-26;
  1924. }
  1925. .productprice {
  1926. width: 100%;
  1927. height: 48rpx;
  1928. margin: 30rpx 0 0 0;
  1929. .price {
  1930. line-height: 48rpx;
  1931. font-size: $font-size-26;
  1932. width: 48%;
  1933. color: #ff2a2a;
  1934. float: left;
  1935. font-weight: bold;
  1936. &.disabled {
  1937. color: #999999;
  1938. text-decoration: line-through;
  1939. }
  1940. .money-sign {
  1941. font-size: $font-size-24;
  1942. color: #ff2a2a;
  1943. }
  1944. }
  1945. .count {
  1946. height: 100%;
  1947. float: right;
  1948. position: relative;
  1949. &.show {
  1950. display: block;
  1951. }
  1952. &.none {
  1953. display: none;
  1954. }
  1955. .count-tips {
  1956. width: auto;
  1957. display: inline-block;
  1958. padding: 0 15rpx;
  1959. line-height: 44rpx;
  1960. height: 44rpx;
  1961. border-radius: 22rpx;
  1962. background: $btn-confirm;
  1963. font-size: $font-size-24;
  1964. text-align: center;
  1965. color: #ffffff;
  1966. position: absolute;
  1967. top: -60rpx;
  1968. left: -5rpx;
  1969. z-index: 5;
  1970. &.step {
  1971. left: -217rpx;
  1972. }
  1973. &::before {
  1974. content: '';
  1975. position: absolute;
  1976. bottom: -30rpx;
  1977. right: 15rpx;
  1978. z-index: 1;
  1979. width: 0;
  1980. height: 0;
  1981. border-width: 18rpx;
  1982. border-style: solid;
  1983. border-color: $color-system transparent transparent transparent;
  1984. }
  1985. }
  1986. .number-box {
  1987. display: flex;
  1988. justify-content: center;
  1989. align-items: center;
  1990. border: 2rpx solid #ffe6dc;
  1991. border-radius: 30rpx;
  1992. .iconfont {
  1993. font-size: $font-size-24;
  1994. padding: 0 18rpx;
  1995. color: #999999;
  1996. text-align: center;
  1997. line-height: 48rpx;
  1998. font-weight: bold;
  1999. background: #fef6f3;
  2000. &.icon-jianhao {
  2001. border-radius: 30rpx 0 0 30rpx;
  2002. }
  2003. &.icon-jiahao {
  2004. border-radius: 0 30rpx 30rpx 0;
  2005. }
  2006. }
  2007. .btn-input {
  2008. width: 62rpx;
  2009. height: 48rpx;
  2010. line-height: 48rpx;
  2011. background: #fff;
  2012. border-radius: 4rpx;
  2013. text-align: center;
  2014. font-size: $font-size-24;
  2015. }
  2016. }
  2017. .uni-numbox {
  2018. position: absolute;
  2019. left: 45rpx;
  2020. bottom: 0;
  2021. .uni-numbox-minus,
  2022. .uni-numbox-plus {
  2023. width: 50rpx;
  2024. line-height: 40rpx;
  2025. }
  2026. .uni-numbox-value {
  2027. font-size: $font-size-28;
  2028. width: 60rpx;
  2029. }
  2030. }
  2031. }
  2032. }
  2033. .floor-item-act {
  2034. width: 100%;
  2035. height: 56rpx;
  2036. text-align: center;
  2037. box-sizing: border-box;
  2038. float: left;
  2039. padding: 0 0 10rpx 0;
  2040. margin-left: 10rpx;
  2041. }
  2042. }
  2043. }
  2044. .failure-list {
  2045. width: 702rpx;
  2046. height: auto;
  2047. padding: 0 24rpx;
  2048. margin-top: 20rpx;
  2049. background: #ffffff;
  2050. .failure-title {
  2051. width: 100%;
  2052. height: 82rpx;
  2053. line-height: 82rpx;
  2054. font-size: $font-size-28;
  2055. border-bottom: 1px solid #ebebeb;
  2056. .title-txt {
  2057. float: left;
  2058. color: #666666;
  2059. text-align: left;
  2060. }
  2061. .title-btn {
  2062. float: right;
  2063. color: $color-system;
  2064. text-align: right;
  2065. line-height: 80rpx;
  2066. .butto {
  2067. display: inline-block;
  2068. padding: 0 15rpx;
  2069. font-size: $font-size-26;
  2070. height: 50rpx;
  2071. line-height: 50rpx;
  2072. border-radius: 30rpx;
  2073. background: #ffffff;
  2074. // border: 1px solid #C9C9C9;
  2075. // color: #999999;
  2076. margin-top: 15rpx;
  2077. }
  2078. }
  2079. }
  2080. .productlist {
  2081. padding-top: 10rpx;
  2082. .goods-pros {
  2083. width: 100%;
  2084. height: auto;
  2085. padding: 20rpx 0;
  2086. }
  2087. .goods-pros-t {
  2088. display: flex;
  2089. align-items: center;
  2090. width: 100%;
  2091. height: 210rpx;
  2092. position: relative;
  2093. .img-tip {
  2094. display: block;
  2095. width: 72rpx;
  2096. height: 36rpx;
  2097. line-height: 36rpx;
  2098. font-size: $font-size-24;
  2099. text-align: center;
  2100. color: #ffffff;
  2101. border-radius: 24rpx;
  2102. background: rgba(51, 51, 51, 0.3);
  2103. // position: absolute;
  2104. // left: 0;
  2105. // top: 0;
  2106. }
  2107. .checkbox-box {
  2108. padding: 10rpx;
  2109. }
  2110. .pros-img {
  2111. width: 180rpx;
  2112. height: 100%;
  2113. border-radius: 10rpx;
  2114. margin: 0 20rpx;
  2115. border: 1px solid #f3f3f3;
  2116. position: relative;
  2117. image {
  2118. width: 100%;
  2119. height: 100%;
  2120. border-radius: 10rpx;
  2121. }
  2122. }
  2123. .pros-marks {
  2124. width: 730rpx;
  2125. height: 250rpx;
  2126. z-index: 90;
  2127. background: rgba(0, 0, 0, 0.05);
  2128. position: absolute;
  2129. left: -20rpx;
  2130. top: -20rpx;
  2131. }
  2132. }
  2133. .goods-pros-b {
  2134. width: 622rpx;
  2135. margin-left: 84rpx;
  2136. height: 40rpx;
  2137. padding: 0 0 26rpx 0;
  2138. // border-top: 1px solid #EBEBEB;
  2139. &.show {
  2140. display: block;
  2141. }
  2142. &.none {
  2143. display: none;
  2144. }
  2145. .sum {
  2146. font-size: $font-size-28;
  2147. line-height: 40rpx;
  2148. color: $text-color;
  2149. display: flex;
  2150. justify-content: flex-end;
  2151. .money {
  2152. color: #ff2a2a;
  2153. font-size: $font-size-28;
  2154. }
  2155. .money-sign {
  2156. font-size: $font-size-24;
  2157. color: #ff2a2a;
  2158. }
  2159. }
  2160. }
  2161. .pros-product {
  2162. width: 402rpx;
  2163. height: 100%;
  2164. line-height: 36rpx;
  2165. font-size: $font-size-28;
  2166. position: relative;
  2167. .producttitle {
  2168. width: 100%;
  2169. display: inline-block;
  2170. height: auto;
  2171. text-overflow: ellipsis;
  2172. display: -webkit-box;
  2173. word-break: break-all;
  2174. -webkit-box-orient: vertical;
  2175. -webkit-line-clamp: 2;
  2176. overflow: hidden;
  2177. margin-bottom: 8rpx;
  2178. .no-text {
  2179. display: inline-block;
  2180. height: 36rpx;
  2181. padding: 0 12rpx;
  2182. line-height: 36rpx;
  2183. background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
  2184. border-radius: 18rpx;
  2185. text-align: center;
  2186. color: #ffffff;
  2187. font-size: $font-size-28;
  2188. margin-right: 24rpx;
  2189. }
  2190. }
  2191. .productspec {
  2192. height: 36rpx;
  2193. color: #999999;
  2194. font-size: $font-size-26;
  2195. margin-top: 20rpx;
  2196. }
  2197. .productstate {
  2198. font-size: $font-size-28;
  2199. height: 44rpx;
  2200. color: #ff2a2a;
  2201. position: absolute;
  2202. bottom: 0;
  2203. left: 0;
  2204. }
  2205. }
  2206. }
  2207. }
  2208. .tui-popup-box {
  2209. position: relative;
  2210. box-sizing: border-box;
  2211. min-height: 220rpx;
  2212. padding: 24rpx 24rpx 0 24rpx;
  2213. .tui-popup-close {
  2214. width: 90rpx;
  2215. height: 90rpx;
  2216. position: absolute;
  2217. right: 0;
  2218. top: 24rpx;
  2219. line-height: 90rpx;
  2220. text-align: center;
  2221. color: #b2b2b2;
  2222. .icon-iconfontguanbi {
  2223. font-size: $font-size-40;
  2224. }
  2225. }
  2226. .title {
  2227. font-size: $font-size-34;
  2228. color: $text-color;
  2229. line-height: 88rpx;
  2230. text-align: center;
  2231. float: left;
  2232. width: 100%;
  2233. height: 88rpx;
  2234. font-weight: bold;
  2235. }
  2236. .tui-popup-main {
  2237. width: 100%;
  2238. float: left;
  2239. &.coupon {
  2240. padding-bottom: 40rpx;
  2241. .coupon-empty {
  2242. width: 100%;
  2243. height: 600rpx;
  2244. display: flex;
  2245. align-items: center;
  2246. justify-content: center;
  2247. flex-direction: column;
  2248. position: fixed;
  2249. background: $bg-color;
  2250. .empty-container-image {
  2251. width: 150rpx;
  2252. height: 150rpx;
  2253. margin-bottom: 0;
  2254. margin-top: 0;
  2255. }
  2256. .error-text {
  2257. font-size: $font-size-28;
  2258. color: #999999;
  2259. line-height: 88rpx;
  2260. }
  2261. }
  2262. }
  2263. .tui-popup-scroll {
  2264. width: 100%;
  2265. height: 600rpx;
  2266. .coupon-list {
  2267. width: 100%;
  2268. height: 200rpx;
  2269. margin-top: 24rpx;
  2270. box-sizing: border-box;
  2271. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
  2272. background-size: cover;
  2273. &:last-child {
  2274. margin-bottom: 24rpx;
  2275. }
  2276. .list-cell-le {
  2277. width: 224rpx;
  2278. height: 100%;
  2279. box-sizing: border-box;
  2280. padding: 37rpx 0;
  2281. float: left;
  2282. .coupon-maxMoney {
  2283. width: 100%;
  2284. height: 78rpx;
  2285. line-height: 78rpx;
  2286. font-size: 56rpx;
  2287. color: #ffffff;
  2288. text-align: center;
  2289. .small {
  2290. font-size: $font-size-24;
  2291. }
  2292. }
  2293. .coupon-minMoney {
  2294. width: 100%;
  2295. height: 33rpx;
  2296. line-height: 33rpx;
  2297. font-size: $font-size-24;
  2298. color: #ffffff;
  2299. text-align: center;
  2300. }
  2301. }
  2302. .list-cell-ri {
  2303. width: 478rpx;
  2304. height: 100%;
  2305. box-sizing: border-box;
  2306. padding: 20rpx 24rpx 0 24rpx;
  2307. float: right;
  2308. .list-cell-top {
  2309. width: 100%;
  2310. height: 121rpx;
  2311. float: left;
  2312. border-bottom: 1px solid #e1e1e1;
  2313. .list-cell-type {
  2314. width: 286rpx;
  2315. height: 100%;
  2316. float: left;
  2317. .list-cell-tags {
  2318. width: 100%;
  2319. height: 32rpx;
  2320. margin-bottom: 7rpx;
  2321. .tags {
  2322. display: inline-block;
  2323. padding: 0 10rpx;
  2324. height: 32rpx;
  2325. line-height: 32rpx;
  2326. background-color: #ffdcce;
  2327. color: #f94b4b;
  2328. font-size: $font-size-20;
  2329. border-radius: 8rpx;
  2330. text-align: center;
  2331. float: left;
  2332. }
  2333. }
  2334. .list-cell-texts {
  2335. width: 100%;
  2336. height: auto;
  2337. line-height: 35rpx;
  2338. text-overflow: ellipsis;
  2339. display: -webkit-box;
  2340. word-break: break-all;
  2341. -webkit-box-orient: vertical;
  2342. -webkit-line-clamp: 2;
  2343. overflow: hidden;
  2344. font-size: 26rpx;
  2345. color: #333333;
  2346. }
  2347. }
  2348. .list-cell-btn {
  2349. width: 128rpx;
  2350. height: 100%;
  2351. float: right;
  2352. .icon-used {
  2353. width: 100%;
  2354. height: 100%;
  2355. box-sizing: border-box;
  2356. padding-top: 28rpx;
  2357. .icon-used-text {
  2358. width: 100%;
  2359. text-align: center;
  2360. line-height: 26rpx;
  2361. font-size: $font-size-20;
  2362. color: #f94b4b;
  2363. }
  2364. .icon-used-btn {
  2365. width: 128rpx;
  2366. height: 48rpx;
  2367. border-radius: 28rpx;
  2368. line-height: 48rpx;
  2369. font-size: $font-size-26;
  2370. text-align: center;
  2371. &.receive {
  2372. background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
  2373. color: #ffffff;
  2374. }
  2375. &.make {
  2376. border: solid 1px #f94b4b;
  2377. color: #f94b4b;
  2378. }
  2379. }
  2380. }
  2381. }
  2382. }
  2383. .list-cell-time {
  2384. width: 100%;
  2385. height: 58rpx;
  2386. line-height: 58rpx;
  2387. text-align: left;
  2388. font-size: $font-size-20;
  2389. color: #999999;
  2390. }
  2391. }
  2392. }
  2393. }
  2394. .tui-popup-coupon {
  2395. width: 100%;
  2396. height: 500rpx;
  2397. box-sizing: border-box;
  2398. padding: 30rpx 20rpx;
  2399. .tui-popup-h1 {
  2400. width: 100%;
  2401. height: 66rpx;
  2402. display: flex;
  2403. align-items: center;
  2404. .tui-popup-text {
  2405. flex: 1;
  2406. height: 66rpx;
  2407. line-height: 66rpx;
  2408. font-size: $font-size-30;
  2409. color: #333333;
  2410. &.red {
  2411. color: #f94b4b;
  2412. }
  2413. &.bold {
  2414. font-weight: bold;
  2415. }
  2416. &.left {
  2417. text-align: left;
  2418. }
  2419. &.right {
  2420. text-align: right;
  2421. }
  2422. }
  2423. }
  2424. }
  2425. }
  2426. }
  2427. .footer {
  2428. width: 100%;
  2429. background-color: #ffffff;
  2430. height: 110rpx;
  2431. position: fixed;
  2432. bottom: 0rpx;
  2433. z-index: 990;
  2434. .footer-le {
  2435. width: 520rpx;
  2436. height: 100%;
  2437. padding-left: 24rpx;
  2438. float: left;
  2439. box-sizing: border-box;
  2440. .foot-check {
  2441. width: 100rpx;
  2442. float: left;
  2443. line-height: 110rpx;
  2444. font-size: $font-size-24;
  2445. .checkbox {
  2446. width: 40rpx;
  2447. text-align: center;
  2448. }
  2449. .text {
  2450. width: 60rpx;
  2451. float: right;
  2452. }
  2453. }
  2454. .sum {
  2455. width: 360rpx;
  2456. height: 110rpx;
  2457. float: right;
  2458. box-sizing: border-box;
  2459. padding: 10rpx;
  2460. .sum-none {
  2461. width: 100%;
  2462. height: 45rpx;
  2463. line-height: 45rpx;
  2464. color: $text-color;
  2465. float: left;
  2466. text-align: left;
  2467. .money {
  2468. font-size: $font-size-24;
  2469. color: #999999;
  2470. text-decoration: line-through;
  2471. }
  2472. .money-sign {
  2473. font-size: $font-size-24;
  2474. color: #999999;
  2475. text-decoration: line-through;
  2476. }
  2477. .money-reduced {
  2478. margin-left: 10rpx;
  2479. font-size: $font-size-24;
  2480. color: #ff2a2a;
  2481. }
  2482. .money-popup {
  2483. height: 45rpx;
  2484. line-height: 45rpx;
  2485. display: inline-block;
  2486. float: right;
  2487. font-size: $font-size-24;
  2488. color: #ff2a2a;
  2489. .icon-xiangshangjiantou {
  2490. font-size: $font-size-30;
  2491. margin-left: 5rpx;
  2492. }
  2493. }
  2494. }
  2495. .sum-price {
  2496. width: 100%;
  2497. height: 45rpx;
  2498. line-height: 45rpx;
  2499. font-size: $font-size-30;
  2500. color: $text-color;
  2501. float: left;
  2502. font-weight: normal;
  2503. text-align: left;
  2504. &.none {
  2505. height: 90rpx;
  2506. line-height: 90rpx;
  2507. }
  2508. .money {
  2509. color: #ff2a2a;
  2510. }
  2511. .money-sign {
  2512. font-size: $font-size-24;
  2513. color: #ff2a2a;
  2514. }
  2515. }
  2516. }
  2517. }
  2518. .footer-ri {
  2519. width: 230rpx;
  2520. height: 100%;
  2521. float: right;
  2522. display: flex;
  2523. justify-content: space-between;
  2524. align-items: center;
  2525. z-index: 999;
  2526. box-sizing: border-box;
  2527. padding: 13rpx 15rpx 13rpx 5rpx;
  2528. &.none {
  2529. display: none;
  2530. }
  2531. .btn {
  2532. width: 200rpx;
  2533. height: 100%;
  2534. background: linear-gradient(135deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
  2535. font-size: $font-size-28;
  2536. line-height: 84rpx;
  2537. color: #ffffff;
  2538. display: flex;
  2539. border-radius: 42rpx;
  2540. justify-content: center;
  2541. align-items: center;
  2542. }
  2543. }
  2544. .footer-del {
  2545. width: 400rpx;
  2546. height: 110rpx;
  2547. position: absolute;
  2548. padding-left: 200rpx;
  2549. background: #ffffff;
  2550. right: 0;
  2551. top: 0;
  2552. z-index: 1000;
  2553. &.show {
  2554. animation: showDelbtn 0s linear both;
  2555. }
  2556. &.none {
  2557. animation: hideDelbtn 0s linear both;
  2558. }
  2559. .btn {
  2560. width: 50%;
  2561. height: 100%;
  2562. line-height: 110rpx;
  2563. font-size: $font-size-28;
  2564. color: #ffffff;
  2565. text-align: center;
  2566. float: left;
  2567. }
  2568. .btn.btn-cancel {
  2569. background: #eec1ab;
  2570. }
  2571. .btn.btn-confirm {
  2572. background: #ff2a2a;
  2573. }
  2574. @keyframes showDelbtn {
  2575. 0% {
  2576. transform: translateX(0);
  2577. }
  2578. 100% {
  2579. transform: translateX(-100%);
  2580. }
  2581. }
  2582. @keyframes hideDelbtn {
  2583. 0% {
  2584. transform: translateX(-100%);
  2585. }
  2586. 100% {
  2587. transform: translateX(0);
  2588. }
  2589. }
  2590. }
  2591. }
  2592. </style>