吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 5 changed files   Show diff stats
src/pages/index/index.vue
Diff comments   View file @2c71ddb
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 6 <icon
7 class="searchIcon" 7 class="searchIcon"
8 type="search" 8 type="search"
9 size="14" 9 size="14"
10 ></icon> 10 ></icon>
11 <input 11 <input
12 v-model="searchText" 12 v-model="searchText"
13 class="searchIpt" 13 class="searchIpt"
14 placeholder="老花镜" 14 placeholder="老花镜"
15 confirm-type="search" 15 confirm-type="search"
16 @blur="searchKey" 16 @blur="searchKey"
17 /> 17 />
18 </view> 18 </view>
19 19
20 <!-- 筛选栏--> 20 <!-- 筛选栏-->
21 <!-- <view class="screenBar"> 21 <!-- <view class="screenBar">
22 <view 22 <view
23 v-for="item in screenItems" 23 v-for="item in screenItems"
24 :key="item.current" 24 :key="item.current"
25 @click="onClickItem(item.current)" 25 @click="onClickItem(item.current)"
26 > 26 >
27 <view 27 <view
28 class="screenItem" 28 class="screenItem"
29 v-bind:class="{ active: current === item.current }" 29 v-bind:class="{ active: current === item.current }"
30 v-if="item.current === 2" 30 v-if="item.current === 2"
31 @click="dropDown" 31 @click="dropDown"
32 > 32 >
33 {{ item.text }} 33 {{ item.text }}
34 <icon 34 <icon
35 type="info" 35 type="info"
36 size="14" 36 size="14"
37 ></icon> 37 ></icon>
38 </view> 38 </view>
39 <view 39 <view
40 class="screenItem" 40 class="screenItem"
41 v-bind:class="{ active: current === item.current }" 41 v-bind:class="{ active: current === item.current }"
42 v-if="item.current === 4" 42 v-if="item.current === 4"
43 @click="showDrawer('showRight')" 43 @click="showDrawer('showRight')"
44 > 44 >
45 {{ item.text }} 45 {{ item.text }}
46 <icon 46 <icon
47 type="info" 47 type="info"
48 size="14" 48 size="14"
49 ></icon> 49 ></icon>
50 </view> 50 </view>
51 <view v-if="item.current !== 2&&item.current!==4"> 51 <view v-if="item.current !== 2&&item.current!==4">
52 <view 52 <view
53 class="screenItem" 53 class="screenItem"
54 v-bind:class="{ active: current === item.current }" 54 v-bind:class="{ active: current === item.current }"
55 >{{ item.text }}</view> 55 >{{ item.text }}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> --> 58 </view> -->
59 </view> 59 </view>
60 <Uni-drawer 60 <Uni-drawer
61 ref="showRight" 61 ref="showRight"
62 mask="true" 62 mask="true"
63 maskClick="true" 63 maskClick="true"
64 mode="right" 64 mode="right"
65 :width="320" 65 :width="320"
66 @change="change($event,'showRight')" 66 @change="change($event,'showRight')"
67 > 67 >
68 <view class="close"> 68 <view class="close">
69 <view @click="closeDrawer('showRight')"> 69 <view @click="closeDrawer('showRight')">
70 <text class="word-btn-white">关闭</text> 70 <text class="word-btn-white">关闭</text>
71 </view> 71 </view>
72 </view> 72 </view>
73 </Uni-drawer> 73 </Uni-drawer>
74 74
75 <!-- 筛选菜单--> 75 <!-- 筛选菜单-->
76 <view class="content-wrap"> 76 <view class="content-wrap">
77 <view> 77 <view>
78 <HMfilterDropdown 78 <HMfilterDropdown
79 :filterData="categoryList" 79 :filterData="categoryList"
80 :defaultSelected="filterDropdownValue" 80 :defaultSelected="filterDropdownValue"
81 :updateMenuName="true" 81 :updateMenuName="true"
82 @search="search" 82 @search="search"
83 @getList="getList" 83 @getList="getList"
84 data-format="Object" 84 data-format="Object"
85 ></HMfilterDropdown> 85 ></HMfilterDropdown>
86 <!-- 商品列表 --> 86 <!-- 商品列表 -->
87 <!-- <scroll-view 87 <!-- <scroll-view
88 enable-flex 88 enable-flex
89 @scrolltolower="handleScrolltolower" 89 @scrolltolower="handleScrolltolower"
90 scroll-y 90 scroll-y
91 style="height: 1000px;margin-bottom: 20px;" 91 style="height: 1000px;margin-bottom: 20px;"
92 > --> 92 > -->
93 <view class="goods-list"> 93 <view class="goods-list">
94 <view class="product-list"> 94 <view class="product-list">
95 <view 95 <view
96 class="product" 96 class="product"
97 v-for="(goods) in goodsList" 97 v-for="(goods) in goodsList"
98 :key="goods.id" 98 :key="goods.id"
99 > 99 >
100 <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> 100 <Card
101 :goods="goods"
102 :scrollTop="scrollTop"
103 :viewHeight="viewHeight"
104 ></Card>
101 </view> 105 </view>
102 </view> 106 </view>
103 <view class="loading-text">{{loadingText}}</view> 107 <view class="loading-text">{{loadingText}}</view>
104 </view> 108 </view>
105 <!-- </scroll-view> --> 109 <!-- </scroll-view> -->
106 </view> 110 </view>
107 </view> 111 </view>
108 </view> 112 </view>
109 </template> 113 </template>
110 114
111 <script> 115 <script>
112 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 116 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
113 import Card from '@/components/CommodityCard/CommodityCard.vue' 117 import Card from "@/components/CommodityCard/CommodityCard.vue";
114 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 118 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
115 import store from '@/store' 119 import store from "@/store";
116 120
117 export default { 121 export default {
118 components: { 122 components: {
119 UniDrawer: UniDrawer, 123 UniDrawer: UniDrawer,
120 HMfilterDropdown: HMfilterDropdown, 124 HMfilterDropdown: HMfilterDropdown,
121 Card: Card, 125 Card: Card
122 }, 126 },
123 data () { 127 data() {
124 return { 128 return {
125 indexArr: '', 129 indexArr: "",
126 valueArr: '', 130 valueArr: "",
127 loadingText: '~~到底了~~', 131 isLoading: true, //初始化加载状态
132 loadingText: "~~一开始应该是加载中。。。。等数据传完后，更新为到底了~~",
128 filterDropdownValue: [], 133 filterDropdownValue: [],
129 filterData: [], 134 filterData: [],
130 searchText: '', 135 searchText: "",
131 scrollTop: 0, 136 scrollTop: 0,
132 viewHeight: uni.getSystemInfoSync().windowHeight, 137 viewHeight: uni.getSystemInfoSync().windowHeight
133 } 138 };
134 }, 139 },
135 onPageScroll({scrollTop}) { 140 onPageScroll({ scrollTop }) {
136 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 141 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
137 142
138 this.scrollTop = scrollTop; 143 this.scrollTop = scrollTop;
139 console.log('pagescroll====>',this.viewHeight) 144 console.log("pagescroll====>", this.viewHeight);
140 }, 145 },
141 computed: { 146 computed: {
142 goodsList () { 147 goodsList() {
143 // 也可以从 getters 获取 148 // 也可以从 getters 获取
144 // console.log('index-list=====>',this.$store.state.index.list) 149 // console.log('index-list=====>',this.$store.state.index.list)
145 return this.$store.state.index.list 150 return this.$store.state.index.list;
146 },
147 categoryList () {
148 return this.$store.state.index.categoryList
149 }, 151 },
152 categoryList() {
153 return this.$store.state.index.categoryList;
154 }
150 }, 155 },
151 filters: { 156 filters: {
152 outData (value) { 157 outData(value) {
153 return JSON.stringify(value) 158 return JSON.stringify(value);
154 }, 159 }
155 }, 160 },
156 onLoad () { 161 onLoad() {
157 store.dispatch('index/category') 162 store.dispatch("index/category");
158 // this.getList(); 163 // this.getList();
159 store.dispatch('index/list') 164 store.dispatch("index/list");
160 }, 165 },
161 methods: { 166 methods: {
162 showDrawer (e) { 167 showDrawer(e) {
163 this.$refs[e].open() 168 this.$refs[e].open();
164 }, 169 },
165 getList () { 170 getList() {
166 store.dispatch('index/list') 171 store.dispatch("index/list");
167 }, 172 },
168 // search(params) { 173 // search(params) {
169 // this.$store.index. 174 // this.$store.index.
170 // }, 175 // },
171 closeDrawer (e) { 176 closeDrawer(e) {
172 this.$refs[e].close() 177 this.$refs[e].close();
173 }, 178 },
174 change (e, type) { 179 change(e, type) {
175 this[type] = e 180 this[type] = e;
176 }, 181 },
177 onClickItem (e) { 182 onClickItem(e) {
178 if (this.current !== e) { 183 if (this.current !== e) {
179 this.current = e 184 this.current = e;
180 } 185 }
181 }, 186 },
182 dropDown () { 187 dropDown() {
183 console.log('下拉') 188 console.log("下拉");
184 }, 189 },
185 searchKey (e) { 190 searchKey(e) {
186 const { value: keyword } = e.detail 191 const { value: keyword } = e.detail;
187 this.keyWords = keyword 192 this.keyWords = keyword;
188 store.dispatch('index/search', { 193 store.dispatch("index/search", {
189 params: {}, 194 params: {},
190 keyword, 195 keyword
191 }) 196 });
192 }, 197 },
193 // 接收菜单结果 198 // 接收菜单结果
194 search (e) { 199 search(e) {
195 const { on, value, selectedData } = e 200 const { on, value, selectedData } = e;
196 let params = {} 201 let params = {};
197 const selectedPayload = {} 202 const selectedPayload = {};
198 for (const key in selectedData) { 203 for (const key in selectedData) {
199 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 204 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
200 selectedPayload[key] = selectedData[key].toString() 205 selectedPayload[key] = selectedData[key].toString();
201 } 206 }
202 } 207 }
203 if (on[0] === 1) { 208 if (on[0] === 1) {
204 // 若点击全部 209 // 若点击全部
205 this.searchText = '' 210 this.searchText = "";
206 store.dispatch('index/list') 211 store.dispatch("index/list");
207 } else { 212 } else {
208 for (let i = 1; i <= on.length; i++) { // on[0]是全部 213 for (let i = 1; i <= on.length; i++) {
209 if (on[i] === 1) { // 若该选项被选中 214 // on[0]是全部
210 if (this.categoryList[i].value === 'filter') { 215 if (on[i] === 1) {
216 // 若该选项被选中
217 if (this.categoryList[i].value === "filter") {
211 params = { 218 params = {
212 ...selectedPayload, 219 ...selectedPayload,
213 ...params, 220 ...params
214 } 221 };
215 } else { 222 } else {
216 params[`${this.categoryList[i].value}`] = value[i][0] 223 params[`${this.categoryList[i].value}`] = value[i][0];
217 } 224 }
218 } 225 }
219 } 226 }
220 store.dispatch('index/search', { 227 store.dispatch("index/search", {
221 params, 228 params,
222 keyword: this.keyWords, 229 keyword: this.keyWords
223 }) 230 });
224 } 231 }
225 } 232 }
226 } 233 }
227 234 };
228 }
229 </script> 235 </script>
230 236
231 <style lang="scss"> 237 <style lang="scss">
232 .content { 238 .content {
233 display: flex; 239 display: flex;
234 flex-direction: column; 240 flex-direction: column;
235 align-items: center; 241 align-items: center;
236 justify-content: center; 242 justify-content: center;
237 background-color: #f7f6f6; 243 background-color: #f7f6f6;
238 } 244 }
239 .header { 245 .header {
240 display: flex; 246 display: flex;
241 flex-direction: column; 247 flex-direction: column;
242 align-items: center; 248 align-items: center;
243 justify-content: center; 249 justify-content: center;
244 background-color: #f7f6f6; 250 background-color: #f7f6f6;
245 height: 178rpx; 251 height: 178rpx;
246 width: 100%; 252 width: 100%;
247 z-index: 999; 253 z-index: 999;
248 position: fixed; 254 position: fixed;
249 top: 0; 255 top: 0;
250 left: 0; 256 left: 0;
251 } 257 }
252 .searchBar { 258 .searchBar {
253 width: 670rpx; 259 width: 670rpx;
254 display: flex; 260 display: flex;
255 justify-content: center; 261 justify-content: center;
256 align-items: center; 262 align-items: center;
257 box-sizing: border-box; 263 box-sizing: border-box;
258 padding: 0rpx 16rpx; 264 padding: 0rpx 16rpx;
259 border: 1px solid #ff6b4a; 265 border: 1px solid #ff6b4a;
260 border-radius: 8rpx; 266 border-radius: 8rpx;
261 background-color: #ffffff; 267 background-color: #ffffff;
262 } 268 }
263 269
264 .searchIpt { 270 .searchIpt {
265 height: 68rpx; 271 height: 68rpx;
266 width: 670rpx; 272 width: 670rpx;
267 padding: 16rpx; 273 padding: 16rpx;
268 font-size: 28rpx; 274 font-size: 28rpx;
269 box-sizing: border-box; 275 box-sizing: border-box;
270 } 276 }
271 .screenBar { 277 .screenBar {
272 width: 670rpx; 278 width: 670rpx;
273 height: 110rpx; 279 height: 110rpx;
274 display: flex; 280 display: flex;
275 flex-direction: row; 281 flex-direction: row;
276 justify-content: space-between; 282 justify-content: space-between;
277 align-items: center; 283 align-items: center;
278 color: #333333; 284 color: #333333;
279 font-size: 32rpx; 285 font-size: 32rpx;
280 } 286 }
281 .active { 287 .active {
282 color: #ff6b4a; 288 color: #ff6b4a;
283 } 289 }
284 .screenItem { 290 .screenItem {
285 display: flex; 291 display: flex;
286 justify-content: center; 292 justify-content: center;
287 align-items: center; 293 align-items: center;
288 } 294 }
289 .content-wrap { 295 .content-wrap {
290 width: 100%; 296 width: 100%;
291 background-color: #ffffff; 297 background-color: #ffffff;
292 } 298 }
293 299
294 .HMfilterDropdown { 300 .HMfilterDropdown {
295 top: 178rpx !important; 301 top: 178rpx !important;
296 } 302 }
297 303
298 .goods-list { 304 .goods-list {
299 padding-top: 286rpx; 305 padding-top: 286rpx;
300 .loading-text { 306 .loading-text {
301 width: 100%; 307 width: 100%;
302 display: flex; 308 display: flex;
303 justify-content: center; 309 justify-content: center;
304 align-items: center; 310 align-items: center;
305 height: 30px; 311 height: 30px;
306 color: #979797; 312 color: #979797;
307 font-size: 12px; 313 font-size: 12px;
308 } 314 }
309 .product-list { 315 .product-list {
310 width: 92%; 316 width: 92%;
311 padding: 0 4% 3vw 4%; 317 padding: 0 4% 3vw 4%;
312 display: flex; 318 display: flex;
313 justify-content: space-between; 319 justify-content: space-between;
314 flex-wrap: wrap; 320 flex-wrap: wrap;
315 .product { 321 .product {
316 width: 48%; 322 width: 48%;
317 margin: 0 0 20rpx 0; 323 margin: 0 0 20rpx 0;
318 background: #ffffff; 324 background: #ffffff;
319 border: 1px solid #f2f2f2; 325 border: 1px solid #f2f2f2;
320 } 326 }
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @2c71ddb
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> 3 <view
4 <view class="cardHeader"> 4 class="card"
5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 5 v-if="current == status"
6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 6 @click="toOrderInfo(status,order.pay_id)"
7 <text class="orderType" v-if="status=='0'">待付款</text> 7 >
8 <text class="orderType" v-if="status=='1'">待收货</text> 8 <view class="cardHeader">
9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 9 <text
10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 10 class="orderId"
11 </view> 11 v-if="status == '0'||status == '1'"
12 <view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index"> 12 >订单号：{{order.pay_id}}</text>
13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 13 <text
14 <view class="infoText"> 14 class="orderId"
15 <view class="orderName">{{orderInfo[0].p_name}}</view> 15 v-if="status == '2'||status == '3'"
16 <view class="orderDescrib">{{orderInfo.p_name}}</view> 16 >下单时间：{{order.pay_time}}</text>
17 <view class="infoText-bottom"> 17 <text
18 <view class="markPrice">{{orderInfo.nowPrice}}</view> 18 class="orderType"
19 <view class="buy-num">X {{orderInfo.num}}</view> 19 v-if="status=='0'"
20 </view> 20 >待付款</text>
21 </view> 21 <text
22 </view> 22 class="orderType"
23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 23 v-if="status=='1'"
24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> 24 >待收货</text>
25 <view class="btns" v-if="status == '0'"> 25 <text
26 <view class="btn-type1" >取消订单</view> 26 class="orderType"
27 <view class="btn-type2">去支付</view> 27 v-if="status == '2'||status == '3'"
28 </view> 28 >已完成</text>
29 <view class="btns" v-if="status == '1'"> 29 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30 <view class="btn-type2">确认收货</view> 30 </view>
31 </view> 31 <view
32 <view class="btns" v-if="status == '2'"> 32 class="orderCardInfo"
33 <view class="btn-type2">再次购买</view> 33 v-for="(orderInfo, index) in order.order_info.list"
34 </view> 34 :key="index"
35 <!-- <view class="btns" v-if="status == '3'"> 35 >
36 <image
37 :src="orderInfo.imgUrl"
38 mode="aspectFill"
39 ></image>
40 <view class="infoText">
41 <view class="orderName">{{orderInfo.p_name}}</view>
42 <view class="orderDescrib">{{orderInfo.p_name}}</view>
43 <view class="infoText-bottom">
44 <view class="markPrice">{{orderInfo.nowPrice}}</view>
45 <view class="buy-num">X {{orderInfo.num}}</view>
46 </view>
47 </view>
48 </view>
49 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
50 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
51 <view
52 class="btns"
53 v-if="status == '0'"
54 >
55 <view class="btn-type1">取消订单</view>
56 <view class="btn-type2">去支付</view>
57 </view>
58 <view
59 class="btns"
60 v-if="status == '1'"
61 >
62 <view class="btn-type2">确认收货</view>
63 </view>
64 <view
65 class="btns"
66 v-if="status == '2'"
67 >
68 <view class="btn-type2">再次购买</view>
69 </view>
70 <!-- <view class="btns" v-if="status == '3'">
36 <view class="btn-type2">再次购买</view> 71 <view class="btn-type2">再次购买</view>
37 </view> --> 72 </view> -->
38 </view> 73 </view>
39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> 74 <view
40 <view class="cardHeader"> 75 class="card"
41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 76 v-if="current == '10'"
42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 77 @click="toOrderInfo(status,order.pay_id)"
43 <text class="orderType" v-if="status=='0'">待付款</text> 78 >
44 <text class="orderType" v-if="status=='1'">待收货</text> 79 <view class="cardHeader">
45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 80 <text
46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 81 class="orderId"
47 </view> 82 v-if="status == '0'||status == '1'"
48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> 83 >订单号：{{order.pay_id}}</text>
49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 84 <text
50 <view class="infoText"> 85 class="orderId"
51 <view class="orderName">{{orderInfo.p_name}}</view> 86 v-if="status == '2'||status == '3'"
52 <view class="orderDescrib">{{orderInfo.p_name}}</view> 87 >下单时间：{{order.pay_time}}</text>
53 <view class="infoText-bottom"> 88 <text
54 <view class="markPrice">{{orderInfo.nowPrice}}</view> 89 class="orderType"
55 <view class="buy-num">X {{orderInfo.num}}</view> 90 v-if="status=='0'"
56 </view> 91 >待付款</text>
57 </view> 92 <text
58 </view> 93 class="orderType"
59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 94 v-if="status=='1'"
60 <view class="btns" v-if="status == '0'"> 95 >待收货</text>
61 <view class="btn-type1" >取消订单</view> 96 <text
62 <view class="btn-type2">去支付</view> 97 class="orderType"
63 </view> 98 v-if="status == '2'||status == '3'"
64 <view class="btns" v-if="status == '1'"> 99 >已完成</text>
65 <view class="btn-type2">确认收货</view> 100 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
66 </view> 101 </view>
67 <view class="btns" v-if="status == '2'"> 102 <view
68 <view class="btn-type2">再次购买</view> 103 class="orderCardInfo"
69 </view> 104 v-if
70 <!-- <view class="btns" v-if="status == '3'"> 105 v-for="(orderInfo) in order.order_info.list"
106 :key="orderInfo"
107 >
108 <image
109 :src="orderInfo.imgUrl"
110 mode="aspectFit"
111 ></image>
112 <view class="infoText">
113 <view class="orderName">{{orderInfo.p_name}}</view>
114 <view class="orderDescrib">{{orderInfo.p_name}}</view>
115 <view class="infoText-bottom">
116 <view class="markPrice">{{orderInfo.nowPrice}}</view>
117 <view class="buy-num">X {{orderInfo.num}}</view>
118 </view>
119 </view>
120 </view>
121 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
122 <view
123 class="btns"
124 v-if="status == '0'"
125 >
126 <view class="btn-type1">取消订单</view>
127 <view class="btn-type2">去支付</view>
128 </view>
129 <view
130 class="btns"
131 v-if="status == '1'"
132 >
133 <view class="btn-type2">确认收货</view>
134 </view>
135 <view
136 class="btns"
137 v-if="status == '2'"
138 >
139 <view class="btn-type2">再次购买</view>
140 </view>
141 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view> 142 <view class="btn-type2">再次购买</view>
72 </view> --> 143 </view> -->
73 </view> 144 </view>
74 </view> 145 </view>
75 </template> 146 </template>
76 147
77 <script> 148 <script>
78 export default { 149 export default {
79 props: { 150 props: {
80 /** 151 /**
81 * 订单数据 152 * 订单数据
82 */ 153 */
83 order: { 154 order: {
84 // orderId: Number, 155 // orderId: Number,
85 // img: String, 156 // img: String,
86 // name: String, 157 // name: String,
87 // originCost:String, 158 // originCost:String,
88 // price: String, 159 // price: String,
89 // orderType:Number, 160 // orderType:Number,
90 // buyNum:Number, 161 // buyNum:Number,
91 finished_time: null, 162 finished_time: null,
92 is_refound: String, 163 is_refound: String,
93 mch_id: String, 164 mch_id: String,
94 money_of_dcw: String, 165 money_of_dcw: String,
95 money_of_partner: String, 166 money_of_partner: String,
96 money_of_shop: String, 167 money_of_shop: String,
97 orderJudge: Boolean, 168 orderJudge: Boolean,
98 order_info: { 169 order_info: {
99 address:{ 170 address: {
100 cityName: String, 171 cityName: String,
101 countyName: String, 172 countyName: String,
102 detailInfo: String, 173 detailInfo: String,
103 errMsg: String, 174 errMsg: String,
104 nationalCode: String, 175 nationalCode: String,
105 postalCode: String, 176 postalCode: String,
106 provinceName: String, 177 provinceName: String,
107 telNumber: String, 178 telNumber: String,
108 userName: String, 179 userName: String
109 }, 180 },
110 cartinfo: ["127"], 181 cartinfo: ["127"],
111 keyname: "330_1588911391", 182 keyname: "330_1588911391",
112 lefttime: Number, 183 lefttime: Number,
113 list:[ 184 list: [
114 { 185 {
115 cart_id: "127", 186 cart_id: "127",
116 imgUrl: String, 187 imgUrl: String,
117 img_index_url: null, 188 img_index_url: null,
118 memo: String, 189 memo: String,
119 mp_id: String, 190 mp_id: String,
120 nowPrice: String, 191 nowPrice: String,
121 num: String, 192 num: String,
122 oldPrice: Number, 193 oldPrice: Number,
123 p_discount: String, 194 p_discount: String,
124 p_name: String, 195 p_name: String,
125 p_root_index: String, 196 p_root_index: String,
126 p_sale_price: String, 197 p_sale_price: String,
127 peopleName: String, 198 peopleName: String,
128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], 199 pics: [
129 pid: String, 200 "79_0_D122D2.jpg",
130 sk_id: String, 201 "79_1_E0A1ED.jpg",
131 } 202 "79_2_B00B3D.jpg",
132 ], 203 "79_3_B2CF21.jpg",
133 orderDesc: String, 204 "79_4_33AD1B.jpg"
134 total_fee: Number, 205 ],
135 }, 206 pid: String,
136 partner_uid: String, 207 sk_id: String
137 pay_cate: String, 208 }
138 pay_id: String, 209 ],
139 pay_time: String, 210 orderDesc: String,
140 pay_wood_desc: String, 211 total_fee: Number
141 pay_wood_id: String, 212 },
142 prepay_id: String, 213 partner_uid: String,
143 re_check_staus: String, 214 pay_cate: String,
144 shopid: String, 215 pay_id: String,
145 split_userid: String, 216 pay_time: String,
146 status: String, 217 pay_wood_desc: String,
147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 218 pay_wood_id: String,
148 total_fee: String, 219 prepay_id: String,
149 uid: String, 220 re_check_staus: String,
150 }, 221 shopid: String,
151 /** 222 split_userid: String,
152 * 当前选择 223 status: String,
153 */ 224 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
154 current:Number 225 total_fee: String,
155 226 uid: String
156 }, 227 },
157 created() { 228 /**
158 console.log(this.order); 229 * 当前选择
159 // console.log(this.order.status ); 230 */
160 // console.log(this.current); 231 current: Number
161 }, 232 },
162 computed:{ 233 created() {
163 status(){ 234 console.log("this.order", this.order);
164 return this.order.status 235 // console.log(this.order.status );
165 }, 236 // console.log(this.current);
166 orderInfoList(){ 237 },
167 console.log('this.order.order_info[0]', this.order) 238 computed: {
168 return this.order.order_info[0] 239 status() {
169 } 240 return this.order.status;
170 }, 241 },
171 data() { 242 orderInfoList() {
172 return { 243 console.log("this.order.order_info[0]", this.order);
173 }; 244 return this.order.order_info;
174 }, 245 }
175 methods:{ 246 },
176 toRefundment(){ 247 data() {
177 uni.navigateTo({ 248 return {};
178 url: '../refundment/refundment', 249 },
179 success: res => {}, 250 methods: {
180 fail: () => {}, 251 toRefundment() {
181 complete: () => {} 252 uni.navigateTo({
182 }); 253 url: "../refundment/refundment",
183 }, 254 success: res => {},
184 toOrderInfo(status,payId){ 255 fail: () => {},
185 console.log(status,payId) 256 complete: () => {}
186 switch(status){ 257 });
187 // 0待付款 1待收货 2已收货 3 已评价 258 },
188 case '0': 259 toOrderInfo(status, payId) {
189 uni.navigateTo({ 260 console.log(status, payId);
190 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 261 switch (status) {
191 fail(errMsg) { 262 // 0待付款 1待收货 2已收货 3 已评价
192 console.log(errMsg) 263 case "0":
193 } 264 uni.navigateTo({
194 }) 265 url:
195 break; 266 `../myOrderPaying/myOrderPaying?status=` +
196 case '1': 267 status +
197 uni.navigateTo({ 268 `&payId=` +
198 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 269 payId,
199 fail(errMsg) { 270 fail(errMsg) {
200 console.log(errMsg) 271 console.log(errMsg);
201 } 272 }
202 }) 273 });
203 274 break;
204 break; 275 case "1":
205 case '2 || 3': 276 uni.navigateTo({
206 uni.navigateTo({ 277 url:
207 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 278 `../myOrderPaying/myOrderPaying?status=` +
208 fail(errMsg) { 279 status +
209 console.log(errMsg) 280 `&payId=` +
210 } 281 payId,
211 }) 282 fail(errMsg) {
212 break; 283 console.log(errMsg);
213 default: 284 }
214 break; 285 });
215 286
216 } 287 break;
217 } 288 case "2 || 3":
218 } 289 uni.navigateTo({
219 } 290 url:
291 `../myOrderPaying/myOrderPaying?status=` +
292 status +
293 `&payId=` +
294 payId,
295 fail(errMsg) {
296 console.log(errMsg);
297 }
298 });
299 break;
300 default:
301 break;
302 }
303 }
304 }
305 };
220 </script> 306 </script>
221 307
222 <style lang="scss"> 308 <style lang="scss">
223 .card{ 309 .card {
224 width: 670rpx; 310 width: 670rpx;
225 height: 478rpx; 311 height: 478rpx;
226 background: #FFFFFF; 312 background: #ffffff;
227 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 313 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
228 border-radius: 8px; 314 border-radius: 8px;
229 border-radius: 8px; 315 border-radius: 8px;
230 margin-top: 20rpx; 316 margin-top: 20rpx;
231 padding: 40rpx; 317 padding: 40rpx;
232 box-sizing: border-box; 318 box-sizing: border-box;
233 .cardHeader{ 319 .cardHeader {
234 width: 100%; 320 width: 100%;
235 height: 40rpx; 321 height: 40rpx;
236 display: flex; 322 display: flex;
237 justify-content: space-between; 323 justify-content: space-between;
238 align-items: center; 324 align-items: center;
239 .orderId{ 325 .orderId {
240 font-size: 12px; 326 font-size: 12px;
241 color: #999999; 327 color: #999999;
242 } 328 }
243 .orderType{ 329 .orderType {
244 font-size: 14px; 330 font-size: 14px;
245 color: #FF6B4A; 331 color: #ff6b4a;
246 } 332 }
247 } 333 }
248 .orderCardInfo{ 334 .orderCardInfo {
249 width: 100%; 335 width: 100%;
250 height: 188rpx; 336 height: 188rpx;
251 display: flex; 337 display: flex;
252 flex-direction: row; 338 flex-direction: row;
253 justify-content: space-between; 339 justify-content: space-between;
254 align-items: center; 340 align-items: center;
255 margin-top: 40rpx; 341 margin-top: 40rpx;
256 image{ 342 image {
257 height: 188rpx; 343 height: 188rpx;
258 width: 188rpx; 344 width: 188rpx;
259 margin-right: 24rpx; 345 margin-right: 24rpx;
260 } 346 }
261 .infoText{ 347 .infoText {
262 display: flex; 348 display: flex;
263 flex-direction: column; 349 flex-direction: column;
264 justify-content: space-between; 350 justify-content: space-between;
265 align-items: flex-start; 351 align-items: flex-start;
266 height: 188rpx; 352 height: 188rpx;
267 width: 368rpx; 353 width: 368rpx;
268 } 354 }
269 .orderName{ 355 .orderName {
270 font-size: 14px; 356 font-size: 14px;
271 color: #333333; 357 color: #333333;
272 display: -webkit-box; 358 display: -webkit-box;
273 overflow: hidden; 359 overflow: hidden;
274 -webkit-box-orient: vertical; 360 -webkit-box-orient: vertical;
275 -webkit-line-clamp: 2; 361 -webkit-line-clamp: 2;
276 } 362 }
277 .orderDescrib{ 363 .orderDescrib {
278 font-size: 12px; 364 font-size: 12px;
279 color: #999999; 365 color: #999999;
280 display: -webkit-box; 366 display: -webkit-box;
281 overflow: hidden; 367 overflow: hidden;
282 -webkit-box-orient: vertical; 368 -webkit-box-orient: vertical;
283 -webkit-line-clamp: 2; 369 -webkit-line-clamp: 2;
284 } 370 }
285 .infoText-bottom{ 371 .infoText-bottom {
286 display: flex; 372 display: flex;
287 flex-direction: row; 373 flex-direction: row;
288 justify-content: flex-start; 374 justify-content: flex-start;
289 align-items: center; 375 align-items: center;
290 width: 100%; 376 width: 100%;
291 .markPrice{ 377 .markPrice {
292 font-size: 14px; 378 font-size: 14px;
293 color: #FF6B4A; 379 color: #ff6b4a;
294 margin-right: 20rpx; 380 margin-right: 20rpx;
295 } 381 }
296 .buy-num{ 382 .buy-num {
297 font-size: 12px; 383 font-size: 12px;
298 color: #999999; 384 color: #999999;
299 } 385 }
300 } 386 }
301 } 387 }
302 .payPrice{ 388 .payPrice {
303 text-align: right; 389 text-align: right;
304 margin: 20rpx 0; 390 margin: 20rpx 0;
305 font-size: 14px; 391 font-size: 14px;
306 color: #333333; 392 color: #333333;
307 .priceNum{ 393 .priceNum {
308 font-size: 14px; 394 font-size: 14px;
309 color: #FF6B4A; 395 color: #ff6b4a;
310 } 396 }
311 } 397 }
312 .btns{ 398 .btns {
313 display: flex; 399 display: flex;
314 justify-content: flex-end; 400 justify-content: flex-end;
315 align-items: center; 401 align-items: center;
316 .btn-type1{ 402 .btn-type1 {
317 height: 48rpx; 403 height: 48rpx;
318 width: 156rpx; 404 width: 156rpx;
319 border: 1px solid #FF6B4A; 405 border: 1px solid #ff6b4a;
320 border-radius: 12px; 406 border-radius: 12px;
321 border-radius: 12px; 407 border-radius: 12px;
322 text-align: center; 408 text-align: center;
323 line-height: 48rpx; 409 line-height: 48rpx;
324 font-size: 12px; 410 font-size: 12px;
325 color: #FF6B4A; 411 color: #ff6b4a;
326 } 412 }
327 .btn-type2{ 413 .btn-type2 {
328 height: 48rpx; 414 height: 48rpx;
329 width: 140rpx; 415 width: 140rpx;
330 background: #FF6B4A; 416 background: #ff6b4a;
331 border-radius: 12px; 417 border-radius: 12px;
332 border-radius: 12px; 418 border-radius: 12px;
333 text-align: center; 419 text-align: center;
334 line-height: 48rpx; 420 line-height: 48rpx;
335 font-size: 12px; 421 font-size: 12px;
336 color: #FFFFFF; 422 color: #ffffff;
337 margin-left: 20rpx; 423 margin-left: 20rpx;
338 } 424 }
339 } 425 }
340 } 426 }
341 </style> 427 </style>
342 428
src/pages/myOrder/myOrder.vue
Diff comments   View file @2c71ddb
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 10 <view
11 v-for="item in screenItems" 11 v-for="item in screenItems"
12 :key="item.current" 12 :key="item.current"
13 @click="onClickItem(item.current)" 13 @click="onClickItem(item.current)"
14 > 14 >
15 <view 15 <view
16 class="screenItem" 16 class="screenItem"
17 v-bind:class="{ active: current === item.current }" 17 v-bind:class="{ active: current === item.current }"
18 >{{ item.text }}</view> 18 >{{ item.text }}</view>
19 </view> 19 </view>
20 </view> 20 </view>
21 </view> 21 </view>
22 <view class="orderList"> 22 <view class="orderList">
23 <view 23 <view
24 v-for="(order) in orderList" 24 v-for="(order) in orderList"
25 :key="order.orderId" 25 :key="order.pay_id"
26 > 26 >
27 <OrderCard 27 <OrderCard
28 :order="order" 28 :order="order"
29 :current="current" 29 :current="current"
30 ></OrderCard> 30 ></OrderCard>
31 </view> 31 </view>
32 </view> 32 </view>
33 <view class="footer">没有更多订单了，去商城看看吧~</view> 33 <view class="footer">没有更多订单了，去商城看看吧~</view>
34 </view> 34 </view>
35 </template> 35 </template>
36 <script> 36 <script>
37 import OrderCard from './components/OrderCard.vue' 37 import OrderCard from "./components/OrderCard.vue";
38 import store from '@/store' 38 import store from "@/store";
39 39
40 export default { 40 export default {
41 components: { 41 components: {
42 OrderCard: OrderCard, 42 OrderCard: OrderCard
43 }, 43 },
44 data() { 44 data() {
45 return { 45 return {
46 // 顶部筛选项 46 // 顶部筛选项
47 screenItems: [ 47 screenItems: [
48 { current: '10', text: '全部' }, 48 { current: "10", text: "全部" },
49 { current: '0', text: '待付款' }, 49 { current: "0", text: "待付款" },
50 { current: '1', text: '待收货' }, 50 { current: "1", text: "待收货" },
51 { current: '2', text: '已完成' }, 51 { current: "2", text: "待评价" }
52 // {current:"3",text:'已评价'}, 52 // {current:"3",text:'已评价'},
53 // {current:"4",text:'退款'}, 53 // {current:"4",text:'退款'},
54 ], 54 ],
55 // 当前所在item 默认10-->全部 55 // 当前所在item 默认10-->全部
56 current: '10', 56 current: "10"
57 } 57 };
58 }, 58 },
59 59
60 onLoad: function(option) { 60 onLoad: function(option) {
61 // 获取订单列表 61 // 获取订单列表
62 store.dispatch('myOrder/getList', { 62 store.dispatch("myOrder/getList", {
63 way: '', 63 way: ""
64 }) 64 });
65 // 从user过来传的status，给current，以显示对应item 65 // 从user过来传的status，给current，以显示对应item
66 this.current = option.status 66 this.current = option.status;
67 }, 67 },
68 computed: { 68 computed: {
69 orderList() { 69 orderList() {
70 // console.log('orderList', this.$store.state.myOrder.orderList); 70 // console.log('orderList', this.$store.state.myOrder.orderList);
71 return this.$store.state.myOrder.orderList 71 return this.$store.state.myOrder.orderList;
72 }, 72 }
73 }, 73 },
74 methods: { 74 methods: {
75 // tab点击事件 75 // tab点击事件
76 onClickItem(e) { 76 onClickItem(e) {
77 console.log("onClickItem", e);
77 if (this.current !== e) { 78 if (this.current !== e) {
78 this.current = e 79 this.current = e;
79 } 80 }
80 }, 81 }
81 82 }
82 }, 83 };
83 }
84 </script> 84 </script>
85 85
86 <style lang="scss"> 86 <style lang="scss">
87 .content { 87 .content {
88 display: flex; 88 display: flex;
89 flex-direction: column; 89 flex-direction: column;
90 align-items: center; 90 align-items: center;
91 background-color: #f7f6f6; 91 background-color: #f7f6f6;
92 min-height: 100vh; 92 min-height: 100vh;
93 .header { 93 .header {
94 background-color: #ffffff; 94 background-color: #ffffff;
95 width: 100%; 95 width: 100%;
96 // height: 232rpx; 96 // height: 232rpx;
97 padding: 20rpx 40rpx 16rpx 40rpx; 97 padding: 20rpx 40rpx 16rpx 40rpx;
98 box-sizing: border-box; 98 box-sizing: border-box;
99 position: fixed; 99 position: fixed;
100 top: 0; 100 top: 0;
101 left: 0; 101 left: 0;
102 // .searchBar { 102 // .searchBar {
103 // width: 670rpx; 103 // width: 670rpx;
104 // display: flex; 104 // display: flex;
105 // justify-content: center; 105 // justify-content: center;
106 // align-items: center; 106 // align-items: center;
107 // box-sizing: border-box; 107 // box-sizing: border-box;
108 // padding: 0rpx 16rpx; 108 // padding: 0rpx 16rpx;
109 // border: 1px solid #ff6b4a; 109 // border: 1px solid #ff6b4a;
110 // border-radius: 8rpx; 110 // border-radius: 8rpx;
111 // background-color: #ffffff; 111 // background-color: #ffffff;
112 // } 112 // }
113 113
114 .screenBar { 114 .screenBar {
115 width: 670rpx; 115 width: 670rpx;
116 // height: 110rpx; 116 // height: 110rpx;
117 height: 70rpx; 117 height: 70rpx;
118 display: flex; 118 display: flex;
119 flex-direction: row; 119 flex-direction: row;
120 justify-content: space-between; 120 justify-content: space-between;
121 align-items: center; 121 align-items: center;
122 color: #333333; 122 color: #333333;
123 font-size: 32rpx; 123 font-size: 32rpx;
124 } 124 }
125 .screenItem { 125 .screenItem {
126 height: 50rpx; 126 height: 50rpx;
127 font-size: 32rpx; 127 font-size: 32rpx;
128 color: #333333; 128 color: #333333;
129 display: flex; 129 display: flex;
130 justify-content: center; 130 justify-content: center;
131 align-items: center; 131 align-items: center;
132 transition: all 0.2s; 132 transition: all 0.2s;
133 } 133 }
134 .active { 134 .active {
135 // font-size: 34rpx; 135 // font-size: 34rpx;
136 color: #ec5d3b; 136 color: #ec5d3b;
137 } 137 }
138 .searchIpt { 138 .searchIpt {
139 height: 68rpx; 139 height: 68rpx;
140 width: 670rpx; 140 width: 670rpx;
141 padding: 16rpx; 141 padding: 16rpx;
142 font-size: 28rpx; 142 font-size: 28rpx;
143 box-sizing: border-box; 143 box-sizing: border-box;
144 } 144 }
145 } 145 }
146 .orderList { 146 .orderList {
147 // margin-top: 232rpx; 147 // margin-top: 232rpx;
148 margin-top: 132rpx; 148 margin-top: 132rpx;
149 } 149 }
150 .footer { 150 .footer {
151 font-size: 14px; 151 font-size: 14px;
152 color: #b8b8b8; 152 color: #b8b8b8;
153 margin: 40rpx 0; 153 margin: 40rpx 0;
154 } 154 }
155 } 155 }
156 </style> 156 </style>
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @2c71ddb
1 <!-- 订单待付款 待收货 --> 1 <!-- 订单待付款 待收货 -->
2 <template> 2 <template>
3 <view class="content"> 3 <view class="content">
4 <!-- 待付款 --> 4 <!-- 待付款 -->
5 <view 5 <view
6 class="order-time" 6 class="order-time"
7 v-if="status == '0'" 7 v-if="status == '0'"
8 > 8 >
9 <text>请在</text> 9 <text>请在</text>
10 <uni-countdown 10 <uni-countdown
11 color="#EC5D3B" 11 color="#EC5D3B"
12 splitor-color="#EC5D3B" 12 splitor-color="#EC5D3B"
13 :show-day="false" 13 :show-day="false"
14 :hour="0" 14 :hour="0"
15 :second="getTime" 15 :second="getTime"
16 @timeup=timeup 16 @timeup=timeup
17 ></uni-countdown> 17 ></uni-countdown>
18 <text>内完成付款</text> 18 <text>内完成付款</text>
19 </view> 19 </view>
20 <!-- 待收货 --> 20 <!-- 待收货 -->
21 <view 21 <view
22 class="headerBanner" 22 class="headerBanner"
23 v-if="status == '1'" 23 v-if="status == '1'"
24 > 24 >
25 <view class="bannerLeft"> 25 <view class="bannerLeft">
26 <view class="T1">卖家已发货</view> 26 <view class="T1">卖家已发货</view>
27 <view class="T2">还剩 确认收货</view> 27 <view class="T2">还剩 确认收货</view>
28 </view> 28 </view>
29 <image 29 <image
30 src="../../static/car.png" 30 src="../../static/car.png"
31 mode="aspectFill" 31 mode="aspectFill"
32 ></image> 32 ></image>
33 </view> 33 </view>
34 <view class="order"> 34 <view class="order">
35 <view class="order-user"> 35 <view class="order-user">
36 <view class="order-user-head"> 36 <view class="order-user-head">
37 <text class="p1">{{orderAddressInfo.userName}}</text> 37 <text class="p1">{{orderAddressInfo.userName}}</text>
38 <text class="p2">{{orderAddressInfo.telNumber}}</text> 38 <text class="p2">{{orderAddressInfo.telNumber}}</text>
39 </view> 39 </view>
40 <view class="order-user-body"> 40 <view class="order-user-body">
41 <image src="../../static/myorder-paying-location.png"></image> 41 <image src="../../static/myorder-paying-location.png"></image>
42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> 42 <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 <view class="order-info"> 45 <view class="order-info">
46 <view 46 <view
47 class="order-info-head" 47 class="order-info-head"
48 v-for="(orderInfoListItem,index) in orderInfoList" 48 v-for="(orderInfoListItem,index) in orderInfoList"
49 :key="index" 49 :key="index"
50 > 50 >
51 <image 51 <image
52 :src="orderInfoListItem.imgUrl" 52 :src="orderInfoListItem.imgUrl"
53 mode="aspectFill" 53 mode="aspectFill"
54 ></image> 54 ></image>
55 <view class="order-info-head-r"> 55 <view class="order-info-head-r">
56 <text class="p1">{{orderInfoListItem.p_name}}</text> 56 <text class="p1">{{orderInfoListItem.p_name}}</text>
57 <view 57 <view
58 class="p2" 58 class="p2"
59 style="margin: 0;" 59 style="margin: 0;"
60 > 60 >
61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 61 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62 <!-- <view class="arrow"></view> --> 62 <!-- <view class="arrow"></view> -->
63 </view> 63 </view>
64 <view class="infoText-bottom"> 64 <view class="infoText-bottom">
65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> 65 <view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66 <view class="buy-num">X {{orderInfoListItem.num}}</view> 66 <view class="buy-num">X {{orderInfoListItem.num}}</view>
67 </view> 67 </view>
68 </view> 68 </view>
69 </view> 69 </view>
70 <!-- <view class="order-info-goodsnum"> 70 <!-- <view class="order-info-goodsnum">
71 <text>X1</text> 71 <text>X1</text>
72 </view> --> 72 </view> -->
73 <text class="order-info-freight"> 73 <text class="order-info-freight">
74 <text class="p1">运费</text> 74 <text class="p1">运费</text>
75 <text class="p2">免运费</text> 75 <text class="p2">免运费</text>
76 </text> 76 </text>
77 <text class="order-info-discount"> 77 <text class="order-info-discount">
78 <text class="p1">优惠</text> 78 <text class="p1">优惠</text>
79 <text class="p2">-￥{{totalDiscount}}</text> 79 <text class="p2">-￥{{totalDiscount}}</text>
80 </text> 80 </text>
81 <text class="order-info-price"> 81 <text class="order-info-price">
82 <text class="p1">实付</text> 82 <text class="p1">实付</text>
83 <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text> 83 <text class="p2">￥{{orderInfo.total_fee}}</text>
84 </text> 84 </text>
85 <text class="order-info-num"> 85 <text class="order-info-num">
86 <text>订单号：{{payId}}</text> 86 <text>订单号：{{payId}}</text>
87 </text> 87 </text>
88 <text class="order-info-time"> 88 <text class="order-info-time">
89 <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text> 89 <text>下单时间：{{orderInfo.pay_time | timerChange}}</text>
90 </text> 90 </text>
91 <view class="order-info-hr"></view> 91 <view class="order-info-hr"></view>
92 <view class="order-info-contact"> 92 <view class="order-info-contact">
93 <image src="../../static/myorder-paying-contact.png"></image> 93 <image src="../../static/myorder-paying-contact.png"></image>
94 <text>联系客服</text> 94 <text>联系客服</text>
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
98 <view 98 <view
99 class="order-confim" 99 class="order-confim"
100 v-if="status == '0'" 100 v-if="status == '0'"
101 > 101 >
102 <button 102 <button
103 class="b1" 103 class="b1"
104 @click="cancleOrder" 104 @click="cancleOrder"
105 >取消订单</button> 105 >取消订单</button>
106 <button 106 <button
107 class="b2" 107 class="b2"
108 @click="paylog" 108 @click="paylog"
109 >立即支付</button> 109 >立即支付</button>
110 </view> 110 </view>
111 111
112 <view 112 <view
113 class="order-confim" 113 class="order-confim"
114 v-if="status == '1'" 114 v-if="status == '1'"
115 > 115 >
116 <!-- <button class="b1">取消订单</button> --> 116 <!-- <button class="b1">取消订单</button> -->
117 <button 117 <button
118 class="b2" 118 class="b2"
119 @click="confirmOrder" 119 @click="confirmOrder"
120 >确认收货</button> 120 >确认收货</button>
121 </view> 121 </view>
122 </view> 122 </view>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import store from '@/store' 126 import store from "@/store";
127 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 127 import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
128 export default { 128 export default {
129 components: { 129 components: {
130 UniCountdown, 130 UniCountdown
131 }, 131 },
132 data () { 132 data() {
133 return { 133 return {
134 payId: '', 134 payId: "",
135 payTime: '', 135 payTime: "",
136 status: '', // status 0 待付款 1 已发货 136 status: "", // status 0 待付款 1 已发货
137 uid: '', 137 uid: "",
138 openid: '', 138 openid: "",
139 lefttime: 0, 139 lefttime: 0,
140 isPay: 0, 140 isPay: 0
141 } 141 };
142 }, 142 },
143 onLoad: function (option) { 143 onLoad: function(option) {
144 console.log(option) 144 console.log(option);
145 this.payId = option.payId 145 this.payId = option.payId;
146 this.status = option.status 146 this.status = option.status;
147 this.isPay = option.isPay 147 this.isPay = option.isPay;
148 const openid = uni.getStorageSync('openid') 148 const openid = uni.getStorageSync("openid");
149 const uid = this.$store.state.user.uid 149 const uid = this.$store.state.user.uid;
150 this.uid = uid 150 this.uid = uid;
151 this.openid = openid 151 this.openid = openid;
152 store.dispatch('orderRead/getOrderInfo', { 152 store.dispatch("orderRead/getOrderInfo", {
153 pay_id: this.payId, 153 pay_id: this.payId,
154 uid: '1', 154 uid: "1",
155 openid: openid, 155 openid: openid
156 }) 156 });
157 // this.orderInfo = this.$store.state.orderRead.orderInfo 157 // this.orderInfo = this.$store.state.orderRead.orderInfo
158 }, 158 },
159 // 若从支付页面跳转过来，返回直接返回到首页 159 // 若从支付页面跳转过来，返回直接返回到首页
160 onBackPress(option) { 160 onBackPress(option) {
161 if (option.from === 'backbutton' && this.isPay) { 161 if (option.from === "backbutton" && this.isPay) {
162 uni.switchTab({ 162 uni.switchTab({
163 url: '/pages/index/index', 163 url: "/pages/index/index"
164 }) 164 });
165 return true // 阻止默认返回行为 165 return true; // 阻止默认返回行为
166 } 166 }
167 }, 167 },
168 computed: { 168 computed: {
169 // 获取订单详细信息 169 // 获取订单详细信息
170 orderInfo () { 170 orderInfo() {
171 console.log('orderInfo', this.$store.state.orderRead.orderInfo) 171 console.log("orderInfo", this.$store.state.orderRead.orderInfo);
172 return this.$store.state.orderRead.orderInfo || {} 172 return this.$store.state.orderRead.orderInfo || {};
173 }, 173 },
174 orderInfoList () { 174 orderInfoList() {
175 const orderInfoList = this.orderInfo.order_info[0].list 175 const orderInfoList = this.orderInfo.order_info.list;
176 return orderInfoList 176 return orderInfoList;
177 }, 177 },
178 // 获取订单地址信息 178 // 获取订单地址信息
179 orderAddressInfo () { 179 orderAddressInfo() {
180 return this.orderInfo.order_info[0].address 180 return this.orderInfo.order_info.address;
181 }, 181 },
182 // 订单付款时间 182 // 订单付款时间
183 getTime () { 183 getTime() {
184 return this.orderInfo.order_info[0].lefttime 184 return this.orderInfo.order_info.lefttime;
185 }, 185 },
186 // 计算总优惠额 186 // 计算总优惠额
187 totalDiscount () { 187 totalDiscount() {
188 const discountInfoList = this.orderInfo.discount_info 188 const discountInfoList = this.orderInfo.discount_info;
189 let totalDiscount = 0 189 let totalDiscount = 0;
190 if (discountInfoList) { 190 if (discountInfoList) {
191 discountInfoList.map((discountItem, index) => { 191 discountInfoList.map((discountItem, index) => {
192 totalDiscount += Number(discountItem.value) 192 totalDiscount += Number(discountItem.value);
193 }) 193 });
194 } 194 }
195 // console.log(totalDiscount) 195 // console.log(totalDiscount)
196 return totalDiscount 196 return totalDiscount;
197 }, 197 }
198 }, 198 },
199 methods: { 199 methods: {
200 // 取消订单 200 // 取消订单
201 timeup () { 201 timeup() {
202 this.cancleOrder() 202 this.cancleOrder();
203 }, 203 },
204 cancleOrder () { 204 cancleOrder() {
205 const uid = this.uid 205 const uid = this.uid;
206 const openid = this.openid 206 const openid = this.openid;
207 uni.showModal({ 207 uni.showModal({
208 title: '提示', 208 title: "提示",
209 content: '现在取消，订单不可恢复哦，确认取消吗？', 209 content: "现在取消，订单不可恢复哦，确认取消吗？",
210 success: function (res) { 210 success: function(res) {
211 if (res.confirm) { 211 if (res.confirm) {
212 store.dispatch('cancelOrder/cancel', { 212 store.dispatch("cancelOrder/cancel", {
213 keyname: '1', 213 keyname: "1",
214 uid: uid, 214 uid: uid,
215 openid: openid, 215 openid: openid
216 }) 216 });
217 } else if (res.cancel) { 217 } else if (res.cancel) {
218 console.log('用户点击取消') 218 console.log("用户点击取消");
219 } 219 }
220 }, 220 }
221 }) 221 });
222 },
223 paylog () {
224
225 },
226 confirmOrder () {
227 store.dispatch('statusConfirm/confirm', {
228 uid: this.uid,
229 openid: this.openid,
230 oldway: '1',
231 way: '2',
232 pay_id: this.payId,
233 judgeContent: '',
234 orderInfo: this.orderInfo.order_info,
235 }).then(
236 setTimeout(() => {
237 uni.navigateBack()
238 }, 1500),
239 )
240 }, 222 },
223 paylog() {},
224 confirmOrder() {
225 store
226 .dispatch("statusConfirm/confirm", {
227 uid: this.uid,
228 openid: this.openid,
229 oldway: "1",
230 way: "2",
231 pay_id: this.payId,
232 judgeContent: "",
233 orderInfo: this.orderInfo.order_info
234 })
235 .then(
236 setTimeout(() => {
237 uni.navigateBack();
238 }, 1500)
239 );
240 }
241 }, 241 },
242 filters: { 242 filters: {
243 timerChange: function(value) { 243 timerChange: function(value) {
244 var newDate = new Date() 244 var newDate = new Date();
245 newDate.setTime(value * 1000) 245 newDate.setTime(value * 1000);
246 return newDate.toLocaleString() 246 return newDate.toLocaleString();
247 }, 247 }
248 }, 248 }
249 } 249 };
250 </script> 250 </script>
251 251
252 <style lang="scss" scoped> 252 <style lang="scss" scoped>
253 .content { 253 .content {
254 min-height: 100vh; 254 min-height: 100vh;
255 display: flex; 255 display: flex;
256 flex-direction: column; 256 flex-direction: column;
257 justify-content: flex-start; 257 justify-content: flex-start;
258 align-items: center; 258 align-items: center;
259 background-color: #f2f2f2; 259 background-color: #f2f2f2;
260 } 260 }
261 261
262 .order { 262 .order {
263 margin-bottom: 112rpx; 263 margin-bottom: 112rpx;
264 background: #f2f2f2; 264 background: #f2f2f2;
265 margin-top: 140rpx; 265 margin-top: 140rpx;
266 width: 670rpx; 266 width: 670rpx;
267 } 267 }
268 268
269 .order-time { 269 .order-time {
270 width: 100%; 270 width: 100%;
271 height: 140rpx; 271 height: 140rpx;
272 background-color: #fff; 272 background-color: #fff;
273 display: flex; 273 display: flex;
274 justify-content: center; 274 justify-content: center;
275 align-items: center; 275 align-items: center;
276 position: fixed; 276 position: fixed;
277 top: 0; 277 top: 0;
278 left: 0; 278 left: 0;
279 text { 279 text {
280 // font-family: PingFangSC-Regular; 280 // font-family: PingFangSC-Regular;
281 // margin-top: 48rpx; 281 // margin-top: 48rpx;
282 font-size: 14px; 282 font-size: 14px;
283 color: #333333; 283 color: #333333;
284 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
285 } 285 }
286 .p2 { 286 .p2 {
287 // font-family: DINAlternate-Bold; 287 // font-family: DINAlternate-Bold;
288 margin: 42rpx 20rpx 0 20rpx; 288 margin: 42rpx 20rpx 0 20rpx;
289 font-size: 18px; 289 font-size: 18px;
290 color: #ec5d3b; 290 color: #ec5d3b;
291 letter-spacing: -0.34px; 291 letter-spacing: -0.34px;
292 } 292 }
293 } 293 }
294 .headerBanner { 294 .headerBanner {
295 width: 100%; 295 width: 100%;
296 height: 140rpx; 296 height: 140rpx;
297 background: #4a90e2; 297 background: #4a90e2;
298 padding: 26rpx 60rpx 24rpx 60rpx; 298 padding: 26rpx 60rpx 24rpx 60rpx;
299 box-sizing: border-box; 299 box-sizing: border-box;
300 color: #ffffff; 300 color: #ffffff;
301 display: flex; 301 display: flex;
302 justify-content: space-between; 302 justify-content: space-between;
303 align-items: center; 303 align-items: center;
304 position: fixed; 304 position: fixed;
305 top: 0; 305 top: 0;
306 left: 0; 306 left: 0;
307 .bannerLeft { 307 .bannerLeft {
308 font-size: 36rpx; 308 font-size: 36rpx;
309 display: flex; 309 display: flex;
310 flex-direction: column; 310 flex-direction: column;
311 justify-content: center; 311 justify-content: center;
312 align-items: center; 312 align-items: center;
313 .T2 { 313 .T2 {
314 font-size: 24rpx; 314 font-size: 24rpx;
315 } 315 }
316 } 316 }
317 image { 317 image {
318 height: 56rpx; 318 height: 56rpx;
319 width: 72rpx; 319 width: 72rpx;
320 } 320 }
321 } 321 }
322 322
323 .order-user { 323 .order-user {
324 height: 228rpx; 324 height: 228rpx;
325 background: #ffffff; 325 background: #ffffff;
326 border-radius: 14rpx; 326 border-radius: 14rpx;
327 margin: 0 auto; 327 margin: 0 auto;
328 margin-top: 20rpx; 328 margin-top: 20rpx;
329 margin-bottom: 20rpx; 329 margin-bottom: 20rpx;
330 .order-user-head { 330 .order-user-head {
331 display: flex; 331 display: flex;
332 height: 108rpx; 332 height: 108rpx;
333 align-items: center; 333 align-items: center;
334 margin-left: 126rpx; 334 margin-left: 126rpx;
335 .p1 { 335 .p1 {
336 // font-family: PingFangSC-Regular; 336 // font-family: PingFangSC-Regular;
337 font-size: 14px; 337 font-size: 14px;
338 color: #333333; 338 color: #333333;
339 letter-spacing: -0.26px; 339 letter-spacing: -0.26px;
340 margin-right: 20rpx; 340 margin-right: 20rpx;
341 } 341 }
342 .p2 { 342 .p2 {
343 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
344 font-size: 14px; 344 font-size: 14px;
345 color: #999999; 345 color: #999999;
346 letter-spacing: -0.26px; 346 letter-spacing: -0.26px;
347 } 347 }
348 } 348 }
349 .order-user-body { 349 .order-user-body {
350 display: flex; 350 display: flex;
351 width: 100%; 351 width: 100%;
352 image { 352 image {
353 width: 24px; 353 width: 24px;
354 height: 26px; 354 height: 26px;
355 margin: 12rpx 32rpx 0 40rpx; 355 margin: 12rpx 32rpx 0 40rpx;
356 } 356 }
357 .p3 { 357 .p3 {
358 // font-family: PingFangSC-Semibold; 358 // font-family: PingFangSC-Semibold;
359 font-size: 14px; 359 font-size: 14px;
360 color: #333333; 360 color: #333333;
361 letter-spacing: -0.26px; 361 letter-spacing: -0.26px;
362 } 362 }
363 } 363 }
364 } 364 }
365 365
366 .order-info { 366 .order-info {
367 background-color: #fff; 367 background-color: #fff;
368 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 368 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
369 border-radius: 16rpx; 369 border-radius: 16rpx;
370 margin: 0 auto; 370 margin: 0 auto;
371 view { 371 view {
372 margin-left: 40rpx; 372 margin-left: 40rpx;
373 } 373 }
374 text { 374 text {
375 font-size: 14px; 375 font-size: 14px;
376 } 376 }
377 .order-info-head { 377 .order-info-head {
378 display: flex; 378 display: flex;
379 padding-top: 40rpx; 379 padding-top: 40rpx;
380 image { 380 image {
381 height: 188rpx; 381 height: 188rpx;
382 width: 188rpx; 382 width: 188rpx;
383 } 383 }
384 .order-info-head-r { 384 .order-info-head-r {
385 margin: 0; 385 margin: 0;
386 width: 368rpx; 386 width: 368rpx;
387 margin-left: 24rpx; 387 margin-left: 24rpx;
388 // margin-top: 40rpx; 388 // margin-top: 40rpx;
389 text { 389 text {
390 display: block; 390 display: block;
391 } 391 }
392 // .arrow{ 392 // .arrow{
393 // width: 0; 393 // width: 0;
394 // height: 0; 394 // height: 0;
395 // border-left: 5px transparent; 395 // border-left: 5px transparent;
396 // border-right: 5px transparent; 396 // border-right: 5px transparent;
397 // border-top: 5px #979797; 397 // border-top: 5px #979797;
398 // border-bottom: 0 transparent; 398 // border-bottom: 0 transparent;
399 // border-style: solid; 399 // border-style: solid;
400 // position: relative; 400 // position: relative;
401 // // transform: scaleY(-1); 401 // // transform: scaleY(-1);
402 // } 402 // }
403 // .arrow::after{ 403 // .arrow::after{
404 // content: ''; 404 // content: '';
405 // position: absolute; 405 // position: absolute;
406 // top: -6.5px; 406 // top: -6.5px;
407 // left: -5px; 407 // left: -5px;
408 // border-left: 5px transparent; 408 // border-left: 5px transparent;
409 // border-right: 5px transparent; 409 // border-right: 5px transparent;
410 // border-top: 5px #FFFFFF; 410 // border-top: 5px #FFFFFF;
411 // border-bottom: 0 transparent; 411 // border-bottom: 0 transparent;
412 // border-style: solid; 412 // border-style: solid;
413 // } 413 // }
414 .p1 { 414 .p1 {
415 min-height: 40px; 415 min-height: 40px;
416 // font-family: PingFangSC-Regular; 416 // font-family: PingFangSC-Regular;
417 font-size: 14px; 417 font-size: 14px;
418 color: #333333; 418 color: #333333;
419 letter-spacing: -0.26px; 419 letter-spacing: -0.26px;
420 line-height: 18px; 420 line-height: 18px;
421 // line-height: 20px; 421 // line-height: 20px;
422 } 422 }
423 .p2 { 423 .p2 {
424 height: 34px; 424 height: 34px;
425 padding: 1px 0 3px 0; 425 padding: 1px 0 3px 0;
426 // font-family: PingFangSC-Regular; 426 // font-family: PingFangSC-Regular;
427 font-size: 12px; 427 font-size: 12px;
428 color: #999999; 428 color: #999999;
429 letter-spacing: -0.23px; 429 letter-spacing: -0.23px;
430 } 430 }
431 .infoText-bottom { 431 .infoText-bottom {
432 display: flex; 432 display: flex;
433 flex-direction: row; 433 flex-direction: row;
434 justify-content: flex-start; 434 justify-content: flex-start;
435 align-items: center; 435 align-items: center;
436 width: 100%; 436 width: 100%;
437 margin-left: 0; 437 margin-left: 0;
438 .markPrice { 438 .markPrice {
439 font-size: 14px; 439 font-size: 14px;
440 color: #ff6b4a; 440 color: #ff6b4a;
441 margin-right: 20rpx; 441 margin-right: 20rpx;
442 margin-left: 0rpx; 442 margin-left: 0rpx;
443 } 443 }
444 .buy-num { 444 .buy-num {
445 font-size: 12px; 445 font-size: 12px;
446 color: #999999; 446 color: #999999;
447 } 447 }
448 } 448 }
449 } 449 }
450 } 450 }
451 // .order-info-goodsnum { 451 // .order-info-goodsnum {
452 // display: flex; 452 // display: flex;
453 // align-items: center; 453 // align-items: center;
454 // justify-content: flex-end; 454 // justify-content: flex-end;
455 // text { 455 // text {
456 // margin-right: 44rpx; 456 // margin-right: 44rpx;
457 // // ont-family: PingFangSC-Regular; 457 // // ont-family: PingFangSC-Regular;
458 // font-size: 12px; 458 // font-size: 12px;
459 // color: #999999; 459 // color: #999999;
460 // letter-spacing: -0.23px; 460 // letter-spacing: -0.23px;
461 // } 461 // }
462 // } 462 // }
463 .order-info-freight { 463 .order-info-freight {
464 display: block; 464 display: block;
465 margin-left: 40rpx; 465 margin-left: 40rpx;
466 margin-top: 22rpx; 466 margin-top: 22rpx;
467 .p1 { 467 .p1 {
468 // font-family: PingFangSC-Regular; 468 // font-family: PingFangSC-Regular;
469 font-size: 14px; 469 font-size: 14px;
470 color: #333333; 470 color: #333333;
471 letter-spacing: -0.26px; 471 letter-spacing: -0.26px;
472 line-height: 18px; 472 line-height: 18px;
473 margin-right: 24px; 473 margin-right: 24px;
474 } 474 }
475 .p2 { 475 .p2 {
476 // font-family: PingFangSC-Regular; 476 // font-family: PingFangSC-Regular;
477 font-size: 14px; 477 font-size: 14px;
478 color: #ff6b4a; 478 color: #ff6b4a;
479 letter-spacing: -0.26px; 479 letter-spacing: -0.26px;
480 } 480 }
481 } 481 }
482 .order-info-discount { 482 .order-info-discount {
483 display: block; 483 display: block;
484 margin-left: 40rpx; 484 margin-left: 40rpx;
485 margin-top: 24rpx; 485 margin-top: 24rpx;
486 .p1 { 486 .p1 {
487 // font-family: PingFangSC-Regular; 487 // font-family: PingFangSC-Regular;
488 font-size: 14px; 488 font-size: 14px;
489 color: #333333; 489 color: #333333;
490 letter-spacing: -0.26px; 490 letter-spacing: -0.26px;
491 line-height: 18px; 491 line-height: 18px;
492 margin-right: 24px; 492 margin-right: 24px;
493 } 493 }
494 .p2 { 494 .p2 {
495 // font-family: PingFangSC-Regular; 495 // font-family: PingFangSC-Regular;
496 font-size: 14px; 496 font-size: 14px;
497 color: #ff6b4a; 497 color: #ff6b4a;
498 letter-spacing: -0.26px; 498 letter-spacing: -0.26px;
499 } 499 }
500 } 500 }
501 .order-info-price { 501 .order-info-price {
502 display: block; 502 display: block;
503 margin-left: 40rpx; 503 margin-left: 40rpx;
504 margin-top: 24rpx; 504 margin-top: 24rpx;
505 .p1 { 505 .p1 {
506 // font-family: PingFangSC-Semibold; 506 // font-family: PingFangSC-Semibold;
507 font-size: 14px; 507 font-size: 14px;
508 color: #333333; 508 color: #333333;
509 letter-spacing: -0.26px; 509 letter-spacing: -0.26px;
510 line-height: 18px; 510 line-height: 18px;
511 margin-right: 24px; 511 margin-right: 24px;
512 } 512 }
513 .p2 { 513 .p2 {
514 // font-family: PingFangSC-Semibold; 514 // font-family: PingFangSC-Semibold;
515 font-size: 14px; 515 font-size: 14px;
516 color: #ff6b4a; 516 color: #ff6b4a;
517 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
518 } 518 }
519 } 519 }
520 .order-info-num { 520 .order-info-num {
521 display: block; 521 display: block;
522 margin-left: 40rpx; 522 margin-left: 40rpx;
523 margin-top: 44rpx; 523 margin-top: 44rpx;
524 text { 524 text {
525 // font-family: PingFangSC-Regular; 525 // font-family: PingFangSC-Regular;
526 font-size: 12px; 526 font-size: 12px;
527 color: #999999; 527 color: #999999;
528 letter-spacing: -0.23px; 528 letter-spacing: -0.23px;
529 } 529 }
530 } 530 }
531 .order-info-time { 531 .order-info-time {
532 display: block; 532 display: block;
533 margin: 8rpx 0 48rpx 40rpx; 533 margin: 8rpx 0 48rpx 40rpx;
534 text { 534 text {
535 // font-family: PingFangSC-Regular; 535 // font-family: PingFangSC-Regular;
536 font-size: 12px; 536 font-size: 12px;
537 color: #999999; 537 color: #999999;
538 letter-spacing: -0.23px; 538 letter-spacing: -0.23px;
539 } 539 }
540 } 540 }
541 .order-info-hr { 541 .order-info-hr {
542 width: 520rpx; 542 width: 520rpx;
543 height: 1px; 543 height: 1px;
544 background-color: #e9e9e9; 544 background-color: #e9e9e9;
545 margin-bottom: 20rpx; 545 margin-bottom: 20rpx;
546 } 546 }
547 .order-info-contact { 547 .order-info-contact {
548 display: flex; 548 display: flex;
549 padding-bottom: 28rpx; 549 padding-bottom: 28rpx;
550 image { 550 image {
551 width: 19px; 551 width: 19px;
552 height: 16px; 552 height: 16px;
553 } 553 }
554 text { 554 text {
555 // font-family: PingFangSC-Regular; 555 // font-family: PingFangSC-Regular;
556 margin-left: 20rpx; 556 margin-left: 20rpx;
557 font-size: 14px; 557 font-size: 14px;
558 color: #333333; 558 color: #333333;
559 letter-spacing: -0.26px; 559 letter-spacing: -0.26px;
560 line-height: 18px; 560 line-height: 18px;
561 } 561 }
562 } 562 }
563 } 563 }
564 564
565 .order-confim { 565 .order-confim {
566 display: flex; 566 display: flex;
567 align-items: center; 567 align-items: center;
568 justify-content: flex-end; 568 justify-content: flex-end;
569 // z-index: 999; 569 // z-index: 999;
570 width: 100%; 570 width: 100%;
571 height: 112rpx; 571 height: 112rpx;
572 position: fixed; 572 position: fixed;
573 bottom: 0; 573 bottom: 0;
574 background: #ffffff; 574 background: #ffffff;
575 button { 575 button {
576 width: 204rpx; 576 width: 204rpx;
577 height: 80rpx; 577 height: 80rpx;
578 border: 1px solid #ff6b4a; 578 border: 1px solid #ff6b4a;
579 border-radius: 40rpx; 579 border-radius: 40rpx;
src/store/modules/myOrder.js
Diff comments   View file @2c71ddb
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 myOrderList 5 myOrderList
6 } = urlAlias 6 } = urlAlias
7 7
8 // const data = { 8 // const data = {
9 // data: [ 9 // data: [
10 // { 10 // {
11 // finished_time: null, 11 // finished_time: null,
12 // is_refound: "0", 12 // is_refound: "0",
13 // mch_id: "1436019502", 13 // mch_id: "1436019502",
14 // money_of_dcw: "0", 14 // money_of_dcw: "0",
15 // money_of_partner: "0", 15 // money_of_partner: "0",
16 // money_of_shop: "0", 16 // money_of_shop: "0",
17 // orderJudge: false, 17 // orderJudge: false,
18 // order_info: { 18 // order_info: {
19 // address:{ 19 // address:{
20 // cityName: "镇江市", 20 // cityName: "镇江市",
21 // countyName: "丹阳市", 21 // countyName: "丹阳市",
22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", 22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 // errMsg: "chooseAddress:ok", 23 // errMsg: "chooseAddress:ok",
24 // nationalCode: "321181", 24 // nationalCode: "321181",
25 // postalCode: "212300", 25 // postalCode: "212300",
26 // provinceName: "江苏省", 26 // provinceName: "江苏省",
27 // telNumber: "15896379277", 27 // telNumber: "15896379277",
28 // userName: "点餐汪客服", 28 // userName: "点餐汪客服",
29 // }, 29 // },
30 // cartinfo:['11', '12'], 30 // cartinfo:['11', '12'],
31 // keyname: "1_1587129366", 31 // keyname: "1_1587129366",
32 // lefttime: 179995, 32 // lefttime: 179995,
33 // list:[ 33 // list:[
34 // { 34 // {
35 // cart_id: "11", 35 // cart_id: "11",
36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", 36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 // img_index_url: null, 37 // img_index_url: null,
38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", 38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
39 // mp_id: "1", 39 // mp_id: "1",
40 // nowPrice: 100, 40 // nowPrice: 100,
41 // num: "2", 41 // num: "2",
42 // oldPrice: "0", 42 // oldPrice: "0",
43 // p_discount: "1", 43 // p_discount: "1",
44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", 44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
45 // p_root_index: "1", 45 // p_root_index: "1",
46 // p_sale_price: "0", 46 // p_sale_price: "0",
47 // peopleName: "me", 47 // peopleName: "me",
48 // pics: '', 48 // pics: '',
49 // pid: "4", 49 // pid: "4",
50 // sk_id: "38", 50 // sk_id: "38",
51 // }, 51 // },
52 // ], 52 // ],
53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", 53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
54 // total_fee: 100 54 // total_fee: 100
55 // }, 55 // },
56 // partner_uid: "0", 56 // partner_uid: "0",
57 // pay_cate: "2020", 57 // pay_cate: "2020",
58 // pay_id: "3", 58 // pay_id: "3",
59 // pay_time: "2020-04-17 21:16:12", 59 // pay_time: "2020-04-17 21:16:12",
60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证", 60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 // pay_wood_id: "fcdj-1-1_1587129366", 61 // pay_wood_id: "fcdj-1-1_1587129366",
62 // prepay_id: "wx172116124528226bf1a8adad1662456500", 62 // prepay_id: "wx172116124528226bf1a8adad1662456500",
63 // re_check_staus: "0", 63 // re_check_staus: "0",
64 // shopid: "0", 64 // shopid: "0",
65 // split_userid: "0", 65 // split_userid: "0",
66 // status: "1", 66 // status: "1",
67 // total_fee: "100", 67 // total_fee: "100",
68 // uid: "1", 68 // uid: "1",
69 // } 69 // }
70 // ], 70 // ],
71 // msg: "订单列表", 71 // msg: "订单列表",
72 // status: 0, 72 // status: 0,
73 // } 73 // }
74 74
75 const state = { 75 const state = {
76 orderList: [], 76 orderList: [],
77 }; 77 };
78 78
79 const mutations = { 79 const mutations = {
80 INIT: (state, data) => { 80 INIT: (state, data) => {
81 state.orderList = data; 81 state.orderList = data;
82 }, 82 },
83 }; 83 };
84 84
85 const actions = { 85 const actions = {
86 getList({ commit }, param) { 86 getList({
87 request({ 87 commit
88 url: myOrderList, 88 }, param) {
89 data: param, 89 request({
90 success: (res) => { 90 url: myOrderList,
91 // console.log(res.data); 91 data: param,
92 commit("INIT", res.data.data); 92 success: (res) => {
93 }, 93 console.log('myOrderList', res.data);
94 commit("INIT", res.data.data);
95 },
94 }) 96 })
95 } 97 }
96 } 98 }
97 99
98 export default { 100 export default {
99 namespaced: true, 101 namespaced: true,
100 state, 102 state,
101 mutations, 103 mutations,
102 actions, 104 actions,
103 } 105 }