orderDetail.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <view class="container">
  3. <view class="order-status"> {{info.order_status == 0?'待支付':info.order_status == 1?'待发货':"已完成"}}</view>
  4. <view class="page-block">
  5. <view class="page-title-block">
  6. <view class="title">订单信息</view>
  7. </view>
  8. <view class="content">
  9. <view class="cell flex flex-y-center">
  10. <view class="title-block required">
  11. <text>积分:</text>
  12. </view>
  13. <view class="desc">
  14. <view class="info" style="color:#FEAF44">¥{{info.integral}}</view>
  15. </view>
  16. </view>
  17. <!-- <view class="cell flex flex-y-center">
  18. <view class="title-block required">
  19. <text>支付金额:</text>
  20. </view>
  21. <view class="desc">
  22. <view class="info" style="color:#FEAF44">¥{{info.pay_price}}</view>
  23. </view>
  24. </view -->
  25. <view class="cell flex flex-y-center" v-if="info.is_pay">
  26. <view class="title-block required">
  27. <text>支付方式:</text>
  28. </view>
  29. <view class="desc flex flex-y-center">
  30. <image src="'../static/images/total.png" mode="aspectFit" class="pay-type-icon"></image>
  31. <view class="info">{{info.pay_type == 1?'微信支付':info.pay_type == 2?'支付宝支付':'积分兑换'}}</view>
  32. </view>
  33. </view>
  34. <view class="cell flex flex-y-center">
  35. <view class="title-block required">
  36. <text>订单编号:</text>
  37. </view>
  38. <view class="desc">
  39. <view class="info">{{info.order_no}}</view>
  40. </view>
  41. </view>
  42. <view class="cell flex flex-y-center" v-if="info.is_pay">
  43. <view class="title-block required">
  44. <text>支付时间:</text>
  45. </view>
  46. <view class="desc">
  47. <view class="info">{{info.pay_time}}</view>
  48. </view>
  49. </view>
  50. <view class="cell flex flex-y-center" v-if="info.remark">
  51. <view class="title-block required">
  52. <text>备注:</text>
  53. </view>
  54. <view class="desc">
  55. <view class="info">{{info.remark}}</view>
  56. </view>
  57. </view>
  58. <block v-if="info.name||info.address||info.mobile">
  59. <view class="cell flex flex-y-center">
  60. <view class="title-block required">
  61. <text>收货人:</text>
  62. </view>
  63. <view class="desc">
  64. <view class="info">{{info.name}}</view>
  65. </view>
  66. </view>
  67. <view class="cell flex flex-y-center">
  68. <view class="title-block required">
  69. <text>收货地址:</text>
  70. </view>
  71. <view class="desc">
  72. <view class="info">{{info.address}}</view>
  73. </view>
  74. </view>
  75. <view class="cell flex flex-y-center">
  76. <view class="title-block required">
  77. <text>联系电话:</text>
  78. </view>
  79. <view class="desc">
  80. <view class="info">{{info.mobile}}</view>
  81. </view>
  82. </view>
  83. </block>
  84. <view class="cell flex flex-y-center" v-if="info.express">
  85. <view class="title-block required">
  86. <text>快递公司:</text>
  87. </view>
  88. <view class="desc">
  89. <view class="info">{{info.express}}</view>
  90. </view>
  91. </view>
  92. <view class="cell flex flex-y-center" v-if="info.express_no">
  93. <view class="title-block required">
  94. <text>快递单号:</text>
  95. </view>
  96. <view class="desc">
  97. <view class="info">{{info.express_no}}</view>
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. <!-- -->
  103. <view class="page-block">
  104. <view class="page-title-block">
  105. <view class="title">商品信息</view>
  106. </view>
  107. <view class="content">
  108. <view class="goods flex flex-y-center box-pack-between">
  109. <view class="name">{{info.goods_name}}</view>
  110. <view class="price" style="color:#FEAF44">积分:{{info.integral}}</view>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- -->
  115. <view class="footer-bar" v-if="info.state==1&&info.order_status == 1">
  116. <view class="content flex flex-center" @click="fahuo" style="background: none;position: relative;">
  117. <button class="btn" hover-class="none" form-type="submit">
  118. 发货
  119. </button>
  120. </view>
  121. </view>
  122. <view class="footer-bar" v-if="info.state==2&&info.hx_time == 1">
  123. <view class="content flex flex-center" style="background: none;position: relative;">
  124. <navigator url="./Applied" class="btn" hover-class="none" form-type="submit">
  125. 去核销
  126. </navigator>
  127. </view>
  128. </view>
  129. <view class="model flex-center" v-if="is_show" @click="bindshow">
  130. <view class="model-home" @click.stop="bind">
  131. <form @submit="onSubmit">
  132. <view @click="express" class="flex-y-center model-home-item arr-r">
  133. <text>快递公司:</text>
  134. <view class="ft28">{{expressName}}</view>
  135. </view>
  136. <view class="flex-y-center model-home-item">
  137. <text>快递单号:</text>
  138. <input placeholder="请输入快递单号" name='express_no'></input>
  139. </view>
  140. <button form-type="submit" type="default">发货</button>
  141. </form>
  142. </view>
  143. </view>
  144. </view>
  145. </template>
  146. <script>
  147. export default {
  148. data() {
  149. return {
  150. id: "",
  151. info: {},
  152. goods_list: [],
  153. expressName: "请输入快递公司",
  154. is_show: false
  155. }
  156. },
  157. onLoad(options) {
  158. this.id = options.id
  159. },
  160. onShow() {
  161. this.getData()
  162. console.log(this.expressName, "expressName")
  163. },
  164. methods: {
  165. fahuo() {
  166. this.is_show = true;
  167. },
  168. bindshow() {
  169. this.is_show = false;
  170. },
  171. bind() {
  172. },
  173. express(e) {
  174. uni.navigateTo({
  175. url: "./express-list?id=" + this.info.id
  176. })
  177. },
  178. onSubmit(e) {
  179. this.request({
  180. url: 'Smdcshop/paytype',
  181. data: {
  182. id: this.info.id,
  183. express: this.expressName,
  184. express_no: e.detail.value.express_no,
  185. }
  186. }).then(res => {
  187. if (res.code == '200') {
  188. this.is_show = false;
  189. uni.showToast({
  190. title: res.message,
  191. icon: 'none'
  192. })
  193. this.getData()
  194. }
  195. })
  196. },
  197. getData() {
  198. this.request({
  199. url: 'Smdcshop/jforderinfo',
  200. data: {
  201. id: this.id
  202. }
  203. }).then(res => {
  204. this.info = res.data
  205. // this.goods_list = res.data.goods_list
  206. })
  207. }
  208. }
  209. }
  210. </script>
  211. <style>
  212. .model {
  213. position: fixed;
  214. left: 0;
  215. top: 0;
  216. background: rgba(0, 0, 0, 0.5);
  217. width: 100%;
  218. height: 100%;
  219. }
  220. .model-home {
  221. width: 600rpx;
  222. height: 400rpx;
  223. background: #FFFFFF;
  224. padding: 20rpx;
  225. border-radius: 10rpx;
  226. padding-top: 50rpx;
  227. }
  228. .model-home-item {
  229. margin-bottom: 54rpx;
  230. }
  231. .model button {
  232. width: 500rpx;
  233. height: 100rpx;
  234. background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
  235. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  236. border-radius: 8rpx;
  237. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  238. text-align: center;
  239. line-height: 100rpx;
  240. font-size: 36rpx;
  241. font-weight: 500;
  242. color: #fff;
  243. }
  244. page {
  245. width: 100%;
  246. height: 100%;
  247. background-color: #F4F5F7;
  248. }
  249. .container {
  250. width: 100%;
  251. height: 100%;
  252. }
  253. .order-status {
  254. width: 100%;
  255. height: 130rpx;
  256. background: url(../static/images/order_detail_bg.png) no-repeat center;
  257. background-size: 100%;
  258. text-align: center;
  259. line-height: 130rpx;
  260. font-size: 36rpx;
  261. color: #fff;
  262. font-weight: bold;
  263. }
  264. .page-block {}
  265. .page-block .page-title-block {
  266. height: 90rpx;
  267. padding: 0 35rpx;
  268. }
  269. .page-block .page-title-block .title {
  270. font-size: 32rpx;
  271. line-height: 90rpx;
  272. color: #999;
  273. font-weight: bold;
  274. }
  275. .page-block .content {
  276. padding: 30rpx 35rpx 0;
  277. background-color: #fff;
  278. overflow: hidden;
  279. }
  280. .page-block .cell {
  281. min-height: 45rpx;
  282. margin-bottom: 30rpx;
  283. }
  284. .page-block .cell .title-block {
  285. width: 175rpx;
  286. flex: none;
  287. font-size: 30rpx;
  288. line-height: 45rpx;
  289. font-weight: 600;
  290. color: #333;
  291. }
  292. .page-block .cell .desc {
  293. flex: auto;
  294. min-height: 45rpx;
  295. line-height: 45rpx;
  296. font-size: 32rpx;
  297. color: #333;
  298. }
  299. .pay-type-icon {
  300. display: block;
  301. width: 30rpx;
  302. height: 30rpx;
  303. margin-right: 8rpx;
  304. }
  305. .goods {
  306. font-size: 32rpx;
  307. color: #333;
  308. line-height: 45rpx;
  309. margin-bottom: 30rpx;
  310. }
  311. .footer-bar {
  312. margin-top: 50rpx;
  313. }
  314. .footer-bar .content .btn {
  315. width: 700rpx;
  316. height: 100rpx;
  317. background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
  318. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  319. border-radius: 8rpx;
  320. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  321. text-align: center;
  322. line-height: 100rpx;
  323. font-size: 36rpx;
  324. font-weight: 500;
  325. color: #fff;
  326. }
  327. </style>