刘文博 / gulu-vue

Browse Code »

Commit 843fce64ee0c83315d91d4feea9a44d67b4809ff

Authored by wulunyi 2020-05-10 13:48:46 +0800

1 parent 71166190e9

Exists in master

feat(master): 加入 vuex 的使用

Showing 9 changed files with 142 additions and 67 deletions Show diff stats

.gitignore

Diff comments View file @843fce6

1	.DS_Store	1	.DS_Store
2	node_modules/	2	node_modules/
3	unpackage/	3	unpackage/
4	dist/	4	dist/
		5	.history
5		6
6	# local env files	7	# local env files
7	.env.local	8	.env.local
8	.env.*.local	9	.env.*.local
9		10
10	# Log files	11	# Log files
11	npm-debug.log*	12	npm-debug.log*
12	yarn-debug.log*	13	yarn-debug.log*
13	yarn-error.log*	14	yarn-error.log*
14		15
15	# Editor directories and files	16	# Editor directories and files
16	.project	17	.project
17	.idea	18	.idea
18	.vscode	19	.vscode
19	*.suo	20	*.suo
20	.ntvs	21	.ntvs
21	*.njsproj	22	*.njsproj
22	*.sln	23	*.sln
23	.sw	24	.sw
24	yarn.lock	25	yarn.lock
25		26

src/App.vue

Diff comments View file @843fce6

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
10	console.log('App Show')	10	console.log('App Show')
11	},	11	},
12	onHide() {	12	onHide() {
13	console.log('App Hide')	13	console.log('App Hide')
14	}	14	}
15	});	15	});
16	</script>	16	</script>
17		17
18	<style>	18	<style>
19	/每个页面公共css /	19	/每个页面公共css /
20	</style>	20	</style>
21		21

src/main.js

Diff comments View file @843fce6

File was created	1	import Vue from 'vue'
	2	import App from './App.vue'
	3	import store from './store/index'
	4
	5	Vue.config.productionTip = false
	6	Vue.prototype.sendRequest = function(param){
	7	let _self = this,
	8	url = param.url,
	9	data = param.data,
	10	header = param.header,
	11	token = '';
	12	//拼接完整请求url
	13	let requestUrl = this.baseUrl + url;
	14	}
	15
	16
	17	new App({store}).$mount()
	18

src/main.ts

View file @7116619

1	import Vue from 'vue'		File was deleted
2	import App from './App.vue'
3
4
5	Vue.config.productionTip = false
6	Vue.prototype.sendRequest = function(param:any){
7	let _self = this,
8	url = param.url,
9	data = param.data,
10	header = param.header,
11	token = '';
12	//拼接完整请求url
13	let requestUrl = this.baseUrl + url;
14
15
16
17	}
18	new App().$mount()
19		1	import Vue from 'vue'

src/pages/addArddess/addArddess.vue

Diff comments View file @843fce6

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 @843fce6

 <template>
   <view class="content">
     <view class="header">
       <!-- 搜索-->
       <view class="searchBar">
         <icon class="searchIcon" type="search" size="14"></icon>
         <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
       </view>
       <!-- 筛选栏-->
       <view class="screenBar">
         <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
             v-if="item.current === 2"
             @click="dropDown"
           >
             {{ item.text }}
             <icon type="info" size="14"></icon>
           </view>
           <view
             class="screenItem"
             v-bind:class="{ active: current === item.current }"
             v-if="item.current === 4"
             @click="showDrawer('showRight')"
           >
             {{ item.text }}
             <icon type="info" size="14"></icon>
           </view>
           <view v-if="item.current !== 2&&item.current!==4">
             <view
               class="screenItem"
               v-bind:class="{ active: current === item.current }"
             >{{ item.text }}</view>
           </view>
         </view>
       </view>
     </view>
     <Uni-drawer
       ref="showRight"
       mask="true"
       maskClick="true"
       mode="right"
       :width="320"
       @change="change($event,'showRight')"
     >
       <view class="close">
         <view @click="closeDrawer('showRight')">
           <text class="word-btn-white">关闭</text>
         </view>
       </view>
     </Uni-drawer>
     <!-- 筛选菜单-->
     <view class="content-wrap">
       <view>
         <HMfilterDropdown
           :filterData="filterData"
           :defaultSelected="filterDropdownValue"
           :updateMenuName="true"
           @confirm="confirm"
           data-format="Object"
         ></HMfilterDropdown>
         <!-- 商品列表 -->
         <view class="goods-list">
           <view class="product-list">
             <view class="product" v-for="(goods) in goodsList" :key="goods.id">
               <Card :goods="goods"></Card>
             </view>
           </view>
           <view class="loading-text">{{loadingText}}</view>
         </view>
       </view>
     </view>
   </view>
 </template>
 <script>
-import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
+import UniDrawer from "../../components/uni-drawer/uni-drawer.vue";
 import Card from "../../components/Card/Card.vue";
 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
 import data from "@/common/data.js"; //筛选菜单数据
+import store from '@/store';
 export default {
   components: {
     UniDrawer: UniDrawer,
     HMfilterDropdown: HMfilterDropdown,
     Card: Card
   },
   data() {
     return {
       screenItems: [
         { current: 0, text: "全部", hasIcon: false },
         { current: 1, text: "销量", hasIcon: false },
         { current: 2, text: "价格", hasIcon: true },
         { current: 3, text: "折扣", hasIcon: false },
         { current: 4, text: "筛选", hasIcon: true }
       ],
       current: 0,
       showRight: false,
       indexArr: "",
       valueArr: "",
       // //商品数据
-      goodsList: [
+    //   goodsList: [
-        {
+    //     {
-        //   goods_id: 0,
+    //     //   goods_id: 0,
-        //   img: "/static/img/goods/p1.jpg",
+    //     //   img: "/static/img/goods/p1.jpg",
-        //   name: "商品名称",
+    //     //   name: "商品名称",
-        //   originCost: "￥198",
+    //     //   originCost: "￥198",
-        //   price: "￥168",
+    //     //   price: "￥168",
-        //   slogan: "1235人浏览"
+    //     //   slogan: "1235人浏览"
-        }
+    //     }
-      ],
+    //   ],
       loadingText: "正在加载...",
       filterDropdownValue: [],
       filterData: []
     };
   },
+  computed: {
+      goodsList() {
+        // 也可以从 getters 获取
+          console.log(this.$store.getters.list);
+          return this.$store.state.test.list;
+      }
+  },
   filters: {
     outData(value) {
       return JSON.stringify(value);
     }
   },
   onLoad: function() {
-    uni.request({
+    store.dispatch('test/fetch');
-      url: "https://api.glass.xiuyetang.com/app/prod/list",
+    // uni.request({
-      method: "post",
+    //   url: "https://api.glass.xiuyetang.com/app/prod/list",
-      data: {
+    //   method: "post",
-        // text: 'uni.request'
+    //   data: {
-      },
+    //     // text: 'uni.request'
-      header: {
+    //   },
-        // 'custom-header': 'hello', //自定义请求头信息
+    //   header: {
-        "Content-Type": "application/x-www-form-urlencoded"
+    //     // 'custom-header': 'hello', //自定义请求头信息
-        // 'Content-Type':'multipart/form-data'
+    //     "Content-Type": "application/x-www-form-urlencoded"
-        // 'Content-Type':'ext/plain'
+    //     // 'Content-Type':'multipart/form-data'
-      },
+    //     // 'Content-Type':'ext/plain'
-      timeout: 3000,
+    //   },
-      // dataType:'json'
+    //   timeout: 3000,
-      // responseType:'text',
+    //   // dataType:'json'
-      // sslVerify: true,//验证 ssl 证书
+    //   // responseType:'text',
-      withCredentials: false, //跨域请求时是否携带凭证（cookies）
+    //   // sslVerify: true,//验证 ssl 证书
-      success: res => {
+    //   withCredentials: false, //跨域请求时是否携带凭证（cookies）
-        console.error("success status === > ", res);
+    //   success: res => {
-        this.goodsList = res.data.data;
+    //     console.error("success status === > ", res);
-        // console.log('res.data', res.data);
+    //     this.goodsList = res.data.data;
-        // this.text = 'request success';
+    //     // console.log('res.data', res.data);
-      },
+    //     // this.text = 'request success';
-      fail: res => {
+    //   },
-        console.log("fail status === > ", res);
+    //   fail: res => {
-      },
+    //     console.log("fail status === > ", res);
-      complete: res => {
+    //   },
-        console.log("complete status === > ", res);
+    //   complete: res => {
-      }
+    //     console.log("complete status === > ", res);
-    });
+    //   }
+    // });
     //定时器模拟ajax异步请求数据
     // setTimeout(()=>{
     // 	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
     // 	this.filterDropdownValue = [
     // 		[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
     // 		[null,null],			//第1个菜单选中 都不选中
     // 		[1],					//第2个菜单选中 一级菜单的第1项
     // 		[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
     // 		[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
     // 	];
     // this.filterData = data;
     // },100);
     // 模拟ajax请求子菜单数据。
     // setTimeout(()=>{
     // 	console.log('发起请求','ddddddd');
     // 	// 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"}];
     // },3000);
   },
   methods: {
     showDrawer(e) {
       this.$refs[e].open();
     },
     closeDrawer(e) {
       this.$refs[e].close();
     },
     change(e, type) {
       this[type] = e;
     },
     onClickItem(e) {
       if (this.current !== e) {
         this.current = e;
       }
     },
     dropDown() {
       console.log("下拉");
     },
     //接收菜单结果
     confirm(e) {
       this.indexArr = e.index;
       this.valueArr = e.value;
       return;
       console.log("修改菜单");
       this.filterData[4].submenu[1] = {
         name: "项目2",
         submenu: []
       };
     }
   },
   onNavigationBarButtonTap(e) {
     this.showRight = !this.showRight;
   },
   //上拉加载，
   onReachBottom() {
     console.log("到底加载");
     let len = this.goodsList.length;
     if (len >= 30) {
       this.loadingText = "~~到底了~~";
       return false;
     } else {
       this.loadingText = "正在加载...";
     }
     let end_goods_id = this.goodsList[len - 1].goods_id;
     for (let i = 1; i <= 10; i++) {
       let goods_id = end_goods_id + i;
       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人付款"
       };
       this.goodsList.push(p);
     }
   }
 };
 </script>
 <style lang="scss">
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #f7f6f6;
 }
 .header {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #f7f6f6;
   height: 178rpx;
   width: 100%;
   z-index: 999;
   position: fixed;
   top: 0;
   left: 0;
 }
 .searchBar {
   width: 670rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   padding: 0rpx 16rpx;
   border: 1px solid #ff6b4a;
   border-radius: 8rpx;
   background-color: #ffffff;
 }
 .searchIpt {
   height: 68rpx;
   width: 670rpx;
   padding: 16rpx;
   font-size: 28rpx;
   box-sizing: border-box;
 }
 .screenBar {
   width: 670rpx;
   height: 110rpx;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   color: #333333;
   font-size: 32rpx;
 }
 .active {
   color: #ff6b4a;
 }
 .screenItem {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .content-wrap {
   width: 100%;
   background-color: #ffffff;
 }
 .HMfilterDropdown {
   top: 178rpx !important;
 }
 .goods-list {
   padding-top: 286rpx;
   .loading-text {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 30px;
     color: #979797;
     font-size: 12px;
   }
   .product-list {
     width: 92%;
     padding: 0 4% 3vw 4%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     .product {
       width: 48%;
       margin: 0 0 20rpx 0;
       background: #ffffff;
       border: 1px solid #f2f2f2;
     }
   }
 }
 </style>

src/pages/myOrder/myOrder.vue

Diff comments View file @843fce6

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	<view class="screenBar">	9	<view class="screenBar">
10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >	10	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>	11	<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
12	</view>	12	</view>
13	</view>	13	</view>
14	</view>	14	</view>
15	<view class="orderList" >	15	<view class="orderList" >
16	<view v-for="(order) in orderList" :key="order.orderId">	16	<view v-for="(order) in orderList" :key="order.orderId">
17	<OrderCard :order = "order" :current="current"></OrderCard>	17	<OrderCard :order = "order" :current="current"></OrderCard>
18	</view>	18	</view>
19	</view>	19	</view>
20	<view class="footer">已显示全部</view>	20	<view class="footer">已显示全部</view>
21	</view>	21	</view>
22	</template>	22	</template>
23	<script>	23	<script>
24	import OrderCard from './OrderCard.vue'	24	import OrderCard from './orderCard.vue'
25	export default {	25	export default {
26	components:{	26	components:{
27	'OrderCard':OrderCard	27	'OrderCard':OrderCard
28	},	28	},
29	data() {	29	data() {
30	return {	30	return {
31	screenItems: [	31	screenItems: [
32	{current:0,text:'全部'},	32	{current:0,text:'全部'},
33	{current:1,text:'待付款'},	33	{current:1,text:'待付款'},
34	{current:2,text:'待发货'},	34	{current:2,text:'待发货'},
35	{current:3,text:'待收货'},	35	{current:3,text:'待收货'},
36	{current:4,text:'退款售后'},	36	{current:4,text:'退款售后'},
37	],	37	],
38	current: 0,	38	current: 0,
39	//订单数据	39	//订单数据
40	orderList:[	40	orderList:[
41	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},	41	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
42	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},	42	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
43	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},	43	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
44	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},	44	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
45	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},	45	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
46	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},	46	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
47	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},	47	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
48	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},	48	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
49	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}	49	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50	],	50	],
51		51
52	};	52	};
53	},	53	},
54	methods:{	54	methods:{
55	onClickItem(e) {	55	onClickItem(e) {
56	if (this.current !== e) {	56	if (this.current !== e) {
57	this.current = e;	57	this.current = e;
58	}	58	}
59	}	59	}
60	}	60	}
61	}	61	}
62	</script>	62	</script>
63		63
64	<style lang="scss">	64	<style lang="scss">
65	.content {	65	.content {
66	display: flex;	66	display: flex;
67	flex-direction: column;	67	flex-direction: column;
68	align-items: center;	68	align-items: center;
69	background-color: #F7F6F6;	69	background-color: #F7F6F6;
70	min-height: 100vh;	70	min-height: 100vh;
71	.header{	71	.header{
72	background-color: #ffffff;	72	background-color: #ffffff;
73	width: 100%;	73	width: 100%;
74	height: 232rpx;	74	height: 232rpx;
75	padding: 40rpx 40rpx 36rpx 40rpx;	75	padding: 40rpx 40rpx 36rpx 40rpx;
76	box-sizing: border-box;	76	box-sizing: border-box;
77	position: fixed;	77	position: fixed;
78	top: 0;	78	top: 0;
79	left: 0;	79	left: 0;
80	.searchBar {	80	.searchBar {
81	width: 670rpx;	81	width: 670rpx;
82	display: flex;	82	display: flex;
83	justify-content: center;	83	justify-content: center;
84	align-items: center;	84	align-items: center;
85	box-sizing: border-box;	85	box-sizing: border-box;
86	padding: 0rpx 16rpx;	86	padding: 0rpx 16rpx;
87	border: 1px solid #FF6B4A;	87	border: 1px solid #FF6B4A;
88	border-radius: 8rpx;	88	border-radius: 8rpx;
89	background-color: #ffffff;	89	background-color: #ffffff;
90	}	90	}
91		91
92	.screenBar{	92	.screenBar{
93	width: 670rpx;	93	width: 670rpx;
94	height: 110rpx;	94	height: 110rpx;
95	display: flex;	95	display: flex;
96	flex-direction: row;	96	flex-direction: row;
97	justify-content: space-between;	97	justify-content: space-between;
98	align-items: center;	98	align-items: center;
99	color: #333333;	99	color: #333333;
100	font-size: 32rpx;	100	font-size: 32rpx;
101	}	101	}
102	.screenItem{	102	.screenItem{
103	height: 50rpx;	103	height: 50rpx;
104	font-size: 32rpx;	104	font-size: 32rpx;
105	color: #333333;	105	color: #333333;
106	display: flex;	106	display: flex;
107	justify-content: center;	107	justify-content: center;
108	align-items: center;	108	align-items: center;
109	transition:all 0.2s;	109	transition:all 0.2s;
110	}	110	}
111	.active{	111	.active{
112	// font-size: 34rpx;	112	// font-size: 34rpx;
113	color: #EC5D3B;	113	color: #EC5D3B;
114	}	114	}
115	.searchIpt {	115	.searchIpt {
116	height: 68rpx;	116	height: 68rpx;
117	width: 670rpx;	117	width: 670rpx;
118	padding: 16rpx;	118	padding: 16rpx;
119	font-size: 28rpx;	119	font-size: 28rpx;
120	box-sizing: border-box;	120	box-sizing: border-box;
121	}	121	}
122	}	122	}
123	.orderList{	123	.orderList{
124	margin-top: 232rpx;	124	margin-top: 232rpx;
125	}	125	}
126	.footer{	126	.footer{
127	font-size: 14px;	127	font-size: 14px;
128	color: #B8B8B8;	128	color: #B8B8B8;
129	margin: 40rpx 0;	129	margin: 40rpx 0;
130	}	130	}
131	}	131	}
132	</style>	132	</style>
133		133

src/store/index.js

Diff comments View file @843fce6

File was created	1	import Vue from 'vue'
	2	import Vuex from 'vuex'
	3
	4	Vue.use(Vuex)
	5
	6	const modulesFiles = require.context('./modules', true, /\.js$/)
	7
	8	const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	9	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	10	const value = modulesFiles(modulePath)
	11
	12	modules[moduleName] = value.default
	13
	14	return modules
	15	}, {})
	16
	17	const store = new Vuex.Store({
	18	modules,
	19	getters: {
	20	list: state => state.test.list
	21	}
	22	})
	23
	24	export default store;

src/store/modules/test.js

Diff comments View file @843fce6

File was created	1	const state = {
	2	list: [],
	3	};
	4
	5	const mutations = {
	6	INIT: (state, list) => {
	7	state.list = list;
	8	},
	9	};
	10
	11	const actions = {
	12	fetch({ commit }, param) {
	13	uni
	14	.request({
	15	url: "https://api.glass.xiuyetang.com/app/prod/list",
	16	method: "post",
	17	data: {},
	18	header: {
	19	"Content-Type": "application/x-www-form-urlencoded",
	20	},
	21	timeout: 3000,
	22	withCredentials: false,
	23	success: (res) => {
	24	commit('INIT', res.data.data)
	25	},
	26	fail: (res) => {
	27	console.log("fail status === > ", res);
	28	},
	29	complete: (res) => {
	30	console.log("complete status === > ", res);
	31	},
	32	});
	33	},
	34	};
	35
	36	export default {
	37	namespaced: true,
	38	state,
	39	mutations,
	40	actions,
	41	};
	42