commit -m

components/cm-custom/custom-floor.vue → components/cm-custom/ws-custom.vue

@@ -1,16 +1,14 @@
 <template name="headerNavbar">
-	<!-- 二级楼层导航栏 -->
+	<!-- 自定义导航栏 -->
 	<view class='navbar-wrap' :style="{height:navbarHeight+'px',paddingTop:statusBarHeight+'px'}"> 
-	  	<view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true" 
-			  :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:navbarBtn.right+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
-			  <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
-			  <text v-else  @click="_goHome" class="iconfont icon-shouye"></text>
+	  	<view class="navbar-text" :style="{lineHeight:(navbarHeight - statusBarHeight)+'px;',fontSize:fontSizeSetting+'px;'}">
+	    	{{navbarData.title ? navbarData.title : " "}}
 	  	</view>
-		<view class="navbar-text" :style="{top:navbarBtn.top + statusBarHeight+'px;',height:navbarBtn.height+'px;',fontSize:fontSizeSetting+'px;'}">
-	    	<view class="gosearch-btn" :style="{paddingLeft:navbarBtn.height+'px;',right:(navbarBtn.width+20)+'px;',borderRadius:(navbarBtn.height/2)+'px;',width:(375-navbarBtn.width*2)+'px;',lineHeight:navbarBtn.height+'px;'}">
-				<text class="iconfont icon-sousuo" :style="{width:navbarBtn.height+'px;',height:navbarBtn.height+'px;',lineHeight:navbarBtn.height+'px;'}"></text>
-				<view class="input" @click="this.$api.navigateTo(clickPath)">搜索商品/供应商/项目仪器</view>
-			</view>
+	  	<view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true" 
+			  :style="{width:headerBtnPosi.width+'px;',lineHeight:(navbarBtn.height)+'px',top:navbarBtn.top + statusBarHeight+'px;',left:navbarBtn.right+'px;',height:(navbarBtn.height)+'px;'}">
+			  <text v-if='navbarData.haveBack' @click="_goBack" class="iconfont icon-daohangfanhui" :style="{width:headerBtnPosi.width/2+'px',height:navbarBtn.height+'px'}"></text>
+	      	  <text v-if='navbarData.haveBack' class="iconfont icon-vertical_line" :style="{borderColor:navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.4)'}"></text>
+			  <text @click="_goHome" class="iconfont icon-fanhuishouye" :style="{width:headerBtnPosi.width/2+'px',height:navbarBtn.height+'px'}"></text>
 	  	</view>
 	</view>
 </template>
@@ -29,24 +27,22 @@
 			headerBtnPosi:{
 				type:Object
 			},
-			page:{
-				type:Number,
-				default:1
+			isBackType:{
+				type:Boolean,
+				default:false
 			},
-			headerTitle:{
-				type:String
+			page:{
+				type:Number
 			},
-			type:{
+			path:{
 				type:String
-			},
+			}
 		},
 		data() {
 			return{
-				headerType:'',
-				clickPath:'/search/pages/search/search', 
-				haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
+				// haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
 			    statusBarHeight: 0, // 状态栏高度
-			    navbarHeight: 0, // 顶部导航栏高度,
+			    navbarHeight: 0, // 顶部导航栏高度
 			    navbarBtn: { // 胶囊位置信息
 			      height: 0,
 			      width: 0,
@@ -55,11 +51,11 @@
 			      right: 0
 				},
 				platform:'',
-				fontSizeSetting:0
+				fontSizeSetting:0,
+				screenWidth:0
 			}
 		},
 		created() {
-			this.headerType = this.type
 			this.fontSizeSetting = this.systeminfo.fontSizeSetting
 			let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
 			let headerPosi = this.headerBtnPosi // 胶囊位置信息
@@ -82,7 +78,6 @@
 			      // 屏幕宽度 - 胶囊right
 			      right: this.systeminfo.screenWidth - headerPosi.right
 			}
-			console.log(btnPosi)
 			let haveBack;
 			if (getCurrentPages().length === 1) { // 当只有一个页面时
 			     haveBack = false;
@@ -92,9 +87,6 @@
 		    this.haveBack=haveBack, // 获取是否是通过分享进入的小程序
 		    this.statusBarHeight=statusBarHeight,
 		    this.navbarHeight= headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
-			this.$parent.navbarHeight = this.navbarHeight
-			this.$parent.statusBarHeight = this.statusBarHeight
-			// console.log(this.navbarHeight);
 		    this.navbarBtn=btnPosi
 		},
 		onLoad(){
@@ -102,13 +94,21 @@
 		},
 		methods:{
 			_goBack: function () {
-		      	uni.navigateBack({
-		        	delta: this.page
-		      	});
+				let self = this;
+				if(this.isBackType){
+					uni.navigateTo({
+			        	url: self.path
+			      	})
+				}else{
+					uni.navigateBack({
+			        	delta: this.page
+			      	});
+				}
+		      	
 		    },
 		    _goHome: function () {
-		      	uni.switchTab({
-		        	url: '/pages/tabBar/home/index'
+		      	uni.navigateTo({
+		        	url: '/pages/index/index'
 		      	})
 		    }
 		},
@@ -123,80 +123,38 @@
 		 position: fixed;
 		 width: 100%;
 		 top: 0;
-		 z-index: 100000;
-		 background-color: #FFFFFF;
+		 z-index: 9999;
 		 box-sizing: border-box;
+		 background: #FFFFFF;
 	}
 	.navbar-text {
-		 width: 100%;
+		 text-align: center;
 		 color: #000000;
 		 font-weight: 500;
-		 position: fixed;
-	}
-	.gosearch-btn{
-		height: 100%;
-		background: rgba(255, 255, 255, 0.6);
-		font-size: 28rpx;
-		color: #999999;
-		position: relative;
-		box-sizing: border-box;
-		position:absolute ;
-		top: 0;
-		border: 0.5px solid rgba(0, 0, 0, 0.1);
-		.icon-sousuo{
-			height: 100%;
-			text-align: center;
-			display: block;
-			position: absolute;
-			left: 0;
-			top: 0;
-			font-size: 34rpx;
-			color: #999999;
-			z-index: 10;
-		}
-		.input{
-			height: 100%;
-			float: left;
-			font-size: $font-size-24;
-			text-align: left;
-		}
 	}
 	.navbar-icon {
 		 position: fixed;
 		 display: flex;
-		 border-radius: 50%;
-		 text-align: center;
-		 background: rgba(255,255,255,0.6);
+		 border-radius: 64rpx;
+		 border: 0.5px solid rgba(0,0,0, 0.2);
 		 box-sizing: border-box;
-		 z-index: 9999;
 	}
 	.navbar-icon .iconfont {
-		 height: 100%;
-		 width: 100%;
-		 font-size: 38rpx;
-		 font-weight: bold;
+		 text-align: center;
 		 display: inline-block;
 		 overflow: hidden;
+		 margin-bottom: 1px;
+		&.icon-fanhuishouye {
+			font-size: 38rpx;
+		}
 	}
-	.navbar-icon view {
-		 height: 18px;
-		 border-left: 0.5px solid rgba(0,0,0, 0.3);
-		 margin-top: 6px;
+	.navbar-icon .icon-vertical_line {
+		color: #999999;
 	}
 	.navbar-loading {
 		 background: #fff;
 		 text-align: center;
 	}
-	@keyframes showColor {
-		0% {background: rgba(255,255,255,0);}
-		50% {background: rgba(255,255,255,0.5);}
-		100% {background: rgba(255,255,255,1);}
-	}
-	@keyframes hideColor {
-		0% {background: rgba(255,255,255,1);}
-		50% {background: rgba(255,255,255,0.5);}
-		100% {background: rgba(255,255,255,0);}
-	}
 </style>
 
 

main.js

@@ -8,10 +8,12 @@ import { msg, modal,prePage } from'./utils/util'
 import cuCustom from './components/cm-custom/cu-custom.vue'
 import auCustom from './components/cm-custom/au-custom.vue'
 import cmCustom from './components/cm-custom/cm-custom.vue'
+import wsCustom from './components/cm-custom/ws-custom.vue'
 import scrollTop from '@/components/cm-module/scrollTop/scrollTop.vue'
 Vue.component('cu-custom',cuCustom)
 Vue.component('au-custom',auCustom)
 Vue.component('cm-custom',cmCustom)
+Vue.component('ws-custom',wsCustom)
 Vue.component('scroll-top',scrollTop)
 
 Vue.prototype.$getStorage = function(key){

pages/user/order/success.vue

@@ -1,17 +1,17 @@
 <template>
 	<view class="container cashier">
-		<cu-custom :navbar-data='nvabarData'></cu-custom>
+		<ws-custom :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :isBackType="true" :path="'/pages/user/cart/cart'"></ws-custom>
 		<view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
 			<view class="container-wrapper">
 				<view class="cash-icon">
-					<image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E8%AE%A2%E5%8D%95%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%402x.png" mode=""></image>
+					<image src="../../../static/ws/dd_success.png" mode=""></image>
 				</view>
 				<view class="cash-text">
 					<text>{{ successText }}</text>
 				</view>
 				<view class="cash-btn">
+					<view class="btn btn-pay" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">支付订单</view>
 					<view class="btn btn-open" @click="this.$api.navigateTo('/pages/user/order/order-details?type=confim&orderID='+orderID)">查看订单</view>
-					<view class="btn btn-home" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">继续采购</view>
 				</view>
 			</view>
 		</view>
@@ -24,15 +24,17 @@
 			return{
 				orderID:'',
 				nvabarData: {		//顶部自定义导航
-					haveBack:false,
+					haveBack:true,
 					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
 					showSearch: 0,
-					title: '支付结果',  // 导航栏 中间的标题
+					title: '',  // 导航栏 中间的标题
 					textLeft:this.$store.state.isIphone
 				},
-				successText:'订单提交并支付成功',
+				headerBtnPosi:this.setHeaderBtnPosi(),//获取设备顶部胶囊高度
+				systeminfo:this.setSysteminfo(),		 //获取设备信息
 				isIphoneX:this.$store.state.isIphoneX,
 				CustomBar:this.CustomBar,// 顶部导航栏高度
+				successText:'订单提交成功~',
 				
 			}
 		},
@@ -40,11 +42,25 @@
 			if(option.type == 'deduction'){
 				this.successText = '支付成功'
 			}else{
-				this.successText = '订单提交并支付成功'
+				this.successText = '订单提交成功~'
 			}
-			this.initData(option)
+			// this.initData(option)
 		},
 		methods:{
+			setHeaderBtnPosi(){
+				// 获得胶囊按钮位置信息
+				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
+				return headerBtnPosi
+			},
+			setSysteminfo(){
+				let systeminfo;
+				uni.getSystemInfo({ // 获取设备信息
+					success: (res) => {
+						systeminfo = res
+					},
+				})
+				return systeminfo
+			},
 			initData(e){
 				let data = JSON.parse(e.data);
 				this.orderID = data.data.orderID
@@ -70,35 +86,37 @@
 			flex-direction: column;
 			align-items: center;
 			.cash-icon{
-				width: 348rpx;
-				height: 348rpx;
-				margin-top: 120rpx;
+				width: 332rpx;
+				height: 269rpx;
+				margin-top: 112rpx;
 				image{
-					width: 348rpx;
-					height: 348rpx;
+					width: 332rpx;
+					height: 269rpx;
 				}
 			}
 			.cash-text{
-				font-size: $font-size-40;
-				color: $color-system;
+				font-size: $font-size-28;
+				color:#666666;
 				line-height: 104rpx;
 			}
 			.cash-btn{
-				margin-top: 120rpx;
+				margin-top: 79rpx;
 				.btn{
-					width: 256rpx;
-					height: 80rpx;
-					border-radius: 40rpx;
-					line-height: 80rpx;
+					width: 600rpx;
+					height: 90rpx;
+					border-radius: 45rpx;
+					line-height: 90rpx;
 					text-align: center;
 					font-size: $font-size-26;
 					color: #FFFFFF;
-					margin: 12rpx 0;
+					box-sizing: border-box;
+					border: 1px solid #333333;
+					margin-bottom: 24rpx;
 					&.btn-open{
-						background:linear-gradient(315deg,rgba(0,212,150,1) 0%,rgba(126,243,174,1) 100%);
+						color: #333333;
 					}
-					&.btn-home{
-						background:$btn-confirm;
+					&.btn-pay{
+						background:#191919;
 					}
 				}
 			}