猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

205 lines
3.5 KiB

<template>
<!-- <div>保证金</div> -->
<view class="box">
<view class="top" :style="{ borderRadius: '16rpx' }">
<view class="level account">
<view class="text1">
账户总览
</view>
<view class="level text4">
<view @click="jumpToDetail">
资金明细
</view>
<view @click="jumpToRefund" class="line">
申请退还
</view>
</view>
</view>
<view class="level Recharge">
<view class="money level">
<text>¥</text>
<input v-model="money" type="digit" />
</view>
<view class="text2" :style="{ borderRadius: '23.5rpx' }" @click="onPay">
去充值
</view>
</view>
</view>
<view class="center size-28">
<view class="text3">
保证金说明
</view>
<view >
<up-parse class="size-28" :content="configList.pet_money_text.paramValueArea"></up-parse>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
computed
} from 'vue'
import {
cashIn,
teacherPayPrice,
} from '@/api/amount/index.js'
import {
useStore
} from "vuex"
import { onShow } from '@dcloudio/uni-app'
const money = ref()
const store = useStore();
const configList = computed(() => {
return store.getters.configList
})
const userInfo = computed(() => {
return store.getters.userInfo
})
const jumpToDetail = () => {
uni.navigateTo({
url: "/otherPages/myOrdersManage/bond/detail"
})
}
const jumpToRefund = () => {
uni.navigateTo({
url: "/otherPages/myOrdersManage/bond/refund"
})
}
const onPay = async () => {
if (!money.value) {
return uni.showToast({
title: '请填写充值金额',
icon: "none"
})
}
let response = await teacherPayPrice({
money: money.value,
memberId: userInfo.value.userId
})
if (response.code == 200) {
uni.showToast({
title: response.msg,
icon: "none"
})
}
}
onShow(() => {
// money.value = Number(configList.value.pet_money.pet_money)
})
</script>
<style scoped lang="scss">
.box {
width: 750rpx;
height: 180rpx;
background-image: linear-gradient(to bottom, #FFBF60, #F2F2F2);
padding: 60rpx 24rpx 0 24rpx;
box-sizing: border-box;
}
.top {
width: 702rpx;
height: 227rpx;
background-color: #FFFFFF;
padding: 24rpx 34rpx 0 34rpx;
box-sizing: border-box;
}
.account {
justify-content: space-between;
color: #BDBDBD;
font-size: 22rpx;
}
.text1 {
font-size: 30rpx;
color: #000000;
}
.text4 {
color: #BDBDBD;
font-size: 22rpx;
}
.line {
position: relative;
padding: 0 0 0 20rpx;
&::before {
position: absolute;
top: 7rpx;
left: 10rpx;
content: "";
width: 3rpx;
height: 26rpx;
border-radius: 9rpx;
background-color: #BDBDBD;
}
}
.Recharge {
width: auto;
height: 71rpx;
justify-content: space-between;
margin: 30rpx 0 0 30rpx;
color: #FFFFFF;
font-size: 22rpx;
align-items: center;
}
.money {
width: 450rpx;
height: 71rpx;
/* background-color: #FFBF60; */
color: #FFBF60 !important;
font-size: 54rpx !important;
}
.money input {
margin-left: 5%;
font-size: 61rpx;
height: 71rpx;
}
.text2 {
width: 131rpx;
height: 47rpx;
background-color: #FFBF60;
line-height: 47rpx;
display: flex;
justify-content: center;
}
.center {
width: 100%;
height: 1265rpx;
font-size: 30rpx;
color: #707070;
padding: 44rpx 8rpx 0 34rpx;
box-sizing: border-box;
line-height: 45rpx;
}
.text3 {
color: #000000;
font-weight: 700;
margin-bottom: 30rpx;
}
.level {
display: flex;
}
.text4 {
/* color: ; */
}
</style>