index.vue 5.4 KB

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