Commit 9a8f39ae36b7710f3efff4550ebe9c1bfe9d68d3
1 parent
600d4968f3
Exists in
master
订单
Showing
28 changed files
with
820 additions
and
302 deletions
Show diff stats
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages" : [ | 2 | "pages" : [ |
| 3 | { | 3 | { |
| 4 | "path" : "pages/index/index", | 4 | "path" : "pages/user/user", |
| 5 | "style" : { | 5 | "style" : { |
| 6 | "navigationBarTitleText" : "商城一览" | 6 | "navigationBarTitleText" : "我的" |
| 7 | } | 7 | } |
| 8 | }, | 8 | }, |
| 9 | { | 9 | { |
| 10 | "path" : "pages/myOrder/myOrder", | 10 | "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", |
| 11 | "style" : { | 11 | "style" : { |
| 12 | "navigationBarTitleText" : "我的订单" | 12 | "navigationBarTitleText" : "镜片名称名称" |
| 13 | } | 13 | } |
| 14 | }, | 14 | }, |
| 15 | { | 15 | { |
| 16 | "path" : "pages/cart/cart", | 16 | "path" : "pages/purchaseLenses/purchaseLenses", |
| 17 | "style" : { | 17 | "style" : { |
| 18 | "navigationBarTitleText" : "购物车" | 18 | "navigationBarTitleText" : "产品选购" |
| 19 | } | 19 | } |
| 20 | }, | 20 | }, |
| 21 | { | 21 | { |
| 22 | "path" : "pages/frameDetail/frameDetail", | 22 | "path" : "pages/lensDetails/lensDetails", |
| 23 | "style" : { | 23 | "style" : { |
| 24 | "navigationBarTitleText" : "产品详情" | 24 | "navigationBarTitleText" : "产品详情" |
| 25 | } | 25 | } |
| 26 | }, | 26 | }, |
| 27 | { | 27 | { |
| 28 | "path" : "pages/lensDetails/lensDetails", | 28 | "path" : "pages/myOrderPaying/myOrderPaying", |
| 29 | "style" : { | 29 | "style" : { |
| 30 | "navigationBarTitleText" : "产品详情" | 30 | "navigationBarTitleText" : "我的订单" |
| 31 | } | 31 | } |
| 32 | }, | 32 | }, |
| 33 | { | 33 | { |
| 34 | "path" : "pages/purchaseLenses/purchaseLenses", | 34 | "path" : "pages/myOrder/myOrder", |
| 35 | "style" : { | 35 | "style" : { |
| 36 | "navigationBarTitleText" : "产品选购" | 36 | "navigationBarTitleText" : "我的订单" |
| 37 | } | 37 | } |
| 38 | }, | 38 | }, |
| 39 | { | 39 | { |
| 40 | "path" : "pages/refundProgress/refundProgress", | 40 | "path" : "pages/index/index", |
| 41 | "style" : { | 41 | "style" : { |
| 42 | "navigationBarTitleText" : "申请退款" | 42 | "navigationBarTitleText" : "商城一览" |
| 43 | } | 43 | } |
| 44 | }, | 44 | }, |
| 45 | { | 45 | { |
| 46 | "path" : "pages/addAddress/addAddress", | 46 | "path" : "pages/cart/cart", |
| 47 | "style" : { | 47 | "style" : { |
| 48 | "navigationBarTitleText" : "新增地址" | 48 | "navigationBarTitleText" : "购物车" |
| 49 | } | 49 | } |
| 50 | }, | 50 | }, |
| 51 | { | 51 | { |
| 52 | "path" : "pages/confirmOrder/confirmOrder", | 52 | "path" : "pages/frameDetail/frameDetail", |
| 53 | "style" : { | 53 | "style" : { |
| 54 | "navigationBarTitleText" : "确认订单" | 54 | "navigationBarTitleText" : "产品详情" |
| 55 | } | 55 | } |
| 56 | }, | 56 | }, |
| 57 | { | 57 | { |
| 58 | "path" : "pages/user/user", | 58 | "path" : "pages/refundProgress/refundProgress", |
| 59 | "style" : { | 59 | "style" : { |
| 60 | "navigationBarTitleText" : "我的" | 60 | "navigationBarTitleText" : "申请退款" |
| 61 | } | 61 | } |
| 62 | }, | 62 | }, |
| 63 | { | 63 | { |
| 64 | "path" : "pages/refundment/refundWays" | 64 | "path" : "pages/addAddress/addAddress", |
| 65 | "style" : { | ||
| 66 | "navigationBarTitleText" : "新增地址" | ||
| 67 | } | ||
| 65 | }, | 68 | }, |
| 66 | { | 69 | { |
| 67 | "path" : "pages/refundment/refundment" | 70 | "path" : "pages/confirmOrder/confirmOrder", |
| 71 | "style" : { | ||
| 72 | "navigationBarTitleText" : "确认订单" | ||
| 73 | } | ||
| 68 | }, | 74 | }, |
| 69 | { | 75 | { |
| 70 | "path" : "pages/predelivery/predelivery" | 76 | "path" : "pages/refundment/refundWays", |
| 77 | "style" : { | ||
| 78 | "navigationBarTitleText" : "退款方式" | ||
| 79 | } | ||
| 71 | }, | 80 | }, |
| 72 | { | 81 | { |
| 73 | "path" : "pages/customerService/customerService", | 82 | "path" : "pages/refundment/refundment", |
| 74 | "style" : { | 83 | "style" : { |
| 75 | "navigationBarTitleText" : "在线客服" | 84 | "navigationBarTitleText" : "申请退款" |
| 76 | } | 85 | } |
| 77 | }, | 86 | }, |
| 78 | { | 87 | { |
| 79 | "path" : "pages/myOrderPaying/myOrderPaying", | 88 | "path" : "pages/predelivery/predelivery", |
| 80 | "style" : { | 89 | "style" : { |
| 81 | "navigationBarTitleText" : "我的订单" | 90 | "navigationBarTitleText" : "待发货" |
| 82 | } | 91 | } |
| 83 | }, | 92 | }, |
| 84 | { | 93 | { |
| 85 | "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", | 94 | "path" : "pages/customerService/customerService", |
| 86 | "style" : { | 95 | "style" : { |
| 87 | "navigationBarTitleText" : "镜片名称名称" | 96 | "navigationBarTitleText" : "在线客服" |
| 88 | } | 97 | } |
| 89 | }, | 98 | }, |
| 90 | { | 99 | { |
| 91 | "path" : "pages/detailStandard/detailStandard_sun", | 100 | "path" : "pages/detailStandard/detailStandard_sun", |
| 92 | "style" : { | 101 | "style" : { |
| 93 | "navigationBarTitleText" : "太阳镜选购页" | 102 | "navigationBarTitleText" : "太阳镜选购页" |
| 94 | } | 103 | } |
| 95 | }, | 104 | }, |
| 96 | { | 105 | { |
| 97 | "path" : "pages/detailStandard/detailStandard_k", | 106 | "path" : "pages/detailStandard/detailStandard_k", |
| 98 | "style" : { | 107 | "style" : { |
| 99 | "navigationBarTitleText" : "镜框选购页" | 108 | "navigationBarTitleText" : "镜框选购页" |
| 100 | } | 109 | } |
| 101 | } | 110 | } |
| 111 | ,{ | ||
| 112 | "path" : "pages/addOpticsData/addOpticsData", | ||
| 113 | "style" : { | ||
| 114 | "navigationBarTitleText" : "验光数据"} | ||
| 115 | } | ||
| 102 | ], | 116 | ], |
| 103 | "globalStyle" : { | 117 | "globalStyle" : { |
| 104 | "navigationBarTextStyle" : "black", | 118 | "navigationBarTextStyle" : "black", |
| 105 | "navigationBarTitleText" : "uni-app", | 119 | "navigationBarTitleText" : "uni-app", |
| 106 | "navigationBarBackgroundColor" : "#F8F8F8", | 120 | "navigationBarBackgroundColor" : "#F8F8F8", |
| 107 | "backgroundColor" : "#F8F8F8" | 121 | "backgroundColor" : "#F8F8F8" |
| 108 | }, | 122 | }, |
| 109 | "tabBar" : { | 123 | "tabBar" : { |
| 110 | "color" : "#C0C4CC", | 124 | "color" : "#C0C4CC", |
| 111 | "selectedColor" : "#fa436a", | 125 | "selectedColor" : "#fa436a", |
| 112 | "borderStyle" : "black", | 126 | "borderStyle" : "black", |
| 113 | "backgroundColor" : "#ffffff", | 127 | "backgroundColor" : "#ffffff", |
| 114 | "list" : [ | 128 | "list" : [ |
| 115 | { | 129 | { |
| 116 | "pagePath" : "pages/index/index", | 130 | "pagePath" : "pages/index/index", |
| 117 | "iconPath" : "static/tab-home.png", | 131 | "iconPath" : "static/tab-home.png", |
| 118 | "selectedIconPath" : "static/tab-home-current.png", | 132 | "selectedIconPath" : "static/tab-home-current.png", |
| 119 | "text" : "首页" | 133 | "text" : "首页" |
| 120 | }, | 134 | }, |
| 121 | { | 135 | { |
| 122 | "pagePath" : "pages/cart/cart", | 136 | "pagePath" : "pages/cart/cart", |
| 123 | "iconPath" : "static/tab-cart.png", | 137 | "iconPath" : "static/tab-cart.png", |
| 124 | "selectedIconPath" : "static/tab-cart-current.png", | 138 | "selectedIconPath" : "static/tab-cart-current.png", |
| 125 | "text" : "购物车" | 139 | "text" : "购物车" |
| 126 | }, | 140 | }, |
| 127 | { | 141 | { |
| 128 | "pagePath" : "pages/user/user", | 142 | "pagePath" : "pages/user/user", |
| 129 | "iconPath" : "static/tab-my.png", | 143 | "iconPath" : "static/tab-my.png", |
| 130 | "selectedIconPath" : "static/tab-my-current.png", | 144 | "selectedIconPath" : "static/tab-my-current.png", |
| 131 | "text" : "我的" | 145 | "text" : "我的" |
| 132 | } | 146 | } |
| 133 | ] | 147 | ] |
| 134 | }, | 148 | }, |
| 135 | "condition" : { | 149 | "condition" : { |
| 136 | //模式配置，仅开发期间生效 | 150 | //模式配置，仅开发期间生效 |
| 137 | "current" : 0, //当前激活的模式(list 的索引项) | 151 | "current" : 0, //当前激活的模式(list 的索引项) |
| 138 | "list" : [ | 152 | "list" : [ |
| 139 | { | 153 | { |
| 140 | "name" : "", //模式名称 | 154 | "name" : "", //模式名称 |
| 141 | "path" : "", //启动页面，必选 | 155 | "path" : "", //启动页面，必选 |
| 142 | "query" : "" //启动参数，在页面的onLoad函数里面得到 | 156 | "query" : "" //启动参数，在页面的onLoad函数里面得到 |
| 143 | } | 157 | } |
| 144 | ] | 158 | ] |
| 145 | } | 159 | } |
| 146 | } | 160 | } |
| 147 | 161 |
src/pages/addOpticsData/addOpticsData.vue
| File was created | 1 | <template> | |
| 2 | <view> | ||
| 3 | |||
| 4 | </view> | ||
| 5 | </template> | ||
| 6 | |||
| 7 | <script> | ||
| 8 | export default { | ||
| 9 | data() { | ||
| 10 | return { | ||
| 11 | |||
| 12 | }; | ||
| 13 | } | ||
| 14 | } | ||
| 15 | </script> | ||
| 16 | |||
| 17 | <style lang="scss"> | ||
| 18 | |||
| 19 | </style> | ||
| 20 |
src/pages/myOrder/components/OrderCard.vue
| 1 | <template> | 1 | <template> |
| 2 | <view> | 2 | <view> |
| 3 | <view class="card" v-if="current === order.orderType" > | 3 | <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> |
| 4 | <view class="cardHeader"> | 4 | <view class="cardHeader"> |
| 5 | <text class="orderId">订单号：{{order.orderId}}</text> | 5 | <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> |
| 6 | <text class="orderType" v-if="order.orderType===1">待付款</text> | 6 | <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> |
| 7 | <text class="orderType" v-if="order.orderType===2">待发货</text> | 7 | <text class="orderType" v-if="status=='0'">待付款</text> |
| 8 | <text class="orderType" v-if="order.orderType === 3">待收货</text> | 8 | <text class="orderType" v-if="status=='1'">待收货</text> |
| 9 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> | 9 | <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> |
| 10 | <text class="orderType" v-if="order.orderType === 5">已完成</text> | 10 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="orderCardInfo"> | 12 | <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> |
| 13 | <image :src="order.img" mode="aspectFill"></image> | 13 | <image :src="orderInfo.imgUrl" mode="aspectFill"></image> |
| 14 | <view class="infoText"> | 14 | <view class="infoText"> |
| 15 | <view class="orderName">{{order.name}}</view> | 15 | <view class="orderName">{{orderInfo.p_name}}</view> |
| 16 | <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> | 16 | <view class="orderDescrib">{{orderInfo.p_name}}</view> |
| 17 | <view class="infoText-bottom"> | 17 | <view class="infoText-bottom"> |
| 18 | <view class="markPrice">{{order.price}}</view> | 18 | <view class="markPrice">{{orderInfo.nowPrice}}</view> |
| 19 | <view class="buy-num">X{{order.buyNum}}</view> | 19 | <view class="buy-num">X {{orderInfo.num}}</view> |
| 20 | </view> | 20 | </view> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> | 23 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> |
| 24 | <view class="btns" v-if="order.orderType === 1"> | 24 | <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> |
| 25 | <view class="btn-type1">申请退款</view> | 25 | <view class="btns" v-if="status == '0'"> |
| 26 | <view class="btn-type1" >取消订单</view> | ||
| 26 | <view class="btn-type2">去支付</view> | 27 | <view class="btn-type2">去支付</view> |
| 27 | </view> | 28 | </view> |
| 28 | <view class="btns" v-if="order.orderType === 0"> | 29 | <view class="btns" v-if="status == '1'"> |
| 29 | <view class="btn-type1">再次购买</view> | 30 | <view class="btn-type2">确认收货</view> |
| 30 | </view> | 31 | </view> |
| 32 | <view class="btns" v-if="status == '2'"> | ||
| 33 | <view class="btn-type2">再次购买</view> | ||
| 34 | </view> | ||
| 35 | <!-- <view class="btns" v-if="status == '3'"> | ||
| 36 | <view class="btn-type2">再次购买</view> | ||
| 37 | </view> --> | ||
| 31 | </view> | 38 | </view> |
| 32 | <view class="card" v-if="current === 0" > | 39 | <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> |
| 33 | <view class="cardHeader"> | 40 | <view class="cardHeader"> |
| 34 | <text class="orderId">订单号：{{order.orderId}}</text> | 41 | <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> |
| 35 | <text class="orderType" v-if="order.orderType===1">待付款</text> | 42 | <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> |
| 36 | <text class="orderType" v-if="order.orderType===2">待发货</text> | 43 | <text class="orderType" v-if="status=='0'">待付款</text> |
| 37 | <text class="orderType" v-if="order.orderType === 3">待收货</text> | 44 | <text class="orderType" v-if="status=='1'">待收货</text> |
| 38 | <text class="orderType" v-if="order.orderType === 4">退款售后</text> | 45 | <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> |
| 46 | <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> | ||
| 39 | </view> | 47 | </view> |
| 40 | <view class="orderCardInfo"> | 48 | <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> |
| 41 | <image :src="order.img" mode="aspectFill"></image> | 49 | <image :src="orderInfo.imgUrl" mode="aspectFill"></image> |
| 42 | <view class="infoText"> | 50 | <view class="infoText"> |
| 43 | <view class="orderName">{{order.name}}</view> | 51 | <view class="orderName">{{orderInfo.p_name}}</view> |
| 44 | <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> | 52 | <view class="orderDescrib">{{orderInfo.p_name}}</view> |
| 45 | <view class="infoText-bottom"> | 53 | <view class="infoText-bottom"> |
| 46 | <view class="markPrice">{{order.price}}</view> | 54 | <view class="markPrice">{{orderInfo.nowPrice}}</view> |
| 47 | <view class="buy-num">X{{order.buyNum}}</view> | 55 | <view class="buy-num">X {{orderInfo.num}}</view> |
| 48 | </view> | 56 | </view> |
| 49 | </view> | 57 | </view> |
| 50 | </view> | 58 | </view> |
| 51 | <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> | 59 | <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> |
| 52 | <view class="btns" v-if="order.orderType === 1"> | 60 | <view class="btns" v-if="status == '0'"> |
| 53 | <view class="btn-type1" @click="toRefundment">申请退款</view> | 61 | <view class="btn-type1" >取消订单</view> |
| 54 | <view class="btn-type2">去支付</view> | 62 | <view class="btn-type2">去支付</view> |
| 55 | </view> | 63 | </view> |
| 56 | <view class="btns" v-if="order.orderType === 0"> | 64 | <view class="btns" v-if="status == '1'"> |
| 57 | <view class="btn-type1">再次购买</view> | 65 | <view class="btn-type2">确认收货</view> |
| 66 | </view> | ||
| 67 | <view class="btns" v-if="status == '2'"> | ||
| 68 | <view class="btn-type2">再次购买</view> | ||
| 58 | </view> | 69 | </view> |
| 70 | <!-- <view class="btns" v-if="status == '3'"> | ||
| 71 | <view class="btn-type2">再次购买</view> | ||
| 72 | </view> --> | ||
| 59 | </view> | 73 | </view> |
| 60 | </view> | 74 | </view> |
| 61 | </template> | 75 | </template> |
| 62 | 76 | ||
| 63 | <script> | 77 | <script> |
| 64 | export default { | 78 | export default { |
| 65 | props: { | 79 | props: { |
| 66 | /** | 80 | /** |
| 67 | * 订单数据 | 81 | * 订单数据 |
| 68 | */ | 82 | */ |
| 69 | order: { | 83 | order: { |
| 70 | orderId: Number, | 84 | // orderId: Number, |
| 71 | img: String, | 85 | // img: String, |
| 72 | name: String, | 86 | // name: String, |
| 73 | originCost:String, | 87 | // originCost:String, |
| 74 | price: String, | 88 | // price: String, |
| 75 | orderType:Number, | 89 | // orderType:Number, |
| 76 | buyNum:Number | 90 | // buyNum:Number, |
| 91 | finished_time: null, | ||
| 92 | is_refound: String, | ||
| 93 | mch_id: String, | ||
| 94 | money_of_dcw: String, | ||
| 95 | money_of_partner: String, | ||
| 96 | money_of_shop: String, | ||
| 97 | orderJudge: Boolean, | ||
| 98 | order_info: { | ||
| 99 | address:{ | ||
| 100 | cityName: String, | ||
| 101 | countyName: String, | ||
| 102 | detailInfo: String, | ||
| 103 | errMsg: String, | ||
| 104 | nationalCode: String, | ||
| 105 | postalCode: String, | ||
| 106 | provinceName: String, | ||
| 107 | telNumber: String, | ||
| 108 | userName: String, | ||
| 109 | }, | ||
| 110 | cartinfo: ["127"], | ||
| 111 | keyname: "330_1588911391", | ||
| 112 | lefttime: Number, | ||
| 113 | list:[ | ||
| 114 | { | ||
| 115 | cart_id: "127", | ||
| 116 | imgUrl: String, | ||
| 117 | img_index_url: null, | ||
| 118 | memo: String, | ||
| 119 | mp_id: String, | ||
| 120 | nowPrice: String, | ||
| 121 | num: String, | ||
| 122 | oldPrice: Number, | ||
| 123 | p_discount: String, | ||
| 124 | p_name: String, | ||
| 125 | p_root_index: String, | ||
| 126 | p_sale_price: String, | ||
| 127 | peopleName: String, | ||
| 128 | pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], | ||
| 129 | pid: String, | ||
| 130 | sk_id: String, | ||
| 131 | } | ||
| 132 | ], | ||
| 133 | orderDesc: String, | ||
| 134 | total_fee: Number, | ||
| 135 | }, | ||
| 136 | partner_uid: String, | ||
| 137 | pay_cate: String, | ||
| 138 | pay_id: String, | ||
| 139 | pay_time: String, | ||
| 140 | pay_wood_desc: String, | ||
| 141 | pay_wood_id: String, | ||
| 142 | prepay_id: String, | ||
| 143 | re_check_staus: String, | ||
| 144 | shopid: String, | ||
| 145 | split_userid: String, | ||
| 146 | status: String, | ||
| 147 | // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 | ||
| 148 | total_fee: String, | ||
| 149 | uid: String, | ||
| 77 | }, | 150 | }, |
| 78 | /** | 151 | /** |
| 79 | * 当前选择 | 152 | * 当前选择 |
| 80 | */ | 153 | */ |
| 81 | current:Number | 154 | current:Number |
| 82 | 155 | ||
| 83 | }, | 156 | }, |
| 84 | onLoad() { | 157 | created() { |
| 85 | // console.log('dd'); | 158 | console.log(this.order); |
| 86 | console.log('order', this.props.order); | 159 | // console.log(this.order.status ); |
| 160 | // console.log(this.current); | ||
| 161 | }, | ||
| 162 | computed:{ | ||
| 163 | status(){ | ||
| 164 | return this.order.status | ||
| 165 | }, | ||
| 166 | orderInfoList(){ | ||
| 167 | return this.order.order_info[0] | ||
| 168 | } | ||
| 87 | }, | 169 | }, |
| 88 | data() { | 170 | data() { |
| 89 | return { | 171 | return { |
| 90 | }; | 172 | }; |
| 91 | }, | 173 | }, |
| 92 | methods:{ | 174 | methods:{ |
| 93 | toRefundment(){ | 175 | toRefundment(){ |
| 94 | uni.navigateTo({ | 176 | uni.navigateTo({ |
| 95 | url: '../refundment/refundment', | 177 | url: '../refundment/refundment', |
| 96 | success: res => {}, | 178 | success: res => {}, |
| 97 | fail: () => {}, | 179 | fail: () => {}, |
| 98 | complete: () => {} | 180 | complete: () => {} |
| 99 | }); | 181 | }); |
| 182 | }, | ||
| 183 | toOrderInfo(status,payId){ | ||
| 184 | console.log(status,payId) | ||
| 185 | switch(status){ | ||
| 186 | // 0待付款 1待收货 2已收货 3 已评价 | ||
| 187 | case '0': | ||
| 188 | uni.navigateTo({ | ||
| 189 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | ||
| 190 | fail(errMsg) { | ||
| 191 | console.log(errMsg) | ||
| 192 | } | ||
| 193 | }) | ||
| 194 | break; | ||
| 195 | case '1': | ||
| 196 | uni.navigateTo({ | ||
| 197 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | ||
| 198 | fail(errMsg) { | ||
| 199 | console.log(errMsg) | ||
| 200 | } | ||
| 201 | }) | ||
| 202 | |||
| 203 | break; | ||
| 204 | case '2 || 3': | ||
| 205 | uni.navigateTo({ | ||
| 206 | url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, | ||
| 207 | fail(errMsg) { | ||
| 208 | console.log(errMsg) | ||
| 209 | } | ||
| 210 | }) | ||
| 211 | |||
| 212 | break; | ||
| 213 | |||
| 214 | |||
| 215 | default: | ||
| 216 | break; | ||
| 217 | |||
| 218 | } | ||
| 100 | } | 219 | } |
| 101 | } | 220 | } |
| 102 | } | 221 | } |
| 103 | </script> | 222 | </script> |
| 104 | 223 | ||
| 105 | <style lang="scss"> | 224 | <style lang="scss"> |
| 106 | .card{ | 225 | .card{ |
| 107 | width: 670rpx; | 226 | width: 670rpx; |
| 108 | height: 478rpx; | 227 | height: 478rpx; |
| 109 | background: #FFFFFF; | 228 | background: #FFFFFF; |
| 110 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | 229 | box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); |
| 111 | border-radius: 8px; | 230 | border-radius: 8px; |
| 112 | border-radius: 8px; | 231 | border-radius: 8px; |
| 113 | margin-top: 20rpx; | 232 | margin-top: 20rpx; |
| 114 | padding: 40rpx; | 233 | padding: 40rpx; |
| 115 | box-sizing: border-box; | 234 | box-sizing: border-box; |
| 116 | .cardHeader{ | 235 | .cardHeader{ |
| 117 | width: 100%; | 236 | width: 100%; |
| 118 | height: 40rpx; | 237 | height: 40rpx; |
| 119 | display: flex; | 238 | display: flex; |
| 120 | justify-content: space-between; | 239 | justify-content: space-between; |
| 121 | align-items: center; | 240 | align-items: center; |
| 122 | .orderId{ | 241 | .orderId{ |
| 123 | font-size: 12px; | 242 | font-size: 12px; |
| 124 | color: #999999; | 243 | color: #999999; |
| 125 | } | 244 | } |
| 126 | .orderType{ | 245 | .orderType{ |
| 127 | font-size: 14px; | 246 | font-size: 14px; |
| 128 | color: #FF6B4A; | 247 | color: #FF6B4A; |
| 129 | } | 248 | } |
| 130 | } | 249 | } |
| 131 | .orderCardInfo{ | 250 | .orderCardInfo{ |
| 132 | width: 100%; | 251 | width: 100%; |
| 133 | height: 188rpx; | 252 | height: 188rpx; |
| 134 | display: flex; | 253 | display: flex; |
| 135 | flex-direction: row; | 254 | flex-direction: row; |
| 136 | justify-content: space-between; | 255 | justify-content: space-between; |
| 137 | align-items: center; | 256 | align-items: center; |
| 138 | margin-top: 40rpx; | 257 | margin-top: 40rpx; |
| 139 | image{ | 258 | image{ |
| 140 | height: 188rpx; | 259 | height: 188rpx; |
| 141 | width: 188rpx; | 260 | width: 188rpx; |
| 142 | margin-right: 24rpx; | 261 | margin-right: 24rpx; |
| 143 | } | 262 | } |
| 144 | .infoText{ | 263 | .infoText{ |
| 145 | display: flex; | 264 | display: flex; |
| 146 | flex-direction: column; | 265 | flex-direction: column; |
| 147 | justify-content: space-between; | 266 | justify-content: space-between; |
| 148 | align-items: flex-start; | 267 | align-items: flex-start; |
| 149 | height: 188rpx; | 268 | height: 188rpx; |
| 269 | width: 368rpx; | ||
| 150 | } | 270 | } |
| 151 | .orderName{ | 271 | .orderName{ |
| 152 | font-size: 14px; | 272 | font-size: 14px; |
| 153 | color: #333333; | 273 | color: #333333; |
| 274 | display: -webkit-box; | ||
| 275 | overflow: hidden; | ||
| 276 | -webkit-box-orient: vertical; | ||
| 277 | -webkit-line-clamp: 2; | ||
| 154 | } | 278 | } |
| 155 | .orderDescrib{ | 279 | .orderDescrib{ |
| 156 | font-size: 12px; | 280 | font-size: 12px; |
| 157 | color: #999999; | 281 | color: #999999; |
| 282 | display: -webkit-box; | ||
| 283 | overflow: hidden; | ||
| 284 | -webkit-box-orient: vertical; | ||
| 285 | -webkit-line-clamp: 2; | ||
| 158 | } | 286 | } |
| 159 | .infoText-bottom{ | 287 | .infoText-bottom{ |
| 160 | display: flex; | 288 | display: flex; |
| 161 | flex-direction: row; | 289 | flex-direction: row; |
| 162 | justify-content: space-between; | 290 | justify-content: flex-start; |
| 163 | align-items: center; | 291 | align-items: center; |
| 164 | width: 100%; | 292 | width: 100%; |
| 165 | .markPrice{ | 293 | .markPrice{ |
| 166 | font-size: 14px; | 294 | font-size: 14px; |
| 167 | color: #FF6B4A; | 295 | color: #FF6B4A; |
| 296 | margin-right: 20rpx; | ||
| 168 | } | 297 | } |
| 169 | .buy-num{ | 298 | .buy-num{ |
| 170 | font-size: 12px; | 299 | font-size: 12px; |
| 171 | color: #999999; | 300 | color: #999999; |
| 172 | } | 301 | } |
| 173 | } | 302 | } |
| 174 | } | 303 | } |
| 175 | .payPrice{ | 304 | .payPrice{ |
| 176 | text-align: right; | 305 | text-align: right; |
| 177 | margin: 20rpx 0; | 306 | margin: 20rpx 0; |
| 178 | font-size: 14px; | 307 | font-size: 14px; |
| 179 | color: #333333; | 308 | color: #333333; |
| 180 | .priceNum{ | 309 | .priceNum{ |
| 181 | font-size: 14px; | 310 | font-size: 14px; |
| 182 | color: #FF6B4A; | 311 | color: #FF6B4A; |
| 183 | } | 312 | } |
| 184 | } | 313 | } |
| 185 | .btns{ | 314 | .btns{ |
| 186 | display: flex; | 315 | display: flex; |
| 187 | justify-content: flex-end; | 316 | justify-content: flex-end; |
| 188 | align-items: center; | 317 | align-items: center; |
| 189 | .btn-type1{ | 318 | .btn-type1{ |
| 190 | height: 48rpx; | 319 | height: 48rpx; |
| 191 | width: 156rpx; | 320 | width: 156rpx; |
| 192 | border: 1px solid #FF6B4A; | 321 | border: 1px solid #FF6B4A; |
| 193 | border-radius: 12px; | 322 | border-radius: 12px; |
| 194 | border-radius: 12px; | 323 | border-radius: 12px; |
| 195 | text-align: center; | 324 | text-align: center; |
| 196 | line-height: 48rpx; | 325 | line-height: 48rpx; |
| 197 | font-size: 12px; | 326 | font-size: 12px; |
| 198 | color: #FF6B4A; | 327 | color: #FF6B4A; |
| 199 | } | 328 | } |
| 200 | .btn-type2{ | 329 | .btn-type2{ |
| 201 | height: 48rpx; | 330 | height: 48rpx; |
| 202 | width: 140rpx; | 331 | width: 140rpx; |
| 203 | background: #FF6B4A; | 332 | background: #FF6B4A; |
| 204 | border-radius: 12px; | 333 | border-radius: 12px; |
| 205 | border-radius: 12px; | 334 | border-radius: 12px; |
| 206 | text-align: center; | 335 | text-align: center; |
| 207 | line-height: 48rpx; | 336 | line-height: 48rpx; |
| 208 | font-size: 12px; | 337 | font-size: 12px; |
| 209 | color: #FFFFFF; | 338 | color: #FFFFFF; |
| 210 | margin-left: 20rpx; | 339 | margin-left: 20rpx; |
| 211 | } | 340 | } |
| 212 | } | 341 | } |
| 213 | } | 342 | } |
| 214 | </style> | 343 | </style> |
| 215 | 344 |
src/pages/myOrder/myOrder.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <!-- <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> | 7 | <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> |
| 8 | </view> | 8 | </view> --> |
| 9 | <view class="screenBar"> | 9 | <view class="screenBar"> |
| 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | 10 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
| 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 11 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
| 12 | </view> | 12 | </view> |
| 13 | </view> | 13 | </view> |
| 14 | </view> | 14 | </view> |
| 15 | <view class="orderList" > | 15 | <view class="orderList" > |
| 16 | <view | 16 | <view |
| 17 | v-for="(order) in orderList" | 17 | v-for="(order) in orderList" |
| 18 | :key="order.orderId" | 18 | :key="order.orderId" |
| 19 | > | 19 | > |
| 20 | <OrderCard :order = "order" :current="current"></OrderCard> | 20 | <OrderCard :order = "order" :current="current"></OrderCard> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="footer">已显示全部</view> | 23 | <view class="footer" >没有更多订单了，去商城看看吧~</view> |
| 24 | </view> | 24 | </view> |
| 25 | </template> | 25 | </template> |
| 26 | <script> | 26 | <script> |
| 27 | import OrderCard from './components/OrderCard.vue'; | 27 | import OrderCard from './components/OrderCard.vue'; |
| 28 | import store from '@/store'; | 28 | import store from '@/store'; |
| 29 | 29 | ||
| 30 | export default { | 30 | export default { |
| 31 | components:{ | 31 | components:{ |
| 32 | 'OrderCard': OrderCard | 32 | 'OrderCard': OrderCard |
| 33 | }, | 33 | }, |
| 34 | data() { | 34 | data() { |
| 35 | return { | 35 | return { |
| 36 | //顶部筛选项 | ||
| 36 | screenItems: [ | 37 | screenItems: [ |
| 37 | {current:0,text:'全部'}, | 38 | {current:"10",text:'全部'}, |
| 38 | {current:1,text:'待付款'}, | 39 | {current:"0",text:'待付款'}, |
| 39 | {current:2,text:'待发货'}, | 40 | {current:"1",text:'待收货'}, |
| 40 | {current:3,text:'待收货'}, | 41 | {current:"2",text:'已完成'}, |
| 41 | {current:4,text:'退款售后'}, | 42 | // {current:"3",text:'已评价'}, |
| 43 | // {current:"4",text:'退款'}, | ||
| 42 | ], | 44 | ], |
| 43 | current: 0, | 45 | //当前所在item 默认10-->全部 |
| 44 | //订单数据 | 46 | current: "10", |
| 45 | // orderList:[ | ||
| 46 | // { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, | ||
| 47 | // { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1}, | ||
| 48 | // { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1}, | ||
| 49 | // { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, | ||
| 50 | // { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1}, | ||
| 51 | // { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, | ||
| 52 | // { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1}, | ||
| 53 | // { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}, | ||
| 54 | // { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1} | ||
| 55 | // ], | ||
| 56 | }; | 47 | }; |
| 57 | }, | 48 | }, |
| 58 | 49 | ||
| 59 | onLoad: function() { | 50 | onLoad: function(option) { |
| 51 | //获取订单列表 | ||
| 60 | store.dispatch('myOrder/getList', { | 52 | store.dispatch('myOrder/getList', { |
| 61 | uid: "1", | 53 | uid: "1", |
| 62 | way: "0", | 54 | way: "", |
| 63 | }); | 55 | }); |
| 56 | //从user过来传的status，给current，以显示对应item | ||
| 57 | this.current = option.status | ||
| 64 | }, | 58 | }, |
| 65 | computed: { | 59 | computed: { |
| 66 | orderList() { | 60 | orderList() { |
| 67 | console.log('orderList', this.$store.state.myOrder.orderlist); | 61 | // console.log('orderList', this.$store.state.myOrder.orderList); |
| 68 | return this.$store.state.myOrder.orderlist; | 62 | return this.$store.state.myOrder.orderList; |
| 69 | } | 63 | } |
| 70 | }, | 64 | }, |
| 71 | methods:{ | 65 | methods:{ |
| 66 | //tab点击事件 | ||
| 72 | onClickItem(e) { | 67 | onClickItem(e) { |
| 73 | if (this.current !== e) { | 68 | if (this.current !== e) { |
| 74 | this.current = e; | 69 | this.current = e; |
| 75 | } | 70 | } |
| 76 | } | 71 | } |
| 72 | |||
| 77 | } | 73 | } |
| 78 | } | 74 | } |
| 79 | </script> | 75 | </script> |
| 80 | 76 | ||
| 81 | <style lang="scss"> | 77 | <style lang="scss"> |
| 82 | .content { | 78 | .content { |
| 83 | display: flex; | 79 | display: flex; |
| 84 | flex-direction: column; | 80 | flex-direction: column; |
| 85 | align-items: center; | 81 | align-items: center; |
| 86 | background-color: #F7F6F6; | 82 | background-color: #F7F6F6; |
| 87 | min-height: 100vh; | 83 | min-height: 100vh; |
| 88 | .header{ | 84 | .header{ |
| 89 | background-color: #ffffff; | 85 | background-color: #ffffff; |
| 90 | width: 100%; | 86 | width: 100%; |
| 91 | height: 232rpx; | 87 | // height: 232rpx; |
| 92 | padding: 40rpx 40rpx 36rpx 40rpx; | 88 | padding: 20rpx 40rpx 16rpx 40rpx; |
| 93 | box-sizing: border-box; | 89 | box-sizing: border-box; |
| 94 | position: fixed; | 90 | position: fixed; |
| 95 | top: 0; | 91 | top: 0; |
| 96 | left: 0; | 92 | left: 0; |
| 97 | .searchBar { | 93 | // .searchBar { |
| 98 | width: 670rpx; | 94 | // width: 670rpx; |
| 99 | display: flex; | 95 | // display: flex; |
| 100 | justify-content: center; | 96 | // justify-content: center; |
| 101 | align-items: center; | 97 | // align-items: center; |
| 102 | box-sizing: border-box; | 98 | // box-sizing: border-box; |
| 103 | padding: 0rpx 16rpx; | 99 | // padding: 0rpx 16rpx; |
| 104 | border: 1px solid #FF6B4A; | 100 | // border: 1px solid #FF6B4A; |
| 105 | border-radius: 8rpx; | 101 | // border-radius: 8rpx; |
| 106 | background-color: #ffffff; | 102 | // background-color: #ffffff; |
| 107 | } | 103 | // } |
| 108 | 104 | ||
| 109 | .screenBar{ | 105 | .screenBar{ |
| 110 | width: 670rpx; | 106 | width: 670rpx; |
| 111 | height: 110rpx; | 107 | // height: 110rpx; |
| 108 | height: 70rpx; | ||
| 112 | display: flex; | 109 | display: flex; |
| 113 | flex-direction: row; | 110 | flex-direction: row; |
| 114 | justify-content: space-between; | 111 | justify-content: space-between; |
| 115 | align-items: center; | 112 | align-items: center; |
| 116 | color: #333333; | 113 | color: #333333; |
| 117 | font-size: 32rpx; | 114 | font-size: 32rpx; |
| 118 | } | 115 | } |
| 119 | .screenItem{ | 116 | .screenItem{ |
| 120 | height: 50rpx; | 117 | height: 50rpx; |
| 121 | font-size: 32rpx; | 118 | font-size: 32rpx; |
| 122 | color: #333333; | 119 | color: #333333; |
| 123 | display: flex; | 120 | display: flex; |
| 124 | justify-content: center; | 121 | justify-content: center; |
| 125 | align-items: center; | 122 | align-items: center; |
| 126 | transition:all 0.2s; | 123 | transition:all 0.2s; |
| 127 | } | 124 | } |
| 128 | .active{ | 125 | .active{ |
| 129 | // font-size: 34rpx; | 126 | // font-size: 34rpx; |
| 130 | color: #EC5D3B; | 127 | color: #EC5D3B; |
| 131 | } | 128 | } |
| 132 | .searchIpt { | 129 | .searchIpt { |
| 133 | height: 68rpx; | 130 | height: 68rpx; |
| 134 | width: 670rpx; | 131 | width: 670rpx; |
| 135 | padding: 16rpx; | 132 | padding: 16rpx; |
| 136 | font-size: 28rpx; | 133 | font-size: 28rpx; |
| 137 | box-sizing: border-box; | 134 | box-sizing: border-box; |
| 138 | } | 135 | } |
| 139 | } | 136 | } |
| 140 | .orderList{ | 137 | .orderList{ |
| 141 | margin-top: 232rpx; | 138 | // margin-top: 232rpx; |
| 139 | margin-top: 132rpx; |
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | <!-- 订单待付款 待收货 --> | ||
| 1 | <template> | 2 | <template> |
| 2 | 3 | <view class="content"> | |
| 3 | <view class="content"> | 4 | <!-- 待付款 --> |
| 4 | <view class="order-hr"></view> | 5 | <view class="order-time" v-if="status == '0'"> |
| 5 | <view class="order-time"> | ||
| 6 | <text>请在</text> | 6 | <text>请在</text> |
| 7 | <!-- <text class="p2"></text> --> | ||
| 8 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" | 7 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" |
| 9 | :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> | 8 | :hour="0" :second="getTime" @timeup=timeup ></uni-countdown> |
| 10 | <text>内完成付款</text> | 9 | <text>内完成付款</text> |
| 10 | </view> | ||
| 11 | <!-- 待收货 --> | ||
| 12 | <view class="headerBanner" v-if="status == '1'"> | ||
| 13 | <view class="bannerLeft"> | ||
| 14 | <view class="T1">卖家已发货</view> | ||
| 15 | <view class="T2">还剩 确认收货</view> | ||
| 16 | </view> | ||
| 17 | <image src="../../static/car.png" mode="aspectFill"></image> | ||
| 11 | </view> | 18 | </view> |
| 12 | <view class="order"> | 19 | <view class="order"> |
| 13 | <view class="order-user"> | 20 | <view class="order-user"> |
| 14 | <view class="order-user-head"> | 21 | <view class="order-user-head"> |
| 15 | <text class="p1">钱大大</text> | 22 | <text class="p1">{{orderAddressInfo.userName}}</text> |
| 16 | <text class="p2">18823749843</text> | 23 | <text class="p2">{{orderAddressInfo.telNumber}}</text> |
| 17 | </view> | 24 | </view> |
| 18 | <view class="order-user-body"> | 25 | <view class="order-user-body"> |
| 19 | <image src="../../static/myorder-paying-location.png"></image> | 26 | <image src="../../static/myorder-paying-location.png"></image> |
| 20 | <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> | 27 | <text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text> |
| 21 | </view> | 28 | </view> |
| 22 | </view> | 29 | </view> |
| 23 | <view class="order-info"> | 30 | <view class="order-info"> |
| 24 | <view class="order-info-head"> | 31 | <view class="order-info-head" v-for="(orderInfoListItem,index) in orderInfoList" :key="index" > |
| 25 | <image src="../../static/myorder-paying-pic.png"></image> | 32 | <image :src="orderInfoListItem.imgUrl" mode="aspectFill"></image> |
| 26 | <view class="order-info-head-r"> | 33 | <view class="order-info-head-r"> |
| 27 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> | 34 | <text class="p1">{{orderInfoListItem.p_name}}</text> |
| 28 | <view class="p2" style="margin: 0;"> | 35 | <view class="p2" style="margin: 0;"> |
| 29 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 | 36 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 |
| 30 | <!-- <view class="arrow"></view> --> | 37 | <!-- <view class="arrow"></view> --> |
| 38 | </view> | ||
| 39 | <view class="infoText-bottom"> | ||
| 40 | <view class="markPrice">{{orderInfoListItem.nowPrice}}</view> | ||
| 41 | <view class="buy-num">X {{orderInfoListItem.num}}</view> | ||
| 31 | </view> | 42 | </view> |
| 32 | <text class="p3"><span>￥180</span><span class="p4">X1</span></text> | ||
| 33 | </view> | 43 | </view> |
| 34 | </view> | 44 | </view> |
| 35 | <!-- <view class="order-info-goodsnum"> | 45 | <!-- <view class="order-info-goodsnum"> |
| 36 | <text>X1</text> | 46 | <text>X1</text> |
| 37 | </view> --> | 47 | </view> --> |
| 38 | <text class="order-info-freight"> | 48 | <text class="order-info-freight"> |
| 39 | <text class="p1">运费</text> | 49 | <text class="p1">运费</text> |
| 40 | <text class="p2">0.00</text> | 50 | <text class="p2">{{orderInfo.trans_price}}</text> |
| 41 | </text> | 51 | </text> |
| 42 | <text class="order-info-discount"> | 52 | <text class="order-info-discount"> |
| 43 | <text class="p1">优惠</text> | 53 | <text class="p1">优惠</text> |
| 44 | <text class="p2">-￥70.00</text> | 54 | <text class="p2">-￥{{totalDiscount}}</text> |
| 45 | </text> | 55 | </text> |
| 46 | <text class="order-info-price"> | 56 | <text class="order-info-price"> |
| 47 | <text class="p1">实付</text> | 57 | <text class="p1">实付</text> |
| 48 | <text class="p2">￥110</text> | 58 | <text class="p2">￥{{orderInfo.order_info.total_fee}}</text> |
| 49 | </text> | 59 | </text> |
| 50 | <text class="order-info-num"> | 60 | <text class="order-info-num"> |
| 51 | <text>订单号：203486795859605849</text> | 61 | <text>订单号：{{orderInfo.prepay_id}}</text> |
| 52 | </text> | 62 | </text> |
| 53 | <text class="order-info-time"> | 63 | <text class="order-info-time"> |
| 54 | <text>下单时间：2020-10-22 14:32:42</text> | 64 | <text>下单时间：{{orderInfo.pay_time}}</text> |
| 55 | </text> | 65 | </text> |
| 56 | <view class="order-info-hr"></view> | 66 | <view class="order-info-hr"></view> |
| 57 | <view class="order-info-contact"> | 67 | <view class="order-info-contact"> |
| 58 | <image src="../../static/myorder-paying-contact.png"></image> | 68 | <image src="../../static/myorder-paying-contact.png"></image> |
| 59 | <text>联系客服</text> | 69 | <text>联系客服</text> |
| 60 | </view> | 70 | </view> |
| 61 | </view> | 71 | </view> |
| 62 | </view> | 72 | </view> |
| 63 | <view class="order-confim"> | 73 | <view class="order-confim" v-if="status == '0'"> |
| 64 | <button class="b1">取消订单</button> | 74 | <button class="b1" @click="cancleOrder">取消订单</button> |
| 65 | <button class="b2">立即支付</button> | 75 | <button class="b2" @click="paylog">立即支付</button> |
| 76 | </view> | ||
| 77 | |||
| 78 | <view class="order-confim" v-if="status == '1'"> | ||
| 79 | <!-- <button class="b1">取消订单</button> --> | ||
| 80 | <button class="b2" @click="confirmOrder">确认收货</button> | ||
| 66 | </view> | 81 | </view> |
| 67 | </view> | 82 | </view> |
| 68 | </template> | 83 | </template> |
| 69 | 84 | ||
| 70 | <script> | 85 | <script> |
| 86 | import store from '@/store'; | ||
| 71 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | 87 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' |
| 72 | export default { | 88 | export default { |
| 73 | components: { | 89 | components: { |
| 74 | UniCountdown | 90 | UniCountdown |
| 75 | }, | 91 | }, |
| 76 | data() { | 92 | data() { |
| 77 | return { | 93 | return { |
| 78 | scrollHeight: false, | 94 | // orderInfo:{}, |
| 95 | payId:'', | ||
| 96 | status:'', | ||
| 97 | uid:'', | ||
| 98 | openid:'', | ||
| 99 | lefttime:0, | ||
| 100 | |||
| 79 | } | 101 | } |
| 102 | }, | ||
| 103 | onLoad: function(option) { | ||
| 104 | console.log(option); | ||
| 105 | this.payId = option.payId; | ||
| 106 | this.status = option.status | ||
| 107 | const openid = uni.getStorageSync('openid'); | ||
| 108 | const uid = this.$store.state.user.uid | ||
| 109 | this.uid = uid | ||
| 110 | this.openid = openid | ||
| 111 | store.dispatch('orderRead/getOrderInfo',{ | ||
| 112 | pay_id:this.payId, | ||
| 113 | uid:'1', | ||
| 114 | openid:openid | ||
| 115 | }) | ||
| 116 | |||
| 117 | |||
| 118 | |||
| 119 | // this.orderInfo = this.$store.state.orderRead.orderInfo | ||
| 120 | }, | ||
| 121 | computed: { | ||
| 122 | //获取订单详细信息 | ||
| 123 | orderInfo() { | ||
| 124 | console.log(this.$store.state.orderRead.orderInfo) | ||
| 125 | return this.$store.state.orderRead.orderInfo || {} | ||
| 126 | }, | ||
| 127 | orderInfoList(){ | ||
| 128 | const orderInfoList =this.orderInfo.order_info[0].list | ||
| 129 | return orderInfoList | ||
| 130 | }, | ||
| 131 | //获取订单地址信息 | ||
| 132 | orderAddressInfo(){ | ||
| 133 | return this.orderInfo.order_info[0].address | ||
| 134 | }, | ||
| 135 | //订单付款时间 | ||
| 136 | getTime(){ | ||
| 137 | return this.orderInfo.order_info[0].lefttime | ||
| 138 | }, | ||
| 139 | // 计算总优惠额 | ||
| 140 | totalDiscount(){ | ||
| 141 | const discountInfoList = this.orderInfo.discount_info | ||
| 142 | let totalDiscount = 0; | ||
| 143 | if(discountInfoList){ | ||
| 144 | discountInfoList.map((discountItem,index)=>{ | ||
| 145 | totalDiscount += Number(discountItem.value) | ||
| 146 | }) | ||
| 147 | } | ||
| 148 | // console.log(totalDiscount) | ||
| 149 | return totalDiscount | ||
| 150 | }, | ||
| 80 | }, | 151 | }, |
| 81 | methods: { | 152 | methods: { |
| 82 | 153 | //取消订单 | |
| 154 | timeup(){ | ||
| 155 | this.cancleOrder() | ||
| 156 | }, | ||
| 157 | cancleOrder(){ | ||
| 158 | const uid = this.uid | ||
| 159 | const openid = this.openid | ||
| 160 | uni.showModal({ | ||
| 161 | title: '提示', | ||
| 162 | content: '现在取消，订单不可恢复哦，确认取消吗？', | ||
| 163 | success: function (res) { | ||
| 164 | if (res.confirm) { | ||
| 165 | store.dispatch('cancelOrder/cancel',{ | ||
| 166 | keyname:'1', | ||
| 167 | uid:uid, | ||
| 168 | openid:openid | ||
| 169 | }) | ||
| 170 | } else if (res.cancel) { | ||
| 171 | console.log('用户点击取消'); | ||
| 172 | } | ||
| 173 | } | ||
| 174 | }) | ||
| 175 | }, | ||
| 176 | paylog(){ | ||
| 177 | |||
| 178 | }, | ||
| 179 | confirmOrder(){ | ||
| 180 | store.dispatch('statusConfirm/confirm',{ | ||
| 181 | uid:this.uid, | ||
| 182 | openid:this.openid, | ||
| 183 | oldway:'1', | ||
| 184 | way:'2', | ||
| 185 | pay_id:this.payId, | ||
| 186 | judgeContent:'', | ||
| 187 | orderInfo:this.orderInfo.order_info, | ||
| 188 | }) | ||
| 189 | } | ||
| 83 | } | 190 | } |
| 84 | } | 191 | } |
| 85 | </script> | 192 | </script> |
| 86 | 193 | ||
| 87 | <style lang="scss" scoped> | 194 | <style lang="scss" scoped> |
| 88 | .content{ | 195 | .content{ |
| 196 | min-height: 100vh; | ||
| 89 | display: flex; | 197 | display: flex; |
| 90 | flex-direction: column; | 198 | flex-direction: column; |
| 91 | justify-content: center; | 199 | justify-content: flex-start; |
| 92 | align-items: center; | 200 | align-items: center; |
| 93 | background-color: #f2f2f2; | 201 | background-color: #f2f2f2; |
| 94 | } | 202 | } |
| 95 | 203 | ||
| 96 | 204 | ||
| 97 | .order { | 205 | .order { |
| 98 | min-height: 1196rpx; | ||
| 99 | margin-bottom: 112rpx; | 206 | margin-bottom: 112rpx; |
| 100 | background: #F2F2F2; | 207 | background: #F2F2F2; |
| 101 | } | 208 | margin-top: 140rpx; |
| 102 | .order-hr { | 209 | width: 670rpx; |
| 103 | width: 100%; | ||
| 104 | height: 1px; | ||
| 105 | background-color: #E9E9E9; | ||
| 106 | } | 210 | } |
| 211 | |||
| 107 | .order-time { | 212 | .order-time { |
| 108 | width: 100%; | 213 | width: 100%; |
| 109 | height: 140rpx; | 214 | height: 140rpx; |
| 110 | background-color: #fff; | 215 | background-color: #fff; |
| 111 | display: flex; | 216 | display: flex; |
| 112 | justify-content: center; | 217 | justify-content: center; |
| 218 | align-items: center; | ||
| 219 | position: fixed; | ||
| 220 | top: 0 ; | ||
| 221 | left: 0; | ||
| 113 | text { | 222 | text { |
| 114 | // font-family: PingFangSC-Regular; | 223 | // font-family: PingFangSC-Regular; |
| 115 | margin-top: 48rpx; | 224 | // margin-top: 48rpx; |
| 116 | font-size: 14px; | 225 | font-size: 14px; |
| 117 | color: #333333; | 226 | color: #333333; |
| 118 | letter-spacing: -0.26px; | 227 | letter-spacing: -0.26px; |
| 119 | } | 228 | } |
| 120 | .p2 { | 229 | .p2 { |
| 121 | // font-family: DINAlternate-Bold; | 230 | // font-family: DINAlternate-Bold; |
| 122 | margin: 42rpx 20rpx 0 20rpx; | 231 | margin: 42rpx 20rpx 0 20rpx; |
| 123 | font-size: 18px; | 232 | font-size: 18px; |
| 124 | color: #EC5D3B; | 233 | color: #EC5D3B; |
| 125 | letter-spacing: -0.34px; | 234 | letter-spacing: -0.34px; |
| 126 | } | 235 | } |
| 127 | } | 236 | } |
| 128 | 237 | .headerBanner{ | |
| 238 |