Commit 23daeca1 authored by 王建威's avatar 王建威

采购分期

parent 180469cb
...@@ -18,5 +18,9 @@ ...@@ -18,5 +18,9 @@
.uni-input-input { .uni-input-input {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.dlb {
display: inline-block;
vertical-align: middle;
} }
</style> </style>
// php测试环境 // php测试环境
// export const php = 'http://test.pet-dbc.cn/mobile/index.php?' export const php = 'http://test.pet-dbc.cn/mobile/index.php?'
// php镜像 // php镜像
export const php = 'https://jingxiang.pet-dbc.cn/mobile/index.php?' // export const php = 'https://jingxiang.pet-dbc.cn/mobile/index.php?'
// php正式环境 // php正式环境
// export const php = 'https://shop.pet-dbc.cn/mobile/index.php?' // export const php = 'https://shop.pet-dbc.cn/mobile/index.php?'
// go测试环境 // go测试环境
// export const go = 'https://tm.pet-dbc.cn' export const go = 'https://tm.pet-dbc.cn'
// go镜像环境 // go镜像环境
export const go = 'https://jxm.pet-dbc.cn' // export const go = 'https://jxm.pet-dbc.cn'
// go正式环境 // go正式环境
// export const go = 'https://m.pet-dbc.cn'; // export const go = 'https://m.pet-dbc.cn';
\ No newline at end of file
<template>
<view class="topbar_view">
<text class="eosfont left_icon">&#xe622;</text>
{{this.title}}
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
}
},
methods: {
back() {
uni.navigateBack();
}
}
}
</script>
<style lang="less" scoped>
.topbar_view {
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #212121;
font-size: 30rpx;
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #fff;
.left_icon {
position: absolute;
left: 20rpx;
}
}
</style>
<template>
<view class="flex_searchbar">
<i class="logo"></i>
<view class="search_view flex">
<icon type="search" class="search_icon" size="16" @click="search"></icon>
<input type="text" @click="search" class="search_input" v-model="keyword" placeholder="请输入商品名称">
</view>
<text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text>
<i v-else class="eosfont person_icon" @click="jumpPhpPage('app=member')">&#xe636;</i>
</view>
</template>
<script>
import { php } from '../common/host.js';
export default {
props: {
isLogin: {
type: Number,
default: 0
}
},
data() {
return {
keyword: ''
}
},
methods: {
jumpPhpPage(url) {
let link = url ? `${php}${url}` : php;
window.location.href = link;
},
search() {
uni.navigateTo({
url: `/pages/searchhistory/searchhistory?keyword=${this.keyword}`
});
}
},
components: {
}
}
</script>
<style lang="less" scoped>
.person_icon {
font-size: 48rpx;
line-height: 60rpx;
}
.flex_searchbar {
display: flex;
justify-content: space-between;
padding: 20rpx 24rpx;
position: fixed;
width: 100%;
top: 0;
left: 0;
box-sizing: border-box;
z-index: 100;
background: #fff;
.flex {
display: flex;
}
.logo {
width: 192rpx;
height: 60rpx;
background: url(../static/index/2931581575297_.pic.jpg) no-repeat;
background-size: 100% 100%;
}
.search_view {
width: 380rpx;
height: 60rpx;
background: #F5F5F5;
border-radius: 30rpx;
}
.search_icon {
display: flex;
justify-content: center;
align-items: center;
width: 56rpx;
height: 56rpx;
}
.search_input {
height: 60rpx;
font-size: 28rpx;
}
.login_btn {
width: 92rpx;
height: 60rpx;
line-height: 60rpx;
background: #FFCD00;
border-radius: 16rpx;
color: #212121;
font-size: 28rpx;
text-align: center;
}
}
</style>
<template>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
class="uni-collapse-cell">
<view class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<!-- #ifdef MP-ALIPAY -->
<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow">
<uni-icons color="#bbb" size="20" type="arrowdown" />
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow" color="#212121" size="20" type="arrowdown" />
<!-- #endif -->
</view>
<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
<slot />
</view>
</view>
</view>
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
export default {
name: 'UniCollapseItem',
components: {
uniIcons
},
props: {
title: {
// 列表标题
type: String,
default: ''
},
name: {
// 唯一标识符
type: [Number, String],
default: 0
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
showAnimation: {
// 是否显示动画
type: Boolean,
default: false
},
open: {
// 是否展开
type: Boolean,
default: false
},
thumb: {
// 缩略图
type: String,
default: ''
}
},
data() {
return {
isOpen: false
}
},
watch: {
open(val) {
this.isOpen = val
}
},
inject: ['collapse'],
created() {
this.isOpen = this.open
this.nameSync = this.name ? this.name : this.collapse.childrens.length
this.collapse.childrens.push(this)
if (String(this.collapse.accordion) === 'true') {
if (this.isOpen) {
let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
if (lastEl) {
this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
}
}
}
},
methods: {
onClick() {
if (this.disabled) {
return
}
if (String(this.collapse.accordion) === 'true') {
this.collapse.childrens.forEach(vm => {
if (vm === this) {
return
}
vm.isOpen = false
})
}
this.isOpen = !this.isOpen
this.collapse.onChange && this.collapse.onChange()
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni.scss';
.uni-collapse-cell {
flex-direction: column;
border-color: $uni-border-color;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 30rpx;
}
.uni-collapse-cell--hover {
background-color: $uni-bg-color;
}
.uni-collapse-cell--open {
background-color: $uni-bg-color;
}
.uni-collapse-cell--disabled {
background-color: $uni-bg-color-hover;
// opacity: 0.3;
}
.uni-collapse-cell--hide {
height: 48px;
}
.uni-collapse-cell--animation {
// transition: transform 0.3s ease;
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.uni-collapse-cell__title {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 40rpx;
}
.uni-collapse-cell__title:active {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell__title-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0deg);
transform-origin: center center;
}
.uni-collapse-cell__title-arrow-active {
transform: rotate(180deg);
}
.uni-collapse-cell__title-text {
flex: 1;
font-size: 32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
.uni-collapse-cell__content {
overflow: hidden;
}
.uni-collapse-cell__wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-collapse-cell__content--hide {
height: 0px;
line-height: 0px;
}
</style>
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni.scss';
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
}
</style>
...@@ -201,6 +201,7 @@ ...@@ -201,6 +201,7 @@
line-height: 32rpx; line-height: 32rpx;
margin: 5rpx; margin: 5rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
border-radius: 8rpx;
} }
</style> </style>
\ No newline at end of file
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@font-face { @font-face {
font-family: uniicons; font-family: uniicons;
......
<template>
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper-box" @click.stop="clear">
<slot />
</view>
</uni-transition>
</view>
</template>
<script>
import uniTransition from '../uni-transition/uni-transition.vue'
/**
* PopUp 弹出层
* @description 弹出层组件,为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @property {Boolean} animation = [ture|false] 是否开启动画
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
* @event {Function} change 打开关闭弹窗触发,e={show: false}
*/
export default {
name: 'UniPopup',
components: {
uniTransition
},
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
type: {
type: String,
default: 'center'
},
// maskClick
maskClick: {
type: Boolean,
default: true
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
maskClass: {
'position': 'fixed',
'bottom': 0,
'top': 0,
'left': 0,
'right': 0,
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
},
transClass: {
'position': 'fixed',
'left': 0,
'right': 0,
}
}
},
watch: {
type: {
handler: function(newVal) {
switch (this.type) {
case 'top':
this.ani = ['slide-top']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
}
break
case 'bottom':
this.ani = ['slide-bottom']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
'bottom': 0
}
break
case 'center':
this.ani = ['zoom-out', 'fade']
this.transClass = {
'position': 'fixed',
/* #ifndef APP-NVUE */
'display': 'flex',
'flexDirection': 'column',
/* #endif */
'bottom': 0,
'left': 0,
'right': 0,
'top': 0,
'justifyContent': 'center',
'alignItems': 'center'
}
break
}
},
immediate: true
}
},
created() {
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
},
methods: {
clear(e) {
// TODO nvue 取消冒泡
e.stopPropagation()
},
open() {
this.showPopup = true
this.$nextTick(() => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.showTrans = true
}, 50);
})
this.$emit('change', {
show: true
})
},
close(type) {
this.showTrans = false
this.$nextTick(() => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.$emit('change', {
show: false
})
this.showPopup = false
}, 300)
})
},
onTap() {
if (!this.maskClick) return
this.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup {
position: fixed;
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
opacity: 0;
}
.mask-ani {
transition-property: opacity;
transition-duration: 0.2s;
}
.uni-top-mask {
opacity: 1;
}
.uni-bottom-mask {
opacity: 1;
}
.uni-center-mask {
opacity: 1;
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
}
.top {
top: 0;
left: 0;
right: 0;
transform: translateY(-500px);
}
.bottom {
bottom: 0;
left: 0;
right: 0;
transform: translateY(500px);
}
.center {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
bottom: 0;
left: 0;
right: 0;
top: 0;
justify-content: center;
align-items: center;
transform: scale(1.2);
opacity: 0;
}
.uni-popup__wrapper-box {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
}
.content-ani {
// transition: transform 0.3s;
transition-property: transform, opacity;
transition-duration: 0.2s;
}
.uni-top-content {
transform: translateY(0);
}
.uni-bottom-content {
transform: translateY(0);
}
.uni-center-content {
transform: scale(1);
opacity: 1;
}
</style>
<template>
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
@click="change">
<slot></slot>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
*/
export default {
name: 'uniTransition',
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: Array,
default () {
return []
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
isShow: false,
transform: '',
ani: { in: '',
active: ''
}
};
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
this.close()
}
},
immediate: true
}
},
computed: {
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transfrom = ''
for (let i in styles) {
let line = this.toLine(i)
transfrom += line + ':' + styles[i] + ';'
}
return transfrom
}
},
created() {
// this.timer = null
// this.nextTick = (time = 50) => new Promise(resolve => {
// clearTimeout(this.timer)
// this.timer = setTimeout(resolve, time)
// return this.timer
// });
},
methods: {
change() {
this.$emit('click', {
detail: this.isShow
})
},
open() {
clearTimeout(this.timer)
this.isShow = true
this.transform = ''
this.ani.in = ''
for (let i in this.getTranfrom(false)) {
if (i === 'opacity') {
this.ani.in = 'fade-in'
} else {
this.transform += `${this.getTranfrom(false)[i]} `
}
}
this.$nextTick(() => {
setTimeout(() => {
this._animation(true)
}, 50)
})
},
close(type) {
clearTimeout(this.timer)
this._animation(false)
},
_animation(type) {
let styles = this.getTranfrom(type)
// #ifdef APP-NVUE
if(!this.$refs['ani']) return
animation.transition(this.$refs['ani'].ref, {
styles,
duration: this.duration, //ms
timingFunction: 'ease',
needLayout: false,
delay: 0 //ms
}, () => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
})
// #endif
// #ifndef APP-NVUE
this.transform = ''
for (let i in styles) {
if (i === 'opacity') {
this.ani.in = `fade-${type?'out':'in'}`
} else {
this.transform += `${styles[i]} `
}
}
this.timer = setTimeout(() => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
}, this.duration)
// #endif
},
getTranfrom(type) {
let styles = {
transform: ''
}
this.modeClass.forEach((mode) => {
switch (mode) {
case 'fade':
styles.opacity = type ? 1 : 0
break;
case 'slide-top':
styles.transform += `translateY(${type?'0':'-100%'}) `
break;
case 'slide-right':
styles.transform += `translateX(${type?'0':'100%'}) `
break;
case 'slide-bottom':
styles.transform += `translateY(${type?'0':'100%'}) `
break;
case 'slide-left':
styles.transform += `translateX(${type?'0':'-100%'}) `
break;
case 'zoom-in':
styles.transform += `scale(${type?1:0.8}) `
break;
case 'zoom-out':
styles.transform += `scale(${type?1:1.2}) `
break;
}
})
return styles
},
_modeClassArr(type) {
let mode = this.modeClass
if (typeof(mode) !== "string") {
let modestr = ''
mode.forEach((item) => {
modestr += (item + '-' + type + ',')
})
return modestr.substr(0, modestr.length - 1)
} else {
return mode + '-' + type
}
},
// getEl(el) {
// console.log(el || el.ref || null);
// return el || el.ref || null
// },
toLine(name) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
}
}
</script>
<style>
.uni-transition {
transition-timing-function: ease;
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.fade-in {
opacity: 0;
}
.fade-active {
opacity: 1;
}
.slide-top-in {
/* transition-property: transform, opacity; */
transform: translateY(-100%);
}
.slide-top-active {
transform: translateY(0);
/* opacity: 1; */
}
.slide-right-in {
transform: translateX(100%);
}
.slide-right-active {
transform: translateX(0);
}
.slide-bottom-in {
transform: translateY(100%);
}
.slide-bottom-active {
transform: translateY(0);
}
.slide-left-in {
transform: translateX(-100%);
}
.slide-left-active {
transform: translateX(0);
opacity: 1;
}
.zoom-in-in {
transform: scale(0.8);
}
.zoom-out-active {
transform: scale(1);
}
.zoom-out-in {
transform: scale(1.2);
}
</style>
...@@ -42,8 +42,68 @@ ...@@ -42,8 +42,68 @@
"style": { "style": {
"navigationBarTitleText": "商品搜索-谛宝多多商城" "navigationBarTitleText": "商品搜索-谛宝多多商城"
} }
},
{
"path": "pages/financial/financialstage",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/choosetype",
"style": {
"navigationBarTitleText": "金融分期-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage1",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage2",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/apply/applypage3",
"style": {
"navigationBarTitleText": "填写资料-谛宝多多商城"
}
},
{
"path": "pages/signcontract/signcontract",
"style": {
"navigationBarTitleText": "签署合同-谛宝多多商城"
}
},
{
"path": "pages/installment/installmentinfo",
"style": {
"navigationBarTitleText": "商品详情-谛宝多多商城"
}
},
{
"path": "pages/refuse/refuse",
"style": {
"navigationBarTitleText": "驳回原因-谛宝多多商城"
}
},
{
"path": "pages/checkstand/checkstand",
"style": {
"navigationBarTitleText": "谛宝收银台-谛宝多多商城"
}
},
{
"path": "pages/checkstand/refund",
"style": {
"navigationBarTitleText": "退定金-谛宝多多商城"
}
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "谛宝多多商城", "navigationBarTitleText": "谛宝多多商城",
......
<template>
<view class="page1_content">
<view class="page1_top">
<view>
<view class="apply_title">企业信息</view>
<view class="apply_desc">请填写企业的详细信息</view>
</view>
<!-- <text class="unline_btn">申请线下审核</text> -->
</view>
<view class="apply_data_content">
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">街道/门头照片</view>
<view class="apply_desc">请上传所在街道与企业门头清晰照片,以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view class="apply_upload" @click="uploadImage()">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">所在街道照片</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">企业门头照片</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">动物诊疗证/兽医证照片</view>
<view class="apply_desc">请上传动物诊疗证与兽医证照片清晰照片,以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">动物诊疗证(含公章) 照片</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">兽医证(含公章) 照片</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">营业执照/经营场所证明照片</view>
<view class="apply_desc">请上传营业执照与经营场所清晰照片,以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">营业执照(含公章) 照片</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">经营场所证明材料照片</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">企业半年银行流水(需含户名)</view>
<view class="apply_desc">支持(zip/rar)格式</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">企业半年银行流水</text>
</view>
</view>
</view>
<text class="next_step_btn">下一步</text>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
uploadImage() {
uni.chooseImage({
success: (res) => {
console.log(res)
}
})
}
}
}
</script>
<style lang="less" scoped>
.page1_content {
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
.page1_top {
background-color: #F8F8F8;
height: 150rpx;
padding: 28rpx 36rpx 26rpx 36rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.unline_btn {
width: 200rpx;
height: 64rpx;
line-height: 64rpx;
border: 1px solid #DCDCDC;
background: #fff;
border-radius: 16rpx;
color: #212121;
font-size: 24rpx;
text-align: center;
}
}
.apply_data_content {
background: #fff;
padding: 0 36rpx;
box-sizing: border-box;
width: 100%;
.apply_data_item {
display: flex;
justify-content: space-between;
.apply_upload {
margin-top: 40rpx;
width: 328rpx;
height: 200rpx;
background: rgba(248,248,248,1);
border-radius: 16rpx;
.icons {
width: 36rpx;
height: 36rpx;
color: #AEAEAE;
display: block;
margin: 72rpx auto 10rpx;
}
.upload_font {
font-size: 24rpx;
color: #AEAEAE;
display: block;
text-align: center;
}
}
}
}
.next_step_btn {
width: 678rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FFCD00;
opacity: 0.2;
margin: 63rpx auto 42rpx;
display: block;
border-radius: 16rpx;
font-size: 28rpx;
}
}
</style>
\ No newline at end of file
<template>
<view class="page2_content">
<view class="apply_data_content">
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">法人信息</view>
<view class="apply_desc">请填写企业法人的详细信息</view>
</view>
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">法人身份证照片</view>
<view class="apply_desc">请上传法人手持身份证清晰照片,以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">手持身份证 (人像面)</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">手持身份证 (国徽面)</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">补充照片</view>
<view class="apply_desc">请上传企业法人相关证明清晰照片,以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">法人在企业内照片</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">法人银行征信报告</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">法人半年银行流水(需含户名)</view>
<view class="apply_desc">支持(zip/rar)格式</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">企业半年银行流水</text>
</view>
</view>
<view class="apply_btn_box">
<view class="apply_btn">上一步</view>
<view class="apply_btn next_btn">下一步</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="less" scoped>
.page2_content {
background: #fff;
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
.apply_data_content {
background: #fff;
padding: 0 36rpx;
box-sizing: border-box;
width: 100%;
.apply_data_item {
display: flex;
justify-content: space-between;
.apply_upload {
margin-top: 40rpx;
width: 328rpx;
height: 200rpx;
background: rgba(248,248,248,1);
border-radius: 16rpx;
.icons {
width: 36rpx;
height: 36rpx;
color: #AEAEAE;
display: block;
margin: 72rpx auto 10rpx;
}
.upload_font {
font-size: 24rpx;
color: #AEAEAE;
display: block;
text-align: center;
}
}
}
.apply_btn_box {
display: flex;
justify-content: space-between;
width: 678rpx;
margin: 60rpx 0;
.apply_btn {
width:328rpx;
height:80rpx;
background:rgba(245,245,245,1);
border-radius:16rpx;
background: #f5f5f5;
line-height: 80rpx;
font-size: 28rpx;
text-align: center;
}
.next_btn {
background: #FFCD00;
}
}
}
}
</style>
<template>
<view class="page3_content">
<view class="page3_tips">其他补充信息(选填)</view>
<view class="apply_data_content">
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">资产证明补充</view>
<view class="apply_desc">上传更多的资产证明可以更快认证您的资质</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">房产证明照片</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">存款或理财照片/截图</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">法人芝麻信用照片/截图</text>
</view>
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">企业芝麻信用照片/截图</text>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">其他补充证明</view>
</view>
<view class="apply_data_item">
<view class="apply_upload">
<text class="eosfont icons">&#xe60d;</text>
<text class="upload_font">机动车驾驶证照片</text>
</view>
</view>
<view class="apply_btn_box">
<view class="apply_btn">上一步</view>
<view class="apply_btn next_btn">下一步</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="less" scoped>
.page3_content {
background: #fff;
.apply_data_content {
background: #fff;
padding: 0 36rpx;
box-sizing: border-box;
width: 100%;
.apply_data_item {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.apply_upload {
margin-top: 40rpx;
width: 328rpx;
height: 200rpx;
background: rgba(248,248,248,1);
border-radius: 16rpx;
.icons {
width: 36rpx;
height: 36rpx;
color: #AEAEAE;
display: block;
margin: 72rpx auto 10rpx;
}
.upload_font {
font-size: 24rpx;
color: #AEAEAE;
display: block;
text-align: center;
}
}
}
.apply_btn_box {
display: flex;
justify-content: space-between;
width: 678rpx;
margin: 60rpx 0;
.apply_btn {
width:328rpx;
height:80rpx;
background:rgba(245,245,245,1);
border-radius:16rpx;
background: #f5f5f5;
line-height: 80rpx;
font-size: 28rpx;
text-align: center;
}
.next_btn {
background: #FFCD00;
}
}
}
.page3_tips {
color: #7C7C7C;
font-size: 32rpx;
width: 678rpx;
margin: 36rpx auto 0;
}
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
}
</style>
<template>
<view style="padding-top: 80rpx;">
<TopBar title="金融分期"/>
<view class="type_view" @click="changeType(1)" :class="{'act': type === 1}" style="margin-top:36rpx">
<view>申请线上审核资质</view>
<view>需填写企业/法人/其他信息</view>
</view>
<view class="type_view" @click="changeType(2)" :class="{'act': type === 2}" style="margin-top:10rpx">
<view>申请线下审核资质</view>
<view>专属业务人员上门收集企业资质</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
type: 1
}
},
methods: {
changeType(type) {
this.type = type;
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.type_view {
width: 702rpx;
height: 214rpx;
border: 1px solid #DCDCDC;
border-radius: 16rpx;
box-sizing: border-box;
margin: 0 auto;
background: #fff;
view:nth-of-type(1) {
margin-top: 60rpx;
font-size:36rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 50rpx;
text-align: center;
}
view:nth-of-type(2) {
color: #979797;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
margin-top: 10rpx;
}
}
.act {
background: #f8f8f8;
border-color: #f8f8f8;
}
</style>
<template>
<view class="stand_content">
<TopBar title="谛宝收银台"/>
<view class="stand_title">分期定金</view>
<view class="stand_price">
<text class="symbol">¥</text>1998
</view>
<view class="flex">
<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190424/goods/5cc03cef241dc.jpeg?x-oss-process=image/resize,m_lfit,w_300,h_300/auto-orient,0/quality,Q_85/format,jpg"></image>
<view>
<view class="stand_goods_name">金融分期 谛宝 商品名称</view>
<view class="stand_goods_price">¥20,000</view>
</view>
</view>
<view class="stand_title" style="margin-top:60rpx">分期定金</view>
<view class="stand_tips">方案内详细信息</view>
<view class="stand_nper">10期</view>
<view class="poupp_deposit">
<text>定金</text>
<text>¥ 2100</text>
</view>
<view class="poupp_nper_detail">
<view>
<text>第1期 支付</text>
<text>¥ 2030.20</text>
</view>
<view>
<text>剩余9期 每期支付</text>
<text>¥ 11335</text>
</view>
</view>
<view class="pay_btn" @click="open()">确认支付</view>
<uni-popup ref="popup" type="bottom">
<view class="popup_content">
<view class="popup_top_bar">选择支付方式<text @click="close()"></text></view>
<view class="flex">
<text class="pay_title">支付定金</text>
<text class="pay_num">¥2900</text>
</view>
<view class="flex pay_item">
<view class="flex">
<text class="pay_methods_icon"></text>
<view>
<view class="pay_methods_name">余额支付</view>
<view class="pay_methods_num">剩余余额:2360.20元</view>
</view>
</view>
<text class="uncheck"></text>
</view>
<view class="pay_methods_btn">确认支付</view>
</view>
</uni-popup>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
data() {
return {
}
},
methods: {
open() {
this.$refs.popup.open();
},
close() {
this.$refs.popup.close();
}
},
components: {
TopBar,
uniPopup
}
}
</script>
<style lang="less" scoped>
.stand_content {
padding: 80rpx 32rpx 32rpx;
.stand_title {
height:56rpx;
font-size:40rpx;
line-height: 56rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #212121;
margin-top: 40rpx;
}
.stand_price {
height:80rpx;
font-size:56rpx;
line-height: 80rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #212121;
margin-top: 10rpx;
.symbol {
height:60rpx;
font-size:44rpx;
line-height: 60rpx;
margin-right: 10rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
}
.flex {
display: flex;
align-items: center;
margin-top: 60rpx;
image {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-right: 16rpx;
}
.stand_goods_name {
color: #7C7C7C;
font-size: 28rpx;
line-height: 40rpx;
margin-bottom: 38rpx;
}
.stand_goods_price {
color: #7C7C7C;
font-size: 30rpx;
line-height: 42rpx;
}
}
.stand_tips {
margin-top: 4rpx;
color: #979797;
font-size: 24rpx;
line-height: 34rpx;
}
.stand_nper {
width: 122rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 28rpx;
text-align: center;
border: 1px solid #000;
margin-top: 32rpx;
color: #000;
font-size: 28rpx;
}
.poupp_deposit {
height: 80rpx;
background-color: #F8F8F8;
padding: 22rpx 32rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
font-size: 28rpx;
color: #464646;
border-radius: 16rpx;
margin-top: 36rpx;
}
.poupp_nper_detail {
padding: 36rpx 32rpx;
background-color: #F8F8F8;
border-radius: 16rpx;
margin-top: 24rpx;
view {
display: flex;
justify-content: space-between;
color: #464646;
font-size: 26rpx;
}
view:nth-of-type(2) {
margin-top: 26rpx;
}
}
.pay_btn {
width: 686rpx;
height: 76rpx;
line-height: 76rpx;
border-radius: 16rpx;
background-color: #FFCD00;
margin: 206rpx auto 22rpx;
color: #212121;
font-size: 28rpx;
text-align: center;
}
}
.popup_content {
border-radius:24rpx 24rpx 0px 0px;
background-color: #fff;
padding: 42rpx 32rpx 22rpx;
.popup_top_bar {
position: relative;
text-align: center;
color: #7C7C7C;
font-size: 30rpx;
line-height: 42rpx;
margin-bottom: 56rpx;
text {
position: absolute;
width: 56rpx;
height: 56rpx;
right: 0;
top: -6rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAnFBMVEUAAAD////////////4+Pj5+fn5+fn4+Pj4+Pj4+Pj5+fn5+fn4+Pj39/f5+fn5+fn5+fmNjY2SkpKTk5OWlpacnJydnZ2enp6np6epqamrq6u5ubm6urq7u7u9vb3KysrLy8vU1NTV1dXW1tbc3Nzh4eHn5+fo6Ojq6urs7Ozt7e3v7+/w8PDx8fHy8vLz8/P09PT19fX39/f4+Pi1Oh3/AAAAEXRSTlMABwwYJC1XiZmbx8ji6vT4+TH0AcAAAAFMSURBVEjHndfncsIwEATgswFXXBRCGklIj0kjcO//bjFucZMs7f7UzDeybA23EDWxHS+MEpYkiULPsWmYuR/zZGJ/3mOWm7JWUtdqu1nA2glm/26xZIMsF81+Ri6X1Z5WwIYJynO6bBy3+A6pOUxPX8VnIH5+X2IExjY5DMUhD4MehRgMKcJgRAkGE2IwQ3h4yvorj5kOvBGr187C/kqs3qfhtxBdmTshHjR2vOvKwq0/NeBx05al+9A5Y0dK3RhsSbkbhY1UuHFYyReFk8BSCoWTwVpKnRTy/vwEn9kUFu9F9G/fNCzcmUqS3K13G4UkhevdvmlYO1ZJUjmVJKVTyAE8XrddLd+m4U/XVXKr8aj34mLXfYZbcfml83Ky38HKYeSM8A8yPALgoQOPOXiwwqMcLg94XYELEl7J4BKI10686OLVGi/z5n8f/gDdHCF1hcxGRAAAAABJRU5ErkJggg==') no-repeat;
background-size: 100% 100%;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
.pay_title {
height:44rpx;
line-height: 44rpx;
font-size:32rpx;
color: #212121;
}
.pay_num {
color: #212121;
height:50rpx;
font-size:36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600
}
.pay_methods_icon {
width: 60rpx;
height: 60rpx;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 16rpx;
background-image: url(../../static/category/2641581405726_.pic.png);
}
.pay_methods_name {
font-size: 26rpx;
color: #212121;
line-height: 36rpx;
margin-bottom: 4rpx;
}
.pay_methods_num {
font-size: 24rpx;
color: #8D8D8D;
line-height: 34rpx;
}
.uncheck {
width: 40rpx;
height: 40rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=') no-repeat;
background-size: 100% 100%;
}
.check {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC') no-repeat;
background-size: 100% 100%;
}
}
.pay_item {
height: 120rpx;
align-items: center;
border-bottom: 1px solid #ECECEC;
.flex {
margin-top: 0;
}
}
.pay_methods_btn {
width: 100%;
height: 76rpx;
line-height: 76rpx;
border-radius: 16rpx;
background-color: #FFCD00;
text-align: center;
font-size: 28rpx;
margin-top: 22rpx;
}
}
</style>
<template>
<view class="main">
<TopBar title="退定金" />
<view class="content">
<view class="view1">定金将退回到您的账户资金</view>
<view class="view2">如提现则需要您手动提现到您的银行卡</view>
<view class="btn">我的资金</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.main {
height: 100vh;
background-color: #F8F8F8;
overflow: hidden;
.content {
width: 702rpx;
height: 496rpx;
border-radius: 20rpx;
box-sizing: border-box;
background-color: #fff;
margin: 104rpx auto 0;
padding: 40rpx 44rpx 0;
.view1 {
height:44rpx;
line-height: 44rpx;
font-size:32rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color: #212121;
margin-bottom: 16rpx;
}
.view2 {
color: #8F99A7;
height:40rpx;
line-height: 40rpx;
font-size:28rpx;
margin-bottom: 40rpx;
}
.btn {
width: 200rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
background-color: #f5f5f5;
color: #464646;
font-size: 28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
}
}
</style>
<template>
<view class="fin_content">
<SearchBar />
<view class="flex tab_bar">
<text @click="jumpPhpPage()">首页</text>
<text @click="jumpPhpPage('app=promotion')">精彩活动</text>
<text>
<i class="credit_icon"></i>
谛宝白条
</text>
<text class="act">采购分期</text>
</view>
<view class="flex_category">
<view class="cate_item1"></view>
<view class="cate_item2"></view>
<view class="cate_item3"></view>
<view class="cate_item4"></view>
</view>
<view class="fin_banner"></view>
<view class="fin_select">
<view class="fin_select_label">
<text class="fin_limit">限时</text>
<text class="fin_title">行业精选 限时免息!</text>
</view>
<text class="fin_desc">各类搭配组合 满足中小型医院无忧开店</text>
<swiper :style="{'margin-top': '36rpx'}">
<swiper-item>
<view class="fin_goods">
<view class="fin_goods_item">
<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic3%402x.png"></image>
<text class="fin_goods_name">测试</text>
<text class="fin_goods_price">2222</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="fin_recommended">
<view class="fin_recommended_label">
<i class="fin_icon"></i>
<text class="fin_recommended_title">为您推荐</text>
</view>
<view class="fin_rec_desc">
<i></i>
<text>分期无忧 灵活付款</text>
<i></i>
</view>
<view class="fin_rec_goods">
<view class="fin_rec_goods_item">
<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic3%402x.png"></image>
<i class="fin_rec_label fin_rec_label1">限时</i>
<i class="fin_rec_label fin_rec_label2">免息</i>
<text class="fin_rec_goodsname">限量版宝璐天然粮</text>
<text class="fin_rec_goodssubname">限量版宝璐天然粮</text>
<text class="fin_rec_goodprice">
<text></text>4800
</text>
<text class="fin_rec_goodssubname">12期免息</text>
</view>
</view>
</view>
<BottomBar />
</view>
</template>
<script>
import SearchBar from '@/components/searchbar.vue';
import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
import BottomBar from "@/components/BottomBar/BottomBar.vue";
export default {
data() {
return {
tabIndex: 3
}
},
components: {
SearchBar,
uniSwiperDot,
BottomBar
}
}
</script>
<style lang="less" scoped>
.fin_content {
padding: 100rpx 0;
.flex_category {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 702rpx;
margin: 10rpx auto;
view {
width: 344rpx;
height: 140rpx;
margin-bottom: 16rpx;
}
.cate_item1 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic3%402x.png') no-repeat;
background-size: 100% 100%;
}
.cate_item2 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic4%402x.png') no-repeat;
background-size: 100% 100%;
}
.cate_item3 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic1%402x.png') no-repeat;
background-size: 100% 100%;
}
.cate_item4 {
background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/pic2%402x.png') no-repeat;
background-size: 100% 100%;
}
}
.fin_select {
margin-top: 36rpx;
}
.fin_banner {
width: 702rpx;
height: 180rpx;
background: red;
border-radius: 16rpx;
margin: 0 auto;
}
.fin_select_label {
text-align: center;
margin-top: 60rpx;
.fin_limit {
padding: 0 6rpx;
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
background: #EADABF;
color: #000;
border-radius: 4rpx;
vertical-align: middle;
}
.fin_title {
font-size: 36rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
vertical-align: middle;
margin-left: 22rpx;
line-height: 25rpx;
}
}
.fin_desc {
color: #979797;
font-size: 22rpx;
line-height: 32rpx;
text-align: center;
display: block;
margin-top: 6rpx;
}
.fin_goods {
padding: 0 46rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
.fin_goods_item {
image {
width: 180rpx;
height: 180rpx;
}
.fin_goods_name {
font-size: 22rpx;
line-height: 32rpx;
display: block;
color: #212121;
width: 180rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fin_goods_price {
color: #AE8A57;
font-size: 26rpx;
line-height: 36rpx;
width: 180rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
top: -12rpx;
}
}
}
.fin_recommended {
width: 702rpx;
margin: 36rpx auto 0;
.fin_recommended_label {
text-align: center;
.fin_icon {
width: 32rpx;
height: 32rpx;
display: inline-block;
margin-right: 8rpx;
}
.fin_recommended_title {
font-size: 32rpx;
height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
}
.fin_rec_desc {
text-align: center;
position: relative;
top: -12rpx;
i {
display: inline-block;
width: 32rpx;
height: 2rpx;
background: #AEAEAE;
vertical-align: middle;
}
text {
font-size: 24rpx;
height: 34rpx;
line-height: 34rpx;
color: #7C7C7C;
margin: 4rpx 16rpx 0;
vertical-align: middle;
}
}
.fin_rec_goods {
.fin_rec_goods_item {
width: 346rpx;
height: 548rpx;
background: #FBFBFB;
border-radius:16rpx;
border:1px solid rgba(236,236,236,1);
padding: 0 24rpx;
box-sizing: border-box;
image {
width: 280rpx;
height: 280rpx;
margin: 32rpx auto 0;
display: block;
}
.fin_rec_label {
display: inline-block;
padding: 0 9rpx;
vertical-align: middle;
font-size: 20rpx;
line-height: 32rpx;
font-style: initial;
}
.fin_rec_label1 {
background: #000;
color: #F8F7F3;
border-radius: 4rpx 0 0 4rpx;
}
.fin_rec_label2 {
background: #EADABF;
color: #000;
border-radius: 0 4rpx 4rpx 0;
}
.fin_rec_goodsname {
width: 100%;
font-size: 26rpx;
line-height: 36rpx;
color: #212121;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fin_rec_goodssubname {
width: 100%;
color: #7c7c7c;
font-size: 22rpx;
line-height: 38rpx;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fin_rec_goodprice {
color: #212121;
font-size: 32rpx;
line-height: 44rpx;
text {
font-size: 26rpx;
line-height: 36rpx;
}
}
}
}
}
}
.tab_bar {
padding: 0 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
.credit_icon {
display: inline-block;
width: 36rpx;
height: 36rpx;
background: url(../../static/index/2821581501269_.pic.jpg) no-repeat;
background-size: 100% 100%;
vertical-align: bottom;
}
}
.tab_bar text {
font-size: 28rpx;
color: #212121;
line-height: 40rpx;
}
.tab_bar .act {
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
font-size: 32rpx;
position: relative;
}
.tab_bar .act:after {
position: absolute;
width: 60rpx;
height: 4rpx;
background: #FFCD00;
border-radius: 0 2rpx 2rpx 2rpx;
content: '';
left: 50%;
margin-left: -30rpx;
top: 48rpx;
}
</style>
This diff is collapsed.
<template>
<view class="main">
<TopBar title="驳回原因"/>
<view class="refuse_flex">
<view class="flex">
<image class="refuse_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190424/goods/5cc03cef241dc.jpeg?x-oss-process=image/resize,m_lfit,w_300,h_300/auto-orient,0/quality,Q_85/format,jpg"></image>
<view class="dlb dlb_box">
<view class="refuse_goods_name">采购分期 l 精灵DR</view>
<view class="refuse_goods_price">¥1,234,800.0</view>
</view>
</view>
<text class="refuse_refund">退定金</text>
</view>
<view class="refuse_view">
<view class="title">还款异常</view>
<view class="refuse_content">尊敬的用户,您好!您本次的采购分期申请由于资质信息不准确,被驳回,请更换您的如下资质:
</view>
<view class="refuse_item">1:营业执照</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.main {
background-color: #F8F8F8;
width: 100%;
height: 100vh;
padding-top: 80rpx;
}
.refuse_flex {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx 20rpx 24rpx;
box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
.flex {
display: flex;
.refuse_img {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.dlb_box {
color: #212121;
.refuse_goods_name {
font-size: 26rpx;
line-height: 36rpx;
margin-bottom: 20rpx;
}
.refuse_goods_price {
font-size: 28rpx;
line-height: 40rpx;
}
}
}
.refuse_refund {
width: 120rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 28rpx;
text-align: center;
border: 1px solid #AEAEAE;
box-sizing: border-box;
color: #464646;
font-size: 26rpx;
}
}
.refuse_view {
width: 694rpx;
background: #fff;
margin: 32rpx auto 40rpx;
padding: 40rpx;
box-sizing: border-box;
.title {
height:40rpx;
font-size:28rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color: #212121;
}
.refuse_content {
color: #8F99A7;
font-size: 28rpx;
line-height: 40rpx;
margin: 20rpx 0 40rpx;
}
.refuse_item {
color: #464646;
font-size: 28rpx;
}
}
</style>
<template>
<view class="sign_content">
<view :style="{'margin-top':'28rpx'}">
<view class="apply_title">签署合同</view>
<view class="apply_desc">请填写合同内详细信息</view>
</view>
<uni-collapse>
<uni-collapse-item title="企业信息" :open="true">
<view class="sign_title">企业名称</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">联系方式</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">企业地址</view>
<view>
此处为地址picker
</view>
<view>
<textarea class="sign_textarea" placeholder="具体到企业所在街道号码"></textarea>
</view>
<view class="sign_title">邮编地址</view>
<view>
<input type="text" class="sign_input">
</view>
<view :style="{'margin-top':'28rpx'}">
<view class="apply_title">签收信息</view>
</view>
<view class="sign_flex">
<text class="sign_title" :style="{'margin-top':0}">交货地址</text>
<view>
<text class="sign_checkbox act"></text>
<text class="sign_title" :style="{'margin-top':0}">即为安装地址</text>
</view>
</view>
<view class="sign_title">企业地址</view>
<view>
此处为地址picker
</view>
<view>
<textarea class="sign_textarea" placeholder="具体到企业所在街道号码"></textarea>
</view>
<view class="sign_title">签收人</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">签收人电话</view>
<view>
<input type="text" class="sign_input">
</view>
</uni-collapse-item>
</uni-collapse>
<uni-collapse>
<uni-collapse-item title="买方信息" :open="true">
<view class="sign_flex">
<text class="sign_title" :style="{'margin-top':0}">买方代表</text>
<view>
<text class="sign_checkbox"></text>
<text class="sign_title" :style="{'margin-top':0}">委托代理人</text>
</view>
</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">买方法人</view>
<view>
<input type="text" class="sign_input">
</view>
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">签收信息</view>
</view>
<view class="sign_title">文书送达地址</view>
<view>
此处为地址picker
</view>
<view>
<textarea class="sign_textarea" placeholder="具体到企业所在街道号码"></textarea>
</view>
<view class="sign_title">签收人</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">签收人电话</view>
<view>
<input type="text" class="sign_input">
</view>
<view class="sign_title">签收人邮箱</view>
<view>
<input type="text" class="sign_input">
</view>
</uni-collapse-item>
</uni-collapse>
<view class="agreement">
关于<text>《谛宝多多金融分期协议》</text><text>《xx产品分期采购合同》</text>
</view>
<view>
<text class="sign_checkbox"></text>
<text class="agree_title">我已阅读并同意</text>
</view>
<view class="sign_btn_box">
<text class="prev_step">上一步</text>
<text class="confirm_pay">缴纳定金
<i class="arrow_icon"></i>
</text>
</view>
</view>
</template>
<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
export default {
data() {
return {
}
},
components: {
uniCollapse,
uniCollapseItem
}
}
</script>
<style lang="less" scoped>
.sign_content {
background: #fff;
padding: 0 36rpx;
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
.sign_title {
color: #464646;
height:40rpx;
font-size:28rpx;
margin-top: 32rpx;
}
.sign_textarea {
width: 100%;
height:200rpx;
background:rgba(248,248,248,1);
border-radius:16rpx;
padding: 20rpx;
margin-top: 40rpx;
font-size: 28rpx;
}
.sign_input {
width:100%;
height:72rpx;
background:rgba(248,248,248,1);
border-radius:16rpx;
margin-top: 20rpx;
line-height: 72rpx;
padding: 0 20rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #212121;
}
.sign_flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32rpx;
}
.sign_btn_box {
margin: 126rpx 0 40rpx;
display: flex;
justify-content: space-between;
color: #212121;
font-size: 28rpx;
line-height: 80rpx;
text-align: center;
.prev_step {
width: 244rpx;
background: #F5F5F5;
border-radius: 16rpx;
height: 80rpx;
}
.confirm_pay {
width: 416rpx;
height: 80rpx;
background: #FFCD00;
border-radius: 16rpx;
}
.arrow_icon {
display: inline-block;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAElBMVEUhISE5Mx08NR0/OB3ftAT/zQCuQjOCAAAAPklEQVQY02MIRQIMZHKCVZA4QYyuCE6IgAiSHkeoFEMokhTENKgUhBMioIqDg6wMxQBko1EsRXEOikMp8jYAjsJZhd56tsAAAAAASUVORK5CYII=');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 24rpx;
height: 24rpx;
position: relative;
top: 1px;
}
}
.agreement {
font-size: 26rpx;
color: #979797;
margin-top: 34rpx;
text {
color: #718BCA;
}
}
.agree_title {
font-size: 26rpx;
color: #7C7C7C;
}
.sign_checkbox {
display: inline-block;
width: 36rpx;
height: 36rpx;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=');
background-size: 100% 100%;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 4rpx;
}
.sign_checkbox.act {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC');
}
}
</style>
@font-face {font-family: "eosfont"; @font-face {font-family: "eosfont";
src: url('https://at.alicdn.com/t/font_1682539_5hrkarw1o62.ttf') format('truetype'); src: url('https://at.alicdn.com/t/font_1682539_4kf2n8t4rub.ttf') format('truetype');
} }
.eosfont { .eosfont {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment