cart.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211
  1. <template>
  2. <!-- 商品分类第三种布局样式 -->
  3. <view class="goodCate acea-row row-column">
  4. <view class="mp-header">
  5. <view class="sys-head" :style="{ height: sysHeight }"></view>
  6. <view class="serch-box" style="height: 43px;">
  7. <view class="serch-wrapper acea-row row-middle">
  8. <navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle" hover-class="none">
  9. <text class="iconfont icon-ic_search"></text>
  10. 搜索商品信息
  11. </navigator>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="conter acea-row">
  16. <scroll-view scroll-y="true" class="aside">
  17. <view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in categoryList" :key="index" @click="tapNav(index,item)">
  18. <text>{{item.cate_name}}</text>
  19. </view>
  20. <view class="safe-area-inset-bottom"></view>
  21. </scroll-view>
  22. <view class="wrapper acea-row row-column">
  23. <view class="bgcolor acea-row">
  24. <view class="longTab acea-row row-middle">
  25. <scroll-view scroll-x="true" style="white-space: nowrap;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
  26. <view class="longItem" :style='"width:"+isWidth+"px"' :class="index===tabClick?'click':''" v-for="(item,index) in categoryErList" :key="index" @click="longClick(index)">
  27. <view class="inner">{{item.cate_name}}</view>
  28. </view>
  29. </scroll-view>
  30. </view>
  31. <view class="openList">
  32. <view class="btn" @click="openTap">
  33. <text class="iconfont icon-ic_downarrow"></text>
  34. </view>
  35. </view>
  36. </view>
  37. <scroll-view scroll-y="true" class="goodsListWrap" @scroll="goodsListScroll" @scrolltolower="getProducts">
  38. <!--商品列表 -->
  39. <goodClass :tempArr="tempArr" :isLogin="isLogin" @gocartduo="goCartDuo" @gocartdan="goCartDan" @ChangeCartNumDan="ChangeCartNumDan"></goodClass>
  40. <view class='loadingicon acea-row row-center-wrapper'>
  41. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  42. </view>
  43. <view class="safe-area-inset-bottom"></view>
  44. </scroll-view>
  45. </view>
  46. </view>
  47. <view class="footer">
  48. <view class="inner-box" :class="{ open: footerOpen }">
  49. <view class="inner acea-row row-between row-middle">
  50. <BaseMoney :money="totalPrice" symbolSize="32" integerSize="48" decimalSize="32" color="#FFFFFF"></BaseMoney>
  51. <view class="btn" @click="subOrder">去下单({{cartNum}})</view>
  52. </view>
  53. </view>
  54. <view class="cartIcon" @click="getCartLists">
  55. <uni-badge :text="cartNum" absolute="rightTop" :offset="[6, 4]" :custom-style="{background: 'var(--view-theme)'}">
  56. <view class="image-wrap">
  57. <image src="@/static/img/cart_pic.png" class="image"></image>
  58. </view>
  59. </uni-badge>
  60. </view>
  61. </view>
  62. <!-- 分类购物车下拉列表 -->
  63. <cartList :marginBottom="74" :cartNums="cartNum" :cartData="cartData" @closeList="closeList" @ChangeCartNumDan="ChangeCartList" @ChangeSubDel="ChangeSubDel" @ChangeOneDel="ChangeOneDel"></cartList>
  64. <!-- 产品属性组件 -->
  65. <productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' :type="2" @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
  66. @iptCartNum="iptCartNum" @goCat="goCatNum" :is_vip="is_vip" id='product-window'></productWindow>
  67. <!-- 筛选 -->
  68. <view v-if="!iSlong">
  69. <view class="downTab acea-row row-column">
  70. <view :style="{height:getHeight.barTop+'px'}"></view>
  71. <view :style="{height:getHeight.barHeight+'px'}"></view>
  72. <view class="title">{{categoryTitle}}</view>
  73. <scroll-view scroll-y="true" class="scroll-view">
  74. <view class="children">
  75. <view class="item line1" :class="index===tabClick?'click':''" v-for="(item,index) in categoryErList" :key="index" @click="longClick(index)">
  76. <view class="inner">{{item.cate_name}}</view>
  77. </view>
  78. </view>
  79. </scroll-view>
  80. <view class="closeList" @click="closeTap">
  81. 点击收起<text class="iconfont icon-ic_uparrow"></text>
  82. </view>
  83. </view>
  84. <view class="mask" @click="closeTap"></view>
  85. </view>
  86. </view>
  87. </template>
  88. <script>
  89. let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  90. import {
  91. cartDel
  92. } from '@/api/order.js';
  93. import {
  94. getCategoryList,
  95. getAttr,
  96. postCartNum,
  97. getCartCount,
  98. getCateList,
  99. addTableCate,
  100. placeOrder,
  101. emptyTableData,
  102. } from '@/api/store.js';
  103. import {
  104. getProducts,
  105. getCustomerList,
  106. getStoreCategory,
  107. getStoreBrand
  108. } from '@/api/new_store.js';
  109. import productWindow from '@/components/productWindow/index';
  110. import goodClass from '@/components/goodClass';
  111. import cartList from '@/components/cartList';
  112. import {
  113. mapState,
  114. mapGetters
  115. } from 'vuex';
  116. import {
  117. goShopDetail
  118. } from '@/libs/order.js';
  119. import {
  120. toLogin
  121. } from '@/libs/login.js';
  122. export default {
  123. computed: {
  124. ...mapGetters(['isLogin', 'uid'])
  125. },
  126. components: {
  127. productWindow,
  128. goodClass,
  129. cartList
  130. },
  131. props: {
  132. info: {
  133. type: Object,
  134. default: {}
  135. },
  136. pageVisible: {
  137. type: Boolean,
  138. default: true
  139. }
  140. },
  141. data() {
  142. return {
  143. getHeight: this.$util.getWXStatusHeight(),
  144. switchNum: 1,
  145. sysHeight: sysHeight,
  146. categoryList: [],
  147. navActive: 0,
  148. categoryTitle: '',
  149. categoryErList: [],
  150. tabLeft: 0,
  151. isWidth: 0, //每个导航栏占位
  152. tabClick: 0, //导航栏被点击
  153. iSlong: true,
  154. tempArr: [],
  155. loading: false,
  156. loadend: false,
  157. loadTitle: '加载更多',
  158. page: 1,
  159. limit: 10,
  160. cid: 0, //一级分类
  161. sid: 0, //二级分类
  162. delivery_type: 3, // 配送方式
  163. isAuto: false, //没有授权的不会自动授权
  164. isShowAuth: false, //是否隐藏授权
  165. attr: {
  166. cartAttr: false,
  167. productAttr: [],
  168. productSelect: {}
  169. },
  170. productValue: [],
  171. attrValue: '', //已选属性
  172. storeName: '', //多属性产品名称
  173. id: 0,
  174. cartData: {
  175. cartList: [],
  176. iScart: false
  177. },
  178. totalPrice: 0.00,
  179. lengthCart: 0,
  180. is_vip: 0, //是否是会员
  181. cart_num: 0,
  182. storeInfo: {},
  183. cartNum: 0,
  184. footerOpen: false,
  185. }
  186. },
  187. watch: {
  188. pageVisible(value) {
  189. if (value) {
  190. return;
  191. }
  192. if (!this.timer || this.timer.constructor.name != 'Object') {
  193. return;
  194. }
  195. Object.values(this.timer).forEach(this.clearTimer);
  196. },
  197. info: {
  198. handler(value) {
  199. if (!value.store_id || !value.tableId) {
  200. return;
  201. }
  202. this.getCartNum();
  203. this.getCartList(1);
  204. },
  205. deep: true
  206. }
  207. },
  208. mounted() {
  209. let that = this;
  210. // 获取设备宽度
  211. uni.getSystemInfo({
  212. success(e) {
  213. that.isWidth = e.windowWidth / 5
  214. }
  215. });
  216. },
  217. methods: {
  218. // 取消定时器
  219. clearTimer(timerID) {
  220. if (timerID) {
  221. clearTimeout(timerID);
  222. }
  223. },
  224. // 设置定时器
  225. setTimer(timerID, callback) {
  226. if (typeof callback != 'function') {
  227. return;
  228. }
  229. if (!this.timer || this.timer.constructor.name != 'Object') {
  230. this.timer = {};
  231. }
  232. this.clearTimer(this.timer[timerID]);
  233. this.timer[timerID] = setTimeout(callback, 5000);
  234. },
  235. // 重载商品数据
  236. reloadProducts() {
  237. getProducts({
  238. page: 1,
  239. limit: this.tempArr.length,
  240. type: 1,
  241. cid: this.cid,
  242. sid: this.sid,
  243. store_id: this.info.id,
  244. delivery_type: '',
  245. collate_code_id: this.info.tableId,
  246. }).then(res => {
  247. this.$set(this, 'tempArr', res.data);
  248. this.setTimer('reloadProducts', this.reloadProducts);
  249. });
  250. },
  251. // 授权回调
  252. onLoadFun() {
  253. setTimeout(function() {
  254. this.isShowAuth = false;
  255. }, 10)
  256. },
  257. // 授权关闭
  258. authColse: function(e) {
  259. this.isShowAuth = e
  260. },
  261. updateFun(e) {
  262. if (e.cartNum) {
  263. this.tempArr.forEach((item) => {
  264. if (item.id == e.id) {
  265. item.cart_num = e.cartNum
  266. }
  267. })
  268. }
  269. },
  270. // 商品列表
  271. getProducts() {
  272. let that = this;
  273. if (that.loadend) return;
  274. if (that.loading) return;
  275. that.loading = true;
  276. getProducts({
  277. page: that.page,
  278. limit: that.limit,
  279. type: 1,
  280. cid: that.cid,
  281. sid: that.sid,
  282. store_id: that.info.id,
  283. delivery_type: '',
  284. collate_code_id: that.info.tableId,
  285. }).then(res => {
  286. console.log(res, 'res')
  287. let list = res.data,
  288. loadend = list.length < that.limit;
  289. that.tempArr = that.$util.SplitArray(list, that.tempArr);
  290. that.$set(that, 'tempArr', that.tempArr);
  291. that.loading = false;
  292. that.loadend = loadend;
  293. that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
  294. that.page = that.page + 1;
  295. this.setTimer('reloadProducts', this.reloadProducts);
  296. }).catch(err => {
  297. that.loading = false;
  298. that.loadTitle = '加载更多'
  299. });
  300. },
  301. // 切换自提方式
  302. swithFn(num) {
  303. switch (num) {
  304. case 1:
  305. this.switchNum = 1
  306. this.delivery_type = '3'
  307. break;
  308. case 2:
  309. this.switchNum = 2
  310. this.delivery_type = '2'
  311. break;
  312. }
  313. this.page = 1;
  314. this.loadend = false;
  315. this.tempArr = []
  316. this.getProducts()
  317. },
  318. // 跳转到门店列表
  319. goMap() {
  320. uni.navigateTo({
  321. url: "/pages/store/store_list/index?storeFrom=1&type=1&storeId=" + this.info.id,
  322. success(res) {
  323. console.log('成功啦', res);
  324. },
  325. fail(err) {
  326. console.log('失败啦', err);
  327. }
  328. })
  329. },
  330. // 生成订单;
  331. subOrder: function() {
  332. placeOrder({
  333. tableId: this.info.tableId,
  334. storeId: this.info.store_id,
  335. }).then(() => {
  336. uni.navigateTo({
  337. url: `/pages/store/table_confirm/index?tableId=${this.info.tableId}&store_number_diners_window=${this.info.store_number_diners_window}`
  338. });
  339. }).catch(err => {
  340. this.$util.Tips({
  341. title: err
  342. });
  343. });
  344. },
  345. // 计算总价;
  346. getTotalPrice: function() {
  347. let that = this,
  348. list = that.cartData.cartList,
  349. totalPrice = 0.00;
  350. list.forEach(item => {
  351. if (item.attrStatus && item.status) {
  352. totalPrice = that.$util.$h.Add(totalPrice, that.$util.$h.Mul(item.cart_num, item
  353. .truePrice));
  354. }
  355. })
  356. that.$set(that, 'totalPrice', totalPrice);
  357. },
  358. ChangeSubDel: function(event) {
  359. let result = true
  360. for (let i = 0; i < this.cartData.cartList.length; i++) {
  361. if (this.cartData.cartList[i].is_settle) {
  362. result = false;
  363. break;
  364. }
  365. }
  366. if(!result) {
  367. return
  368. }
  369. uni.showModal({
  370. title: '确定要清空吗?',
  371. content: '清空后,已点的商品会被删除',
  372. success: (res) => {
  373. if (res.confirm) {
  374. emptyTableData({
  375. tableId: this.info.tableId
  376. }).then(res => {
  377. this.$util.Tips({
  378. title: '清空成功'
  379. });
  380. this.getCartNum();
  381. this.getCartList(1);
  382. });
  383. }
  384. }
  385. });
  386. },
  387. ChangeOneDel: function(id, index) {
  388. let that = this,
  389. list = that.cartData.cartList,
  390. storeId = uni.getStorageSync('user_store_id');
  391. cartDel(id.toString(), storeId).then(res => {
  392. list.splice(index, 1);
  393. if (!list.length) {
  394. that.cartData.iScart = false;
  395. that.page = 1;
  396. that.loadend = false;
  397. that.tempArr = [];
  398. that.getProducts();
  399. };
  400. that.getCartNum();
  401. if (!cart) {
  402. that.getCartList(1);
  403. }
  404. })
  405. },
  406. getCartLists() {
  407. if (this.footerOpen) {
  408. this.getCartList();
  409. } else {
  410. this.footerOpen = true;
  411. }
  412. },
  413. getCartList(iSshow) {
  414. let that = this;
  415. let {
  416. store_id,
  417. tableId
  418. } = this.info;
  419. getCateList({
  420. store_id,
  421. tableId
  422. }).then(res => {
  423. that.$set(that.cartData, 'cartList', res.data);
  424. if (res.data.length) {
  425. that.$set(that.cartData, 'iScart', iSshow ? false : !that.cartData.iScart);
  426. } else {
  427. that.$set(that.cartData, 'iScart', false);
  428. }
  429. that.getTotalPrice();
  430. });
  431. },
  432. closeList(e) {
  433. this.$set(this.cartData, 'iScart', e);
  434. },
  435. // 获取购物车商品数量
  436. getCartNum: function() {
  437. let {
  438. store_id,
  439. tableId
  440. } = this.info;
  441. getCartCount({
  442. store_id,
  443. tableId
  444. }).then(res => {
  445. this.cartNum = res.data.count;
  446. this.setTimer('getCartNum', this.getCartNum);
  447. });
  448. },
  449. onMyEvent: function() {
  450. this.$set(this.attr, 'cartAttr', false);
  451. },
  452. /**
  453. * 默认选中属性
  454. *
  455. */
  456. DefaultSelect: function() {
  457. let productAttr = this.attr.productAttr;
  458. let value = [];
  459. for (let key in this.productValue) {
  460. if (this.productValue[key].stock > 0) {
  461. value = this.attr.productAttr.length ? key.split(",") : [];
  462. break;
  463. }
  464. }
  465. for (let i = 0; i < productAttr.length; i++) {
  466. this.$set(productAttr[i], "index", value[i]);
  467. }
  468. //sort();排序函数:数字-英文-汉字;
  469. let productSelect = this.productValue[value.join(",")];
  470. if (productSelect && productAttr.length) {
  471. this.$set(
  472. this.attr.productSelect,
  473. "store_name",
  474. this.storeName
  475. );
  476. this.$set(this.attr.productSelect, "image", productSelect.image);
  477. this.$set(this.attr.productSelect, "price", productSelect.price);
  478. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  479. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  480. this.$set(this.attr.productSelect, "cart_num", 1);
  481. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  482. this.$set(this, "attrValue", value.join(","));
  483. } else if (!productSelect && productAttr.length) {
  484. this.$set(
  485. this.attr.productSelect,
  486. "store_name",
  487. this.storeName
  488. );
  489. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  490. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  491. this.$set(this.attr.productSelect, "stock", 0);
  492. this.$set(this.attr.productSelect, "unique", "");
  493. this.$set(this.attr.productSelect, "cart_num", 0);
  494. this.$set(this, "attrValue", "");
  495. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  496. } else if (!productSelect && !productAttr.length) {
  497. this.$set(
  498. this.attr.productSelect,
  499. "store_name",
  500. this.storeName
  501. );
  502. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  503. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  504. this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
  505. this.$set(
  506. this.attr.productSelect,
  507. "unique",
  508. this.storeInfo.unique || ""
  509. );
  510. this.$set(this.attr.productSelect, "cart_num", 1);
  511. this.$set(this, "attrValue", "");
  512. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  513. }
  514. },
  515. /**
  516. * 属性变动赋值
  517. *
  518. */
  519. ChangeAttr: function(res) {
  520. let productSelect = this.productValue[res];
  521. if (productSelect && productSelect.stock > 0) {
  522. this.$set(this.attr.productSelect, "image", productSelect.image);
  523. this.$set(this.attr.productSelect, "price", productSelect.price);
  524. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  525. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  526. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  527. this.$set(this.attr.productSelect, "cart_num", 1);
  528. this.$set(this, "attrValue", res);
  529. } else if (productSelect && productSelect.stock == 0) {
  530. this.$set(this.attr.productSelect, "image", productSelect.image);
  531. this.$set(this.attr.productSelect, "price", productSelect.price);
  532. this.$set(this.attr.productSelect, "stock", 0);
  533. this.$set(this.attr.productSelect, "unique", "");
  534. this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
  535. this.$set(this.attr.productSelect, "cart_num", 0);
  536. this.$set(this, "attrValue", "");
  537. } else {
  538. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  539. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  540. this.$set(this.attr.productSelect, "stock", 0);
  541. this.$set(this.attr.productSelect, "unique", "");
  542. this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
  543. this.$set(this.attr.productSelect, "cart_num", 0);
  544. this.$set(this, "attrValue", "");
  545. }
  546. },
  547. attrVal(val) {
  548. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
  549. .indexn]);
  550. },
  551. /**
  552. * 购物车手动填写
  553. *
  554. */
  555. iptCartNum: function(e) {
  556. this.$set(this.attr.productSelect, 'cart_num', e);
  557. },
  558. // 点击默认单属性购物车
  559. goCartDan(item, index) {
  560. if (!this.isLogin) {
  561. this.getIsLogin();
  562. } else {
  563. this.tempArr[index].cart_num = 1;
  564. this.$set(this, 'tempArr', this.tempArr);
  565. this.goCat(0, item.id, 1);
  566. }
  567. },
  568. // 改变单属性购物车
  569. ChangeCartNumDan(changeValue, index, item) {
  570. let num = this.tempArr[index];
  571. let stock = this.tempArr[index].stock;
  572. if (!changeValue && num.is_settle) {
  573. return
  574. }
  575. this.ChangeCartNum(changeValue, num, stock, 0, item.id);
  576. },
  577. // 改变多属性购物车
  578. ChangeCartNumDuo(changeValue) {
  579. //获取当前变动属性
  580. let productSelect = this.productValue[this.attrValue];
  581. //如果没有属性,赋值给商品默认库存
  582. if (productSelect === undefined && !this.attr.productAttr.length)
  583. productSelect = this.attr.productSelect;
  584. //无属性值即库存为0;不存在加减;
  585. if (productSelect === undefined) return;
  586. let stock = productSelect.stock || 0;
  587. let num = this.attr.productSelect;
  588. this.ChangeCartNum(changeValue, num, stock, 1, this.id);
  589. },
  590. // 已经加入购物车时的购物加减;
  591. ChangeCartList(changeValue, index) {
  592. let list = this.cartData.cartList;
  593. let num = list[index];
  594. let stock = list[index].trueStock;
  595. if (!changeValue && num.is_settle) {
  596. return
  597. }
  598. this.ChangeCartNum(changeValue, num, stock, 0, num.product_id, index, 1);
  599. if (!list.length) {
  600. this.cartData.iScart = false;
  601. this.page = 1;
  602. this.loadend = false;
  603. this.tempArr = [];
  604. this.getProducts();
  605. }
  606. },
  607. // 购物车加减计算函数
  608. ChangeCartNum(changeValue, num, stock, isDuo, id, index, cart) {
  609. if (changeValue) {
  610. num.cart_num++;
  611. if (num.cart_num > stock) {
  612. if (isDuo) {
  613. this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
  614. this.$set(this, "cart_num", stock ? stock : 1);
  615. } else {
  616. num.cart_num = stock ? stock : 0;
  617. this.$set(this, 'tempArr', this.tempArr);
  618. this.$set(this.cartData, 'cartList', this.cartData.cartList);
  619. }
  620. return this.$util.Tips({
  621. title: "该产品没有更多库存了"
  622. });
  623. } else {
  624. if (!isDuo) {
  625. if (cart) {
  626. this.goCat(0, id, 1, 1, num.product_attr_unique);
  627. this.getTotalPrice();
  628. this.tempArr.forEach((item) => {
  629. if (item.id == id) {
  630. item.cart_num++;
  631. }
  632. })
  633. } else {
  634. this.goCat(0, id, 1);
  635. }
  636. } else {
  637. this.tempArr.forEach((item) => {
  638. if (item.id == id) {
  639. item.cart_num++;
  640. }
  641. })
  642. }
  643. }
  644. } else {
  645. num.cart_num--;
  646. if (num.cart_num == 0) {
  647. this.cartData.cartList.splice(index, 1);
  648. if (isDuo) {
  649. this.$set(this.attr.productSelect, "cart_num", 1);
  650. this.$set(this, "cart_num", 1);
  651. }
  652. }
  653. if (num.cart_num < 0) {
  654. if (isDuo) {
  655. this.$set(this.attr.productSelect, "cart_num", 1);
  656. this.$set(this, "cart_num", 1);
  657. } else {
  658. num.cart_num = 0;
  659. this.$set(this, 'tempArr', this.tempArr);
  660. this.$set(this.cartData, 'cartList', this.cartData.cartList);
  661. }
  662. } else {
  663. if (!isDuo) {
  664. if (cart) {
  665. this.goCat(0, id, 0, 1, num.product_attr_unique);
  666. this.getTotalPrice();
  667. this.tempArr.forEach((item) => {
  668. if (item.id == id) {
  669. item.cart_num--;
  670. }
  671. })
  672. } else {
  673. this.goCat(0, id, 0);
  674. }
  675. } else {
  676. this.tempArr.forEach((item) => {
  677. if (item.id == id) {
  678. item.cart_num--;
  679. }
  680. })
  681. }
  682. }
  683. }
  684. },
  685. // 多规格加入购物车;
  686. goCatNum() {
  687. this.goCat(1, this.id, 1);
  688. },
  689. /*
  690. * 加入购物车
  691. */
  692. goCat: function(duo, id, type, cart, unique) {
  693. let that = this;
  694. if (duo) {
  695. let productSelect = that.productValue[this.attrValue];
  696. //如果有属性,没有选择,提示用户选择
  697. if (
  698. that.attr.productAttr.length &&
  699. productSelect === undefined
  700. )
  701. return that.$util.Tips({
  702. title: "产品库存不足,请选择其它属性"
  703. });
  704. }
  705. let q = {
  706. productId: id,
  707. cartNum: duo ? that.attr.productSelect.cart_num : 1,
  708. isAdd: type,
  709. uniqueId: duo ? that.attr.productSelect.unique : cart ? unique : "",
  710. tableId: this.info.tableId,
  711. storeId: this.info.id,
  712. };
  713. addTableCate(q).then(res => {
  714. if (duo) {
  715. that.attr.cartAttr = false;
  716. that.$util.Tips({
  717. title: "添加购物车成功"
  718. });
  719. // that.page = 1;
  720. // that.loadend = false;
  721. that.tempArr.forEach((item, index) => {
  722. if (item.id == that.id) {
  723. let arrtStock = that.attr.productSelect.stock
  724. let objNum = parseInt(item.cart_num) + parseInt(that.attr.productSelect.cart_num);
  725. item.cart_num = objNum > arrtStock ? arrtStock : objNum
  726. }
  727. })
  728. // that.productslist();
  729. }
  730. that.getCartNum();
  731. if (!cart) {
  732. that.getCartList(1);
  733. }
  734. }).catch(err => {
  735. that.$util.Tips({
  736. title: err
  737. });
  738. });
  739. },
  740. goCartDuo(item) {
  741. if (!this.isLogin) {
  742. this.getIsLogin();
  743. } else {
  744. this.storeName = item.store_name;
  745. this.getAttrs(item.id);
  746. this.$set(this, 'id', item.id);
  747. this.$set(this.attr, 'cartAttr', true);
  748. }
  749. },
  750. getIsLogin() {
  751. toLogin();
  752. },
  753. // 商品详情接口;
  754. getAttrs(id) {
  755. let that = this;
  756. getAttr(id, 0).then(res => {
  757. that.$set(that.attr, 'productAttr', res.data.productAttr);
  758. that.$set(that, 'productValue', res.data.productValue);
  759. that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
  760. that.$set(that, 'storeInfo', res.data.storeInfo);
  761. that.DefaultSelect();
  762. })
  763. },
  764. openTap() {
  765. this.iSlong = false
  766. },
  767. closeTap() {
  768. this.iSlong = true
  769. },
  770. // 分类数据
  771. getAllCategory: function() {
  772. let that = this;
  773. getStoreCategory().then(res => {
  774. let data = res.data;
  775. data.forEach(item => {
  776. item.children.unshift({
  777. 'id': 0,
  778. 'cate_name': '全部商品'
  779. })
  780. })
  781. that.categoryTitle = data[0].cate_name;
  782. that.cid = data[0].id;
  783. that.sid = 0;
  784. that.navActive = 0;
  785. that.tabClick = 0;
  786. that.categoryList = data;
  787. that.categoryErList = res.data[0].children ? res.data[0].children : [];
  788. that.page = 1;
  789. that.loadend = false;
  790. that.tempArr = [];
  791. that.getProducts();
  792. })
  793. },
  794. tapNav(index, item) {
  795. uni.pageScrollTo({
  796. duration: 0,
  797. scrollTop: 0
  798. })
  799. let list = this.categoryList[index];
  800. this.navActive = index;
  801. this.categoryTitle = list.cate_name;
  802. this.categoryErList = item.children ? item.children : [];
  803. this.tabClick = 0;
  804. this.tabLeft = 0;
  805. this.cid = list.id;
  806. this.sid = 0;
  807. this.page = 1;
  808. this.loadend = false;
  809. this.tempArr = [];
  810. this.getProducts();
  811. },
  812. // 导航栏点击
  813. longClick(index) {
  814. if (this.categoryErList.length > 3) {
  815. this.tabLeft = (index - 1) * (this.isWidth + 6) //设置下划线位置
  816. };
  817. this.tabClick = index; //设置导航点击了哪一个
  818. this.iSlong = true;
  819. this.sid = this.categoryErList[index].id;
  820. this.page = 1;
  821. this.loadend = false;
  822. this.tempArr = [];
  823. this.getProducts();
  824. },
  825. goodsListScroll() {
  826. this.footerOpen = false;
  827. },
  828. },
  829. }
  830. </script>
  831. <style lang="scss">
  832. .safe-area-inset-bottom {
  833. height: constant(safe-area-inset-bottom);
  834. height: env(safe-area-inset-bottom);
  835. }
  836. .mp-header {
  837. .serch-wrapper {
  838. height: 100%;
  839. /* #ifdef MP */
  840. padding: 0 210rpx 0 32rpx;
  841. /* #endif */
  842. .input {
  843. flex: 1;
  844. min-width: 0;
  845. height: 58rpx;
  846. padding: 0 0 0 32rpx;
  847. border-radius: 29rpx;
  848. background: #F5F5F5;
  849. color: #999999;
  850. font-size: 24rpx;
  851. .iconfont {
  852. margin-right: 18rpx;
  853. font-size: 28rpx;
  854. }
  855. }
  856. }
  857. }
  858. /deep/.product-window.joinCart {
  859. z-index: 999;
  860. }
  861. ::-webkit-scrollbar {
  862. width: 0;
  863. height: 0;
  864. color: transparent;
  865. display: none;
  866. }
  867. .goodCate {
  868. flex-wrap: nowrap;
  869. height: 100vh;
  870. background: #FFFFFF;
  871. /deep/.mask {
  872. z-index: 99;
  873. }
  874. /deep/.attrProduct {
  875. .mask {
  876. z-index: 100;
  877. }
  878. }
  879. .conter {
  880. flex: 1;
  881. flex-wrap: nowrap;
  882. min-height: 0;
  883. .aside {
  884. width: 168rpx;
  885. background: #F5F5F5;
  886. .item {
  887. height: 100rpx;
  888. width: 100%;
  889. font-size: 26rpx;
  890. color: #333333;
  891. &.on {
  892. background-color: #FFFFFF;
  893. width: 100%;
  894. text-align: center;
  895. color: var(--view-theme);
  896. font-weight: 500;
  897. position: relative;
  898. &::after {
  899. content: "";
  900. position: absolute;
  901. width: 6rpx;
  902. height: 46rpx;
  903. background: var(--view-theme);
  904. border-radius: 0 4rpx 4rpx 0;
  905. left: 0
  906. }
  907. }
  908. }
  909. }
  910. .wrapper {
  911. flex: 1;
  912. flex-wrap: nowrap;
  913. min-width: 0;
  914. .bgcolor {
  915. flex-wrap: nowrap;
  916. }
  917. .mask {
  918. z-index: 9;
  919. }
  920. .longTab {
  921. flex: 1;
  922. min-width: 0;
  923. height: 104rpx;
  924. .longItem {
  925. display: inline-block;
  926. height: 56rpx;
  927. border-radius: 28rpx;
  928. margin-left: 16rpx;
  929. background: #F5F5F5;
  930. vertical-align: middle;
  931. text-align: center;
  932. font-size: 24rpx;
  933. line-height: 54rpx;
  934. color: #333333;
  935. .inner {
  936. height: 56rpx;
  937. border: 1rpx solid transparent;
  938. border-radius: 28rpx;
  939. transform: rotateZ(360deg);
  940. }
  941. &.click {
  942. background: var(--view-theme);
  943. color: var(--view-theme);
  944. .inner {
  945. background: rgba(255, 255, 255, 0.9);
  946. background-clip: content-box;
  947. }
  948. }
  949. }
  950. .underlineBox {
  951. height: 3px;
  952. width: 20%;
  953. display: flex;
  954. align-content: center;
  955. justify-content: center;
  956. transition: .5s;
  957. .underline {
  958. width: 33rpx;
  959. height: 4rpx;
  960. background-color: #FFFFFF;
  961. }
  962. }
  963. }
  964. .openList {
  965. width: 92rpx;
  966. height: 104rpx;
  967. text-align: center;
  968. line-height: 104rpx;
  969. .btn {
  970. display: inline-block;
  971. width: 56rpx;
  972. height: 56rpx;
  973. border-radius: 28rpx;
  974. background: #F5F5F5;
  975. line-height: 56rpx;
  976. }
  977. .iconfont {
  978. font-size: 32rpx;
  979. color: #333333;
  980. }
  981. }
  982. .goodsListWrap {
  983. flex: 1;
  984. min-height: 0;
  985. }
  986. .goodsList {
  987. margin-top: 0rpx;
  988. padding: 0 30rpx 0 20rpx;
  989. /deep/.item {
  990. margin-bottom: 33rpx !important;
  991. .text {
  992. font-size: 26rpx;
  993. }
  994. .bottom {
  995. .sales {
  996. .money {
  997. font-size: 34rpx;
  998. text {
  999. font-size: 26rpx;
  1000. }
  1001. }
  1002. }
  1003. .cart {
  1004. .pictrue {
  1005. width: 50rpx;
  1006. height: 50rpx;
  1007. }
  1008. }
  1009. }
  1010. }
  1011. }
  1012. }
  1013. }
  1014. .footer {
  1015. position: fixed;
  1016. right: 20rpx;
  1017. left: 20rpx;
  1018. bottom: 40rpx;
  1019. bottom: calc(40rpx + constant(safe-area-inset-bottom));
  1020. bottom: calc(40rpx + env(safe-area-inset-bottom));
  1021. z-index: 151;
  1022. .cartIcon {
  1023. position: absolute;
  1024. bottom: 0;
  1025. left: 0;
  1026. width: 96rpx;
  1027. height: 96rpx;
  1028. border-radius: 48rpx;
  1029. background: linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
  1030. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  1031. .image-wrap {
  1032. width: 96rpx;
  1033. height: 96rpx;
  1034. border-radius: 48rpx;
  1035. text-align: center;
  1036. line-height: 96rpx;
  1037. }
  1038. .image {
  1039. width: 54rpx;
  1040. height: 54rpx;
  1041. vertical-align: middle;
  1042. }
  1043. }
  1044. .inner-box {
  1045. position: absolute;
  1046. bottom: 0;
  1047. left: 0;
  1048. width: 96rpx;
  1049. height: 96rpx;
  1050. border-radius: 48rpx;
  1051. overflow: hidden;
  1052. transition: 0.3s;
  1053. &.open {
  1054. width: 100%;
  1055. }
  1056. }
  1057. .inner {
  1058. flex-wrap: nowrap;
  1059. height: 96rpx;
  1060. padding: 0 12rpx 0 128rpx;
  1061. border-radius: 48rpx;
  1062. background: #333333;
  1063. }
  1064. .btn {
  1065. width: 186rpx;
  1066. height: 72rpx;
  1067. padding: 0 32rpx;
  1068. background: linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
  1069. border-radius: 36rpx;
  1070. text-align: center;
  1071. font-weight: 500;
  1072. font-size: 26rpx;
  1073. line-height: 72rpx;
  1074. color: #FFFFFF;
  1075. }
  1076. }
  1077. }
  1078. .downTab {
  1079. position: fixed;
  1080. top: 0;
  1081. left: 0;
  1082. z-index: 102;
  1083. flex-wrap: nowrap;
  1084. width: 100%;
  1085. max-height: 500rpx;
  1086. border-radius: 0rpx 0rpx 32rpx 32rpx;
  1087. background: #FFFFFF;
  1088. overflow: hidden;
  1089. .title {
  1090. padding: 32rpx 0 24rpx 30rpx;
  1091. font-size: 32rpx;
  1092. line-height: 44rpx;
  1093. color: #333333;
  1094. .closeList {
  1095. width: 90rpx;
  1096. height: 100%;
  1097. line-height: 100rpx;
  1098. padding-left: 30rpx;
  1099. transform: rotate(180deg);
  1100. .iconfont {
  1101. font-size: 22rpx;
  1102. color: #666666;
  1103. }
  1104. }
  1105. }
  1106. .scroll-view {
  1107. flex: 1;
  1108. min-height: 0;
  1109. overflow: auto;
  1110. }
  1111. .children {
  1112. padding: 0 0 0 30rpx;
  1113. .item {
  1114. display: inline-block;
  1115. width: 154rpx;
  1116. height: 56rpx;
  1117. border-radius: 28rpx;
  1118. margin: 0 24rpx 24rpx 0;
  1119. background: #F5F5F5;
  1120. vertical-align: middle;
  1121. text-align: center;
  1122. font-size: 24rpx;
  1123. line-height: 54rpx;
  1124. color: #333333;
  1125. .inner {
  1126. height: 56rpx;
  1127. border: 1rpx solid transparent;
  1128. border-radius: 28rpx;
  1129. transform: rotateZ(360deg);
  1130. }
  1131. &.click {
  1132. background: var(--view-theme);
  1133. color: var(--view-theme);
  1134. .inner {
  1135. background: rgba(255, 255, 255, 0.9);
  1136. background-clip: content-box;
  1137. }
  1138. }
  1139. }
  1140. }
  1141. .closeList {
  1142. height: 80rpx;
  1143. border-top: 1rpx solid #EEEEEE;
  1144. transform: rotateZ(360deg);
  1145. text-align: center;
  1146. font-size: 24rpx;
  1147. line-height: 80rpx;
  1148. color: #999999;
  1149. .iconfont {
  1150. margin-left: 4rpx;
  1151. font-size: 24rpx;
  1152. }
  1153. }
  1154. }
  1155. </style>