index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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 {getLookUpDatas} from '@/api/data.js'
  70. import {stationList} from '@/api/station.js'
  71. export default {
  72. data() {
  73. return {
  74. imageTopList: [],
  75. stationDataList: [] // 附近网点列表
  76. }
  77. },
  78. onLoad() {
  79. // 获取订单状态数据字典
  80. this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
  81. // 获取顶部轮播图
  82. this.getbannerList()
  83. // 获取经纬度
  84. this.getLocation()
  85. // 查询购物车列表
  86. this.getCartList()
  87. // 加入购物车
  88. uni.$on("addCart",item =>{
  89. this.addGoodToCart(item)
  90. })
  91. // 删除购物车的商品
  92. uni.$on("delCartGood",item => {
  93. this.delGoodFormCart(item)
  94. })
  95. // 更新购物车商品数量
  96. uni.$on("updateGoodsBuyQty",item=>{
  97. this.updateGoodsBuyQty(item)
  98. })
  99. },
  100. methods: {
  101. // 获取数据字典
  102. getCodeList(code,key) {
  103. getLookUpDatas({
  104. type: code
  105. }).then(res => {
  106. if (res.status == 200) {
  107. this.$u.vuex(key, res.data)
  108. }
  109. })
  110. },
  111. // 获取经纬度
  112. getLocation() {
  113. const _this = this;
  114. uni.getLocation({
  115. type: 'wgs84',
  116. success: function(res) {
  117. _this.getStationList(res.longitude, res.latitude)
  118. },
  119. fail: function(error) {
  120. console.log(error)
  121. uni.showToast({ icon: 'none', title: '定位失败' })
  122. }
  123. });
  124. },
  125. // 获取网点列表
  126. getStationList(lng, lat) {
  127. stationList({ lng: lng, lat: lat }).then(res => {
  128. if (res.status == 200) {
  129. this.stationDataList = res.data
  130. } else {
  131. this.stationDataList = []
  132. }
  133. });
  134. },
  135. // 获取banner
  136. getbannerList(){
  137. bannerList({type:'banner',location:'HOME_TOP'}).then(res=>{
  138. if(res.status==200){
  139. this.imageTopList=res.data
  140. }
  141. })
  142. },
  143. // 查询购物车
  144. getCartList(){
  145. getCartList({}).then(res => {
  146. console.log(res)
  147. if(res.status == 200){
  148. this.$u.vuex('vuex_cartList', res.data)
  149. }
  150. })
  151. },
  152. // 添加购物车
  153. addGoodToCart(item){
  154. addGoodsToCart(item).then(res => {
  155. if(res.status == 200){
  156. uni.showToast({
  157. title:"商品添加成功",
  158. icon:"none"
  159. })
  160. // 刷新购物车
  161. this.getCartList()
  162. }
  163. })
  164. },
  165. // 删除购物车
  166. delGoodFormCart(ids){
  167. uni.showLoading({
  168. mask: true,
  169. title: "删除中..."
  170. })
  171. deleteGoodsFormCart({idList:ids}).then(res => {
  172. if(res.status == 200){
  173. uni.showToast({
  174. title:"商品删除成功",
  175. icon:"none"
  176. })
  177. // 刷新购物车
  178. this.getCartList()
  179. }
  180. uni.hideLoading()
  181. })
  182. },
  183. // 更新商品数量
  184. updateGoodsBuyQty(item){
  185. uni.showLoading({
  186. mask: true,
  187. title: "更新数量中..."
  188. })
  189. updateGoodsBuyQty(item).then(res => {
  190. uni.hideLoading()
  191. })
  192. },
  193. // 更多商品
  194. toGoods(clsId){
  195. uni.navigateTo({
  196. url:"/pages/goods/goods?id="+clsId
  197. })
  198. },
  199. // 快速导航
  200. toPage(e){
  201. let path=[
  202. '/pages/userCenter/zhinan',
  203. '/pages/userCenter/liucheng',
  204. '/pages/userCenter/ldDetailed',
  205. ''
  206. ]
  207. if(path[e]!=''){
  208. uni.navigateTo({
  209. url: path[e]
  210. })
  211. }else{
  212. // 核销
  213. this.smHx()
  214. }
  215. },
  216. // 扫码核销
  217. smHx(){
  218. uni.navigateTo({
  219. url: '/pages/checkOut/checkOut'
  220. })
  221. return
  222. uni.scanCode({
  223. success(e) {
  224. console.log(e)
  225. },
  226. fail(err) {
  227. console.log(err)
  228. }
  229. })
  230. },
  231. // 查看网点
  232. viewStore(item){
  233. uni.navigateTo({
  234. url: '/pages/store/store?id=' + item.id + '&stationNo=' + item.stationNo
  235. })
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="scss" scoped>
  241. .content {
  242. // background: url(../../static/topBg.png) no-repeat top center;
  243. // background-size: 100%;
  244. width: 100%;
  245. .nav {
  246. margin: 20upx 0;
  247. border-radius: 15upx;
  248. box-shadow: 0upx 3upx 6upx #eee;
  249. overflow: hidden;
  250. .grid-text {
  251. padding-top: 10upx;
  252. }
  253. }
  254. .storeList {
  255. padding: 25upx 20upx 20upx;
  256. .store-section {
  257. display: block;
  258. margin-bottom: 20rpx;
  259. }
  260. .stores-box {
  261. padding-top: 5upx;
  262. .stores-item {
  263. background: #ffffff;
  264. border-radius: 15upx;
  265. box-shadow: 0upx 3upx 6upx #eee;
  266. border-bottom: 1px solid #f8f8f8;
  267. padding: 10upx 20upx;
  268. margin-bottom: 20rpx;
  269. &:last-child {
  270. border: 0;
  271. }
  272. .item-con {
  273. display: flex;
  274. &:last-child {
  275. .item-main {
  276. border: none;
  277. }
  278. }
  279. .item-icon {
  280. width: 34rpx;
  281. height: 34rpx;
  282. margin-right: 10rpx;
  283. flex-shrink: 0;
  284. padding: 18rpx 0;
  285. }
  286. .item-main {
  287. font-size: 24rpx;
  288. color: #666;
  289. padding: 18rpx 0;
  290. border-bottom: 1rpx solid #f2f2f2;
  291. flex-grow: 1;
  292. }
  293. .s-address {
  294. display: flex;
  295. align-items: center;
  296. justify-content: space-between;
  297. }
  298. }
  299. }
  300. }
  301. }
  302. }
  303. </style>