采购分期

App.vue

@@ -18,5 +18,9 @@
 	.uni-input-input {
 		overflow: hidden;
 		text-overflow: ellipsis;
+	}
+	.dlb {
+		display: inline-block;
+		vertical-align: middle;
 	}
 </style>

common/host.js

 // php测试环境
-// export const php = 'http://test.pet-dbc.cn/mobile/index.php?'
+export const php = 'http://test.pet-dbc.cn/mobile/index.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正式环境
 // export const php = 'https://shop.pet-dbc.cn/mobile/index.php?'
 
 // go测试环境
-// export const go = 'https://tm.pet-dbc.cn'
+export const go = 'https://tm.pet-dbc.cn'
 
 // go镜像环境 
-export const go = 'https://jxm.pet-dbc.cn'
+// export const go = 'https://jxm.pet-dbc.cn'
 
 // go正式环境
 // export const go = 'https://m.pet-dbc.cn';
\ No newline at end of file

components/TopBar/TopBar.vue

+<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>

components/searchbar.vue

+<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>

components/uni-collapse-item/uni-collapse-item.vue

+<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>

components/uni-collapse/uni-collapse.vue

+<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>

components/uni-countdown/uni-countdown.vue

@@ -201,6 +201,7 @@
 		line-height: 32rpx;
 		margin: 5rpx;
 		text-align: center;
-		font-size: 24rpx;
+		font-size: 24rpx;
+		border-radius: 8rpx;
 	}
 </style>
\ No newline at end of file

components/uni-icons/uni-icons.vue

@@ -40,7 +40,7 @@
 	}
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 	/* #ifndef APP-NVUE */
 	@font-face {
 		font-family: uniicons;

components/uni-popup/uni-popup.vue

+<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>

components/uni-transition/uni-transition.vue

+<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>

pages.json

@@ -42,8 +42,68 @@
 			"style": {
 				"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": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "谛宝多多商城",

pages/apply/applypage1.vue

+<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

pages/apply/applypage2.vue

+<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>

pages/apply/applypage3.vue

+<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>

pages/apply/choosetype.vue

+<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>

pages/checkstand/checkstand.vue

+<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>

pages/checkstand/refund.vue

+<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>

pages/financial/financialstage.vue

+<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>

pages/installment/installmentinfo.vue

+<template>
+	<view class="info_content">
+		<view class="topbar_icon_box">
+			<text class="info_icon back_icon"></text>
+			<view>
+				<text class="info_icon home_icon"></text>
+				<text class="info_icon collection_icon"></text>
+			</view>
+		</view>
+		<swiper class="img_swiper">
+			<swiper-item>
+				<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" class="img_item"></image>
+			</swiper-item>
+		</swiper>
+		<view class="goods_info">
+			<view class="goods_info_flex">
+				<view>
+					<text class="symbol">￥</text>
+					<text class="goods_price">10990</text>
+					<text class="goods_label">分期购 </text>
+				</view>
+				<text class="sales_num">已售出 9,999 件</text>
+			</view>
+			<view class="goods_name">开店必备 检测试纸套餐</view>
+			<view class="goods_subname">开店必备 检测试纸套餐</view>
+		</view>
+		<view class="freight common_item_bar">
+			<view>
+				<text class="info_commom_title">快递</text>
+				<text class="info_common_con">38元</text>
+				<text class="info_common_label">满300元包邮</text>
+			</view>
+			<view class="info_operation">
+				<text>选择</text>
+				<text class="right_arrow_icon"></text>
+			</view>
+		</view>
+		<view class="common_item_bar">
+			<view>
+				<text class="info_commom_title">活动</text>
+				<text class="info_common_label info_common_label2">分期</text>
+				<text class="info_common_con">金融分期限时免费</text>
+			</view>
+			<view class="info_operation">
+				<text>查看</text>
+				<text class="right_arrow_icon"></text>
+			</view>
+		</view>
+		<view class="common_item_bar">
+			<view>
+				<text class="info_commom_title">规格</text>
+				<text class="info_common_con">已选：x10期</text>
+			</view>
+			<view class="info_operation" @click="open()">
+				<text>选择</text>
+				<text class="right_arrow_icon"></text>
+			</view>
+		</view>
+		<view class="title_label">分期信息</view>
+		<view class="installment_table_box">
+			<view class="installment_table">
+				<view class="table_title">
+					<view>分期数</view>
+					<view>定金 (元)</view>
+					<view>第1期还款</view>
+					<view>剩余每期还款</view>
+				</view>
+				<view class="table_item">
+					<view>6期</view>
+					<view>1000</view>
+					<view>3499.19</view>
+					<view>1990</view>
+				</view>
+			</view>
+		</view>
+		<view class="entry_shop">
+			<view>
+				<image class="shop_logo" 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="shop_name">谛宝多多<i class="right_arrow_icon"></i></view>
+					<view class="focus_num">2.4万+人关注</view>
+				</view>
+			</view>
+			<text class="focus_shop">关注店铺</text>
+		</view>
+		<view class="shop_goods">
+			<view class="shop_goods_item">
+				<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 class="shop_goods_name">限量版宝璐…限量版宝璐…</view>
+				<view class="shop_goods_price">¥2,999</view>
+			</view>
+		</view>
+		<view class="goods_detail">
+			<view class="title_label">产品信息</view>
+		</view>
+		<view class="goods_info_bottom_bar">
+			<view class="bottom_bar_tool">
+				<view class="tool contact_tool"></view>
+				<view class="tool_title">联系客服</view>
+			</view>
+			<view class="bottom_bar_tool">
+				<view class="tool shop_tool"></view>
+				<view class="tool_title">店铺</view>
+			</view>
+			<view class="bottom_bar_tool">
+				<view class="tool cart_tool"></view>
+				<view class="tool_title">购物车</view>
+			</view>
+			<view class="bottom_btn join_cart">加入购物车</view>
+			<view class="bottom_btn join_buy">购买</view>
+		</view>
+		<uni-popup ref="popup" type="bottom">
+			<view class="poupp_content">
+				<view  :style="{padding: '0 24rpx'}">
+					<view class="poupp_flex">
+						<image class="poupp_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">
+							<view class="poupp_goods_name">限量版宝璐天然粮</view>
+							<view class="poupp_goods_price">
+								<text class="symbol">¥</text>1,099
+								<text class="poupp_label">分期购</text>
+							</view>
+						</view>
+					</view>
+					<view class="poupp_nper">
+						<view><text class="dlb">期数</text><text class="dlb limit_free">限时免息</text></view>
+						<view class="poupp_nper_box">
+							<text>10期</text>
+							<text>10期</text>
+						</view>
+					</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>
+				<view class="poupp_tips">金融分期需要上传金融资质, 包含法人信息/企业执照/银行流水等…</view>
+				<view class="poupp_btn">立即分期</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import uniPopup from "@/components/uni-popup/uni-popup.vue";
+	export default {
+		data() {
+			return {
+				visible: false
+			}
+		},
+		methods: {
+			open()  {
+				this.$refs.popup.open()
+			}
+		},
+		components: {
+			uniPopup,
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.info_content {
+		background: #F5F5F5;
+	}
+	.topbar_icon_box {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		padding: 14rpx 20rpx;
+		box-sizing: border-box;
+		position: absolute;
+		left: 0;
+		top: 0;
+		background: #fff;
+		.info_icon {
+			display: inline-block;
+			vertical-align: middle;
+			width: 60rpx;
+			height: 60rpx;
+		}
+		.back_icon {
+			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAABYUlEQVRIx6XXO46DMBAGYN9zBAWic7aOKFxQ0VJQcQgarkBLARdYbVZJGkiFkKiy5LEPssaD/f+l4ZMQ4PGMuGoz1kUWydD3QxllRT3q7xKatb5UHi3iqbLfhNvkRT590rK4UbQa1Rhxl5IxabeOq4CYBNUKnnLakHzS4SGmTYmH//iyp43ZX17xsNnOeljiKSaLxNMC52SV/C+uyDLVL+4CWxx0Pzgl66TfuCGHNE+sXLB64Ja5bXd41y23d5ww9nT91K0nN9x7nD2/aatDP+PSzRKVM1aOdn5lYvTM9rRmyRtFzdjd+uVaFM6WCpE5W8pE5GwpEtLZkhShs6VQ+PoLB96Sj2HosaEXBn0q6CeBfs/adVPdNga3Jc+mLQkVA6wMcQXwaCqAXOmVR0PpZYu+/DAUfei4wQ466IjFDneorcAaGqyVgpo4rH3EGlesZcaadXBMwAYUcDQChzKLcfALHjIc96F4z0sAAAAASUVORK5CYII=') no-repeat;
+			background-size: 100% 100%;
+		}
+		.home_icon {
+			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAACjUlEQVRIx62Xz0sbQRTH5/98bKxpCpYtlWIgCXWFeAluK1EasAQCUqiXYgSDhx68aLAiRJtcpEUF0dJDN8HDdmWbZL89bH7s7M5skk6/p53vvA8sM2/evGEQymlUSzk9lUik9Fyp2nDEUUzgtWuGRpw0o9aeCm4VQuSAL7Qmwk2DpDKasbC1QbHasORwPUkTlKxLYLdMU6jsimA7T1Mpb0fhToamVKYThu2pWaKMzcNunmZQ3uXgMs2kchCu04yqj2FLsr/Zu7usZL+tESzJqy0XcLckuTaEm8LpuUMPZ2fwDueE080BLDwLi9fo7RDt9HC9KDwlPtwSza3ZeFglIlp9gL0mimgBDCgIZvb6uNT9T/0S/T1BSAFgaEfP/kIL3sHI1g48tBai1aENhlrEXrHgFING0YG1EgmrgUWXa7uL2yXeWrpFdzu6ZMwJ/XXyBDieDwfOHwMnoVTSHNbgnfQ9/lREi1vp4S7NWw1W5cabj8BHcU5dA4+bnFNlpeBw34OLihi+wk94+0GnxHLBodPfPZXD67t9J+jkmB4cLhsUA78lYzno6CwViomFeaVY4t/hhBqs9Nt6DPwk+yoO1vmt4uDnRy7Q+SCHc3ySBOEXv+B1bOBICpdC6RmAz3H/mqjSxTsZXA0fjBH80uumiYg+4ZsMbkSO5BAu4rtfCPFbAmtOpBgM4S18JSKip+hKYCNahqaHa9ECOITf4yIe1trR0nuKz6ZpmubBGDZN0zTNHyG4ICj6X0ZNg78P8+MW5I2g6PNLtnZ14+tq3TcOB+Ob82eC60Zy0U1Qc8IVG9vOTbzcY5o56/+0FWoNjVorpdTEqbWPao2rWsus1qwrPhPUHiiKTyPFR9kMz8G/v1mIKuFxp8YAAAAASUVORK5CYII=') no-repeat;
+			background-size: 100% 100%;
+			margin-right: 20rpx;
+		}
+		.collection_icon {
+			background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAAAAAAfl4auAAAC6ElEQVRIx6VXz0tqURA+/+eoSQkuDKIoyoWYbYQKyrIIixZh4creSyITIjIFCVx4N6HQpjaSPxBS8de931uovXuPc824s7oz53yXc+bMfDMjwEo7Hw97PS6Hw+XxhuP5Nr9LMLZawmcng9h9idpMYCUoIUf4oPIjuOAjU/EVpoKr+zRV9qvm4Mw8/SDzGRNwN0IzSKTLgZsBmkkCzUlwfZ1mlPW6DG7OjCVabxrB3QD9QgJdAzhCv5KIHpyhX0rmP7jKv68j2W4nHfx7V7/BJnH1FwD+mMTaGFzg190dhELouPnVwghskgtxFImKiJtkyRCsmITxF3aJdvFlEvAKIIAgvxjFBxHRB6L8ehAQqNl5V9dxRER0hDrvcHsNAgn+x6f4tBER2T5xyu9IQJi4y1bG+fDrHGWbictEmzn1gv8ki8bcUJlrIHviX2DO3RZ5g8G5E30oNjQA6nfk7KsAtEbxIbrjNGzOC8Mzrg05alBRErrb+BJKZTDkuDVDIIiwXn1F5enqYINxr2Pj4Oqpgle9LSy8erWHxWm5tIieXvUKj16t4XIa+BI1veoRLr16Bu3MHHumwbDqEsb7XUM1JZWIimujHyQw3UA95rHHKm4kJxqPTUS3UMMcNqziVjK5jA4jIkpiEJrEhgZIyjaP8amIiCiFvl+2+ftITWz0CuaMz8jJphyemZsIhmVCKMmmEpirxKXEGHFIWjalOT7Jcyn5OBlnl3jkUpIhgzfsyaY9vHFkwNBQC8uyaRktloYmCHARnTEXbW2NGagzkW/2Gke923gfUUgZKI8I5R3bHPVOkP4FskREgRLQaAClABFRFhcs6csuu0eMaPVFQyvmdMZa0F5WiWK4Z8uNXOjukF5K9dFPuomI3Mk++qmlNO74QieV2E0VgJZbGesrOQ2AusmXWLm4H1Z7iiE1/EqvemhW3C21FdYaGmutlKUmzlr7aK1xtdYyW2vWLY4J1gYUi6ORxaHsF+PgPyIWgG2yq3F6AAAAAElFTkSuQmCC') no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+	.img_swiper {
+		width: 750rpx;
+		height: 716rpx;
+		background: #fff;
+		.img_item {
+			max-width: 100%;
+			max-height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			margin: auto;
+		}
+	}
+	.goods_info {
+		width: 100%;
+		height: 210rpx;
+		padding: 24rpx;
+		box-sizing: border-box;
+		background: #fff;
+		.goods_info_flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.symbol {
+				height: 42rpx;
+				line-height: 42rpx;
+				font-size: 30rpx;
+			}
+			.goods_price {
+				height: 60rpx;
+				line-height: 60rpx;
+				font-size: 44rpx;
+				font-family:PingFangSC-Medium,PingFang SC;
+				font-weight:500;
+			}
+			.goods_label {
+				width: 88rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				background:rgba(234,218,191,1);
+				border-radius:20rpx;
+				font-size: 22rpx;
+				color: #464646;
+				text-align: center;
+				display: inline-block;
+				position: relative;
+				bottom: 6rpx;
+				margin-left: 10rpx;
+			}
+			.sales_num {
+				color: #7C7C7C;
+				height: 34rpx;
+				line-height: 34rpx;
+				font-size: 24rpx;
+			}
+		}
+		.goods_name {
+			height: 42rpx;
+			line-height: 42rpx;
+			font-size: 30rpx;
+			font-family: PingFangSC-Medium,PingFang SC;
+			font-weight: 500;
+			margin-top: 16rpx;
+			width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.goods_subname {
+			color: #979797;
+			font-size: 26rpx;
+			height: 36rpx;
+			line-height: 36rpx;
+			width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			margin-top: 8rpx;
+		}
+	}
+	.freight {
+		margin-top: 20rpx;	
+	}
+	.common_item_bar {
+		padding: 24rpx;
+		width: 100%;
+		box-sizing: border-box;
+		height: 84rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: #fff;
+		position: relative;
+	}
+	.common_item_bar:after {
+		width: 650rpx;
+		height: 1px;
+		background-color: #ECECEC;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		content: '';
+	}
+	.info_commom_title {
+		height:36rpx;
+		line-height: 36rpx;
+		font-size:26rpx;
+		font-family:PingFangSC-Medium,PingFang SC;
+		margin-right: 24rpx;
+		color: #212121;
+	}
+	.info_common_con {
+		height:36rpx;
+		font-size:26rpx;
+		color: #464646;
+		margin-right: 26rpx;
+	}
+	.info_common_label {
+		height:40rpx;
+		line-height: 40rpx;
+		background:rgba(254,244,232,1);
+		border-radius:8rpx;
+		padding: 0 12rpx;
+		display: inline-block;
+		color: #AE8A57;
+		font-size: 26rpx;
+	}
+	.info_common_label2 {
+		height: 30rpx;
+		line-height: 30rpx;
+		font-size: 22rpx;
+		margin-right: 20rpx;
+	}
+	.info_operation {
+		color: #AEAEAE;
+		font-size: 26rpx;
+		text {
+			vertical-align: middle;
+		}
+	}
+	.right_arrow_icon {
+		display: inline-block;
+		width: 24rpx;
+		height: 24rpx;
+		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAElBMVEVubm59fX1/f3+BgYHq6ur/////jxb0AAAAPklEQVQY02MIRQIMZHKCVZA4QYyuCE6IgAiSHkeoFEMokhTENKgUhBMioIqDg6wMxQBko1EsRXEOikMp8jYAjsJZhd56tsAAAAAASUVORK5CYII=') no-repeat;
+		background-size: 100% 100%;
+	}
+	.title_label {
+		height:44rpx;
+		line-height: 44rpx;
+		font-size:32rpx;
+		font-family:PingFangSC-Medium,PingFang SC;
+		font-weight:500;
+		background: #fff;
+		padding: 36rpx 0 36rpx 24rpx;
+	}
+	.installment_table_box {
+		padding: 0 28rpx 40rpx;
+		background: #fff;
+		overflow: scroll;
+		.installment_table {
+			background: #FBFBFB;
+			border-radius:16rpx;
+			border:1px solid rgba(236,236,236,1);
+			padding: 40rpx 40rpx 16rpx;
+			display: flex;
+			.table_title {
+				margin-right: 20rpx;
+				view {
+					height:36rpx;
+					line-height: 36rpx;
+					font-size:26rpx;
+					color: #7C7C7C;
+					margin-bottom: 24rpx;
+				}
+			}
+			.table_item {
+				border-right: 1px solid #DCDCDC;
+				view {
+					height:34rpx;
+					line-height: 34rpx;
+					font-size:24rpx;
+					color: #464646;
+					margin-bottom: 26rpx;
+					min-width: 120rpx;
+					padding: 0 10rpx;
+					text-align: center;
+				}
+			}
+			.table_item:last-child {
+				border-right: none;
+			}
+		}
+	}
+	.entry_shop {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-radius: 16rpx;
+		background: #fff;
+		width: 750rpx;
+		height: 120rpx;
+		padding: 24rpx;
+		box-sizing: border-box;
+		color: #212121;
+		margin-top: 20rpx;
+		.shop_logo {
+			width: 72rpx;
+			height: 72rpx;
+			vertical-align: middle;
+			margin-right: 20rpx;
+		}
+		.dlb_box {
+			.shop_name {
+				height: 42rpx;
+				line-height: 42rpx;
+				font-size: 30rpx;
+				font-family: PingFangSC-Medium,PingFang SC;
+				font-weight: 500;
+				margin-bottom: 2rpx;
+			}
+			.focus_num {
+				height: 28rpx;
+				line-height: 28rpx;
+				font-size: 20rpx;
+			}
+		}
+		.focus_shop {
+			width: 124rpx;
+			height: 52rpx;
+			line-height: 52rpx;
+			text-align: center;
+			background-color: #FFCD00;
+			border-radius: 16rpx;
+			font-size: 24rpx;
+			display: block;
+		}
+	}
+	.shop_goods {
+		display: flex;
+		justify-content: space-between;
+		padding: 40rpx 24rpx 24rpx;
+		background: #FFFFFF;
+		.shop_goods_item {
+			width: 160rpx;
+			image {
+				width: 120rpx;
+				height: 120rpx;
+				margin: 0 auto 16rpx;
+				display: block;
+			}
+			.shop_goods_name {
+				color: #464646;
+				font-size: 24rpx;
+				height: 34rpx;
+				line-height: 34rpx;
+				width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				text-align: center;
+				margin-bottom: 10rpx;
+			}
+			.shop_goods_price {
+				height: 36rpx;
+				line-height: 36rpx;
+				width: 100%;
+				text-align: center;
+				font-size: 26rpx;
+				font-family: PingFangSC-Medium,PingFang SC;
+				font-weight: 500;
+				text-align: center;
+			}
+		}
+	}
+	.goods_info_bottom_bar {
+		width: 100%;
+		height: 100rpx;
+		background-color: #fff;
+		padding: 0 24rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.bottom_bar_tool {
+			width: 72rpx;
+			text-align: center;
+			.tool_title {
+				color: #6E6E6E;
+				font-size: 18rpx;
+				line-height: 26rpx;
+			}
+		}
+		.tool {
+			width: 48rpx;
+			height: 48rpx;
+			margin: 0 auto 2rpx;
+		}
+		.contact_tool {
+			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAAAAAByaaZbAAACBklEQVRIx+3Vy0sVcRTAcf+V7/gA9ZpFhYkJvSZRNwWFlRomtjCQoIgasDJz0Y1LcL0bb5nlIhSMe6lWRbjRopRC6WEKRbnxUVgIkZTjaTFzq/nd34y3luHZDed8GOb3O3NOlvxlZK0BN94nu2KxeHI6MzBkFeNGsTW8KnhYgScqBwPBfAMARnmddbapPBuAxk/+4PkGgPrEV+fxW6IRYOOYH3icCxyc+jP9pg7Ie6oHEwWQ3a9+5HUDCid1YK4UCkfTz3G4AMo+asARyBnRnfxoDjSlgwdAv/5ybwGDaWA31Pq1Qy1UqWAImPQDE8ATBZyGBtsP2PXQqoAigJJeXXnPZoD1XvDBbZ2T6fXH3dSMBwykmk3tNbmfyiQ9oAvWvVrYBydU0AI1X16E4JoHRKFNpA8qVbALBkQsiKkgIpIAUwXb4K5IB3T+j+CyyG0N2A53RC6oIA6mLefgsKZT22V5h3oPU8CWKuCGCrqB6hLgnbf5Tjn3b35XwdJOJ3NG6Va71QBqZkXEjptFoVBoa8dn51/PB4zzmiHQ1/tSRGRlf6rdyuZFRCwgMhcwW7t/z8ljIq8PAEcDh3E1ND8bHx+7ArnhCoC9S4GgFO6JiCym3tPyI3jcN8Omi+HwJdMp3/Notf0wYvz6hkORnpkMNlAiz61vz3RlLdzsjEajV9+uLfZ/Bj8BX6KDetsz+VEAAAAASUVORK5CYII=') no-repeat;
+			background-size: 100% 100%;
+		}
+		.shop_tool {
+			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAAAAAByaaZbAAABp0lEQVRIx+3Vz0sUcRjHcf+V97qiuZs/8MdFrSSNDuJBw0MJithBPFmXyAQ7mmguqKiFIN3cLYQEPawsYjriYXVvHepihRCLsESgMPZ4mN0VvvN8A0Vv+5w+h+9rhnmeZ2aK5JJVVACXA4dddXrVD52pYBhrxVRQZQfPNLAPLH9SahhCGohAi/qYmQB8UUArTOmNaYM3fpAGkjqYhSY/WIJKS+u/Aj99oB9e2oZVB+9N4JbCig28hscmWIPgqQ2sQ/DEAKP5izgVnX+8tBdu/J6/fdQAIZj20n2Y8dJAvtF98NYAd2HeS+F815vhhZd6IGKAEWh1RUQ2gIrfIiKbQMk3EZGDAKwawAF60yLx2wAPUiIrYYCGbZF4LdS65hyeAsF7Nbn9DJXm0q0ygDXf4P52ZA8Eos+zqfjjWE4tKMvnTpYDtO+JfG4GirtTIok2IPBoV3+n/21+iB168Sixkx3G8dZ25po+As7DUcuZdN+THwq4A44OpmFMAdUXwzFqCl4VwBVBEzR0qlUJ4wqY4D/laNs6aD1esqgvX/LdnFpLvwq/3ZsG53VVe7nay4EpAAAAAElFTkSuQmCC') no-repeat;
+			background-size: 100% 100%;
+		}
+		.cart_tool {
+			background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABQ5JREFUaAXtmEtoY2UUgPuYJk1bUCipoLFM2sQ6dpSBgFKluFAXs7DqxkHxgbhS8IHiRmdRR0FwREQZKIOoiy4EV74GHVwEwYUupD5qQk3TQQdLK0Odaottk9TvXO653NxX7o0pUzEX/p7zn/c5//kfaUdH+2tXoF2BdgXaFfg/V6BzPyU/Ojp6eHd391ViGtK4mJe7u7ufKZVK55Vmhwfsk0uNE+xLjKOOOHK1Wu1HaCccdGPa5UW8hLTrPXwvdXV1fexBN0j7poVyuVzP2traJitwoLOz84dyuXyDX9B2+r5ZAYJPS/BmcCV7kEG4KrhkMplMqlqtvkY1ki5m84Rz8Xj8eKFQWPYwkbHRfrbhgahvAgT/JJrHqEqggajMra2tX9GZ9tDLKg2foRMIaqGLarBVkNVcZZz1sWclwLEZOgHfFcBR0Vb9kxh92cdxaHIqldrM5/MVLwV8tTYBjq4CbaS+DnKRrOukWYiNIFVNYLNYLC5TwCBZi+fbQmw28WZkgLFDlsYeIOPj4zHMDotpfJUYoTeebwLz8/PbGCqb8Wanp6ddslz9Q+l0+sORkZEzcmqZsh3QJqF9xThl12P+NONrxiMqK7BSqaQB3SYtdP+LvCso04gB6MuCIMD47OysOKn7uOKfgDAF/yj4s8ok8deh3cx4HL07hE6CSeZCv5HpjFxcKr+zs6PtI6TWJUAgRXVCgNcqrpB9crniQE+cgA068DJkjMYGj3Fx9dl09yYBHFgJkMxe7gMrAZJr3QpQYSsBDLtWwFbBf4taCfT29gYeVU5HgXtgYGDA2AOmkisBktq0GfTEkdkQmVgsZkBTvkpx/lZdZDKCs8p/+TwzVNQFAxOYm5v7A6MrooUTVwsRxGn438MugJ+yWT8B/hu8M8PDw18IXQJj/gZjFdkXuRO2hM7mjgOMIxQfkaov+samEsTv40jMw7tV+NzGQzj+XfBWfdls9hDH6E+mvQ+WlpbujWI7cAXEEBWz2oib2dVGUZx5yVJ1q/9ZmUgbWOw1TAAZayPjwNVGXkFFoVEUK4FmWsj3MadBEHRR30Q4eIFb9EHltQgexK6airwCDRPgArNaCEey2YwNpx5bCWnXhaj2GrYQv01/wfC7GK5FNR5BvoaPmcXFxdUIOoZow1NIDcpxl0wmGyas8lHg+vp6VR6PUXRUNnQCqmC+JB9gLpuvSOXeoXLvKz8I8nq9hZZ8DpkjDPld/ElfX9/JZoMXX5ES4E54D52HRdHxvcn5/ZSDVjdF91EIpxl1q0gBvkkkEpPNJqFv8DpnXhOqdzeb+BXl4Vj6td+c3zQ4OPglL8xzyrdD+a2A7qfQ5NaV7wJDcEnmKi6yGrp58MhfXTWCtAngLuUT/P1s7iuAjykN/pTiTgjvNmhGsujMoJvs6enJge+IrN22U7fRPHQCGEqpsf7+/s8E54FmQJN+tfI9oMUj6LOM3YWFhe+Qk30gt71l20M3kNTwHrBpy6PtdplvbGy8RVu8vb29be974Xt+BGjxqPZxDoI/EZwE1zvF4nsaCCCG3sQ4vQaHc9hKOO0R4EVu7MM89M47eTKXI5jT51v0r/PiQ5viEPD9B66PjkEO3UL0rdySD0mwDoMXoN3nF7zIytMZmWOMupuWeYXxfLPBi+3QKyDC8o2NjV3JqXEnaJaqFqn8R2Fv0ImJicTKyso9rMQRAl9G93OS06e0Yb/9p12BdgXaFfhvVeAf8lrWllSlNkQAAAAASUVORK5CYII=') no-repeat;
+			background-size: 100% 100%;
+		}
+		.bottom_btn {
+			width: 220rpx;
+			height: 68rpx;
+			line-height: 68rpx;
+			text-align: center;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+		}
+		.join_cart {
+			color: #fff;
+			background-color: #000;
+			margin-left: 12rpx;
+		}
+		.join_buy {
+			color: #483E2E;
+			background-color: #EADABF;
+			font-weight: 500;
+			font-family: PingFangSC-Medium,PingFang SC;
+		}
+	}
+	.poupp_content {
+		border-radius:24px 24px 0px 0px;
+		background-color: #fff;
+		padding: 40rpx 0 20rpx;
+		color: #212121;
+		.poupp_flex {
+			display: flex;
+			padding-bottom: 40rpx;
+			border-bottom: 1px solid #ececec;
+			.poupp_img {
+				width: 180rpx;
+				height: 180rpx;
+				margin-right: 20rpx;
+			}
+			.poupp_goods_name {
+				width: 440rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				font-size: 28rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				margin-bottom: 10rpx;
+			}
+			.poupp_goods_price {
+				color: #000;
+				font-size: 40rpx;
+				line-height: 56rpx;
+				.symbol {
+					font-size: 28rpx;
+					line-height: 40rpx;
+				}
+				.poupp_label {
+					display: inline-block;
+					height: 40rpx;
+					line-height: 40rpx;
+					background-color: #EADABF;
+					padding: 0 12rpx;
+					color: #483E2E;
+					font-size: 22rpx;
+					margin-left: 6rpx;
+					border-radius: 20rpx;
+					position: relative;
+					bottom: 6rpx;
+				}
+			}
+		}
+		.poupp_nper {
+			margin-top: 38rpx;
+			font-size: 26rpx;
+			text {
+				height: 40rpx;
+				line-height: 40rpx;
+				vertical-align: middle;
+			}
+			.limit_free {
+				padding: 0 12rpx;
+				border-radius: 8rpx;
+				margin-left: 20rpx;
+				color: #AE8A57;
+				border: 1px solid #CFAE7F;
+				background-color: #FEF4E8;
+			}
+		}
+		.poupp_nper_box {
+			margin-top: 22rpx;
+			display: flex;
+			flex-wrap: wrap;
+			text {
+				width: 122rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				border-radius: 28rpx;
+				text-align: center;
+				border: 1px solid #DCDCDC;
+				color: #483E2E;
+				font-size: 26rpx;
+				margin-right: 20rpx;
+			}
+		}
+		.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: 40rpx;
+		}
+		.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;
+			}
+		}
+		.poupp_tips {
+			width:100%;
+			height:60rpx;
+			line-height: 60rpx;
+			background:rgba(252,248,240,1);
+			border-radius:8rpx;
+			color: #A79981;
+			font-size: 24rpx;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			padding: 0 14rpx 0 24rpx;
+			box-sizing: border-box;
+			margin-top: 172rpx;
+		}
+		.poupp_btn {
+			width: 702rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			border-radius: 16rpx;
+			background-color: #EADABF;
+			font-size: 28rpx;
+			margin: 20rpx auto 0;
+		}
+	}
+</style>

pages/refuse/refuse.vue

+<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>

pages/signcontract/signcontract.vue

+<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>

static/iconfont.css

 @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 {