提交

App.vue

@@ -1,67 +1,68 @@
 <script>
-  export default {
-    globalData: {
-      //全局配置参数 
-      barHeight: 0,
-      screenWidth: 0,
-      screenHeight: 0,
-      viewHeight: 0,
-    },
-    onLaunch: function(options) {
-      console.log("APP----onLaunch", options);
-      if (options.query.code) {
-        uni.setStorageSync('code', options.query.code)
-      }
+	export default {
+		globalData: {
+			//全局配置参数 
+			barHeight: 0,
+			screenWidth: 0,
+			screenHeight: 0,
+			viewHeight: 0,
+		},
+		onLaunch: function(options) {
+			console.log("APP----onLaunch", options);
+			if (options.query.code) {
+				uni.setStorageSync('code', options.query.code)
+			}
 
-      // #ifdef APP-PLUS
-      // App平台检测升级，服务端代码是通过uniCloud的云函数实现的，详情可参考：https://ext.dcloud.net.cn/plugin?id=2226
-      // #endif
-      //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
-      uni.getSystemInfo({
-        success: (res) => {
-          console.log(res)
-          this.globalData.barHeight = res.statusBarHeight;
-          this.globalData.screenWidth = res.screenWidth;
-          this.globalData.screenHeight = res.screenHeight;
-          this.globalData.viewHeight = res.windowHeight
-        }
-      });
-      /**
-       * 校验session_key是否失效
-       * 如果失效，则清空登录态，当需要登录的时候，从login.wxml重新登录
-       */
-      uni.checkSession({
-        success() {
-          // sessionKey有效没有过期
-          console.log("checkSession success");
-        },
-        fail() {
-          // sessionKey已经失效，过期
-          console.log("checkSession fail");
-          // 清空登录所有相关信息
-          // clearLoginStatus();
-        }
-      });
-    },
-    onShow: function() {
-      console.log('App Show')
-    },
-    onHide: function() {
-      console.log('App Hide')
-    },
-    globalData: {
-      test: ''
-    }
-  }
+			// #ifdef APP-PLUS
+			// App平台检测升级，服务端代码是通过uniCloud的云函数实现的，详情可参考：https://ext.dcloud.net.cn/plugin?id=2226
+			// #endif
+			//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
+			uni.getSystemInfo({
+				success: (res) => {
+					this.globalData.barHeight = res.statusBarHeight;
+					this.globalData.screenWidth = res.screenWidth;
+					this.globalData.screenHeight = res.screenHeight;
+					this.globalData.viewHeight = res.windowHeight
+				}
+			});
+			/**
+			 * 校验session_key是否失效
+			 * 如果失效，则清空登录态，当需要登录的时候，从login.wxml重新登录
+			 */
+			uni.checkSession({
+				success() {
+					// sessionKey有效没有过期
+					console.log("checkSession success");
+				},
+				fail() {
+					// sessionKey已经失效，过期
+					console.log("checkSession fail");
+					// 清空登录所有相关信息
+					// clearLoginStatus();
+				}
+			});
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		},
+		globalData: {
+			test: ''
+		}
+	}
 </script>
 
 <style lang="scss">
-  /* #ifndef APP-PLUS-NVUE */
-  /* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
-  @import './common/style/uni.css';
-  /* #endif*/
+		@import "uview-ui/index.scss";
+	/* #ifndef APP-PLUS-NVUE */
+	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
+	@import './common/style/uni.css';
+	/* #endif*/
+	/*每个页面公共css */
 
-  uni-radio .uni-radio-input .uni-radio-input-checked {
-    background: #FF0000 !important;
-  }
+	uni-radio .uni-radio-input .uni-radio-input-checked {
+		background: #FF0000 !important;
+	}
 </style>

config/global.config.js

@@ -1,7 +1,7 @@
 const CONFIG = {
   assetsPath: '/static', // 静态资源路径
-  baseUrl: 'http://192.168.0.151:8196/api', // 后台接口请求地址
-  // baseUrl: 'https://yigefuwuapp.ycbrain.com/prod-api/api', // 后台接口请求地址
+  // baseUrl: 'http://192.168.0.151:8196/api', // 后台接口请求地址
+  baseUrl: 'https://yigefuwuapp.ycbrain.com/prod-api/api', // 后台接口请求地址
   telRegex: "^(1)\\d{10}$", //手机正则
   mailVerify: "^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$",
 };

main.js

@@ -46,6 +46,8 @@ Vue.component('ldLoading', ldLoading);
 Vue.component('nodata',nodata);
 Vue.component('loadMore',loadMore);
 App.mpType = 'app'
+import uView from "uview-ui";
+Vue.use(uView);
 
 Vue.use(Directives);
 // 保留小数点后两位
@@ -58,7 +60,6 @@ Vue.filter('keepTwo', value => {
  * 注册指令
  */
 
-
 const app = new Vue({
 	store,
 	...App

package-lock.json

@@ -1324,6 +1324,11 @@
             "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
             "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
         },
+        "uview-ui": {
+            "version": "2.0.36",
+            "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.36.tgz",
+            "integrity": "sha512-ASSZT6M8w3GTO1eFPbsgEFV0U5UujK+8pTNr+MSUbRNcRMC1u63DDTLJVeArV91kWM0bfAexK3SK9pnTqF9TtA=="
+        },
         "weixin-js-sdk": {
             "version": "1.6.0",
             "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "dependencies": {
         "clipboard": "^2.0.6",
         "lite-server": "^2.6.1",
+        "uview-ui": "^2.0.36",
         "weixin-js-sdk": "^1.6.0"
     }
 }

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		},
 	"pages": [
 		// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
@@ -56,6 +59,20 @@
 				"navigationBarTitleText": "咨询电话",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/yigePayCenter",
+			"style": {
+				"navigationBarTitleText": "宜格收银台",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/yigePay",
+			"style": {
+				"navigationBarTitleText": "I宜昌统一支付管理平台",
+				"navigationStyle": "custom"
+			}
 		}
 		// {
 		// 	"path":"pages/login",

pages/yigePay.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="Body" >
+		<view class="left">
+			<image src="/static/staticPc/bg2.png" mode=""></image>
+		</view>
+		<view class="right">
+			<image class="right_logo" src="/static/staticPc/logo1.png" mode=""></image>
+			<view class="right_title">I宜昌统一支付管理平台</view>
+			<view class="right_btn" @click="jump('https://hmpay.sandpay.com.cn/merchant/login')">商户登录</view>
+			<view class="right_btn" @click="jump('https://yichang.sandpay.com.cn/agent/')">代理商登录</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				
+			}
+		},
+		methods:{
+			jump(url){
+				window.open(url)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.Body{
+		background: url('@/static/staticPc/bg1.png');
+		background-size: cover;
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.left{
+				font-size: 0;
+			image{
+				width: 836px;
+				height: 788px;
+			}
+		}
+		.right{
+			width: 664px;
+			height: 788px;
+			background: #fff;
+			text-align: center;
+			padding-top: 100px;
+			box-sizing: border-box;
+			.right_logo{
+				width: 257px;
+				height: 54px;
+			}
+			.right_title{
+				font-size: 48px;
+				font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+				font-weight: 700;
+				text-align: center;
+				color: #3384ED;
+				margin-top: 40px;
+				margin-bottom: 120px;
+			}
+			.right_btn{
+				width: 455px;
+				height: 76px;
+				background: #3081eb;
+				border-radius: 10px;
+				color: #ffffff;
+				font-size: 30px;
+				line-height: 76px;
+				margin: 44px auto;
+				cursor: pointer;
+			}
+		}
+	}
+</style>

pages/yigePayCenter.vue

@@ -0,0 +1,222 @@
+<template>
+	<view>
+		<u-navbar leftIconColor="#2AABB0" title="" :autoBack="true" placeholder>
+			<view slot="center" class="navCenter">
+				<image src="/static/staticPay/icon1.png" mode=""></image>
+				<view>宜格收银台</view>
+			</view>
+		</u-navbar>
+		<view class="garyArea">
+			<view class="garyArea_val">￥0.00</view>
+			<view class="garyArea_lab">付款金额</view>
+		</view>
+		<view class="btnArea">
+			<view class="btnArea_title">支付方式</view>
+			<view class="btnArea_item" @click="activeFun(1)">
+				<view class="btnArea_item_l">
+					<image src="/static/staticPay/icon3.png" mode=""></image>
+					<view>微信支付</view>
+				</view>
+				<view class="btnArea_item_r" :class="{active:activeIndex==1}">
+					<view></view>
+				</view>
+			</view>
+			<view class="btnArea_item" @click="activeFun(0)">
+				<view class="btnArea_item_l">
+					<image src="/static/staticPay/icon2.png" mode=""></image>
+					<view>支付宝</view>
+				</view>
+				<view class="btnArea_item_r " :class="{active:activeIndex==0}">
+					<view></view>
+				</view>
+			</view>
+
+			<view class="btnArea_btn" @click="clickBtn()">
+				确认支付 {{time}}
+			</view>
+			<view class="btnArea_tig">
+				请在
+				<text>20</text>
+				分钟内完成付款，否则订单失效
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				time:"00.20.00",
+				activeIndex:1
+			}
+		},
+		onLoad() {
+			console.log(uni.$u.config.v);
+			this.clock()
+		},
+		methods: {
+			activeFun(index){
+				this.activeIndex=index;
+			},
+			clickBtn(){
+				uni.showToast({
+					icon:"none",
+					title: '请在APP中发起支付',
+					duration: 2000
+				});
+			},
+			clock(times = 1200) {
+				//页面加载时设置需要倒计时的秒数，计算小时
+				var shi = parseInt(times / 3600);
+				if (shi < 10) {
+					shi = "0" + shi
+				}
+				//计算分钟
+				var fen = parseInt((times % 3600) / 60);
+				if (fen < 10) {
+					fen = "0" + fen
+				}
+				//计算秒
+				var miao = (times % 3600) % 60;
+				if (miao < 10) {
+					miao = "0" + miao
+				}
+				this.time=shi+':'+fen + ":" + miao
+				let timeout
+				if (times > 0) {
+					times=times - 1
+					//定时1秒，然后调用自身clock方法
+					timeout = setTimeout(() => {
+						this.clock(times);
+					}, 1000);
+				} else {
+					clearTimeout(timeout)
+					return
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.navCenter {
+		display: flex;
+		align-items: center;
+
+		image {
+			width: 43rpx;
+			height: 44rpx;
+			margin-right: 6rpx;
+		}
+
+		>view {
+			font-size: 36rpx;
+			color: #1A1A1A;
+			font-weight: 700;
+		}
+	}
+
+	.garyArea {
+		background: #F5F5F5;
+		padding: 70rpx 0 90rpx 0;
+
+		.garyArea_val {
+			font-size: 50rpx;
+			color: #2AABB0;
+			font-weight: 700;
+			;
+			text-align: center;
+		}
+
+		.garyArea_lab {
+			font-size: 28rpx;
+			color: #666666;
+			text-align: center;
+		}
+	}
+
+	.btnArea {
+		padding: 54rpx 60rpx;
+		border-radius: 40rpx 40rpx 0 0;
+		position: relative;
+		background: #FFFFFF;
+		top: -40rpx;
+		.btnArea_title {
+			font-size: 32rpx;
+			color: #333333;
+			font-weight: 700;
+			margin-bottom: 50rpx;
+		}
+
+		.btnArea_item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 30rpx;
+
+			.btnArea_item_l {
+				font-size: 28rpx;
+				color: #666666;
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 58rpx;
+					height: 58rpx;
+					margin-right: 20rpx;
+				}
+			}
+
+			.btnArea_item_r {
+				width: 36rpx;
+				height: 36rpx;
+				border: 1rpx solid #B3B3B3;
+				border-radius: 50%;
+
+				>view {
+					display: none;
+				}
+			}
+
+			.active {
+				border-color: rgb(28,167,175);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				>view {
+					display: block;
+					width: 18rpx;
+					height: 18rpx;
+					border-radius: 50%;
+					background: rgb(28,167,175);
+				}
+			}
+		}
+
+		.btnArea_btn {
+			width: 630rpx;
+			height: 90rpx;
+			background: linear-gradient(#29b2a2 0%, #2aa7bd 100%);
+			border-radius: 45rpx;
+			margin: 100rpx auto 0;
+			text-align: center;
+			line-height: 90rpx;
+			font-size: 32rpx;
+			color: #FFFFFF;
+		}
+
+		.btnArea_tig {
+			font-size: 24rpx;
+			color: #808080;
+			margin-top: 26rpx;
+			text-align: center;
+			letter-spacing: 2rpx;
+			font-weight: 600;
+			text {
+				color: #FF0000;
+			}
+		}
+	}
+</style>

uni.scss

@@ -11,7 +11,7 @@
  *
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
-
+@import 'uview-ui/theme.scss';
 /* 颜色变量 */
 
 /* 行为相关颜色 */