源码）"/>
前端uniapp请求真是案例（带源码）
目录
- 案例一
- 案例二
- 最后
案例一
<template><view class="box"><!-- <view class="title-back" @click="backPrivious"><</view> --><!-- <view class="title-back" @click="backPrivious">< </view> --><view class="currentLimit"><!-- 全部 --><view class="currentLimit-half" v-if="itemIndex === 1">当前可申请贷款额度<text>{{money2}}</text>元</view><!-- 一半 --><view class="currentLimit-half" v-if="itemIndex === 2">当前可申请贷款额度<text>{{money2}}</text>元</view><!-- 四分之一 a quarter--><view class="currentLimit-half" v-if="itemIndex === 3">当前可申请贷款额度<text>{{money2}}</text>元</view><!-- <view class="currentLimitImg" v-if="bank_open"><image src="../../static/withdrawalimg.png" mode="aspectFill"></image></view> --><view class="currentLimit-txt"><view class="currentLimit-txt-btm">我要提额</view><view class="currentLimit-txt-lft">想要更高贷款额度,试试提额吧！</view></view><view class="currentLimit-ipt"><text>￥</text> <input v-model="money" class="unir" type="number"placeholder-class="currentLimit-ipt-placeholder" placeholder="" /><image src="../../static/delete.png" mode="aspectFill" @click="getClear"></image></view><view class="currentLimit-tab"><view class="currentLimit-tab1" :class="{active:itemIndex == 1}" @click="get1(1)">全额申请</view><view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 2}" @click="get1(2)">1/2</view><view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 3}" @click="get1(3)">1/4</view></view></view><!-- annualcargo --><view class="annualcargo"><view class="annualcargo-list"><view class="annualcargo-list-lft">贷款期限</view><view class="annualcargo-list-rgt"><!-- 请选择<image src="../../static/right.png" mode="aspectFill"></image> --><uni-data-select v-model="value1" :localdata="term_listArray" @change="change"></uni-data-select><image src="/static/right.png" mode="aspectFill"></image></view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">年化利率<image src="../../static/access.png" mode="aspectFill"></image></view><view class="annualcargo-list-rgt2">{{interest_rate}}%</view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">贷款签约账号</view><view class="annualcargo-list-rgt"><!-- 请选择<image src="../../static/right.png" mode="aspectFill"></image> --><uni-data-select v-model="value2" :localdata="account_listArray" @change="change"></uni-data-select><!-- 请选择 --><image src="/static/right.png" mode="aspectFill"></image></view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">借款用途</view><view class="annualcargo-list-rgt3">生产经营</view></view></view><!--statement --><view class="statement"><view class="statement-txt">用途承诺声明:本企业承诺借款仅用于日常生产经营周转。不用于 股市和证券投资、金融衍生产品、股本权益性投资固定资产投资或国家有关法律、法规和规章禁止的生产、经营领域和其他消费 投资行为。<text>复制粘贴</text></view><view class="statement-textarea">请复制上段话到此文本框中再进行下一步操作</view></view><view class="statementTey">下一步</view><view class="statementTeyTop"></view></view></view>
</template><script>export default {data() {return {money: '',money2: '',itemIndex: 1,money: '',bank_open: '',interest_rate: '',value1: '',value2: '',range: [{value: 0,text: "美元($)"},{value: 1,text: "人民币(CNY)"},],term_listArray: [],account_listArray: []}},onLoad() {this.getCurrentMoney()},methods: {change(e) {console.log("e:", e);this.money_type = e;},backPrivious() {uni.navigateBack({delta: 1});},get1(index) {this.itemIndex = index;if(index == 1){this.money = this.money2}else if(index == 2){this.money = this.money/2}else if(index == 3){this.money = this.money/2}},getCurrentMoney() {let self = this;uni.request({url: '.php/api/index/getGeti',method: 'POST',data: {},success: (res) => {console.log(res.data.data.val, 'ressssssssss');self.money = res.data.data.val.money;self.money2 = res.data.data.val.money;self.bank_open = res.data.data.val.bank_open;self.interest_rate = res.data.data.val.interest_rate;// self.term_list = res.data.data.val.term_list;// console.log(res.data.data.val.term_list, 'res.data.data.val.term_lis');let term_listArray = [];res.data.data.val.term_list.forEach((item, index) => {term_listArray.push({value: index,text: item})// console.log(item,'itemmm');// console.log(term_listArray, 'term_listArray');})self.term_listArray = term_listArray;// console.log(term_listArray,'term_listArray');// self.account_list = res.data.data.val.account_list;let account_listArray = [];res.data.data.val.account_list.forEach((item, index) => {account_listArray.push({value: index,text: item})// console.log(item,'itemmm');// console.log(term_listArray, 'term_listArray');})self.account_listArray = account_listArray;// if (res.data && res.statusCode === 200) {// // 请求成功处理// } else {// // 请求失败处理// console.error('请求失败', res);// }},});},getClear(){this.money = ''}}}
</script><style scoped>page {background-color: #F8F9FA;}.box {}.currentLimit {width: 100vw !important;background-color: #FFF;}.currentLimit-half {padding: 20rpx 30rpx 10rpx 30rpx;box-sizing: border-box;font-size: 28rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;line-height: 50rpx;}.currentLimit-half text {font-size: 28rpx;font-family: ;/* font-family: Source Han Sans CN-Regular, Source Han Sans CN; */font-weight: 400;color: #4E73D4;line-height: 50rpx;}.currentLimitImg {width: 182rpx;height: 40rpx;margin-left: 30rpx;}.currentLimitImg image {width: 182rpx;height: 40rpx;}.currentLimit-txt {/* float: right; */display: flex;align-items: center;padding-right: 20rpx;flex-direction: row-reverse;}.currentLimit-txt-lft {font-size: 26rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #9B9B9B;line-height: 32rpx;}.currentLimit-txt-btm {width: 160rpx;height: 60rpx;background: #4A7AE0;border-radius: 232rpx 232rpx 232rpx 232rpx;opacity: 1;font-size: 28rpx;font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;font-weight: normal;color: #FFFFFF;line-height: 40rpx;display: flex;justify-content: center;align-items: center;margin-left: 10rpx;}.currentLimit-ipt {/* height: 150rpx; */height: 120rpx;opacity: 1;display: flex;align-items: center;padding-left: 20rpx;border-bottom: 2rpx solid #F4F4F4;}.currentLimit-ipt text {font-size: 56rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #000000;line-height: 32rpx;}.currentLimit-ipt input {font-size: 90rpx;font-family: HarmonyOS Naskh Arabic UI-Regular, HarmonyOS Naskh Arabic UI;font-weight: 400;color: #000000;line-height: 0rpx;}.currentLimit-tab {padding: 24rpx;box-sizing: border-box;display: flex;flex-direction: row;margin-left: 16rpx;}.currentLimit-tab1 {width: 144rpx;height: 44rpx;background: #F8F9FA;border-radius: 74rpx 74rpx 74rpx 74rpx;opacity: 1;font-size: 24rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #999999;line-height: 32rpx;display: flex;justify-content: center;align-items: center;border: 2rpx solid #F8F9FA;}.active {width: 144rpx;height: 44rpx;background: #EEF2FE;border-radius: 74rpx 74rpx 74rpx 74rpx;opacity: 0.5;border: 2rpx solid #4A7AE0;font-size: 24rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #5D77BA;display: flex;justify-content: center;align-items: center;}.currentLimit-tab2 {margin-left: 32rpx;}.annualcargo {margin-top: 24rpx;background-color: #FFF;}.annualcargo-list {/* padding: 34rpx 32rpx 32rpx 30rpx; */padding: 34rpx 22rpx 32rpx 30rpx;display: flex;justify-content: space-between;border-bottom: 2rpx solid #F4F4F4;}.statement {margin-top: 24rpx;background-color: #FFF;padding-bottom: 12rpx;}.statement-txt {padding: 30rpx 38rpx 32rpx 30rpx;box-sizing: border-box;font-size: 24rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;line-height: 36rpx;}.statement-txt text {font-size: 24rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #408ACB;line-height: 44rpx;border-bottom: 1rpx solid #408ACB;float: right;}.statement-textarea {margin: 5rpx 32rpx 32rpx 32rpx;padding-bottom: 32rpx;width: 686rpx;height: 336rpx;border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;border: 2rpx solid #999999;}.statementTey {width: 714rpx;height: 84rpx;background: #4A7AE0;border-radius: 137rpx 137rpx 137rpx 137rpx;opacity: 1;font-size: 32rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #FFFFFF;line-height: 36rpx;display: flex;justify-content: center;align-items: center;margin: 32rpx auto;}.statementTeyTop {height: 44rpx;}.annualcargo-list-lft {display: flex;align-items: center;font-size: 32rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;}.annualcargo-list-lft image {width: 24rpx;height: 24rpx;margin-left: 10rpx;}.statement-textarea {font-size: 28rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;/* line-height: 44rpx; */padding-top: 28rpx;padding-left: 22rpx;box-sizing: border-box;}.annualcargo-list-rgt {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #999999;line-height: 50rpx;display: flex;align-items: center;}/deep/.annualcargo-list-rgt .uni-select {border: none;/* width: 130rpx; */position: relative;left: 10rpx;}/deep/ .annualcargo-list-rgt .uni-select__input-placeholder {font-size: 28rpx !important;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular !important;font-weight: normal !important;color: #999999 !important;line-height: 50rpx !important;}/deep/ .annualcargo-list-rgt .uni-select__input-text{font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;}.annualcargo-list-rgt image {/* border: 1rpx solid red; */width: 40rpx;height: 40rpx;position: relative;/* left: 3rpx; */}.annualcargo-list-rgt2 {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;margin-right: 10rpx;}.annualcargo-list-rgt3 {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;margin-right: 10rpx;}.currentLimit-ipt input {width: 620rpx;}.currentLimit-ipt image {width: 40rpx;height: 40rpx;}
</style>
案例二
<template><view class="box"><!-- <view class="title-back" @click="backPrivious"><</view> --><!-- <view class="title-back" @click="backPrivious">< </view> --><view class="currentLimit"><!-- 全部 --><view class="currentLimit-half" v-if="itemIndex === 1">当前可申请贷款额度<text>{{money2}}</text>元</view><!-- 一半 --><view class="currentLimit-half" v-if="itemIndex === 2">当前可申请贷款额度<text>{{money2}}</text>元</view><!-- 四分之一 a quarter--><view class="currentLimit-half" v-if="itemIndex === 3">当前可申请贷款额度<text>{{money2}}</text>元</view><view class="currentLimitImg" v-if="bank_open"><image src="../../static/withdrawalimg.png" mode="aspectFill"></image></view><view class="currentLimit-txt"><view class="currentLimit-txt-btm">我要提额</view><view class="currentLimit-txt-lft">想要更高贷款额度,试试提额吧！</view></view><view class="currentLimit-ipt"><text>￥</text> <input v-model="money" class="unir" type="number"placeholder-class="currentLimit-ipt-placeholder" placeholder="" /><image src="../../static/delete.png" mode="aspectFill" @click="getClear"></image></view><view class="currentLimit-tab"><view class="currentLimit-tab1" :class="{active:itemIndex == 1}" @click="get1(1)">全额申请</view><view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 2}" @click="get1(2)">1/2</view><view class="currentLimit-tab1 currentLimit-tab2" :class="{active:itemIndex == 3}" @click="get1(3)">1/4</view></view></view><!-- annualcargo --><view class="annualcargo"><view class="annualcargo-list"><view class="annualcargo-list-lft">还款方式</view><view class="annualcargo-list-rgt"><!-- 请选择<image src="../../static/right.png" mode="aspectFill"></image> --><uni-data-select v-model="value2" :localdata="give_account_listArray" @change="change"></uni-data-select><image src="/static/right.png" mode="aspectFill"></image></view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">贷款期限</view><view class="annualcargo-list-rgt"><!-- 请选择<image src="../../static/right.png" mode="aspectFill"></image> --><uni-data-select v-model="value1" :localdata="term_listArray" @change="change"></uni-data-select><image src="/static/right.png" mode="aspectFill"></image></view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">年化利率<image src="../../static/access.png" mode="aspectFill"></image></view><view class="annualcargo-list-rgt2">{{interest_rate}}%</view></view><!-- <view class="annualcargo-list"><view class="annualcargo-list-lft">贷款签约账号</view><view class="annualcargo-list-rgt">请选择<image src="/static/right.png" mode="aspectFill"></image></view></view> --><view class="annualcargo-list"><view class="annualcargo-list-lft">贷款发放账户</view><view class="annualcargo-list-rgt3">{{give_account}}</view></view><view class="annualcargo-list"><view class="annualcargo-list-lft">借款用途</view><view class="annualcargo-list-rgt3">生产经营</view></view></view><!--statement --><view class="statement"><view class="statement-txt">用途承诺声明: 本企业承诺借款仅用于日常生产经营周转不用于股 市和证券投资、金融衍生产品、股本权益性投资固定资产投资或 国家有关法律、法规和规章禁止的生产、经营领域和其他消费投 资行为。若资金用途不符合上述要求贵行有权收回贷款，压降授 信额度，并追究相应法律责任。<text>复制粘贴</text></view><view class="statement-textarea">请复制上段话到此文本框中再进行下一步操作</view></view><view class="statementTey">下一步</view><view class="statementTeyTop"></view></view></view>
</template><script>export default {data() {return {money: '',itemIndex: 1,money: '',money2: '',bank_open: '',interest_rate: '',value1: '',value2: '',range: [{value: 0,text: "美元($)"},{value: 1,text: "人民币(CNY)"},],term_listArray: [],give_account_listArray: [],give_account: ''}},onLoad() {this.getCurrentMoney()},methods: {change(e) {console.log("e:", e);this.money_type = e;},backPrivious() {uni.navigateBack({delta: 1});},get1(index) {this.itemIndex = indexif (index == 1) {this.money = this.money2} else if (index == 2) {this.money = this.money / 2} else if (index == 3) {this.money = this.money / 2}},getCurrentMoney() {let self = this;uni.request({url: '.php/api/index/getCredit',method: 'POST',data: {},success: (res) => {self.money = res.data.data.val.money;self.money2 = res.data.data.val.money;self.bank_open = res.data.data.val.bank_open;self.interest_rate = res.data.data.val.interest_rate;// console.log(res.data.data.val, 'ressssssssss');self.give_account = res.data.data.val.give_account.slice(0, 3) + '*'.repeat(3) + res.data.data.val.give_account.slice(6);// self.term_list = res.data.data.val.term_list;// console.log(res.data.data.val.term_list, 'res.data.data.val.term_lis');let term_listArray = [];res.data.data.val.term_list.forEach((item, index) => {term_listArray.push({value: index,text: item})// console.log(item,'itemmm');// console.log(term_listArray, 'term_listArray');})self.term_listArray = term_listArray;// console.log(term_listArray,'term_listArray');// self.account_list = res.data.data.val.account_list;let account_listArray = [];res.data.data.val.term_list.forEach((item, index) => {account_listArray.push({value: index,text: item})})self.account_listArray = account_listArray;console.log(res.data.data.val.repayment_list, 'ressssssssss');let give_account_listArray = [];res.data.data.val.repayment_list.forEach((item, index) => {give_account_listArray.push({value: index,text: item})})self.give_account_listArray = give_account_listArray;// if (res.data && res.statusCode === 200) {// // 请求成功处理// } else {// // 请求失败处理// console.error('请求失败', res);// }},});},getClear() {this.money = ''}}}
</script><style scoped>page {background-color: #F8F9FA;}.box {}.currentLimit {width: 100vw !important;background-color: #FFF;}.currentLimit-half {padding: 20rpx 30rpx 10rpx 30rpx;box-sizing: border-box;font-size: 28rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;line-height: 50rpx;}.currentLimit-half text {font-size: 28rpx;font-family: ;/* font-family: Source Han Sans CN-Regular, Source Han Sans CN; */font-weight: 400;color: #4E73D4;line-height: 50rpx;}.currentLimitImg {width: 182rpx;height: 40rpx;margin-left: 30rpx;}.currentLimitImg image {width: 182rpx;height: 40rpx;}.currentLimit-txt {/* float: right; */display: flex;align-items: center;padding-right: 20rpx;flex-direction: row-reverse;}.currentLimit-txt-lft {font-size: 26rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #9B9B9B;line-height: 32rpx;}.currentLimit-txt-btm {width: 160rpx;height: 60rpx;background: #4A7AE0;border-radius: 232rpx 232rpx 232rpx 232rpx;opacity: 1;font-size: 28rpx;font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;font-weight: normal;color: #FFFFFF;line-height: 40rpx;display: flex;justify-content: center;align-items: center;margin-left: 10rpx;}.currentLimit-ipt {/* height: 150rpx; */height: 120rpx;opacity: 1;display: flex;align-items: center;padding-left: 20rpx;border-bottom: 2rpx solid #F4F4F4;}.currentLimit-ipt text {font-size: 56rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #000000;line-height: 32rpx;}.currentLimit-ipt input {font-size: 90rpx;font-family: HarmonyOS Naskh Arabic UI-Regular, HarmonyOS Naskh Arabic UI;font-weight: 400;color: #000000;line-height: 0rpx;}.currentLimit-tab {padding: 24rpx;box-sizing: border-box;display: flex;flex-direction: row;margin-left: 16rpx;}.currentLimit-tab1 {width: 144rpx;height: 44rpx;background: #F8F9FA;border-radius: 74rpx 74rpx 74rpx 74rpx;opacity: 1;font-size: 24rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #999999;line-height: 32rpx;display: flex;justify-content: center;align-items: center;border: 2rpx solid #F8F9FA;}.active {width: 144rpx;height: 44rpx;background: #EEF2FE;border-radius: 74rpx 74rpx 74rpx 74rpx;opacity: 0.5;border: 2rpx solid #4A7AE0;font-size: 24rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #5D77BA;display: flex;justify-content: center;align-items: center;}.currentLimit-tab2 {margin-left: 32rpx;}.annualcargo {margin-top: 24rpx;background-color: #FFF;}.annualcargo-list {/* padding: 34rpx 32rpx 32rpx 30rpx; */padding: 34rpx 22rpx 32rpx 30rpx;display: flex;justify-content: space-between;border-bottom: 2rpx solid #F4F4F4;}.statement {margin-top: 24rpx;background-color: #FFF;padding-bottom: 12rpx;}.statement-txt {padding: 30rpx 38rpx 32rpx 30rpx;box-sizing: border-box;font-size: 24rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;line-height: 36rpx;}.statement-txt text {font-size: 24rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #408ACB;line-height: 44rpx;border-bottom: 1rpx solid #408ACB;float: right;}.statement-textarea {margin: 5rpx 32rpx 32rpx 32rpx;padding-bottom: 32rpx;width: 686rpx;height: 336rpx;border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;border: 2rpx solid #999999;}.statementTey {width: 714rpx;height: 84rpx;background: #4A7AE0;border-radius: 137rpx 137rpx 137rpx 137rpx;opacity: 1;font-size: 32rpx;font-family: MicrosoftYaHei-, MicrosoftYaHei;font-weight: normal;color: #FFFFFF;line-height: 36rpx;display: flex;justify-content: center;align-items: center;margin: 32rpx auto;}.statementTeyTop {height: 44rpx;}.annualcargo-list-lft {display: flex;align-items: center;font-size: 32rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;}.annualcargo-list-lft image {width: 24rpx;height: 24rpx;margin-left: 10rpx;}.statement-textarea {font-size: 28rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;/* line-height: 44rpx; */padding-top: 28rpx;padding-left: 22rpx;box-sizing: border-box;}.annualcargo-list-rgt {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #999999;line-height: 50rpx;display: flex;align-items: center;}/deep/.annualcargo-list-rgt .uni-select {border: none;/* width: 130rpx; */position: relative;left: 10rpx;}/deep/ .annualcargo-list-rgt .uni-select__input-placeholder {font-size: 28rpx !important;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular !important;font-weight: normal !important;color: #999999 !important;line-height: 50rpx !important;}/deep/ .annualcargo-list-rgt .uni-select__input-text {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;}.annualcargo-list-rgt image {/* border: 1rpx solid red; */width: 40rpx;height: 40rpx;position: relative;/* left: 3rpx; */}.annualcargo-list-rgt2 {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;margin-right: 10rpx;}.annualcargo-list-rgt3 {font-size: 28rpx;font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;font-weight: normal;color: #3D3D3D;line-height: 50rpx;margin-right: 10rpx;}.currentLimit-ipt input {width: 620rpx;}.currentLimit-ipt image {width: 40rpx;height: 40rpx;}
</style>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
更多推荐
前端uniapp请求真是案例（带源码）
发布评论