Commit 8cfe981a3271a7edb2d77c5e899eafd5d3abba65
1 parent
646a65287b
Exists in
master
修改
Showing
1 changed file
with
60 additions
and
49 deletions
Show diff stats
src/pages/index/index.vue
| ... | ... | @@ -22,11 +22,11 @@ |
| 22 | 22 | </view> |
| 23 | 23 | </view> |
| 24 | 24 | </view> |
| 25 | - <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> | |
| 25 | + <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> | |
| 26 | 26 | <view class="close"> |
| 27 | 27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> |
| 28 | 28 | </view> |
| 29 | - </uni-drawer> | |
| 29 | + </Uni-drawer> | |
| 30 | 30 | |
| 31 | 31 | |
| 32 | 32 | |
| ... | ... | @@ -34,16 +34,17 @@ |
| 34 | 34 | <view class="content-wrap"> |
| 35 | 35 | <view> |
| 36 | 36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> |
| 37 | - <!-- 占位 --> | |
| 38 | - <view class="place"></view> | |
| 39 | 37 | <!-- 商品列表 --> |
| 40 | 38 | <view class="goods-list"> |
| 41 | 39 | <view class="product-list"> |
| 42 | - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)"> | |
| 43 | - <image mode="widthFix" :src="goods.img"></image> | |
| 40 | + <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | |
| 41 | + <image mode="widthFix" :src="goods.img" ></image> | |
| 44 | 42 | <view class="name">{{goods.name}}</view> |
| 45 | 43 | <view class="info"> |
| 44 | + <view class="priceBox"> | |
| 46 | 45 | <view class="price">{{goods.price}}</view> |
| 46 | + <view class="originCost">{{goods.originCost}}</view> | |
| 47 | + </view> | |
| 47 | 48 | <view class="slogan">{{goods.slogan}}</view> |
| 48 | 49 | </view> |
| 49 | 50 | </view> |
| ... | ... | @@ -57,12 +58,12 @@ |
| 57 | 58 | </template> |
| 58 | 59 | |
| 59 | 60 | <script> |
| 60 | - import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"; | |
| 61 | + import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; | |
| 61 | 62 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; |
| 62 | 63 | import data from '@/common/data.js';//筛选菜单数据 |
| 63 | 64 | export default { |
| 64 | 65 | components: { |
| 65 | - uniDrawer, | |
| 66 | + 'UniDrawer':UniDrawer, | |
| 66 | 67 | 'HMfilterDropdown':HMfilterDropdown |
| 67 | 68 | }, |
| 68 | 69 | data() { |
| ... | ... | @@ -80,16 +81,16 @@ |
| 80 | 81 | valueArr:'', |
| 81 | 82 | //商品数据 |
| 82 | 83 | goodsList:[ |
| 83 | - { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 84 | - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 85 | - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 86 | - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 87 | - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 88 | - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 89 | - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 90 | - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 91 | - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }, | |
| 92 | - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' } | |
| 84 | + { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 85 | + { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 86 | + { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 87 | + { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 88 | + { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 89 | + { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 90 | + { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 91 | + { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 92 | + { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | |
| 93 | + { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | |
| 93 | 94 | ], |
| 94 | 95 | loadingText:"正在加载...", |
| 95 | 96 | filterDropdownValue:[], |
| ... | ... | @@ -103,20 +104,20 @@ |
| 103 | 104 | }, |
| 104 | 105 | onLoad: function () { |
| 105 | 106 | //定时器模拟ajax异步请求数据 |
| 106 | - setTimeout(()=>{ | |
| 107 | - //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | |
| 108 | - this.filterDropdownValue = [ | |
| 109 | - [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | |
| 110 | - [null,null], //第1个菜单选中 都不选中 | |
| 111 | - [1], //第2个菜单选中 一级菜单的第1项 | |
| 112 | - [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | |
| 113 | - [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | |
| 114 | - ]; | |
| 107 | + // setTimeout(()=>{ | |
| 108 | + // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | |
| 109 | + // this.filterDropdownValue = [ | |
| 110 | + // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | |
| 111 | + // [null,null], //第1个菜单选中 都不选中 | |
| 112 | + // [1], //第2个菜单选中 一级菜单的第1项 | |
| 113 | + // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | |
| 114 | + // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | |
| 115 | + // ]; | |
| 115 | 116 | this.filterData = data; |
| 116 | - },100); | |
| 117 | - //模拟ajax请求子菜单数据。 | |
| 117 | + // },100); | |
| 118 | + // 模拟ajax请求子菜单数据。 | |
| 118 | 119 | // setTimeout(()=>{ |
| 119 | - //this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; | |
| 120 | + // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; | |
| 120 | 121 | // },5000) |
| 121 | 122 | }, |
| 122 | 123 | methods: { |
| ... | ... | @@ -149,6 +150,9 @@ |
| 149 | 150 | |
| 150 | 151 | ] |
| 151 | 152 | } |
| 153 | + }, | |
| 154 | + toGoods(id){ | |
| 155 | + console.log(id) | |
| 152 | 156 | } |
| 153 | 157 | }, |
| 154 | 158 | onNavigationBarButtonTap(e) { |
| ... | ... | @@ -167,7 +171,7 @@ |
| 167 | 171 | let end_goods_id = this.goodsList[len-1].goods_id; |
| 168 | 172 | for(let i=1;i<=10;i++){ |
| 169 | 173 | let goods_id = end_goods_id+i; |
| 170 | - let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }; | |
| 174 | + let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; | |
| 171 | 175 | this.goodsList.push(p); |
| 172 | 176 | } |
| 173 | 177 | }, |
| ... | ... | @@ -193,12 +197,11 @@ |
| 193 | 197 | z-index: 999; |
| 194 | 198 | position: fixed; |
| 195 | 199 | top: 0; |
| 200 | + left: 0; | |
| 196 | 201 | } |
| 197 | 202 | .searchBar { |
| 198 | 203 | width: 670rpx; |
| 199 | 204 | display: flex; |
| 200 | - position: fixed; | |
| 201 | - top: 0; | |
| 202 | 205 | justify-content: center; |
| 203 | 206 | align-items: center; |
| 204 | 207 | box-sizing: border-box; |
| ... | ... | @@ -216,8 +219,6 @@ |
| 216 | 219 | box-sizing: border-box; |
| 217 | 220 | } |
| 218 | 221 | .screenBar{ |
| 219 | - position: fixed; | |
| 220 | - top: 68rpx; | |
| 221 | 222 | width: 670rpx; |
| 222 | 223 | height: 110rpx; |
| 223 | 224 | display: flex; |
| ... | ... | @@ -241,15 +242,11 @@ |
| 241 | 242 | } |
| 242 | 243 | |
| 243 | 244 | .HMfilterDropdown{ |
| 244 | - position: fixed; | |
| 245 | 245 | top: 178rpx !important; |
| 246 | 246 | } |
| 247 | - .place{ | |
| 248 | - background-color: #ffffff; | |
| 249 | - height: 266rpx; | |
| 250 | - } | |
| 247 | + | |
| 251 | 248 | .goods-list{ |
| 252 | - padding-top: 10px; | |
| 249 | + padding-top: 286rpx; | |
| 253 | 250 | .loading-text{ |
| 254 | 251 | width: 100%; |
| 255 | 252 | display: flex; |
| ... | ... | @@ -274,6 +271,7 @@ |
| 274 | 271 | image{ |
| 275 | 272 | width: 100%; |
| 276 | 273 | border-radius: 10px 10px 0 0; |
| 274 | + height: 184rpx; | |
| 277 | 275 | } |
| 278 | 276 | .name{ |
| 279 | 277 | width: 92%; |
| ... | ... | @@ -283,22 +281,35 @@ |
| 283 | 281 | -webkit-line-clamp: 2; |
| 284 | 282 | text-align: justify; |
| 285 | 283 | overflow: hidden; |
| 286 | - font-size: 15px; | |
| 284 | + font-size: 24rpx; | |
| 285 | + color: #333333; | |
| 287 | 286 | } |
| 288 | 287 | .info{ |
| 289 | 288 | display: flex; |
| 290 | 289 | justify-content: space-between; |
| 291 | - align-items: flex-end; | |
| 290 | + align-items: center; | |
| 292 | 291 | width: 92%; |
| 293 | 292 | padding: 5px 4% 5px 4%; |
| 294 | - .price{ | |
| 295 | - color: #e65339; | |
| 296 | - font-size: 15px; | |
| 297 | - font-weight: 600; | |
| 293 | + .priceBox{ | |
| 294 | + display: flex; | |
| 295 | + justify-content: space-between; | |
| 296 | + align-items: center; | |
| 297 | + .price{ | |
| 298 | + color: #EB5D3B; | |
| 299 | + font-size: 28rpx; | |
| 300 | + font-weight: 600; | |
| 301 | + margin-right: 10rpx; | |
| 302 | + } | |
| 303 | + .originCost{ | |
| 304 | + text-decoration:line-through; | |
| 305 | + color: #999999; | |
| 306 | + font-size: 20rpx; | |
| 307 | + } | |
| 308 | + | |
| 298 | 309 | } |
| 299 | 310 | .slogan{ |
| 300 | - color: #807c87; | |
| 301 | - font-size: 12px; | |
| 311 | + color: #999999; | |
| 312 | + font-size: 20rpx; | |
| 302 | 313 | } |
| 303 | 314 | } |
| 304 | 315 | } | ... | ... |