初始版本
This commit is contained in:
贾祥聪
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg-white rounded-lg flex items-center mt-4 py-[20rpx] px-[32rpx]">
|
||||
<text class="text-[40rpx] font-bold">¥</text>
|
||||
<u-input placeholder="请输入自定义金额" class="ml-2" v-model="money"></u-input>
|
||||
</view>
|
||||
<view class="mt-[50rpx]">
|
||||
<view class="flex items-center">
|
||||
<view class="block"></view>
|
||||
<view class="text-lg font-medium ml-2">支付方式</view>
|
||||
</view>
|
||||
<view class="mt-[28rpx]" v-for="item in payWayList" :key="item.pay_way" @click="choosePayWay = item.pay_way">
|
||||
<view class="bg-white rounded-lg py-[26rpx] px-[32rpx] flex items-center">
|
||||
<u-image width="50" height="50" :src="item.image"></u-image>
|
||||
<view class="ml-2 font-semibold">{{ item.extra }}</view>
|
||||
<checkboxMark background="#7E5008" class="ml-auto" :select="choosePayWay == item.pay_way"></checkboxMark>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-[50rpx]">
|
||||
<view class="flex items-center">
|
||||
<view class="block"></view>
|
||||
<view class="text-lg font-medium ml-2">保证金套餐</view>
|
||||
</view>
|
||||
<view class="grid grid-cols-3 gap-2 mt-[28rpx]">
|
||||
<view
|
||||
v-for="(item, index) in listData"
|
||||
:key="index"
|
||||
class="relative bg-white p-[50rpx] flex flex-col items-center rounded-lg"
|
||||
style="overflow: hidden;"
|
||||
@click="money = item.money"
|
||||
>
|
||||
<view class="text-[28rpx] mb-[6rpx]">{{ item.name }}</view>
|
||||
<view class="mb-[40rpx] text-center">
|
||||
<price
|
||||
fontWeight="900"
|
||||
:content="item.money"
|
||||
color="#7E5008"
|
||||
main-size="48rpx"
|
||||
minor-size="28rpx"
|
||||
></price>
|
||||
</view>
|
||||
<view class="absolute bottom-0 bg-[#F9F1E6] w-full text-center text-[#7E5008] text-[24rpx] py-[6rpx]">
|
||||
日限{{ item.order_limit }}单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import checkboxMark from '@/components/checkbox-mark/index.vue'
|
||||
import { getPayWay } from '@/api/pay'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const payWayList = ref<any>([])
|
||||
const choosePayWay = ref(0)
|
||||
const money = ref()
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const getPayWayList = async () => {
|
||||
const data = await getPayWay()
|
||||
choosePayWay.value = data.lists.find(element => element.is_default == 1)?.pay_way || 0
|
||||
payWayList.value = data.lists
|
||||
}
|
||||
|
||||
const prop = defineProps({
|
||||
listData: {
|
||||
type: Array,
|
||||
default: () => [] as any
|
||||
}
|
||||
})
|
||||
|
||||
getPayWayList()
|
||||
|
||||
watch(
|
||||
() => [money.value,choosePayWay.value],
|
||||
([value1,value2]) => {
|
||||
emit('change',{pay_way:choosePayWay.value,money:money.value})
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.block {
|
||||
width: 4px;
|
||||
height: 36rpx;
|
||||
background-color: #7e5008;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="bottom fixed z-50 bottom-0 bg-white w-full pt-[20rpx] px-[30rpx] pb-[60rpx]">
|
||||
<u-button v-if="true" :custom-style="btnClass" @click="beClick">缴纳保证金</u-button>
|
||||
<view class="mt-[24rpx] text-[32rpx] font-bold text-center" @click="toCashOut">提现</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { WithdrawEnum } from '@/enums/withdraw'
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const btnClass = ref({
|
||||
background: '#424755',
|
||||
color: '#fff'
|
||||
})
|
||||
|
||||
//点击
|
||||
const beClick = () => {
|
||||
console.log(uni.$u.color['error'])
|
||||
emit('click')
|
||||
}
|
||||
|
||||
//提现
|
||||
const toCashOut = () => {
|
||||
uni.navigateTo({
|
||||
url: `/packages/pages/cash_out/cash_out?apply_type=${WithdrawEnum.EARNEST}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
|
||||
}
|
||||
</style>
|
||||
75
business_uniapp/src/packages/pages/bond/components/card.vue
Normal file
75
business_uniapp/src/packages/pages/bond/components/card.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<view class="w-full relative mt-[100rpx]">
|
||||
<image
|
||||
class="w-[100%] h-[316rpx]"
|
||||
:src="bondCard"
|
||||
style="border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 30rpx"
|
||||
></image>
|
||||
<view class="absolute w-full z-30 top-0 p-4 text-white">
|
||||
<view class="flex items-center">
|
||||
<u-image
|
||||
:src="userStore.userInfo.logo"
|
||||
width="60"
|
||||
height="60"
|
||||
border-radius="50%"
|
||||
></u-image>
|
||||
<view class="text-base text-white ml-2">
|
||||
{{ userStore.userInfo.name }}
|
||||
</view>
|
||||
|
||||
<view class="ml-auto text-white" @click="toCashOutRecord">提现记录</view>
|
||||
</view>
|
||||
<view class="mt-4">
|
||||
<price
|
||||
color="#fff"
|
||||
minor-size="40rpx"
|
||||
main-size="60rpx"
|
||||
:content="bondData"
|
||||
fontWeight="900"
|
||||
></price>
|
||||
</view>
|
||||
<view class="text-lg mt-2">当前保证金（元）</view>
|
||||
<view class="absolute text-[#7E5008] right-[0rpx] bottom-[50rpx] bg-liu-shui"
|
||||
@click="goPage('/packages/pages/account_detail/index?type=2')"
|
||||
>
|
||||
<span>账户流水</span>
|
||||
<u-icon name="arrow-right" color="#7E5008" :size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import bondCard from '../../../static/images/bondCard.png'
|
||||
import price from '@/components/price/price.vue'
|
||||
import { WithdrawEnum } from '@/enums/withdraw'
|
||||
|
||||
const prop = defineProps({
|
||||
bondData: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const toCashOutRecord = () => {
|
||||
uni.navigateTo({
|
||||
url: `/packages/pages/cash_out_record/cash_out_record?apply_type=${WithdrawEnum.EARNEST}`
|
||||
})
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
//页面跳转
|
||||
const goPage = (url: string) => {
|
||||
uni.navigateTo({ url: url })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-liu-shui {
|
||||
padding: 18rpx 16rpx 18rpx 28rpx;
|
||||
background-color: #FFF;
|
||||
border-radius: 30px 0 0 30px;
|
||||
}
|
||||
</style>
|
||||
29
business_uniapp/src/packages/pages/bond/components/nav.vue
Normal file
29
business_uniapp/src/packages/pages/bond/components/nav.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<u-navbar
|
||||
:is-back="true"
|
||||
title="我的保证金"
|
||||
:border-bottom="false"
|
||||
:title-bold="true"
|
||||
:fixed="false"
|
||||
title-color="#fff"
|
||||
back-icon-color="#fff"
|
||||
:background="{
|
||||
background: percent == 0 ? 'rgba(256,256, 256, 0)' : 'rgba(53,55, 66, 1)'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
percent: {
|
||||
type: Number,
|
||||
defualt: 0
|
||||
}
|
||||
})
|
||||
|
||||
watch((value: any) => {
|
||||
console.log(value)
|
||||
}, props.percent)
|
||||
</script>
|
||||
Reference in New Issue
Block a user