吉鹏 / gulu-vue

Download as
Browse Code »

Commit 34703a7672c876bc05320083bb8e836d07175cdd

Authored by BigBoss
1 parent 5b12ec0b65
Exists in master

订单逻辑修改

Showing 4 changed files with 122 additions and 105 deletions   Show diff stats
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @34703a7
1 <template> 1 <template>
2 <view> 2 <view>
3 <view 3 <view
4 class="card" 4 class="card"
5 v-if="current == status" 5 v-if="current == status"
6 @click="toOrderInfo(status,order.pay_id)" 6 @click="toOrderInfo(status,order.pay_id)"
7 > 7 >
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <text 9 <text
10 class="orderId" 10 class="orderId"
11 v-if="status == '0'||status == '1'" 11 v-if="status == '0'||status == '1'"
12 >订单号：{{order.pay_id}}</text> 12 >订单号：{{order.pay_id}}</text>
13 <text 13 <text
14 class="orderId" 14 class="orderId"
15 v-if="status == '2'||status == '3'" 15 v-if="status == '2'||status == '3'"
16 >下单时间：{{order.pay_time}}</text> 16 >下单时间：{{order.pay_time}}</text>
17 <text 17 <text
18 class="orderType" 18 class="orderType"
19 v-if="status=='0'" 19 v-if="status=='0'"
20 >待付款</text> 20 >待付款</text>
21 <text 21 <text
22 class="orderType" 22 class="orderType"
23 v-if="status=='1'" 23 v-if="status=='1'"
24 >待收货</text> 24 >待收货</text>
25 <text 25 <text
26 class="orderType" 26 class="orderType"
27 v-if="status == '2'||status == '3'" 27 v-if="status == '2'||status == '3'"
28 >已完成</text> 28 >已完成</text>
29 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 29 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30 </view> 30 </view>
31 <view 31 <view
32 class="orderCardInfo" 32 class="orderCardInfo"
33 v-for="(orderInfo, index) in orderInfoList" 33 v-for="(orderInfo, index) in orderInfoList"
34 :key="index" 34 :key="index"
35 > 35 >
36 <image 36 <image
37 :src="orderInfo.imgUrl" 37 :src="orderInfo.imgUrl"
38 mode="aspectFill" 38 mode="aspectFill"
39 ></image> 39 ></image>
40 <view class="infoText"> 40 <view class="infoText">
41 <view class="orderName">{{orderInfo.p_name}}</view> 41 <view class="orderName">{{orderInfo.p_name}}</view>
42 <view class="orderDescrib">{{orderInfo.p_name}}</view> 42 <view class="orderDescrib">{{orderInfo.p_name}}</view>
43 <view class="infoText-bottom"> 43 <view class="infoText-bottom">
44 <view class="markPrice">{{orderInfo.nowPrice}}</view> 44 <view class="markPrice">{{orderInfo.nowPrice}}</view>
45 <view class="buy-num">X {{orderInfo.num}}</view> 45 <view class="buy-num">X {{orderInfo.num}}</view>
46 </view> 46 </view>
47 </view> 47 </view>
48 </view> 48 </view>
49 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 49 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
50 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> 50 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
51 <view 51 <view
52 class="btns" 52 class="btns"
53 v-if="status == '0'" 53 v-if="status == '0'"
54 > 54 >
55 <view class="btn-type1">取消订单</view> 55 <view class="btn-type1">取消订单</view>
56 <view class="btn-type2">去支付</view> 56 <view class="btn-type2">去支付</view>
57 </view> 57 </view>
58 <view 58 <view
59 class="btns" 59 class="btns"
60 v-if="status == '1'" 60 v-if="status == '1'"
61 > 61 >
62 <view class="btn-type2">确认收货</view> 62 <view class="btn-type2">确认收货</view>
63 </view> 63 </view>
64 <view 64 <view
65 class="btns" 65 class="btns"
66 v-if="status == '2'" 66 v-if="status == '2'"
67 > 67 >
68 <view class="btn-type2">再次购买</view> 68 <view class="btn-type2" @click="toDetail">再次购买</view>
69 </view> 69 </view>
70 <!-- <view class="btns" v-if="status == '3'"> 70 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view> 71 <view class="btn-type2">再次购买</view>
72 </view> --> 72 </view> -->
73 </view> 73 </view>
74 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> 74 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
75 <view class="cardHeader"> 75 <view class="cardHeader">
76 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 76 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.pay_id}}</text>
77 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 77 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
78 <text class="orderType" v-if="status=='0'">待付款</text> 78 <text class="orderType" v-if="status=='0'">待付款</text>
79 <text class="orderType" v-if="status=='1'">待收货</text> 79 <text class="orderType" v-if="status=='1'">待收货</text>
80 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 80 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
81 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 81 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
82 </view> 82 </view>
83 <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList" :key="orderInfo"> 83 <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList" :key="orderInfo">
84 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 84 <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
85 <view class="infoText"> 85 <view class="infoText">
86 <view class="orderName">{{orderInfo.p_name}}</view> 86 <view class="orderName">{{orderInfo.p_name}}</view>
87 <view class="orderDescrib">{{orderInfo.p_name}}</view> 87 <view class="orderDescrib">{{orderInfo.p_name}}</view>
88 <view class="infoText-bottom"> 88 <view class="infoText-bottom">
89 <view class="markPrice">{{orderInfo.nowPrice}}</view> 89 <view class="markPrice">{{orderInfo.nowPrice}}</view>
90 <view class="buy-num">X {{orderInfo.num}}</view> 90 <view class="buy-num">X {{orderInfo.num}}</view>
91 </view> 91 </view>
92 </view> 92 </view>
93 </view> 93 </view>
94 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 94 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
95 <view class="btns" v-if="status == '0'"> 95 <view class="btns" v-if="status == '0'">
96 <view class="btn-type1" >取消订单</view> 96 <view class="btn-type1" >取消订单</view>
97 <view class="btn-type2">去支付</view> 97 <view class="btn-type2">去支付</view>
98 </view> 98 </view>
99 <view class="btns" v-if="status == '1'"> 99 <view class="btns" v-if="status == '1'">
100 <view class="btn-type2">确认收货</view> 100 <view class="btn-type2">确认收货</view>
101 </view> 101 </view>
102 <view class="btns" v-if="status == '2'||status == '3'"> 102 <view class="btns" v-if="status == '2'||status == '3'">
103 <view class="btn-type2">再次购买</view> 103 <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
104 </view> 104 </view>
105 <!-- <view class="btns" v-if="status == '3'"> 105 <!-- <view class="btns" v-if="status == '3'">
106 106
107 <view class="btn-type2">再次购买</view> 107 <view class="btn-type2">再次购买</view>
108 </view> --> 108 </view> -->
109 </view> 109 </view>
110 </view> 110 </view>
111 </template> 111 </template>
112 112
113 <script> 113 <script>
114 export default { 114 export default {
115 props: { 115 props: {
116 /** 116 /**
117 * 订单数据 117 * 订单数据
118 */ 118 */
119 order: {}, 119 order: {},
120 /** 120 /**
121 * 当前选择 121 * 当前选择
122 */ 122 */
123 current:Number 123 current:Number
124 124
125 }, 125 },
126 created() { 126 created() {
127 console.log(this.order); 127 console.log('order',this.order);
128 // console.log(this.order.status ); 128 // console.log(this.order.status );
129 // console.log(this.current); 129 // console.log(this.current);
130 }, 130 },
131 computed:{ 131 computed:{
132 status(){ 132 status(){
133 return this.order.status 133 return this.order.status
134 }, 134 },
135 orderInfoList(){ 135 orderInfoList(){
136 console.log('orderInfoList', this.order.order_info)
137 return this.order.order_info 136 return this.order.order_info
138 } 137 }
139 }, 138 },
140 data() { 139 data() {
141 return { 140 return {
142 }; 141 };
143 }, 142 },
144 methods:{ 143 methods:{
144 toDetail(pid){
145 console.log('pid',pid)
146 uni.navigateTo({
147 url: '../details/details?pid='+pid,
148 fail: (res) => {console.log(res)},
149 });
150 },
145 toRefundment(){ 151 toRefundment(){
146 uni.navigateTo({ 152 uni.navigateTo({
147 url: '../refundment/refundment', 153 url: '../refundment/refundment',
148 success: res => {}, 154 success: res => {},
149 fail: () => {}, 155 fail: () => {},
150 complete: () => {} 156 complete: () => {}
151 }); 157 });
152 }, 158 },
153 toOrderInfo(status,payId){ 159 toOrderInfo(status,payId){
154 console.log(status,payId) 160 console.log(status,payId)
155 switch(status){ 161 switch(status){
156 // 0待付款 1待收货 2已收货 3 已评价 162 // 0待付款 1待收货 2已收货 3 已评价
157 case '0': 163 case '0':
158 uni.navigateTo({ 164 uni.navigateTo({
159 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 165 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
160 fail(errMsg) { 166 fail(errMsg) {
161 console.log(errMsg) 167 console.log(errMsg)
162 } 168 }
163 }) 169 })
164 break; 170 break;
165 case '1': 171 case '1':
166 uni.navigateTo({ 172 uni.navigateTo({
167 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 173 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
168 fail(errMsg) { 174 fail(errMsg) {
169 console.log(errMsg) 175 console.log(errMsg)
170 } 176 }
171 }) 177 })
172 178
173 break; 179 break;
174 case '2 || 3': 180 case '2 || 3':
175 uni.navigateTo({ 181 uni.navigateTo({
176 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 182 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
177 fail(errMsg) { 183 fail(errMsg) {
178 console.log(errMsg) 184 console.log(errMsg)
179 } 185 }
180 }) 186 })
181 break; 187 break;
182 default: 188 default:
183 break; 189 break;
184 190
185 } 191 }
186 } 192 }
187 } 193 }
188 } 194 }
189 195
190 </script> 196 </script>
191 197
192 <style lang="scss"> 198 <style lang="scss">
193 .card { 199 .card {
194 width: 670rpx; 200 width: 670rpx;
195 height: 478rpx; 201 height: 478rpx;
196 background: #ffffff; 202 background: #ffffff;
197 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); 203 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
198 border-radius: 8px; 204 border-radius: 8px;
199 border-radius: 8px; 205 border-radius: 8px;
200 margin-top: 20rpx; 206 margin-top: 20rpx;
201 padding: 40rpx; 207 padding: 40rpx;
202 box-sizing: border-box; 208 box-sizing: border-box;
203 .cardHeader { 209 .cardHeader {
204 width: 100%; 210 width: 100%;
205 height: 40rpx; 211 height: 40rpx;
206 display: flex; 212 display: flex;
207 justify-content: space-between; 213 justify-content: space-between;
208 align-items: center; 214 align-items: center;
209 .orderId { 215 .orderId {
210 font-size: 12px; 216 font-size: 12px;
211 color: #999999; 217 color: #999999;
212 } 218 }
213 .orderType { 219 .orderType {
214 font-size: 14px; 220 font-size: 14px;
215 color: #ff6b4a; 221 color: #ff6b4a;
216 } 222 }
217 } 223 }
218 .orderCardInfo { 224 .orderCardInfo {
219 width: 100%; 225 width: 100%;
220 height: 188rpx; 226 height: 188rpx;
221 display: flex; 227 display: flex;
222 flex-direction: row; 228 flex-direction: row;
223 justify-content: space-between; 229 justify-content: space-between;
224 align-items: center; 230 align-items: center;
225 margin-top: 40rpx; 231 margin-top: 40rpx;
226 image { 232 image {
227 height: 188rpx; 233 height: 188rpx;
228 width: 188rpx; 234 width: 188rpx;
229 margin-right: 24rpx; 235 margin-right: 24rpx;
230 } 236 }
231 .infoText { 237 .infoText {
232 display: flex; 238 display: flex;
233 flex-direction: column; 239 flex-direction: column;
234 justify-content: space-between; 240 justify-content: space-between;
235 align-items: flex-start; 241 align-items: flex-start;
236 height: 188rpx; 242 height: 188rpx;
237 width: 368rpx; 243 width: 368rpx;
238 } 244 }
239 .orderName { 245 .orderName {
240 font-size: 14px; 246 font-size: 14px;
241 color: #333333; 247 color: #333333;
242 display: -webkit-box; 248 display: -webkit-box;
243 overflow: hidden; 249 overflow: hidden;
244 -webkit-box-orient: vertical; 250 -webkit-box-orient: vertical;
245 -webkit-line-clamp: 2; 251 -webkit-line-clamp: 2;
246 } 252 }
247 .orderDescrib { 253 .orderDescrib {
248 font-size: 12px; 254 font-size: 12px;
249 color: #999999; 255 color: #999999;
250 display: -webkit-box; 256 display: -webkit-box;
251 overflow: hidden; 257 overflow: hidden;
252 -webkit-box-orient: vertical; 258 -webkit-box-orient: vertical;
253 -webkit-line-clamp: 2; 259 -webkit-line-clamp: 2;
254 } 260 }
255 .infoText-bottom { 261 .infoText-bottom {
256 display: flex; 262 display: flex;
257 flex-direction: row; 263 flex-direction: row;
258 justify-content: flex-start; 264 justify-content: flex-start;
259 align-items: center; 265 align-items: center;
260 width: 100%; 266 width: 100%;
261 .markPrice { 267 .markPrice {
262 font-size: 14px; 268 font-size: 14px;
263 color: #ff6b4a; 269 color: #ff6b4a;
264 margin-right: 20rpx; 270 margin-right: 20rpx;
265 } 271 }
266 .buy-num { 272 .buy-num {
267 font-size: 12px; 273 font-size: 12px;
268 color: #999999; 274 color: #999999;
269 } 275 }
270 } 276 }
271 } 277 }
272 .payPrice { 278 .payPrice {
273 text-align: right; 279 text-align: right;
274 margin: 20rpx 0; 280 margin: 20rpx 0;
275 font-size: 14px; 281 font-size: 14px;
276 color: #333333; 282 color: #333333;
277 .priceNum { 283 .priceNum {
278 font-size: 14px; 284 font-size: 14px;
279 color: #ff6b4a; 285 color: #ff6b4a;
280 } 286 }
281 } 287 }
282 .btns { 288 .btns {
283 display: flex; 289 display: flex;
284 justify-content: flex-end; 290 justify-content: flex-end;
285 align-items: center; 291 align-items: center;
286 .btn-type1 { 292 .btn-type1 {
287 height: 48rpx; 293 height: 48rpx;
288 width: 156rpx; 294 width: 156rpx;
289 border: 1px solid #ff6b4a; 295 border: 1px solid #ff6b4a;
290 border-radius: 12px; 296 border-radius: 12px;
291 border-radius: 12px; 297 border-radius: 12px;
292 text-align: center; 298 text-align: center;
293 line-height: 48rpx; 299 line-height: 48rpx;
294 font-size: 12px; 300 font-size: 12px;
295 color: #ff6b4a; 301 color: #ff6b4a;
296 } 302 }
297 .btn-type2 { 303 .btn-type2 {
298 height: 48rpx; 304 height: 48rpx;
299 width: 140rpx; 305 width: 140rpx;
300 background: #ff6b4a; 306 background: #ff6b4a;
301 border-radius: 12px; 307 border-radius: 12px;
302 border-radius: 12px; 308 border-radius: 12px;
303 text-align: center; 309 text-align: center;
304 line-height: 48rpx; 310 line-height: 48rpx;
305 font-size: 12px; 311 font-size: 12px;
306 color: #ffffff; 312 color: #ffffff;
307 margin-left: 20rpx; 313 margin-left: 20rpx;
308 } 314 }
309 } 315 }
310 } 316 }
311 </style> 317 </style>
src/pages/myOrder/myOrder.vue
Diff comments   View file @34703a7
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.pay_id" 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 onShow() {
61 store.dispatch("myOrder/getList", {
62 way: ""
63 });
64 },
60 onLoad: function(option) { 65 onLoad: function(option) {
61 // 获取订单列表 66 // 获取订单列表
62 store.dispatch("myOrder/getList", { 67 // store.dispatch("myOrder/getList", {
63 way: "" 68 // way: ""
64 }); 69 // });
65 // 从user过来传的status，给current，以显示对应item 70 // 从user过来传的status，给current，以显示对应item
66 this.current = option.status; 71 this.current = option.status;
67 }, 72 },
68 computed: { 73 computed: {
69 orderList() { 74 orderList() {
70 // console.log('orderList', this.$store.state.myOrder.orderList); 75 // console.log('orderList', this.$store.state.myOrder.orderList);
71 return this.$store.state.myOrder.orderList; 76 return this.$store.state.myOrder.orderList;
72 } 77 }
73 }, 78 },
74 methods: { 79 methods: {
75 // tab点击事件 80 // tab点击事件
76 onClickItem(e) { 81 onClickItem(e) {
77 console.log("onClickItem", e);
78 if (this.current !== e) { 82 if (this.current !== e) {
79 this.current = e; 83 this.current = e;
80 } 84 }
81 } 85 }
82 } 86 }
83 }; 87 };
84 </script> 88 </script>
85 89
86 <style lang="scss"> 90 <style lang="scss">
87 .content { 91 .content {
88 display: flex; 92 display: flex;
89 flex-direction: column; 93 flex-direction: column;
90 align-items: center; 94 align-items: center;
91 background-color: #f7f6f6; 95 background-color: #f7f6f6;
92 min-height: 100vh; 96 min-height: 100vh;
93 .header { 97 .header {
94 background-color: #ffffff; 98 background-color: #ffffff;
95 width: 100%; 99 width: 100%;
96 // height: 232rpx; 100 // height: 232rpx;
97 padding: 20rpx 40rpx 16rpx 40rpx; 101 padding: 20rpx 40rpx 16rpx 40rpx;
98 box-sizing: border-box; 102 box-sizing: border-box;
99 position: fixed; 103 position: fixed;
100 top: 0; 104 top: 0;
101 left: 0; 105 left: 0;
102 // .searchBar { 106 // .searchBar {
103 // width: 670rpx; 107 // width: 670rpx;
104 // display: flex; 108 // display: flex;
105 // justify-content: center; 109 // justify-content: center;
106 // align-items: center; 110 // align-items: center;
107 // box-sizing: border-box; 111 // box-sizing: border-box;
108 // padding: 0rpx 16rpx; 112 // padding: 0rpx 16rpx;
109 // border: 1px solid #ff6b4a; 113 // border: 1px solid #ff6b4a;
110 // border-radius: 8rpx; 114 // border-radius: 8rpx;
111 // background-color: #ffffff; 115 // background-color: #ffffff;
112 // } 116 // }
113 117
114 .screenBar { 118 .screenBar {
115 width: 670rpx; 119 width: 670rpx;
116 // height: 110rpx; 120 // height: 110rpx;
117 height: 70rpx; 121 height: 70rpx;
118 display: flex; 122 display: flex;
119 flex-direction: row; 123 flex-direction: row;
120 justify-content: space-between; 124 justify-content: space-between;
121 align-items: center; 125 align-items: center;
122 color: #333333; 126 color: #333333;
123 font-size: 32rpx; 127 font-size: 32rpx;
124 } 128 }
125 .screenItem { 129 .screenItem {
126 height: 50rpx; 130 height: 50rpx;
127 font-size: 32rpx; 131 font-size: 32rpx;
128 color: #333333; 132 color: #333333;
129 display: flex; 133 display: flex;
130 justify-content: center; 134 justify-content: center;
131 align-items: center; 135 align-items: center;
132 transition: all 0.2s; 136 transition: all 0.2s;
133 } 137 }
134 .active { 138 .active {
135 // font-size: 34rpx; 139 // font-size: 34rpx;
136 color: #ec5d3b; 140 color: #ec5d3b;
137 } 141 }
138 .searchIpt { 142 .searchIpt {
139 height: 68rpx; 143 height: 68rpx;
140 width: 670rpx; 144 width: 670rpx;
141 padding: 16rpx; 145 padding: 16rpx;
142 font-size: 28rpx; 146 font-size: 28rpx;
143 box-sizing: border-box; 147 box-sizing: border-box;
144 } 148 }
145 } 149 }
146 .orderList { 150 .orderList {
147 // margin-top: 232rpx; 151 // margin-top: 232rpx;
148 margin-top: 132rpx; 152 margin-top: 132rpx;
149 } 153 }
150 .footer { 154 .footer {
151 font-size: 14px; 155 font-size: 14px;
152 color: #b8b8b8; 156 color: #b8b8b8;
153 margin: 40rpx 0; 157 margin: 40rpx 0;
154 } 158 }
155 } 159 }
156 </style> 160 </style>
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @34703a7
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.total_fee}}</text> 83 <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
84 84
85 </text> 85 </text>
86 <text class="order-info-num"> 86 <text class="order-info-num">
87 <text>订单号：{{payId}}</text> 87 <text>订单号：{{payId}}</text>
88 </text> 88 </text>
89 <text class="order-info-time"> 89 <text class="order-info-time">
90 <text>下单时间：{{orderInfo.order_info.pay_time | timerChange}}</text> 90 <text>下单时间：{{orderInfo.order_info.pay_time | timerChange}}</text>
91 91
92 </text> 92 </text>
93 <view class="order-info-hr"></view> 93 <view class="order-info-hr"></view>
94 <view class="order-info-contact"> 94 <view class="order-info-contact">
95 <image src="../../static/myorder-paying-contact.png"></image> 95 <image src="../../static/myorder-paying-contact.png"></image>
96 <text>联系客服</text> 96 <text>联系客服</text>
97 </view> 97 </view>
98 </view> 98 </view>
99 </view> 99 </view>
100 <view 100 <view
101 class="order-confim" 101 class="order-confim"
102 v-if="status == '0'" 102 v-if="status == '0'"
103 > 103 >
104 <button 104 <button
105 class="b1" 105 class="b1"
106 @click="cancleOrder" 106 @click="cancleOrder"
107 >取消订单</button> 107 >取消订单</button>
108 <button 108 <button
109 class="b2" 109 class="b2"
110 @click="paylog" 110 @click="paylog"
111 >立即支付</button> 111 >立即支付</button>
112 </view> 112 </view>
113 113
114 <view 114 <view
115 class="order-confim" 115 class="order-confim"
116 v-if="status == '1'" 116 v-if="status == '1'"
117 > 117 >
118 <!-- <button class="b1">取消订单</button> --> 118 <!-- <button class="b1">取消订单</button> -->
119 <button 119 <button
120 class="b2" 120 class="b2"
121 @click="confirmOrder" 121 @click="confirmOrder"
122 >确认收货</button> 122 >确认收货</button>
123 </view> 123 </view>
124 </view> 124 </view>
125 </template> 125 </template>
126 126
127 <script> 127 <script>
128 import store from "@/store"; 128 import store from "@/store";
129 import MD5Util from '../../utils/md5'
129 import UniCountdown from "../../components/UniCountdown/UniCountdown.vue"; 130 import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
130 export default { 131 export default {
131 components: { 132 components: {
132 UniCountdown 133 UniCountdown
133 }, 134 },
134 data() { 135 data() {
135 return { 136 return {
136 payId: "", 137 payId: "",
137 payTime: "", 138 payTime: "",
138 status: "", // status 0 待付款 1 已发货 139 status: "", // status 0 待付款 1 已发货
139 uid: "", 140 uid: "",
140 openid: "", 141 openid: "",
141 lefttime: 0, 142 lefttime: 0,
142 isPay: 0, 143 isPay: 0,
143 orderInfo:Object 144 orderInfo:Object,
145 totalPrice:0,
144 }; 146 };
145 }, 147 },
146 onLoad:async function ({payId,status,isPay}) { 148 onLoad:async function ({payId,status,isPay}) {
147 // console.log('++++++++++++++++++',payId,status,isPay) 149 // console.log('++++++++++++++++++',payId,status,isPay)
148 this.payId = payId 150 this.payId = payId
149 this.status = status 151 this.status = status
150 this.isPay = isPay 152 this.isPay = isPay
151 const openid = uni.getStorageSync('openid') 153 const openid = uni.getStorageSync('openid')
152 const uid = this.$store.state.user.userInfo.uid 154 const uid = this.$store.state.user.userInfo.uid
153 this.uid = uid 155 this.uid = uid
154 this.openid = openid 156 this.openid = openid
155 await store.dispatch('orderRead/getOrderInfo', { 157 await store.dispatch('orderRead/getOrderInfo', {
156 pay_id: this.payId, 158 pay_id: this.payId,
157 uid: uid, 159 uid: uid,
158 openid: openid 160 openid: openid
159 }); 161 });
160 console.log(this.$store.state.orderRead.orderInfo) 162 // console.log(this.$store.state.orderRead.orderInfo)
161 this.orderInfo = this.$store.state.orderRead.orderInfo 163 this.orderInfo = this.$store.state.orderRead.orderInfo
164 this.totalPrice = this.orderInfo.total_fee
162 }, 165 },
163 // 若从支付页面跳转过来，返回直接返回到首页 166 // 若从支付页面跳转过来，返回直接返回到首页
164 onBackPress(option) { 167 onBackPress(option) {
165 if (option.from === "backbutton" && this.isPay) { 168 if (option.from === "backbutton" && this.isPay) {
166 uni.switchTab({ 169 uni.switchTab({
167 url: "/pages/index/index" 170 url: "/pages/index/index"
168 }); 171 });
169 return true; // 阻止默认返回行为 172 return true; // 阻止默认返回行为
170 } 173 }
171 }, 174 },
172 computed: { 175 computed: {
173 orderInfoList () { 176 orderInfoList () {
174 return this.orderInfo.order_info.list 177 return this.orderInfo.order_info.list
175 }, 178 },
176 // 获取订单地址信息 179 // 获取订单地址信息
177 orderAddressInfo () { 180 orderAddressInfo () {
178 return this.orderInfo.order_info.address 181 return this.orderInfo.order_info.address
179 }, 182 },
180 // 订单付款时间 183 // 订单付款时间
181 getTime () { 184 getTime () {
182 return this.orderInfo.order_info.lefttime 185 return this.orderInfo.order_info.lefttime
183 186
184 }, 187 },
185 // 计算总优惠额 188 // 计算总优惠额
186 totalDiscount() { 189 totalDiscount() {
187 const discountInfoList = this.orderInfo.discount_info; 190 const discountInfoList = this.orderInfo.discount_info;
188 let totalDiscount = 0; 191 let totalDiscount = 0;
189 if (discountInfoList) { 192 if (discountInfoList) {
190 discountInfoList.map((discountItem, index) => { 193 discountInfoList.map((discountItem, index) => {
191 totalDiscount += Number(discountItem.value); 194 totalDiscount += Number(discountItem.value);
192 }); 195 });
193 } 196 }
194 // console.log(totalDiscount) 197 // console.log(totalDiscount)
195 return totalDiscount; 198 return totalDiscount;
196 } 199 }
197 }, 200 },
198 methods: { 201 methods: {
199 // 取消订单 202 // 取消订单
200 timeup() { 203 timeup() {
201 this.cancleOrder(); 204 this.cancleOrder();
202 }, 205 },
203 cancleOrder() { 206 cancleOrder() {
204 const uid = this.uid; 207 const uid = this.uid;
205 const openid = this.openid; 208 const openid = this.openid;
206 const keyname = this.orderInfo.keyname 209 const keyname = this.orderInfo.keyname
207 console.log(this.orderInfo) 210 console.log(this.orderInfo)
208 uni.showModal({ 211 uni.showModal({
209 title: "提示", 212 title: "提示",
210 content: "现在取消，订单不可恢复哦，确认取消吗？", 213 content: "现在取消，订单不可恢复哦，确认取消吗？",
211 success: function(res) { 214 success: function(res) {
212 if (res.confirm) { 215 if (res.confirm) {
213 store.dispatch("cancelOrder/cancel", { 216 store.dispatch("cancelOrder/cancel", {
214 keyname: keyname, 217 keyname: keyname,
215 uid: uid, 218 uid: uid,
216 openid: openid 219 openid: openid
217 }); 220 });
218 uni.navigateBack({ 221 uni.navigateBack({
219 delta:1 222 delta:1
220 }) 223 })
221 } else if (res.cancel) { 224 } else if (res.cancel) {
222 console.log("用户点击取消"); 225 console.log("用户点击取消");
223 } 226 }
224 } 227 }
225 }); 228 });
226 }, 229 },
227 paylog() { 230 paylog() {
228 console.log('pay',this.orderInfo) 231 console.log('pay',this.orderInfo)
229 // const { data, exKeyName: keyName } = res 232 const { data, exKeyName: keyName } = this.orderInfo
230 // const uid = uni.getStorageSync('uid') 233 const uid = uni.getStorageSync('uid')
231 // const timeStamp = new Date().getTime().toString() 234 const timeStamp = new Date().getTime().toString()
232 // const nonceStr = 'asfafasfasfasfasf' 235 const nonceStr = 'asfafasfasfasfasf'
233 // // 支付参数 236 // 支付参数
234 // const fieldSet = { 237 const fieldSet = {
235 // openid: this.$store.state.user.userInfo.openid, 238 openid: this.$store.state.user.userInfo.openid,
236 // uid: this.$store.state.user.userInfo.uid, 239 uid: this.$store.state.user.userInfo.uid,
237 // shopid: 0, 240 shopid: 0,
238 // payCate: 2020, 241 payCate: 2020,
239 // payMoney: this.totalPrice, 242 payMoney: this.totalPrice,
240 // payWoodId: `fcdj-${uid}-${keyName}`, 243 payWoodId: `fcdj-${uid}-${keyName}`,
241 // payWoodDesc: '在【非常戴镜】的微信付款凭证', 244 payWoodDesc: '在【非常戴镜】的微信付款凭证',
242 // nonceStr, 245 nonceStr,
243 // signType: 'MD5', 246 signType: 'MD5',
244 // app_uid: 2020, 247 app_uid: 2020,
245 // timeStamp, 248 timeStamp,
246 // keyname: keyName, 249 keyname: keyName,
247 // billInfo: JSON.stringify(data), 250 billInfo: JSON.stringify(data),
248 // } 251 }
249 // // 请求后台支付接口 252 // 请求后台支付接口
250 // store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 253 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
251 // if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 254 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
252 // const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 255 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
253 // const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 256 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
254 257
255 // // 微信支付接口 258 // 微信支付接口
256 // uni.requestPayment({ 259 uni.requestPayment({
257 // appId: data.appid, 260 appId: data.appid,
258 // timeStamp, 261 timeStamp,
259 // nonceStr, 262 nonceStr,
260 // total_fee: this.totalPrice, 263 total_fee: this.totalPrice,
261 // package: `prepay_id=${data.prepay_id}`, 264 package: `prepay_id=${data.prepay_id}`,
262 // signType: 'MD5', 265 signType: 'MD5',
263 // paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 266 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
264 // success: (res) => { 267 success: (res) => {
265 // // 支付成功 268 // 支付成功
266 // uni.showModal({ 269 uni.showModal({
267 // content: '支付成功', 270 content: '支付成功',
268 // showCancel: false, 271 showCancel: false,
269 // }) 272 })
270 // // 跳转订单详情页->状态 待收货 273 // 跳转订单详情页->状态 待收货
271 // uni.reLaunch({ 274 uni.reLaunch({
272 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 275 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=2&isPay=1`,
273 // }) 276 })
274 // }, 277 },
275 // fail: (res) => { 278 fail: (res) => {
276 // // 支付失败 279 // 支付失败
277 // uni.showModal({ 280 uni.showModal({
278 // content: '支付失败', 281 content: '支付失败',
279 // showCancel: false, 282 showCancel: false,
280 // }) 283 })
281 // // 跳转订单详情页->状态 待付款 284 // 跳转订单详情页->刷新本页面
282 // uni.reLaunch({ 285 uni.redirectTo({
283 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 286 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
284 // }) 287 })
285 // }, 288 },
286 // complete: () => { 289 complete: () => {
287 // uni.hideLoading() 290 uni.hideLoading()
288 // }, 291 },
289 // }) 292 })
290 // } else { 293 } else {
291 // uni.showModal({ 294 uni.showModal({
292 // content: '支付失败', 295 content: '支付失败',
293 // showCancel: false, 296 showCancel: false,
294 // }) 297 })
295 // console.log('支付失败') 298 console.log('支付失败')
296 // uni.hideLoading() 299 uni.hideLoading()
297 // } 300 uni.redirectTo({
298 // }) 301 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
302 })
303 }
304 })
299 305
300 //修改订单状态 待付款==>待收货 306 //修改订单状态 待付款==>待收货
301 store.dispatch("statusConfirm/confirm", { 307 store.dispatch("statusConfirm/confirm", {
302 uid: this.uid, 308 uid: this.uid,
303 openid: this.openid, 309 openid: this.openid,
304 oldway: "0", 310 oldway: "0",
305 way: "1", 311 way: "1",
306 pay_id: this.payId, 312 pay_id: this.payId,
307 judgeContent: "", 313 judgeContent: "",
308 orderInfo: this.orderInfo.order_info 314 orderInfo: this.orderInfo.order_info
309 }) 315 })
310 .then( 316 .then(
311 setTimeout(() => { 317 // setTimeout(() => {
312 uni.navigateBack(); 318 // uni.navigateBack();
313 }, 1500) 319 // }, 1500)
314 ); 320 );
315 }, 321 },
316 confirmOrder() { 322 confirmOrder() {
317 //确认收货 way1 ==>way2 323 //确认收货 way1 ==>way2
318 store 324 store
319 .dispatch("statusConfirm/confirm", { 325 .dispatch("statusConfirm/confirm", {
320 uid: this.uid, 326 uid: this.uid,
321 openid: this.openid, 327 openid: this.openid,
322 oldway: "1", 328 oldway: "1",
323 way: "2", 329 way: "2",
324 pay_id: this.payId, 330 pay_id: this.payId,
325 judgeContent: "", 331 judgeContent: "",
326 orderInfo: this.orderInfo.order_info 332 orderInfo: this.orderInfo.order_info
327 }) 333 })
328 .then( 334 .then((res)=>{
329 setTimeout(() => { 335 if(res.data.code === 1){
330 uni.navigateBack(); 336 uni.showToast({
331 }, 1500) 337 title:'已确认',
332 ); 338 mask:true,
339 duration:1500,
340 icon:'success'
341 })
342 }else{
343 uni-uni.showToast({
344 title: '服务器错误，确认失败!',
345 mask:true
346 });
347 }
348 setTimeout(() => {
349 uni.navigateBack();
350 }, 1500)
351 });
333 } 352 }
334 }, 353 },
335 filters: { 354 filters: {
336 timerChange: function(value) { 355 timerChange: function(value) {
337 var newDate = new Date(); 356 var newDate = new Date();
338 newDate.setTime(value * 1000); 357 newDate.setTime(value * 1000);
339 return newDate.toLocaleString(); 358 return newDate.toLocaleString();
340 } 359 }
341 } 360 }
342 }; 361 };
343 </script> 362 </script>
344 363
345 <style lang="scss" scoped> 364 <style lang="scss" scoped>
346 .content { 365 .content {
347 min-height: 100vh; 366 min-height: 100vh;
348 display: flex; 367 display: flex;
349 flex-direction: column; 368 flex-direction: column;
350 justify-content: flex-start; 369 justify-content: flex-start;
351 align-items: center; 370 align-items: center;
352 background-color: #f2f2f2; 371 background-color: #f2f2f2;
353 } 372 }
354 373
355 .order { 374 .order {
356 margin-bottom: 112rpx; 375 margin-bottom: 112rpx;
357 background: #f2f2f2; 376 background: #f2f2f2;
358 margin-top: 140rpx; 377 margin-top: 140rpx;
359 width: 670rpx; 378 width: 670rpx;
360 } 379 }
361 380
362 .order-time { 381 .order-time {
363 width: 100%; 382 width: 100%;
364 height: 140rpx; 383 height: 140rpx;
365 background-color: #fff; 384 background-color: #fff;
366 display: flex; 385 display: flex;
367 justify-content: center; 386 justify-content: center;
368 align-items: center; 387 align-items: center;
369 position: fixed; 388 position: fixed;
370 top: 0; 389 top: 0;
371 left: 0; 390 left: 0;
372 text { 391 text {
373 // font-family: PingFangSC-Regular; 392 // font-family: PingFangSC-Regular;
374 // margin-top: 48rpx; 393 // margin-top: 48rpx;
375 font-size: 14px; 394 font-size: 14px;
376 color: #333333; 395 color: #333333;
377 letter-spacing: -0.26px; 396 letter-spacing: -0.26px;
378 } 397 }
379 .p2 { 398 .p2 {
380 // font-family: DINAlternate-Bold; 399 // font-family: DINAlternate-Bold;
381 margin: 42rpx 20rpx 0 20rpx; 400 margin: 42rpx 20rpx 0 20rpx;
382 font-size: 18px; 401 font-size: 18px;
383 color: #ec5d3b; 402 color: #ec5d3b;
384 letter-spacing: -0.34px; 403 letter-spacing: -0.34px;
385 } 404 }
386 } 405 }
387 .headerBanner { 406 .headerBanner {
388 width: 100%; 407 width: 100%;
389 height: 140rpx; 408 height: 140rpx;
390 background: #4a90e2; 409 background: #4a90e2;
391 padding: 26rpx 60rpx 24rpx 60rpx; 410 padding: 26rpx 60rpx 24rpx 60rpx;
392 box-sizing: border-box; 411 box-sizing: border-box;
393 color: #ffffff; 412 color: #ffffff;
394 display: flex; 413 display: flex;
395 justify-content: space-between; 414 justify-content: space-between;
396 align-items: center; 415 align-items: center;
397 position: fixed; 416 position: fixed;
398 top: 0; 417 top: 0;
399 left: 0; 418 left: 0;
400 .bannerLeft { 419 .bannerLeft {
401 font-size: 36rpx; 420 font-size: 36rpx;
402 display: flex; 421 display: flex;
403 flex-direction: column; 422 flex-direction: column;
404 justify-content: center; 423 justify-content: center;
405 align-items: center; 424 align-items: center;
406 .T2 { 425 .T2 {
407 font-size: 24rpx; 426 font-size: 24rpx;
408 } 427 }
409 } 428 }
410 image { 429 image {
411 height: 56rpx; 430 height: 56rpx;
412 width: 72rpx; 431 width: 72rpx;
413 } 432 }
414 } 433 }
415 434
416 .order-user { 435 .order-user {
417 height: 228rpx; 436 height: 228rpx;
418 background: #ffffff; 437 background: #ffffff;
419 border-radius: 14rpx; 438 border-radius: 14rpx;
420 margin: 0 auto; 439 margin: 0 auto;
421 margin-top: 20rpx; 440 margin-top: 20rpx;
422 margin-bottom: 20rpx; 441 margin-bottom: 20rpx;
423 .order-user-head { 442 .order-user-head {
424 display: flex; 443 display: flex;
425 height: 108rpx; 444 height: 108rpx;
426 align-items: center; 445 align-items: center;
427 margin-left: 126rpx; 446 margin-left: 126rpx;
428 .p1 { 447 .p1 {
429 // font-family: PingFangSC-Regular; 448 // font-family: PingFangSC-Regular;
430 font-size: 14px; 449 font-size: 14px;
431 color: #333333; 450 color: #333333;
432 letter-spacing: -0.26px; 451 letter-spacing: -0.26px;
433 margin-right: 20rpx; 452 margin-right: 20rpx;
434 } 453 }
435 .p2 { 454 .p2 {
436 // font-family: PingFangSC-Regular; 455 // font-family: PingFangSC-Regular;
437 font-size: 14px; 456 font-size: 14px;
438 color: #999999; 457 color: #999999;
439 letter-spacing: -0.26px; 458 letter-spacing: -0.26px;
440 } 459 }
441 } 460 }
442 .order-user-body { 461 .order-user-body {
443 display: flex; 462 display: flex;
444 width: 100%; 463 width: 100%;
445 image { 464 image {
446 width: 24px; 465 width: 24px;
447 height: 26px; 466 height: 26px;
448 margin: 12rpx 32rpx 0 40rpx; 467 margin: 12rpx 32rpx 0 40rpx;
449 } 468 }
450 .p3 { 469 .p3 {
451 // font-family: PingFangSC-Semibold; 470 // font-family: PingFangSC-Semibold;
452 font-size: 14px; 471 font-size: 14px;
453 color: #333333; 472 color: #333333;
454 letter-spacing: -0.26px; 473 letter-spacing: -0.26px;
455 } 474 }
456 } 475 }
457 } 476 }
458 477
459 .order-info { 478 .order-info {
460 background-color: #fff; 479 background-color: #fff;
461 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 480 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
462 border-radius: 16rpx; 481 border-radius: 16rpx;
463 margin: 0 auto; 482 margin: 0 auto;
464 view { 483 view {
465 margin-left: 40rpx; 484 margin-left: 40rpx;
466 } 485 }
467 text { 486 text {
468 font-size: 14px; 487 font-size: 14px;
469 } 488 }
470 .order-info-head { 489 .order-info-head {
471 display: flex; 490 display: flex;
472 padding-top: 40rpx; 491 padding-top: 40rpx;
473 image { 492 image {
474 height: 188rpx; 493 height: 188rpx;
475 width: 188rpx; 494 width: 188rpx;
476 } 495 }
477 .order-info-head-r { 496 .order-info-head-r {
478 margin: 0; 497 margin: 0;
479 width: 368rpx; 498 width: 368rpx;
480 margin-left: 24rpx; 499 margin-left: 24rpx;
481 // margin-top: 40rpx; 500 // margin-top: 40rpx;
482 text { 501 text {
483 display: block; 502 display: block;
484 } 503 }
485 // .arrow{ 504 // .arrow{
486 // width: 0; 505 // width: 0;
487 // height: 0; 506 // height: 0;
488 // border-left: 5px transparent; 507 // border-left: 5px transparent;
489 // border-right: 5px transparent; 508 // border-right: 5px transparent;
490 // border-top: 5px #979797; 509 // border-top: 5px #979797;
491 // border-bottom: 0 transparent; 510 // border-bottom: 0 transparent;
492 // border-style: solid; 511 // border-style: solid;
493 // position: relative; 512 // position: relative;
494 // // transform: scaleY(-1); 513 // // transform: scaleY(-1);
495 // } 514 // }
496 // .arrow::after{ 515 // .arrow::after{
497 // content: ''; 516 // content: '';
498 // position: absolute; 517 // position: absolute;
499 // top: -6.5px; 518 // top: -6.5px;
500 // left: -5px; 519 // left: -5px;
501 // border-left: 5px transparent; 520 // border-left: 5px transparent;
502 // border-right: 5px transparent; 521 // border-right: 5px transparent;
503 // border-top: 5px #FFFFFF; 522 // border-top: 5px #FFFFFF;
504 // border-bottom: 0 transparent; 523 // border-bottom: 0 transparent;
505 // border-style: solid; 524 // border-style: solid;
506 // } 525 // }
507 .p1 { 526 .p1 {
508 min-height: 40px; 527 min-height: 40px;
509 // font-family: PingFangSC-Regular; 528 // font-family: PingFangSC-Regular;
510 font-size: 14px; 529 font-size: 14px;
511 color: #333333; 530 color: #333333;
512 letter-spacing: -0.26px; 531 letter-spacing: -0.26px;
513 line-height: 18px; 532 line-height: 18px;
514 // line-height: 20px; 533 // line-height: 20px;
515 } 534 }
516 .p2 { 535 .p2 {
517 height: 34px; 536 height: 34px;
518 padding: 1px 0 3px 0; 537 padding: 1px 0 3px 0;
519 // font-family: PingFangSC-Regular; 538 // font-family: PingFangSC-Regular;
520 font-size: 12px; 539 font-size: 12px;
521 color: #999999; 540 color: #999999;
522 letter-spacing: -0.23px; 541 letter-spacing: -0.23px;
523 } 542 }
524 .infoText-bottom { 543 .infoText-bottom {
525 display: flex; 544 display: flex;
526 flex-direction: row; 545 flex-direction: row;
527 justify-content: flex-start; 546 justify-content: flex-start;
528 align-items: center; 547 align-items: center;
529 width: 100%; 548 width: 100%;
530 margin-left: 0; 549 margin-left: 0;
531 .markPrice { 550 .markPrice {
532 font-size: 14px; 551 font-size: 14px;
533 color: #ff6b4a; 552 color: #ff6b4a;
534 margin-right: 20rpx; 553 margin-right: 20rpx;
535 margin-left: 0rpx; 554 margin-left: 0rpx;
536 } 555 }
537 .buy-num { 556 .buy-num {
538 font-size: 12px; 557 font-size: 12px;
539 color: #999999; 558 color: #999999;
540 } 559 }
541 } 560 }
542 } 561 }
543 } 562 }
544 // .order-info-goodsnum { 563 // .order-info-goodsnum {
545 // display: flex; 564 // display: flex;
546 // align-items: center; 565 // align-items: center;
547 // justify-content: flex-end; 566 // justify-content: flex-end;
548 // text { 567 // text {
549 // margin-right: 44rpx; 568 // margin-right: 44rpx;
550 // // ont-family: PingFangSC-Regular; 569 // // ont-family: PingFangSC-Regular;
551 // font-size: 12px; 570 // font-size: 12px;
552 // color: #999999; 571 // color: #999999;
553 // letter-spacing: -0.23px; 572 // letter-spacing: -0.23px;
554 // } 573 // }
555 // } 574 // }
556 .order-info-freight { 575 .order-info-freight {
557 display: block; 576 display: block;
558 margin-left: 40rpx; 577 margin-left: 40rpx;
559 margin-top: 22rpx; 578 margin-top: 22rpx;
560 .p1 { 579 .p1 {
561 // font-family: PingFangSC-Regular; 580 // font-family: PingFangSC-Regular;
562 font-size: 14px; 581 font-size: 14px;
563 color: #333333; 582 color: #333333;
564 letter-spacing: -0.26px; 583 letter-spacing: -0.26px;
565 line-height: 18px; 584 line-height: 18px;
566 margin-right: 24px; 585 margin-right: 24px;
567 } 586 }
568 .p2 { 587 .p2 {
569 // font-family: PingFangSC-Regular; 588 // font-family: PingFangSC-Regular;
570 font-size: 14px; 589 font-size: 14px;
571 color: #ff6b4a; 590 color: #ff6b4a;
572 letter-spacing: -0.26px; 591 letter-spacing: -0.26px;
573 } 592 }
574 } 593 }
575 .order-info-discount { 594 .order-info-discount {
576 display: block; 595 display: block;
577 margin-left: 40rpx; 596 margin-left: 40rpx;
578 margin-top: 24rpx; 597 margin-top: 24rpx;
579 .p1 { 598 .p1 {
580 // font-family: PingFangSC-Regular; 599 // font-family: PingFangSC-Regular;
581 font-size: 14px; 600 font-size: 14px;
582 color: #333333; 601 color: #333333;
583 letter-spacing: -0.26px; 602 letter-spacing: -0.26px;
584 line-height: 18px; 603 line-height: 18px;
585 margin-right: 24px; 604 margin-right: 24px;
586 } 605 }
587 .p2 { 606 .p2 {
588 // font-family: PingFangSC-Regular; 607 // font-family: PingFangSC-Regular;
589 font-size: 14px; 608 font-size: 14px;
590 color: #ff6b4a; 609 color: #ff6b4a;
591 letter-spacing: -0.26px; 610 letter-spacing: -0.26px;
592 } 611 }
593 } 612 }
594 .order-info-price { 613 .order-info-price {
595 display: block; 614 display: block;
596 margin-left: 40rpx; 615 margin-left: 40rpx;
597 margin-top: 24rpx; 616 margin-top: 24rpx;
598 .p1 { 617 .p1 {
599 // font-family: PingFangSC-Semibold; 618 // font-family: PingFangSC-Semibold;
600 font-size: 14px; 619 font-size: 14px;
601 color: #333333; 620 color: #333333;
602 letter-spacing: -0.26px; 621 letter-spacing: -0.26px;
603 line-height: 18px; 622 line-height: 18px;
604 margin-right: 24px; 623 margin-right: 24px;
605 } 624 }
606 .p2 { 625 .p2 {
607 // font-family: PingFangSC-Semibold; 626 // font-family: PingFangSC-Semibold;
608 font-size: 14px; 627 font-size: 14px;
609 color: #ff6b4a; 628 color: #ff6b4a;
610 letter-spacing: -0.26px; 629 letter-spacing: -0.26px;
611 } 630 }
612 } 631 }
613 .order-info-num { 632 .order-info-num {
614 display: block; 633 display: block;
615 margin-left: 40rpx; 634 margin-left: 40rpx;
616 margin-top: 44rpx; 635 margin-top: 44rpx;
617 text { 636 text {
618 // font-family: PingFangSC-Regular; 637 // font-family: PingFangSC-Regular;
619 font-size: 12px; 638 font-size: 12px;
620 color: #999999; 639 color: #999999;
621 letter-spacing: -0.23px; 640 letter-spacing: -0.23px;
622 } 641 }
623 } 642 }
624 .order-info-time { 643 .order-info-time {
625 display: block; 644 display: block;
626 margin: 8rpx 0 48rpx 40rpx; 645 margin: 8rpx 0 48rpx 40rpx;
627 text { 646 text {
628 // font-family: PingFangSC-Regular; 647 // font-family: PingFangSC-Regular;
629 font-size: 12px; 648 font-size: 12px;
630 color: #999999; 649 color: #999999;
631 letter-spacing: -0.23px; 650 letter-spacing: -0.23px;
632 } 651 }
633 } 652 }
634 .order-info-hr { 653 .order-info-hr {
635 width: 520rpx; 654 width: 520rpx;
636 height: 1px; 655 height: 1px;
637 background-color: #e9e9e9; 656 background-color: #e9e9e9;
638 margin-bottom: 20rpx; 657 margin-bottom: 20rpx;
639 } 658 }
640 .order-info-contact { 659 .order-info-contact {
641 display: flex; 660 display: flex;
642 padding-bottom: 28rpx; 661 padding-bottom: 28rpx;
643 image { 662 image {
644 width: 19px; 663 width: 19px;
645 height: 16px; 664 height: 16px;
646 } 665 }
647 text { 666 text {
648 // font-family: PingFangSC-Regular; 667 // font-family: PingFangSC-Regular;
649 margin-left: 20rpx; 668 margin-left: 20rpx;
650 font-size: 14px; 669 font-size: 14px;
651 color: #333333; 670 color: #333333;
652 letter-spacing: -0.26px; 671 letter-spacing: -0.26px;
653 line-height: 18px; 672 line-height: 18px;
654 } 673 }
655 } 674 }
656 } 675 }
657 676
658 .order-confim { 677 .order-confim {
659 display: flex; 678 display: flex;
660 align-items: center; 679 align-items: center;
661 justify-content: flex-end; 680 justify-content: flex-end;
662 // z-index: 999; 681 // z-index: 999;
663 width: 100%; 682 width: 100%;
664 height: 112rpx; 683 height: 112rpx;
665 position: fixed; 684 position: fixed;
666 bottom: 0; 685 bottom: 0;
667 background: #ffffff; 686 background: #ffffff;
668 button { 687 button {
669 width: 204rpx; 688 width: 204rpx;
670 height: 80rpx; 689 height: 80rpx;
671 border: 1px solid #ff6b4a; 690 border: 1px solid #ff6b4a;
672 border-radius: 40rpx; 691 border-radius: 40rpx;
673 font-size: 32rpx; 692 font-size: 32rpx;
674 letter-spacing: -0.3px; 693 letter-spacing: -0.3px;
675 margin-right: 0; 694 margin-right: 0;
676 } 695 }
677 .b1 { 696 .b1 {
678 // font-family: PingFangSC-Regular; 697 // font-family: PingFangSC-Regular;
679 color: #ff6b4a; 698 color: #ff6b4a;
680 background-color: #ffffff; 699 background-color: #ffffff;
681 } 700 }
682 .b2 { 701 .b2 {
683 // font-family: PingFangSC-Regular; 702 // font-family: PingFangSC-Regular;
684 background-color: #ff6b4a; 703 background-color: #ff6b4a;
685 color: #ffffff; 704 color: #ffffff;
686 margin: 0 26rpx 0 20rpx; 705 margin: 0 26rpx 0 20rpx;
687 } 706 }
688 } 707 }
689 </style> 708 </style>
690 709
src/store/modules/statusConfirm.js
Diff comments   View file @34703a7
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 statusConfirm 5 statusConfirm
6 } = urlAlias; 6 } = urlAlias;
7 7
8 // const openid = uni.getStorageSync('openid'); 8 // const openid = uni.getStorageSync('openid');
9 const actions = { 9 const actions = {
10 confirm({ commit }, param) { 10 confirm({ commit }, param) {
11 request({ 11 request({
12 url: statusConfirm, 12 url: statusConfirm,
13 data: param|| { }, 13 data: param|| { },
14 success: (res) => { 14 success: (res) => {
15 console.log(res.data); 15 console.log(res.data);
16 if(res.data.code === 1){ 16
17 uni.showToast({
18 title:'已确认',
19 mask:true,
20 duration:1500,
21 icon:'success'
22 })
23 }else{
24 uni-uni.showToast({
25 title: '服务器错误，确认失败!',
26 mask:true
27 });
28 }
29 }, 17 },
30 }) 18 })
31 } 19 }
32 } 20 }
33 21
34 export default { 22 export default {
35 namespaced: true, 23 namespaced: true,
36 actions, 24 actions,
37 } 25 }