cart.vue 43 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546
  1. <template>
  2. <view class="container cart clearfix" v-if="hasLogin" :style="{paddingTop:CustomBar+'px'}">
  3. <headerNavbar :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :page='1'></headerNavbar>
  4. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  5. <view class="container-cart-main tui-skeleton" :style="{paddingTop:isshowDelbtn ? '0rpx':'80rpx'}">
  6. <view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length>0" :style="{top:CustomBar+'px'}">
  7. <view class="foot-text">共<text>{{kindCount}}</text>件商品</view>
  8. <view class="delBtn" @tap.stop="showDelManager">删除</view>
  9. </view>
  10. <view v-if="!isEmpty" class="container-cart">
  11. <view class="cart-content" :style="{paddingBottom :isIphoneX ? '130rpx' : '100rpx'}">
  12. <view class="goods-list">
  13. <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
  14. <view class="shoptitle">
  15. <!--选择商店的全部商品"-->
  16. <view class="checkbox-box" @click.stop="checkShop(item)">
  17. <view class="checkbox iconfont" :class="[item.checked ?'icon-gouxuanl':'icon-weigouxuan']"></view>
  18. </view>
  19. <view v-if="item.promotions" class="floor-item-act">
  20. <view class="floor-tags" @click.stop="clickPopupShow(item,2)">{{item.promotions.name}}</view>
  21. </view>
  22. <view class="text">{{item.name}}</view>
  23. </view>
  24. <view class="productlist">
  25. <view class="goods-pros" v-for="(pros,idx) in item.cartList" :key="idx" >
  26. <view class="goods-pros-t">
  27. <!--选择商品-->
  28. <view class="checkbox-box" @click.stop="ischeck(item,pros)">
  29. <view class="checkbox iconfont" :class="[pros.productsChecked ? 'icon-gouxuanl':'icon-weigouxuan']">
  30. </view>
  31. </view>
  32. <view class="pros-img" @click.stop="navToListPage(pros.productId)">
  33. <image :src="pros.image ? pros.image:''" alt="" />
  34. </view>
  35. <view class="pros-product">
  36. <view class="producttitle" @click.stop="navToListPage(pros.productId)">{{pros.name}}</view>
  37. <view class="productspec">规格:{{pros.unit ? pros.unit : ''}}</view>
  38. <view class="productprice">
  39. <!--使用过滤器对总价改变-->
  40. <view class="price" :class="PromotionsFormat(pros.promotions) ? 'disabled' : ''">
  41. <text>¥</text>
  42. {{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price) | NumFormat }}
  43. </view>
  44. <view class="count" v-if="pros.validFlag == 2 " :class="[isshowDelbtn ? 'none':'show']">
  45. <text class="count-tips" v-if="pros.number<pros.min">起订量:{{pros.min}}</text>
  46. <text class="count-tips step" v-if="pros.isStep">购买量必须为起订量的整数倍</text>
  47. <view class="number-box">
  48. <view class="iconfont icon-jianhao" @click="changeCountSub(item,pros)"></view>
  49. <input class="btn-input" type="number" maxlength='4' v-model="pros.number" @blur="changeNnmber($event,item,pros)" @focus="changeInput(pros)">
  50. <view class="iconfont icon-jiahao" @click="changeCountAdd(item,pros)"></view>
  51. </view>
  52. </view>
  53. </view>
  54. <view v-show="pros.actStatus==1" class="floor-item-act">
  55. <view v-if="PromotionsFormat(pros.promotions)" class="floor-tags" @click.stop="clickPopupShow(pros,1)">
  56. {{pros.promotions.name}}
  57. <text v-if ="pros.promotions!=null && pros.promotions.type!=3">
  58. :¥{{ pros.promotions == null ? '0.00' : pros.promotions.touchPrice | NumFormat}}
  59. </text>
  60. </view>
  61. <view v-else-if="pros.promotions.type!=3" class="floor-tags" @click.stop="clickPopupShow(pros,2)">{{pros.promotions.name}}</view>
  62. </view>
  63. <view v-if="pros.actStatus == null && pros.ladderFlag == 1" class="floor-item-act">
  64. <view class="floor-tags" @click.stop="clickPopupShow(pros,2)">阶梯价格</view>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none':'show']" >
  71. <view class="sum-none" v-if="item.reducedPrice>0">
  72. <text class="money-sign">¥</text>
  73. <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
  74. <text class="money-reduced"><text class="iconfont icon-biaoqian"></text>减<text>¥{{ item.reducedPrice | NumFormat}}</text></text>
  75. </view>
  76. <view class="sum">合计:<text class="money"><text class="money-sign">¥</text>{{item.totalPrice | NumFormat}}</text></view>
  77. </view>
  78. </view>
  79. </view>
  80. <view class="failure-list" v-if="failureList.length>0">
  81. <view class="failure-title">
  82. <view class="title-txt">失效商品<text>{{failureList.length}}件</text></view>
  83. <view class="title-btn" @click.stop="deletefailureList"><text class="butto">清空失效商品</text></view>
  84. </view>
  85. <view class="productlist">
  86. <view class="goods-pros" v-for="(failure,failureIdx) in failureList" :key="failureIdx" >
  87. <view class="goods-pros-t" @click.stop="failureToProduct(failure)">
  88. <!--选择商品-->
  89. <view class="checkbox-box" @click.stop="ischeckFailure(failure)" v-if="isshowDelbtn">
  90. <button class="checkbox iconfont"
  91. :class="[ failure.productsChecked ? 'icon-gouxuanl':'icon-weigouxuan']">
  92. </button>
  93. </view>
  94. <view class="pros-img">
  95. <image :src="failure.image ? failure.image:''" alt="" />
  96. <text class="img-tip">失效</text>
  97. </view>
  98. <view class="pros-product">
  99. <view class="producttitle">{{failure.name}}</view>
  100. <view class="productspec">规格:{{failure.unit ? failure.unit : ''}}</view>
  101. <view class="productstate">{{failureStateText(failure.status)}}</view>
  102. </view>
  103. <view class="pros-marks" v-if="failure.isFailureLayer"></view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. </view>
  109. <!-- 脚部菜单 -->
  110. <view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  111. <view class="footer-le">
  112. <view class="foot-check checkbox-box" @tap.stop="checkAll()">
  113. <button class="checkbox iconfont" :class="[isCheckAll?'icon-gouxuan':'icon-weigouxuan']"></button>
  114. <view class="text">全选</view>
  115. </view>
  116. <view class="sum">
  117. <view class="sum-none" v-if="reducedPrice>0">
  118. <text class="money-sign">¥</text>
  119. <text class="money">{{ totalOriginalPrice | NumFormat }}</text>
  120. <text class="money-reduced"><text class="iconfont icon-biaoqian"></text>减<text>¥{{ reducedPrice | NumFormat}}</text></text>
  121. </view>
  122. <view class="sum-price" :class="reducedPrice == 0 ? 'none' : ''">
  123. 总价:<text class="money-sign">¥</text><text class="money">{{allPrice | NumFormat}}</text>
  124. </view>
  125. </view>
  126. </view>
  127. <view v-if="!isshowDelbtn" class="footer-ri" >
  128. <view class="btn hanld-btn" @tap="toConfirmation">去结算({{allCount}})</view>
  129. </view>
  130. <view v-else class="footer-del">
  131. <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
  132. <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
  133. </view>
  134. </view>
  135. </view>
  136. <view v-else class="cart-content empty">
  137. <view class="empty-container">
  138. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png" mode="aspectFit"></image>
  139. <text class="error-text">购物车空空如也,快去商城逛逛吧~</text>
  140. <view class="login-btn" @click="goIndex">去商城</view>
  141. </view>
  142. </view>
  143. </view>
  144. <!-- 促销活动弹窗 -->
  145. <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
  146. <!-- 透明模态层 -->
  147. <modal-layer v-if='modallayer'></modal-layer>
  148. </view>
  149. </template>
  150. <script>
  151. import authorize from '@/common/config/authorize.js'
  152. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  153. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  154. import tuiNomore from "@/components/tui-components/nomore/nomore"
  155. import headerNavbar from "@/components/cm-module/headerNavbar/headerNavbar.vue" //顶部自定义胶囊'
  156. import activiPopup from "@/components/cm-module/productDetails/cm-activipopu"
  157. import modalLayer from "@/components/modal-layer"
  158. import { mapState,mapMutations } from 'vuex';
  159. export default{
  160. components:{
  161. tuiSkeleton,
  162. tuiLoadmore,
  163. tuiNomore,
  164. modalLayer,
  165. headerNavbar,
  166. activiPopup
  167. },
  168. data(){
  169. return{
  170. nvabarData: {//顶部自定义导航
  171. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  172. showSearch: 0,
  173. title: '购物车', // 导航栏 中间的标题
  174. },
  175. headerBtnPosi:this.setHeaderBtnPosi(),//获取设备顶部胶囊高度
  176. systeminfo:this.setSysteminfo(), //获取设备信息
  177. CustomBar:this.CustomBar,// 顶部导航栏高度
  178. isIphoneX:this.$store.state.isIphoneX,
  179. userID:'',
  180. alertType:'',
  181. isStock:'',
  182. popupShow:false,
  183. handlerPros:{},//监听单挑促销商品
  184. failureList:[], //失效商品列表
  185. goodsList:[], //购物车的商品
  186. delGoodsList:'',//要删除的商品
  187. setGoodData:'', //确认订单的商品
  188. isCheckAll:false,//是否全选
  189. kindCount:0,//购物车宝贝数量
  190. allPrice:0,//所有价格
  191. totalOriginalPrice:0,//所有原价价
  192. reducedPrice:0,//满减
  193. allCount:0,//被选中的产品数量
  194. isModallayer:false,
  195. skeletonShow:true,
  196. isshowDelbtn:false,
  197. isDisabled: false, // 供应商/店铺全选是否禁用状态
  198. isNoConfim:false,
  199. isEmpty:false,//显示空购物车
  200. scrollHeight: 'auto',
  201. nomoreText: '上拉显示更多',
  202. hasNextPage: false,
  203. loadding: false,
  204. pullUpOn: true,
  205. pullFlag: true,
  206. pageSize: 10,
  207. pageNum: 1,
  208. }
  209. },
  210. onLoad(){
  211. this.setScrollHeight();
  212. },
  213. computed: {
  214. ...mapState(['hasLogin','userInfo'])
  215. },
  216. filters:{
  217. NumFormat(value) {//处理金额
  218. return Number(value).toFixed(2);
  219. },
  220. totalprice(val,count){//单件商品的价格 × 数量
  221. return (val * count).toFixed(2)
  222. }
  223. },
  224. methods:{
  225. initData(){
  226. this.isModallayer = false //遮罩层 防止多次点击
  227. this.skeletonShow = true //预加载圆圈
  228. this.isCheckAll=false//是否全选
  229. this.$api.getStorage().then((resolve) => {
  230. this.userID = resolve.userID;
  231. this.initGetCartGoodsList();
  232. })
  233. },
  234. initLogin(){
  235. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  236. if(wxResponse == 1){
  237. this.$api.redirectTo('/pages/login/login?type=4')
  238. }else{
  239. this.$api.navigateTo('/pages/authorization/authorization?type=0')
  240. }
  241. })
  242. },
  243. clickPopupShow(pros,type){
  244. this.popupShow = true;
  245. this.handlerPros = pros;
  246. },
  247. setScrollHeight() {
  248. // 窗口高度-footer高度
  249. const {windowHeight, pixelRatio} = uni.getSystemInfoSync();
  250. setTimeout(()=> {
  251. const query = uni.createSelectorQuery().in(this);
  252. query.selectAll('.footer').boundingClientRect();
  253. query.exec(res => {
  254. this.windowHeight = windowHeight;
  255. if(res[0][0]) {
  256. this.scrollHeight = windowHeight - res[0][0].height;
  257. }
  258. })
  259. }, 500)
  260. },
  261. initGetCartGoodsList(){//初始化购物车 index:1
  262. this.ProductService.QueryShoppingCartList({userId:this.userID}).then(response =>{
  263. this.skeletonShow = false
  264. let data = response.data
  265. this.kindCount = data.kindCount
  266. this.$store.commit('updateAllNum',data.kindCount)
  267. if( data.list.length > 0 || data.invalid.length > 0){
  268. this.isEmpty =false
  269. }else{
  270. this.isEmpty =true
  271. }
  272. if(data.list && data.list.length > 0 ){
  273. this.goodsList = data.list;
  274. this.goodsList.forEach((item,index) => {
  275. item.cartList.forEach(pros => {
  276. pros.shopID = item.shopID;
  277. pros.isStep = false
  278. if(pros.step === 2){
  279. if(pros.number % pros.min != 0){
  280. pros.number = pros.min
  281. this.totalShopPeice()
  282. this.updateShoppogNum(pros)
  283. }
  284. }
  285. })
  286. })
  287. this.totalShopPeice()
  288. } else {
  289. this.goodsList = [];
  290. }
  291. if( data.invalid && data.invalid.length > 0){
  292. let newFailureList = [],isFailureLayer;
  293. data.invalid.forEach((failure,index) => {
  294. if(failure.status == 1 || failure.status == 2) {
  295. isFailureLayer = true
  296. }else{
  297. isFailureLayer = false
  298. }
  299. newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
  300. })
  301. this.failureList = newFailureList
  302. } else {
  303. this.failureList = [];
  304. }
  305. }).catch(error =>{
  306. this.$util.msg(error.msg,2000);
  307. })
  308. },
  309. ischeckFailure(failure){
  310. failure.productsChecked = !failure.productsChecked
  311. this.updateCheckAllBtn()
  312. },
  313. ischeck(item,pro){//为未选中的时候改变为true,反之为true
  314. pro.productsChecked = !pro.productsChecked;
  315. this.updateProductCheckedAllBtn(item);
  316. this.updateCheckAllBtn();
  317. },
  318. updateProductCheckedAllBtn(item) {// 单独每个供应商的勾选判断
  319. let productsList = item.cartList,
  320. productsCheckedLength = 0,
  321. disabledLength = 0;
  322. if(this.isshowDelbtn) {
  323. productsList.forEach(pros => {
  324. if(pros.productsChecked) {
  325. productsCheckedLength++;
  326. }
  327. })
  328. } else {
  329. productsList.forEach(pros => {
  330. if(pros.productsChecked) {
  331. productsCheckedLength++;
  332. }
  333. })
  334. }
  335. item.checked = productsCheckedLength === productsList.length;
  336. },
  337. updateCheckAllBtn() {// 全选勾选判断
  338. let goodsCheckedLength = 0,
  339. goodsList = this.goodsList,
  340. failureList = this.failureList;
  341. goodsList.forEach(item => {
  342. if(item.checked) {
  343. goodsCheckedLength++;
  344. }
  345. })
  346. failureList.forEach(failureItem=>{
  347. if(failureItem.productsChecked){
  348. goodsCheckedLength++;
  349. }
  350. })
  351. if(this.isshowDelbtn){
  352. this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length;
  353. }else{
  354. this.isCheckAll = goodsCheckedLength === goodsList.length;
  355. }
  356. },
  357. checkShop(item){//与单选商品类似
  358. item.checked = !item.checked;
  359. this.setProductChecked(item);
  360. this.updateCheckAllBtn();
  361. },
  362. setProductChecked(item) {
  363. item.cartList.forEach(pros=>{
  364. if(item.checked) {
  365. pros.productsChecked = true;
  366. } else {
  367. pros.productsChecked = false;
  368. }
  369. })
  370. },
  371. updateBothCheckBtn() {
  372. if(this.isshowDelbtn) {
  373. // 当管理删除按钮出现时,失效的商品可被选择
  374. this.goodsList.forEach((item)=>{
  375. item.checked = this.isCheckAll;
  376. this.setProductChecked(item);
  377. })
  378. //删除按钮 全选包括失效商品勾选
  379. this.failureList.forEach(failureItem=>{
  380. failureItem.productsChecked = this.isCheckAll;
  381. })
  382. } else {
  383. this.goodsList.forEach((item)=>{
  384. item.checked = this.isCheckAll && !item.isDisabled;
  385. this.setProductChecked(item);
  386. })
  387. }
  388. },
  389. checkAll(){//全选方法内调用方法
  390. this.isCheckAll = !this.isCheckAll;
  391. this.updateBothCheckBtn();
  392. },
  393. totalShopPeice(){//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
  394. let prosPrice=0;
  395. let touchPrice = 0;
  396. let reducedPrice = 0;//商铺合计满减价
  397. let totalOriginalPrice = 0;//商铺合计原价
  398. let productsList=[];
  399. this.goodsList.map((item,index)=>{
  400. productsList = item.cartList;
  401. //计算店铺满减后店铺合计
  402. if(item.promotions && item.promotions.mode == 2){
  403. productsList.forEach(pros=>{
  404. prosPrice += pros.price*pros.number
  405. totalOriginalPrice+= pros.price*pros.number;
  406. if(prosPrice >= item.promotions.touchPrice){
  407. item.totalPrice = prosPrice - item.promotions.reducedPrice
  408. item.reducedPrice = item.promotions.reducedPrice
  409. item.totalOriginalPrice = totalOriginalPrice
  410. }else{
  411. item.reducedPrice = 0 //统计合计价格
  412. item.totalPrice = prosPrice
  413. }
  414. })
  415. }else{//以下为计算除店铺满减以外的单品满减以及正常商品合计
  416. let _totalPrice = 0;
  417. let _reducedPrice = 0;
  418. let _totalOriginalPrice =0;
  419. productsList.forEach(pros=>{
  420. let _price = pros.price*pros.number
  421. _totalOriginalPrice += pros.price*pros.number;
  422. if(pros.promotions && pros.promotions.type != 2 && pros.promotions.mode == 2){
  423. if(_price >= pros.promotions.touchPrice){
  424. _price = _price - pros.promotions.reducedPrice
  425. _reducedPrice += pros.promotions.reducedPrice
  426. }
  427. _totalPrice += _price
  428. }else{
  429. _reducedPrice = 0
  430. _totalPrice += pros.price*pros.number;
  431. }
  432. })
  433. item.reducedPrice = _reducedPrice
  434. item.totalOriginalPrice = _totalOriginalPrice
  435. item.totalPrice = _totalPrice
  436. }
  437. })
  438. },
  439. totalPeice(){ //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
  440. this.allPrice = 0
  441. let productsList =[];
  442. //店铺满减
  443. let prosPrice=0;
  444. let totalPrice = 0;
  445. let reducedPrice=0;//促销满减
  446. let totalOriginalPrice=0;//促销原价
  447. //凑单满减.单品满减
  448. let _totalPrice = 0;
  449. let _promsPrice = 0;
  450. let _reducedPrice = 0;
  451. let _reducedPromsPrice = 0;
  452. let _totalOriginalPrice =0;
  453. // 正常商品
  454. let _totalNonePrice = 0;
  455. let _isFlag = false;
  456. /*
  457. *originalPrice:商品原价
  458. *price:商品现价
  459. *mode:促销商品满减计算 促销方式mode为 2 的单独做计算 当mode == 2时商品promotions字段为促销活动内容,
  460. *touchPrice 为需要满金额
  461. *reducedPrice 为满减金额
  462. **/
  463. this.goodsList.forEach((item,index)=>{
  464. item.cartList.forEach(pros=>{
  465. if(pros.productsChecked){
  466. if(item.promotions && item.promotions.mode == 2){
  467. this.promotionsList.forEach(proms =>{
  468. if (item.promotions.id == proms.id){
  469. _isShopFlag = true;
  470. prosPrice = pros.price*pros.number
  471. }
  472. })
  473. if(_isShopFlag){
  474. if(prosPrice >= item.promotions.touchPrice){//判断如果商品合计价格已满足满减活动,计算价格
  475. totalPrice = prosPrice - item.promotions.reducedPrice //统计合计价格
  476. totalOriginalPrice += pros.originalPrice*pros.productCount //统计原商品价格
  477. reducedPrice = item.promotions.reducedPrice //统计总减金额
  478. }else{
  479. totalPrice += prosPrice //未达满减的统计合计价格
  480. }
  481. }
  482. }else if(pros.promotions && pros.promotions.type == 1 && pros.promotions.mode == 2){//以下为计算除店铺满减以外的单品满减
  483. let _price = 0;
  484. _price = pros.price*pros.number
  485. _totalOriginalPrice += pros.originalPrice*pros.number; //统计原商品价格
  486. if(_price >= pros.promotions.touchPrice){//判断如果商品合计价格已满足满减活动,计算价格
  487. _price = _price - pros.promotions.reducedPrice //商品满减后价格
  488. _reducedPrice += pros.promotions.reducedPrice //统计总减金额
  489. }else{
  490. _reducedPrice = 0 //将满减金额置为0
  491. }
  492. _totalPrice += _price //统计合计价格
  493. }else if(pros.promotions && pros.promotions.type == 2 && pros.promotions.mode == 2){//凑单满减计算合计
  494. let _price = 0;
  495. this.promotionsList.forEach(proms =>{
  496. proms.productList.forEach(el =>{
  497. if (pros.productId == el.productId){
  498. _isFlag = true;
  499. _price += pros.price*pros.number
  500. _totalOriginalPrice += pros.originalPrice*pros.number; //统计原商品价格
  501. }
  502. })
  503. if(_price >= pros.promotions.touchPrice){//判断如果商品合计价格已满足满减活动,计算价格
  504. _reducedPromsPrice = pros.promotions.reducedPrice //统计总减金额
  505. }else{
  506. _reducedPromsPrice = 0 //将满减金额置为0
  507. }
  508. })
  509. _promsPrice += _price//统计合计价格
  510. }else{
  511. _totalNonePrice += pros.price*pros.number; //正常商品的价格总计
  512. }
  513. }
  514. })
  515. })
  516. if(_isFlag){
  517. _promsPrice = _promsPrice - _reducedPromsPrice
  518. }
  519. this.totalOriginalPrice = totalOriginalPrice + _totalOriginalPrice;
  520. this.reducedPrice = reducedPrice + _reducedPrice + _reducedPromsPrice;
  521. this.allPrice = totalPrice + _totalPrice + _promsPrice + _totalNonePrice;
  522. },
  523. totalCount(){//计算总数量
  524. this.allCount = 0
  525. let prosAllCount=0
  526. let validCount = 0
  527. let validList =[];
  528. let productsList =[];
  529. this.goodsList.forEach(item=>{
  530. productsList = item.cartList
  531. productsList.forEach(pros=>{
  532. if(pros.productsChecked){
  533. prosAllCount+=parseInt(pros.number);
  534. this.allCount = prosAllCount
  535. }
  536. })
  537. })
  538. },
  539. changeCountAdd(item,pros){//商品数量加加
  540. if(pros.step === 2){
  541. pros.isStep = false
  542. pros.number += pros.min
  543. this.processActivityPrice(pros)
  544. this.isStock = false
  545. }else{
  546. pros.number++
  547. this.processActivityPrice(pros)
  548. this.isStock = false
  549. }
  550. this.updateShoppogNum(pros)
  551. this.totalShopPeice();
  552. },
  553. changeCountSub(item,pros){//商品数量减减
  554. if(pros.number<=pros.min){
  555. pros.number= pros.min
  556. this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
  557. return
  558. }else{
  559. if(pros.step === 2){
  560. pros.isStep = false
  561. pros.number -= pros.min
  562. }else{
  563. pros.number--
  564. }
  565. this.processActivityPrice(pros)
  566. }
  567. this.updateShoppogNum(pros)
  568. this.totalShopPeice();
  569. },
  570. changeInput(pros){//输入商品数量更新
  571. pros.isStep = false
  572. },
  573. changeNnmber(e,item,pros){//输入商品数量更新
  574. let _value = Number(e.detail.value);
  575. if(!this.$api.isNumber(_value)){
  576. pros.number = pros.min
  577. }else if(_value < pros.min){
  578. this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
  579. pros.number = pros.min
  580. }else if(_value % pros.min != 0){
  581. pros.isStep = true
  582. pros.number = pros.min
  583. }else{
  584. pros.isStep = false
  585. pros.number = e.detail.value
  586. this.processActivityPrice(pros)
  587. }
  588. this.updateShoppogNum(pros)
  589. this.totalShopPeice();
  590. },
  591. processActivityPrice(pros){//单独处理活动价格和阶梯价格
  592. let ladderPriceList = pros.ladderPrices;
  593. if(pros.ladderFlag == '0' || pros.actStatus == 1){
  594. pros.price = pros.price
  595. }else{
  596. ladderPriceList.forEach((item,index)=>{
  597. if(pros.number>=item.buyNum){
  598. pros.price = item.buyPrice
  599. }
  600. })
  601. }
  602. },
  603. updateShoppogNum(pros){//加减购物车商品更新到后台
  604. let params ={userID:this.userID,productID:pros.productId,productCount:pros.number}
  605. this.ProductService.shoppingCartUpdate(params).then(response =>{
  606. this.isshowDelbtn = false;
  607. this.initGetCartGoodsList();
  608. }).catch(error =>{
  609. this.$util.msg(error.msg,2000);
  610. })
  611. },
  612. toConfirmation(){//跳转确认订单页面
  613. let setGoodsList=[];
  614. this.goodsList.forEach(res=>{
  615. let products = res.cartList
  616. products.forEach(pros=>{
  617. if(pros.productsChecked){
  618. setGoodsList.push(pros.productId)
  619. }
  620. })
  621. })
  622. if(setGoodsList == ''){
  623. this.$util.msg("请先选择结算商品~",2000);
  624. return
  625. }else{
  626. this.isNoConfim = false
  627. this.goodsList.forEach(el=>{
  628. el.cartList.forEach(pros=>{
  629. if(pros.productsChecked){
  630. if(pros.number<pros.min){
  631. this.isNoConfim = true
  632. }
  633. }
  634. })
  635. })
  636. if(this.isNoConfim){
  637. this.$util.modal('','有商品的购买量没达到最小起订量,请修改数量后再次提交结算','去修改','',false,() =>{})
  638. return;
  639. }
  640. let productID = '';
  641. this.goodsList.forEach(el=>{//获取勾选的商品ID拼接字符串逗号隔开,最后一个逗号去掉
  642. el.cartList.forEach(pros=>{
  643. if(pros.productsChecked){
  644. productID += pros.productId+','
  645. }
  646. })
  647. })
  648. let cartPramsData={
  649. allPrice:this.allPrice,
  650. allCount:this.allCount,
  651. productID:productID.substring(0,productID.lastIndexOf(',')),
  652. productCount:''
  653. }
  654. this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({data:cartPramsData})}`)
  655. }
  656. },
  657. showDelManager(){//显示删除商品管理
  658. this.isshowDelbtn = true;
  659. if(this.isCheckAll) {
  660. this.updateBothCheckBtn();
  661. } else {
  662. this.goodsList.forEach(item => {
  663. if(item.checked) {
  664. item.cartList.forEach(pros => {
  665. pros.productsChecked = true;
  666. })
  667. }
  668. })
  669. this.updateCheckAllBtn();
  670. }
  671. // 失效也被勾选
  672. this.failureList.forEach(failureItem => {
  673. if(failureItem.isFailureLayer){
  674. failureItem.isFailureLayer = false
  675. }
  676. })
  677. },
  678. hideDelManage(){//隐藏删除商品管理
  679. this.isshowDelbtn = false;
  680. let isFailureLayer,newFailureList =[];
  681. if(this.isCheckAll) {
  682. this.updateBothCheckBtn();
  683. } else {
  684. // 失效商品取消勾选
  685. this.goodsList.forEach(item => {
  686. if(item.isDisabled) {
  687. item.checked = false;
  688. }
  689. item.cartList.forEach(pros => {
  690. if(pros.validFlag == 3) {
  691. pros.productsChecked = false;
  692. }
  693. })
  694. })
  695. this.updateCheckAllBtn();
  696. }
  697. this.failureList.forEach((failure,index) => {
  698. if(failure.failureState == 1 || failure.failureState == 2) {
  699. isFailureLayer = true
  700. }else{
  701. isFailureLayer = false
  702. }
  703. newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
  704. })
  705. this.failureList = newFailureList;
  706. },
  707. deleteList(){//删除购物车商品
  708. this.delGoodsList=[];
  709. this.goodsList.forEach(delitem=>{
  710. let products = delitem.cartList
  711. products.forEach(pros=>{
  712. if(pros.productsChecked){
  713. this.delGoodsList += pros.productId+','
  714. }
  715. })
  716. })
  717. this.failureList.forEach(failure=>{
  718. if(failure.productsChecked){
  719. this.delGoodsList += failure.productId+','
  720. }
  721. })
  722. if(this.delGoodsList.length == 0){
  723. this.$util.msg("请选择要删除的商品~",2000);
  724. return
  725. }else{
  726. this.$util.modal('','确定删除选中的商品吗?','确定','取消',true,() =>{
  727. this.ProductService.shoppingCartDelete({userID:this.userID,productIDs:this.delGoodsList}).then(response =>{
  728. this.$util.msg('删除成功',2000);
  729. setTimeout(()=>{
  730. this.isshowDelbtn = false;
  731. this.initGetCartGoodsList();
  732. },2000)
  733. }).catch(error =>{
  734. this.$util.msg(error.msg,2000)
  735. })
  736. })
  737. }
  738. },
  739. deletefailureList(){
  740. this.failureList.forEach(failure=>{ this.delGoodsList += failure.productId+',' })
  741. this.$util.modal('','确定清空全部失效商品吗?','确定','取消',true,() =>{
  742. this.ProductService.shoppingCartDelete({userID:this.userID,productIDs:this.delGoodsList}).then(response =>{
  743. this.$util.msg('删除成功',2000);
  744. setTimeout(()=>{
  745. this.isshowDelbtn = false;
  746. this.initGetCartGoodsList();
  747. },2000)
  748. }).catch(error =>{
  749. this.$util.msg(error.msg,2000)
  750. })
  751. })
  752. },
  753. goIndex(){
  754. uni.switchTab({
  755. url: '/pages/tabBar/home/home'
  756. });
  757. },
  758. goNavto(url){
  759. uni.navigateTo ({
  760. url
  761. })
  762. },
  763. navToListPage(id){
  764. this.isModallayer = true;
  765. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  766. },
  767. failureToProduct(failure){
  768. if(failure.status == 1){
  769. this.$util.msg('商品已丢失,不能查看',2000)
  770. return
  771. }else if(failure.status == 2){
  772. this.$util.msg('商品已停售,不能查看',2000)
  773. return
  774. }else{
  775. this.isModallayer = true;
  776. this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
  777. }
  778. },
  779. failureStateText(state){
  780. let stateText = '',
  781. stateTextObject={
  782. 1:'商品已丢失',
  783. 2:'商品已停售',
  784. 3:'商品已下架',
  785. 4:'商品已售罄',
  786. 5:'价格仅会员可见,您不能购买',
  787. 6:'未公开价格',
  788. 7:'库存不足'
  789. }
  790. Object.keys(stateTextObject).forEach(key => {
  791. if(key == state){
  792. stateText = stateTextObject[key]
  793. }
  794. })
  795. return stateText;
  796. },
  797. setHeaderBtnPosi(){
  798. // 获得胶囊按钮位置信息
  799. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  800. return headerBtnPosi
  801. },
  802. setSysteminfo(){
  803. let systeminfo;
  804. uni.getSystemInfo({ // 获取设备信息
  805. success: (res) => {
  806. systeminfo = res
  807. },
  808. })
  809. return systeminfo
  810. },
  811. PromotionsFormat(promo){//促销活动类型数据处理
  812. if(promo!=null){
  813. if(promo.type == 1 && promo.mode == 1){
  814. return true
  815. }else{
  816. return false
  817. }
  818. }
  819. return false
  820. }
  821. },
  822. watch:{//深度监听所有数据,每次改变重新计算总价和总数
  823. goodsList:{
  824. deep:true,
  825. handler(val,oldval){
  826. this.totalPeice()
  827. this.totalCount()
  828. }
  829. }
  830. },
  831. onPullDownRefresh() {//下拉刷新
  832. this.initGetCartGoodsList()
  833. uni.stopPullDownRefresh()
  834. },
  835. onShow(){
  836. if(this.hasLogin){
  837. this.initData()
  838. }else{
  839. this.initLogin()
  840. }
  841. },
  842. }
  843. </script>
  844. <style lang="scss">
  845. page{
  846. background: #f7f7f7;
  847. height: auto;
  848. }
  849. .cart-content{
  850. position: relative;
  851. }
  852. .container-cart-main.none{
  853. display: none;
  854. }
  855. .container-cart-main.show{
  856. display: block;
  857. }
  858. .cart-content.empty.none{
  859. display: none;
  860. }
  861. .cart-content.empty.show{
  862. display: block;
  863. }
  864. .container-cart.show{
  865. display: block;
  866. }
  867. .container-cart.none{
  868. display: none;
  869. }
  870. .empty-container.none{
  871. display: none;
  872. }
  873. .empty-container.show{
  874. display: flex;
  875. }
  876. .foot-check-delbtn{
  877. width: 100%;
  878. height: 80rpx;
  879. position: fixed;
  880. top: 0;
  881. left: 0;
  882. box-sizing: border-box;
  883. padding: 15rpx 24rpx;
  884. background-color: #F7F7F7;
  885. z-index: 990;
  886. .foot-text{
  887. font-size: $font-size-26;
  888. height: 50rpx;
  889. line-height: 50rpx;
  890. color: $text-color;
  891. float: left;
  892. padding-left: 10rpx;
  893. text{
  894. color: $color-system;
  895. margin: 0 6rpx;
  896. }
  897. }
  898. .delBtn{
  899. width: 100rpx;
  900. display: inline-block;
  901. padding: 0 15rpx;
  902. font-size: $font-size-26;
  903. height: 50rpx;
  904. line-height: 50rpx;
  905. border-radius: 30rpx;
  906. background:#FFFFFF;
  907. border: 1px solid #C9C9C9;
  908. color: #E15616;
  909. float: right;
  910. text-align: center;
  911. &.none{
  912. display: none;
  913. }
  914. }
  915. }
  916. .checkbox-box{
  917. display: flex;
  918. align-items: center;
  919. .checkbox{
  920. display: flex;
  921. margin: 0;
  922. padding: 0;
  923. display: flex;
  924. flex-direction: column;
  925. align-items: center;
  926. box-sizing: border-box;
  927. text-align: center;
  928. text-decoration: none;
  929. border-radius: 0;
  930. -webkit-tap-highlight-color: transparent;
  931. overflow: hidden;
  932. background-color:#FFFFFF;
  933. font-size: 36rpx;
  934. color:$color-system;
  935. }
  936. &.disabled{
  937. .checkbox{
  938. color:#999999
  939. }
  940. }
  941. .text{
  942. font-size: $font-size-24;
  943. margin-left: 10rpx;
  944. }
  945. }
  946. .goods-list{
  947. width: 100%;
  948. height: auto;
  949. background-color: #F7F7F7;
  950. .goods-item{
  951. width: 702rpx;
  952. padding: 0 24rpx;
  953. background: #FFFFFF;
  954. margin-bottom: 24rpx;
  955. }
  956. .shoptitle{
  957. display: flex;
  958. align-items: center;
  959. height: 80rpx;
  960. line-height: 80rpx;
  961. .checkbox-box{
  962. padding: 10rpx;
  963. }
  964. .text{
  965. width: 450rpx;
  966. display: block;
  967. overflow: hidden;
  968. text-overflow:ellipsis;
  969. white-space: nowrap;
  970. margin-left: 20rpx;
  971. font-size: $font-size-28;
  972. color: $text-color;
  973. text-align: left;
  974. font-weight: bold;
  975. }
  976. .floor-item-act{
  977. height: 56rpx;
  978. text-align: center;
  979. box-sizing: border-box;
  980. float: left;
  981. padding:10rpx 0;
  982. margin-left: 20rpx;
  983. .floor-tags{
  984. float: right;
  985. height: 36rpx;
  986. border-radius: 4rpx;
  987. background-color: rgba(225, 86, 22, 0.1);
  988. line-height: 36rpx;
  989. color: $color-system;
  990. text-align: center;
  991. display: inline-block;
  992. padding:0 16rpx;
  993. font-size: $font-size-20;
  994. }
  995. }
  996. }
  997. .goods-pros{
  998. width: 100%;
  999. height: auto;
  1000. }
  1001. .goods-pros-t{
  1002. display: flex;
  1003. align-items: center;
  1004. width: 100%;
  1005. height: 210rpx;
  1006. padding:0 0 20rpx 0;
  1007. .checkbox-box{
  1008. padding: 10rpx;
  1009. }
  1010. .pros-img{
  1011. width: 210rpx;
  1012. height: 100%;
  1013. border-radius: 10rpx;
  1014. margin:0 20rpx;
  1015. border:1px solid #f3f3f3;
  1016. image{
  1017. width: 100%;
  1018. height: 100%;
  1019. border-radius: 10rpx;
  1020. }
  1021. }
  1022. }
  1023. .goods-pros-b{
  1024. width:100%;
  1025. height: auto;
  1026. padding:0 0 24rpx 0;
  1027. box-sizing: border-box;
  1028. &.show{
  1029. display: block;
  1030. }
  1031. &.none{
  1032. display: none;
  1033. }
  1034. .sum-none{
  1035. width: 100%;
  1036. height: 40rpx;
  1037. line-height: 40rpx;
  1038. color: $text-color;
  1039. float: left;
  1040. text-align: right;
  1041. .money{
  1042. font-size: $font-size-24;
  1043. color: #999999;
  1044. text-decoration: line-through;
  1045. }
  1046. .money-sign{
  1047. font-size: $font-size-24;
  1048. color: #999999;
  1049. text-decoration: line-through;
  1050. }
  1051. .money-reduced{
  1052. margin-left: 10rpx;
  1053. font-size: $font-size-24;
  1054. color: $color-system;
  1055. }
  1056. }
  1057. .sum{
  1058. width: 100%;
  1059. height: 40rpx;
  1060. font-size: $font-size-28;
  1061. line-height: 40rpx;
  1062. color: $text-color;
  1063. float: left;
  1064. display: flex;
  1065. justify-content: flex-end;
  1066. .money{
  1067. color: #FF2A2A;
  1068. font-size: $font-size-28;
  1069. }
  1070. .money-sign{
  1071. font-size: $font-size-24;
  1072. color: #FF2A2A;
  1073. }
  1074. }
  1075. }
  1076. .pros-product{
  1077. width: 402rpx;
  1078. height: 100%;
  1079. line-height: 36rpx;
  1080. font-size: $font-size-28;
  1081. position: relative;
  1082. .producttitle{
  1083. width: 100%;
  1084. display: inline-block;
  1085. height: auto;
  1086. text-overflow:ellipsis;
  1087. display: -webkit-box;
  1088. word-break: break-all;
  1089. -webkit-box-orient: vertical;
  1090. -webkit-line-clamp: 2;
  1091. overflow: hidden;
  1092. margin-bottom: 8rpx;
  1093. .no-text{
  1094. display: inline-block;
  1095. height:36rpx;
  1096. padding: 0 12rpx;
  1097. line-height: 36rpx;
  1098. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  1099. border-radius:18rpx;
  1100. text-align: center;
  1101. color: #FFFFFF;
  1102. font-size:$font-size-28;
  1103. margin-right: 24rpx;
  1104. }
  1105. }
  1106. .productspec{
  1107. height: 36rpx;
  1108. color: #999999;
  1109. font-size: $font-size-26;
  1110. }
  1111. .productprice{
  1112. width: 100%;
  1113. height: 48rpx;
  1114. margin: 10rpx 0 0 0;
  1115. .price{
  1116. line-height: 48rpx;
  1117. font-size: $font-size-28;
  1118. width: 48%;
  1119. color: #FF2A2A;
  1120. float: left;
  1121. &.disabled{
  1122. color: #999999;
  1123. text-decoration: line-through;
  1124. }
  1125. .money-sign{
  1126. font-size: $font-size-24;
  1127. color: #FF2A2A;
  1128. }
  1129. }
  1130. .count{
  1131. height: 100%;
  1132. float: right;
  1133. position: relative;
  1134. &.show{
  1135. display: block;
  1136. }
  1137. &.none{
  1138. display: none;
  1139. }
  1140. .count-tips{
  1141. width: auto;
  1142. display: inline-block;
  1143. padding: 0 15rpx;
  1144. line-height: 44rpx;
  1145. height: 44rpx;
  1146. border-radius: 22rpx;
  1147. background: $btn-confirm;
  1148. font-size: $font-size-24;
  1149. text-align: center;
  1150. color: #FFFFFF;
  1151. position: absolute;
  1152. top:-60rpx;
  1153. left: -5rpx;
  1154. z-index: 5;
  1155. &.step{
  1156. left:-217rpx
  1157. }
  1158. &::before{
  1159. content: "";
  1160. position: absolute;
  1161. bottom: -30rpx;
  1162. right: 15rpx;
  1163. z-index:1;
  1164. width: 0;
  1165. height: 0;
  1166. border-width: 18rpx;
  1167. border-style: solid;
  1168. border-color:$color-system transparent transparent transparent;
  1169. }
  1170. }
  1171. .number-box{
  1172. display: flex;
  1173. justify-content: center;
  1174. align-items: center;
  1175. .iconfont{
  1176. font-size: $font-size-24;
  1177. padding:0 20rpx;
  1178. color: $text-color;
  1179. text-align: center;
  1180. line-height: 48rpx;
  1181. font-weight: bold;
  1182. }
  1183. .btn-input{
  1184. width: 62rpx;
  1185. height: 48rpx;
  1186. line-height: 48rpx;
  1187. background: #F8F8F8;
  1188. border-radius: 4rpx;
  1189. text-align: center;
  1190. font-size: $font-size-24;
  1191. }
  1192. }
  1193. .uni-numbox{
  1194. position: absolute;
  1195. left: 45rpx;
  1196. bottom: 0;
  1197. .uni-numbox-minus, .uni-numbox-plus{
  1198. width: 50rpx;
  1199. line-height: 40rpx;
  1200. }
  1201. .uni-numbox-value {
  1202. font-size: $font-size-28;
  1203. width: 60rpx;
  1204. }
  1205. }
  1206. }
  1207. }
  1208. .floor-item-act{
  1209. width: 100%;
  1210. height: 56rpx;
  1211. text-align: center;
  1212. box-sizing: border-box;
  1213. float: left;
  1214. padding:0 0 10rpx 0;
  1215. margin-left: 10rpx;
  1216. .floor-tags{
  1217. float: left;
  1218. height: 36rpx;
  1219. border-radius: 4rpx;
  1220. background-color: rgba(225, 86, 22, 0.1);
  1221. line-height: 36rpx;
  1222. color: $color-system;
  1223. text-align: center;
  1224. display: inline-block;
  1225. padding:0 16rpx;
  1226. font-size: $font-size-20;
  1227. }
  1228. }
  1229. }
  1230. }
  1231. .failure-list{
  1232. width: 702rpx;
  1233. height: auto;
  1234. padding: 0 24rpx;
  1235. margin-top: 20rpx;
  1236. background: #FFFFFF;
  1237. .failure-title{
  1238. width: 100%;
  1239. height: 80rpx;
  1240. line-height: 80rpx;
  1241. font-size: $font-size-28;
  1242. border-bottom: 1px solid #EBEBEB;
  1243. .title-txt{
  1244. float: left;
  1245. color: $text-color;
  1246. text-align: left;
  1247. }
  1248. .title-btn{
  1249. float: right;
  1250. color: $color-system;
  1251. text-align: right;
  1252. line-height: 80rpx;
  1253. .butto{
  1254. display: inline-block;
  1255. padding: 0 15rpx;
  1256. font-size: $font-size-26;
  1257. height: 50rpx;
  1258. line-height: 50rpx;
  1259. border-radius: 30rpx;
  1260. background:#FFFFFF;
  1261. border: 1px solid #C9C9C9;
  1262. color: #999999;
  1263. margin-top: 15rpx;
  1264. }
  1265. }
  1266. }
  1267. .productlist{
  1268. padding-top: 10rpx;
  1269. .goods-pros{
  1270. width: 100%;
  1271. height: auto;
  1272. padding: 20rpx 0;
  1273. }
  1274. .goods-pros-t{
  1275. display: flex;
  1276. align-items: center;
  1277. width: 100%;
  1278. height: 210rpx;
  1279. position: relative;
  1280. .checkbox-box{
  1281. padding: 10rpx;
  1282. }
  1283. .pros-img{
  1284. width: 210rpx;
  1285. height: 100%;
  1286. border-radius: 10rpx;
  1287. margin:0 20rpx;
  1288. border:1px solid #f3f3f3;
  1289. position: relative;
  1290. .img-tip{
  1291. display: block;
  1292. width: 72rpx;
  1293. height: 36rpx;
  1294. line-height: 36rpx;
  1295. font-size: $font-size-24;
  1296. text-align: center;
  1297. color: #FFFFFF;
  1298. border-radius: 10rpx 0 10rpx 0;
  1299. background:linear-gradient(34deg,rgba(255,149,42,1) 0%,rgba(225,86,22,1) 100%);
  1300. position: absolute;
  1301. left: 0;
  1302. top: 0;
  1303. }
  1304. image{
  1305. width: 100%;
  1306. height: 100%;
  1307. border-radius: 10rpx;
  1308. }
  1309. }
  1310. .pros-marks{
  1311. width: 750rpx;
  1312. height: 250rpx;
  1313. z-index: 90;
  1314. background: rgba(0,0,0,.05);
  1315. position: absolute;
  1316. left:-20rpx;
  1317. top: -20rpx;
  1318. }
  1319. }
  1320. .goods-pros-b{
  1321. width:622rpx;
  1322. margin-left: 84rpx;
  1323. height: 40rpx;
  1324. padding:0 0 26rpx 0;
  1325. // border-top: 1px solid #EBEBEB;
  1326. &.show{
  1327. display: block;
  1328. }
  1329. &.none{
  1330. display: none;
  1331. }
  1332. .sum{
  1333. font-size: $font-size-28;
  1334. line-height: 40rpx;
  1335. color: $text-color;
  1336. display: flex;
  1337. justify-content: flex-end;
  1338. .money{
  1339. color: #FF2A2A;
  1340. font-size: $font-size-28;
  1341. }
  1342. .money-sign{
  1343. font-size: $font-size-24;
  1344. color: #FF2A2A;
  1345. }
  1346. }
  1347. }
  1348. .pros-product{
  1349. width: 402rpx;
  1350. height: 100%;
  1351. line-height: 36rpx;
  1352. font-size: $font-size-28;
  1353. position: relative;
  1354. .producttitle{
  1355. width: 100%;
  1356. display: inline-block;
  1357. height: auto;
  1358. text-overflow:ellipsis;
  1359. display: -webkit-box;
  1360. word-break: break-all;
  1361. -webkit-box-orient: vertical;
  1362. -webkit-line-clamp: 2;
  1363. overflow: hidden;
  1364. margin-bottom: 8rpx;
  1365. .no-text{
  1366. display: inline-block;
  1367. height:36rpx;
  1368. padding: 0 12rpx;
  1369. line-height: 36rpx;
  1370. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  1371. border-radius:18rpx;
  1372. text-align: center;
  1373. color: #FFFFFF;
  1374. font-size: $font-size-28;
  1375. margin-right: 24rpx;
  1376. }
  1377. }
  1378. .productspec{
  1379. height: 36rpx;
  1380. color: #999999;
  1381. font-size: $font-size-26;
  1382. }
  1383. .productstate{
  1384. font-size: $font-size-28;
  1385. height: 44rpx;
  1386. color: #FF2A2A;
  1387. position: absolute;
  1388. bottom: 0;
  1389. left: 0;
  1390. }
  1391. }
  1392. }
  1393. }
  1394. .footer{
  1395. width: 100%;
  1396. background-color: #FFFFFF;
  1397. height: 110rpx;
  1398. position: fixed;
  1399. bottom: 0rpx;
  1400. z-index: 100;
  1401. .footer-le{
  1402. width: 520rpx;
  1403. height: 100%;
  1404. padding:0 24rpx;
  1405. float: left;
  1406. .foot-check{
  1407. width: 100rpx;
  1408. float: left;
  1409. line-height: 110rpx;
  1410. font-size: $font-size-24;
  1411. .checkbox{
  1412. width: 40rpx;
  1413. text-align: center;
  1414. }
  1415. .text{
  1416. width: 60rpx;
  1417. float: right;
  1418. }
  1419. }
  1420. .sum{
  1421. width: 380rpx;
  1422. height: 110rpx;
  1423. float: right;
  1424. box-sizing: border-box;
  1425. padding: 10rpx;
  1426. .sum-none{
  1427. width: 100%;
  1428. height: 45rpx;
  1429. line-height: 45rpx;
  1430. color: $text-color;
  1431. float: left;
  1432. text-align: right;
  1433. .money{
  1434. font-size: $font-size-24;
  1435. color: #999999;
  1436. text-decoration: line-through;
  1437. }
  1438. .money-sign{
  1439. font-size: $font-size-24;
  1440. color: #999999;
  1441. text-decoration: line-through;
  1442. }
  1443. .money-reduced{
  1444. margin-left: 10rpx;
  1445. font-size: $font-size-24;
  1446. color: $color-system;
  1447. }
  1448. }
  1449. .sum-price{
  1450. text-align: right;
  1451. width: 100%;
  1452. height: 45rpx;
  1453. line-height: 45rpx;
  1454. font-size: $font-size-30;
  1455. color: $text-color;
  1456. float: left;
  1457. font-weight: normal;
  1458. &.none{
  1459. height: 90rpx;
  1460. line-height: 90rpx;
  1461. }
  1462. .money{
  1463. color: #FF2A2A;
  1464. }
  1465. .money-sign{
  1466. font-size: $font-size-24;
  1467. color: #FF2A2A;
  1468. }
  1469. }
  1470. }
  1471. }
  1472. .footer-ri{
  1473. width: 180rpx;
  1474. height: 100%;
  1475. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  1476. float: right;
  1477. display: flex;
  1478. justify-content: space-between;
  1479. align-items: center;
  1480. z-index: 999;
  1481. &.none{
  1482. display: none;
  1483. }
  1484. .btn{
  1485. width: 200rpx;
  1486. height: 100%;
  1487. font-size: $font-size-28;
  1488. line-height: 110rpx;
  1489. color: #FFFFFF;
  1490. display: flex;
  1491. justify-content: center;
  1492. align-items: center;
  1493. }
  1494. }
  1495. .footer-del{
  1496. width: 400rpx;
  1497. height: 110rpx;
  1498. position: absolute;
  1499. padding-left: 200rpx;
  1500. background: #FFFFFF;
  1501. right: 0;
  1502. top: 0;
  1503. z-index: 1000;
  1504. &.show{
  1505. animation: showDelbtn 0s linear both;
  1506. }
  1507. &.none{
  1508. animation: hideDelbtn 0s linear both;
  1509. }
  1510. .btn{
  1511. width: 50%;
  1512. height: 100%;
  1513. line-height: 110rpx;
  1514. font-size: $font-size-28;
  1515. color: #FFFFFF;
  1516. text-align: center;
  1517. float: left;
  1518. }
  1519. .btn.btn-cancel{
  1520. background:#EEC1AB;
  1521. }
  1522. .btn.btn-confirm{
  1523. background:#FF2A2A;
  1524. }
  1525. @keyframes showDelbtn {
  1526. 0% {
  1527. transform: translateX(0);
  1528. }
  1529. 100% {
  1530. transform: translateX(-100%);
  1531. }
  1532. }
  1533. @keyframes hideDelbtn {
  1534. 0% {
  1535. transform: translateX(-100%);
  1536. }
  1537. 100% {
  1538. transform: translateX(0);
  1539. }
  1540. }
  1541. }
  1542. }
  1543. </style>