index.vue 6.6 KB

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