Commit 0444517bf05bc667da124c2197e02dc22165a28a
1 parent
9ff2df1bf3
Exists in
master
商品卡片高度添加
Showing
2 changed files
with
2 additions
and
1 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="card" @tap="toGoods(goods.id)"> | 2 | <view class="card" @tap="toGoods(goods.id)"> |
| 3 | <image mode="widthFix" :src="goods.imgurl" ></image> | 3 | <image mode="widthFix" :src="goods.imgurl" ></image> |
| 4 | <view class="name">{{goods.name}}</view> | 4 | <view class="name">{{goods.name}}</view> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <view class="priceBox"> | 6 | <view class="priceBox"> |
| 7 | <view class="price">{{goods.rsSon.Min_Price}}</view> | 7 | <view class="price">{{goods.rsSon.Min_Price}}</view> |
| 8 | <view class="originCost"> | 8 | <view class="originCost"> |
| 9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} | 9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} |
| 10 | <!-- {{goods.oldPrice}} --> | 10 | <!-- {{goods.oldPrice}} --> |
| 11 | </view> | 11 | </view> |
| 12 | </view> | 12 | </view> |
| 13 | <view class="slogan">{{goods.trade_num}}</view> | 13 | <view class="slogan">{{goods.trade_num}}</view> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | </template> | 16 | </template> |
| 17 | 17 | ||
| 18 | <script> | 18 | <script> |
| 19 | export default { | 19 | export default { |
| 20 | props: { | 20 | props: { |
| 21 | /** | 21 | /** |
| 22 | * 商品数据 | 22 | * 商品数据 |
| 23 | */ | 23 | */ |
| 24 | goods: { | 24 | goods: { |
| 25 | id: Number, | 25 | id: Number, |
| 26 | imgurl: String, | 26 | imgurl: String, |
| 27 | name: String, | 27 | name: String, |
| 28 | oldPrice:String, | 28 | oldPrice:String, |
| 29 | price: String, | 29 | price: String, |
| 30 | memo:String | 30 | memo:String |
| 31 | } | 31 | } |
| 32 | 32 | ||
| 33 | }, | 33 | }, |
| 34 | created() { | 34 | created() { |
| 35 | }, | 35 | }, |
| 36 | data() { | 36 | data() { |
| 37 | return { | 37 | return { |
| 38 | 38 | ||
| 39 | }; | 39 | }; |
| 40 | }, | 40 | }, |
| 41 | methods:{ | 41 | methods:{ |
| 42 | toGoods(id){ | 42 | toGoods(id){ |
| 43 | console.log('toGoods =====> id======>', id) | 43 | console.log('toGoods =====> id======>', id) |
| 44 | uni.navigateTo({ | 44 | uni.navigateTo({ |
| 45 | url: `../detail/detail?oderId=1`, | 45 | url: `../detail/detail?oderId=1`, |
| 46 | success: res => {}, | 46 | success: res => {}, |
| 47 | fail: () => {}, | 47 | fail: () => {}, |
| 48 | complete: () => {} | 48 | complete: () => {} |
| 49 | }); | 49 | }); |
| 50 | } | 50 | } |
| 51 | } | 51 | } |
| 52 | } | 52 | } |
| 53 | </script> | 53 | </script> |
| 54 | 54 | ||
| 55 | <style lang="scss"> | 55 | <style lang="scss"> |
| 56 | image{ | 56 | image{ |
| 57 | width: 100%; | 57 | width: 100%; |
| 58 | height: 120rpx; | 58 | height: 120rpx; |
| 59 | } | 59 | } |
| 60 | .name{ | 60 | .name{ |
| 61 | width: 92%; | 61 | width: 92%; |
| 62 | height: 54rpx; | ||
| 62 | padding: 5px 4%; | 63 | padding: 5px 4%; |
| 63 | display: -webkit-box; | 64 | display: -webkit-box; |
| 64 | -webkit-box-orient: vertical; | 65 | -webkit-box-orient: vertical; |
| 65 | -webkit-line-clamp: 2; | 66 | -webkit-line-clamp: 2; |
| 66 | text-align: justify; | 67 | text-align: justify; |
| 67 | overflow: hidden; | 68 | overflow: hidden; |
| 68 | font-size: 24rpx; | 69 | font-size: 24rpx; |
| 69 | color: #333333; | 70 | color: #333333; |
| 70 | } | 71 | } |
| 71 | .info{ | 72 | .info{ |
| 72 | display: flex; | 73 | display: flex; |
| 73 | justify-content: space-between; | 74 | justify-content: space-between; |
| 74 | align-items: center; | 75 | align-items: center; |
| 75 | width: 92%; | 76 | width: 92%; |
| 76 | padding: 5px 4% 5px 4%; | 77 | padding: 5px 4% 5px 4%; |
| 77 | .priceBox{ | 78 | .priceBox{ |
| 78 | display: flex; | 79 | display: flex; |
| 79 | justify-content: space-between; | 80 | justify-content: space-between; |
| 80 | align-items: center; | 81 | align-items: center; |
| 81 | .price{ | 82 | .price{ |
| 82 | color: #EB5D3B; | 83 | color: #EB5D3B; |
| 83 | font-size: 28rpx; | 84 | font-size: 28rpx; |
| 84 | font-weight: 600; | 85 | font-weight: 600; |
| 85 | margin-right: 10rpx; | 86 | margin-right: 10rpx; |
| 86 | } | 87 | } |
| 87 | .originCost{ | 88 | .originCost{ |
| 88 | text-decoration:line-through; | 89 | text-decoration:line-through; |
| 89 | color: #999999; | 90 | color: #999999; |
| 90 | font-size: 20rpx; | 91 | font-size: 20rpx; |
| 91 | } | 92 | } |
| 92 | 93 | ||
| 93 | } | 94 | } |
| 94 | .slogan{ | 95 | .slogan{ |
| 95 | color: #999999; | 96 | color: #999999; |
| 96 | font-size: 20rpx; | 97 | font-size: 20rpx; |
| 97 | } | 98 | } |
| 98 | } | 99 | } |
| 99 | </style> | 100 | </style> |
| 100 | 101 |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> | 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> |
| 8 | </view> | 8 | </view> |
| 9 | 9 | ||
| 10 | <!-- 筛选栏--> | 10 | <!-- 筛选栏--> |
| 11 | <view class="screenBar"> | 11 | <view class="screenBar"> |
| 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> |
| 13 | <view | 13 | <view |
| 14 | class="screenItem" | 14 | class="screenItem" |
| 15 | v-bind:class="{ active: current === item.current }" | 15 | v-bind:class="{ active: current === item.current }" |
| 16 | v-if="item.current === 2" | 16 | v-if="item.current === 2" |
| 17 | @click="dropDown" | 17 | @click="dropDown" |
| 18 | > | 18 | > |
| 19 | {{ item.text }} | 19 | {{ item.text }} |
| 20 | <icon type="info" size="14"></icon> | 20 | <icon type="info" size="14"></icon> |
| 21 | </view> | 21 | </view> |
| 22 | <view | 22 | <view |
| 23 | class="screenItem" | 23 | class="screenItem" |
| 24 | v-bind:class="{ active: current === item.current }" | 24 | v-bind:class="{ active: current === item.current }" |
| 25 | v-if="item.current === 4" | 25 | v-if="item.current === 4" |
| 26 | @click="showDrawer('showRight')" | 26 | @click="showDrawer('showRight')" |
| 27 | > | 27 | > |
| 28 | {{ item.text }} | 28 | {{ item.text }} |
| 29 | <icon type="info" size="14"></icon> | 29 | <icon type="info" size="14"></icon> |
| 30 | </view> | 30 | </view> |
| 31 | <view v-if="item.current !== 2&&item.current!==4"> | 31 | <view v-if="item.current !== 2&&item.current!==4"> |
| 32 | <view | 32 | <view |
| 33 | class="screenItem" | 33 | class="screenItem" |
| 34 | v-bind:class="{ active: current === item.current }" | 34 | v-bind:class="{ active: current === item.current }" |
| 35 | >{{ item.text }}</view> | 35 | >{{ item.text }}</view> |
| 36 | </view> | 36 | </view> |
| 37 | </view> | 37 | </view> |
| 38 | </view> | 38 | </view> |
| 39 | </view> | 39 | </view> |
| 40 | <Uni-drawer | 40 | <Uni-drawer |
| 41 | ref="showRight" | 41 | ref="showRight" |
| 42 | mask="true" | 42 | mask="true" |
| 43 | maskClick="true" | 43 | maskClick="true" |
| 44 | mode="right" | 44 | mode="right" |
| 45 | :width="320" | 45 | :width="320" |
| 46 | @change="change($event,'showRight')" | 46 | @change="change($event,'showRight')" |
| 47 | > | 47 | > |
| 48 | <view class="close"> | 48 | <view class="close"> |
| 49 | <view @click="closeDrawer('showRight')"> | 49 | <view @click="closeDrawer('showRight')"> |
| 50 | <text class="word-btn-white">关闭</text> | 50 | <text class="word-btn-white">关闭</text> |
| 51 | </view> | 51 | </view> |
| 52 | </view> | 52 | </view> |
| 53 | </Uni-drawer> | 53 | </Uni-drawer> |
| 54 | 54 | ||
| 55 | <!-- 筛选菜单--> | 55 | <!-- 筛选菜单--> |
| 56 | <view class="content-wrap"> | 56 | <view class="content-wrap"> |
| 57 | <view> | 57 | <view> |
| 58 | <HMfilterDropdown | 58 | <HMfilterDropdown |
| 59 | :filterData="filterData" | 59 | :filterData="filterData" |
| 60 | :defaultSelected="filterDropdownValue" | 60 | :defaultSelected="filterDropdownValue" |
| 61 | :updateMenuName="true" | 61 | :updateMenuName="true" |
| 62 | @confirm="confirm" | 62 | @confirm="confirm" |
| 63 | data-format="Object" | 63 | data-format="Object" |
| 64 | ></HMfilterDropdown> | 64 | ></HMfilterDropdown> |
| 65 | <!-- 商品列表 --> | 65 | <!-- 商品列表 --> |
| 66 | <view class="goods-list"> | 66 | <view class="goods-list"> |
| 67 | <view class="product-list"> | 67 | <view class="product-list"> |
| 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> | 68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> |
| 69 | <Card :goods="goods"></Card> | 69 | <Card :goods="goods"></Card> |
| 70 | </view> | 70 | </view> |
| 71 | </view> | 71 | </view> |
| 72 | <view class="loading-text">{{loadingText}}</view> | 72 | <view class="loading-text">{{loadingText}}</view> |
| 73 | </view> | 73 | </view> |
| 74 | </view> | 74 | </view> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | </template> | 77 | </template> |
| 78 | 78 | ||
| 79 | <script> | 79 | <script> |
| 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; | 80 | import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; |
| 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; | 81 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; | 82 | import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; |
| 83 | import data from "@/common/data.js"; //筛选菜单数据 | 83 | import data from "@/common/data.js"; //筛选菜单数据 |
| 84 | import store from '@/store'; | 84 | import store from '@/store'; |
| 85 | 85 | ||
| 86 | export default { | 86 | export default { |
| 87 | components: { | 87 | components: { |
| 88 | UniDrawer: UniDrawer, | 88 | UniDrawer: UniDrawer, |
| 89 | HMfilterDropdown: HMfilterDropdown, | 89 | HMfilterDropdown: HMfilterDropdown, |
| 90 | Card: Card | 90 | Card: Card |
| 91 | }, | 91 | }, |
| 92 | data() { | 92 | data() { |
| 93 | return { | 93 | return { |
| 94 | screenItems: [ | 94 | screenItems: [ |
| 95 | { current: 0, text: "全部", hasIcon: false }, | 95 | { current: 0, text: "全部", hasIcon: false }, |
| 96 | { current: 1, text: "销量", hasIcon: false }, | 96 | { current: 1, text: "销量", hasIcon: false }, |
| 97 | { current: 2, text: "价格", hasIcon: true }, | 97 | { current: 2, text: "价格", hasIcon: true }, |
| 98 | { current: 3, text: "折扣", hasIcon: false }, | 98 | { current: 3, text: "折扣", hasIcon: false }, |
| 99 | { current: 4, text: "筛选", hasIcon: true } | 99 | { current: 4, text: "筛选", hasIcon: true } |
| 100 | ], | 100 | ], |
| 101 | current: 0, | 101 | current: 0, |
| 102 | showRight: false, | 102 | showRight: false, |
| 103 | indexArr: "", | 103 | indexArr: "", |
| 104 | valueArr: "", | 104 | valueArr: "", |
| 105 | // //商品数据 | 105 | // //商品数据 |
| 106 | // goodsList: [ | 106 | // goodsList: [ |
| 107 | // { | 107 | // { |
| 108 | // // goods_id: 0, | 108 | // // goods_id: 0, |
| 109 | // // img: "/static/img/goods/p1.jpg", | 109 | // // img: "/static/img/goods/p1.jpg", |
| 110 | // // name: "商品名称", | 110 | // // name: "商品名称", |
| 111 | // // originCost: "￥198", | 111 | // // originCost: "￥198", |
| 112 | // // price: "￥168", | 112 | // // price: "￥168", |
| 113 | // // slogan: "1235人浏览" | 113 | // // slogan: "1235人浏览" |
| 114 | // } | 114 | // } |
| 115 | // ], | 115 | // ], |
| 116 | loadingText: "正在加载...", | 116 | loadingText: "正在加载...", |
| 117 | filterDropdownValue: [], | 117 | filterDropdownValue: [], |
| 118 | filterData: [] | 118 | filterData: [] |
| 119 | }; | 119 | }; |
| 120 | }, | 120 | }, |
| 121 | computed: { | 121 | computed: { |
| 122 | goodsList() { | 122 | goodsList() { |
| 123 | // 也可以从 getters 获取 | 123 | // 也可以从 getters 获取 |
| 124 | console.log(this.$store.getters.list); | 124 | console.log(this.$store.getters.list); |
| 125 | return this.$store.state.test.list; | 125 | return this.$store.state.test.list; |
| 126 | } | 126 | } |
| 127 | }, | 127 | }, |
| 128 | filters: { | 128 | filters: { |
| 129 | outData(value) { | 129 | outData(value) { |
| 130 | return JSON.stringify(value); | 130 | return JSON.stringify(value); |
| 131 | } | 131 | } |
| 132 | }, | 132 | }, |
| 133 | onLoad: function() { | 133 | onLoad: function() { |
| 134 | store.dispatch('test/fetch'); | 134 | store.dispatch('test/fetch'); |
| 135 | // uni.request({ | 135 | // uni.request({ |
| 136 | // url: "https://api.glass.xiuyetang.com/app/prod/list", | 136 | // url: "https://api.glass.xiuyetang.com/app/prod/list", |
| 137 | // method: "post", | 137 | // method: "post", |
| 138 | // data: { | 138 | // data: { |
| 139 | // // text: 'uni.request' | 139 | // // text: 'uni.request' |
| 140 | // }, | 140 | // }, |
| 141 | // header: { | 141 | // header: { |
| 142 | // // 'custom-header': 'hello', //自定义请求头信息 | 142 | // // 'custom-header': 'hello', //自定义请求头信息 |
| 143 | // "Content-Type": "application/x-www-form-urlencoded" | 143 | // "Content-Type": "application/x-www-form-urlencoded" |
| 144 | // // 'Content-Type':'multipart/form-data' | 144 | // // 'Content-Type':'multipart/form-data' |
| 145 | // // 'Content-Type':'ext/plain' | 145 | // // 'Content-Type':'ext/plain' |
| 146 | // }, | 146 | // }, |
| 147 | // timeout: 3000, | 147 | // timeout: 3000, |
| 148 | // // dataType:'json' | 148 | // // dataType:'json' |
| 149 | // // responseType:'text', | 149 | // // responseType:'text', |
| 150 | // // sslVerify: true,//验证 ssl 证书 | 150 | // // sslVerify: true, //验证 ssl 证书 |
| 151 | // withCredentials: false, //跨域请求时是否携带凭证（cookies） | 151 | // withCredentials: false, //跨域请求时是否携带凭证（cookies） |
| 152 | // success: res => { | 152 | // success: res => { |
| 153 | // console.error("success status === > ", res); | 153 | // console.error("success status === > ", res); |
| 154 | // this.goodsList = res.data.data; | 154 | // this.goodsList = res.data.data; |
| 155 | // // console.log('res.data', res.data); | 155 | // // console.log('res.data', res.data); |
| 156 | // // this.text = 'request success'; | 156 | // // this.text = 'request success'; |
| 157 | // }, | 157 | // }, |
| 158 | // fail: res => { | 158 | // fail: res => { |
| 159 | // console.log("fail status === > ", res); | 159 | // console.log("fail status === > ", res); |
| 160 | // }, | 160 | // }, |
| 161 | // complete: res => { | 161 | // complete: res => { |
| 162 | // console.log("complete status === > ", res); | 162 | // console.log("complete status === > ", res); |
| 163 | // } | 163 | // } |
| 164 | // }); | 164 | // }); |
| 165 | //定时器模拟ajax异步请求数据 | 165 | //定时器模拟ajax异步请求数据 |
| 166 | // setTimeout(()=>{ | 166 | // setTimeout(()=>{ |
| 167 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | 167 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null |
| 168 | // this.filterDropdownValue = [ | 168 | // this.filterDropdownValue = [ |
| 169 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | 169 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 |
| 170 | // [null,null], //第1个菜单选中 都不选中 | 170 | // [null,null], //第1个菜单选中 都不选中 |
| 171 | // [1], //第2个菜单选中 一级菜单的第1项 | 171 | // [1], //第2个菜单选中 一级菜单的第1项 |
| 172 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | 172 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 |
| 173 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | 173 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 |
| 174 | // ]; | 174 | // ]; |
| 175 | // this.filterData = data; | 175 | // this.filterData = data; |
| 176 | // },100); | 176 | // },100); |
| 177 | // 模拟ajax请求子菜单数据。 | 177 | // 模拟ajax请求子菜单数据。 |
| 178 | // setTimeout(()=>{ | 178 | // setTimeout(()=>{ |
| 179 | // console.log('发起请求','ddddddd'); | 179 | // console.log('发起请求','ddddddd'); |
| 180 | // // 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"}]; | 180 | // // 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"}]; |
| 181 | // },3000); | 181 | // },3000); |
| 182 | }, | 182 | }, |
| 183 | methods: { | 183 | methods: { |
| 184 | showDrawer(e) { | 184 | showDrawer(e) { |
| 185 | this.$refs[e].open(); | 185 | this.$refs[e].open(); |
| 186 | }, | 186 | }, |
| 187 | closeDrawer(e) { | 187 | closeDrawer(e) { |
| 188 | this.$refs[e].close(); | 188 | this.$refs[e].close(); |
| 189 | }, | 189 | }, |
| 190 | change(e, type) { | 190 | change(e, type) { |
| 191 | this[type] = e; | 191 | this[type] = e; |
| 192 | }, | 192 | }, |
| 193 | onClickItem(e) { | 193 | onClickItem(e) { |
| 194 | if (this.current !== e) { | 194 | if (this.current !== e) { |
| 195 | this.current = e; | 195 | this.current = e; |
| 196 | } | 196 | } |
| 197 | }, | 197 | }, |
| 198 | dropDown() { | 198 | dropDown() { |
| 199 | console.log("下拉"); | 199 | console.log("下拉"); |
| 200 | }, | 200 | }, |
| 201 | //接收菜单结果 | 201 | //接收菜单结果 |
| 202 | confirm(e) { | 202 | confirm(e) { |
| 203 | this.indexArr = e.index; | 203 | this.indexArr = e.index; |
| 204 | this.valueArr = e.value; | 204 | this.valueArr = e.value; |
| 205 | return; | 205 | return; |
| 206 | console.log("修改菜单"); | 206 | console.log("修改菜单"); |
| 207 | this.filterData[4].submenu[1] = { | 207 | this.filterData[4].submenu[1] = { |
| 208 | name: "项目2", | 208 | name: "项目2", |
| 209 | submenu: [] | 209 | submenu: [] |
| 210 | }; | 210 | }; |
| 211 | } | 211 | } |
| 212 | }, | 212 | }, |
| 213 | onNavigationBarButtonTap(e) { | 213 | onNavigationBarButtonTap(e) { |
| 214 | this.showRight = !this.showRight; | 214 | this.showRight = !this.showRight; |
| 215 | }, | 215 | }, |
| 216 | //上拉加载， | 216 | //上拉加载， |
| 217 | onReachBottom() { | 217 | onReachBottom() { |
| 218 | console.log("到底加载"); | 218 | console.log("到底加载"); |
| 219 | let len = this.goodsList.length; | 219 | let len = this.goodsList.length; |
| 220 | if (len >= 30) { | 220 | if (len >= 30) { |
| 221 | this.loadingText = "~~到底了~~"; | 221 | this.loadingText = "~~到底了~~"; |
| 222 | return false; | 222 | return false; |
| 223 | } else { | 223 | } else { |
| 224 | this.loadingText = "正在加载..."; | 224 | this.loadingText = "正在加载..."; |
| 225 | } | 225 | } |
| 226 | let end_goods_id = this.goodsList[len - 1].goods_id; | 226 | let end_goods_id = this.goodsList[len - 1].goods_id; |
| 227 | for (let i = 1; i <= 10; i++) { | 227 | for (let i = 1; i <= 10; i++) { |
| 228 | let goods_id = end_goods_id + i; | 228 | let goods_id = end_goods_id + i; |
| 229 | let p = { | 229 | let p = { |
| 230 | goods_id: goods_id, | 230 | goods_id: goods_id, |
| 231 | img: | 231 | img: |
| 232 | "/static/img/goods/p" + | 232 | "/static/img/goods/p" + |
| 233 | (goods_id % 10 == 0 ? 10 : goods_id % 10) + | 233 | (goods_id % 10 == 0 ? 10 : goods_id % 10) + |
| 234 | ".jpg", | 234 | ".jpg", |
| 235 | name: "商品名称", | 235 | name: "商品名称", |
| 236 | originCost: "￥198", | 236 | originCost: "￥198", |
| 237 | price: "￥168", | 237 | price: "￥168", |
| 238 | slogan: "1235人付款" | 238 | slogan: "1235人付款" |
| 239 | }; | 239 | }; |
| 240 | this.goodsList.push(p); | 240 | this.goodsList.push(p); |
| 241 | } | 241 | } |
| 242 | } | 242 | } |
| 243 | }; | 243 | }; |
| 244 | </script> | 244 | </script> |
| 245 | 245 | ||
| 246 | <style lang="scss"> | 246 | <style lang="scss"> |
| 247 | .content { | 247 | .content { |
| 248 | display: flex; | 248 | display: flex; |
| 249 | flex-direction: column; | 249 | flex-direction: column; |
| 250 | align-items: center; | 250 | align-items: center; |
| 251 | justify-content: center; | 251 | justify-content: center; |
| 252 | background-color: #f7f6f6; | 252 | background-color: #f7f6f6; |
| 253 | } | 253 | } |
| 254 | .header { | 254 | .header { |
| 255 | display: flex; | 255 | display: flex; |
| 256 | flex-direction: column; | 256 | flex-direction: column; |
| 257 | align-items: center; | 257 | align-items: center; |
| 258 | justify-content: center; | 258 | justify-content: center; |
| 259 | background-color: #f7f6f6; | 259 | background-color: #f7f6f6; |
| 260 | height: 178rpx; | 260 | height: 178rpx; |
| 261 | width: 100%; | 261 | width: 100%; |
| 262 | z-index: 999; | 262 | z-index: 999; |
| 263 | position: fixed; | 263 | position: fixed; |
| 264 | top: 0; | 264 | top: 0; |
| 265 | left: 0; | 265 | left: 0; |
| 266 | } | 266 | } |
| 267 | .searchBar { | 267 | .searchBar { |
| 268 | width: 670rpx; | 268 | width: 670rpx; |
| 269 | display: flex; | 269 | display: flex; |
| 270 | justify-content: center; | 270 | justify-content: center; |
| 271 | align-items: center; | 271 | align-items: center; |
| 272 | box-sizing: border-box; | 272 | box-sizing: border-box; |
| 273 | padding: 0rpx 16rpx; | 273 | padding: 0rpx 16rpx; |
| 274 | border: 1px solid #ff6b4a; | 274 | border: 1px solid #ff6b4a; |
| 275 | border-radius: 8rpx; | 275 | border-radius: 8rpx; |
| 276 | background-color: #ffffff; | 276 | background-color: #ffffff; |
| 277 | } | 277 | } |
| 278 | 278 | ||
| 279 | .searchIpt { | 279 | .searchIpt { |
| 280 | height: 68rpx; | 280 | height: 68rpx; |
| 281 | width: 670rpx; | 281 | width: 670rpx; |
| 282 | padding: 16rpx; | 282 | padding: 16rpx; |
| 283 | font-size: 28rpx; | 283 | font-size: 28rpx; |
| 284 | box-sizing: border-box; | 284 | box-sizing: border-box; |
| 285 | } | 285 | } |
| 286 | .screenBar { | 286 | .screenBar { |
| 287 | width: 670rpx; | 287 | width: 670rpx; |
| 288 | height: 110rpx; | 288 | height: 110rpx; |
| 289 | display: flex; | 289 | display: flex; |
| 290 | flex-direction: row; | 290 | flex-direction: row; |
| 291 | justify-content: space-between; | 291 | justify-content: space-between; |
| 292 | align-items: center; | 292 | align-items: center; |
| 293 | color: #333333; | 293 | color: #333333; |
| 294 | font-size: 32rpx; | 294 | font-size: 32rpx; |
| 295 | } | 295 | } |
| 296 | .active { | 296 | .active { |
| 297 | color: #ff6b4a; | 297 | color: #ff6b4a; |
| 298 | } | 298 | } |
| 299 | .screenItem { | 299 | .screenItem { |
| 300 | display: flex; | 300 | display: flex; |
| 301 | justify-content: center; | 301 | justify-content: center; |
| 302 | align-items: center; | 302 | align-items: center; |
| 303 | } | 303 | } |
| 304 | .content-wrap { | 304 | .content-wrap { |
| 305 | width: 100%; | 305 | width: 100%; |
| 306 | background-color: #ffffff; | 306 | background-color: #ffffff; |
| 307 | } | 307 | } |
| 308 | 308 | ||
| 309 | .HMfilterDropdown { | 309 | .HMfilterDropdown { |
| 310 | top: 178rpx !important; | 310 | top: 178rpx !important; |
| 311 | } | 311 | } |
| 312 | 312 | ||
| 313 | .goods-list { | 313 | .goods-list { |
| 314 | padding-top: 286rpx; | 314 | padding-top: 286rpx; |
| 315 | .loading-text { | 315 | .loading-text { |
| 316 | width: 100%; | 316 | width: 100%; |
| 317 | display: flex; | 317 | display: flex; |
| 318 | justify-content: center; | 318 | justify-content: center; |
| 319 | align-items: center; | 319 | align-items: center; |
| 320 | height: 30px; | 320 | height: 30px; |
| 321 | color: #979797; | 321 | color: #979797; |
| 322 | font-size: 12px; | 322 | font-size: 12px; |
| 323 | } | 323 | } |
| 324 | .product-list { | 324 | .product-list { |
| 325 | width: 92%; | 325 | width: 92%; |
| 326 | padding: 0 4% 3vw 4%; | 326 | padding: 0 4% 3vw 4%; |
| 327 | display: flex; | 327 | display: flex; |
| 328 | justify-content: space-between; | 328 | justify-content: space-between; |
| 329 | flex-wrap: wrap; | 329 | flex-wrap: wrap; |
| 330 | .product { | 330 | .product { |
| 331 | width: 48%; | 331 | width: 48%; |
| 332 | margin: 0 0 20rpx 0; | 332 | margin: 0 0 20rpx 0; |
| 333 | background: #ffffff; | 333 | background: #ffffff; |
| 334 | border: 1px solid #f2f2f2; | 334 | border: 1px solid #f2f2f2; |
| 335 | } | 335 | } |
| 336 | } | 336 | } |
| 337 | } | 337 | } |
| 338 | </style> | 338 | </style> |
| 339 | 339 |