index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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. } from '@/api/shoppingCart.js'
  55. export default {
  56. data() {
  57. return {
  58. imageTopList:[
  59. {image:'/static/banner.png'},
  60. {image:'/static/banner1.png'}
  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.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. methods: {
  93. // 查询购物车
  94. getCartList(){
  95. getCartList({}).then(res => {
  96. console.log(res)
  97. if(res.status == 200){
  98. this.$u.vuex('vuex_cartList', res.data)
  99. }
  100. })
  101. },
  102. // 添加购物车
  103. addGoodToCart(item){
  104. addGoodsToCart(item).then(res => {
  105. if(res.status == 200){
  106. uni.showToast({
  107. title:"商品添加成功",
  108. icon:"none"
  109. })
  110. // 刷新购物车
  111. this.getCartList()
  112. }
  113. })
  114. },
  115. // 删除购物车
  116. delGoodFormCart(id){
  117. deleteGoodsFormCart({id:id}).then(res => {
  118. if(res.status == 200){
  119. uni.showToast({
  120. title:"商品删除成功",
  121. icon:"none"
  122. })
  123. // 刷新购物车
  124. this.getCartList()
  125. }
  126. })
  127. },
  128. // 更多商品
  129. toGoods(clsId){
  130. uni.navigateTo({
  131. url:"/pages/goods/goods?id="+clsId
  132. })
  133. },
  134. // 快速导航
  135. toPage(e){
  136. let path=[
  137. '/pages/userCenter/zhinan',
  138. '/pages/userCenter/liucheng',
  139. '/pages/userCenter/ledouRecord',
  140. ''
  141. ]
  142. if(path[e]!=''){
  143. uni.navigateTo({
  144. url: path[e]
  145. })
  146. }else{
  147. // 核销
  148. this.smHx()
  149. }
  150. },
  151. // 扫码核销
  152. smHx(){
  153. uni.navigateTo({
  154. url: '/pages/checkOut/checkOut'
  155. })
  156. return
  157. uni.scanCode({
  158. success(e) {
  159. console.log(e)
  160. },
  161. fail(err) {
  162. console.log(err)
  163. }
  164. })
  165. },
  166. // 查看网点
  167. viewStore(item){
  168. uni.navigateTo({
  169. url: "/pages/store/store"
  170. })
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="scss" scoped>
  176. .content {
  177. background: url(../../static/topBg.png) no-repeat top center;
  178. background-size: 100%;
  179. width: 100%;
  180. .nav{
  181. margin: 20upx 0;
  182. border-radius: 15upx;
  183. box-shadow: 0upx 3upx 6upx #eee;
  184. overflow: hidden;
  185. .grid-text{
  186. padding-top: 10upx;
  187. }
  188. }
  189. .storeList{
  190. padding: 25upx 20upx 20upx;
  191. background: #FFFFFF;
  192. border-radius: 15upx;
  193. box-shadow: 0upx 3upx 6upx #eee;
  194. .stores-box{
  195. padding-top: 5upx;
  196. .stores-item{
  197. border-bottom: 1px solid #F8F8F8;
  198. padding: 20upx 10upx;
  199. &:last-child{
  200. border: 0;
  201. }
  202. > view{
  203. padding: 10upx 0;
  204. display: flex;
  205. align-items: center;
  206. }
  207. .s-address,.s-time{
  208. justify-content: space-between;
  209. color: #666;
  210. font-size: 24rpx;
  211. }
  212. .s-address{
  213. > view{
  214. &:last-child{
  215. font-size: 24rpx;
  216. width: 30%;
  217. display: flex;
  218. align-items: center;
  219. justify-content: flex-end;
  220. }
  221. }
  222. }
  223. }
  224. }
  225. }
  226. }
  227. </style>