index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  3. <tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
  4. <view class="C1b1b1b pb-40">
  5. <view class="sousuo">
  6. <tm-pickersCity level="city" class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity"
  7. :default-value="addr">
  8. <view>
  9. <text class="text-size-n">{{addr[1]}}</text>
  10. <tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
  11. </view>
  12. </tm-pickersCity>
  13. <tm-search disabled="true" v-model="soso" class="fr shuruk" color="white" confirm-text="" @click="sosoFun"></tm-search>
  14. </view>
  15. <view style="clear: both;"></view>
  16. </view>
  17. <view class="lunbo">
  18. <tm-swiper :previmage="false" @change="lunboFun" :list="list" :height="400" :current="current"></tm-swiper>
  19. <tm-translate class="anniu1 fl" :auto="true" ref="a_1" :duration="80" animation-name="zoomIn">
  20. <image v-if="current!=0" @click="xia()" class="qiehuan" src="/static/img/68.png" mode="widthFix">
  21. </image>
  22. </tm-translate>
  23. <tm-translate class="anniu2 fr" :auto="true" ref="a_5" :duration="80" animation-name="zoomIn">
  24. <image v-if="current<(list.length-1)" @click="shang()" class="qiehuan" src="/static/img/67.png"
  25. mode="widthFix"></image>
  26. </tm-translate>
  27. </view>
  28. <view class="zhuti">
  29. <tm-sheet :shadow="24" class="jiaoxi">
  30. <tm-grid @change="zhonglei" class="mt-20 mb-20" :grid="5" :list="list3" :icon-size="120"
  31. font-color="white"></tm-grid>
  32. </tm-sheet>
  33. <!-- <tm-sheet :shadow="24" class="jiaoxi xiao">
  34. <view class="yifu1 fl">
  35. <image src="/static/img/78.png" mode="widthFix"></image>
  36. </view>
  37. <view class="yifu2 fr">
  38. <image class="yifu21" src="/static/img/77.png" mode="widthFix"></image>
  39. <view>
  40. <image style="width:50%;" src="/static/img/75.png" mode="widthFix"></image>
  41. <image style="width:50%;" class="yifu21" src="/static/img/76.png" mode="widthFix"></image>
  42. </view>
  43. </view>
  44. <view style="clear: both;"></view>
  45. </tm-sheet> -->
  46. <tm-sheet :shadow="24" class="jiaoxi xiao">
  47. <tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title"
  48. @change="changeTab(activeIndex)"></tm-tabs>
  49. </tm-sheet>
  50. <tm-sheet :shadow="24" class="jiaoxi xiao" style="height:160px;">
  51. <tm-dragGrid :list="list1" :col="3" disabled="false" class="mt-40 mb-40 remen" :icon-size="160"
  52. v-if="list1.length!=0">
  53. <template v-slot:default="{item}">
  54. <view class="flex-center flex-col" @click="tiaozhuan()">
  55. <tm-icons :size="160" :name="item.icon" :color="item.color"></tm-icons>
  56. <text class="text-size-m text-white pt-10">{{item.text}}</text>
  57. <text class="text-size-m text-white pt-10">{{item.jie}}</text>
  58. </view>
  59. </template>
  60. </tm-dragGrid>
  61. </tm-sheet>
  62. </view>
  63. <view class="guanggao" @click="xiangqing">
  64. <image style="width:100%;" src="/static/img/82.png" mode="widthFix"></image>
  65. <view class="wenzi">
  66. <view class="mt-10">额外打九折</view>
  67. <view>高达75%的折扣!</view>
  68. </view>
  69. </view>
  70. <view style="height:160px;" class="mt-40 jiage pt-40">
  71. <tm-dragGrid :list="list4" :col="3" disabled="false" class="remen" :icon-size="160" v-if="list4.length!=0">
  72. <template v-slot:default="{item}">
  73. <view class="flex-center flex-col" @click.stop="goXiangQing(item)">
  74. <tm-icons :size="200" :name="item.icon" :color="item.color"></tm-icons>
  75. <text class="text-size-m text-white pt-10">{{item.text}}</text>
  76. <text class="text-size-m text-white pt-10">{{item.jie}}</text>
  77. </view>
  78. </template>
  79. </tm-dragGrid>
  80. </view>
  81. <tm-sheet :shadow="24" class="jiaoxi xiao">
  82. <tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list5" range-key="title"></tm-tabs>
  83. </tm-sheet>
  84. <!-- 单品 -->
  85. <view class="zhuti shangpin">
  86. <tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
  87. <tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-on:goXiangQing="goXiangQing(item)"
  88. v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
  89. </tm-cartCellListFood>
  90. </tm-sheet>
  91. </view>
  92. <view v-if="gouwuche.length!=0" class="fudong" @click="qugowuche">
  93. <image src="../../static/img/87.png" mode="widthFix"></image>
  94. <view class="shuzigwc">{{gouwuche.length}}</view>
  95. </view>
  96. <view class="" v-if="isBottom" style="width: 100%;display: flex;justify-content: center;align-items: center;">
  97. 没有更多了~
  98. </view>
  99. <view style="width:100%;height:60px;"></view>
  100. <!-- 弹出层消息 -->
  101. <tm-message ref="toast"></tm-message>
  102. </view>
  103. </template>
  104. <script>
  105. import {
  106. myRequest
  107. } from '@/api/request.js'
  108. import qqmapsdk from '../../js_sdk/qqmap-wx-jssdk.js'
  109. const QQMapWX = new qqmapsdk({
  110. key: 'KNABZ-OAVCJ-O5IFJ-KBNST-SVIIZ-2EB3G'
  111. });
  112. export default {
  113. data() {
  114. return {
  115. isBottom: false,
  116. current: 0,
  117. activeIndex: 0,
  118. soso: '',
  119. addr: ['江西省', '南昌市', '西湖区'],
  120. value: '',
  121. list: [],
  122. list1: [],
  123. list2: ['热门', '折扣'],
  124. list3: [],
  125. list4: [],
  126. list5: ['推荐单品'],
  127. test: [],
  128. typeclick: 1, //1加入购物车,2购物车
  129. gouwuche: [],
  130. page: 1,
  131. total: 0
  132. };
  133. },
  134. onLoad() {
  135. },
  136. onShow() {
  137. this.getGwc()
  138. },
  139. created() {
  140. this.sys = uni.getSystemInfoSync();
  141. this.getSort()
  142. this.getBanner()
  143. this.changeTab(1);
  144. this.getHot();
  145. this.getRecommend()
  146. this.getGwc()
  147. this.getCity()
  148. },
  149. onReachBottom() {
  150. this.loadMore()
  151. },
  152. methods: {
  153. getCity() {
  154. var that = this;
  155. uni.getLocation({
  156. type: 'wgs84',
  157. geocode: true,
  158. success: (res) => {
  159. console.log("获取经纬度成功");
  160. this.latitude = res.latitude;
  161. this.longitude = res.longitude;
  162. },
  163. fail: () => {
  164. console.log("获取经纬度失败");
  165. },
  166. complete: () => {
  167. // 解析地址
  168. QQMapWX.reverseGeocoder({
  169. location: {
  170. latitude: this.latitude,
  171. longitude: this.longitude
  172. },
  173. success: function(res) {
  174. console.log("解析地址成功");
  175. console.log(res);
  176. // 省
  177. let province = res.result.ad_info.province;
  178. // 市
  179. let city = res.result.ad_info.city;
  180. //区
  181. let district = res.result.ad_info.district;
  182. that.addr = [province, city, district];
  183. console.log(province);
  184. console.log(city);
  185. console.log(district);
  186. },
  187. fail: function(res) {
  188. // uni.showToast({
  189. // title: '定位失败',
  190. // duration: 2000,
  191. // icon: "none"
  192. // })
  193. console.log(res);
  194. },
  195. complete: function(res) {
  196. console.log(res);
  197. }
  198. })
  199. }
  200. })
  201. },
  202. getGwc() {
  203. let that = this;
  204. myRequest({
  205. url: "/api/ShopCart/shopCartList",
  206. method: 'get',
  207. data: that.reqData
  208. }).then(res => {
  209. if (res.data.code == 200) {
  210. that.gouwuche = res.data.data;
  211. } else {
  212. that.gouwuche = []
  213. }
  214. })
  215. },
  216. getBanner() {
  217. let that = this;
  218. myRequest({
  219. url: "/api/Banner/bannerList",
  220. method: 'get',
  221. data: that.reqData
  222. }).then(res => {
  223. if (res.data.code == 200) {
  224. res.data.data.forEach(item => {
  225. that.list.push({
  226. src: item.image,
  227. })
  228. })
  229. } else {
  230. that.$refs.toast.show({
  231. model: 'error',
  232. label: res.data.msg
  233. })
  234. }
  235. })
  236. },
  237. //获取分类
  238. getSort() {
  239. let that = this;
  240. myRequest({
  241. url: "/api/ShopGoods/getMallClassification",
  242. method: 'get',
  243. data: that.reqData
  244. }).then(res => {
  245. if (res.data.code == 200) {
  246. res.data.data.forEach(item => {
  247. that.list3.push({
  248. icon: item.image,
  249. text: item.category_name
  250. })
  251. })
  252. } else {
  253. that.$refs.toast.show({
  254. model: 'error',
  255. label: res.data.msg
  256. })
  257. }
  258. })
  259. },
  260. // 热门、折扣
  261. changeTab(activeIndex) {
  262. let that = this;
  263. myRequest({
  264. url: "/api/ShopGoods/thenBuckle",
  265. method: 'post',
  266. data: {
  267. 'type': that.activeIndex + 1
  268. }
  269. }).then(res => {
  270. if (res.data.code == 200) {
  271. that.list1 = [];
  272. res.data.data.forEach(item => {
  273. that.list1.push({
  274. icon: item.image,
  275. text: item.category_name
  276. })
  277. })
  278. } else {
  279. that.$refs.toast.show({
  280. model: 'error',
  281. label: res.data.msg
  282. })
  283. }
  284. })
  285. },
  286. // 获取热门下商品
  287. getHot() {
  288. let that = this;
  289. myRequest({
  290. url: "/api/ShopGoods/popularGoods",
  291. method: 'get',
  292. }).then(res => {
  293. if (res.data.code == 200) {
  294. console.log(res.data.data, '22');
  295. res.data.data.forEach(item => {
  296. that.list4.push({
  297. icon: item.image,
  298. text: item.goods_name,
  299. id: item.id,
  300. category_id: item.category_id,
  301. jie: item.sale_price,
  302. sale_num: item.sale_num,
  303. stock_num: item.stock_num
  304. })
  305. })
  306. that.list4 = that.list4.slice(0, 3);
  307. } else {
  308. that.$refs.toast.show({
  309. model: 'error',
  310. label: res.data.msg
  311. })
  312. }
  313. })
  314. },
  315. // 获取推荐单品列表
  316. getRecommend() {
  317. // this.page = 1;
  318. let that = this;
  319. // that.test = [];
  320. myRequest({
  321. url: "/api/ShopGoods/recommend",
  322. method: 'get',
  323. data: {
  324. page: that.page
  325. }
  326. }).then(res => {
  327. console.log(res.data.data);
  328. if (res.data.code == 200) {
  329. res.data.data.list.forEach(item => {
  330. that.test.push({
  331. img: item.image,
  332. title: item.goods_name,
  333. price: item.sale_price,
  334. id: item.id,
  335. category_id: item.category_id,
  336. sale_num: item.sale_num,
  337. stock_num: item.stock_num,
  338. is_recommend: item.is_recommend,
  339. })
  340. })
  341. that.total = res.data.data.count;
  342. } else {
  343. that.$refs.toast.show({
  344. model: 'error',
  345. label: res.data.msg
  346. })
  347. }
  348. })
  349. },
  350. // 加载更多
  351. loadMore() {
  352. if (this.test.length < this.total) {
  353. this.isBottom = false;
  354. this.page++;
  355. this.getRecommend()
  356. } else {
  357. this.isBottom = true;
  358. }
  359. },
  360. tiaozhuan() {
  361. uni.navigateTo({
  362. url: "/pages/gengduo/index",
  363. })
  364. },
  365. // 广告详情
  366. xiangqing() {
  367. // uni.navigateTo({
  368. // url: "/pages/shopdetail/index",
  369. // })
  370. },
  371. // 去商品详情页
  372. goXiangQing(data) {
  373. console.log(data);
  374. uni.navigateTo({
  375. url: "/pages/shopdetail/index?cartId=" + data.id + '&classId=' + data.category_id,
  376. })
  377. },
  378. lunboFun(e) {
  379. this.current = e;
  380. },
  381. okCity(e) {
  382. console.log(e);
  383. this.addr = e;
  384. },
  385. qugowuche() {
  386. uni.navigateTo({
  387. url: "/pages/gouwuche/index",
  388. })
  389. },
  390. sosoFun() {
  391. uni.navigateTo({
  392. url: "/pages/shopsoso/index",
  393. })
  394. },
  395. shang() {
  396. this.$refs.a_5.play()
  397. this.current = this.current + 1;
  398. },
  399. xia() {
  400. this.$refs.a_1.play()
  401. this.current = this.current - 1;
  402. },
  403. // 加入购物车
  404. jiarufuFun(data) {
  405. var that = this;
  406. console.log(data)
  407. if (data.type == 2) {
  408. myRequest({
  409. url: "/api/ShopCart/addShopCart",
  410. method: 'post',
  411. data: {
  412. goods_id: data.data.id,
  413. // goods_name: data.data.title,
  414. // goods_image: data.data.img,
  415. // goods_price: data.data.price,
  416. goods_num: 1
  417. }
  418. }).then(res => {
  419. if (res.data.code == 200) {
  420. that.$refs.toast.show({
  421. model: 'success',
  422. label: res.data.msg
  423. })
  424. that.getGwc()
  425. } else {
  426. that.$refs.toast.show({
  427. model: 'error',
  428. label: res.data.msg
  429. })
  430. }
  431. })
  432. }
  433. // else {
  434. // uni.navigateTo({
  435. // url: "/pages/shopdetail/index",
  436. // })
  437. // }
  438. },
  439. zhonglei(e) {
  440. uni.navigateTo({
  441. url: "/pages/gengduo/index",
  442. })
  443. }
  444. },
  445. }
  446. </script>
  447. <style lang="scss">
  448. /deep/ .tm-menubars .body {
  449. background-color: #1b1b1b !important;
  450. }
  451. /deep/ .icon-search {
  452. font-size: 23px !important;
  453. color: #8E8E93 !important;
  454. }
  455. /deep/ .tm-search {
  456. width: 80%;
  457. background-color: #414141 !important;
  458. border-radius: 10px;
  459. }
  460. /deep/ .tm-search .grey-darken-5 {
  461. background-color: #414141 !important;
  462. }
  463. .dingwei {
  464. width: 21%;
  465. margin-top: 3%;
  466. }
  467. .shuruk {
  468. width: 77%;
  469. }
  470. .sousuo {
  471. width: 94%;
  472. margin: 0 auto;
  473. }
  474. .qiehuan {
  475. width: 40px;
  476. height: 40px;
  477. }
  478. .lunbo {
  479. position: relative;
  480. }
  481. .anniu1 {
  482. position: absolute;
  483. top: 0px;
  484. z-index: 9999;
  485. top: 43%;
  486. left: 0;
  487. }
  488. .anniu2 {
  489. position: absolute;
  490. top: 0px;
  491. z-index: 9999;
  492. top: 43%;
  493. right: 0;
  494. }
  495. /deep/ .jiaoxi {
  496. margin: 0 !important;
  497. padding: 8px !important;
  498. }
  499. /deep/ .tm-col {
  500. width: 20% !important;
  501. }
  502. .yifu1 {
  503. width: 40%;
  504. }
  505. .yifu2 {
  506. width: 58%;
  507. }
  508. .yifu1 image,
  509. .yifu21 {
  510. width: 100%;
  511. }
  512. .xiao {
  513. margin-top: 15px !important;
  514. }
  515. /deep/ .qiehuan1 .text-primary {
  516. color: white !important;
  517. }
  518. .guanggao {
  519. position: relative;
  520. }
  521. .wenzi {
  522. position: absolute;
  523. bottom: 1px;
  524. right: 0px;
  525. background: #000000;
  526. width: 140px;
  527. height: 55px;
  528. font-size: 14px;
  529. text-align: center;
  530. }
  531. /deep/ .jiage {
  532. background: #1b1b1b;
  533. }
  534. /deep/ .shangpin .white.bk {
  535. background-color: #1b1b1b !important;
  536. }
  537. /deep/ .shangpin .tm-cartCellListFood {
  538. padding: 0px 0px 15px 0px !important;
  539. margin-top: 5px !important;
  540. margin-bottom: 20px !important;
  541. border-bottom: 1px solid #303030;
  542. }
  543. /deep/ .shangpin .border-t-1.bk {
  544. border-top: 1px solid #1b1b1b !important;
  545. }
  546. /deep/ .shangpin .round-3 {
  547. width: 90px !important;
  548. height: 90px !important;
  549. }
  550. /deep/ .shangpin .tm-cartCellListFood-img {
  551. width: 90px !important;
  552. height: 90px !important;
  553. }
  554. .fudong {
  555. position: fixed;
  556. right: 30px;
  557. bottom: 80px;
  558. background: #0DABF2;
  559. width: 60px;
  560. height: 60px;
  561. border-radius: 30px;
  562. text-align: center;
  563. }
  564. .fudong image {
  565. width: 40px;
  566. margin-top: 6px;
  567. }
  568. .shuzigwc {
  569. color: white;
  570. font-weight: 700;
  571. position: absolute;
  572. right: 5px;
  573. background: red;
  574. padding: 2px;
  575. border-radius: 30px;
  576. top: 2px;
  577. width: 15px;
  578. height: 15px;
  579. font-size: 12px;
  580. }
  581. /deep/ .shangpin .title {
  582. color: white !important;
  583. }
  584. /deep/ .shangpin .text-red {
  585. color: white !important;
  586. }
  587. </style>