宜轩到家/服务到家第三版,换个颜色
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
8.9 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="content">
  3. <mNavbar title="我的钱包" :leftClick="leftClick" />
  4. <view class="banner" />
  5. <view class="b-relative center font-m">
  6. <!-- <image src="/static/ms/w.png" /> -->
  7. <image src="/static/ms/1120.jpg" />
  8. <view class="title" style="position: absolute; top: 40rpx; left: 40rpx">
  9. <view style="line-height: 40rpx; font-size: 28rpx">账号余额</view>
  10. <view style="line-height: 60rpx; font-size: 40rpx">{{ userInfo.price }}</view>
  11. </view>
  12. <view class="font-menu flex flex-sb">
  13. <view @click="toRunningWater(0)">充值记录</view>
  14. <view @click="toRunningWater(1)">提现记录</view>
  15. <view @click="toRunningWater(2)">下单记录</view>
  16. <view @click="toRunningWater(3)">佣金记录</view>
  17. </view>
  18. </view>
  19. <view class="from-body">
  20. <view>我要充值</view>
  21. <view @click="selectOption(index)" class="top-label" v-for="(item,index) in rechargeList" :key="item.id">
  22. <view class="top-label-box">
  23. <view style="font-size: 14px; font-weight: 500; padding: 20rpx 0px 10rpx;">充值</view>
  24. <view class="top-label-box-one">
  25. <view style="font-size: 20px;">{{ item.money }}</view>
  26. <text></text>
  27. <!-- <view class="top-label-box-two">{{ item.discount == 0 ? "不享优惠" : `${item.discount}折优惠`}}</view> -->
  28. <view style="font-size: 12px; color: #6e3009; margin-left: 20rpx;">{{ item.sendMoney }}.00
  29. </view>
  30. </view>
  31. <view style="font-size: 10px; margin-top: 40rpx;">{{ item.remarks }}</view>
  32. <!-- <view class="top-label-box-tag">到期时间{{ item.endTime }}</view> -->
  33. <div :class="{ activeLabel : optionIndex == index }"></div>
  34. </view>
  35. </view>
  36. <view class="money">
  37. <van-cell-group inset>
  38. <van-field @update:model-value="priceChange" type="number" v-model="price" label="¥"
  39. placeholder="请输入自定义金额" label-width="10" label-align="center "
  40. style="background-color: #F5F5F5; margin: 10rpx 0px; border-radius: 20px;" />
  41. <van-field v-model="phone" placeholder="请输入技师手机号"
  42. style="background-color: #F5F5F5; margin: 10rpx 0px; border-radius: 20px;" />
  43. </van-cell-group>
  44. </view>
  45. <view>充值说明</view>
  46. <view v-html="instructions" style="line-height: 40rpx; font-size: 24rpx;color: #666666; font-weight: 400;">
  47. </view>
  48. </view>
  49. <view class="recharge">
  50. <view @click="wxPay" class="btn">
  51. 立即充值
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import mNavbar from '@/components/base/m-navbar.vue'
  58. export default {
  59. components: {
  60. mNavbar,
  61. },
  62. data() {
  63. return {
  64. rechargeList: [],
  65. userInfo: {},
  66. optionIndex: 0,
  67. instructions: [],
  68. price: '',
  69. phone: '',
  70. id: undefined,
  71. rechargePrice: 0
  72. }
  73. },
  74. onShow() {
  75. this.getrRechargeList()
  76. this.getUserInfo()
  77. this.getConfig()
  78. },
  79. methods: {
  80. getUserInfo() {
  81. this.$api('getUserInfo', {}, res => {
  82. if (res.code == 200) {
  83. this.userInfo = res.result;
  84. }
  85. })
  86. },
  87. //获取充值套餐
  88. getrRechargeList() {
  89. this.$api('getRechargeList', {}, res => {
  90. if (res.code == 200) {
  91. const rechargeList = res.result;
  92. this.rechargeList = rechargeList;
  93. //默认选中第一个充值方案
  94. this.rechargePrice = rechargeList[0].money;
  95. this.id = rechargeList[0].id;
  96. }
  97. })
  98. },
  99. leftClick() { //返回个人中心
  100. uni.switchTab({
  101. url: '/pages/index/center'
  102. })
  103. },
  104. selectOption(index) { //选择充值方案
  105. this.optionIndex = index;
  106. this.id = this.rechargeList[index].id;
  107. this.rechargePrice = this.rechargeList[index].money;
  108. },
  109. toRunningWater(status) { //跳转流水页面
  110. uni.navigateTo({
  111. url: `/pages/mine/runningWater?status=${status}`
  112. })
  113. },
  114. wxPay() { //立即充值(支付)
  115. if (this.phone) {
  116. if (!this.validatePhone(this.phone)) {
  117. return uni.showToast({
  118. title: '手机号格式不合法',
  119. icon: 'none'
  120. })
  121. }
  122. }
  123. let data = {
  124. price: this.rechargePrice ? this.rechargePrice : this.price,
  125. type: 0,
  126. phone: this.phone,
  127. id: this.id
  128. }
  129. this.$api('recharge', data, res => {
  130. if (res.code == 200) {
  131. this.chooseWXPay(res)
  132. }
  133. })
  134. },
  135. getConfig() { //获取配置
  136. this.$api('getConfig', {}, res => {
  137. if (res.code == 200) {
  138. for (let i = 0; i < res.result.length; i++) {
  139. if (res.result[i].keyValue == 'payValue') {
  140. this.instructions = res.result[i].content
  141. }
  142. }
  143. }
  144. })
  145. },
  146. priceChange(price) { //用户输入充值金额
  147. this.rechargePrice = undefined;
  148. this.optionIndex = undefined;
  149. this.id = undefined;
  150. },
  151. validatePhone(phone) {
  152. var phoneRegex = /^1(3|4[0-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9\d)\d{8}$/;
  153. return phoneRegex.test(phone);
  154. },
  155. chooseWXPay(res){
  156. window.jWeixin.config({
  157. debug: false,
  158. appId:res.result.appId,//必填
  159. jsApiList: ['chooseWXPay']
  160. });
  161. window.jWeixin.ready(function() {
  162. window.jWeixin.chooseWXPay({
  163. appId: res.result.appId,
  164. timestamp: res.result
  165. .timeStamp, // 支付签名时间戳,注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
  166. nonceStr: res.result.nonceStr, // 支付签名随机串,不长于 32 位
  167. package: res.result.packageValue, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
  168. signType: res.result.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  169. paySign: res.result.paySign, // 支付签名
  170. success: function(res) {
  171. this.getUserInfo()
  172. // 支付成功后的回调函数
  173. uni.navigateTo({
  174. url: '/pages/payment/payment-success?price=' + this.projectDetail.price
  175. })
  176. }
  177. });
  178. });
  179. jWeixin.error(function(res) {
  180. // uni.showToast({
  181. // icon: 'none',
  182. // title: '支付失败',
  183. // });
  184. });
  185. },
  186. }
  187. }
  188. </script>
  189. <style scoped>
  190. .content {
  191. padding-bottom: 60px;
  192. }
  193. body {
  194. background-color: #fff;
  195. }
  196. .banner {
  197. width: 100vw;
  198. height: 256rpx;
  199. background: linear-gradient(to right, #ecb978, #ffe6ed);
  200. }
  201. .center {
  202. width: 710rpx;
  203. height: 316rpx;
  204. margin: -204rpx auto 0;
  205. }
  206. .center image {
  207. width: 710rpx;
  208. height: 316rpx;
  209. border-radius: 12rpx;
  210. }
  211. .font-m {
  212. font-family: PingFang SC, PingFang SC-Bold;
  213. font-weight: 700;
  214. text-align: left;
  215. color: #ffffff;
  216. text-shadow: 0 4rpx 6rpx 0 rgba(40, 170, 133, 0.81);
  217. }
  218. .font-menu {
  219. font-size: 24rpx;
  220. font-family: PingFang SC, PingFang SC-Regular;
  221. font-weight: 500;
  222. text-align: center;
  223. color: #ffffff;
  224. line-height: 24rpx;
  225. width: 710rpx;
  226. position: absolute;
  227. left: 0;
  228. bottom: 25rpx;
  229. }
  230. .font-menu view {
  231. width: calc(100% / 4);
  232. border-right: 1rpx solid #fff;
  233. }
  234. .item-line input {
  235. width: 456rpx;
  236. height: 60rpx;
  237. line-height: 60rpx;
  238. background: #f5f5f5;
  239. border-radius: 12rpx;
  240. font-size: 24rpx;
  241. font-family: PingFang SC, PingFang SC-Medium;
  242. font-weight: 500;
  243. text-align: left;
  244. color: #939393;
  245. padding: 0 20rpx;
  246. }
  247. .from-body {
  248. padding: 40rpx 20rpx;
  249. font-size: 28rpx;
  250. text-align: left;
  251. color: #333333;
  252. }
  253. .top-label {
  254. position: relative;
  255. width: 96%;
  256. margin-left: 2%;
  257. height: 200rpx;
  258. /* background-image: url(/static/ms/cz.png); */
  259. background: linear-gradient(178deg, #ffe6ed, #ecb978);;
  260. color: #6e3009;
  261. background-repeat: no-repeat;
  262. background-size: 100% 100%;
  263. overflow: hidden;
  264. border-radius: 10px;
  265. margin-top: 20rpx;
  266. }
  267. .top-label-box {
  268. position: relative;
  269. height: 100%;
  270. padding-left: 35rpx;
  271. box-sizing: border-box;
  272. }
  273. .top-label-box .activeLabel {
  274. position: absolute;
  275. left: 0;
  276. top: 0;
  277. width: 100%;
  278. height: 100%;
  279. background: url('../../static/ms/select.png?x=1');
  280. background-repeat: no-repeat;
  281. background-size: 100% 100%;
  282. }
  283. .top-label-box-one {
  284. display: flex;
  285. align-items: center;
  286. }
  287. .top-label-box-two {
  288. margin-left: 18rpx;
  289. font-size: 12px;
  290. padding: 6rpx 8rpx;
  291. background-color: #EBCB85;
  292. border-bottom-left-radius: 10px;
  293. border-top-right-radius: 10px;
  294. }
  295. .top-label-box-tag {
  296. position: absolute;
  297. border: 1px solid;
  298. font-size: 12px;
  299. padding: 6rpx 10rpx;
  300. color: #fff;
  301. background-color: #24CC80;
  302. top: -1px;
  303. right: 0px;
  304. border-bottom-left-radius: 10px;
  305. }
  306. .money {
  307. margin: 20rpx 0rpx;
  308. }
  309. .recharge {
  310. position: fixed;
  311. display: flex;
  312. justify-content: center;
  313. align-items: center;
  314. left: 0;
  315. bottom: 0;
  316. width: 750rpx;
  317. height: 100rpx;
  318. background: white;
  319. }
  320. .recharge .btn {
  321. display: flex;
  322. align-items: center;
  323. justify-content: center;
  324. width: 85%;
  325. height: 80rpx;
  326. border-radius: 40rpx;
  327. color: #6e3009;
  328. font-size: 28rpx;
  329. background: linear-gradient(178deg, #ffe6ed, #ecb978);
  330. }
  331. @media all and (min-width: 961px) {
  332. .recharge {
  333. left: 50% !important;
  334. transform: translateX(-50%);
  335. }
  336. }
  337. </style>