You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

368 lines
9.0 KiB

  1. <template>
  2. <view class="app-container" style="background-color: #f7f7f7;">
  3. <view class="page-bg">
  4. <view class="withdrawal-management">
  5. <navigator hover-class="none" url="/pages/withdrawal-management/withdrawal-management">
  6. <button class="withdrawal-button">提现管理</button>
  7. </navigator>
  8. </view>
  9. <view class="withdrawal-limit">
  10. <view class="limit-symbol"></view>
  11. <view class="withdrawal-volume">458.00</view>
  12. </view>
  13. <view class="Withdrawable-text">可提现</view>
  14. <view class="withdrawal-content">
  15. <image class="withdrawal-line" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/withdrawal-line.png" />
  16. </view>
  17. <view class="to-be-credited">待入账200.00</view>
  18. <view class="divider-style"></view>
  19. <view class="information-id-content">
  20. <view class="content-id-item">
  21. <view class="id-text">
  22. 商户ID
  23. </view>
  24. <view class="id-value">
  25. 56865kj
  26. </view>
  27. </view>
  28. <view class="content-id-item">
  29. <view class="id-text">
  30. 用户ID
  31. </view>
  32. <view class="id-value">
  33. 54568gh
  34. </view>
  35. </view>
  36. <view class="content-id-item">
  37. <view class="id-text">
  38. 代理ID
  39. </view>
  40. <view class="id-value">
  41. 56231fd
  42. </view>
  43. </view>
  44. </view>
  45. <view class="queuing-information-content">
  46. <view class="recent-orders-title">
  47. <image class="title-stlye" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/title-stlye.png" />
  48. <view class="title-text">最近排队信息</view>
  49. </view>
  50. <view class="information-item">
  51. <view class="item-content">
  52. <view class="item-content-titie">李姐烧烤普罗旺斯店</view>
  53. <view class="item-content-text">购买时排队<span class="style-text">10</span>当前<span class="style-text">2</span></view>
  54. </view>
  55. <view class="item-content">
  56. <view class="item-content-titie">李姐烧烤青秀万达店</view>
  57. <view class="item-content-text">购买时排队<span class="style-text">200</span>当前<span class="style-text">48</span></view>
  58. </view>
  59. <navigator hover-class="none" url="/pages/queuing-information/queuing-information">
  60. <view class="see-more-content">
  61. <view class="see-more-text">查看更多</view>
  62. <view class="see-more-icon"></view>
  63. </view>
  64. </navigator>
  65. </view>
  66. </view>
  67. <view class="ordering-information">
  68. <view class="ordering-information-item">
  69. <view class="order-number">订单编号 22398983498</view>
  70. <view class="ordering-item-content">
  71. <view class="ordering-pic">
  72. <image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
  73. </view>
  74. <view class="ordering-text">
  75. <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
  76. <view class="amount-of-money">金额<span class="price-style">450.00</span></view>
  77. <view class="order-time">订单时间2023-10-24 20:39:56</view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="ordering-information-item">
  82. <view class="order-number">订单编号 22398983498</view>
  83. <view class="ordering-item-content">
  84. <view class="ordering-pic">
  85. <image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
  86. </view>
  87. <view class="ordering-text">
  88. <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
  89. <view class="amount-of-money">金额<span class="price-style">450.00</span></view>
  90. <view class="order-time">订单时间2023-10-24 20:39:56</view>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="ordering-information-item">
  95. <view class="order-number">订单编号 22398983498</view>
  96. <view class="ordering-item-content">
  97. <view class="ordering-pic">
  98. <image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
  99. </view>
  100. <view class="ordering-text">
  101. <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
  102. <view class="amount-of-money">金额<span class="price-style">450.00</span></view>
  103. <view class="order-time">订单时间2023-10-24 20:39:56</view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. </template>
  111. <script>
  112. export default {
  113. data() {
  114. return {
  115. }
  116. },
  117. methods: {
  118. }
  119. }
  120. </script>
  121. <style>
  122. .uni-page-body {
  123. background: #f7f7f7;
  124. }
  125. .page-bg{
  126. height: 525rpx;
  127. background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/withdrawal-bg.png") no-repeat center center;
  128. background-size:cover;
  129. padding: 0 30rpx;
  130. }
  131. .withdrawal-management{
  132. position: absolute;
  133. top: 0;
  134. right: 0;
  135. }
  136. button.withdrawal-button{
  137. width: 160rpx;
  138. height: 60rpx;
  139. line-height: 60rpx;
  140. font-family: PingFangSC-Regular, sans-serif;
  141. font-size: 24rpx;
  142. color: #fff;
  143. background: #FCC565;
  144. margin: 0;
  145. border-top-left-radius: 0;
  146. border-top-right-radius: 0;
  147. border-bottom-right-radius: 0;
  148. border-bottom-left-radius: 30rpx;
  149. }
  150. button::after{
  151. border: none;
  152. }
  153. .withdrawal-limit{
  154. display: flex;
  155. justify-content: center;
  156. align-items: baseline;
  157. padding-top: 30rpx;
  158. text-align: center;
  159. }
  160. .limit-symbol{
  161. font-family: PingFangSC-Regular, sans-serif;
  162. font-size: 30rpx;
  163. color: #fff;
  164. }
  165. .withdrawal-volume{
  166. font-family: "Din";
  167. font-size: 60rpx;
  168. color: #fff;
  169. font-weight: bold;
  170. margin-left: 10rpx;
  171. }
  172. .Withdrawable-text{
  173. font-family: PingFangSC-Regular, sans-serif;
  174. font-size: 30rpx;
  175. color: #fff;
  176. text-align: center;
  177. margin-top: 10rpx;
  178. }
  179. .withdrawal-content{
  180. display: flex;
  181. justify-content: center;
  182. align-items: center;
  183. padding: 15rpx 0;
  184. }
  185. image.withdrawal-line{
  186. text-align: center;
  187. width: 200rpx;
  188. height: 1rpx;
  189. background-size: cover;
  190. }
  191. .to-be-credited{
  192. font-family: PingFangSC-Regular, sans-serif;
  193. font-size: 30rpx;
  194. color: #fff;
  195. text-align: center;
  196. }
  197. .divider-style{
  198. width: 690rpx;
  199. height: 1rpx;
  200. background: #F8A0A6;
  201. margin: 20rpx 0;
  202. }
  203. .information-id-content{
  204. display: flex;
  205. justify-content: space-between;
  206. align-items: center;
  207. }
  208. .content-id-item{
  209. display: flex;
  210. justify-content: left;
  211. align-items: center;
  212. }
  213. .id-text{
  214. font-family: PingFangSC-Regular, sans-serif;
  215. font-size: 24rpx;
  216. color: #fff;
  217. }
  218. .id-value{
  219. font-family: PingFangSC-Regular, sans-serif;
  220. font-size: 24rpx;
  221. color: #fff;
  222. }
  223. .queuing-information-content{
  224. background: #fff;
  225. border-radius: 20rpx;
  226. padding: 30rpx 0;
  227. margin-top: 30rpx;
  228. }
  229. .recent-orders-title {
  230. display: flex;
  231. justify-content: left;
  232. align-items: center;
  233. padding: 0 30rpx;
  234. border-bottom: 1rpx solid #eeeeee;
  235. padding-bottom: 30rpx;
  236. }
  237. image.title-stlye {
  238. width: 15rpx;
  239. height: 19rpx;
  240. background-size: cover;
  241. margin-right: 20rpx;
  242. }
  243. .title-text {
  244. font-family: PingFangSC-Regular, sans-serif;
  245. font-size: 30rpx;
  246. color: #454545;
  247. font-weight: bold;
  248. }
  249. .information-item{
  250. padding: 0 30rpx;
  251. }
  252. .item-content{
  253. display: flex;
  254. justify-content: left;
  255. align-items: center;
  256. margin-top: 30rpx;
  257. }
  258. .item-content-titie{
  259. font-family: PingFangSC-Regular, sans-serif;
  260. font-size: 24rpx;
  261. color: #454545;
  262. font-weight: bold;
  263. }
  264. .item-content-text{
  265. font-family: PingFangSC-Regular, sans-serif;
  266. font-size: 24rpx;
  267. color: #666;
  268. }
  269. span.style-text{
  270. font-family: PingFangSC-Regular, sans-serif;
  271. font-size: 24rpx;
  272. color: #F52F3E;
  273. font-weight: bold;
  274. padding: 0 15rpx;
  275. }
  276. .see-more-content{
  277. display: flex;
  278. justify-content: center;
  279. align-items: center;
  280. margin-top: 30rpx;
  281. }
  282. .see-more-text{
  283. font-family: PingFangSC-Regular, sans-serif;
  284. font-size: 24rpx;
  285. color: #F52F3E;
  286. }
  287. .see-more-icon{
  288. width: 0;
  289. height: 0;
  290. border-left: 14rpx solid #FDD5D8;
  291. border-top: 14rpx solid transparent;
  292. border-bottom: 14rpx solid transparent;
  293. margin-left: 10rpx;
  294. border-radius: 10rpx;
  295. }
  296. .ordering-information{
  297. padding: 30rpx;
  298. background: #fff;
  299. margin-top: 20rpx;
  300. border-radius: 20rpx;
  301. padding-top: 0;
  302. }
  303. .order-number {
  304. font-family: PingFangSC-Regular, sans-serif;
  305. font-size: 26rpx;
  306. color: #454545;
  307. padding: 30rpx 0;
  308. }
  309. .ordering-pic {
  310. width: 120rpx;
  311. height: 120rpx;
  312. background-size: cover;
  313. border-radius: 15rpx;
  314. }
  315. image.order-chart {
  316. width: 120rpx;
  317. height: 120rpx;
  318. background-size: cover;
  319. border-radius: 15rpx;
  320. }
  321. .ordering-text {
  322. margin-left: 30rpx;
  323. }
  324. .ordering-text-title {
  325. font-family: PingFangSC-Regular, sans-serif;
  326. font-size: 30rpx;
  327. color: #454545;
  328. }
  329. .amount-of-money {
  330. font-family: PingFangSC-Regular, sans-serif;
  331. font-size: 24rpx;
  332. color: #999;
  333. padding: 10rpx 0;
  334. }
  335. span.price-style {
  336. font-family: PingFangSC-Regular, sans-serif;
  337. font-size: 24rpx;
  338. color: #F52F3E;
  339. }
  340. .order-time {
  341. font-family: PingFangSC-Regular, sans-serif;
  342. font-size: 24rpx;
  343. color: #999;
  344. }
  345. .ordering-item-content{
  346. display: flex;
  347. justify-content: left;
  348. align-items: center;
  349. border-bottom: 1rpx solid #eee;
  350. padding-bottom: 30rpx;
  351. }
  352. </style>