刘文博 / gulu-vue

Download as
Browse Code »

Commit e7121c7107e003f7be73f42e9bbe7ca367e2b191

Authored by BigBoss
2 parents 2e191f6b1c e60a3d8ba9
Exists in master

detail update

Showing 7 changed files   Show diff stats
1 <script lang="ts"> 1 <script lang="ts">
2 import Vue from 'vue'; 2 import Vue from 'vue';
3 export default Vue.extend({ 3 export default Vue.extend({
4 mpType: 'app', 4 mpType: 'app',
5 onLaunch() { 5 onLaunch() {
6 console.log('App Launch') 6 console.log('App Launch')
7 }, 7 },
8 onShow() { 8 onShow() {
9
9 console.log('App Show') 10 console.log('App Show')
10 }, 11 },
11 onHide() { 12 onHide() {
12 console.log('App Hide') 13 console.log('App Hide')
13 } 14 }
14 }); 15 });
15 </script> 16 </script>
16 17
17 <style> 18 <style>
18 /*每个页面公共css */ 19 /*每个页面公共css */
19 </style> 20 </style>
20 21
src/components/Card/Card.vue
Diff comments   View file @e7121c7
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.goods_id)"> 2 <view class="card" @tap="toGoods(goods.id)">
3 <image mode="widthFix" :src="goods.img" ></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.price}}</view> 7 <view class="price">{{goods.rsSon.Min_Price}}</view>
8 <view class="originCost">{{goods.originCost}}</view> 8 <view class="originCost">
9 {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}}
10 <!-- {{goods.oldPrice}} -->
11 </view>
9 </view> 12 </view>
10 <view class="slogan">{{goods.slogan}}</view> 13 <view class="slogan">{{goods.trade_num}}</view>
11 </view> 14 </view>
12 </view> 15 </view>
13 </template> 16 </template>
14 17
15 <script> 18 <script>
16 export default { 19 export default {
17 props: { 20 props: {
18 /** 21 /**
19 * 商品数据 22 * 商品数据
20 */ 23 */
21 goods: { 24 goods: {
22 goods_id: Number, 25 id: Number,
23 img: String, 26 imgurl: String,
24 name: String, 27 name: String,
25 originCost:String, 28 oldPrice:String,
26 price: String, 29 price: String,
27 slogan:String 30 memo:String
28 } 31 }
29 32
30 }, 33 },
31 created() { 34 created() {
32 }, 35 },
33 data() { 36 data() {
34 return { 37 return {
35 38
36 }; 39 };
37 }, 40 },
38 methods:{ 41 methods:{
39 toGoods(id){ 42 toGoods(id){
40 console.log(id) 43 console.log('toGoods =====> id======>', id)
41 uni.navigateTo({ 44 uni.navigateTo({
42 url: `../detail/detail?oderId=1`, 45 url: `../detail/detail?oderId=1`,
43 success: res => {}, 46 success: res => {},
44 fail: () => {}, 47 fail: () => {},
45 complete: () => {} 48 complete: () => {}
46 }); 49 });
47 } 50 }
48 } 51 }
49 } 52 }
50 </script> 53 </script>
51 54
52 <style lang="scss"> 55 <style lang="scss">
53 image{ 56 image{
54 width: 100%; 57 width: 100%;
55 height: 120rpx; 58 height: 120rpx;
56 } 59 }
57 .name{ 60 .name{
58 width: 92%; 61 width: 92%;
59 padding: 5px 4%; 62 padding: 5px 4%;
60 display: -webkit-box; 63 display: -webkit-box;
61 -webkit-box-orient: vertical; 64 -webkit-box-orient: vertical;
62 -webkit-line-clamp: 2; 65 -webkit-line-clamp: 2;
63 text-align: justify; 66 text-align: justify;
64 overflow: hidden; 67 overflow: hidden;
65 font-size: 24rpx; 68 font-size: 24rpx;
66 color: #333333; 69 color: #333333;
67 } 70 }
68 .info{ 71 .info{
69 display: flex; 72 display: flex;
70 justify-content: space-between; 73 justify-content: space-between;
71 align-items: center; 74 align-items: center;
72 width: 92%; 75 width: 92%;
73 padding: 5px 4% 5px 4%; 76 padding: 5px 4% 5px 4%;
74 .priceBox{ 77 .priceBox{
75 display: flex; 78 display: flex;
76 justify-content: space-between; 79 justify-content: space-between;
77 align-items: center; 80 align-items: center;
78 .price{ 81 .price{
79 color: #EB5D3B; 82 color: #EB5D3B;
80 font-size: 28rpx; 83 font-size: 28rpx;
81 font-weight: 600; 84 font-weight: 600;
82 margin-right: 10rpx; 85 margin-right: 10rpx;
83 } 86 }
84 .originCost{ 87 .originCost{
85 text-decoration:line-through; 88 text-decoration:line-through;
86 color: #999999; 89 color: #999999;
87 font-size: 20rpx; 90 font-size: 20rpx;
88 } 91 }
89 92
90 } 93 }
91 .slogan{ 94 .slogan{
92 color: #999999; 95 color: #999999;
93 font-size: 20rpx; 96 font-size: 20rpx;
94 } 97 }
95 } 98 }
96 </style> 99 </style>
97 100
src/manifest.json
Diff comments   View file @e7121c7
1 { 1 {
2 "name" : "gulu-vue", 2 "name": "gulu-vue",
3 "appid" : "", 3 "appid": "",
4 "description" : "", 4 "description": "",
5 "versionName" : "1.0.0", 5 "versionName": "1.0.0",
6 "versionCode" : "100", 6 "versionCode": "100",
7 "transformPx" : false, 7 "transformPx": false,
8 "app-plus" : { 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 /* 5+App特有相关 */ 28 /* 5+App特有相关 */
10 "modules" : {}, 29 "modules": {},
11 /* 模块配置 */ 30 /* 模块配置 */
12 "distribute" : { 31 "distribute": {
13 /* 应用发布信息 */ 32 /* 应用发布信息 */
14 "android" : { 33 "android": {
15 /* android打包配置 */ 34 /* android打包配置 */
16 "permissions" : [ 35 "permissions": [
17 "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", 36 "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
18 "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", 37 "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
19 "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", 38 "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
20 "<uses-permission android:name=\"android.permission.VIBRATE\"/>", 39 "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
21 "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", 40 "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
22 "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", 41 "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
23 "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", 42 "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
24 "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", 43 "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
25 "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", 44 "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
26 "<uses-permission android:name=\"android.permission.CAMERA\"/>", 45 "<uses-permission android:name=\"android.permission.CAMERA\"/>",
27 "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", 46 "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
28 "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", 47 "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
29 "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", 48 "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
30 "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", 49 "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
31 "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", 50 "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
32 "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", 51 "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
33 "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", 52 "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
34 "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", 53 "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
35 "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", 54 "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
36 "<uses-feature android:name=\"android.hardware.camera\"/>", 55 "<uses-feature android:name=\"android.hardware.camera\"/>",
37 "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", 56 "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
38 "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" 57 "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
39 ] 58 ]
40 }, 59 },
41 "ios" : {}, 60 "ios": {},
42 /* ios打包配置 */ 61 /* ios打包配置 */
43 "sdkConfigs" : {} 62 "sdkConfigs": {}
44 }, 63 },
45 /* SDK配置 */ 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, 71 "usingComponents": true,
53 "appid" : "wx115b25aa396d27ac", 72 "appid": "wx115b25aa396d27ac",
54 "setting" : { 73 "setting": {
55 "urlCheck" : true 74 "urlCheck": true
56 } 75 }
57 }, 76 },
58 "mp-alipay" : { 77 "mp-alipay": {
59 "usingComponents" : true 78 "usingComponents": true
60 }, 79 },
61 "mp-baidu" : { 80 "mp-baidu": {
62 "usingComponents" : true 81 "usingComponents": true
63 }, 82 },
64 "mp-toutiao" : { 83 "mp-toutiao": {
65 "usingComponents" : true 84 "usingComponents": true
66 }, 85 },
67 "mp-qq" : { 86 "mp-qq": {
68 "usingComponents" : true 87 "usingComponents": true
69 } 88 }
70 } 89 }
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index",
5 "style": {
6 "navigationBarTitleText": "商城一览"
7 // "enablePullDownRefresh":true
8 }
9 },
10 { 4 "path": "pages/detail/detail",
11 "path" : "pages/refundProgress/refundProgress", 5 "style": {
12 "style": { 6 "navigationBarTitleText": "产品详情"
13 "navigationBarTitleText": "申请退款" 7 }
14 } 8 },
15 }, 9 {
10 "path": "pages/index/index",
11 "style": {
12 "navigationBarTitleText": "商城一览"
13 }
14 },
15 {
16 "path": "pages/details-3/details-3",
17 "style": {
16 { 18 "navigationBarTitleText": "产品详情"
17 "path" : "pages/myOrder/myOrder", 19 }
18 "style" : { 20 },
19 "navigationBarTitleText": "我的订单"} 21 {
20 }, 22 "path" : "pages/refundProgress/refundProgress",
21 { 23 "style": {
22 "path": "pages/addArddess/addArddess", 24 "navigationBarTitleText": "申请退款"
23 "style": { 25 }
24 "navigationBarTitleText": "新增地址" 26 },
25 } 27 {
26 }, 28 "path" : "pages/myOrder/myOrder",
27 { 29 "style" : {
28 "path" : "pages/confirmOrder/confirmOrder", 30 "navigationBarTitleText": "我的订单"}
29 "style" : { 31 },
30 "navigationBarTitleText": "确认订单"} 32 {
31 }, 33 "path": "pages/addArddess/addArddess",
32 { 34 "style": {
33 "path": "pages/cart/cart", 35 "navigationBarTitleText": "新增地址"
34 "style": { 36 }
35 "navigationBarTitleText": "购物车" 37 },
36 } 38 {
37 }, 39 "path" : "pages/confirmOrder/confirmOrder",
38 { 40 "style" : {
39 "path": "pages/user/user", 41 "navigationBarTitleText": "确认订单"}
40 "style": { 42 },
41 "navigationBarTitleText": "我的" 43 {
42 } 44 "path": "pages/cart/cart",
43 }, 45 "style": {
44 { 46 "navigationBarTitleText": "购物车"
45 "path": "pages/details-3/details-3" 47 }
46 }, 48 },
47 { 49 {
48 "path": "pages/refundment/Refundways" 50 "path": "pages/user/user",
49 }, 51 "style": {
50 { 52 "navigationBarTitleText": "我的"
51 "path": "pages/refundment/refundment" 53 }
52 }, 54 },
53 { 55 {
54 "path": "pages/Predelivery/Predelivery" 56 "path": "pages/refundment/Refundways"
55 }, 57 },
56 { 58 {
57 "path": "pages/customerService/customerService" 59 "path": "pages/refundment/refundment"
58 }, 60 },
59 { 61 {
60 "path": "pages/myorder-paying/myorder-paying" 62 "path": "pages/Predelivery/Predelivery"
61 }, 63 },
62 { 64 {
63 "path": "pages/detail/detail" 65 "path": "pages/customerService/customerService"
64 } 66 },
65 67 {
66 ], 68 "path": "pages/myorder-paying/myorder-paying"
67 "globalStyle": { 69 }
68 "navigationBarTextStyle": "black", 70
69 "navigationBarTitleText": "uni-app", 71 ],
70 "navigationBarBackgroundColor": "#F8F8F8", 72 "globalStyle": {
71 "backgroundColor": "#F8F8F8" 73 "navigationBarTextStyle": "black",
72 }, 74 "navigationBarTitleText": "uni-app",
73 "tabBar": { 75 "navigationBarBackgroundColor": "#F8F8F8",
74 "color": "#C0C4CC", 76 "backgroundColor": "#F8F8F8"
75 "selectedColor": "#fa436a", 77 },
76 "borderStyle": "black", 78 "tabBar": {
77 "backgroundColor": "#ffffff", 79 "color": "#C0C4CC",
78 "list": [{ 80 "selectedColor": "#fa436a",
79 "pagePath": "pages/index/index", 81 "borderStyle": "black",
80 "iconPath": "static/tab-home.png", 82 "backgroundColor": "#ffffff",
81 "selectedIconPath": "static/tab-home-current.png", 83 "list": [{
82 "text": "首页" 84 "pagePath": "pages/index/index",
83 }, 85 "iconPath": "static/tab-home.png",
84 { 86 "selectedIconPath": "static/tab-home-current.png",
85 "pagePath": "pages/cart/cart", 87 "text": "首页"
86 "iconPath": "static/tab-cart.png", 88 },
87 "selectedIconPath": "static/tab-cart-current.png", 89 {
88 "text": "购物车" 90 "pagePath": "pages/cart/cart",
89 }, 91 "iconPath": "static/tab-cart.png",
90 { 92 "selectedIconPath": "static/tab-cart-current.png",
91 "pagePath": "pages/user/user", 93 "text": "购物车"
92 "iconPath": "static/tab-my.png", 94 },
93 "selectedIconPath": "static/tab-my-current.png", 95 {
94 "text": "我的" 96 "pagePath": "pages/user/user",
95 } 97 "iconPath": "static/tab-my.png",
96 ] 98 "selectedIconPath": "static/tab-my-current.png",
src/pages/addArddess/addArddess.vue
Diff comments   View file @e7121c7
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view class="content">
4 <view class="item,name" > 4 <view class="item,name" >
5 <text class="itemText">姓名</text> 5 <text class="itemText">姓名</text>
6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> 6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
7 </view> 7 </view>
8 <view class="item,phone"> 8 <view class="item,phone">
9 <text class="itemText">电话</text> 9 <text class="itemText">电话</text>
10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> 10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
11 </view> 11 </view>
12 <view class="item,area" > 12 <view class="item,area" >
13 <text class="itemText">地区</text> 13 <text class="itemText">地区</text>
14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> 14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>
15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> 15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
16 <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> 16 <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
17 </view> 17 </view>
18 <view class="item,address" > 18 <view class="item,address" >
19 <text class="itemText">详细地址</text> 19 <text class="itemText">详细地址</text>
20 <input placeholder="街道、小区门牌等详细地址"/> 20 <input placeholder="街道、小区门牌等详细地址"/>
21 </view> 21 </view>
22 <view class="item,check" > 22 <view class="item,check" >
23 <text class="itemText">设为默认地址</text> 23 <text class="itemText">设为默认地址</text>
24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> 24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
25 </view> 25 </view>
26 <input /> 26 <input />
27 </view> 27 </view>
28 <view class="button">保存并使用</view> 28 <view class="button">保存并使用</view>
29 </view> 29 </view>
30 </template> 30 </template>
31 31
32 <script> 32 <script>
33 import SimpleAddress from '@/components/Simple-address/Simple-address.vue'; 33 import SimpleAddress from '@/components/Simple-address/Simple-address.vue';
34 export default { 34 export default {
35 data() { 35 data() {
36 return { 36 return {
37 cityPickerValueDefault: [0, 0, 1], 37 cityPickerValueDefault: [0, 0, 1],
38 pickerText: '', 38 pickerText: '',
39 isDefalutAddress:true 39 isDefalutAddress:true
40 40
41 }; 41 };
42 }, 42 },
43 components: { 43 components: {
44 SimpleAddress 44 SimpleAddress
45 }, 45 },
46 methods: { 46 methods: {
47 openAddres() { 47 openAddres() {
48 this.cityPickerValueDefault = [0,0,1] 48 this.cityPickerValueDefault = [0,0,1]
49 this.$refs.SimpleAddress.open(); 49 this.$refs.SimpleAddress.open();
50 }, 50 },
51 onConfirm(e) { 51 onConfirm(e) {
52 this.pickerText = e.label; 52 this.pickerText = e.label;
53 }, 53 },
54 changeDefalutAddress(e){ 54 changeDefalutAddress(e){
55 this.isDefalutAddress = e.target.value 55 this.isDefalutAddress = e.target.value
56 } 56 }
57 } 57 }
58 } 58 }
59 </script> 59 </script>
60 60
61 <style lang="scss"> 61 <style lang="scss">
62 .wrap{ 62 .wrap{
63 height: 100vh; 63 height: 100vh;
64 background-color:#F2F2F2 ; 64 background-color:#F2F2F2 ;
65 font-family: PingFangSC-Regular; 65 font-family: PingFangSC-Regular;
66 letter-spacing: -0.23px; 66 letter-spacing: -0.23px;
67 padding-top: 19rpx; 67 padding-top: 19rpx;
68 } 68 }
69 .content{ 69 .content{
70 background-color: #FFFFFF; 70 background-color: #FFFFFF;
71 border-radius: 8px; 71 border-radius: 8px;
72 border-radius: 8px; 72 border-radius: 8px;
73 padding: 40rpx 56rpx; 73 padding: 40rpx 56rpx;
74 margin-left: 40rpx; 74 margin-left: 40rpx;
75 width: 670rpx; 75 width: 670rpx;
76 box-sizing: border-box; 76 box-sizing: border-box;
77 .item{ 77 .item{
78 display: flex; 78 display: flex;
79 justify-content: flex-start; 79 justify-content: flex-start;
80 font-size: 14px; 80 font-size: 14px;
81 align-items: center; 81 align-items: center;
82 height: 112rpx; 82 height: 112rpx;
83 border-bottom: 1rpx solid #E9E9E9; 83 border-bottom: 1rpx solid #E9E9E9;
84 .itemText{ 84 .itemText{
85 width: 162rpx; 85 width: 162rpx;
86 font-family: PingFangSC-Regular; 86 font-family: PingFangSC-Regular;
87 letter-spacing: -0.26px; 87 letter-spacing: -0.26px;
88 } 88 }
89 .btn{ 89 .btn{
90 color: #333333 !important; 90 color: #333333 !important;
91 } 91 }
92 } 92 }
93 .check{ 93 .check{
94 justify-content: space-between; 94 justify-content: space-between;
95 } 95 }
96 } 96 }
97 .button{ 97 .button{
98 position: fixed; 98 position: fixed;
99 bottom: 0; 99 bottom: 0;
100 left: 0; 100 left: 0;
101 height: 112rpx; 101 height: 112rpx;
102 width: 100%; 102 width: 100%;
103 background: #FF6B4A; 103 background: #FF6B4A;
104 display: flex; 104 display: flex;
105 justify-content: center; 105 justify-content: center;
106 align-items: center; 106 align-items: center;
107 font-size: 16px; 107 font-size: 16px;
108 color: #FFFFFF; 108 color: #FFFFFF;
109 letter-spacing: -0.3px; 109 letter-spacing: -0.3px;
110 } 110 }
111 </style> 111 </style>
112 112
src/pages/index/index.vue
Diff comments   View file @e7121c7
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 class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> 13 <view
14 {{ item.text }}<icon type="info" size="14"></icon> 14 class="screenItem"
15 </view> 15 v-bind:class="{ active: current === item.current }"
16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> 16 v-if="item.current === 2"
17 {{ item.text }}<icon type="info" size="14"></icon> 17 @click="dropDown"
18 </view> 18 >
19 <view v-if="item.current !== 2&&item.current!==4"> 19 {{ item.text }}
20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 20 <icon type="info" size="14"></icon>
21 </view> 21 </view>
22 </view> 22 <view
23 </view> 23 class="screenItem"
24 </view> 24 v-bind:class="{ active: current === item.current }"
25 <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 25 v-if="item.current === 4"
26 <view class="close"> 26 @click="showDrawer('showRight')"
27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> 27 >
28 </view> 28 {{ item.text }}
29 </uni-drawer> 29 <icon type="info" size="14"></icon>
30 30 </view>
31 31 <view v-if="item.current !== 2&&item.current!==4">
32 32 <view
33 <!-- 筛选菜单--> 33 class="screenItem"
34 <view class="content-wrap"> 34 v-bind:class="{ active: current === item.current }"
35 <view> 35 >{{ item.text }}</view>
36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> 36 </view>
37 <!-- 商品列表 --> 37 </view>
38 <view class="goods-list"> 38 </view>
39 <view class="product-list"> 39 </view>
40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > 40 <Uni-drawer
41 <Card :goods = "goods"></Card> 41 ref="showRight"
42 </view> 42 mask="true"
43 </view> 43 maskClick="true"
44 <view class="loading-text">{{loadingText}}</view> 44 mode="right"
45 </view> 45 :width="320"
46 46 @change="change($event,'showRight')"
47 </view> 47 >
48 </view> 48 <view class="close">
49 </view> 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 </template> 77 </template>
51 78
52 <script> 79 <script>
53 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; 80 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
54 import Card from "../../components/Card/Card.vue" 81 import Card from "../../components/Card/Card.vue";
55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; 82 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56 import data from '@/common/data.js';//筛选菜单数据 83 import data from "@/common/data.js"; //筛选菜单数据
57 export default { 84 export default {
58 components: { 85 components: {
59 'UniDrawer':UniDrawer, 86 UniDrawer: UniDrawer,
60 'HMfilterDropdown':HMfilterDropdown, 87 HMfilterDropdown: HMfilterDropdown,
61 'Card':Card 88 Card: Card
62 }, 89 },
63 data() { 90 data() {
64 return { 91 return {
65 screenItems: [ 92 screenItems: [
66 {current:0,text:'全部',hasIcon:false}, 93 { current: 0, text: "全部", hasIcon: false },
67 {current:1,text:'销量',hasIcon:false}, 94 { current: 1, text: "销量", hasIcon: false },
68 {current:2,text:'价格',hasIcon:true}, 95 { current: 2, text: "价格", hasIcon: true },
69 {current:3,text:'折扣',hasIcon:false}, 96 { current: 3, text: "折扣", hasIcon: false },
70 {current:4,text:'筛选',hasIcon:true}, 97 { current: 4, text: "筛选", hasIcon: true }
71 ], 98 ],
72 current: 0, 99 current: 0,
73 showRight: false, 100 showRight: false,
74 indexArr:'', 101 indexArr: "",
75 valueArr:'', 102 valueArr: "",
76 //商品数据 103 // //商品数据
77 goodsList:[ 104 goodsList: [
78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 105 {
79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 106 // goods_id: 0,
80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 107 // img: "/static/img/goods/p1.jpg",
81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 108 // name: "商品名称",
82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 109 // originCost: "￥198",
83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 110 // price: "￥168",
84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 111 // slogan: "1235人浏览"
85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 112 }
86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 113 ],
87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 114 loadingText: "正在加载...",
88 ], 115 filterDropdownValue: [],
89 loadingText:"正在加载...", 116 filterData: []
90 filterDropdownValue:[], 117 };
91 filterData:[] 118 },
92 } 119 filters: {
93 }, 120 outData(value) {
94 filters: { 121 return JSON.stringify(value);
95 　　outData(value) { 122 }
96 　　　　return JSON.stringify(value); 123 },
97 　　} 124 onLoad: function() {
98 }, 125 uni.request({
99 onLoad: function () { 126 url: "https://api.glass.xiuyetang.com/app/prod/list",
100 //定时器模拟ajax异步请求数据 127 method: "post",
101 // setTimeout(()=>{ 128 data: {
102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 129 // text: 'uni.request'
103 // this.filterDropdownValue = [ 130 },
104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 131 header: {
105 // [null,null], //第1个菜单选中 都不选中 132 // 'custom-header': 'hello', //自定义请求头信息
106 // [1], //第2个菜单选中 一级菜单的第1项 133 "Content-Type": "application/x-www-form-urlencoded"
107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 134 // 'Content-Type':'multipart/form-data'
108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 135 // 'Content-Type':'ext/plain'
109 // ]; 136 },
110 this.filterData = data; 137 timeout: 3000,
111 // },100); 138 // dataType:'json'
112 // 模拟ajax请求子菜单数据。 139 // responseType:'text',
113 // setTimeout(()=>{ 140 // sslVerify: true,//验证 ssl 证书
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"}]; 141 withCredentials: false, //跨域请求时是否携带凭证（cookies）
115 // },5000) 142 success: res => {
116 }, 143 console.error("success status === > ", res);
117 methods: { 144 this.goodsList = res.data.data;
118 showDrawer(e) { 145 // console.log('res.data', res.data);
119 this.$refs[e].open() 146 // this.text = 'request success';
120 }, 147 },
121 closeDrawer(e) { 148 fail: res => {
122 this.$refs[e].close() 149 console.log("fail status === > ", res);
123 }, 150 },
124 change(e, type) { 151 complete: res => {
125 this[type] = e 152 console.log("complete status === > ", res);
126 }, 153 }
127 onClickItem(e) { 154 });
128 if (this.current !== e) { 155 //定时器模拟ajax异步请求数据
129 this.current = e; 156 // setTimeout(()=>{
130 } 157 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
131 }, 158 // this.filterDropdownValue = [
132 dropDown(){ 159 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
133 console.log('下拉') 160 // [null,null], //第1个菜单选中 都不选中
134 }, 161 // [1], //第2个菜单选中 一级菜单的第1项
135 //接收菜单结果 162 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
136 confirm(e){ 163 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
137 this.indexArr = e.index; 164 // ];
138 this.valueArr = e.value; 165 // this.filterData = data;
139 return; 166 // },100);
140 console.log('修改菜单'); 167 // 模拟ajax请求子菜单数据。
141 this.filterData[4].submenu[1] = { 168 // setTimeout(()=>{
142 "name": "项目2", 169 // console.log('发起请求','ddddddd');
143 "submenu": [ 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"}];
144 171 // },3000);
145 ] 172 },
146 } 173 methods: {
147 } 174 showDrawer(e) {
148 }, 175 this.$refs[e].open();
149 onNavigationBarButtonTap(e) { 176 },
150 this.showRight = !this.showRight 177 closeDrawer(e) {
151 }, 178 this.$refs[e].close();
152 //上拉加载， 179 },
153 onReachBottom(){ 180 change(e, type) {
154 console.log('到底加载') 181 this[type] = e;
155 let len = this.goodsList.length; 182 },
156 if(len>=30){ 183 onClickItem(e) {
157 this.loadingText="~~到底了~~"; 184 if (this.current !== e) {
158 return false; 185 this.current = e;
159 }else{ 186 }
160 this.loadingText="正在加载..."; 187 },
161 } 188 dropDown() {
162 let end_goods_id = this.goodsList[len-1].goods_id; 189 console.log("下拉");
163 for(let i=1;i<=10;i++){ 190 },
164 let goods_id = end_goods_id+i; 191 //接收菜单结果
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人付款' }; 192 confirm(e) {
166 this.goodsList.push(p); 193 this.indexArr = e.index;
167 } 194 this.valueArr = e.value;
168 }, 195 return;
169 } 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 </script> 234 </script>
171 235
172 <style lang="scss"> 236 <style lang="scss">
173 .content { 237 .content {
174 display: flex; 238 display: flex;
175 flex-direction: column; 239 flex-direction: column;
176 align-items: center; 240 align-items: center;
177 justify-content: center; 241 justify-content: center;
178 background-color: #F7F6F6; 242 background-color: #f7f6f6;
179 } 243 }
180 .header{ 244 .header {
181 display: flex; 245 display: flex;
182 flex-direction: column; 246 flex-direction: column;
183 align-items: center; 247 align-items: center;
184 justify-content: center; 248 justify-content: center;
185 background-color: #F7F6F6; 249 background-color: #f7f6f6;
186 height:178rpx ; 250 height: 178rpx;
187 width: 100%; 251 width: 100%;
188 z-index: 999; 252 z-index: 999;
189 position: fixed; 253 position: fixed;
190 top: 0; 254 top: 0;
191 left: 0; 255 left: 0;
192 } 256 }
193 .searchBar { 257 .searchBar {
194 width: 670rpx; 258 width: 670rpx;
195 display: flex; 259 display: flex;
196 justify-content: center; 260 justify-content: center;
197 align-items: center; 261 align-items: center;
198 box-sizing: border-box; 262 box-sizing: border-box;
199 padding: 0rpx 16rpx; 263 padding: 0rpx 16rpx;
200 border: 1px solid #FF6B4A; 264 border: 1px solid #ff6b4a;
201 border-radius: 8rpx; 265 border-radius: 8rpx;
202 background-color: #ffffff; 266 background-color: #ffffff;
203 } 267 }
204 268
205 .searchIpt { 269 .searchIpt {
206 height: 68rpx; 270 height: 68rpx;
207 width: 670rpx; 271 width: 670rpx;
208 padding: 16rpx; 272 padding: 16rpx;
209 font-size: 28rpx; 273 font-size: 28rpx;
210 box-sizing: border-box; 274 box-sizing: border-box;
211 } 275 }
212 .screenBar{ 276 .screenBar {
213 width: 670rpx; 277 width: 670rpx;
214 height: 110rpx; 278 height: 110rpx;
215 display: flex; 279 display: flex;
216 flex-direction: row; 280 flex-direction: row;
217 justify-content: space-between; 281 justify-content: space-between;
218 align-items: center; 282 align-items: center;
219 color: #333333; 283 color: #333333;
220 font-size: 32rpx; 284 font-size: 32rpx;
221 } 285 }
222 .active{ 286 .active {
223 color: #FF6B4A; 287 color: #ff6b4a;
224 } 288 }
225 .screenItem{ 289 .screenItem {
226 display: flex; 290 display: flex;
227 justify-content: center; 291 justify-content: center;
228 align-items: center; 292 align-items: center;
229 } 293 }
230 .content-wrap{ 294 .content-wrap {
231 width: 100%; 295 width: 100%;
232 background-color: #FFFFFF; 296 background-color: #ffffff;
233 } 297 }
234 298
235 .HMfilterDropdown{ 299 .HMfilterDropdown {
236 top: 178rpx !important; 300 top: 178rpx !important;
237 } 301 }
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 }
264 302
303 .goods-list {
src/vue.config.js
Diff comments   View file @e7121c7
File was created 1 // const webpackApiMocker = require('mocker-api')
2
3 // module.exports = {
4 // devServer: {
5 // before(app) {
6 // webpackApiMocker(app, path.resolve('./mock/index.js'))
7 // },
8 // proxy: {
9 // '/app/prod/list': {
10 // target: 'https://api.glass.xiuyetang.com/',
11 // pathRewrite: {
12 // '^/app': ''
13 // }
14 // }
15 // },
16 // }
17 // }