index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <view class="content">
  3. <u-swiper height="320" :list="imageTopList" ></u-swiper>
  4. <!-- 导航按钮 -->
  5. <view class="nav">
  6. <u-grid :col="4" :border="false" @click="toPage">
  7. <u-grid-item :index="1">
  8. <u-image width="90rpx" height="90rpx" src="/static/zhinan.png"></u-image>
  9. <view class="grid-text">回收分类</view>
  10. </u-grid-item>
  11. <u-grid-item :index="1">
  12. <u-image width="90rpx" height="90rpx" src="/static/liucheng.png"></u-image>
  13. <view class="grid-text">使用指南</view>
  14. </u-grid-item>
  15. <u-grid-item :index="2">
  16. <u-image width="90rpx" height="90rpx" src="/static/shouyi.png"></u-image>
  17. <view class="grid-text">乐豆收益</view>
  18. </u-grid-item>
  19. <u-grid-item :index="3">
  20. <u-image width="90rpx" height="90rpx" src="/static/hexiao.png"></u-image>
  21. <view class="grid-text">扫码核销</view>
  22. </u-grid-item>
  23. </u-grid>
  24. </view>
  25. <!-- 网点 -->
  26. <view class="storeList">
  27. <u-section title="附近的回收机" :right="false" line-color="#01c9b2" class="store-section"></u-section>
  28. <view class="stores-box">
  29. <view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
  30. <view class="item-con">
  31. <image src="/static/md-icon.png" class="item-icon"></image>
  32. <view class="s-name item-main">{{ item.name }}</view>
  33. </view>
  34. <view class="item-con">
  35. <image src="/static/dz-icon.png" class="item-icon"></image>
  36. <view class="s-address item-main">
  37. <view>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</view>
  38. <view>
  39. <u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
  40. {{ item.distanct.distance ? (item.distanct.distance / 1000).toFixed(1) : 0 }}KM
  41. <u-icon name="arrow-right" color="#999" size="20"></u-icon>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="item-con">
  46. <image src="/static/time-icon.png" class="item-icon"></image>
  47. <view class="s-time item-main">
  48. <view>
  49. 营业时间:
  50. <text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd">
  51. {{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
  52. </text>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import {
  63. getCartList,
  64. addGoodsToCart,
  65. deleteGoodsFormCart,
  66. updateGoodsBuyQty
  67. } from '@/api/shoppingCart.js'
  68. import {bannerList} from '@/api/banner.js'
  69. import {
  70. getLookUpDatas
  71. } from '@/api/data.js'
  72. import { stationList } from '@/api/station.js'
  73. export default {
  74. data() {
  75. return {
  76. imageTopList: [],
  77. stationDataList: [] // 附近网点列表
  78. }
  79. },
  80. onLoad() {
  81. // 获取订单状态数据字典
  82. this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
  83. // 获取顶部轮播图
  84. this.getbannerList()
  85. // 获取经纬度
  86. this.getLocation()
  87. // 查询购物车列表
  88. this.getCartList()
  89. // 加入购物车
  90. uni.$on("addCart",item =>{
  91. this.addGoodToCart(item)
  92. })
  93. // 删除购物车的商品
  94. uni.$on("delCartGood",item => {
  95. this.delGoodFormCart(item)
  96. })
  97. // 更新购物车商品数量
  98. uni.$on("updateGoodsBuyQty",item=>{
  99. this.updateGoodsBuyQty(item)
  100. })
  101. },
  102. methods: {
  103. // 获取数据字典
  104. getCodeList(code,key) {
  105. getLookUpDatas({
  106. type: code
  107. }).then(res => {
  108. if (res.status == 200) {
  109. this.$u.vuex(key, res.data)
  110. }
  111. })
  112. },
  113. // 获取经纬度
  114. getLocation() {
  115. const _this = this;
  116. uni.getLocation({
  117. type: 'wgs84',
  118. success: function(res) {
  119. _this.getStationList(res.longitude, res.latitude)
  120. },
  121. fail: function(error) {
  122. console.log(error)
  123. uni.showToast({ icon: 'none', title: '定位失败' })
  124. }
  125. });
  126. },
  127. // 获取网点列表
  128. getStationList(lng, lat) {
  129. stationList({ lng: lng, lat: lat }).then(res => {
  130. if (res.status == 200) {
  131. this.stationDataList = res.data
  132. } else {
  133. this.stationDataList = []
  134. }
  135. });
  136. },
  137. // 获取banner
  138. getbannerList(){
  139. bannerList({type:'banner',location:'HOME_TOP'}).then(res=>{
  140. if(res.status==200){
  141. this.imageTopList=res.data
  142. }
  143. })
  144. },
  145. // 查询购物车
  146. getCartList(){
  147. getCartList({}).then(res => {
  148. console.log(res)
  149. if(res.status == 200){
  150. this.$u.vuex('vuex_cartList', res.data)
  151. }
  152. })
  153. },
  154. // 添加购物车
  155. addGoodToCart(item){
  156. addGoodsToCart(item).then(res => {
  157. if(res.status == 200){
  158. uni.showToast({
  159. title:"商品添加成功",
  160. icon:"none"
  161. })
  162. // 刷新购物车
  163. this.getCartList()
  164. }
  165. })
  166. },
  167. // 删除购物车
  168. delGoodFormCart(ids){
  169. uni.showLoading({
  170. mask: true,
  171. title: "删除中..."
  172. })
  173. deleteGoodsFormCart({idList:ids}).then(res => {
  174. if(res.status == 200){
  175. uni.showToast({
  176. title:"商品删除成功",
  177. icon:"none"
  178. })
  179. // 刷新购物车
  180. this.getCartList()
  181. }
  182. uni.hideLoading()
  183. })
  184. },
  185. // 更新商品数量
  186. updateGoodsBuyQty(item){
  187. uni.showLoading({
  188. mask: true,
  189. title: "更新数量中..."
  190. })
  191. updateGoodsBuyQty(item).then(res => {
  192. uni.hideLoading()
  193. })
  194. },
  195. // 更多商品
  196. toGoods(clsId){
  197. uni.navigateTo({
  198. url:"/pages/goods/goods?id="+clsId
  199. })
  200. },
  201. // 快速导航
  202. toPage(e){
  203. let path=[
  204. '/pages/userCenter/zhinan',
  205. '/pages/userCenter/liucheng',
  206. '/pages/userCenter/ldDetailed',
  207. ''
  208. ]
  209. if(path[e]!=''){
  210. uni.navigateTo({
  211. url: path[e]
  212. })
  213. }else{
  214. // 核销
  215. this.smHx()
  216. }
  217. },
  218. // 扫码核销
  219. smHx(){
  220. uni.navigateTo({
  221. url: '/pages/checkOut/checkOut'
  222. })
  223. return
  224. uni.scanCode({
  225. success(e) {
  226. console.log(e)
  227. },
  228. fail(err) {
  229. console.log(err)
  230. }
  231. })
  232. },
  233. // 查看网点
  234. viewStore(item){
  235. uni.navigateTo({
  236. url: '/pages/store/store?id=' + item.id + '&stationNo=' + item.stationNo
  237. })
  238. }
  239. }
  240. }
  241. </script>
  242. <style lang="scss" scoped>
  243. .content {
  244. // background: url(../../static/topBg.png) no-repeat top center;
  245. // background-size: 100%;
  246. width: 100%;
  247. .nav {
  248. margin: 20upx 0;
  249. border-radius: 15upx;
  250. box-shadow: 0upx 3upx 6upx #eee;
  251. overflow: hidden;
  252. .grid-text {
  253. padding-top: 10upx;
  254. }
  255. }
  256. .storeList {
  257. padding: 25upx 20upx 20upx;
  258. .store-section {
  259. display: block;
  260. margin-bottom: 20rpx;
  261. }
  262. .stores-box {
  263. padding-top: 5upx;
  264. .stores-item {
  265. background: #ffffff;
  266. border-radius: 15upx;
  267. box-shadow: 0upx 3upx 6upx #eee;
  268. border-bottom: 1px solid #f8f8f8;
  269. padding: 10upx 20upx;
  270. margin-bottom: 20rpx;
  271. &:last-child {
  272. border: 0;
  273. }
  274. .item-con {
  275. display: flex;
  276. &:last-child {
  277. .item-main {
  278. border: none;
  279. }
  280. }
  281. .item-icon {
  282. width: 34rpx;
  283. height: 34rpx;
  284. margin-right: 10rpx;
  285. flex-shrink: 0;
  286. padding: 18rpx 0;
  287. }
  288. .item-main {
  289. font-size: 24rpx;
  290. color: #666;
  291. padding: 18rpx 0;
  292. border-bottom: 1rpx solid #f2f2f2;
  293. flex-grow: 1;
  294. }
  295. .s-address {
  296. display: flex;
  297. align-items: center;
  298. justify-content: space-between;
  299. }
  300. }
  301. }
  302. }
  303. }
  304. }
  305. </style>