index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  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="0">
  8. <u-image width="72rpx" height="72rpx" 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="72rpx" height="72rpx" 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="72rpx" height="72rpx" 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="72rpx" height="72rpx" 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 3" @click="viewStore(item)">
  30. <view class="s-name">
  31. <view>
  32. 网点名称啊撒地方就拉萨附近士大夫
  33. </view>
  34. </view>
  35. <view class="s-address">
  36. <view><text>陕西西安高新二路十字103号</text></view>
  37. <view><u-icon name="map-fill" color="#01c9b2" size="30"></u-icon> 1.3KM</view>
  38. </view>
  39. <view class="s-time">
  40. <view>
  41. 营业时间:<text>9:00 - 11:00 , 12:00 - 17:00</text>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import {
  51. getCartList,
  52. addGoodsToCart,
  53. deleteGoodsFormCart,
  54. updateGoodsBuyQty
  55. } from '@/api/shoppingCart.js'
  56. import {bannerList} from '@/api/banner.js'
  57. export default {
  58. data() {
  59. return {
  60. imageTopList:[
  61. ],
  62. goodsList:[
  63. {
  64. id: 21312312321,
  65. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  66. src: '/static/goods.png',
  67. price: 300,
  68. status: 0
  69. },
  70. {
  71. id: 6465465465,
  72. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  73. src: '/static/goods.png',
  74. price: 50,
  75. status: 1
  76. },
  77. ]
  78. }
  79. },
  80. onLoad() {
  81. // 获取顶部轮播图
  82. this.getbannerList()
  83. // 查询购物车列表
  84. this.getCartList()
  85. // 加入购物车
  86. uni.$on("addCart",item =>{
  87. this.addGoodToCart(item)
  88. })
  89. // 删除购物车的商品
  90. uni.$on("delCartGood",item => {
  91. this.delGoodFormCart(item)
  92. })
  93. // 更新购物车商品数量
  94. uni.$on("updateGoodsBuyQty",item=>{
  95. this.updateGoodsBuyQty(item)
  96. })
  97. },
  98. methods: {
  99. // 获取banner
  100. getbannerList(){
  101. bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
  102. if(res.status==200){
  103. this.imageTopList=res.data
  104. }
  105. })
  106. },
  107. // 查询购物车
  108. getCartList(){
  109. getCartList({}).then(res => {
  110. console.log(res)
  111. if(res.status == 200){
  112. this.$u.vuex('vuex_cartList', res.data)
  113. }
  114. })
  115. },
  116. // 添加购物车
  117. addGoodToCart(item){
  118. addGoodsToCart(item).then(res => {
  119. if(res.status == 200){
  120. uni.showToast({
  121. title:"商品添加成功",
  122. icon:"none"
  123. })
  124. // 刷新购物车
  125. this.getCartList()
  126. }
  127. })
  128. },
  129. // 删除购物车
  130. delGoodFormCart(ids){
  131. uni.showLoading({
  132. mask: true,
  133. title: "删除中..."
  134. })
  135. deleteGoodsFormCart({idList:ids}).then(res => {
  136. if(res.status == 200){
  137. uni.showToast({
  138. title:"商品删除成功",
  139. icon:"none"
  140. })
  141. // 刷新购物车
  142. this.getCartList()
  143. }
  144. uni.hideLoading()
  145. })
  146. },
  147. // 更新商品数量
  148. updateGoodsBuyQty(item){
  149. uni.showLoading({
  150. mask: true,
  151. title: "更新数量中..."
  152. })
  153. updateGoodsBuyQty(item).then(res => {
  154. uni.hideLoading()
  155. })
  156. },
  157. // 更多商品
  158. toGoods(clsId){
  159. uni.navigateTo({
  160. url:"/pages/goods/goods?id="+clsId
  161. })
  162. },
  163. // 快速导航
  164. toPage(e){
  165. let path=[
  166. '/pages/userCenter/zhinan',
  167. '/pages/userCenter/liucheng',
  168. '/pages/userCenter/ledouRecord',
  169. ''
  170. ]
  171. if(path[e]!=''){
  172. uni.navigateTo({
  173. url: path[e]
  174. })
  175. }else{
  176. // 核销
  177. this.smHx()
  178. }
  179. },
  180. // 扫码核销
  181. smHx(){
  182. uni.navigateTo({
  183. url: '/pages/checkOut/checkOut'
  184. })
  185. return
  186. uni.scanCode({
  187. success(e) {
  188. console.log(e)
  189. },
  190. fail(err) {
  191. console.log(err)
  192. }
  193. })
  194. },
  195. // 查看网点
  196. viewStore(item){
  197. uni.navigateTo({
  198. url: "/pages/store/store"
  199. })
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="scss" scoped>
  205. .content {
  206. background: url(../../static/topBg.png) no-repeat top center;
  207. background-size: 100%;
  208. width: 100%;
  209. .nav{
  210. margin: 20upx 0;
  211. border-radius: 15upx;
  212. box-shadow: 0upx 3upx 6upx #eee;
  213. overflow: hidden;
  214. .grid-text{
  215. padding-top: 10upx;
  216. }
  217. }
  218. .storeList{
  219. padding: 25upx 20upx 20upx;
  220. background: #FFFFFF;
  221. border-radius: 15upx;
  222. box-shadow: 0upx 3upx 6upx #eee;
  223. .stores-box{
  224. padding-top: 5upx;
  225. .stores-item{
  226. border-bottom: 1px solid #F8F8F8;
  227. padding: 20upx 10upx;
  228. &:last-child{
  229. border: 0;
  230. }
  231. > view{
  232. padding: 10upx 0;
  233. display: flex;
  234. align-items: center;
  235. }
  236. .s-address,.s-time{
  237. justify-content: space-between;
  238. color: #666;
  239. font-size: 24rpx;
  240. }
  241. .s-address{
  242. > view{
  243. &:last-child{
  244. font-size: 24rpx;
  245. width: 30%;
  246. display: flex;
  247. align-items: center;
  248. justify-content: flex-end;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. }
  255. }
  256. </style>