刘文博 / gulu-vue

Download as
Browse Code »

Commit a8284c675bac784dbd83c4d7511010446ba6b8e8

Authored by BigBoss
2 parents 0508098fe3 72d769fb77
Exists in master

修改冲突

Showing 7 changed files   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 {
4 "path": "pages/index/index",
5 "style": {
6 "navigationBarTitleText": "商城一览"
7 }
3 { 8 },
4 "path": "pages/index/index", 9 {
5 "style": { 10 "path" : "pages/myOrder/myOrder",
6 "navigationBarTitleText": "商城一览" 11 "style" : {
7 } 12 "navigationBarTitleText": "我的订单"}
8 }, 13 },
9 { 14 {
10 "path": "pages/frameDetail/frameDetail", 15 "path": "pages/frameDetail/frameDetail",
11 "style": { 16 "style": {
12 "navigationBarTitleText": "产品详情" 17 "navigationBarTitleText": "产品详情"
13 } 18 }
14 }, 19 },
15 { 20 {
16 "path": "pages/lensDetails/lensDetails", 21 "path": "pages/lensDetails/lensDetails",
17 "style": { 22 "style": {
18 "navigationBarTitleText": "产品详情" 23 "navigationBarTitleText": "产品详情"
19 } 24 }
20 }, 25 },
21 { 26 {
22 "path": "pages/cart/cart", 27 "path": "pages/cart/cart",
23 "style": { 28 "style": {
24 "navigationBarTitleText": "购物车" 29 "navigationBarTitleText": "购物车"
25 } 30 }
26 }, 31 },
27 { 32 {
28 "path" : "pages/purchaseLenses/purchaseLenses", 33 "path" : "pages/purchaseLenses/purchaseLenses",
29 "style" : { 34 "style" : {
30 "navigationBarTitleText": "产品选购" 35 "navigationBarTitleText": "产品选购"
31 } 36 }
32 }, 37 },
33 { 38 {
34 "path" : "pages/refundProgress/refundProgress", 39 "path" : "pages/refundProgress/refundProgress",
35 "style": { 40 "style": {
36 "navigationBarTitleText": "申请退款" 41 "navigationBarTitleText": "申请退款"
37 } 42 }
38 }, 43 },
39 {
40 "path" : "pages/myOrder/myOrder",
41 "style" : {
42 "navigationBarTitleText": "我的订单"}
43 },
44 { 44 {
45 "path": "pages/addAddress/addAddress", 45 "path": "pages/addAddress/addAddress",
46 "style": { 46 "style": {
47 "navigationBarTitleText": "新增地址" 47 "navigationBarTitleText": "新增地址"
48 } 48 }
49 }, 49 },
50 { 50 {
51 "path" : "pages/confirmOrder/confirmOrder", 51 "path" : "pages/confirmOrder/confirmOrder",
52 "style" : { 52 "style" : {
53 "navigationBarTitleText": "确认订单"} 53 "navigationBarTitleText": "确认订单"
54 }, 54 }
55 { 55 },
56 "path": "pages/user/user", 56 {
57 "style": { 57 "path": "pages/user/user",
58 "navigationBarTitleText": "我的" 58 "style": {
59 } 59 "navigationBarTitleText": "我的"
60 }, 60 }
61 { 61 },
62 "path": "pages/refundment/refundWays" 62 // {
63 }, 63 // "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
64 { 64 // "style": {
65 "path": "pages/refundment/refundment" 65 // "navigationBarTitleText": "选购参数"
66 }, 66 // }
67 { 67 // },
68 "path": "pages/predelivery/predelivery" 68 // {
69 }, 69 // "path": "pages/detailStandard/detailStandardSun",
70 { 70 // "style": {
71 "path": "pages/customerService/customerService" 71 // "navigationBarTitleText": "选购参数"
72 }, 72 // }
73 { 73 // },
74 "path": "pages/myOrderPaying/myOrderPaying", 74 {
75 "style": { 75 "path": "pages/refundment/refundWays"
76 "navigationBarTitleText": "待付款" 76 },
77 } 77 {
78 } 78 "path": "pages/refundment/refundment"
79 79 },
80 ], 80 {
81 "globalStyle": { 81 "path": "pages/predelivery/predelivery"
82 "navigationBarTextStyle": "black", 82 },
83 "navigationBarTitleText": "uni-app", 83 {
84 "navigationBarBackgroundColor": "#F8F8F8", 84 "path": "pages/customerService/customerService"
85 "backgroundColor": "#F8F8F8" 85 },
86 }, 86 {
87 "tabBar": { 87 "path": "pages/myOrderPaying/myOrderPaying",
88 "color": "#C0C4CC", 88 "style": {
89 "selectedColor": "#fa436a", 89 "navigationBarTitleText": "待付款"
90 "borderStyle": "black", 90 }
91 "backgroundColor": "#ffffff", 91 }
92 "list": [{ 92
93 "pagePath": "pages/index/index", 93 ],
94 "iconPath": "static/tab-home.png", 94 "globalStyle": {
95 "selectedIconPath": "static/tab-home-current.png", 95 "navigationBarTextStyle": "black",
96 "text": "首页" 96 "navigationBarTitleText": "uni-app",
97 }, 97 "navigationBarBackgroundColor": "#F8F8F8",
98 { 98 "backgroundColor": "#F8F8F8"
99 "pagePath": "pages/cart/cart", 99 },
100 "iconPath": "static/tab-cart.png", 100 "tabBar": {
101 "selectedIconPath": "static/tab-cart-current.png", 101 "color": "#C0C4CC",
102 "text": "购物车" 102 "selectedColor": "#fa436a",
103 }, 103 "borderStyle": "black",
104 { 104 "backgroundColor": "#ffffff",
105 "pagePath": "pages/user/user", 105 "list": [{
106 "iconPath": "static/tab-my.png", 106 "pagePath": "pages/index/index",
107 "selectedIconPath": "static/tab-my-current.png", 107 "iconPath": "static/tab-home.png",
108 "text": "我的" 108 "selectedIconPath": "static/tab-home-current.png",
109 } 109 "text": "首页"
110 ] 110 },
111 } 111 {
112 } 112 "pagePath": "pages/cart/cart",
113 113 "iconPath": "static/tab-cart.png",
114 "selectedIconPath": "static/tab-cart-current.png",
115 "text": "购物车"
116 },
117 {
118 "pagePath": "pages/user/user",
119 "iconPath": "static/tab-my.png",
120 "selectedIconPath": "static/tab-my-current.png",
121 "text": "我的"
src/pages/index/index.vue
Diff comments   View file @a8284c6
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 loadingText: "~~到底了~~", 105 loadingText: "~~到底了~~",
106 filterDropdownValue: [], 106 filterDropdownValue: [],
107 filterData: [] 107 filterData: []
108 }; 108 };
109 }, 109 },
110 computed: { 110 computed: {
111 goodsList() { 111 goodsList() {
112 // 也可以从 getters 获取 112 // 也可以从 getters 获取
113 console.log(this.$store.getters.list); 113 console.log('list', this.$store.state.test.list);
114 return this.$store.state.test.list; 114 return this.$store.state.test.list;
115 }, 115 },
116 categoryList(){ 116 categoryList(){
117 console.log(JSON.stringify(this.$store.state.categoryOrder.categoryList)); 117 console.log(JSON.stringify(this.$store.state.categoryOrder.categoryList));
118 } 118 }
119 119
120 }, 120 },
121 filters: { 121 filters: {
122 outData(value) { 122 outData(value) {
123 return JSON.stringify(value); 123 return JSON.stringify(value);
124 } 124 }
125 }, 125 },
126 onLoad: function() { 126 onLoad: function() {
127 store.dispatch('test/fetch'); 127 store.dispatch('test/fetch');
128 store.dispatch('categoryOrder/fetch') 128 store.dispatch('categoryOrder/fetch')
129 129
130 //定时器模拟ajax异步请求数据 130 //定时器模拟ajax异步请求数据
131 setTimeout(()=>{ 131 setTimeout(()=>{
132 //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 132 //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
133 // this.filterDropdownValue = [ 133 // this.filterDropdownValue = [
134 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 134 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
135 // [null,null], //第1个菜单选中 都不选中 135 // [null,null], //第1个菜单选中 都不选中
136 // [1], //第2个菜单选中 一级菜单的第1项 136 // [1], //第2个菜单选中 一级菜单的第1项
137 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 137 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
138 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 138 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
139 // ]; 139 // ];
140 this.filterData = data; 140 this.filterData = data;
141 },100); 141 },100);
142 }, 142 },
143 methods: { 143 methods: {
144 showDrawer(e) { 144 showDrawer(e) {
145 this.$refs[e].open(); 145 this.$refs[e].open();
146 }, 146 },
147 closeDrawer(e) { 147 closeDrawer(e) {
148 this.$refs[e].close(); 148 this.$refs[e].close();
149 }, 149 },
150 change(e, type) { 150 change(e, type) {
151 this[type] = e; 151 this[type] = e;
152 }, 152 },
153 onClickItem(e) { 153 onClickItem(e) {
154 if (this.current !== e) { 154 if (this.current !== e) {
155 this.current = e; 155 this.current = e;
156 } 156 }
157 }, 157 },
158 dropDown() { 158 dropDown() {
159 console.log("下拉"); 159 console.log("下拉");
160 }, 160 },
161 //接收菜单结果 161 //接收菜单结果
162 confirm(e) { 162 confirm(e) {
163 this.indexArr = e.index; 163 this.indexArr = e.index;
164 this.valueArr = e.value; 164 this.valueArr = e.value;
165 return; 165 return;
166 console.log("修改菜单"); 166 console.log("修改菜单");
167 this.filterData[4].submenu[1] = { 167 this.filterData[4].submenu[1] = {
168 name: "项目2", 168 name: "项目2",
169 submenu: [] 169 submenu: []
170 }; 170 };
171 } 171 }
172 }, 172 },
173 173
174 }; 174 };
175 </script> 175 </script>
176 176
177 <style lang="scss"> 177 <style lang="scss">
178 .content { 178 .content {
179 display: flex; 179 display: flex;
180 flex-direction: column; 180 flex-direction: column;
181 align-items: center; 181 align-items: center;
182 justify-content: center; 182 justify-content: center;
183 background-color: #f7f6f6; 183 background-color: #f7f6f6;
184 } 184 }
185 .header { 185 .header {
186 display: flex; 186 display: flex;
187 flex-direction: column; 187 flex-direction: column;
188 align-items: center; 188 align-items: center;
189 justify-content: center; 189 justify-content: center;
190 background-color: #f7f6f6; 190 background-color: #f7f6f6;
191 height: 178rpx; 191 height: 178rpx;
192 width: 100%; 192 width: 100%;
193 z-index: 999; 193 z-index: 999;
194 position: fixed; 194 position: fixed;
195 top: 0; 195 top: 0;
196 left: 0; 196 left: 0;
197 } 197 }
198 .searchBar { 198 .searchBar {
199 width: 670rpx; 199 width: 670rpx;
200 display: flex; 200 display: flex;
201 justify-content: center; 201 justify-content: center;
202 align-items: center; 202 align-items: center;
203 box-sizing: border-box; 203 box-sizing: border-box;
204 padding: 0rpx 16rpx; 204 padding: 0rpx 16rpx;
205 border: 1px solid #ff6b4a; 205 border: 1px solid #ff6b4a;
206 border-radius: 8rpx; 206 border-radius: 8rpx;
207 background-color: #ffffff; 207 background-color: #ffffff;
208 } 208 }
209 209
210 .searchIpt { 210 .searchIpt {
211 height: 68rpx; 211 height: 68rpx;
212 width: 670rpx; 212 width: 670rpx;
213 padding: 16rpx; 213 padding: 16rpx;
214 font-size: 28rpx; 214 font-size: 28rpx;
215 box-sizing: border-box; 215 box-sizing: border-box;
216 } 216 }
217 .screenBar { 217 .screenBar {
218 width: 670rpx; 218 width: 670rpx;
219 height: 110rpx; 219 height: 110rpx;
220 display: flex; 220 display: flex;
221 flex-direction: row; 221 flex-direction: row;
222 justify-content: space-between; 222 justify-content: space-between;
223 align-items: center; 223 align-items: center;
224 color: #333333; 224 color: #333333;
225 font-size: 32rpx; 225 font-size: 32rpx;
226 } 226 }
227 .active { 227 .active {
228 color: #ff6b4a; 228 color: #ff6b4a;
229 } 229 }
230 .screenItem { 230 .screenItem {
231 display: flex; 231 display: flex;
232 justify-content: center; 232 justify-content: center;
233 align-items: center; 233 align-items: center;
234 } 234 }
235 .content-wrap { 235 .content-wrap {
236 width: 100%; 236 width: 100%;
237 background-color: #ffffff; 237 background-color: #ffffff;
238 } 238 }
239 239
240 .HMfilterDropdown { 240 .HMfilterDropdown {
241 top: 178rpx !important; 241 top: 178rpx !important;
242 } 242 }
243 243
244 .goods-list { 244 .goods-list {
245 padding-top: 286rpx; 245 padding-top: 286rpx;
246 .loading-text { 246 .loading-text {
247 width: 100%; 247 width: 100%;
248 display: flex; 248 display: flex;
249 justify-content: center; 249 justify-content: center;
250 align-items: center; 250 align-items: center;
251 height: 30px; 251 height: 30px;
252 color: #979797; 252 color: #979797;
253 font-size: 12px; 253 font-size: 12px;
254 } 254 }
255 .product-list { 255 .product-list {
256 width: 92%; 256 width: 92%;
257 padding: 0 4% 3vw 4%; 257 padding: 0 4% 3vw 4%;
258 display: flex; 258 display: flex;
259 justify-content: space-between; 259 justify-content: space-between;
260 flex-wrap: wrap; 260 flex-wrap: wrap;
261 .product { 261 .product {
262 width: 48%; 262 width: 48%;
263 margin: 0 0 20rpx 0; 263 margin: 0 0 20rpx 0;
264 background: #ffffff; 264 background: #ffffff;
265 border: 1px solid #f2f2f2; 265 border: 1px solid #f2f2f2;
266 } 266 }
267 } 267 }
268 } 268 }
269 </style> 269 </style>
270 270
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @a8284c6
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current === order.orderType" >
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号：{{order.orderId}}</text> 5 <text class="orderId">订单号：{{order.orderId}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderType" v-if="order.orderType===1">待付款</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="order.orderType===2">待发货</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="order.orderType === 3">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <text class="orderType" v-if="order.orderType === 5">已完成</text>
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="order.img" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{order.name}}</view>
16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{order.price}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X{{order.buyNum}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <view class="btns" v-if="order.orderType === 1">
25 <view class="btn-type1">申请退款</view> 25 <view class="btn-type1">申请退款</view>
26 <view class="btn-type2">去支付</view> 26 <view class="btn-type2">去支付</view>
27 </view> 27 </view>
28 <view class="btns" v-if="order.orderType === 0"> 28 <view class="btns" v-if="order.orderType === 0">
29 <view class="btn-type1">再次购买</view> 29 <view class="btn-type1">再次购买</view>
30 </view> 30 </view>
31 </view> 31 </view>
32 <view class="card" v-if="current === 0" > 32 <view class="card" v-if="current === 0" >
33 <view class="cardHeader"> 33 <view class="cardHeader">
34 <text class="orderId">订单号：{{order.orderId}}</text> 34 <text class="orderId">订单号：{{order.orderId}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 35 <text class="orderType" v-if="order.orderType===1">待付款</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 36 <text class="orderType" v-if="order.orderType===2">待发货</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 37 <text class="orderType" v-if="order.orderType === 3">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 38 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
39 </view> 39 </view>
40 <view class="orderCardInfo"> 40 <view class="orderCardInfo">
41 <image :src="order.img" mode="aspectFill"></image> 41 <image :src="order.img" mode="aspectFill"></image>
42 <view class="infoText"> 42 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 43 <view class="orderName">{{order.name}}</view>
44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
45 <view class="infoText-bottom"> 45 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 46 <view class="markPrice">{{order.price}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 47 <view class="buy-num">X{{order.buyNum}}</view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </view> 50 </view>
51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 52 <view class="btns" v-if="order.orderType === 1">
53 <view class="btn-type1" @click="toRefundment">申请退款</view> 53 <view class="btn-type1" @click="toRefundment">申请退款</view>
54 <view class="btn-type2">去支付</view> 54 <view class="btn-type2">去支付</view>
55 </view> 55 </view>
56 <view class="btns" v-if="order.orderType === 0"> 56 <view class="btns" v-if="order.orderType === 0">
57 <view class="btn-type1">再次购买</view> 57 <view class="btn-type1">再次购买</view>
58 </view> 58 </view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 export default { 64 export default {
65 props: { 65 props: {
66 /** 66 /**
67 * 订单数据 67 * 订单数据
68 */ 68 */
69 order: { 69 order: {
70 orderId: Number, 70 orderId: Number,
71 img: String, 71 img: String,
72 name: String, 72 name: String,
73 originCost:String, 73 originCost:String,
74 price: String, 74 price: String,
75 orderType:Number, 75 orderType:Number,
76 buyNum:Number 76 buyNum:Number
77 }, 77 },
78 /** 78 /**
79 * 当前选择 79 * 当前选择
80 */ 80 */
81 current:Number 81 current:Number
82 82
83 }, 83 },
84 data() { 84 onLoad() {
85 return { 85 // console.log('dd');
86 }; 86 console.log('order', this.props.order);
87 },
88 data() {
89 return {
90 };
87 }, 91 },
88 methods:{ 92 methods:{
89 toRefundment(){ 93 toRefundment(){
90 uni.navigateTo({ 94 uni.navigateTo({
91 url: '../refundment/refundment', 95 url: '../refundment/refundment',
92 success: res => {}, 96 success: res => {},
93 fail: () => {}, 97 fail: () => {},
94 complete: () => {} 98 complete: () => {}
95 }); 99 });
96 } 100 }
97 } 101 }
98 } 102 }
99 </script> 103 </script>
100 104
101 <style lang="scss"> 105 <style lang="scss">
102 .card{ 106 .card{
103 width: 670rpx; 107 width: 670rpx;
104 height: 478rpx; 108 height: 478rpx;
105 background: #FFFFFF; 109 background: #FFFFFF;
106 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 110 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
107 border-radius: 8px; 111 border-radius: 8px;
108 border-radius: 8px; 112 border-radius: 8px;
109 margin-top: 20rpx; 113 margin-top: 20rpx;
110 padding: 40rpx; 114 padding: 40rpx;
111 box-sizing: border-box; 115 box-sizing: border-box;
112 .cardHeader{ 116 .cardHeader{
113 width: 100%; 117 width: 100%;
114 height: 40rpx; 118 height: 40rpx;
115 display: flex; 119 display: flex;
116 justify-content: space-between; 120 justify-content: space-between;
117 align-items: center; 121 align-items: center;
118 .orderId{ 122 .orderId{
119 font-size: 12px; 123 font-size: 12px;
120 color: #999999; 124 color: #999999;
121 } 125 }
122 .orderType{ 126 .orderType{
123 font-size: 14px; 127 font-size: 14px;
124 color: #FF6B4A; 128 color: #FF6B4A;
125 } 129 }
126 } 130 }
127 .orderCardInfo{ 131 .orderCardInfo{
128 width: 100%; 132 width: 100%;
129 height: 188rpx; 133 height: 188rpx;
130 display: flex; 134 display: flex;
131 flex-direction: row; 135 flex-direction: row;
132 justify-content: space-between; 136 justify-content: space-between;
133 align-items: center; 137 align-items: center;
134 margin-top: 40rpx; 138 margin-top: 40rpx;
135 image{ 139 image{
136 height: 188rpx; 140 height: 188rpx;
137 width: 188rpx; 141 width: 188rpx;
138 margin-right: 24rpx; 142 margin-right: 24rpx;
139 } 143 }
140 .infoText{ 144 .infoText{
141 display: flex; 145 display: flex;
142 flex-direction: column; 146 flex-direction: column;
143 justify-content: space-between; 147 justify-content: space-between;
144 align-items: flex-start; 148 align-items: flex-start;
145 height: 188rpx; 149 height: 188rpx;
146 } 150 }
147 .orderName{ 151 .orderName{
148 font-size: 14px; 152 font-size: 14px;
149 color: #333333; 153 color: #333333;
150 } 154 }
151 .orderDescrib{ 155 .orderDescrib{
152 font-size: 12px; 156 font-size: 12px;
153 color: #999999; 157 color: #999999;
154 } 158 }
155 .infoText-bottom{ 159 .infoText-bottom{
156 display: flex; 160 display: flex;
157 flex-direction: row; 161 flex-direction: row;
158 justify-content: space-between; 162 justify-content: space-between;
159 align-items: center; 163 align-items: center;
160 width: 100%; 164 width: 100%;
161 .markPrice{ 165 .markPrice{
162 font-size: 14px; 166 font-size: 14px;
163 color: #FF6B4A; 167 color: #FF6B4A;
164 } 168 }
165 .buy-num{ 169 .buy-num{
166 font-size: 12px; 170 font-size: 12px;
167 color: #999999; 171 color: #999999;
168 } 172 }
169 } 173 }
170 } 174 }
171 .payPrice{ 175 .payPrice{
172 text-align: right; 176 text-align: right;
173 margin: 20rpx 0; 177 margin: 20rpx 0;
174 font-size: 14px; 178 font-size: 14px;
175 color: #333333; 179 color: #333333;
176 .priceNum{ 180 .priceNum{
177 font-size: 14px; 181 font-size: 14px;
178 color: #FF6B4A; 182 color: #FF6B4A;
179 } 183 }
180 } 184 }
181 .btns{ 185 .btns{
182 display: flex; 186 display: flex;
183 justify-content: flex-end; 187 justify-content: flex-end;
184 align-items: center; 188 align-items: center;
185 .btn-type1{ 189 .btn-type1{
186 height: 48rpx; 190 height: 48rpx;
187 width: 156rpx; 191 width: 156rpx;
188 border: 1px solid #FF6B4A; 192 border: 1px solid #FF6B4A;
189 border-radius: 12px; 193 border-radius: 12px;
190 border-radius: 12px; 194 border-radius: 12px;
191 text-align: center; 195 text-align: center;
192 line-height: 48rpx; 196 line-height: 48rpx;
193 font-size: 12px; 197 font-size: 12px;
194 color: #FF6B4A; 198 color: #FF6B4A;
195 } 199 }
196 .btn-type2{ 200 .btn-type2{
197 height: 48rpx; 201 height: 48rpx;
198 width: 140rpx; 202 width: 140rpx;
199 background: #FF6B4A; 203 background: #FF6B4A;
200 border-radius: 12px; 204 border-radius: 12px;
201 border-radius: 12px; 205 border-radius: 12px;
202 text-align: center; 206 text-align: center;
203 line-height: 48rpx; 207 line-height: 48rpx;
204 font-size: 12px; 208 font-size: 12px;
205 color: #FFFFFF; 209 color: #FFFFFF;
206 margin-left: 20rpx; 210 margin-left: 20rpx;
207 } 211 }
208 } 212 }
209 } 213 }
210 </style> 214 </style>
211 215
src/pages/myOrder/myOrder.vue
Diff comments   View file @a8284c6
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
17 v-for="(order) in orderList"
18 :key="order.orderId"
19 >
17 <OrderCard :order = "order" :current="current"></OrderCard> 20 <OrderCard :order = "order" :current="current"></OrderCard>
18 </view> 21 </view>
19 </view> 22 </view>
20 <view class="footer">已显示全部</view> 23 <view class="footer">已显示全部</view>
21 </view> 24 </view>
22 </template> 25 </template>
23 <script> 26 <script>
24 import OrderCard from './components/OrderCard.vue' 27 import OrderCard from './components/OrderCard.vue';
28 import store from '@/store';
29
25 export default { 30 export default {
26 components:{ 31 components:{
27 'OrderCard':OrderCard 32 'OrderCard': OrderCard
28 }, 33 },
29 data() { 34 data() {
30 return { 35 return {
31 screenItems: [ 36 screenItems: [
32 {current:0,text:'全部'}, 37 {current:0,text:'全部'},
33 {current:1,text:'待付款'}, 38 {current:1,text:'待付款'},
34 {current:2,text:'待发货'}, 39 {current:2,text:'待发货'},
35 {current:3,text:'待收货'}, 40 {current:3,text:'待收货'},
36 {current:4,text:'退款售后'}, 41 {current:4,text:'退款售后'},
37 ], 42 ],
38 current: 0, 43 current: 0,
39 //订单数据 44 //订单数据
40 orderList:[ 45 // orderList:[
41 { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, 46 // { 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}, 47 // { 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}, 48 // { 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}, 49 // { 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}, 50 // { 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}, 51 // { 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}, 52 // { 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}, 53 // { 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} 54 // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50 ], 55 // ],
51
52 }; 56 };
53 }, 57 },
58
59 onLoad: function() {
60 store.dispatch('myOrder/getList', {
61 uid: "1",
62 way: "0",
63 });
64 },
65 computed: {
66 orderList() {
67 console.log('orderList', this.$store.state.myOrder.orderlist);
68 return this.$store.state.myOrder.orderlist;
69 }
54 onLoad:function(option){ 70 },
55 // console.log(option.current) 71 methods:{
56 this.current = option.current 72 onClickItem(e) {
57 }, 73 if (this.current !== e) {
58 methods:{ 74 this.current = e;
59 onClickItem(e) { 75 }
60 if (this.current !== e) { 76 }
61 this.current = e; 77 }
62 } 78 }
63 } 79 </script>
64 } 80
65 } 81 <style lang="scss">
66 </script> 82 .content {
67 83 display: flex;
68 <style lang="scss"> 84 flex-direction: column;
69 .content { 85 align-items: center;
70 display: flex; 86 background-color: #F7F6F6;
71 flex-direction: column; 87 min-height: 100vh;
72 align-items: center; 88 .header{
73 background-color: #F7F6F6; 89 background-color: #ffffff;
74 min-height: 100vh; 90 width: 100%;
75 .header{ 91 height: 232rpx;
76 background-color: #ffffff; 92 padding: 40rpx 40rpx 36rpx 40rpx;
77 width: 100%; 93 box-sizing: border-box;
78 height: 232rpx; 94 position: fixed;
79 padding: 40rpx 40rpx 36rpx 40rpx; 95 top: 0;
80 box-sizing: border-box; 96 left: 0;
81 position: fixed; 97 .searchBar {
82 top: 0; 98 width: 670rpx;
83 left: 0; 99 display: flex;
84 .searchBar { 100 justify-content: center;
85 width: 670rpx; 101 align-items: center;
86 display: flex; 102 box-sizing: border-box;
87 justify-content: center; 103 padding: 0rpx 16rpx;
88 align-items: center; 104 border: 1px solid #FF6B4A;
89 box-sizing: border-box; 105 border-radius: 8rpx;
90 padding: 0rpx 16rpx; 106 background-color: #ffffff;
91 border: 1px solid #FF6B4A; 107 }
92 border-radius: 8rpx; 108
93 background-color: #ffffff; 109 .screenBar{
94 } 110 width: 670rpx;
95 111 height: 110rpx;
96 .screenBar{ 112 display: flex;
97 width: 670rpx; 113 flex-direction: row;
98 height: 110rpx; 114 justify-content: space-between;
99 display: flex; 115 align-items: center;
100 flex-direction: row; 116 color: #333333;
101 justify-content: space-between; 117 font-size: 32rpx;
102 align-items: center; 118 }
103 color: #333333; 119 .screenItem{
104 font-size: 32rpx; 120 height: 50rpx;
105 } 121 font-size: 32rpx;
106 .screenItem{ 122 color: #333333;
107 height: 50rpx; 123 display: flex;
108 font-size: 32rpx; 124 justify-content: center;
109 color: #333333; 125 align-items: center;
110 display: flex; 126 transition:all 0.2s;
111 justify-content: center; 127 }
112 align-items: center; 128 .active{
113 transition:all 0.2s; 129 // font-size: 34rpx;
114 } 130 color: #EC5D3B;
115 .active{ 131 }
116 // font-size: 34rpx; 132 .searchIpt {
117 color: #EC5D3B; 133 height: 68rpx;
118 } 134 width: 670rpx;
119 .searchIpt { 135 padding: 16rpx;
120 height: 68rpx; 136 font-size: 28rpx;
121 width: 670rpx; 137 box-sizing: border-box;
122 padding: 16rpx; 138 }
123 font-size: 28rpx; 139 }
124 box-sizing: border-box; 140 .orderList{
125 } 141 margin-top: 232rpx;
126 } 142 }
127 .orderList{ 143 .footer{
128 margin-top: 232rpx; 144 font-size: 14px;
129 } 145 color: #B8B8B8;
130 .footer{ 146 margin: 40rpx 0;
131 font-size: 14px; 147 }
132 color: #B8B8B8; 148 }
133 margin: 40rpx 0; 149 </style>
src/store/modules/myOrder.js
Diff comments   View file @a8284c6
1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 orderList
6 } = urlAlias;
7
8 const data = {
9 data: [
10 {
11 finished_time: null,
12 is_refound: "0",
13 mch_id: "1436019502",
14 money_of_dcw: "0",
15 money_of_partner: "0",
16 money_of_shop: "0",
17 orderJudge: false,
18 order_info: {
19 address:{
20 cityName: "镇江市",
21 countyName: "丹阳市",
22 detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 errMsg: "chooseAddress:ok",
24 nationalCode: "321181",
25 postalCode: "212300",
26 provinceName: "江苏省",
27 telNumber: "15896379277",
28 userName: "点餐汪客服",
29 },
30 cartinfo:['11', '12'],
31 keyname: "1_1587129366",
32 lefttime: 179995,
33 list:[
34 {
35 cart_id: "11",
36 imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 img_index_url: null,
38 memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
39 mp_id: "1",
40 nowPrice: 100,
41 num: "2",
42 oldPrice: "0",
43 p_discount: "1",
44 p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
45 p_root_index: "1",
46 p_sale_price: "0",
47 peopleName: "me",
48 pics: '',
49 pid: "4",
50 sk_id: "38",
51 },
52 ],
53 orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
54 total_fee: 100
55 },
56 partner_uid: "0",
57 pay_cate: "2020",
58 pay_id: "3",
59 pay_time: "2020-04-17 21:16:12",
60 pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 pay_wood_id: "fcdj-1-1_1587129366",
62 prepay_id: "wx172116124528226bf1a8adad1662456500",
63 re_check_staus: "0",
64 shopid: "0",
65 split_userid: "0",
66 status: "1",
67 total_fee: "100",
68 uid: "1",
69 }
70 ],
71 msg: "订单列表",
72 status: 0,
73 }
74
1 const state = { 75 const state = {
2 orderList: [], 76 orderList: [],
3 }; 77 };
4 78
5 const mutations = { 79 const mutations = {
6 getOrder: (state, data) => { 80 INIT: (state, data) => {
7 state.orderList = data; 81 state.orderList = data;
8 }, 82 },
9 }; 83 };
10 84
11 const actions = { 85 const actions = {
12 fetch({ commit }, param) { 86 getList({ commit }, param) {
13 uni 87 request({
14 .request({ 88 url: orderList,
15 url: "", 89 data: param,
16 method: "post", 90 success: (res) => {
17 data: {}, 91 const resData = {
18 header: { 92 ...res,
19 "Content-Type": "application/x-www-form-urlencoded", 93 data,
20 }, 94 }
21 timeout: 3000, 95 console.log('data.data', resData.data.data);
22 withCredentials: false, 96 commit("INIT", resData.data.data);
23 success: (res) => { 97 },
24 commit('getOrder', res.data.data) 98 })
25 }, 99 }
26 fail: (res) => {
27 console.log("fail status === > ", res);
28 },
29 complete: (res) => {
30 console.log("complete status === > ", res);
31 }
32 })
33 }
src/store/request.js
Diff comments   View file @a8284c6
1 const DOMAIN = 'https://api.glass.xiuyetang.com/'; 1 const DOMAIN = 'https://api.glass.xiuyetang.com';
2 2
3 export default async function request({ 3 export default async function request({
4 url, 4 url,
5 method = "post",
6 data = {},
7 header = {
8 "Content-Type": "application/x-www-form-urlencoded",
9 },
10 timeout = 3000,
11 withCredentials = false, // 跨域请求时是否携带凭证（cookies）
12 // sslVerify: true, // 验证 ssl 证书
5 success, 13 success,
6 fail, 14 fail = (res) => {
7 complete, 15 console.log("fail status === > ", res);
16 },
17 complete = (res) => {
18 console.log("complete status === > ", res);
19 },
8 }) { 20 }) {
9 console.log("DOMAIN", DOMAIN, url); 21 console.log("DOMAIN", DOMAIN, url);
10 uni 22 uni
11 .request({ 23 .request({
12 url: DOMAIN + url, 24 url: DOMAIN + url,
13 method: "post", 25 method,
14 data: {}, 26 data,
15 header: { 27 header,
16 "Content-Type": "application/x-www-form-urlencoded", 28 timeout,
17 }, 29 withCredentials,
18 timeout: 3000,
19 withCredentials: false,
20 success, 30 success,
21 fail, 31 fail,
22 complete, 32 complete,
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取首页商品列表
3 shopList: 'app/prod/list', 3 shopList: 'app/prod/list',
4
5 // 获取首页商品列表
6 category: 'app/prod/category',
7 }
8
4 9 export default urlAlias;
5 // 获取首页商品列表 10