吉鹏 / gulu-vue

Merge Request #7

← To merge requests From adam:master into jp:master
Merged
Created by Adam

Master

Assignee: None
Milestone: None

Merged by Adam

Commits (1)
1 participants
Showing 5 changed files   Show diff stats
src/components/Card/Card.vue
Diff comments   Edit   View file @1003c53
1   -<template>
2   - <view class="card" @tap="toGoods(goods.goods_id)">
3   - <image mode="widthFix" :src="goods.img" ></image>
  1 +<template>
  2 + <view class="card" @tap="toGoods(goods.id)">
  3 + <image mode="widthFix" :src="goods.imgurl" ></image>
4 4 <view class="name">{{goods.name}}</view>
5 5 <view class="info">
6 6 <view class="priceBox">
7   - <view class="price">{{goods.price}}</view>
8   - <view class="originCost">{{goods.originCost}}</view>
  7 + <view class="price">{{goods.rsSon.Min_Price}}</view>
  8 + <view class="originCost">
  9 + {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}}
  10 + <!-- {{goods.oldPrice}} -->
  11 + </view>
9 12 </view>
10   - <view class="slogan">{{goods.slogan}}</view>
11   - </view>
12   - </view>
13   -</template>
  13 + <view class="slogan">{{goods.trade_num}}</view>
  14 + </view>
  15 + </view>
  16 +</template>
14 17  
15 18 <script>
16 19 export default {
... ... @@ -19,25 +22,25 @@
19 22 * 商品数据
20 23 */
21 24 goods: {
22   - goods_id: Number,
23   - img: String,
  25 + id: Number,
  26 + imgurl: String,
24 27 name: String,
25   - originCost:String,
  28 + oldPrice:String,
26 29 price: String,
27   - slogan:String
  30 + memo:String
28 31 }
29 32  
30 33 },
31 34 created() {
32   - },
33   - data() {
34   - return {
35   -
36   - };
  35 + },
  36 + data() {
  37 + return {
  38 +
  39 + };
37 40 },
38 41 methods:{
39 42 toGoods(id){
40   - console.log(id)
  43 + console.log('toGoods =====> id======>', id)
41 44 uni.navigateTo({
42 45 url: `../detail/detail?oderId=1`,
43 46 success: res => {},
... ... @@ -45,10 +48,10 @@
45 48 complete: () => {}
46 49 });
47 50 }
48   - }
49   - }
50   -</script>
51   -
  51 + }
  52 + }
  53 +</script>
  54 +
52 55 <style lang="scss">
53 56 image{
54 57 width: 100%;
... ... @@ -92,5 +95,5 @@
92 95 color: #999999;
93 96 font-size: 20rpx;
94 97 }
95   - }
96   -</style>
  98 + }
  99 +</style>
... ...
1 1 {
2   - "name" : "gulu-vue",
3   - "appid" : "",
4   - "description" : "",
5   - "versionName" : "1.0.0",
6   - "versionCode" : "100",
7   - "transformPx" : false,
8   - "app-plus" : {
  2 + "name": "gulu-vue",
  3 + "appid": "",
  4 + "description": "",
  5 + "versionName": "1.0.0",
  6 + "versionCode": "100",
  7 + "transformPx": false,
  8 + "h5": {
  9 + "devServer": {
  10 + "port": 8080,
  11 + "disableHostCheck": true,
  12 + "proxy": {
  13 + "/": {
  14 + "pathRewrite": {
  15 + "/": "/"
  16 + },
  17 + "target": "https://api.glass.xiuyetang.com/",
  18 + "changeOrigin": true,
  19 + "serure": false
  20 + }
  21 + }
  22 + },
  23 + "router" : {
  24 + "mode" : "history"
  25 + }
  26 + },
  27 + "app-plus": {
9 28 /* 5+App特有相关 */
10   - "modules" : {},
  29 + "modules": {},
11 30 /* 模块配置 */
12   - "distribute" : {
  31 + "distribute": {
13 32 /* 应用发布信息 */
14   - "android" : {
  33 + "android": {
15 34 /* android打包配置 */
16   - "permissions" : [
  35 + "permissions": [
17 36 "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
18 37 "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
19 38 "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
... ... @@ -38,33 +57,33 @@
38 57 "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
39 58 ]
40 59 },
41   - "ios" : {},
  60 + "ios": {},
42 61 /* ios打包配置 */
43   - "sdkConfigs" : {}
  62 + "sdkConfigs": {}
44 63 },
45 64 /* SDK配置 */
46   - "usingComponents" : true
  65 + "usingComponents": true
47 66 },
48   - "quickapp" : {},
  67 + "quickapp": {},
49 68 /* 快应用特有相关 */
50   - "mp-weixin" : {
  69 + "mp-weixin": {
51 70 /* 小程序特有相关 */
52   - "usingComponents" : true,
53   - "appid" : "wx115b25aa396d27ac",
54   - "setting" : {
55   - "urlCheck" : true
  71 + "usingComponents": true,
  72 + "appid": "wx115b25aa396d27ac",
  73 + "setting": {
  74 + "urlCheck": true
56 75 }
57 76 },
58   - "mp-alipay" : {
59   - "usingComponents" : true
  77 + "mp-alipay": {
  78 + "usingComponents": true
60 79 },
61   - "mp-baidu" : {
62   - "usingComponents" : true
  80 + "mp-baidu": {
  81 + "usingComponents": true
63 82 },
64   - "mp-toutiao" : {
65   - "usingComponents" : true
  83 + "mp-toutiao": {
  84 + "usingComponents": true
66 85 },
67   - "mp-qq" : {
68   - "usingComponents" : true
  86 + "mp-qq": {
  87 + "usingComponents": true
69 88 }
70 89 -}
  90 +}
71 91 \ No newline at end of file
... ...
1 1 {
2 2 "pages": [
3 3 {
4   - "path" : "pages/refundProgress/refundProgress",
5   - "style": {
6   - "navigationBarTitleText": "申请退款"
7   - }
8   - },
9   - {
10 4 "path": "pages/index/index",
11 5 "style": {
12 6 "navigationBarTitleText": "商城一览"
13 7 // "enablePullDownRefresh":true
14 8 }
15 9 },
  10 +
  11 + {
  12 + "path" : "pages/refundProgress/refundProgress",
  13 + "style": {
  14 + "navigationBarTitleText": "申请退款"
  15 + }
  16 + },
  17 +
16 18 {
17 19 "path" : "pages/myOrder/myOrder",
18 20 "style" : {
... ...
src/pages/addArddess/addArddess.vue
Diff comments   Edit   View file @1003c53
1   -<template>
2   - <view class="wrap">
  1 +<template>
  2 + <view class="wrap">
3 3 <view class="content">
4 4 <view class="item,name" >
5 5 <text class="itemText">姓名</text>
... ... @@ -25,39 +25,39 @@
25 25 </view>
26 26 <input />
27 27 </view>
28   - <view class="button">保存并使用</view>
29   - </view>
30   -</template>
31   -
  28 + <view class="button">保存并使用</view>
  29 + </view>
  30 +</template>
  31 +
32 32 <script>
33   - import SimpleAddress from '@/components/Simple-address/Simple-address.vue';
34   - export default {
35   - data() {
36   - return {
37   - cityPickerValueDefault: [0, 0, 1],
  33 + import SimpleAddress from '@/components/Simple-address/Simple-address.vue';
  34 + export default {
  35 + data() {
  36 + return {
  37 + cityPickerValueDefault: [0, 0, 1],
38 38 pickerText: '',
39   - isDefalutAddress:true
40   -
41   - };
42   - },
43   - components: {
44   - SimpleAddress
45   - },
46   - methods: {
47   - openAddres() {
48   - this.cityPickerValueDefault = [0,0,1]
49   - this.$refs.SimpleAddress.open();
50   - },
  39 + isDefalutAddress:true
  40 +
  41 + };
  42 + },
  43 + components: {
  44 + SimpleAddress
  45 + },
  46 + methods: {
  47 + openAddres() {
  48 + this.cityPickerValueDefault = [0,0,1]
  49 + this.$refs.SimpleAddress.open();
  50 + },
51 51 onConfirm(e) {
52   - this.pickerText = e.label;
  52 + this.pickerText = e.label;
53 53 },
54 54 changeDefalutAddress(e){
55 55 this.isDefalutAddress = e.target.value
56   - }
57   - }
58   - }
59   -</script>
60   -
  56 + }
  57 + }
  58 + }
  59 +</script>
  60 +
61 61 <style lang="scss">
62 62 .wrap{
63 63 height: 100vh;
... ... @@ -65,7 +65,7 @@
65 65 font-family: PingFangSC-Regular;
66 66 letter-spacing: -0.23px;
67 67 padding-top: 19rpx;
68   - }
  68 + }
69 69 .content{
70 70 background-color: #FFFFFF;
71 71 border-radius: 8px;
... ... @@ -107,5 +107,5 @@
107 107 font-size: 16px;
108 108 color: #FFFFFF;
109 109 letter-spacing: -0.3px;
110   - }
111   -</style>
  110 + }
  111 +</style>
... ...
src/pages/index/index.vue
Diff comments   Edit   View file @1003c53
1 1 <template>
2   - <view class="content">
3   - <view class="header">
4   - <!-- 搜索-->
5   - <view class="searchBar">
6   - <icon class="searchIcon" type="search" size="14"></icon>
7   - <input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
8   - </view>
9   -
10   - <!-- 筛选栏-->
11   - <view class="screenBar">
12   - <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13   - <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14   - {{ item.text }}<icon type="info" size="14"></icon>
15   - </view>
16   - <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17   - {{ item.text }}<icon type="info" size="14"></icon>
18   - </view>
19   - <view v-if="item.current !== 2&&item.current!==4">
20   - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21   - </view>
22   - </view>
23   - </view>
24   - </view>
25   - <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26   - <view class="close">
27   - <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28   - </view>
29   - </uni-drawer>
30   -
31   -
32   -
33   - <!-- 筛选菜单-->
34   - <view class="content-wrap">
35   - <view>
36   - <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37   - <!-- 商品列表 -->
38   - <view class="goods-list">
39   - <view class="product-list">
40   - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
41   - <Card :goods = "goods"></Card>
42   - </view>
43   - </view>
44   - <view class="loading-text">{{loadingText}}</view>
45   - </view>
46   -
47   - </view>
48   - </view>
49   - </view>
  2 + <view class="content">
  3 + <view class="header">
  4 + <!-- 搜索-->
  5 + <view class="searchBar">
  6 + <icon class="searchIcon" type="search" size="14"></icon>
  7 + <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
  8 + </view>
  9 +
  10 + <!-- 筛选栏-->
  11 + <view class="screenBar">
  12 + <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
  13 + <view
  14 + class="screenItem"
  15 + v-bind:class="{ active: current === item.current }"
  16 + v-if="item.current === 2"
  17 + @click="dropDown"
  18 + >
  19 + {{ item.text }}
  20 + <icon type="info" size="14"></icon>
  21 + </view>
  22 + <view
  23 + class="screenItem"
  24 + v-bind:class="{ active: current === item.current }"
  25 + v-if="item.current === 4"
  26 + @click="showDrawer('showRight')"
  27 + >
  28 + {{ item.text }}
  29 + <icon type="info" size="14"></icon>
  30 + </view>
  31 + <view v-if="item.current !== 2&&item.current!==4">
  32 + <view
  33 + class="screenItem"
  34 + v-bind:class="{ active: current === item.current }"
  35 + >{{ item.text }}</view>
  36 + </view>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + <Uni-drawer
  41 + ref="showRight"
  42 + mask="true"
  43 + maskClick="true"
  44 + mode="right"
  45 + :width="320"
  46 + @change="change($event,'showRight')"
  47 + >
  48 + <view class="close">
  49 + <view @click="closeDrawer('showRight')">
  50 + <text class="word-btn-white">关闭</text>
  51 + </view>
  52 + </view>
  53 + </Uni-drawer>
  54 +
  55 + <!-- 筛选菜单-->
  56 + <view class="content-wrap">
  57 + <view>
  58 + <HMfilterDropdown
  59 + :filterData="filterData"
  60 + :defaultSelected="filterDropdownValue"
  61 + :updateMenuName="true"
  62 + @confirm="confirm"
  63 + data-format="Object"
  64 + ></HMfilterDropdown>
  65 + <!-- 商品列表 -->
  66 + <view class="goods-list">
  67 + <view class="product-list">
  68 + <view class="product" v-for="(goods) in goodsList" :key="goods.id">
  69 + <Card :goods="goods"></Card>
  70 + </view>
  71 + </view>
  72 + <view class="loading-text">{{loadingText}}</view>
  73 + </view>
  74 + </view>
  75 + </view>
  76 + </view>
50 77 </template>
51 78  
52 79 <script>
53   - import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
54   - import Card from "../../components/Card/Card.vue"
55   - import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56   - import data from '@/common/data.js';//筛选菜单数据
57   - export default {
58   - components: {
59   - 'UniDrawer':UniDrawer,
60   - 'HMfilterDropdown':HMfilterDropdown,
61   - 'Card':Card
62   - },
63   - data() {
64   - return {
65   - screenItems: [
66   - {current:0,text:'全部',hasIcon:false},
67   - {current:1,text:'销量',hasIcon:false},
68   - {current:2,text:'价格',hasIcon:true},
69   - {current:3,text:'折扣',hasIcon:false},
70   - {current:4,text:'筛选',hasIcon:true},
71   - ],
72   - current: 0,
73   - showRight: false,
74   - indexArr:'',
75   - valueArr:'',
76   - //商品数据
77   - goodsList:[
78   - { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79   - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80   - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81   - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82   - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83   - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84   - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85   - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86   - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87   - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
88   - ],
89   - loadingText:"正在加载...",
90   - filterDropdownValue:[],
91   - filterData:[]
92   - }
93   - },
94   - filters: {
95   - 　　outData(value) {
96   - 　　　　return JSON.stringify(value);
97   - 　　}
98   - },
99   - onLoad: function () {
100   - //定时器模拟ajax异步请求数据
101   - // setTimeout(()=>{
102   - // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
103   - // this.filterDropdownValue = [
104   - // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
105   - // [null,null], //第1个菜单选中 都不选中
106   - // [1], //第2个菜单选中 一级菜单的第1项
107   - // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
108   - // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
109   - // ];
110   - this.filterData = data;
111   - // },100);
112   - // 模拟ajax请求子菜单数据。
113   - // setTimeout(()=>{
114   - // 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"}];
115   - // },5000)
116   - },
117   - methods: {
118   - showDrawer(e) {
119   - this.$refs[e].open()
120   - },
121   - closeDrawer(e) {
122   - this.$refs[e].close()
123   - },
124   - change(e, type) {
125   - this[type] = e
126   - },
127   - onClickItem(e) {
128   - if (this.current !== e) {
129   - this.current = e;
130   - }
131   - },
132   - dropDown(){
133   - console.log('下拉')
134   - },
135   - //接收菜单结果
136   - confirm(e){
137   - this.indexArr = e.index;
138   - this.valueArr = e.value;
139   - return;
140   - console.log('修改菜单');
141   - this.filterData[4].submenu[1] = {
142   - "name": "项目2",
143   - "submenu": [
144   -
145   - ]
146   - }
147   - }
148   - },
149   - onNavigationBarButtonTap(e) {
150   - this.showRight = !this.showRight
151   - },
152   - //上拉加载，
153   - onReachBottom(){
154   - console.log('到底加载')
155   - let len = this.goodsList.length;
156   - if(len>=30){
157   - this.loadingText="~~到底了~~";
158   - return false;
159   - }else{
160   - this.loadingText="正在加载...";
161   - }
162   - let end_goods_id = this.goodsList[len-1].goods_id;
163   - for(let i=1;i<=10;i++){
164   - let goods_id = end_goods_id+i;
165   - 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人付款' };
166   - this.goodsList.push(p);
167   - }
168   - },
169   - }
  80 +import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
  81 +import Card from "../../components/Card/Card.vue";
  82 +import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
  83 +import data from "@/common/data.js"; //筛选菜单数据
  84 +export default {
  85 + components: {
  86 + UniDrawer: UniDrawer,
  87 + HMfilterDropdown: HMfilterDropdown,
  88 + Card: Card
  89 + },
  90 + data() {
  91 + return {
  92 + screenItems: [
  93 + { current: 0, text: "全部", hasIcon: false },
  94 + { current: 1, text: "销量", hasIcon: false },
  95 + { current: 2, text: "价格", hasIcon: true },
  96 + { current: 3, text: "折扣", hasIcon: false },
  97 + { current: 4, text: "筛选", hasIcon: true }
  98 + ],
  99 + current: 0,
  100 + showRight: false,
  101 + indexArr: "",
  102 + valueArr: "",
  103 + // //商品数据
  104 + goodsList: [
  105 + {
  106 + // goods_id: 0,
  107 + // img: "/static/img/goods/p1.jpg",
  108 + // name: "商品名称",
  109 + // originCost: "￥198",
  110 + // price: "￥168",
  111 + // slogan: "1235人浏览"
  112 + }
  113 + ],
  114 + loadingText: "正在加载...",
  115 + filterDropdownValue: [],
  116 + filterData: []
  117 + };
  118 + },
  119 + filters: {
  120 + outData(value) {
  121 + return JSON.stringify(value);
  122 + }
  123 + },
  124 + onLoad: function() {
  125 + uni.request({
  126 + url: "https://api.glass.xiuyetang.com/app/prod/list", //仅为示例，并非真实接口地址。
  127 + method: "post",
  128 + data: {
  129 + // text: 'uni.request'
  130 + },
  131 + header: {
  132 + // 'custom-header': 'hello', //自定义请求头信息
  133 + "Content-Type": "application/x-www-form-urlencoded"
  134 + // 'Content-Type':'multipart/form-data'
  135 + // 'Content-Type':'ext/plain'
  136 + },
  137 + timeout: 3000,
  138 + // dataType:'json'
  139 + // responseType:'text',
  140 + // sslVerify: true,//验证 ssl 证书
  141 + withCredentials: false, //跨域请求时是否携带凭证（cookies）
  142 + success: res => {
  143 + console.error("success status === > ", res);
  144 + this.goodsList = res.data.data;
  145 + // console.log('res.data', res.data);
  146 + // this.text = 'request success';
  147 + },
  148 + fail: res => {
  149 + console.log("fail status === > ", res);
  150 + },
  151 + complete: res => {
  152 + console.log("complete status === > ", res);
  153 + }
  154 + });
  155 + //定时器模拟ajax异步请求数据
  156 + // setTimeout(()=>{
  157 + // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
  158 + // this.filterDropdownValue = [
  159 + // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
  160 + // [null,null], //第1个菜单选中 都不选中
  161 + // [1], //第2个菜单选中 一级菜单的第1项
  162 + // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
  163 + // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
  164 + // ];
  165 + // this.filterData = data;
  166 + // },100);
  167 + // 模拟ajax请求子菜单数据。
  168 + // setTimeout(()=>{
  169 + // console.log('发起请求','ddddddd');
  170 + // // 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"}];
  171 + // },3000);
  172 + },
  173 + methods: {
  174 + showDrawer(e) {
  175 + this.$refs[e].open();
  176 + },
  177 + closeDrawer(e) {
  178 + this.$refs[e].close();
  179 + },
  180 + change(e, type) {
  181 + this[type] = e;
  182 + },
  183 + onClickItem(e) {
  184 + if (this.current !== e) {
  185 + this.current = e;
  186 + }
  187 + },
  188 + dropDown() {
  189 + console.log("下拉");
  190 + },
  191 + //接收菜单结果
  192 + confirm(e) {
  193 + this.indexArr = e.index;
  194 + this.valueArr = e.value;
  195 + return;
  196 + console.log("修改菜单");
  197 + this.filterData[4].submenu[1] = {
  198 + name: "项目2",
  199 + submenu: []
  200 + };
  201 + }
  202 + },
  203 + onNavigationBarButtonTap(e) {
  204 + this.showRight = !this.showRight;
  205 + },
  206 + //上拉加载，
  207 + onReachBottom() {
  208 + console.log("到底加载");
  209 + let len = this.goodsList.length;
  210 + if (len >= 30) {
  211 + this.loadingText = "~~到底了~~";
  212 + return false;
  213 + } else {
  214 + this.loadingText = "正在加载...";
  215 + }
  216 + let end_goods_id = this.goodsList[len - 1].goods_id;
  217 + for (let i = 1; i <= 10; i++) {
  218 + let goods_id = end_goods_id + i;
  219 + let p = {
  220 + goods_id: goods_id,
  221 + img:
  222 + "/static/img/goods/p" +
  223 + (goods_id % 10 == 0 ? 10 : goods_id % 10) +
  224 + ".jpg",
  225 + name: "商品名称",
  226 + originCost: "￥198",
  227 + price: "￥168",
  228 + slogan: "1235人付款"
  229 + };
  230 + this.goodsList.push(p);
  231 + }
  232 + }
  233 +};
170 234 </script>
171 235  
172 236 <style lang="scss">
173   - .content {
174   - display: flex;
175   - flex-direction: column;
176   - align-items: center;
177   - justify-content: center;
178   - background-color: #F7F6F6;
179   - }
180   - .header{
181   - display: flex;
182   - flex-direction: column;
183   - align-items: center;
184   - justify-content: center;
185   - background-color: #F7F6F6;
186   - height:178rpx ;
187   - width: 100%;
188   - z-index: 999;
189   - position: fixed;
190   - top: 0;
191   - left: 0;
192   - }
193   - .searchBar {
194   - width: 670rpx;
195   - display: flex;
196   - justify-content: center;
197   - align-items: center;
198   - box-sizing: border-box;
199   - padding: 0rpx 16rpx;
200   - border: 1px solid #FF6B4A;
201   - border-radius: 8rpx;
202   - background-color: #ffffff;
203   - }
204   -
205   - .searchIpt {
206   - height: 68rpx;
207   - width: 670rpx;
208   - padding: 16rpx;
209   - font-size: 28rpx;
210   - box-sizing: border-box;
211   - }
212   - .screenBar{
213   - width: 670rpx;
214   - height: 110rpx;
215   - display: flex;
216   - flex-direction: row;
217   - justify-content: space-between;
218   - align-items: center;
219   - color: #333333;
220   - font-size: 32rpx;
221   - }
222   - .active{
223   - color: #FF6B4A;
224   - }
225   - .screenItem{
226   - display: flex;
227   - justify-content: center;
228   - align-items: center;
229   - }
230   - .content-wrap{
231   - width: 100%;
232   - background-color: #FFFFFF;
233   - }
234   -
235   - .HMfilterDropdown{
236   - top: 178rpx !important;
237   - }
238   -
239   - .goods-list{
240   - padding-top: 286rpx;
241   - .loading-text{
242   - width: 100%;
243   - display: flex;
244   - justify-content: center;
245   - align-items: center;
246   - height: 30px;
247   - color: #979797;
248   - font-size: 12px;
249   - }
250   - .product-list{
251   - width: 92%;
252   - padding: 0 4% 3vw 4%;
253   - display: flex;
254   - justify-content: space-between;
255   - flex-wrap: wrap;
256   - .product{
257   - width: 48%;
258   - margin: 0 0 20rpx 0;
259   - background: #FFFFFF;
260   - border: 1px solid #F2F2F2;
261   - }
262   - }
263   - }
  237 +.content {
  238 + display: flex;
  239 + flex-direction: column;
  240 + align-items: center;
  241 + justify-content: center;
  242 + background-color: #f7f6f6;
  243 +}
  244 +.header {
  245 + display: flex;
  246 + flex-direction: column;
  247 + align-items: center;
  248 + justify-content: center;
  249 + background-color: #f7f6f6;
  250 + height: 178rpx;
  251 + width: 100%;
  252 + z-index: 999;
  253 + position: fixed;
  254 + top: 0;
  255 + left: 0;
  256 +}
  257 +.searchBar {
  258 + width: 670rpx;
  259 + display: flex;
  260 + justify-content: center;
  261 + align-items: center;
  262 + box-sizing: border-box;
  263 + padding: 0rpx 16rpx;
  264 + border: 1px solid #ff6b4a;
  265 + border-radius: 8rpx;
  266 + background-color: #ffffff;
  267 +}
  268 +
  269 +.searchIpt {
  270 + height: 68rpx;
  271 + width: 670rpx;
  272 + padding: 16rpx;
  273 + font-size: 28rpx;
  274 + box-sizing: border-box;
  275 +}
  276 +.screenBar {
  277 + width: 670rpx;
  278 + height: 110rpx;
  279 + display: flex;
  280 + flex-direction: row;
  281 + justify-content: space-between;
  282 + align-items: center;
  283 + color: #333333;
  284 + font-size: 32rpx;
  285 +}
  286 +.active {
  287 + color: #ff6b4a;
  288 +}
  289 +.screenItem {
  290 + display: flex;
  291 + justify-content: center;
  292 + align-items: center;
  293 +}
  294 +.content-wrap {
  295 + width: 100%;
  296 + background-color: #ffffff;
  297 +}
  298 +
  299 +.HMfilterDropdown {
  300 + top: 178rpx !important;
  301 +}
264 302  
  303 +.goods-list {
  304 + padding-top: 286rpx;
  305 + .loading-text {
  306 + width: 100%;
  307 + display: flex;
  308 + justify-content: center;
  309 + align-items: center;
  310 + height: 30px;
  311 + color: #979797;
  312 + font-size: 12px;
  313 + }
  314 + .product-list {
  315 + width: 92%;
  316 + padding: 0 4% 3vw 4%;
  317 + display: flex;
  318 + justify-content: space-between;
  319 + flex-wrap: wrap;
  320 + .product {
  321 + width: 48%;
  322 + margin: 0 0 20rpx 0;
  323 + background: #ffffff;
  324 + border: 1px solid #f2f2f2;
  325 + }
  326 + }
  327 +}
265 328 </style>
... ...