index.vue 68 KB

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