index.vue 6.0 KB

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