orderDetail.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <template>
  2. <view class="container">
  3. <view class="recharge">
  4. <view class="example-title flex_item">
  5. <view class="titleTip"></view>
  6. <view class="">支付信息</view>
  7. </view>
  8. <view class="infoBox">
  9. <view class="tplAddr">银行:<text>{{baseData.bank}}</text></view>
  10. <view class="tplAddr">支行:<text>{{baseData.bank_name}}</text></view>
  11. <view class="tplAddr">卡号:<text>{{baseData.bank_code}}</text></view>
  12. <view class="tplAddr">姓名:<text>{{baseData.real_name}}</text></view>
  13. <view class="tplAddr">手机号:<text>{{baseData.phone}}</text></view>
  14. <view class="tplAddr">数量:<text>{{baseData.num*1}}{{baseData.money_type}}</text></view>
  15. <view class="tplAddr">单格:<text>¥{{baseData.price*1}}</text></view>
  16. <view class="tplAddr">总价:<text>¥{{allmoney}}</text></view>
  17. </view>
  18. </view>
  19. <view class="login_text">
  20. <view class="example-title flex_item">
  21. <view class="titleTip"></view>
  22. <view class="">打款凭证</view>
  23. </view>
  24. <view class="login_input">
  25. <!-- <view class="login_img"><text>打款凭证</text></view> -->
  26. <view class="login_name" @click="scImg" v-if="!baseData.voucher">
  27. <image :src="img||'/static/image/img19.png'"></image>
  28. </view>
  29. <view class="login_name" v-else>
  30. <image class="showImage" mode="widthFix" :src="baseData.voucher"></image>
  31. </view>
  32. </view>
  33. <view class="submission" v-if="baseData.status==3"><button class="golden" type="golden" hover-class="none"
  34. @click="submission">确认提交</button></view>
  35. </view>
  36. </view>
  37. </template>
  38. <script type="text/javascript">
  39. // import { show_cb,do_cb } from '@/api/recharge.js';
  40. import {
  41. upload
  42. } from '@/api/order.js';
  43. import {
  44. getSell,
  45. setSellVoucher
  46. } from '@/api/game.js';
  47. import {
  48. copyText
  49. } from '@/utils/rocessor.js';
  50. export default {
  51. data() {
  52. return {
  53. img: '',
  54. remark: '',
  55. id: '',
  56. baseData: {},
  57. allmoney: 0,
  58. };
  59. },
  60. onLoad(opt) {
  61. this.id = opt.id;
  62. this.getData();
  63. },
  64. methods: {
  65. //获取数据
  66. getData() {
  67. const that = this;
  68. //确认充值调接口,成功跳转页面
  69. getSell({
  70. id: that.id,
  71. })
  72. .then(function(e) {
  73. that.baseData = e.data.info
  74. that.baseData.num = that.baseData.num * 1;
  75. that.baseData.price = that.baseData.price * 1;
  76. that.allmoney = +(that.baseData.num * that.baseData.price).toFixed(8);
  77. console.log(that.allmoney);
  78. })
  79. .catch(function(e) {
  80. console.log(e);
  81. });
  82. },
  83. // 下载图片
  84. domImage() {
  85. uni.downloadFile({
  86. url: this.er_code,
  87. success(re) {
  88. console.log(re.tempFilePath, 're');
  89. uni.showToast({
  90. title: '下载成功'
  91. });
  92. }
  93. })
  94. },
  95. // 复制地址
  96. copy() {
  97. copyText(this.dataMoney.address)
  98. },
  99. // 二维码生成
  100. qrR(res) {
  101. this.er_code = res;
  102. },
  103. //确认提交
  104. submission() {
  105. let obj = this;
  106. uni.showLoading({
  107. title: '提交中...',
  108. mask: true
  109. });
  110. //确认充值调接口,成功跳转页面
  111. setSellVoucher({
  112. id: obj.id,
  113. image: obj.img,
  114. })
  115. .then(function(e) {
  116. uni.hideLoading();
  117. uni.showToast({
  118. title: e.msg
  119. });
  120. setTimeout(()=>{
  121. uni.navigateBack()
  122. },1500)
  123. })
  124. .catch(function(e) {
  125. console.log(e, '错误');
  126. uni.hideLoading();
  127. });
  128. },
  129. //上传图片
  130. scImg() {
  131. upload({
  132. file: ''
  133. }).then((e) => {
  134. console.log(e, 55)
  135. this.img = e[0].url;
  136. });
  137. },
  138. }
  139. };
  140. </script>
  141. <style lang="scss">
  142. /* page {
  143. min-height: 100%;
  144. background: linear-gradient(-28deg, rgba(44, 45, 53, 1), rgba(59, 62, 74, 1));
  145. } */
  146. .body_content {
  147. width: 100%;
  148. height: 100%;
  149. }
  150. .login_text {
  151. width: 100%;
  152. color: #fff !important;
  153. font-size: 28rpx !important;
  154. background-color: #1F2A4A;
  155. margin: 25rpx 0rpx;
  156. padding-bottom: 15rpx;
  157. }
  158. .recharge {
  159. text-align: center;
  160. color: #85858e;
  161. font-size: 30rpx;
  162. background-color: #1F2A4A;
  163. }
  164. .example-title {
  165. text-align: left !important;
  166. padding: 25rpx 25rpx;
  167. border-bottom: 2rpx solid #2F364E;
  168. color: #0C5AFA;
  169. .titleTip {
  170. width: 5rpx;
  171. height: 30rpx;
  172. background: linear-gradient(90deg, #0C5AFA, #1356FF);
  173. border-radius: 3rpx;
  174. margin-right: 15rpx;
  175. }
  176. }
  177. .infoBox {
  178. text-align: left;
  179. padding: 28rpx 51rpx;
  180. .tplName {
  181. font-family: PingFang SC;
  182. font-weight: bold;
  183. font-size: 32rpx;
  184. color: #FFFFFF;
  185. line-height: 24rpx;
  186. }
  187. .tplNum {
  188. margin: 30rpx 0rpx;
  189. padding: 15rpx 30rpx;
  190. border-radius: 10rpx;
  191. border: 1px solid #1356FF;
  192. font-family: PingFang SC;
  193. font-size: 26rpx;
  194. color: #1356FF;
  195. display: inline-block;
  196. }
  197. .tplAddr {
  198. color: #e3e3e3;
  199. font-size: 26rpx;
  200. margin-bottom: 10rpx;
  201. text {
  202. padding-left: 15rpx;
  203. font-size: 26rpx;
  204. color: #FFFFFF;
  205. }
  206. }
  207. }
  208. .login_input {
  209. // border-bottom: 1px solid #464755;
  210. padding: 35rpx;
  211. }
  212. .uni-input {
  213. width: 100%;
  214. text-align: left !important;
  215. }
  216. .code {
  217. width: 277rpx;
  218. height: 277rpx;
  219. margin: 25rpx auto;
  220. margin-bottom: 35rpx;
  221. background: #0C5AFA;
  222. }
  223. .code image {
  224. width: 100%;
  225. height: 100%;
  226. }
  227. .btnBox {
  228. justify-content: center;
  229. padding-bottom: 50rpx;
  230. padding-top: 30rpx;
  231. .btn {
  232. margin-right: 50rpx;
  233. font-family: PingFang SC;
  234. font-weight: bold;
  235. font-size: 26rpx;
  236. color: #0C5AFA;
  237. border: 1rpx solid #0C5AFA;
  238. padding: 15rpx 45rpx;
  239. border-radius: 15rpx;
  240. }
  241. }
  242. .submission {
  243. padding: 30rpx 25rpx;
  244. .golden {
  245. background: #0C5AFA;
  246. color: #fff;
  247. }
  248. }
  249. .login_name {
  250. width: 100%;
  251. color: #ffffff;
  252. .showImage {
  253. width: 100%;
  254. border: 1px solid #FFF;
  255. }
  256. }
  257. .login_name image {
  258. width: 100rpx;
  259. height: 100rpx;
  260. }
  261. .tip {
  262. padding: 29rpx 31rpx;
  263. line-height: 55rpx;
  264. font-size: 24rpx;
  265. }
  266. .select_img {
  267. width: 28rpx;
  268. height: 32rpx;
  269. }
  270. .select_img image {
  271. width: 100%;
  272. height: 100%;
  273. }
  274. .scann {
  275. margin-bottom: 35rpx;
  276. margin-top: 15rpx;
  277. }
  278. .scanning {
  279. background-color: #6f6f78;
  280. color: #ffffff;
  281. padding: 10rpx 30rpx;
  282. border-radius: 15rpx;
  283. font-size: 28rpx;
  284. }
  285. .address_code {
  286. padding: 25rpx 0rpx;
  287. color: #ffffff;
  288. }
  289. .input-placeholder {
  290. color: #fff !important;
  291. }
  292. </style>