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.

300 lines
6.4 KiB

9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
  1. <!-- 充值界面 -->
  2. <template>
  3. <view class="purse bx">
  4. <!-- <navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar> -->
  5. <!-- 用户余额信息 -->
  6. <view class="user-money content">
  7. <view class="title">{{ $t('page.purse.balance') }}</view>
  8. <view class="money">
  9. <view class="money-unit">{{ $t('page.purse.unit') }}</view>
  10. <view class="money-detail">{{ money }}</view>
  11. </view>
  12. </view>
  13. <view class="purse-input content">
  14. <view class="title">{{ $t('page.purse.recharge-address') }}</view>
  15. <view class="text">{{ userInfo.moneyAddress }}</view>
  16. <view @click="copy(userInfo.moneyAddress)" class="btn">{{ $t('page.purse.copy') }}</view>
  17. </view>
  18. <view class="purse-input content">
  19. <view class="title">{{ $t('page.purse.recharge-amount') }}</view>
  20. <input v-model="form.money" type="number" :placeholder="$t('page.purse.recharge-amount-placeholder')" />
  21. </view>
  22. <view class="purse-input content">
  23. <view class="title">{{ $t('page.purse.upload') }}</view>
  24. <image :src="form.image"
  25. v-if="form.image" mode=""
  26. @click="uploadImage"></image>
  27. <view class="image" v-else
  28. @click="uploadImage">
  29. <u-icon name="plus"></u-icon>
  30. </view>
  31. </view>
  32. <!-- 按钮 -->
  33. <view @click="recharge" class="submit-btn content">{{ $t('page.purse.complete-top-up') }}</view>
  34. <view class="steps content">
  35. <view class="steps-title">{{ $t('page.purse.steps') }}</view>
  36. <view class="steps-content">
  37. <view>1. Please copy the TRC-20 wallet address for payment in this mall.</view>
  38. <view>2. Make the transfer after verification. If I make a mistake, this mall will not bear your loss.</view>
  39. <view>3. When your payment is successful, please upload the payment voucher.</view>
  40. <view>4. When you are done with this, click: I have completed the payment.</view>
  41. <view>5. When you encounter any problems, be sure to contact our online customer service in time to help you solve them.</view>
  42. </view>
  43. </view>
  44. <!-- 客服列表 -->
  45. <serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
  46. <sTabbar select="100" />
  47. </view>
  48. </template>
  49. <script>
  50. import navbar from '@/components/base/m-navbar.vue'
  51. import serviceList from '@/components/serviceList/serviceList.vue';
  52. import sTabbar from '@/components/base/tabBar.vue'
  53. export default {
  54. components: {
  55. navbar,
  56. serviceList,
  57. sTabbar
  58. },
  59. data() {
  60. return {
  61. active : 0,
  62. money : '',
  63. form : {
  64. id : '',
  65. image : '',
  66. money : ''
  67. },
  68. serverList : [],
  69. showService : false,
  70. userInfo : {}
  71. }
  72. },
  73. onShow() {
  74. this.getUserInfo()
  75. this.forgetPass()
  76. },
  77. methods: {
  78. // leftClick() {
  79. // if(this.$route.query.type){
  80. // return uni.navigateTo({
  81. // url: '/pages/home/home'
  82. // })
  83. // }else{
  84. // uni.navigateTo({
  85. // url: '/pages/center/center'
  86. // })
  87. // }
  88. // },
  89. uploadImage(){
  90. let self = this
  91. uni.chooseImage({
  92. success(res) {
  93. self.form.image = res.tempFilePaths[0]
  94. }
  95. })
  96. },
  97. //获取用户信息
  98. getUserInfo(){
  99. this.request('userInfo').then(res => {
  100. if(res.code == 200){
  101. this.userInfo = res.result.userInfo
  102. this.money = res.result.userInfo.money
  103. }
  104. })
  105. },
  106. //充值
  107. recharge(){
  108. this.$play()
  109. this.form.moneyAddress = this.userInfo.moneyAddress;
  110. this.request('recharge2',{},this.form).then(res => {
  111. if(res.code == 200){
  112. uni.$u.toast(this.$t('page.purse.success'))
  113. this.cleanForm()
  114. this.revealServiceList()
  115. this.getUserInfo() //刷新用户信息(更新用户余额)
  116. }
  117. })
  118. },
  119. //显示客服列表
  120. revealServiceList(){
  121. this.$play()
  122. this.showService = true;
  123. },
  124. //关闭客服列表
  125. closeServiceList(){
  126. this.showService = false;
  127. },
  128. //忘记密码(获取客服列表)
  129. forgetPass(){
  130. this.request('forgetPass').then(res => {
  131. if(res.code == 200){
  132. this.serverList = res.result
  133. }
  134. })
  135. },
  136. //清空表单数据
  137. cleanForm(){
  138. this.form = {
  139. }
  140. },
  141. //复制内容
  142. copy(content) {
  143. if(!content){
  144. return uni.$u.toast(this.$t('page.purse.addressEmpty'))
  145. }
  146. uni.setClipboardData({
  147. data: content,
  148. success: () => {
  149. uni.showToast({
  150. title: this.$t('page.purse.copySuccess'),
  151. icon: 'none'
  152. })
  153. }
  154. })
  155. }
  156. }
  157. }
  158. </script>
  159. <style lang="scss" scoped>
  160. .purse {
  161. width: 750rpx;
  162. min-height: 100vh;
  163. margin: 0 auto;
  164. background-size: 100%;
  165. background-repeat: no-repeat;
  166. background: #f6f6f6;
  167. .content {
  168. width: 96%;
  169. margin: 0 auto;
  170. }
  171. .user-money {
  172. background: $uni-bg-color-app;
  173. margin: 20rpx auto 30rpx auto;
  174. border: 4rpx solid #D3EA5E;
  175. border: 4rpx solid $uni-bg-color-app;
  176. padding: 60rpx 0rpx;
  177. font-size: 36rpx;
  178. color: $uni-bg-color;
  179. border-top-right-radius: 60rpx;
  180. .title,
  181. .money {
  182. display: flex;
  183. align-items: flex-end;
  184. height: 60rpx;
  185. font-size: 28rpx;
  186. color: hsla(0, 0%, 100%, .8);
  187. box-sizing: border-box;
  188. padding-left: 30rpx;
  189. .money-unit {
  190. margin-right: 15rpx;
  191. font-size: 28rpx;
  192. font-weight: bold;
  193. color: white;
  194. }
  195. .money-detail{
  196. font-size: 50rpx;
  197. font-weight: bold;
  198. color: white;
  199. }
  200. }
  201. }
  202. .purse-input{
  203. background: white;
  204. border-radius: 20rpx;
  205. padding: 30rpx;
  206. margin-bottom: 15rpx;
  207. box-sizing: border-box;
  208. .title{
  209. padding-bottom: 30rpx;
  210. }
  211. .text{}
  212. .btn{
  213. display: flex;
  214. align-items: center;
  215. justify-content: center;
  216. background: black;
  217. color: white;
  218. height: 60rpx;
  219. border-radius: 100rpx;
  220. font-size: 30rpx;
  221. margin-top: 30rpx;
  222. }
  223. image{
  224. width: 150rpx;
  225. height: 150rpx;
  226. border-radius: 10rpx;
  227. }
  228. .image{
  229. width: 150rpx;
  230. height: 150rpx;
  231. border: 1px solid #333;
  232. border-radius: 10rpx;
  233. display: flex;
  234. justify-content: center;
  235. align-items: center;
  236. margin-left: 10rpx;
  237. }
  238. }
  239. .submit-btn{
  240. background: rgb(0, 208, 234);
  241. height: 80rpx;
  242. border-radius: 20rpx;
  243. display: flex;
  244. align-items: center;
  245. justify-content: center;
  246. color: white;
  247. font-size: 30rpx;
  248. }
  249. .steps {
  250. width: 90%;
  251. margin: 0rpx auto;
  252. padding-top: 30rpx;
  253. .steps-title {
  254. font-size: 30rpx;
  255. }
  256. .steps-content {
  257. color: #8e8e98;
  258. font-size: 30rpx;
  259. margin-top: 20rpx;
  260. }
  261. }
  262. }
  263. </style>