This commit is contained in:
commit
6faeed11f1
|
|
@ -0,0 +1,21 @@
|
|||
<style lang="scss">
|
||||
@import "uni_modules/uview-ui/index.scss";
|
||||
@import 'src/css/yuledui.scss';
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
//判断用户是否登录
|
||||
const phone = uni.getStorageSync('phone');
|
||||
if (this.$u.test.isEmpty(phone)) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
});
|
||||
return false
|
||||
}
|
||||
|
||||
},
|
||||
onShow: function() {},
|
||||
onHide: function() {}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 按钮 -->
|
||||
<button
|
||||
:class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']"
|
||||
:style="{'background':bgColor, 'color': fontColor}"
|
||||
|
||||
@click="$emit('click', $event)"
|
||||
@contact="$emit('contact', $event)"
|
||||
@error="$emit('error', $event)"
|
||||
@getphonenumber="$emit('getphonenumber', $event)"
|
||||
@getuserinfo="$emit('getuserinfo', $event)"
|
||||
@launchapp="$emit('launchapp', $event)"
|
||||
@longtap="$emit('longtap', $event)"
|
||||
@opensetting="$emit('opensetting', $event)"
|
||||
@touchcancel="$emit('touchcancel', $event)"
|
||||
@touchend="$emit('touchend', $event)"
|
||||
@touchmove="$emit('touchmove', $event)"
|
||||
@touchstart="$emit('touchstart', $event)"
|
||||
>
|
||||
<view :class="_rotate?'rotate_loop':''">
|
||||
<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
|
||||
<view v-if="!_rotate"><slot name="text">{{ text }}</slot></view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
text: String, //显示文本
|
||||
rotate:{
|
||||
//是否启动加载
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
bgColor:{
|
||||
//按钮背景颜色
|
||||
type: String,
|
||||
default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
|
||||
},
|
||||
fontColor:{
|
||||
//按钮字体颜色
|
||||
type: String,
|
||||
default: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
_rotate() {
|
||||
//处理值
|
||||
return String(this.rotate) !== 'false'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./css/icon.css");
|
||||
|
||||
.dlbutton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
white-space:nowrap;
|
||||
overflow: hidden;
|
||||
width:601rpx;
|
||||
height:100rpx;
|
||||
background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
|
||||
box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
|
||||
border-radius:2.5rem;
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
.dlbutton_loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
width:100rpx;
|
||||
height:100rpx;
|
||||
background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
|
||||
box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
|
||||
border-radius:2.5rem;
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
.buttonBorder{
|
||||
border: none ;
|
||||
border-radius: 2.5rem ;
|
||||
-webkit-box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
|
||||
box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
|
||||
-webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.rotate_loop{
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1s;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-moz-transition-duration: 1s;
|
||||
-webkit-animation: rotate 1s linear infinite;
|
||||
-moz-animation: rotate 1s linear infinite;
|
||||
-o-animation: rotate 1s linear infinite;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
|
||||
to{-webkit-transform: rotate(360deg)}
|
||||
}
|
||||
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
|
||||
to{-moz-transform: rotate(359deg)}
|
||||
}
|
||||
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
|
||||
to{-o-transform: rotate(359deg)}
|
||||
}
|
||||
@keyframes rotate{from{transform: rotate(0deg)}
|
||||
to{transform: rotate(359deg)}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<view class="main-list oBorder">
|
||||
<!-- 文本框 -->
|
||||
<input
|
||||
class="main-input"
|
||||
:value="value"
|
||||
:type="_type"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
:password="type==='password'&&!showPassword"
|
||||
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@longpress="$emit('longpress', $event)"
|
||||
@confirm="$emit('confirm', $event)"
|
||||
@click="$emit('click', $event)"
|
||||
@longtap="$emit('longtap', $event)"
|
||||
@touchcancel="$emit('touchcancel', $event)"
|
||||
@touchend="$emit('touchend', $event)"
|
||||
@touchmove="$emit('touchmove', $event)"
|
||||
@touchstart="$emit('touchstart', $event)"
|
||||
/>
|
||||
<!-- 是否可见密码 -->
|
||||
<image
|
||||
v-if="_isShowPass&&type==='password'&&!_isShowCode"
|
||||
class="img cuIcon"
|
||||
:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'"
|
||||
@tap="showPass"
|
||||
></image>
|
||||
<!-- 倒计时 -->
|
||||
<view
|
||||
v-if="_isShowCode&&!_isShowPass"
|
||||
:class="['vercode',{'vercode-run': second>0}]"
|
||||
@click="setCode"
|
||||
>{{ getVerCodeSecond }}</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, countDown;
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
showPassword: false, //是否显示明文
|
||||
second: 0, //倒计时
|
||||
isRunCode: false, //是否开始倒计时
|
||||
}
|
||||
},
|
||||
props:{
|
||||
type: String, //类型
|
||||
value: String, //值
|
||||
placeholder: String, //框内提示
|
||||
maxlength: {
|
||||
//最大长度
|
||||
type: [Number,String],
|
||||
default: 20,
|
||||
},
|
||||
isShowPass:{
|
||||
//是否显示密码图标（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
isShowCode:{
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
codeText:{
|
||||
type: String,
|
||||
default: "获取验证码",
|
||||
},
|
||||
setTime:{
|
||||
//倒计时时间设置
|
||||
type: [Number,String],
|
||||
default: 60,
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
mounted() {
|
||||
_this=this
|
||||
//准备触发
|
||||
this.$on('runCode',(val)=>{
|
||||
this.runCode(val);
|
||||
});
|
||||
clearInterval(countDown);//先清理一次循环，避免缓存
|
||||
},
|
||||
methods:{
|
||||
showPass(){
|
||||
//是否显示密码
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
setCode(){
|
||||
//设置获取验证码的事件
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.$emit('setCode')
|
||||
},
|
||||
runCode(val){
|
||||
//开始倒计时
|
||||
if(String(val)=="0"){
|
||||
|
||||
//判断是否需要终止循环
|
||||
this.second = 0; //初始倒计时
|
||||
clearInterval(countDown);//清理循环
|
||||
this.isRunCode= false; //关闭循环状态
|
||||
return false;
|
||||
}
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.isRunCode= true
|
||||
this.second = this._setTime //倒数秒数
|
||||
|
||||
let _this=this;
|
||||
countDown = setInterval(function(){
|
||||
_this.second--
|
||||
if(_this.second==0){
|
||||
_this.isRunCode= false
|
||||
clearInterval(countDown)
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
_type(){
|
||||
//处理值
|
||||
const type = this.type
|
||||
return type == 'password' ? 'text' : type
|
||||
},
|
||||
_isShowPass() {
|
||||
//处理值
|
||||
return String(this.isShowPass) !== 'false'
|
||||
},
|
||||
_isShowCode() {
|
||||
//处理值
|
||||
return String(this.isShowCode) !== 'false'
|
||||
},
|
||||
_setTime() {
|
||||
//处理值
|
||||
const setTime = Number(this.setTime)
|
||||
return setTime>0 ? setTime : 60
|
||||
},
|
||||
getVerCodeSecond(){
|
||||
//验证码倒计时计算
|
||||
if(this.second<=0){
|
||||
return this.codeText;
|
||||
}else{
|
||||
if(this.second<10){
|
||||
return '0'+this.second;
|
||||
}else{
|
||||
return this.second;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./css/icon.css");
|
||||
|
||||
.main-list{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* height: 36rpx; */ /* Input 高度 */
|
||||
color: #333333;
|
||||
padding: 40rpx 32rpx;
|
||||
margin:32rpx 0;
|
||||
}
|
||||
.img{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.main-input{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
/* line-height: 100rpx; */
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.vercode {
|
||||
color: rgba(0,0,0,0.7);
|
||||
font-size: 24rpx;
|
||||
/* line-height: 100rpx; */
|
||||
}
|
||||
.vercode-run {
|
||||
color: rgba(0,0,0,0.4) !important;
|
||||
}
|
||||
.oBorder{
|
||||
border: none;
|
||||
border-radius: 2.5rem ;
|
||||
-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
|
||||
box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
import uView from 'uni_modules/uview-ui'
|
||||
Vue.use(uView)
|
||||
uni.$u.config.unit = 'rpx'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
{
|
||||
"name" : "余乐兑-商家",
|
||||
"appid" : "__UNI__0B61DF2",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
/* uView按需引入 */
|
||||
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
//首页
|
||||
{
|
||||
"path": "pages/first/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//登录
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//协议
|
||||
{
|
||||
"path": "pages/web_view/web_view",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//x
|
||||
{
|
||||
"path": "pages/store/change_phone/change_phone",
|
||||
"style": {
|
||||
"navigationBarTitleText": "更改手机号",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/store/modify_password/modify_password",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改/忘记密码",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/store/secret/secret",
|
||||
"style": {
|
||||
"navigationBarTitleText": "安全中心",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//店铺设置
|
||||
{
|
||||
"path": "pages/store/setup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "店铺设置",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//银行卡
|
||||
{
|
||||
"path": "pages/store/card",
|
||||
"style": {
|
||||
"navigationBarTitleText": "银行卡",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//账单
|
||||
{
|
||||
"path": "pages/fiance/ledger/ledger",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账单",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//收银台
|
||||
{
|
||||
"path": "pages/store/cashier/cashier",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//报表
|
||||
{
|
||||
"path": "pages/fiance/report/report",
|
||||
"style": {
|
||||
"navigationBarTitleText": "报表",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//结算记录
|
||||
{
|
||||
"path": "pages/store/withdraw/withdraw",
|
||||
"style": {
|
||||
"navigationBarTitleText": "结算记录",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//扫码送金豆
|
||||
{
|
||||
"path": "pages/store/withdraw/creditadd",
|
||||
"style": {
|
||||
"navigationBarTitleText": "扫码送金豆",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
},
|
||||
//金豆抵扣
|
||||
{
|
||||
"path": "pages/store/withdraw/credit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "金豆抵扣",
|
||||
"app-plus": {
|
||||
"bounce": "none" //关闭窗口回弹效果
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "余乐兑",
|
||||
"navigationBarBackgroundColor": "#ed6d00",
|
||||
"backgroundColor": "#F7F7F7"
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"color": "#909399",
|
||||
"selectedColor": "#ed6d00",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "black",
|
||||
"height": "60px",
|
||||
"list": [{
|
||||
"pagePath": "pages/first/index",
|
||||
"iconPath": "static/yuledui/tab_home.png",
|
||||
"selectedIconPath": "static/yuledui/tab_home_selected.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"iconPath": "static/yuledui/tab_my.png",
|
||||
"selectedIconPath": "static/yuledui/tab_my_selected.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wrapper{margin-left:0rpx;margin-right:0rpx;margin-top:0rpx}.recharge-card{font-weight:bold;color:#f60}.withDraw{background:none;height:auto;margin:60rpx 0 40rpx 0}.withDraw .background-card,.withDraw .front-card{min-height:180rpx;border-radius:20rpx}.withDraw .background-card{background-color:#fff;box-shadow:0px 4px 10px 0px rgba(183,182,182,.5)}.withDraw .front-card{display:flex;margin-top:-220rpx;position:relative;margin-left:20rpx;margin-right:20rpx;background-color:#faf0e3;padding:5rpx 20rpx;min-height:250rpx;line-height:40rpx;border-width:1px;border-style:solid;border-color:#ed6d00}.withDraw .front-card .left{display:flex;justify-content:space-evenly;flex-direction:column;width:100%}.withDraw .front-card .left .title{font-weight:bold}.withDraw .front-card .left .desc{font-size:24rpx;color:#82848a}.withDraw .front-card .right{width:8%;display:flex;flex-direction:column;justify-content:center;text-align:right}.withDraw .front-card .right .status{font-weight:550;font-size:35rpx;color:#ed6d00}.product-detail .head{background:#fff;height:auto;padding:15rpx}.product-detail .head .datepicker{text-align:left;font-weight:599;font-size:28rpx}.product-detail .head .datepicker .pikertext{margin-right:15rpx}.product-detail .head .title{padding:0rpx 30rpx 0rpx 30rpx;background-color:#fff;text-align:center;padding-top:20rpx}.product-detail .head .month{padding:30rpx}.product-detail .head .month .text{color:#555;font-weight:bold}.product-detail .head .data{color:#fff}.product-detail .head .data .container{display:flex;flex-direction:column;justify-content:space-between;background-image:url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/ledger_total_bg.png);background-size:100% 100%;background-repeat:no-repeat;padding:42rpx}.product-detail .head .data .container .total{font-size:35rpx;display:flex;justify-content:space-between;font-weight:599}.product-detail .head .data .container .total .mdselect{display:flex;font-size:30rpx;align-items:center;flex-direction:row;justify-content:flex-end}.product-detail .head .data .container .ordernum{font-size:25rpx;padding-top:0;display:flex;align-items:center;justify-content:space-between;opacity:.8}.product-detail .head .data .container .bottom-count-tr{display:flex;align-items:center;justify-content:space-between}.product-detail .list{padding:0rpx 30rpx 0rpx 30rpx}.product-detail .list .card{width:100%;background-color:#fff;border-radius:20rpx;box-shadow:0px 4px 10px 0px rgba(183,182,182,.5);padding:30rpx 0rpx 0rpx 0rpx;margin-top:18rpx;color:#333}.product-detail .list .card .top{padding:0rpx 18rpx 0 18rpx;width:100%;display:flex;justify-content:space-between}.product-detail .list .card .top .icon .image{margin-top:5rpx;margin-right:12rpx}.product-detail .list .card .top .order-no .no{color:#333}.product-detail .list .card .top .order-no .time{font-size:24rpx;color:#82848a}.product-detail .list .card .top .price{text-align:right}.product-detail .list .card .top .price .text{color:#ed6d00}.product-detail .list .card .top .price .nopay{color:red}.product-detail .list .card .content{padding:10rpx 30rpx 0 30rpx;color:#555}.product-detail .list .card .content .detail{display:flex;white-space:normal;font-size:24rpx;padding:10rpx 0;justify-content:space-between}.product-detail .list .card .content .detail .item{padding-right:10rpx}.product-detail .list .card .content .price{margin-top:20rpx;text-align:right;font-size:30rpx}.product-detail .list .card .content .price .total,.product-detail .list .card .content .price .real-price{color:#ed6d00}.product-detail .list .card .content .price .real-price{font-size:35rpx}.product-detail .list .card .reckon-view{padding:20rpx 30rpx;margin-top:-5rpx}.product-detail .list .card .bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-left-radius:20rpx;border-bottom-right-radius:20rpx;padding:20rpx 30rpx}.product-detail .list .card .bottom .btn-memo,.product-detail .list .card .bottom .btn-detail{border-width:1rpx;border-style:solid;border-color:#ed6d00;width:160rpx;text-align:center;border-radius:60rpx;color:#ed6d00;letter-spacing:5rpx;height:50rpx;padding-top:5rpx}.product-detail .list .card .bottom .bottom-btn{display:flex;align-items:center}.product-detail .list .card .bottom .bottom-btn .remarktext{color:gray;margin-right:5rpx}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
.wrapper {
|
||||
margin-left: 0rpx;
|
||||
margin-right: 0rpx;
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
.recharge-card {
|
||||
font-weight: bold;
|
||||
color: #ff6600;
|
||||
}
|
||||
/deep/.u-subsection__item__text {
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
.withDraw {
|
||||
background: none;
|
||||
height: auto;
|
||||
margin: 60rpx 0 40rpx 0;
|
||||
.background-card,
|
||||
.front-card {
|
||||
min-height: 180rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.background-card {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
}
|
||||
.front-card {
|
||||
display: flex;
|
||||
margin-top: -220rpx;
|
||||
position: relative;
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
background-color: #faf0e3;
|
||||
padding: 5rpx 20rpx;
|
||||
min-height: 250rpx;
|
||||
line-height: 40rpx;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #ed6d00;
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #82848a;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 8%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
.status {
|
||||
font-weight: 550;
|
||||
font-size: 35rpx;
|
||||
color: #ed6d00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.u-icon__icon {
|
||||
font-size: 40rpx !important;
|
||||
color: #5c5f63 !important;
|
||||
}
|
||||
/deep/.u-search__content {
|
||||
border-radius: 106px !important;
|
||||
height: 68rpx !important;
|
||||
}
|
||||
/deep/.u-search__action--active {
|
||||
margin-left: 20rpx !important;
|
||||
text-align: start !important;
|
||||
width: 100rpx !important;
|
||||
}
|
||||
.product-detail {
|
||||
.head {
|
||||
background: white;
|
||||
height: auto;
|
||||
padding: 15rpx;
|
||||
width: auto !important;
|
||||
.datepicker {
|
||||
text-align: left;
|
||||
font-weight: 599;
|
||||
font-size: 28rpx;
|
||||
.pikertext {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
padding: 0rpx 30rpx 0rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.month {
|
||||
padding: 30rpx;
|
||||
.text {
|
||||
color: #555555;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.data {
|
||||
color: #ffffff;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-image: url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/ledger_total_bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 42rpx;
|
||||
.total {
|
||||
font-size: 35rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 599;
|
||||
.mdselect {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.ordernum {
|
||||
font-size: 25rpx;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.bottom-count-tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding: 0rpx 30rpx 0rpx 30rpx;
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
padding: 30rpx 0rpx 0rpx 0rpx;
|
||||
margin-top: 18rpx;
|
||||
color: #333333;
|
||||
.top {
|
||||
padding: 0rpx 18rpx 0 18rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.icon {
|
||||
.image {
|
||||
margin-top: 5rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.order-no {
|
||||
.no {
|
||||
color: #333333;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #82848a;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
.orderprice {
|
||||
font-weight: bold;
|
||||
}
|
||||
text-align: right;
|
||||
.text {
|
||||
color: #ed6d00;
|
||||
}
|
||||
.count {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.nopay {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10rpx 30rpx 0 30rpx;
|
||||
color: #555555;
|
||||
.detail {
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 0;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
margin-top: 20rpx;
|
||||
text-align: right;
|
||||
font-size: 30rpx;
|
||||
.total,
|
||||
.real-price {
|
||||
font-size: 35rpx;
|
||||
color: #ed6d00;
|
||||
}
|
||||
.refund-price {
|
||||
color: crimson;
|
||||
}
|
||||
}
|
||||
}
|
||||
.reckon-view {
|
||||
padding: 20rpx 30rpx;
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
.refundText {
|
||||
display: inline-block;
|
||||
}
|
||||
.refund-btn {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
.btn-memo,
|
||||
.btn-detail {
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: #ed6d00;
|
||||
width: 160rpx;
|
||||
text-align: center;
|
||||
border-radius: 60rpx;
|
||||
color: #ed6d00;
|
||||
letter-spacing: 5rpx;
|
||||
height: 50rpx;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.remarktext {
|
||||
color: gray;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrapper product-detail">
|
||||
<view class="head">
|
||||
<u-search placeholder="用户/订单金额/订单号/备注/(模糊搜索)" @change="searchEv" v-model="form.keyword"></u-search>
|
||||
<view class="title month">
|
||||
<view class="datepicker">
|
||||
<text class="pikertext">选择日期:</text>
|
||||
<text @click="timePickerShow_start = true">{{ startDate }}</text>
|
||||
至
|
||||
<text @click="timePickerShow_end = true">{{ endDate }}</text>
|
||||
</view>
|
||||
<u-calendar monthNum='13' :show='timePickerShow_start' :minDate="minDate" :maxDate='maxDate'
|
||||
toolTip="选择开始日期" v-model="startDate" @confirm="timeConfirm_start"></u-calendar>
|
||||
<u-calendar monthNum='13' :show='timePickerShow_end' :minDate="minDate" :maxDate='maxDate'
|
||||
toolTip="选择结束日期" v-model="endDate" @confirm="timeConfirm_end"></u-calendar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-subsection :list="filterArr" :current="current" @change="sectionChange"></u-subsection>
|
||||
</view>
|
||||
|
||||
<view class="data" v-if="list.count">
|
||||
<view class="container">
|
||||
<view class="total">
|
||||
<view>共{{ list.count.total }}笔订单</view>
|
||||
<!-- 门店选择 -->
|
||||
<view class="mdselect">
|
||||
<view style="width: 150rpx; text-align: right;">共￥{{ list.count.price_sum ? list.count.price_sum : 0 }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view class="card" v-for="(item, index) in list.items">
|
||||
<view class="top">
|
||||
<view class="flex-c">
|
||||
<view class="icon">
|
||||
<view class="image">
|
||||
<u-image width="62rpx" height="62rpx"
|
||||
:src="'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/' + (item.paytype == 21 ? 'icon_wechat' : 'icon_alipay') + '.png'"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-no">
|
||||
<text class="no">{{ item.ordersn }}</text>
|
||||
<br />
|
||||
<text class="time">{{ item.createtime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="price">
|
||||
<view>
|
||||
<view class="text" v-if="item.refundstate > 0">有退款</view>
|
||||
<view class="text" v-else-if="item.status == 3">付款成功</view>
|
||||
<view class="nopay" v-else>未付款</view>
|
||||
<view class="count">
|
||||
<text style="font-size: 25rpx;">订单金额:¥</text>
|
||||
<text class="orderprice">{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="content">
|
||||
<view class="detail">
|
||||
<text class="item">用户ID:{{ item.userid }}</text>
|
||||
<text class="item">
|
||||
<text v-if="item.realname">{{ item.realname }}</text>
|
||||
<text v-else-if="item.nickname">{{ item.nickname }}</text>
|
||||
<text>{{ item.mobile }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="price" v-if="form.filter == 'online_order'">
|
||||
<text>{{ item.goods_name }}</text>
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
<text>实付:</text>
|
||||
<text class="real-price">
|
||||
￥
|
||||
<text>{{ item.offline_price }}</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="bottom-btn">
|
||||
<u-button size="mini" :ripple="true" @click="showRemark(item)"
|
||||
style="margin-right:5px;" ripple-bg-color="#ed6d00">
|
||||
备注
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" v-if="item.showRemarkView">
|
||||
<view class="bottom-btn">
|
||||
<u--input placeholder="请填写订单备注" border="bottom" clearable></u--input>
|
||||
<!-- <u-field v-model="item.remark" label="" label-width="1" placeholder="请填写订单备注"> -->
|
||||
<u-button size="mini" slot="right" type="success" @click="saveRemark(item)">保存备注</u-button>
|
||||
<!-- </u-field> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom" v-if="item.remark">
|
||||
<text class="remarktext">备注:{{ item.remark }}</text>
|
||||
</view>
|
||||
<!-- 退款 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
const d = new Date()
|
||||
const year = d.getFullYear()
|
||||
let month = d.getMonth() + 1
|
||||
month = month < 10 ? `0${month}` : month
|
||||
const date = d.getDate()
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maxDate: `${year}-${month}-${date}`, //最大选择日期
|
||||
minDate: `${year-1}-${month}-${date}`, //最小选择日期
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
timePickerShow_start: false,
|
||||
timePickerShow_end: false,
|
||||
current: 0,
|
||||
filterArr: ['金豆抵扣', '微信', '支付宝', '未付款'],
|
||||
form: {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
keyword: '',
|
||||
},
|
||||
list: {
|
||||
count:2,
|
||||
items: [],
|
||||
},
|
||||
withdraw: {}
|
||||
};
|
||||
},
|
||||
onLoad(opt) {
|
||||
that = this
|
||||
that.init()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
that.resetForm()
|
||||
that.getList()
|
||||
setTimeout(function() {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.stopPullDownRefresh({
|
||||
success: (result) => {},
|
||||
fail: (error) => {}
|
||||
})
|
||||
}, 688)
|
||||
},
|
||||
onReachBottom() {
|
||||
this.form.page += 1
|
||||
that.getList()
|
||||
},
|
||||
methods: {
|
||||
sectionChange(index) {
|
||||
this.current = index
|
||||
},
|
||||
init() {
|
||||
let now = new Date()
|
||||
let money_1day = now.getFullYear() + '-' + (now.getMonth() + 1) + '-01'
|
||||
let today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
|
||||
this.startDate = money_1day
|
||||
this.endDate = today
|
||||
// this.getList()
|
||||
},
|
||||
getList() {
|
||||
},
|
||||
showDatePicker() {
|
||||
this.timePickerShow = true
|
||||
},
|
||||
//开始时间
|
||||
timeConfirm_start(date) {
|
||||
const date2 = new Date(this.endDate);
|
||||
const date1 = new Date(date[0]);
|
||||
if (date1> date2) {
|
||||
uni.showToast({
|
||||
title: '不能选择晚于结束时间的日期，请重新选择',
|
||||
duration: 2000,
|
||||
icon:'none'
|
||||
});
|
||||
} else {
|
||||
this.startDate = date[0]
|
||||
this.timePickerShow_start = false
|
||||
}
|
||||
// this.changeDate4Order()
|
||||
},
|
||||
//结束时间
|
||||
timeConfirm_end(date) {
|
||||
const date1 = new Date(this.startDate);
|
||||
const date2 = new Date(date[0]);
|
||||
if (date1 > date2) {
|
||||
uni.showToast({
|
||||
title: '不能选择晚于开始时间的日期，请重新选择',
|
||||
duration: 2000,
|
||||
icon:'none'
|
||||
});
|
||||
} else {
|
||||
this.endDate = date[0]
|
||||
this.timePickerShow_end = false
|
||||
}
|
||||
},
|
||||
changeDate4Order() {
|
||||
this.resetForm()
|
||||
that.getList()
|
||||
},
|
||||
showRemark(item) {
|
||||
item.showRemarkView = true
|
||||
},
|
||||
/**
|
||||
* 保存订单备注
|
||||
* @param {item} item
|
||||
*/
|
||||
saveRemark(item) {
|
||||
},
|
||||
// 重置form
|
||||
resetForm() {
|
||||
that.form.page = 1
|
||||
that.list = {
|
||||
items: []
|
||||
}
|
||||
},
|
||||
// 关键词搜索
|
||||
searchEv(value) {
|
||||
that.form.keyword = value
|
||||
that.resetForm()
|
||||
that.getList()
|
||||
},
|
||||
// 筛选radio
|
||||
radioGroupChange(value) {
|
||||
that.form.filter = value
|
||||
that.resetForm()
|
||||
that.getList()
|
||||
},
|
||||
} // /methods
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './ledger.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
.wrapper {
|
||||
margin-left: 0rpx;
|
||||
margin-right: 0rpx;
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
.product-detail {
|
||||
.head {
|
||||
background: none;
|
||||
height: auto;
|
||||
.month {
|
||||
padding: 20rpx 30rpx 0rpx 30rpx;
|
||||
.text {
|
||||
color: #555555;
|
||||
font-weight: bold;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
.data {
|
||||
margin: 20rpx 30rpx 0rpx 20rpx;
|
||||
color: #ffffff;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-image: url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/ledger_total_bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 40rpx;
|
||||
.total {
|
||||
font-size: 55rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
}
|
||||
.ordernum {
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding: 0rpx 30rpx 0rpx 30rpx;
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
padding: 30rpx 0rpx 0rpx 0rpx;
|
||||
margin-top: 40rpx;
|
||||
color: #333333;
|
||||
.top {
|
||||
padding: 0rpx 30rpx 10rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
padding-right: 20rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
.order-no {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 20rpx 30rpx;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bottom{
|
||||
padding: 5%;
|
||||
button:{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrapper product-detail">
|
||||
|
||||
<view class="head">
|
||||
<view class="month">
|
||||
<view @click="selectMonth" style="display: flex;align-items: center; font-size:46rpx;">
|
||||
<text class="text">{{currentYear}}</text> 年 <text class="text">{{currentMonth}}</text> 月 <u-icon
|
||||
style="padding: 10rpx;" :name="iconName" size="20" color="#555555"></u-icon>
|
||||
</view>
|
||||
<u-datetime-picker @confirm="timeConfirm" @cancel="timeCancel" :show="show" v-model="defaultDate"
|
||||
mode="year-month"></u-datetime-picker>
|
||||
</view>
|
||||
<view class="data">
|
||||
<view class="container">
|
||||
<view class="total">
|
||||
<text>￥{{report.sum}}元</text>
|
||||
</view>
|
||||
<view class="ordernum">
|
||||
<text class="text " style="padding-top:0">共{{report.count}}笔订单</text>
|
||||
<view>
|
||||
<text class="text">{{currentYear}}年</text> <text class="text">{{currentMonth}}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view class="card">
|
||||
<view class="top">
|
||||
<view class="icon" style="width: 60rpx; display: flex;flex-direction: row;">
|
||||
<view
|
||||
style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx; margin-right: -8rpx; z-index: 10;">
|
||||
</view>
|
||||
<view style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-no">
|
||||
收入走势
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="line" :opts="lineConfig" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<u-button :disabled="false" class="button" @click="go2order">账 单</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
var date = new Date;
|
||||
return {
|
||||
currentYear: date.getFullYear(),
|
||||
currentMonth: date.getMonth() + 1,
|
||||
lastDay: 0,
|
||||
iconName: 'arrow-down-fill',
|
||||
lineConfig: {
|
||||
dataLabel: false,
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
disableGrid: true
|
||||
},
|
||||
"xAxis": {
|
||||
"rotateLabel": true,
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
show: false,
|
||||
chartData: {
|
||||
categories: [],
|
||||
series: [{
|
||||
data: [],
|
||||
name: "收款金额"
|
||||
}, {
|
||||
data: [],
|
||||
name: "订单数量"
|
||||
}]
|
||||
},
|
||||
report: {
|
||||
count: 0,
|
||||
sum: 0
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
that = this
|
||||
//获取当月最后一天
|
||||
that.lastDay = new Date(that.currentYear, that.currentMonth, 0).getDate()
|
||||
that.defaultDate = that.currentYear + '-' + that.currentMonth
|
||||
// that.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
},
|
||||
timeConfirm(time) {
|
||||
const date = new Date(time.value);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1; // 月份是从0开始的
|
||||
that.currentYear = year
|
||||
that.currentMonth = month
|
||||
this.iconName = 'arrow-down-fill';
|
||||
this.show = false
|
||||
that.defaultDate = that.currentYear + '-' + that.currentMonth
|
||||
// that.getList()
|
||||
},
|
||||
timeCancel() {
|
||||
this.iconName = 'arrow-down-fill';
|
||||
},
|
||||
selectMonth() {
|
||||
this.show = true;
|
||||
this.iconName = 'arrow-up-fill';
|
||||
},
|
||||
go2order() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/fiance/ledger/ledger'
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./report.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,444 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrapper">
|
||||
<view class="box box-first">
|
||||
<u-row justify="around">
|
||||
<u-col :span="span" :offset="offset" @click="navigateToLedger">
|
||||
<view>
|
||||
<u-image src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/zhangdan.png"
|
||||
class="image" height="140rpx" width="140rpx"></u-image>
|
||||
</view>
|
||||
<view class="text box-first-txt">账单</view>
|
||||
</u-col>
|
||||
<u-col :span="span" :offset="offset" @click="navigateToQrList">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/shouyintai.png"
|
||||
class="image" height="140rpx" width="140rpx"></u-image>
|
||||
</view>
|
||||
<view class="text box-first-txt">收银台</view>
|
||||
</u-col>
|
||||
|
||||
<u-col :span="span" :offset="offset" @click="navigateToReport">
|
||||
<view>
|
||||
<u-image src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/baobiao.png"
|
||||
class="image" height="140rpx" width="140rpx"></u-image>
|
||||
</view>
|
||||
<view class="text box-first-txt">报表</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view class="box box-second">
|
||||
<u-row justify="around">
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="autoMoneyHistory">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/aotu_money_history.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">结算记录</view>
|
||||
</u-col>
|
||||
|
||||
<!-- <u-col class="row-second-cus" :span="span" :offset="offset" @click="navigateToBonus">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/home_reward.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">奖励金</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="navigateToDepositCard">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/home_credit_card.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">储值卡</view>
|
||||
</u-col> -->
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="credigGiveSetPage">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/credit_give.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">扫码送金豆</view>
|
||||
</u-col>
|
||||
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset"
|
||||
@click="credigGive">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/home_manage.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">金豆抵扣</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="navigateToStoreSetup">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/home_shop_setting.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">店铺设置</view>
|
||||
</u-col>
|
||||
<!-- <u-col class="row-second-cus" :span="span" :offset="offset" @click="autoMoney">
|
||||
<view>
|
||||
<u-image src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/bank.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">结算银行卡</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" v-if="false" :span="span" :offset="offset" @click="autoMoney">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/aotu_money.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">进销存</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="bindAlipay">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/icon_alipay.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">绑定支付宝</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset"
|
||||
@click="go2Page('/pages/home/more_fun/more_fun')">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/more_function.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">更多功能</view>
|
||||
</u-col> -->
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="safecenter">
|
||||
<view>
|
||||
<u-image
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/more_function.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">安全中心</view>
|
||||
</u-col>
|
||||
<u-col class="row-second-cus" :span="span" :offset="offset" @click="autoMoney">
|
||||
<view>
|
||||
<u-image src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/bank.png"
|
||||
class="image" height="75rpx" width="75rpx"></u-image>
|
||||
</view>
|
||||
<view class="text">结算银行卡</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<!-- <view>
|
||||
<u-notice-bar type="error" :show="showNoticeBar" @getMore="showNotice" @click="showNotice"
|
||||
@close="showNoticeBar = false" :more-icon='true' :text="notice" :close-icon="true"></u-notice-bar>
|
||||
</view> -->
|
||||
<!-- 首页广告 -->
|
||||
<view class="swiper">
|
||||
<u-swiper @change="swipChange" :height="250" :list="swipList" :effect3d="effect3d"
|
||||
:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="newsClick"></u-swiper>
|
||||
</view>
|
||||
<!-- 首页广告 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that = {},
|
||||
userInfo, autoGo2CashTask
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
span: 4,
|
||||
offset: 0,
|
||||
bgColor: 'none',
|
||||
halfWidth: 150,
|
||||
borderColor: '#dcdfe6',
|
||||
type: 'primary',
|
||||
color: '#909399',
|
||||
fontSize: '26',
|
||||
// swiper
|
||||
// swipList: [{
|
||||
// image: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home_swiper.png',
|
||||
// title: '',
|
||||
// url: 'https://v1.angyakeji.com/appindex.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article.list'
|
||||
// }],
|
||||
swipList: [
|
||||
'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home_swiper.png',
|
||||
// title: '',
|
||||
// url: 'https://v1.angyakeji.com/appindex.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article.list'
|
||||
],
|
||||
title: false,
|
||||
mode: 'round',
|
||||
indicatorPos: 'bottomCenter',
|
||||
notice: "",
|
||||
showNoticeBar: false,
|
||||
yldstoreDataLocal: uni.getStorageSync("yldstoreDataLocal"),
|
||||
effect3d: false
|
||||
}
|
||||
},
|
||||
onLoad: function() {
|
||||
that = this
|
||||
// this.autoGo2Cash()
|
||||
},
|
||||
onUnload() {
|
||||
clearTimeout(autoGo2CashTask)
|
||||
},
|
||||
onShow: function() {
|
||||
this.yldstoreDataLocal = uni.getStorageSync("yldstoreDataLocal")
|
||||
// userInfo = uni.getStorageSync(getApp().globalData.config.userDataKey)
|
||||
// if (typeof (userInfo) == 'undefined' || !userInfo || !userInfo.mobile || !userInfo.sign) {
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/login/index'
|
||||
// })
|
||||
// return
|
||||
// } else {
|
||||
setTimeout(function() {
|
||||
// 获取轮播图
|
||||
// that.init()
|
||||
}, 299)
|
||||
// }
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function() {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.stopPullDownRefresh({
|
||||
success: (result) => {},
|
||||
fail: (error) => {}
|
||||
})
|
||||
}, 688)
|
||||
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 获取商家通知
|
||||
this.showNotice()
|
||||
//获取轮播图
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.swiper'
|
||||
}).then(res => {
|
||||
that.swipList = res.data.data
|
||||
})
|
||||
},
|
||||
go2Page(page) {
|
||||
uni.navigateTo({
|
||||
url: page
|
||||
})
|
||||
},
|
||||
// 自动跳转到收银台
|
||||
autoGo2Cash() {
|
||||
//#ifdef APP-PLUS
|
||||
if (uni.getStorageSync("yldstoreDataLocal") && !uni.getStorageSync("yldstoreDataLocal").auto_go_cash) {
|
||||
return
|
||||
}
|
||||
autoGo2CashTask = setTimeout(function() {
|
||||
let pages = getCurrentPages() //关于获取页面的官方文档https://uniapp.dcloud.io/api/window/window
|
||||
let page = pages[pages.length - 1].route
|
||||
if (page == "pages/home/home") {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/cashier/cashier'
|
||||
})
|
||||
}
|
||||
}, 1000 * 30)
|
||||
// #endif
|
||||
},
|
||||
newsClick(index) {
|
||||
if (that.swipList[index].url) {
|
||||
that.navigateTo('/pages/web_view/web_view?title=最新活动&url=' + encodeURIComponent((that.swipList[index]
|
||||
.url)))
|
||||
}
|
||||
},
|
||||
swipChange(index) {
|
||||
// console.log(index);
|
||||
},
|
||||
navigateTo(urlPath) {
|
||||
uni.navigateTo({
|
||||
url: urlPath,
|
||||
success(res) {
|
||||
//console.log(res)
|
||||
},
|
||||
fail(res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
},
|
||||
//安全中心
|
||||
safecenter(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/store/secret/secret'
|
||||
})
|
||||
},
|
||||
//金豆抵扣
|
||||
credigGive(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/store/withdraw/credit'
|
||||
})
|
||||
},
|
||||
navigateToProductManage(type) {
|
||||
this.navigateTo('pages/goods/list?type=' + type)
|
||||
},
|
||||
//账单
|
||||
navigateToLedger() {
|
||||
this.navigateTo('/pages/fiance/ledger/ledger')
|
||||
},
|
||||
//报表
|
||||
navigateToReport() {
|
||||
this.navigateTo('/pages/fiance/report/report')
|
||||
},
|
||||
//店铺设置
|
||||
navigateToStoreSetup() {
|
||||
this.navigateTo('/pages/store/setup')
|
||||
},
|
||||
navigateToDepositCard() {
|
||||
this.navigateTo('/pages/store/deposit/index')
|
||||
},
|
||||
//收银台
|
||||
navigateToQrList() {
|
||||
this.navigateTo('/pages/store/cashier/cashier')
|
||||
},
|
||||
navigateToQrList_sy_s() {
|
||||
this.navigateTo('/pages/store/cashier_sy/cashier_sy_s')
|
||||
},
|
||||
navigateToQrList_sy_f() {
|
||||
this.navigateTo('/pages/store/cashier_sy/cashier_sy_f/cashier_sy_f')
|
||||
},
|
||||
navigateToQrList_sy_scan() {
|
||||
this.navigateTo('/pages/store/cashier_sy/cashier_sy_b/cashier_sy_f')
|
||||
},
|
||||
navigateToBonus() {
|
||||
this.navigateTo('/pages/fiance/bonus/bonus')
|
||||
},
|
||||
merchantTutorial() {
|
||||
this.navigateTo('/pages/web_view/web_view?title=商家教程&url=' + encodeURIComponent(
|
||||
'https://yld.angyakeji.com/api/admin/public/view/merch_help/'))
|
||||
},
|
||||
//结算银行卡 自动结算
|
||||
autoMoney() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/card'
|
||||
});
|
||||
},
|
||||
bindAlipay() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/withdraw/alipay'
|
||||
});
|
||||
},
|
||||
//结算记录
|
||||
autoMoneyHistory() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/withdraw/withdraw'
|
||||
})
|
||||
},
|
||||
//扫码送金豆
|
||||
credigGiveSetPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/withdraw/creditadd'
|
||||
})
|
||||
},
|
||||
go2MoreFun() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/more_fun/index'
|
||||
})
|
||||
},
|
||||
showNotice() {
|
||||
// 获取商家通知
|
||||
// getApp().globalData.util.request({
|
||||
// s: 'Merch.Sys_Index.notice'
|
||||
// }).then(res => {
|
||||
// let noticeData = res.data.data
|
||||
// console.log(6666, noticeData);
|
||||
// let currentTime = new Date().getTime() / 1000
|
||||
// if (noticeData?.endtime > currentTime) {
|
||||
// if (noticeData.showNoticeBar) {
|
||||
// that.showNoticeBar = true
|
||||
// }
|
||||
// this.notice = noticeData.content
|
||||
// if (noticeData.forceDialog) {
|
||||
// let tempContent = ""
|
||||
// for (let item in noticeData.content) {
|
||||
// tempContent += noticeData.content[item] + "\n\n"
|
||||
// }
|
||||
// if (JSON.stringify(noticeData) != uni.getStorageSync("dontNoticeContent")) {
|
||||
// uni.showModal({
|
||||
// title: noticeData.title,
|
||||
// content: tempContent,
|
||||
// cancelText: "不再提示",
|
||||
// confirmText: '关闭',
|
||||
// success: (res) => {
|
||||
// if (res.cancel) {
|
||||
// uni.setStorageSync("dontNoticeContent", JSON.stringify(
|
||||
// noticeData))
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
},
|
||||
// /methods
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/.wrapper .box-second .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/.u-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.main {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.box-second {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.box-second .text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 25rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.row-second-cus {
|
||||
padding-top: 25rpx !important;
|
||||
padding-bottom: 25rpx !important;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-top: 450rpx;
|
||||
background: url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home/merch_index_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.box-first-txt {
|
||||
margin-top: -15rpx !important;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin-top: 45rpx;
|
||||
}
|
||||
|
||||
/deep/.u-col-4 {
|
||||
display: flex;
|
||||
align-items: center !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content:center;
|
||||
/* margin-top: 128rpx; */
|
||||
}
|
||||
|
||||
/* 头部 logo */
|
||||
.header {
|
||||
width:161rpx;
|
||||
height:161rpx;
|
||||
box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1);
|
||||
border-radius:50%;
|
||||
margin-top: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.header image{
|
||||
width:161rpx;
|
||||
height:161rpx;
|
||||
border-radius:10rpx;
|
||||
}
|
||||
|
||||
/* 主体 */
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 70rpx;
|
||||
padding-right: 70rpx;
|
||||
}
|
||||
.tips {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
margin-top: 64rpx;
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.wbutton{
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
|
||||
/* 其他登录方式 */
|
||||
.other_login{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 256rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.login_icon{
|
||||
border: none;
|
||||
font-size: 64rpx;
|
||||
margin: 0 64rpx 0 64rpx;
|
||||
color: rgba(0,0,0,0.7)
|
||||
}
|
||||
.wechat_color{
|
||||
color: #83DC42;
|
||||
}
|
||||
.weibo_color{
|
||||
color: #F9221D;
|
||||
}
|
||||
.github_color{
|
||||
color: #24292E;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
margin-top: 45rpx;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: center;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.footer text{
|
||||
font-size: 24rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.header-title-yuledui-tuiguangren{
|
||||
text-align: center;
|
||||
font-size: 50rpx;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view class="register">
|
||||
<view class="content">
|
||||
<!-- 头部logo -->
|
||||
<view class="header">
|
||||
<image :src="logoImage"></image>
|
||||
</view>
|
||||
<view class="header-title-yuledui-tuiguangren">
|
||||
<text>余乐兑商家登录</text>
|
||||
</view>
|
||||
<!-- 主体 -->
|
||||
<view class="main">
|
||||
<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
|
||||
<wInput v-if="type=='password'" v-model="password" type="password" placeholder="密码"></wInput>
|
||||
<wInput v-if="type=='code'" v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode
|
||||
ref="runCode" @setCode="getVerCode()"></wInput>
|
||||
</view>
|
||||
|
||||
<wButton class="wbutton" text="登 录" :rotate="isRotate" @click.native="startReg()"></wButton>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<view class="footer">
|
||||
<text @tap="isShowAgree" class="cuIcon" style="font-size:28rpx;"
|
||||
:class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意</text>
|
||||
<!-- 协议地址 -->
|
||||
<navigator
|
||||
url="../web_view/web_view?title=服务协议&url=https%3A//yld.angyakeji.com/html/article/merch_user_agree.html"
|
||||
open-type="navigate">《服务协议》</navigator>
|
||||
<navigator
|
||||
url="../web_view/web_view?title=隐私协议&url=https%3A//yld.angyakeji.com/html/article/merch_service.html"
|
||||
open-type="navigate">《隐私协议》</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wInput from '../../components/watch-login/watch-input.vue' //input
|
||||
import wButton from '../../components/watch-login/watch-button.vue' //button
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//logo图片 base64
|
||||
logoImage: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/img/logo/merch.png',
|
||||
phoneData: '', // 用户/电话
|
||||
passData: '', //密码
|
||||
verCode: "", //验证码
|
||||
showAgree: false, //协议是否选择
|
||||
isRotate: false, //是否加载旋转,
|
||||
password: '', //登录密码
|
||||
type: 'password', //登录模式 code:验证码登录 password 密码登录
|
||||
}
|
||||
},
|
||||
components: {
|
||||
wInput,
|
||||
wButton,
|
||||
},
|
||||
methods: {
|
||||
change2PasswordLogin() {
|
||||
if (this.type == 'code') {
|
||||
this.type = 'password'
|
||||
this.verCode = ''
|
||||
uni.showToast({
|
||||
title: '当前密码登录',
|
||||
icon: 'none',
|
||||
mask: false
|
||||
})
|
||||
} else {
|
||||
this.type = 'code'
|
||||
this.password = ''
|
||||
uni.showToast({
|
||||
title: '当前验证码登录',
|
||||
icon: 'none',
|
||||
mask: false
|
||||
})
|
||||
}
|
||||
},
|
||||
isShowAgree() {
|
||||
//是否选择协议
|
||||
this.showAgree = !this.showAgree;
|
||||
},
|
||||
getVerCode() {
|
||||
//获取验证码
|
||||
if (this.phoneData.length != 11) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '手机号不正确'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
// 发送验证码
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.User.getSMSCode',
|
||||
mobile: this.phoneData
|
||||
}).then(res => {
|
||||
this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '验证码发送成功'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
|
||||
}, 1000 * 60)
|
||||
});
|
||||
},
|
||||
startReg() {
|
||||
if (!this.showAgree) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先阅读并勾选同意服务协议与隐私政策',
|
||||
showCancel: true,
|
||||
success: ({
|
||||
confirm,
|
||||
cancel
|
||||
}) => {}
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.isRotate) {
|
||||
//判断是否加载中，避免重复点击请求
|
||||
return false;
|
||||
}
|
||||
if (this.phoneData.length != 11) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '手机号不正确'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.verCode.length != 6 && this.type == 'code') {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '验证码不正确'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!this.password && this.type == 'password') {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '请输入密码'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
position: 'bottom',
|
||||
title: '登录成功',
|
||||
duration: 1000
|
||||
});
|
||||
uni.switchTab({
|
||||
url: "/pages/first/index",
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url("../../components/watch-login/css/icon.css");
|
||||
@import url("./css/main.css");
|
||||
</style>
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="head" @click="go2Page('/pages/store/setup')">
|
||||
<view class="avatar">
|
||||
<u-avatar :mode="mode" :size="size" :src="storeData.logo" :text="text" :showLevel="showLevel"
|
||||
:showSex="showSex" :sexIcon="sexIcon" :bgColor='bgColor'></u-avatar>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view>{{storeData.merchname}}</view>
|
||||
<view style="font-size: 25rpx; padding-top: 10rpx;">ID:{{storeData.id}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view class="store-menu">
|
||||
<u-cell-group>
|
||||
<u-cell title="结算记录" @click="go2Page('/pages/store/withdraw/withdraw')"></u-cell>
|
||||
<u-cell title="结算银行卡" @click="go2Page('/pages/store/card')"></u-cell>
|
||||
</u-cell-group>
|
||||
<view class="hr"></view>
|
||||
<u-cell-group>
|
||||
<u-cell title="店铺设置" @click="go2Page('/pages/store/setup')">
|
||||
</u-cell>
|
||||
<!-- <u-cell @click="go2Page('/pages/store/withdraw/creditadd')" title="扫码送金豆">
|
||||
</u-cell> -->
|
||||
</u-cell-group>
|
||||
<view class="hr"></view>
|
||||
<u-cell-group>
|
||||
<u-cell title="安全中心" @click="go2Page('/pages/store/secret/secret')"></u-cell>
|
||||
<u-cell title="修改/忘记密码"
|
||||
@click="go2Page('/pages/store/modify_password/modify_password')"></u-cell>
|
||||
|
||||
<u-cell title="修改登录手机号"
|
||||
@click="go2Page('/pages/store/change_phone/change_phone')"></u-cell>
|
||||
</u-cell-group>
|
||||
<view class="hr"></view>
|
||||
|
||||
<u-cell-group>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<u-cell title="检查更新" @click="checkUpdate"></u-cell>
|
||||
<!-- #endif -->
|
||||
<u-cell title="关于我们" @click="redirectToAboutUs"></u-cell>
|
||||
<u-cell title="客服电话" @click="makeCall"></u-cell>
|
||||
<!-- <u-cell title="设备信息" @click="go2Page('/pages/store/device_info/device_info')"></u-cell> -->
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20" style="padding-top: 10rpx;">
|
||||
<u-button @click="btnLogout" shape="circle"
|
||||
style="width: 50%;color: #FFA332; font-weight: bold; letter-spacing: 5rpx;">退出登录</u-button>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="items">
|
||||
<navigator class="item"
|
||||
url="../web_view/web_view?title=服务协议&url=https%3A//yld.angyakeji.com/html/article/merch_user_agree.html"
|
||||
open-type="navigate">《服务协议》</navigator>
|
||||
<navigator class="item"
|
||||
url="../web_view/web_view?title=隐私协议&url=https%3A//yld.angyakeji.com/html/article/merch_service.html"
|
||||
open-type="navigate">《隐私协议》</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-modal ref="uModal" :show="show" :show-cancel-button="true" :show-title="showTitle"
|
||||
:async-close="asyncClose" @cancel='cancel' @confirm="confirmLogOut" :content="content" :cancel-style="cancelStyle"
|
||||
:confirm-style="confirmStyle" :content-style="contentStyle" cancel-text="取消">
|
||||
</u-modal>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeData: {},
|
||||
// modal
|
||||
show: false,
|
||||
zoom: false,
|
||||
content: "确定退出登录？",
|
||||
contentSlot: false,
|
||||
showTitle: false,
|
||||
asyncClose: false,
|
||||
cancelStyle: {
|
||||
color: "#FFA332",
|
||||
borderRadius: "50rpx",
|
||||
borderWidth: "1rpx",
|
||||
borderStyle: "solid",
|
||||
margin: "30rpx 40rpx 20rpx 40rpx",
|
||||
fontSize: "30rpx",
|
||||
letterSpacing: "15rpx",
|
||||
paddingLeft: "10rpx",
|
||||
},
|
||||
|
||||
confirmStyle: {
|
||||
color: "#FFFFFF",
|
||||
borderRadius: "50rpx",
|
||||
borderWidth: "1rpx",
|
||||
borderStyle: "solid",
|
||||
backgroundColor: "#FFA332",
|
||||
margin: "30rpx 40rpx 20rpx 40rpx",
|
||||
fontSize: "30rpx",
|
||||
letterSpacing: "15rpx",
|
||||
paddingLeft: "10rpx",
|
||||
},
|
||||
contentStyle: {
|
||||
paddingTop: "80rpx",
|
||||
paddingBottom: "60rpx",
|
||||
letterSpacing: "10rpx",
|
||||
fontSize: "35rpx",
|
||||
},
|
||||
|
||||
// avatar
|
||||
mode: "circle",
|
||||
src: "http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/avatar.jpg",
|
||||
text: "", // 优先级比src高
|
||||
size: "140",
|
||||
showLevel: false,
|
||||
showSex: false,
|
||||
sexIcon: "man",
|
||||
bgColor: "#fcbd71"
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
that = this
|
||||
// this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.get'
|
||||
}).then(res => {
|
||||
that.storeData = res.data.data
|
||||
})
|
||||
},
|
||||
go2News() {
|
||||
this.go2Page(
|
||||
"/pages/web_view/web_view?title=最新活动&url=" +
|
||||
escape(
|
||||
"https://v1.angyakeji.com/appindex.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article&aid=15"
|
||||
)
|
||||
);
|
||||
},
|
||||
btnLogout() {
|
||||
this.show = true;
|
||||
},
|
||||
confirmLogOut() {
|
||||
uni.clearStorageSync()
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}, 100);
|
||||
},
|
||||
cancel(){
|
||||
this.show = false;
|
||||
},
|
||||
go2Page(urlPath) {
|
||||
uni.navigateTo({
|
||||
url: urlPath,
|
||||
});
|
||||
},
|
||||
redirectToAboutUs() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/web_view/web_view?url=" +
|
||||
escape(
|
||||
"https%3A//yld.angyakeji.com/html/article/aboutus.html"
|
||||
) +
|
||||
"&title=关于我们",
|
||||
});
|
||||
},
|
||||
checkUpdate() {
|
||||
getApp().globalData.util.forceUpateApk()
|
||||
},
|
||||
makeCall() {
|
||||
let tel = '4001108766'
|
||||
uni.showModal({
|
||||
title: '客服电话',
|
||||
content: tel,
|
||||
confirmText: '复制电话',
|
||||
success: ({
|
||||
confirm,
|
||||
cancel
|
||||
}) => {
|
||||
if (confirm) {
|
||||
uni.setClipboardData({
|
||||
data: tel,
|
||||
success: (result) => {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
fail: (error) => {}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.body {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.body .head {
|
||||
display: flex;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 62rpx;
|
||||
letter-spacing: 5rpx;
|
||||
height: auto;
|
||||
background-color: #ed6d00;
|
||||
}
|
||||
|
||||
/deep/.u-cell-group {
|
||||
background-color: #fff;
|
||||
}
|
||||
/deep/.u-cell__title-text {
|
||||
font-size:28rpx;
|
||||
color: #606266;
|
||||
}
|
||||
.body .head .text {
|
||||
text-align: left;
|
||||
font-size: 35rpx;
|
||||
padding-left: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin: 0 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
margin: 0 12rpx;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 6px;
|
||||
background-color: rgba(240, 240, 240, 0.35);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
/deep/.u-cell__body{
|
||||
padding: 26rpx 32rpx !important;
|
||||
}
|
||||
/deep/.u-line{
|
||||
border-bottom: 1px solid #eaebed !important;
|
||||
}
|
||||
|
||||
.map-wrap-text {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first {
|
||||
margin-top: -40rpx;
|
||||
padding: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first .text {
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first .icons {
|
||||
padding-top: 50rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrapper .box {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 0px 0px rgba(194, 188, 188, 0.3);
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-second {
|
||||
border-radius: 0rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.image-store {
|
||||
width: 80rpx !important;
|
||||
height: 80rpx !important;
|
||||
}
|
||||
|
||||
.store-menu image {
|
||||
width: 30rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 10rpx;
|
||||
padding-bottom: 80rpx;
|
||||
.items {
|
||||
padding-top: 30rpx;
|
||||
color: #ed6d00;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hr {
|
||||
height: 15rpx;
|
||||
}
|
||||
|
||||
</style>>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.body .navbar{background-color:#ed6d00}.body .head{display:flex;padding-left:30rpx;padding-right:30rpx;padding-top:30rpx;padding-bottom:62rpx;letter-spacing:5rpx;height:auto}.body .head .text{text-align:left;font-size:35rpx;padding-left:20rpx}.wrap{padding:24rpx}.navbar-right{margin-right:24rpx;display:flex}.search-wrap{margin:0 20rpx;flex:1}.right-item{margin:0 12rpx;position:relative;color:#fff;display:flex}.slot-wrap{display:flex;align-items:center;flex:1}.map-wrap{display:flex;align-items:center;padding:4px 6px;background-color:rgba(240,240,240,.35);color:#fff;font-size:22rpx;border-radius:100rpx;margin-left:30rpx}.map-wrap-text{padding:0 6rpx}.wrapper{width:100%;margin-left:0rpx}.wrapper .box-first{margin-top:-40rpx;padding:30rpx 30rpx 30rpx 30rpx;font-size:24rpx}.wrapper .box-first .text{width:100rpx}.wrapper .box-first .icons{padding-top:50rpx;white-space:nowrap}.wrapper .box{width:100%;background-color:#fff;box-shadow:0px 0px 0px 0px rgba(194,188,188,.3);border-radius:30rpx 30rpx 0rpx 0rpx}.wrapper .box-second{border-radius:0rpx;margin-top:10rpx}.image-store{width:80rpx !important;height:80rpx !important}.store-menu image{width:30rpx;margin-right:15rpx}.bottom{margin-top:10rpx;padding-bottom:80rpx}.bottom .items{padding-top:30rpx;color:#ed6d00;display:flex;flex-direction:row;justify-content:center}.hr{height:15rpx}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="header">
|
||||
<view class="container">
|
||||
<view class="icon">
|
||||
<u-image height="60" width="60"
|
||||
src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/credit_card_icon.png"></u-image>
|
||||
</view>
|
||||
<view class="title">
|
||||
结算银行卡设置
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="content">
|
||||
<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
|
||||
<!-- <u-form-item
|
||||
label-width="260"
|
||||
:label-position="labelPosition"
|
||||
label="自动识别银行卡号:(拍照或上传图片)"
|
||||
prop="bank_name"
|
||||
>
|
||||
<image
|
||||
class="u-avatar-demo"
|
||||
@click="bankUpImg"
|
||||
:src="bankImgUp"
|
||||
style="width:120rpx;"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-form-item> -->
|
||||
<u-form-item label-width="200" :label-position="labelPosition" label="收款人姓名:" prop="bank_name">
|
||||
<u-input :border="border" placeholder="请输入收款人姓名" v-model="form.bank_name" :disabled='true'></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="200" :label-position="labelPosition" label="收款卡号:" prop="bank_no">
|
||||
<u-input :border="border" placeholder="请输入收款卡号" v-model="form.bank_no" :disabled='true'></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="200" :label-position="labelPosition" label="确认收款卡号:" prop="bank_no">
|
||||
<u-input :border="border" placeholder="请再次输入收款卡号" v-model="form.bank_no2" :disabled='true'></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="200" :label-position="labelPosition" label="银行:" prop="bank_com">
|
||||
<u-input :border="border" placeholder="请输入银行" v-model="form.bank_com" :disabled='true'></u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<!-- <view style="margin-top: 60rpx;">
|
||||
<u-button
|
||||
:disabled="false"
|
||||
class="button"
|
||||
@click="submit"
|
||||
>保存设置</u-button>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
form: {
|
||||
payType: '提现到银行',
|
||||
payTypeValue: 2,
|
||||
},
|
||||
bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png', // 银行卡照片OCR
|
||||
openAutoPay: true,
|
||||
border: false,
|
||||
showPayType: false,
|
||||
labelPosition: 'left',
|
||||
errorType: ['message'],
|
||||
rules: {
|
||||
bank_name: [{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '姓名长度在3到5个字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
return this.$u.test.chinese(value);
|
||||
},
|
||||
message: '姓名必须为中文',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad: function() {
|
||||
that = this
|
||||
// that.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Bank.getBankCard',
|
||||
}).then(res => {
|
||||
if (res.data.ret == 200) {
|
||||
that.form = res.data.data;
|
||||
that.form.bank_no2 = res.data.data.bank_no
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (that.form.bank_no !== that.form.bank_no2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入的卡号不一致'
|
||||
});
|
||||
return
|
||||
}
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Bank.updateBankCard',
|
||||
bank_com: that.form.bank_com,
|
||||
bank_no: that.form.bank_no,
|
||||
bank_name: that.form.bank_name,
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.data.res_msg,
|
||||
showCancel: false,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
selectColor(items) {
|
||||
if (items[0].value == 'no') {
|
||||
that.openAutoPay = false
|
||||
} else {
|
||||
that.openAutoPay = true
|
||||
}
|
||||
},
|
||||
bankUpImg() {
|
||||
getApp().globalData.util.upload().then(success => {
|
||||
that.bankImgUp = success
|
||||
that.getBankOCR(that.bankImgUp)
|
||||
})
|
||||
},
|
||||
// 银行卡识别OCR
|
||||
getBankOCR: function(fileUrl) {
|
||||
uni.showLoading({
|
||||
title: '识别中'
|
||||
})
|
||||
uni.request({
|
||||
url: 'https://yld.angyakeji.com/www/src/tools/aliyun/ocr.php',
|
||||
data: {
|
||||
fileUrl: fileUrl,
|
||||
type: 'bankcard'
|
||||
},
|
||||
complete: (res) => {
|
||||
uni.hideLoading()
|
||||
if (res.data && res.data.Data) {
|
||||
let fres = res.data.Data
|
||||
that.$set(that.form, 'bank_com', fres.BankName)
|
||||
that.$set(that.form, 'bank_no', fres.CardNumber)
|
||||
that.$set(that.form, 'bank_no2', fres.CardNumber)
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
padding-left: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-top: 0rpx;
|
||||
|
||||
.payinfo {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background: #f0ecec;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 30rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
border-radius: 10px;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.body{width:100%;background-image:url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/pay-bg.jpg);background-repeat:no-repeat;background-size:cover}.saowofukuan-suijijianmian{font-family:Arial,Helvetica,sans-serif;font-weight:700;color:#1d75ed;font-size:75rpx}.body .pinganyinhang{display:flex;justify-content:center;z-index:3}.body .pinganyinhang image{width:264.75rpx;height:137.25rpx;z-index:1}.scan-png{height:50rpx !important;width:50rpx !important;position:fixed;right:15rpx;top:15rpx;opacity:.5;z-index:3}.top-nav{text-align:center;z-index:2;text-align:center;margin:0 auto;margin-top:50rpx;position:relative;display:flex;flex-direction:column;align-items:center;background-color:#fff;border-radius:50rpx;width:80%;box-shadow:0px 0px 10px rgba(0,0,0,.6)}.body .bgimg{position:fixed;width:100%;top:0;z-index:0;height:100%}.body .cais-bg{position:fixed;width:491.2rpx;height:710.4rpx;z-index:1}.body .top-nav .saowofukuan{width:522rpx;height:60rpx;margin-top:30rpx;margin-bottom:10rpx;z-index:1}.top-nav .received-money{color:#dd3d1f;font-size:46rpx;font-weight:400}.hr{display:inline-block;padding-top:3px;width:90%;border-top:1px dashed rgba(0,0,0,.3)}.qrcode{border:1px solid rgba(0,0,0,.1);padding:20rpx;margin:10rpx 0 1rpx 0;border-radius:15rpx}.merchname{font-size:70rpx;font-weight:500;margin-bottom:10rpx}.bottom-logo-parter image{width:50rpx;margin-right:20rpx;margin-bottom:5rpx}.yld-saoma-fuk-dejindou{width:100%;text-align:center;margin-top:35rpx;display:flex;flex-direction:column;align-items:center}.yld-saoma-fuk-dejindou image{width:505rpx;height:45rpx;z-index:2;margin-bottom:30rpx}.re-money-notice{font-weight:500;width:100%;z-index:9;padding-bottom:5rpx;font-size:28.5rpx}.re-money-notice .re-money-notice-playtext{color:#dd3d1f;font-size:35rpx}.cash-model{z-index:99}.cash-model .yld-saoma-fuk-dejindou{display:none}.cash-model .bottom-logo-parter{display:none}.cash-model .merchname{display:none}.cash-model .saowofukuan-cash{font-size:45rpx;color:coral;font-weight:600;margin-bottom:-15rpx}.cash-goods-list{font-size:32rpx;width:90%;display:flex;flex-direction:column;z-index:99;align-items:flex-start}.cash-goods-list .cash-gl-top{font-size:38rpx}.cash-goods-list .cash-goods-list-tr{border-bottom:1px dashed #999;margin-bottom:15rpx;padding-bottom:12rpx;width:100%;display:flex;justify-content:space-between;align-items:center}.cash-goods-list .cash-goods-list-tr .cash-goods-list-tr-right-button{display:flex;align-items:center}.cash-goods-list .cash-goods-list-tr .cash-goods-list-tr-right-button text{display:flex;align-items:center;width:50rpx;height:50rpx;line-height:50rpx;border-radius:9rpx;text-align:center;justify-content:center;text-align:center;border:1px solid #999;font-weight:600;font-size:45rpx}.cash-goods-list .cash-goods-list-tr .cash-gl-bottom{margin:0 auto}.page-last{text-align:center;display:flex;justify-content:center}.page-last .ecny-img-body{z-index:9;margin-top:50rpx;padding-bottom:10%}.page-last .ecny-img-body .use-ecny-topay-scan{margin:15rpx 0}.page-last .ecny-qrurl-img{width:90%;border-radius:25rpx;margin-top:20rpx}.page-last .ecnyqr{background-color:#fff;margin:0 auto;text-align:center;border-radius:25rpx;display:flex;justify-content:center;align-items:center;flex-direction:column}.page-last .ecnyqr #qrcode_ecny{margin:0 auto;margin-top:35rpx}.page-last .ecnyqr .yld-logo{margin:20rpx 0}#scan-gun{position:fixed;z-index:0;width:1px;height:1px;bottom:-1000px}.use-ecny-btn{margin:0 auto;z-index:9}
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
.body {
|
||||
width: 100%;
|
||||
background-image: url(http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/pay-bg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.saowofukuan-suijijianmian {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1d75ed;
|
||||
font-size: 75rpx;
|
||||
}
|
||||
|
||||
.body .pinganyinhang {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
.body .pinganyinhang image {
|
||||
width: 264.75rpx;
|
||||
height: 137.25rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scan-png {
|
||||
height: 50rpx !important;
|
||||
width: 50rpx !important;
|
||||
position: fixed;
|
||||
right: 15rpx;
|
||||
top: 15rpx;
|
||||
opacity: 0.5;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
border-radius: 50rpx;
|
||||
width: 29%;
|
||||
box-shadow: 0px 0px 10px rgba($color: #000000, $alpha: 0.6);
|
||||
}
|
||||
|
||||
.body .bgimg {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.body .cais-bg {
|
||||
position: fixed;
|
||||
width: 491.2rpx;
|
||||
height: 710.4rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
// 扫我付款文字
|
||||
.body .top-nav .saowofukuan {
|
||||
width: 522rpx;
|
||||
height: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-nav .received-money {
|
||||
color: #dd3d1f;
|
||||
font-size: 46rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hr {
|
||||
display: inline-block;
|
||||
padding-top: 3px;
|
||||
width: 90%;
|
||||
border-top: 1px dashed rgba($color: #000000, $alpha: 0.3);
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
border: 1px solid rgba($color: #000000, $alpha: 0.1);
|
||||
padding: 10rpx;
|
||||
margin: 5rpx 0 1rpx 0;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.merchname {
|
||||
font-size: 70rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.bottom-logo-parter image {
|
||||
width: 26rpx;
|
||||
margin-right: 20rpx;
|
||||
// margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
// 余乐兑扫码付款得金豆
|
||||
.yld-saoma-fuk-dejindou {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 35rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.yld-saoma-fuk-dejindou image {
|
||||
width: 505rpx;
|
||||
height: 45rpx;
|
||||
z-index: 2;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.re-money-notice {
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
padding-bottom: 5rpx;
|
||||
font-size: 28.5rpx;
|
||||
.re-money-notice-playtext {
|
||||
color: #dd3d1f;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cash-model {
|
||||
z-index: 99;
|
||||
.yld-saoma-fuk-dejindou {
|
||||
display: none;
|
||||
}
|
||||
.bottom-logo-parter {
|
||||
display: none;
|
||||
}
|
||||
.merchname {
|
||||
display: none;
|
||||
}
|
||||
.saowofukuan-cash {
|
||||
font-size: 45rpx;
|
||||
color: coral;
|
||||
font-weight: 600;
|
||||
margin-bottom: -15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cash-goods-list {
|
||||
font-size: 32rpx;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 99;
|
||||
align-items: flex-start;
|
||||
.cash-gl-top {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.cash-goods-list-tr {
|
||||
border-bottom: 1px dashed #999999;
|
||||
margin-bottom: 15rpx;
|
||||
padding-bottom: 12rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.cash-goods-list-tr-right-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 9rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border: 1px solid #999999;
|
||||
font-weight: 600;
|
||||
font-size: 45rpx;
|
||||
}
|
||||
}
|
||||
.cash-gl-bottom {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-last {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.ecny-img-body {
|
||||
z-index: 9;
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 10%;
|
||||
.use-ecny-topay-scan {
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
// background:url("https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/new_edition_221214/qr_background.png") no-repeat center;
|
||||
}
|
||||
.ecny-qrurl-img {
|
||||
width: 90%;
|
||||
border-radius: 25rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.ecnyqr {
|
||||
background-color: #ffffff;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 25rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 35rpx;
|
||||
.qrcode_ecny_bg {
|
||||
//数币红色背景
|
||||
background: url('https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/new_edition_221214/qr_background.png') no-repeat center;
|
||||
background-size: cover;
|
||||
.qrcode_ecny_bg_padding {
|
||||
background-color: #fff;
|
||||
padding: 15rpx;
|
||||
margin: 35rpx auto 0rpx auto;
|
||||
}
|
||||
}
|
||||
#qrcode_ecny {
|
||||
margin: 0 auto;
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
.yld-logo {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
#scan-gun {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
bottom: -1000px;
|
||||
}
|
||||
|
||||
.use-ecny-btn {
|
||||
margin: 0 auto;
|
||||
z-index: 9;
|
||||
}
|
||||
.guanggao {
|
||||
// z-index: 90;
|
||||
// width: 100%;
|
||||
// bottom: 0rpx;
|
||||
// position: fixed;
|
||||
// margin-top: 12px;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
// top: -12px;
|
||||
// left: 5%;
|
||||
}
|
||||
|
||||
::v-deep uni-swiper .uni-swiper-wrapper {
|
||||
border-radius: 4px;
|
||||
}
|
||||
// ::v-deep .uni-video-container{
|
||||
// width: 90% !important;
|
||||
// }
|
||||
// uni-image > div,
|
||||
// uni-image > img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
::v-deep .bgimg > div {
|
||||
background-position: 50% 50% !important;
|
||||
background-size: 120% 120% !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
.body .arrow-left {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-left: 21px;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
.yld_pay_body {
|
||||
position: relative;
|
||||
top: -38rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
uni-page-body,
|
||||
.body {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<view class="body" style="overflow: hidden;padding-bottom: 0rpx">
|
||||
<view class="" style="width: 100%;height: 20px;visibility: hidden;"></view>
|
||||
<view class="arrow-left">
|
||||
<i class="uni-btn-icon" @click="backto" style="color: rgb(255, 255, 255); font-size: 27px;"></i>
|
||||
</view>
|
||||
<view class="yld_pay_body" :class="showEncy ? 'hide' : ''">
|
||||
<view class=""
|
||||
style="z-index: 111;font-size: 35px; color: #fff;font-weight:800;letter-spacing: 4px;margin: 0 60px;">
|
||||
<view class="">
|
||||
扫我付款
|
||||
</view>
|
||||
<view class="">
|
||||
随机减免
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-nav page-first" id="top-nav">
|
||||
<view class="" style="height: 13px;"></view>
|
||||
<view class="qrcode">
|
||||
<canvas id="qrcode" canvas-id="qrcode"
|
||||
:style="'width: ' + sysWidth * 0.35 * qrcodeWidth + 'px;height:' + sysWidth * 0.35 * qrcodeWidth + 'px;'"></canvas>
|
||||
</view>
|
||||
<view class="merchname" :style="'font-size:' + 13 + 'px;'">
|
||||
{{ yld_merch_userdata.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 广告 -->
|
||||
|
||||
<view class="guanggao">
|
||||
<video :autoplay="true" :loop="true" :show-fullscreen-btn='false' :show-play-btn='false'
|
||||
:enable-progress-gesture='false' :show-center-play-btn='false' :controls='false'
|
||||
:style="'width: ' + sysWidth+ 'px;height: calc(100vh - 195px);'"
|
||||
src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/2.mp4"></video>
|
||||
<!-- </swiper-item> -->
|
||||
|
||||
<!-- <swiper-item :style="'width: ' + sysWidth + 'px;'">
|
||||
<view class="swiper-item">
|
||||
<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/1.jpg" mode="" :style="'width: ' + sysWidth+ 'px;'"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item> -->
|
||||
|
||||
<!-- <swiper-item :style="'width: ' + sysWidth + 'px;'">
|
||||
<view class="swiper-item">
|
||||
<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/2.jpg" mode="" :style="'width: ' + sysWidth * 1.5 + 'px;'"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item :style="'width: ' + sysWidth + 'px;'">
|
||||
<view class="swiper-item">
|
||||
<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/3.jpg" mode="" :style="'width: ' + sysWidth * 1.5 + 'px;'"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item> -->
|
||||
|
||||
<!-- <swiper-item :style="'width: ' + sysWidth + 'px;'">
|
||||
<video :autoplay="false" :loop="false"
|
||||
:show-play-btn="true" :muted="true"
|
||||
:style="'width: ' + sysWidth+ 'px;height:456rpx;'" src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/1.mp4"></video>
|
||||
</swiper-item> -->
|
||||
|
||||
<!-- </swiper> -->
|
||||
</view>
|
||||
<view>
|
||||
<image class="bgimg"
|
||||
src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/pay-bg.jpg"
|
||||
id="ecny-img-body-srolltag" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showEncy: false,
|
||||
sysWidth: uni.getSystemInfoSync().windowWidth,
|
||||
qrcodeWidth: 0.6,
|
||||
yld_merch_userdata: uni.getStorageSync("yld_merch_userdata"),
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
onReady() {
|
||||
this.makeQRCode()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function() {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.stopPullDownRefresh()
|
||||
}, 688)
|
||||
},
|
||||
onHide() {
|
||||
this.init()
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(lisenTask)
|
||||
},
|
||||
methods: {
|
||||
backto() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
// 生成聚合收款码
|
||||
makeQRCode(total = null) {
|
||||
let qrcodeText = "https://yld.angyakeji.com/www/public/view/merge_qrcode/index.html?a=1&scene=merchid%3d"
|
||||
let qrOption = {
|
||||
text: qrcodeText,
|
||||
size: this.sysWidth * this.qrcodeWidth * 0.35,
|
||||
foreground: {
|
||||
image: {
|
||||
src: "",
|
||||
width: 0.2,
|
||||
height: 0.2
|
||||
}
|
||||
}
|
||||
}
|
||||
// qrOption.foreground.image.src = 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home_swiper.png'
|
||||
const ctx = uni.createCanvasContext('qrcode')
|
||||
const uqrcode = new UQRCode(qrOption, ctx)
|
||||
uqrcode.make()
|
||||
uqrcode.draw()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './cashier.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<view style="display: flex;flex-direction: column; font-size: 12px;">
|
||||
<button class="grow1 button" size="mini" type="default" >测试</button>
|
||||
<view class="">沙发撒旦法撒旦法</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
previewSizeI: -1,
|
||||
previewSizeList: [],
|
||||
rotation: 0,
|
||||
logs: [],
|
||||
images: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mini-btn {
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: xx-large;
|
||||
// width: 100rpx;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.previews {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.preview-wrap {
|
||||
background: black;
|
||||
margin: 2px;
|
||||
min-width: 320px;
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.logs {
|
||||
// border: 1rpx solid #eee;
|
||||
// padding: 5px;
|
||||
// margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wrap .desc{display:flex;color:#b9bbc3;font-size:18rpx;width:100%}.wrap .desc .notice{width:60%;text-align:left}.wrap .desc .forget{width:40%;text-align:right;color:#333;display:none}.wrap .button{width:90%;font-size:40rpx;background-color:#ed6d00;color:#fff;letter-spacing:10rpx}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
.wrap {
|
||||
.desc {
|
||||
display: flex;
|
||||
color: #b9bbc3;
|
||||
font-size: 18rpx;
|
||||
width: 100%;
|
||||
.notice {
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
}
|
||||
.forget {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
/deep/.u-form {
|
||||
padding: 26rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
/deep/.u-form-item {
|
||||
border-bottom: 2rpx solid #efefef;
|
||||
}
|
||||
/deep/.u-form-item__body__right__message{
|
||||
margin-left: 257px !important;
|
||||
}
|
||||
/deep/.u-form-item__body__left__content__label{
|
||||
font-size: 28rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrap">
|
||||
<u--form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
|
||||
<u-form-item label-width="160" :label-position="labelPosition" label="输入新手机号">
|
||||
<u-input :password-icon="true" :border="border" placeholder="" v-model="form.mobile"></u-input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="" prop="code">
|
||||
<u-input placeholder='请输入验证码' maxlength="6" type='number' v-model="form.code" />
|
||||
<u-button slot="right" size="mini" @click="getCode" plain>
|
||||
<block v-if="!timeTick">
|
||||
获取验证码
|
||||
</block>
|
||||
<block v-else>
|
||||
剩余{{timeTick}}秒
|
||||
</block>
|
||||
</u-button>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
|
||||
<view style="margin-top: 30rpx;">
|
||||
<u-button :disabled="false" class="button" @click="submit">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, that;
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
timeTick: 0,
|
||||
border: false,
|
||||
labelPosition: 'top',
|
||||
errorType: ['message'],
|
||||
rules: {
|
||||
password: [{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 6,
|
||||
max: 18,
|
||||
message: '密码长度在6到18个字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
|
||||
let reg = /^([a-zA-z0-9!@#$%%^&*()_+-=}{\[\]};'":\\\/.,<>?])+$/;
|
||||
|
||||
return reg.test(value);
|
||||
},
|
||||
message: '密码必须为英文字母、数字或字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
re_password: [{
|
||||
required: true,
|
||||
message: '请再次输入密码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
that = this
|
||||
_this = that
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
//获取验证码
|
||||
if (_this.form.mobile.length != 11) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '手机号不正确'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (that.timeTick > 0) {
|
||||
uni.showToast({
|
||||
title: '发送太频繁啦',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 发送验证码
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.User.getSMSCode',
|
||||
mobile: _this.form.mobile
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '验证码发送成功'
|
||||
});
|
||||
that.timeTick = 60;
|
||||
// 开始倒计时
|
||||
let timeTick = setInterval(function() {
|
||||
if (that.timeTick > 0) {
|
||||
that.timeTick = that.timeTick - 1
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
clearInterval(timeTick)
|
||||
}, 1000 * 60)
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (that.form.re_password != that.form.password) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入密码不一致'
|
||||
});
|
||||
return;
|
||||
}
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Account.changeMobileAccount',
|
||||
mobile: _this.form.mobile,
|
||||
code: that.form.code,
|
||||
}).then(res => {
|
||||
if (res.data.ret == 200) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '修改成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./change_phone.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.wrap .desc{display:flex;color:#b9bbc3;font-size:18rpx;width:100%}.wrap .desc .notice{width:60%;text-align:left}.wrap .desc .forget{width:40%;text-align:right;color:#333;display:none}.wrap .button{width:90%;font-size:40rpx;background-color:#ed6d00;color:#fff;letter-spacing:10rpx}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
.wrap {
|
||||
.desc {
|
||||
display: flex;
|
||||
color: #b9bbc3;
|
||||
font-size: 18rpx;
|
||||
width: 100%;
|
||||
.notice {
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
}
|
||||
.forget {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
color: #333333;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
/deep/.u-form {
|
||||
padding: 26rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
/deep/.u-form-item {
|
||||
border-bottom: 2rpx solid #efefef;
|
||||
}
|
||||
/deep/.u-form-item__body__right__message{
|
||||
margin-left: 257px !important;
|
||||
}
|
||||
/deep/.u-form-item__body__left__content__labe{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrap">
|
||||
<u--form :model="form" :rules="rules" ref="uForm">
|
||||
<u-form-item label-width="160" :label-position="labelPosition" label="手机号" prop='userInfo.phone'>
|
||||
<u--input :password-icon="true" :border="border" placeholder=""
|
||||
v-model="form.userInfo.phone"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="" prop="userInfo.code">
|
||||
<u--input placeholder='请输入验证码' maxlength="6" type='number' v-model="form.userInfo.code" />
|
||||
<u-button slot="right" size="mini" @click="getCode" plain>
|
||||
<block v-if="!timeTick">
|
||||
获取验证码
|
||||
</block>
|
||||
<block v-else>
|
||||
剩余{{timeTick}}秒
|
||||
</block>
|
||||
</u-button>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label-width="160" :label-position="labelPosition" label="新密码" prop='userInfo.password'>
|
||||
<u--input :password-icon="true" type="password" :border="border" placeholder="请输入新密码"
|
||||
v-model="form.password"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<view class="desc">
|
||||
<view class="notice">
|
||||
密码6-18位英文字母，数字或字符
|
||||
</view>
|
||||
<view class="forget">
|
||||
忘记密码？
|
||||
</view>
|
||||
</view>
|
||||
<u-form-item label-width="160" :label-position="labelPosition" label="确认密码" prop="userInfo.re_password">
|
||||
<u--input :password-icon="true" type="password" :border="border" placeholder="请再次输入新密码确认"
|
||||
v-model="form.re_password"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
</u--form>
|
||||
|
||||
<view style="margin-top: 30rpx;">
|
||||
<u-button :disabled="false" class="button" @click="submit">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, that;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
userInfo: {
|
||||
phone: "",
|
||||
password: "",
|
||||
re_password: "",
|
||||
code: ""
|
||||
}
|
||||
},
|
||||
timeTick: 0,
|
||||
border: false,
|
||||
labelPosition: 'top',
|
||||
errorType: ['message'],
|
||||
rules: {
|
||||
'userInfo.password': [{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 6,
|
||||
max: 18,
|
||||
message: '密码长度在6到18个字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
|
||||
let reg = /^([a-zA-z0-9!@#$%%^&*()_+-=}{\[\]};'":\\\/.,<>?])+$/;
|
||||
|
||||
return reg.test(value);
|
||||
},
|
||||
message: '密码必须为英文字母、数字或字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
'userInfo.re_password': {
|
||||
required: true,
|
||||
message: '请再次输入密码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
'userInfo.code': {
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
that = this
|
||||
_this = that
|
||||
// let userData = uni.getStorageSync(getApp().globalData.config.userDataKey)
|
||||
// _this.form.mobile = userData.mobile
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
//获取验证码
|
||||
if (_this.form.mobile.length != 11) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '手机号不正确'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (that.timeTick > 0) {
|
||||
uni.showToast({
|
||||
title: '发送太频繁啦',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 发送验证码
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.User.getSMSCode',
|
||||
mobile: _this.form.mobile
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '验证码发送成功'
|
||||
});
|
||||
that.timeTick = 60;
|
||||
// 开始倒计时
|
||||
let timeTick = setInterval(function() {
|
||||
if (that.timeTick > 0) {
|
||||
that.timeTick = that.timeTick - 1
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
clearInterval(timeTick)
|
||||
}, 1000 * 60)
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (that.form.re_password != that.form.password) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入密码不一致'
|
||||
});
|
||||
return;
|
||||
}
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Account.changePassword',
|
||||
mobile: _this.form.mobile,
|
||||
code: that.form.code,
|
||||
password: that.form.password,
|
||||
re_password: that.form.re_password,
|
||||
}).then(res => {
|
||||
if (res.data.ret == 200) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
title: '密码修改成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./modify_password.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
.body .navbar{background-color:#ed6d00}.body .head{display:flex;padding-left:30rpx;padding-right:30rpx;padding-top:50rpx;letter-spacing:5rpx}.body .head .text{text-align:left;font-size:35rpx;padding-left:20rpx}.wrap{padding:24rpx}.navbar-right{margin-right:24rpx;display:flex}.search-wrap{margin:0 20rpx;flex:1}.right-item{margin:0 12rpx;position:relative;color:#fff;display:flex}.slot-wrap{display:flex;align-items:center;flex:1}.map-wrap{display:flex;align-items:center;padding:4px 6px;background-color:rgba(240,240,240,.35);color:#fff;font-size:22rpx;border-radius:100rpx;margin-left:30rpx}.map-wrap-text{padding:0 6rpx}.wrapper{width:100%;margin-left:0rpx}.wrapper .box-first{margin-top:-40rpx;padding:30rpx 30rpx 30rpx 30rpx;font-size:24rpx}.wrapper .box-first .text{width:100rpx}.wrapper .box-first .icons{padding-top:50rpx;white-space:nowrap}.wrapper .box{width:100%;background-color:#fff;box-shadow:0px 0px 0px 0px rgba(194,188,188,.3);border-radius:30rpx 30rpx 0rpx 0rpx}.wrapper .box-second{border-radius:0rpx;margin-top:10rpx}.image-store{width:80rpx !important;height:80rpx !important}.store-menu image{width:30rpx;margin-right:15rpx}.bottom{margin-top:10rpx;padding-bottom:80rpx}.bottom .items{padding-top:30rpx;color:#ed6d00;display:flex;flex-direction:row;justify-content:center}.hr{height:15rpx}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
that = this
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
},
|
||||
|
||||
go2Page(urlPath) {
|
||||
uni.navigateTo({
|
||||
url: urlPath,
|
||||
});
|
||||
},
|
||||
|
||||
deleteAccount(){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '如果要注销帐号,请您发送邮件到yuledui@angyakeji.com,请在邮件中写明您的账号手机号,商家名,主题为注销帐号申请,或者拨打客服电话进行操作',
|
||||
showCancel:false
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
.body .navbar {
|
||||
background-color: #ed6d00;
|
||||
}
|
||||
|
||||
.body .head {
|
||||
display: flex;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-top:50rpx;
|
||||
letter-spacing: 5rpx;
|
||||
}
|
||||
|
||||
.body .head .text {
|
||||
text-align: left;
|
||||
font-size: 35rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin: 0 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
margin: 0 12rpx;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 6px;
|
||||
background-color: rgba(240, 240, 240, 0.35);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.map-wrap-text {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first {
|
||||
margin-top: -40rpx;
|
||||
padding: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first .text {
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first .icons {
|
||||
padding-top: 50rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrapper .box {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 0px 0px rgba(194, 188, 188, 0.3);
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-second {
|
||||
border-radius: 0rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.image-store {
|
||||
width: 80rpx !important;
|
||||
height: 80rpx !important;
|
||||
}
|
||||
|
||||
.store-menu image{
|
||||
width: 30rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.bottom{
|
||||
margin-top: 10rpx;
|
||||
padding-bottom: 80rpx;
|
||||
.items {
|
||||
padding-top: 30rpx;
|
||||
color: #ED6D00;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hr{
|
||||
height: 15rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrapper">
|
||||
<view class="store-menu">
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
icon="warning"
|
||||
title="注销帐号"
|
||||
@click="deleteAccount"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
icon="lock"
|
||||
title="修改/忘记密码"
|
||||
@click="go2Page('/pages/store/modify_password/modify_password')"
|
||||
></u-cell>
|
||||
|
||||
<u-cell
|
||||
icon="phone"
|
||||
title="修改登录手机号"
|
||||
@click="go2Page('/pages/store/change_phone/change_phone')"
|
||||
></u-cell>
|
||||
</u-cell-group>
|
||||
<view class="hr"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script src='./secret.js'>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./secret.scss";
|
||||
</style>>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrap">
|
||||
<view class="logo">
|
||||
<view class="u-avatar-wrap">
|
||||
<image class="u-avatar-demo" @click="chooseAvatar" :src="storeData.logo" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="title">{{ storeData.merchname }}</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<u--form :model="storeData" ref="uForm" :errorType="errorType">
|
||||
<u-form-item label="商户名称" label-width="220" prop="name"><u-input v-model="storeData.merchname" fontSize='28'
|
||||
placeholder="请输入商户名称" /></u-form-item>
|
||||
<!-- <u-form-item label="商户简介" label-width="220" prop="desc"><u-input v-model="storeData.desc" fontSize='28'
|
||||
placeholder="请输入商户简介" /></u-form-item> -->
|
||||
<u-form-item label="联系电话" label-width="220" prop="phone"><u-input v-model="storeData.tel" fontSize='28'
|
||||
placeholder="请输入联系电话" /></u-form-item>
|
||||
<u-form-item label="店铺位置" label-width="220" prop="phone"><u-input v-model="storeData.address" fontSize='28'
|
||||
placeholder="请输入店铺位置" /></u-form-item>
|
||||
<!-- <u-form-item label="店铺主题颜色" label-width="220">
|
||||
<u-input v-model="storeData.themeText" placeholder="选择店铺主题颜色" :clearable="false"
|
||||
@click="showShopTheme = true" />
|
||||
<u-icon name="arrow-down-fill" color="#999999" @click="showShopTheme = true"></u-icon>
|
||||
<u-select v-model="showShopTheme" @confirm="selectColor" :list="storeData.themearr"></u-select>
|
||||
</u-form-item>
|
||||
<u-form-item v-if="false" label="扫码送金豆比例" label-width="220" prop="coinRate">
|
||||
<u-input v-model="storeData.credit_give" placeholder="请输入金豆比例 单位%" />
|
||||
<u-tag text="%" type="success" />
|
||||
</u-form-item>
|
||||
<u-form-item label="付款后是否跳转店铺" label-width="280" prop="redirect">
|
||||
<u-switch v-model="storeData.is_direct2_shop_page" slot="right"></u-switch>
|
||||
</u-form-item>
|
||||
<u-form-item label="门店轮播图" label-width="280" prop="redirect"></u-form-item> -->
|
||||
</u--form>
|
||||
<!-- <view class="store-thumbs">
|
||||
<u-upload upload-text="*上传门店轮播图" :action="action" :file-list="storeData.thumbs"
|
||||
@on-success="uploadThumb" @on-remove="removeImg" @on-progress="showLoading"></u-upload>
|
||||
</view> -->
|
||||
|
||||
<view class="bottom"><u-button :disabled="false" class="button" @click="submit">保存设置</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import util from "../../src/utils/util";
|
||||
let that = {},
|
||||
storeThumbs = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
|
||||
action: 'https://yld.angyakeji.com/apiv3/fileUploadAndDownload_FSCuANkzFs0/upload',
|
||||
// 店铺主题颜色
|
||||
showShopTheme: false,
|
||||
storeData: {},
|
||||
errorType: 'message',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
that = this
|
||||
// this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.get'
|
||||
}).then(res => {
|
||||
let storeData = res.data.data
|
||||
// 处理店铺主题
|
||||
for (let i = 0; i < storeData.themearr.length; i++) {
|
||||
if (storeData.themearr[i].value == storeData.theme) {
|
||||
storeData.themeText = storeData.themearr[i].label;
|
||||
}
|
||||
}
|
||||
storeData.is_direct2_shop_page = (storeData.is_direct2_shop_page == 1)
|
||||
// 处理金豆赠送金额小数点显示
|
||||
if (parseInt(storeData.credit_give) < storeData.credit_give) {
|
||||
storeData.credit_give = parseFloat(storeData.credit_give).toFixed(4);
|
||||
} else {
|
||||
storeData.credit_give = parseFloat(storeData.credit_give).toFixed(0);
|
||||
}
|
||||
storeThumbs = JSON.parse(JSON.stringify(storeData.thumbs))
|
||||
that.storeData = storeData
|
||||
})
|
||||
},
|
||||
selectColor(items) {
|
||||
this.storeData.theme = items[0].value;
|
||||
this.storeData.themeText = items[0].label;
|
||||
},
|
||||
submit() {
|
||||
let updata = that.storeData
|
||||
updata['s'] = 'Merch.Mershop_Index.update'
|
||||
if (updata.thumbs != storeThumbs) { //只有更新了轮播图
|
||||
that.updateThumbs()
|
||||
}
|
||||
getApp().globalData.util.request(updata).then(res => {
|
||||
if (res.data.ret == 200) {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
duration: 2000,
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更新轮播图
|
||||
updateThumbs() {
|
||||
getApp().globalData.util.request({
|
||||
"s": 'Merch.Mershop_Index.UpdateMerchThumbs',
|
||||
"thumbs": storeThumbs
|
||||
}).then()
|
||||
},
|
||||
chooseAvatar() {
|
||||
util.upload().then(success => {
|
||||
that.storeData.logo = success
|
||||
})
|
||||
},
|
||||
showLoading() {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
duration: 2000,
|
||||
mask: true
|
||||
})
|
||||
},
|
||||
removeImg(index, list) {
|
||||
storeThumbs = list.length ? list : []
|
||||
},
|
||||
uploadThumb(res) {
|
||||
uni.hideLoading()
|
||||
if (res.code == 0 && res.data.file.url) {
|
||||
storeThumbs.push({
|
||||
"url": res.data.file.url
|
||||
})
|
||||
that.$forceUpdate()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '图片上传失败',
|
||||
icon: 'fail',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
} // /methods
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
/deep/.u-form-item__body__left__content__label {
|
||||
color: #7f8185 !important;
|
||||
font-size:28rpx !important;
|
||||
}
|
||||
.logo {
|
||||
padding-top: 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
|
||||
.u-avatar-wrap {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-avatar-demo {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 10rpx;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/deep/.u-form-item{
|
||||
border-bottom: 1px solid #f4f6f8;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 5%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
form: {
|
||||
payType: '提现到银行',
|
||||
payTypeValue: 2,
|
||||
},
|
||||
bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png',// 银行卡照片OCR
|
||||
openAutoPay: true,
|
||||
border: false,
|
||||
showPayType: false,
|
||||
labelPosition: 'left',
|
||||
errorType: ['message'],
|
||||
rules: {
|
||||
bank_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '姓名长度在3到5个字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
return this.$u.test.chinese(value);
|
||||
},
|
||||
message: '姓名必须为中文',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad: function () {
|
||||
that = this
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Alipay.get'
|
||||
}).then(res => {
|
||||
that.form = res.data.data
|
||||
that.form.alipay_account2 = res.data.data.alipay_account
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (that.form.alipay_account2 !== that.form.alipay_account) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入的手机号不一致'
|
||||
});
|
||||
return
|
||||
}
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Alipay.update',
|
||||
alipay_account: that.form.alipay_account,
|
||||
alipay_realname: that.form.alipay_realname
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.data.res_msg,
|
||||
showCancel:false,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
selectColor(items) {
|
||||
if (items[0].value == 'no') {
|
||||
that.openAutoPay = false
|
||||
} else {
|
||||
that.openAutoPay = true
|
||||
}
|
||||
},
|
||||
// 银行卡识别OCR
|
||||
getBankOCR: function (fileUrl) {
|
||||
uni.showLoading({
|
||||
title: '识别中'
|
||||
})
|
||||
uni.request({
|
||||
url: 'https://yld.angyakeji.com/www/src/tools/aliyun/ocr.php',
|
||||
data: {
|
||||
fileUrl: fileUrl,
|
||||
type: 'bankcard'
|
||||
},
|
||||
complete: (res) => {
|
||||
uni.hideLoading()
|
||||
if (res.data && res.data.Data) {
|
||||
let fres = res.data.Data
|
||||
that.$set(that.form, 'bank_com', fres.BankName)
|
||||
that.$set(that.form, 'bank_no', fres.CardNumber)
|
||||
that.$set(that.form, 'bank_no2', fres.CardNumber)
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.title {
|
||||
padding-left: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
margin-top: 0rpx;
|
||||
.payinfo{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background: #f0ecec;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 30rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
border-radius: 10px;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="header">
|
||||
<u-image height="120" width="120" style="margin: 0 auto;margin-top: 30rpx;margin-bottom: 30rpx;" src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/icon_alipay.png"></u-image>
|
||||
<view class="container">
|
||||
<view class="icon" style="margin-top: 25rpx;display: flex;align-items: center;justify-content: center;"></view>
|
||||
<view class="title">支付宝收款账号绑定</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="content">
|
||||
<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="支付宝姓名:" prop="bank_name">
|
||||
<u-input :border="border" placeholder="请输入支付宝账号姓名" v-model="form.alipay_realname"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="支付宝手机号:" prop="bank_no">
|
||||
<u-input :border="border" placeholder="请输入支付宝手机号" v-model="form.alipay_account"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="确认支付宝手机号:" prop="bank_no">
|
||||
<u-input :border="border" placeholder="请再次输入支付宝手机号" v-model="form.alipay_account2"></u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 60rpx;"><u-button :disabled="false" class="button" @click="submit">保 存</u-button></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script src="./alipay.js"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './alipay.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
form: {
|
||||
payType: '提现到银行',
|
||||
payTypeValue: 2,
|
||||
},
|
||||
bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png',// 银行卡照片OCR
|
||||
openAutoPay: true,
|
||||
border: false,
|
||||
showPayType: false,
|
||||
labelPosition: 'left',
|
||||
errorType: ['message'],
|
||||
rules: {
|
||||
bank_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '姓名长度在3到5个字符',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
return this.$u.test.chinese(value);
|
||||
},
|
||||
message: '姓名必须为中文',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad: function () {
|
||||
that = this
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Bank.getBankCard',
|
||||
}).then(res => {
|
||||
if (res.data.ret == 200) {
|
||||
that.form = res.data.data;
|
||||
that.form.bank_no2 = res.data.data.bank_no
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (that.form.bank_no !== that.form.bank_no2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入的卡号不一致'
|
||||
});
|
||||
return
|
||||
}
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Bank.updateBankCard',
|
||||
bank_com: that.form.bank_com,
|
||||
bank_no: that.form.bank_no,
|
||||
bank_name: that.form.bank_name,
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.data.res_msg,
|
||||
showCancel:false,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
selectColor(items) {
|
||||
if (items[0].value == 'no') {
|
||||
that.openAutoPay = false
|
||||
} else {
|
||||
that.openAutoPay = true
|
||||
}
|
||||
},
|
||||
bankUpImg() {
|
||||
getApp().globalData.util.upload().then(success=>{
|
||||
that.bankImgUp = success
|
||||
that.getBankOCR(that.bankImgUp)
|
||||
})
|
||||
},
|
||||
// 银行卡识别OCR
|
||||
getBankOCR: function (fileUrl) {
|
||||
uni.showLoading({
|
||||
title: '识别中'
|
||||
})
|
||||
uni.request({
|
||||
url: 'https://yld.angyakeji.com/www/src/tools/aliyun/ocr.php',
|
||||
data: {
|
||||
fileUrl: fileUrl,
|
||||
type: 'bankcard'
|
||||
},
|
||||
complete: (res) => {
|
||||
uni.hideLoading()
|
||||
if (res.data && res.data.Data) {
|
||||
let fres = res.data.Data
|
||||
that.$set(that.form, 'bank_com', fres.BankName)
|
||||
that.$set(that.form, 'bank_no', fres.CardNumber)
|
||||
that.$set(that.form, 'bank_no2', fres.CardNumber)
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.header {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.title {
|
||||
padding-left: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
margin-top: 0rpx;
|
||||
.payinfo{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background: #f0ecec;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 30rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
border-radius: 10px;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="header">
|
||||
<view class="container">
|
||||
<view class="icon">
|
||||
<u-image
|
||||
height="60"
|
||||
width="60"
|
||||
src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/credit_card_icon.png"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="title">
|
||||
结算银行卡设置
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="content">
|
||||
<u-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="uForm"
|
||||
:errorType="errorType"
|
||||
>
|
||||
<u-form-item
|
||||
label-width="260"
|
||||
:label-position="labelPosition"
|
||||
label="自动识别银行卡号:(拍照或上传图片)"
|
||||
prop="bank_name"
|
||||
>
|
||||
<image
|
||||
class="u-avatar-demo"
|
||||
@click="bankUpImg"
|
||||
:src="bankImgUp"
|
||||
style="width:120rpx;"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label-width="200"
|
||||
:label-position="labelPosition"
|
||||
label="收款人姓名:"
|
||||
prop="bank_name"
|
||||
>
|
||||
<u-input
|
||||
:border="border"
|
||||
placeholder="请输入收款人姓名"
|
||||
v-model="form.bank_name"
|
||||
></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label-width="200"
|
||||
:label-position="labelPosition"
|
||||
label="收款卡号:"
|
||||
prop="bank_no"
|
||||
>
|
||||
<u-input
|
||||
:border="border"
|
||||
placeholder="请输入收款卡号"
|
||||
v-model="form.bank_no"
|
||||
></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label-width="200"
|
||||
:label-position="labelPosition"
|
||||
label="确认收款卡号:"
|
||||
prop="bank_no"
|
||||
>
|
||||
<u-input
|
||||
:border="border"
|
||||
placeholder="请再次输入收款卡号"
|
||||
v-model="form.bank_no2"
|
||||
></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label-width="200"
|
||||
:label-position="labelPosition"
|
||||
label="银行:"
|
||||
prop="bank_com"
|
||||
>
|
||||
<u-input
|
||||
:border="border"
|
||||
placeholder="请输入银行"
|
||||
v-model="form.bank_com"
|
||||
></u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 60rpx;">
|
||||
<u-button
|
||||
:disabled="false"
|
||||
class="button"
|
||||
@click="submit"
|
||||
>保存设置</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script src='./card.js'></script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./card.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="header">
|
||||
<view class="container">
|
||||
<view class="icon">
|
||||
<u-image v-if="false" height="60" width="60"
|
||||
src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/credit_card_icon.png"></u-image>
|
||||
</view>
|
||||
<view class="title " @click='showInfo = !showInfo'>
|
||||
扫码付款 <text style="font-weight:bold;">[金豆抵扣]</text>设置<u-icon name="info-circle
|
||||
" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="payinfo" v-if="showInfo">
|
||||
<view>开启金豆抵扣后,
|
||||
<text style="font-weight:bold;">将同时开启随机立减功能;</text></view>
|
||||
<view style="color:red;">请注意:提现时将扣除订单金豆赠送比例金额</view> -->
|
||||
<!-- 0.0038平台手续费 -->
|
||||
<!-- <view style="color:red;">例如:金豆赠送比例为0.01(百分之一),那消费者付款100元后,您将得到100*(1-0.0038)-(0.01*100)=98.62元</view>
|
||||
<view style="color:#999999;">随机立减费用由余乐兑平台方承担,不会从商家提现中扣除</view>
|
||||
|
||||
</view> -->
|
||||
<view class="content">
|
||||
<u--form :model="form" ref="uForm">
|
||||
<u-form-item label="是否开启金豆抵扣" label-width="280" prop="redirect">
|
||||
<u-switch size='50' v-model="openCreditGive" @change="openCreditGiveChange" slot="right"></u-switch>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
|
||||
<view class="content" v-if="openCreditGive">
|
||||
<u--form :model="form" ref="uForm">
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="输入金豆抵扣比例:" prop="credit_give">
|
||||
<u-input :border="border" @change="creditGiveInputChange" type="number" placeholder="请输入金豆抵扣比例"
|
||||
v-model="form.credit_give"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="确认金豆抵扣比例:" prop="credit_give2">
|
||||
<u-input :border="border" type="number" placeholder="请再次输入金豆抵扣比例" v-model="form.credit_give2"></u-input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
|
||||
<view style="padding:0.5rem 1rem;">
|
||||
<view v-if="form.credit_give >= 1">
|
||||
金豆抵扣比例不能大于1
|
||||
</view>
|
||||
<view v-else-if="form.credit_give > 0">
|
||||
当前金豆抵扣百分比为:
|
||||
<text style="font-weight:bold;">{{ (modifyCreditMoneyEg()) }}%; </text>
|
||||
<text>即每收款100元,则抵扣消费者价值 <text>{{ modifyCreditMoneyEg() }}</text> 元的金豆</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
当前未开启金豆抵扣
|
||||
</view>
|
||||
<!-- <view style="margin-top:15rpx;">
|
||||
<text>最大金豆赠送比例:{{ form.max_credit_give }} ; </text>
|
||||
<text>最小金豆赠送比例:{{ form.min_credit_give }} ; </text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 60rpx;">
|
||||
<u-button :disabled="false" class="button" @click="submit">保存设置</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
form: {
|
||||
payType: '提现到银行',
|
||||
payTypeValue: 2,
|
||||
},
|
||||
bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png',// 银行卡照片OCR
|
||||
openCreditGive: true,
|
||||
border: 'none',
|
||||
showPayType: false,
|
||||
labelPosition: 'left',
|
||||
modifyCreditMoneyEg: function () {
|
||||
let resNum = parseFloat(parseFloat(that.form.credit_give) * 100).toFixed(2)
|
||||
if (parseInt(resNum) == resNum) {
|
||||
resNum = parseInt(resNum)
|
||||
}
|
||||
return resNum
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad: function () {
|
||||
that = this
|
||||
// that.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.get',
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.ret == 200) {
|
||||
that.form = res.data.data
|
||||
that.form.max_credit_give = parseFloat(that.form.max_credit_give).toFixed(2)
|
||||
that.form.min_credit_give = parseFloat(that.form.min_credit_give).toFixed(3)
|
||||
that.form.credit_give2 = res.data.data.credit_give
|
||||
if (res.data.data.credit_give <= 0) {
|
||||
that.openCreditGive = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (!that.openCreditGive) {
|
||||
that.form.credit_give = 0
|
||||
}
|
||||
if (that.form.credit_give >= 1) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '赠送比例必须小于1'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (that.form.credit_give !== that.form.credit_give2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入的赠送比例不一致'
|
||||
})
|
||||
return
|
||||
}
|
||||
// if (that.form.credit_give < that.form.min_credit_give || that.form.credit_give > that.form.max_credit_give) {
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '金豆赠送率必须在'+that.form.min_credit_give+"到"+that.form.max_credit_give+"之间"
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.updateCreditGive',
|
||||
credit_give: that.form.credit_give
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.data.res_msg,
|
||||
showCancel: false,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
openCreditGiveChange(selectValue) {
|
||||
console.log(selectValue);
|
||||
// if (!selectValue) {
|
||||
// that.form.credit_give = 0
|
||||
// that.form.credit_give2 = that.form.credit_give
|
||||
// }else{
|
||||
// that.form.credit_give = 0.001
|
||||
// that.form.credit_give2 = that.form.credit_give
|
||||
// }
|
||||
},
|
||||
creditGiveInputChange(inputValue) {
|
||||
console.log(inputValue)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./creditadd.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.header {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.title {
|
||||
padding-left: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
margin-top: 0rpx;
|
||||
.payinfo{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background: #f0ecec;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 30rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(183, 182, 182, 0.5);
|
||||
border-radius: 10px;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 90%;
|
||||
font-size: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10rpx;
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="header">
|
||||
<view class="container">
|
||||
<view class="icon">
|
||||
<u-image v-if="false" height="60" width="60"
|
||||
src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/credit_card_icon.png"></u-image>
|
||||
</view>
|
||||
<view class="title " @click='showInfo = !showInfo'>
|
||||
扫码付款 <text style="font-weight:bold;">[赠送金豆]</text>设置<u-icon name="info-circle
|
||||
" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="payinfo" v-if="showInfo">
|
||||
<view>开启金豆赠送后,<text style="font-weight:bold;">将同时开启随机立减功能;</text></view>
|
||||
<view style="color:red;">请注意:提现时将扣除订单金豆赠送比例金额</view>
|
||||
<!-- 0.0038平台手续费 -->
|
||||
<view style="color:red;">例如:金豆赠送比例为0.01(百分之一),那消费者付款100元后,您将得到100*(1-0.0038)-(0.01*100)=98.62元</view>
|
||||
<view style="color:#999999;">随机立减费用由余乐兑平台方承担,不会从商家提现中扣除</view>
|
||||
|
||||
</view>
|
||||
<view class="content">
|
||||
<u--form :model="form" ref="uForm">
|
||||
<u-form-item label="是否开启金豆赠送" label-width="280" prop="redirect">
|
||||
<u-switch size='50' v-model="openCreditGive" @change="openCreditGiveChange" slot="right"></u-switch>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
|
||||
<view class="content" v-if="openCreditGive">
|
||||
<u--form :model="form" ref="uForm">
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="输入金豆赠送比例:" prop="credit_give">
|
||||
<u-input :border="border" @change="creditGiveInputChange" type="number" placeholder="请输入金豆赠送比例"
|
||||
v-model="form.credit_give"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="300" :label-position="labelPosition" label="确认金豆赠送比例:" prop="credit_give2">
|
||||
<u-input :border="border" type="number" placeholder="请再次输入金豆赠送比例" v-model="form.credit_give2"></u-input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
|
||||
<view style="padding:0.5rem 1rem;">
|
||||
<view v-if="form.credit_give >= 1">
|
||||
金豆赠送比例不能大于1
|
||||
</view>
|
||||
<view v-else-if="form.credit_give > 0">
|
||||
当前金豆赠送百分比为:
|
||||
<text style="font-weight:bold;">{{ (modifyCreditMoneyEg()) }}%; </text>
|
||||
<text>即每收款100元,则赠送消费者价值 <text>{{ modifyCreditMoneyEg() }}</text> 元的金豆</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
当前未开启扫码送金豆
|
||||
</view>
|
||||
<!-- <view style="margin-top:15rpx;">
|
||||
<text>最大金豆赠送比例:{{ form.max_credit_give }} ; </text>
|
||||
<text>最小金豆赠送比例:{{ form.min_credit_give }} ; </text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 60rpx;">
|
||||
<u-button :disabled="false" class="button" @click="submit">保存设置</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
form: {
|
||||
payType: '提现到银行',
|
||||
payTypeValue: 2,
|
||||
},
|
||||
bankImgUp: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/bank_card_setting/take_photo.png',// 银行卡照片OCR
|
||||
openCreditGive: true,
|
||||
border: 'none',
|
||||
showPayType: false,
|
||||
labelPosition: 'left',
|
||||
modifyCreditMoneyEg: function () {
|
||||
let resNum = parseFloat(parseFloat(that.form.credit_give) * 100).toFixed(2)
|
||||
if (parseInt(resNum) == resNum) {
|
||||
resNum = parseInt(resNum)
|
||||
}
|
||||
return resNum
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad: function () {
|
||||
that = this
|
||||
// that.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.get',
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.data.ret == 200) {
|
||||
that.form = res.data.data
|
||||
that.form.max_credit_give = parseFloat(that.form.max_credit_give).toFixed(2)
|
||||
that.form.min_credit_give = parseFloat(that.form.min_credit_give).toFixed(3)
|
||||
that.form.credit_give2 = res.data.data.credit_give
|
||||
if (res.data.data.credit_give <= 0) {
|
||||
that.openCreditGive = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (!that.openCreditGive) {
|
||||
that.form.credit_give = 0
|
||||
}
|
||||
if (that.form.credit_give >= 1) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '赠送比例必须小于1'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (that.form.credit_give !== that.form.credit_give2) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '两次输入的赠送比例不一致'
|
||||
})
|
||||
return
|
||||
}
|
||||
// if (that.form.credit_give < that.form.min_credit_give || that.form.credit_give > that.form.max_credit_give) {
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '金豆赠送率必须在'+that.form.min_credit_give+"到"+that.form.max_credit_give+"之间"
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
getApp().globalData.util.request({
|
||||
s: 'Merch.Mershop_Index.updateCreditGive',
|
||||
credit_give: that.form.credit_give
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.data.res_msg,
|
||||
showCancel: false,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
openCreditGiveChange(selectValue) {
|
||||
console.log(selectValue);
|
||||
// if (!selectValue) {
|
||||
// that.form.credit_give = 0
|
||||
// that.form.credit_give2 = that.form.credit_give
|
||||
// }else{
|
||||
// that.form.credit_give = 0.001
|
||||
// that.form.credit_give2 = that.form.credit_give
|
||||
// }
|
||||
},
|
||||
creditGiveInputChange(inputValue) {
|
||||
console.log(inputValue)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./creditadd.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
.wrapper {
|
||||
margin-left: 0rpx;
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
.u-tabs-box {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
z-index: 9;
|
||||
}
|
||||
.main-box {
|
||||
margin-top: 92rpx;
|
||||
}
|
||||
/deep/.u-empty {
|
||||
height: 80% !important;
|
||||
z-index: 111 !important;
|
||||
margin-top: 90rpx !important;
|
||||
}
|
||||
|
||||
.order {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
margin: 5rpx auto;
|
||||
border-radius: 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 5rpx 20rpx 5rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
.item {
|
||||
display: flex;
|
||||
margin: 0rpx 0 0;
|
||||
.content {
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.type {
|
||||
margin: 10rpx 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.time {
|
||||
margin: 10rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.applay-status {
|
||||
color: #99cc66;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
margin-left: 10rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: right;
|
||||
.operation {
|
||||
width: 120rpx;
|
||||
border-width: 1prx;
|
||||
border-style: solid;
|
||||
border-radius: 30rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ed6d00;
|
||||
border-color: #ed6d00;
|
||||
position: relative;
|
||||
font-size: 20rpx;
|
||||
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.centre {
|
||||
text-align: center;
|
||||
margin: 200rpx auto;
|
||||
font-size: 32rpx;
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.tips {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 200rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 64rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top));
|
||||
width: 100%;
|
||||
}
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
}
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.all-reckon {
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-reckon-tr {
|
||||
.detail-reckon-tr-td {
|
||||
padding-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<view class="body">
|
||||
<view class="wrapper wrap">
|
||||
<view class="u-tabs-box">
|
||||
<u-subsection :list="list" :current="current" @change="sectionChange" fontSize='23'></u-subsection>
|
||||
</view>
|
||||
<view v-if="orderList.length" class="main-box">
|
||||
<view class="page-box">
|
||||
<view class="order" v-for="(res, index) in orderList" :key="res.id" v-if="res.applyno"
|
||||
@click="redirectToDetail(res)">
|
||||
<view class="item">
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
<nobr>编号：{{ res.applyno }}</nobr>
|
||||
</view>
|
||||
<view class="type all-reckon">
|
||||
<text style="padding-right: 100rpx;">结算金额: {{ res.finalprice }}</text>
|
||||
<text>订单金额: {{ res.orderprice }}</text>
|
||||
</view>
|
||||
<view class="type detail-reckon-tr">
|
||||
<view class="detail-reckon-tr-td" v-if="res.wechat_price > 0">
|
||||
微信订单结算:{{ res.wechat_price }}元</view>
|
||||
<view class="detail-reckon-tr-td" v-if="res.alipay_price > 0">
|
||||
支付宝订单结算:{{ res.alipay_price }}元</view>
|
||||
<view class="detail-reckon-tr-td" v-if="res.passcreditmoney > 0">
|
||||
金豆抵扣结算:{{ res.passcreditmoney }}元
|
||||
<text style="font-size:23rpx;color:#999999;">(通过支付宝转账)</text>
|
||||
</view>
|
||||
<view class="detail-reckon-tr-td" v-if="res.deduct_recharge > 0">
|
||||
储值抵扣:{{ res.deduct_recharge }}元
|
||||
</view>
|
||||
<view v-if="res.offline_fee > 0">第三方支付服务费:-{{ res.offline_fee }}元</view>
|
||||
<view v-if="res.all_creditadd_fee > 0">金豆赠送费:-{{ res.all_creditadd_fee }}元
|
||||
<text style="font-size:23rpx;color:#999999;"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">
|
||||
<text>结算订单日:{{ res.ordertime ? res.ordertime : res.applyOrderDate }}</text>
|
||||
<text class="applay-status">{{ res.statusstr }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view @click="showPopupMenu(res.id)">
|
||||
<view class="dots">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore status="加载更多..." bgColor="#f2f2f2"></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-empty v-if="!orderList.length" text="数据为空" mode="list"></u-empty>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let that = {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderList: [],
|
||||
list: ['待结算','已结算'],
|
||||
current: 0,
|
||||
currentId: 0,
|
||||
form: {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
keyword: '',
|
||||
status: 3
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
that = this
|
||||
// that.init()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
that.getList()
|
||||
setTimeout(function() {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.stopPullDownRefresh({
|
||||
success: (result) => {},
|
||||
fail: (error) => {}
|
||||
})
|
||||
}, 688)
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
this.form.page += 1
|
||||
that.getList()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let now = new Date()
|
||||
this.startDate = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + 1
|
||||
this.endDate = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
},
|
||||
redirectToCheckout() {
|
||||
uni.switchTab({
|
||||
url: '/pages/fiance/checkout/checkout',
|
||||
success(res) {
|
||||
//console.log(res);
|
||||
},
|
||||
fail(res) {
|
||||
//console.log(res);
|
||||
}
|
||||
})
|
||||
},
|
||||
redirectToDetail(item) {
|
||||
let url = '/pages/fiance/ledger/ledger?type=withdraw_history'
|
||||
uni.setStorage({
|
||||
key: 'withdraw_history_show_by_ledger',
|
||||
data: item,
|
||||
success: function() {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
success: function(res) {
|
||||
res.eventChannel.emit('withdraw_history', item)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// tab栏切换
|
||||
sectionChange(index) {
|
||||
console.log(index);
|
||||
this.current = index
|
||||
that.form.status = index + 1
|
||||
that.form.page = 1
|
||||
that.orderList = []
|
||||
// that.getList()
|
||||
},
|
||||
showPopupMenu(id) {
|
||||
if (this.currentId === id) {
|
||||
this.currentId = 0;
|
||||
return;
|
||||
}
|
||||
this.currentId = id;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./withdraw.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<web-view :src="url" bindmessage="getMessage"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '外部链接',
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.url = decodeURIComponent(options.url)
|
||||
this.title = options.title;
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.title
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
page,.body{background-color:#f3f3f3;color:#333;padding-bottom:50rpx}.head{width:100%;height:290rpx;background:#ed6d00}.head .text{font-size:40rpx;color:#fff;text-align:center;padding-top:40rpx}.wrapper{margin-left:30rpx;margin-right:30rpx}.wrapper .box{width:100%;background-color:#fff;box-shadow:0px 4px 6px 0px rgba(194,188,188,.3);border-radius:30rpx}.wrapper .box-item{float:left}.wrapper .box-first{margin-top:-145rpx;padding:50rpx 40rpx 40rpx 50rpx}.wrapper .box-first .image{margin:0rpx auto}.wrapper .box-first .text{text-align:center;padding-top:10rpx}.wrapper .box-second{height:auto;margin-top:60rpx;padding:50rpx 40rpx 40rpx 50rpx}.wrapper .box-second .image{margin:0rpx auto}.wrapper .box-second .text{text-align:center;padding-top:10rpx}.wrapper .box-second .row-second{padding-top:50rpx}.wrapper .line{padding-top:50rpx;padding-left:20rpx;padding-right:20rpx;padding-bottom:30rpx;display:block}.wrapper .line .title{text-align:center;font-size:30rpx;color:#333;width:30%}.wrapper .line .title .span{background-color:#f7f7f7;height:40rpx;width:120rpx}.hide{display:hide !important}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
page,
|
||||
.body {
|
||||
background-color: #f3f3f3;
|
||||
color: #333333;
|
||||
// padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 290rpx;
|
||||
background: #ed6d00;
|
||||
}
|
||||
|
||||
.head .text {
|
||||
font-size: 40rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.wrapper .box {
|
||||
// width: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 6px 0px rgba(194, 188, 188, 0.3);
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-item {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wrapper .box-first {
|
||||
margin-top: -145rpx;
|
||||
padding: 50rpx 40rpx 40rpx 50rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-first .image {
|
||||
margin: 0rpx auto;
|
||||
}
|
||||
|
||||
.wrapper .box-first .text {
|
||||
text-align: center;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-second {
|
||||
height: auto;
|
||||
margin-top: 60rpx;
|
||||
padding: 50rpx 40rpx 40rpx 50rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-second .image {
|
||||
margin: 0rpx auto;
|
||||
}
|
||||
|
||||
.wrapper .box-second .text {
|
||||
text-align: center;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.wrapper .box-second .row-second {
|
||||
padding-top: 50rpx;
|
||||
}
|
||||
|
||||
.wrapper .line {
|
||||
padding-top: 50rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wrapper .line .title {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
/*font-weight: bold;*/
|
||||
color: #333333;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.wrapper .line .title .span {
|
||||
background-color: #f7f7f7;
|
||||
height: 40rpx;
|
||||
width: 120rpx;
|
||||
}
|
||||
.hide{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
$u-tips-color:#FF6666;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
@import 'uni_modules/uview-ui/theme.scss';
|
||||
@import 'uni_modules/uview-ui/libs/css/flex.scss';
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
# 介绍
|
||||
|
||||
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件，适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
|
||||
|
||||
`uQRCode`可扩展性高，它支持自定义渲染二维码，可通过`uQRCode API`得到二维码绘制关键信息后，使用`canvas`、`svg`或`js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。
|
||||
|
||||
欢迎加入群聊【uQRCode交流群】：[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)。
|
||||
|
||||
# 设计器
|
||||
|
||||
uQRCode发布了配套的可视化设计器，可根据自己喜好在设计器中设计二维码样式，一键生成配置代码复制到项目中，详情请在微信小程序搜索“柚子二维码”，或扫描下方小程序码体验。
|
||||
|
||||
|
||||
|
||||
## 设计器模板示例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 快速上手
|
||||
|
||||
> 在`uni-app`中，我们更推荐使用组件方式来生成二维码，组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方，当组件无法满足需求的时候，再考虑切换成原生方式。
|
||||
|
||||
官方文档：[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
|
||||
|
||||
github地址：[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)。
|
||||
|
||||
npm地址：[https://www.npmjs.com/package/uqrcodejs](https://www.npmjs.com/package/uqrcodejs)。
|
||||
|
||||
uni-app插件市场地址：[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。
|
||||
|
||||
## 原生方式
|
||||
|
||||
原生方式仅需要获取`uqrcode.js`文件便可使用。详细配置请移步到：文档 > [原生](https://uqrcode.cn/doc/document/native.html)。
|
||||
|
||||
### 安装
|
||||
|
||||
1. 通过`npm`安装，成功后即可使用`import`或`require`进行引用。
|
||||
``` bash
|
||||
# npm安装
|
||||
npm install uqrcodejs
|
||||
# 或者
|
||||
npm install @uqrcode/js
|
||||
```
|
||||
|
||||
2. 通过项目开源地址获取`uqrcode.js`，下载`uqrcode.js`后，将其复制到您项目指定目录，在页面中引入`uqrcode.js`文件即可开始使用。
|
||||
|
||||
### 引入
|
||||
|
||||
- 通过`import`引入。
|
||||
``` javascript
|
||||
// npm安装
|
||||
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
|
||||
// 或者
|
||||
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
|
||||
```
|
||||
|
||||
- `Node.js`通过`require`引入。
|
||||
``` javascript
|
||||
// npm安装
|
||||
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
|
||||
// 或者
|
||||
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
|
||||
```
|
||||
|
||||
- 原生浏览器环境，在js脚本加载时添加到`window`。
|
||||
``` html
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
var UQRCode = window.UQRCode;
|
||||
</script>
|
||||
```
|
||||
|
||||
### 简单用法
|
||||
|
||||
`uQRCode`基于`Canvas API`封装了一套方法，建议开发者使用`canvas`生成，一键调用，非常方便。以下是示例：
|
||||
|
||||
- HTML示例
|
||||
- DOM部分
|
||||
``` html
|
||||
<canvas id="qrcode" width="200" height="200"></canvas>
|
||||
```
|
||||
|
||||
- JS部分
|
||||
``` javascript
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
// 获取canvas元素
|
||||
var canvas = document.getElementById("qrcode");
|
||||
// 获取canvas上下文
|
||||
var canvasContext = canvas.getContext("2d");
|
||||
// 设置uQRCode实例的canvas上下文
|
||||
qr.canvasContext = canvasContext;
|
||||
// 调用绘制方法将二维码图案绘制到canvas上
|
||||
qr.drawCanvas();
|
||||
```
|
||||
|
||||
- uni-app示例
|
||||
- Template部分
|
||||
``` html
|
||||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
|
||||
```
|
||||
|
||||
- JS部分
|
||||
``` javascript
|
||||
onReady() {
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
// 获取canvas上下文
|
||||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
|
||||
// 设置uQRCode实例的canvas上下文
|
||||
qr.canvasContext = canvasContext;
|
||||
// 调用绘制方法将二维码图案绘制到canvas上
|
||||
qr.drawCanvas();
|
||||
}
|
||||
```
|
||||
|
||||
- 微信小程序，推荐使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档。
|
||||
|
||||
### 高级用法
|
||||
|
||||
考虑到部分平台可能不支持`canvas`，所以`uQRCode`并没有强制要求和`canvas`一起使用，您还可以选择其他方式来生成二维码，例如使用`js`操作`dom`进行绘制或是使用`svg`绘制等。以下是示例：
|
||||
|
||||
- uni-app v-for+view
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="qrcode">
|
||||
<view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
|
||||
<view v-for="(col, colI) in row" :key="colI">
|
||||
<view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;">
|
||||
<!-- 黑色码点 -->
|
||||
</view>
|
||||
<view v-else style="width: 10px;height: 10px;background-color: white;">
|
||||
<!-- 白色码点 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modules: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const qr = new UQRCode();
|
||||
qr.data = 'uQRCode';
|
||||
qr.make();
|
||||
this.modules = qr.modules;
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
- js操作dom
|
||||
|
||||
``` html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>uQRCode二维码生成</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qrcode" style="position: relative;"></div>
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
// 引入uQRCode
|
||||
var UQRCode = window.UQRCode;
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 设置二维码前景图，可以是路径
|
||||
qr.foregroundImageSrc =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAC3xJREFUeJztnd1vFNcZxodSJ3y3EL7SYIQwu15wI5FSAkqVkISKgEkuSIEC6127RrloL9r8D4n5UFUZp/9C24A/okqUOzCmSdoohQtkXIkiRS1VC7YQF41Kbe/unL7PzHt2z45ndnZmd1l75hzrSSwzMzvn+c15z8ee3dcwdIlkWaRlqSnF62a+4dDiiMtZ36cKyc183NQ3WS2sZ2IqWX/phwTWEDhuEKT5S0hLSctJK1grWasiLllPWe9l7MUSowTJDU7oopKVICSEZXwz3yKtJj1HWkdaT9pA2hgTbeA6r2MPVrMnEpCEI8HU1FpUGC18cbQEPB1r+Ea+Q2olbSFtJbWREqxkxCXr2cZ1hwebSM+zN2vYq+XsXYtRQ2uRJ8hWgaa4kl8ET0Ur30SK9F3STtL3SLtJL5P2kPZGXHu4rru57vCgg9TO3mxir1azd0uNUmuRUALBWKzAAOm1pBcM+4nYwTeBG3uNtJ/0FukQqZP0NuudiErWr5PrfID0JulVwwb1Enu0lT1byx6qUKpqJWoH3qLAQIzcbNhNFU/CKwzhMOld0o9JaVKW1EP6CamXdDqi6uU69nCdUffjpCPsyZvs0U72bDN7KKHI8OULRcIAQcQ9NDXQRYhCeNpF2ocXPXjw4M8uX748eP/+/b9NT08/ETEv8ABekCcXDx069FMGs489SzGUtezpEqPK0KWGKnRGiH8vMGVc+I1UKnXy3r17N5ttwHwvd+/e/bKjo+Mkt5bvG3bfAi/RD69gj2Ur8YQhO/Il3LzQKbVx09t35MiR9x4/fvzvZld2oRTy6l8HDhxAiHvdsPsVeInhMobGSw2fvkTtO5YxSYQqdE6Ih4cnJiY+b3YlF1q5ffv2p4Y9APiBYY/CELqe4wj0TKWwpYYrxLn1TBSjqf1Hjx79eYGK3w1sGz4VK/kVeHbs2LFfkIc/ZC/b2FtEoGcrhS01XKFJYdKHzghD28NjY2N/0BDCwSHvrnAreYU9RV/ybUfY8gSyVAlXmPRhnvHuw4cP/65hhIPy4MGDf5CHPzLsUdeLHLbWVAKi9h/LOcZtMezOHPONE25D22ZXfr7KWeAdeXiSw9ZO9nYte91iuPQjEgj6DwzJMInBLBNDXczA07p1hAeCQh52sZe7lH5EDn99geDgbYa9ToOlgayGURsU8rCbvdzN3voCUUdYmH9gJRPrMphx9mggNQPpYS/3sLcb2GvXCaITyEYFCEYHvRpIzUB62UsJZGO1QFbxwVgu2auB1B3IXvZ2I3sdGAiWm09rIDUDOc1eaiAaSEWlHQp7ntc1Kh0XRlEHMtQ1V2HPm3N+uvJxYRQSyoIB0j6Ymash/0onyBy3c5MkeUzS45haFFEg9pOLCk6LgsgJs0xPxKxIDbu1lNITn7l2hs7N0U/p/Bn6vf/OkEgM28dcuDMy59rhlbfuKzmUCdaSFxoQVNZZUHk/INlrZ+mo8tV/k34GCMI2BvLRnU/mXDt8MQlHLs5AMhWBdI+e00CeJpDtw9lQQD7SQBoBJCdSQ+FaSHVA5r6m/xExB6KOtBIj6boBMemUWTNntUIvTZP1pmnOuboG0gAgOKebBgQpeu3UYNZVHRd7ilA0kAYDwTHZ0TPWtXBdN7XTuTlqRc4zNZAGAelmIF73ZwPJayBOICUQ9evUqwYiNBAFCM3U6d+bBSTlASSngTSrhaTFZ1Pj4k+TE+LPk39lTYhPJ8et9bEYAslb85BmAYESCJmkJC9YQok4LC66AUGsbqfhpysQa42ri0ZKtY6yqrxPfj0oEd3l98pA/idmRM+1cyJ7vc9Tv/ziY5rgFQhJ6fzq5iGmOP+X34nM9Q+L18qQuki7fv9e8f4y1z4Q6bEPRfqPfSJ9g/597Az9rY+um41fyMKELFeA2bbhc1UQecAwTQtCECA4JmedW37tWfpv1/UPrPtDuHwi/kvwgM8Wjp+hR2X7pTgC4Se5UjGLP+V/81/LkhDKC/6GloJ7w7B31pwph02/YrJovUkVNyDVFJNNDA7EvRSB0HlJC0hOOJcY8zRZTGkg7sVUJP9gAxkuARkPCGS0z+q4k4MAMivKgJgxATLDz3mYH+eZCEMDAMKGDYyPVH0tvBUMIEkJhPqLvBBlr5WnMLb9UoRHWRjb908Mi4GJESvU1KZhC8YJ6pgTDCRNIylce8DnXBxzge7jjSvv88QvI341fkn00/UusHD9/vFhe6YePSAlJZRxfs0aknMFBXzA8+VWn4TrvYar44ICUvd9U04goc4PvyFuAQNJW+HhghU2Pqld1IGjz0CYkrsM0zRqCnc995DYf2eQW3TwXYzzHEjtoyy30uhdJ7Fd7Q1vmd4GVCzzBYjeBsRFA4kwEGzVyftMGPPFlaxgi4s4vGD6Xd1l4miaYpomhqUN17Hp1E1rHQlbdbKjZ0W3m66fE+e//K29ahsQCGCcvfUbmpWfcb+2i3AfOB7L720jJwPWdcED4XcMBzOe23QgLJXbS+gqyiqACNMyN1FhG5Cr6Pi2EfcJY2yAVLoG1p0KjnPr+RZuvRURIN4fLfMC4jfs1UBqAeK5tNFlvfWqgTxFIDsuZSt+tKyHOli87ZoXpbdhc9YnqJT3QzSQ+gCBaV8U90O5a+irMWolNPLB5gP8n0JYF+n1K+8XW5IGUicg1ZTPpyZEu/WhHu9VWw2kKUBcOv0KQDAl7L16TrQPZQKqy9px0jYS7jPr8QEyZzPdqcothF5umrDMWgshwX7+Y20D6o7f0ollnB+QyQnryW0LCoShlJZdqhP2is0QyFiuZeG7TnPWNrWCpz6bvE1AsmRQt/UBUfyOkJL0AVJLwagudkBMq+Kz4sWPs9b+3hSMdihFELJXz1trXnkIXx5g5kUuVxAD40MaSG1A8qIsNNDPDJmMz/p5rTfh/OzVPguCiaVhbCnFulbBFL8eL98G5Ni9FbogzM2aCFmnot2pP6HIPGt9IkRqRnxtPqF/6/asNBb4eq7iqzVmLJOKn6Cl3/uphST4Kb5AcMo/YVuoQXnxNb3ijsFgLWOBACk9ZUk5rEQ/MIw+ICO2Y9lkxP989BkpGvWkBruLn6BNKMNf/J4sqqs2DWWs19kazeV3RRW38TTgvCZJA5lnWjhAYiINZJ6pkUD018TWB0jor4nVX6TcWCCBv0hZf9V4Y4D0GAG/alx/GX9jgQT+Mn6drqJBMBiIM13FumqA6IQuDQDikdBFJgZzTegiociUR8hfWJbyaGpq6p+6lQSHgRIm5ZEKRCYFQ9bjYlKwGzdu6KRgIWCguCQFQ8K1qpKCqSOt9dyPICHi/uPHj+u0eQEgyALPkHLQmJs2Dx77ps2rlFiy89atW9d870CXsnLz5s1RpXUETiyphi2ZehWtxEq9unnz5mOPHj263+xKLpQyOTn5VWtrKzJp7zPKU6/KrNG+abzVsOWanLijo+OETk7sX+AREjkb7smJZevwDFfOsAVyiG9e6bs7OX33RZ2+2y5K+u5LnL6706hT+m61L1ET3Lca7gnukdRdJ7ivnOC+1QiZ4F6FIkOXhAK6aHKIg+joMWLAkPg1vgHMQrE0gCfjbdY7EZWsXyfX+QB78Kphr1W9xB5tZc/WKjDgqW/f4SxqBy+hoKkh/qGj38QvhriIySOeBADCOs3LfFN7I649XNfdXHd40MGebGWP4NVq9k6F4Ruq3IraUtDEEPfQGYE0wGAsjckjmuMWvgm0ngQrGXHJerZx3bewF8+zN2vYK3j2rBEwTLmVRUY5FNlaAAbzFFDHjB5PAMbV6/hG8FRsjIk2cJ3XsQer2ZOV7NESo9QqVBihgMiidvQSTItRgoOmiKdgBWsla1XEJesp672MvZAQWowSCBmiagKhlkUOqXAkIAkpjpL1l344IdQVhrM4X0SFpGpxxOWsr5cvTSleNxM36RK18n+GJEwNAYal3QAAAABJRU5ErkJggg==';
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
|
||||
var drawModules = qr.getDrawModules();
|
||||
// 遍历drawModules创建dom元素
|
||||
var qrHtml = '';
|
||||
for (var i = 0; i < drawModules.length; i++) {
|
||||
var drawModule = drawModules[i];
|
||||
switch (drawModule.type) {
|
||||
case 'tile':
|
||||
/* 绘制小块 */
|
||||
qrHtml += `<div style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;background: ${drawModule.color};"></div>`;
|
||||
break;
|
||||
case 'image':
|
||||
/* 绘制图像 */
|
||||
qrHtml += `<img style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;" src="${drawModule.imageSrc}" />`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.getElementById('qrcode').innerHTML = qrHtml;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- svg
|
||||
``` html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>uQRCode二维码生成</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg id="qrcode" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
// 引入uQRCode
|
||||
var UQRCode = window.UQRCode;
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 设置二维码前景图，可以是路径
|
||||
qr.foregroundImageSrc =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAC3xJREFUeJztnd1vFNcZxodSJ3y3EL7SYIQwu15wI5FSAkqVkISKgEkuSIEC6127RrloL9r8D4n5UFUZp/9C24A/okqUOzCmSdoohQtkXIkiRS1VC7YQF41Kbe/unL7PzHt2z45ndnZmd1l75hzrSSwzMzvn+c15z8ee3dcwdIlkWaRlqSnF62a+4dDiiMtZ36cKyc183NQ3WS2sZ2IqWX/phwTWEDhuEKT5S0hLSctJK1grWasiLllPWe9l7MUSowTJDU7oopKVICSEZXwz3yKtJj1HWkdaT9pA2hgTbeA6r2MPVrMnEpCEI8HU1FpUGC18cbQEPB1r+Ea+Q2olbSFtJbWREqxkxCXr2cZ1hwebSM+zN2vYq+XsXYtRQ2uRJ8hWgaa4kl8ET0Ur30SK9F3STtL3SLtJL5P2kPZGXHu4rru57vCgg9TO3mxir1azd0uNUmuRUALBWKzAAOm1pBcM+4nYwTeBG3uNtJ/0FukQqZP0NuudiErWr5PrfID0JulVwwb1Enu0lT1byx6qUKpqJWoH3qLAQIzcbNhNFU/CKwzhMOld0o9JaVKW1EP6CamXdDqi6uU69nCdUffjpCPsyZvs0U72bDN7KKHI8OULRcIAQcQ9NDXQRYhCeNpF2ocXPXjw4M8uX748eP/+/b9NT08/ETEv8ABekCcXDx069FMGs489SzGUtezpEqPK0KWGKnRGiH8vMGVc+I1UKnXy3r17N5ttwHwvd+/e/bKjo+Mkt5bvG3bfAi/RD69gj2Ur8YQhO/Il3LzQKbVx09t35MiR9x4/fvzvZld2oRTy6l8HDhxAiHvdsPsVeInhMobGSw2fvkTtO5YxSYQqdE6Ih4cnJiY+b3YlF1q5ffv2p4Y9APiBYY/CELqe4wj0TKWwpYYrxLn1TBSjqf1Hjx79eYGK3w1sGz4VK/kVeHbs2LFfkIc/ZC/b2FtEoGcrhS01XKFJYdKHzghD28NjY2N/0BDCwSHvrnAreYU9RV/ybUfY8gSyVAlXmPRhnvHuw4cP/65hhIPy4MGDf5CHPzLsUdeLHLbWVAKi9h/LOcZtMezOHPONE25D22ZXfr7KWeAdeXiSw9ZO9nYte91iuPQjEgj6DwzJMInBLBNDXczA07p1hAeCQh52sZe7lH5EDn99geDgbYa9ToOlgayGURsU8rCbvdzN3voCUUdYmH9gJRPrMphx9mggNQPpYS/3sLcb2GvXCaITyEYFCEYHvRpIzUB62UsJZGO1QFbxwVgu2auB1B3IXvZ2I3sdGAiWm09rIDUDOc1eaiAaSEWlHQp7ntc1Kh0XRlEHMtQ1V2HPm3N+uvJxYRQSyoIB0j6Ymash/0onyBy3c5MkeUzS45haFFEg9pOLCk6LgsgJs0xPxKxIDbu1lNITn7l2hs7N0U/p/Bn6vf/OkEgM28dcuDMy59rhlbfuKzmUCdaSFxoQVNZZUHk/INlrZ+mo8tV/k34GCMI2BvLRnU/mXDt8MQlHLs5AMhWBdI+e00CeJpDtw9lQQD7SQBoBJCdSQ+FaSHVA5r6m/xExB6KOtBIj6boBMemUWTNntUIvTZP1pmnOuboG0gAgOKebBgQpeu3UYNZVHRd7ilA0kAYDwTHZ0TPWtXBdN7XTuTlqRc4zNZAGAelmIF73ZwPJayBOICUQ9evUqwYiNBAFCM3U6d+bBSTlASSngTSrhaTFZ1Pj4k+TE+LPk39lTYhPJ8et9bEYAslb85BmAYESCJmkJC9YQok4LC66AUGsbqfhpysQa42ri0ZKtY6yqrxPfj0oEd3l98pA/idmRM+1cyJ7vc9Tv/ziY5rgFQhJ6fzq5iGmOP+X34nM9Q+L18qQuki7fv9e8f4y1z4Q6bEPRfqPfSJ9g/597Az9rY+um41fyMKELFeA2bbhc1UQecAwTQtCECA4JmedW37tWfpv1/UPrPtDuHwi/kvwgM8Wjp+hR2X7pTgC4Se5UjGLP+V/81/LkhDKC/6GloJ7w7B31pwph02/YrJovUkVNyDVFJNNDA7EvRSB0HlJC0hOOJcY8zRZTGkg7sVUJP9gAxkuARkPCGS0z+q4k4MAMivKgJgxATLDz3mYH+eZCEMDAMKGDYyPVH0tvBUMIEkJhPqLvBBlr5WnMLb9UoRHWRjb908Mi4GJESvU1KZhC8YJ6pgTDCRNIylce8DnXBxzge7jjSvv88QvI341fkn00/UusHD9/vFhe6YePSAlJZRxfs0aknMFBXzA8+VWn4TrvYar44ICUvd9U04goc4PvyFuAQNJW+HhghU2Pqld1IGjz0CYkrsM0zRqCnc995DYf2eQW3TwXYzzHEjtoyy30uhdJ7Fd7Q1vmd4GVCzzBYjeBsRFA4kwEGzVyftMGPPFlaxgi4s4vGD6Xd1l4miaYpomhqUN17Hp1E1rHQlbdbKjZ0W3m66fE+e//K29ahsQCGCcvfUbmpWfcb+2i3AfOB7L720jJwPWdcED4XcMBzOe23QgLJXbS+gqyiqACNMyN1FhG5Cr6Pi2EfcJY2yAVLoG1p0KjnPr+RZuvRURIN4fLfMC4jfs1UBqAeK5tNFlvfWqgTxFIDsuZSt+tKyHOli87ZoXpbdhc9YnqJT3QzSQ+gCBaV8U90O5a+irMWolNPLB5gP8n0JYF+n1K+8XW5IGUicg1ZTPpyZEu/WhHu9VWw2kKUBcOv0KQDAl7L16TrQPZQKqy9px0jYS7jPr8QEyZzPdqcothF5umrDMWgshwX7+Y20D6o7f0ollnB+QyQnryW0LCoShlJZdqhP2is0QyFiuZeG7TnPWNrWCpz6bvE1AsmRQt/UBUfyOkJL0AVJLwagudkBMq+Kz4sWPs9b+3hSMdihFELJXz1trXnkIXx5g5kUuVxAD40MaSG1A8qIsNNDPDJmMz/p5rTfh/OzVPguCiaVhbCnFulbBFL8eL98G5Ni9FbogzM2aCFmnot2pP6HIPGt9IkRqRnxtPqF/6/asNBb4eq7iqzVmLJOKn6Cl3/uphST4Kb5AcMo/YVuoQXnxNb3ijsFgLWOBACk9ZUk5rEQ/MIw+ICO2Y9lkxP989BkpGvWkBruLn6BNKMNf/J4sqqs2DWWs19kazeV3RRW38TTgvCZJA5lnWjhAYiINZJ6pkUD018TWB0jor4nVX6TcWCCBv0hZf9V4Y4D0GAG/alx/GX9jgQT+Mn6drqJBMBiIM13FumqA6IQuDQDikdBFJgZzTegiociUR8hfWJbyaGpq6p+6lQSHgRIm5ZEKRCYFQ9bjYlKwGzdu6KRgIWCguCQFQ8K1qpKCqSOt9dyPICHi/uPHj+u0eQEgyALPkHLQmJs2Dx77ps2rlFiy89atW9d870CXsnLz5s1RpXUETiyphi2ZehWtxEq9unnz5mOPHj263+xKLpQyOTn5VWtrKzJp7zPKU6/KrNG+abzVsOWanLijo+OETk7sX+AREjkb7smJZevwDFfOsAVyiG9e6bs7OX33RZ2+2y5K+u5LnL6706hT+m61L1ET3Lca7gnukdRdJ7ivnOC+1QiZ4F6FIkOXhAK6aHKIg+joMWLAkPg1vgHMQrE0gCfjbdY7EZWsXyfX+QB78Kphr1W9xB5tZc/WKjDgqW/f4SxqBy+hoKkh/qGj38QvhriIySOeBADCOs3LfFN7I649XNfdXHd40MGebGWP4NVq9k6F4Ruq3IraUtDEEPfQGYE0wGAsjckjmuMWvgm0ngQrGXHJerZx3bewF8+zN2vYK3j2rBEwTLmVRUY5FNlaAAbzFFDHjB5PAMbV6/hG8FRsjIk2cJ3XsQer2ZOV7NESo9QqVBihgMiidvQSTItRgoOmiKdgBWsla1XEJesp672MvZAQWowSCBmiagKhlkUOqXAkIAkpjpL1l344IdQVhrM4X0SFpGpxxOWsr5cvTSleNxM36RK18n+GJEwNAYal3QAAAABJRU5ErkJggg==';
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
|
||||
var drawModules = qr.getDrawModules();
|
||||
// 遍历drawModules创建svg元素
|
||||
var qrHtml = '';
|
||||
for (var i = 0; i < drawModules.length; i++) {
|
||||
var drawModule = drawModules[i];
|
||||
switch (drawModule.type) {
|
||||
case 'tile':
|
||||
/* 绘制小块 */
|
||||
qrHtml += `<rect x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="fill: ${drawModule.color};" />`;
|
||||
break;
|
||||
case 'image':
|
||||
/* 绘制图像 */
|
||||
qrHtml += `<image href="${drawModule.imageSrc}" x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" />`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.getElementById('qrcode').innerHTML = qrHtml;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
> 更多用法大家自行探索咯，期待分享哟~
|
||||
|
||||
### 导出临时文件路径
|
||||
|
||||
原生方式基于`Canvas`的，请自行参阅各平台`Canvas`的导出方式。以下是部分示例：
|
||||
|
||||
- uni-app
|
||||
```javascript
|
||||
// 通过uni.createCanvasContext方式创建绘制上下文的，对应导出API为uni.canvasToTempFilePath
|
||||
// 调用完ctx.draw()方法后不能第一时间导出，否则会异常，需要有一定的延时
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: this.canvasId,
|
||||
fileType: this.fileType,
|
||||
width: this.canvasWidth,
|
||||
height: this.canvasHeight,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
// this // 组件内使用必传当前实例
|
||||
);
|
||||
}, 300);
|
||||
```
|
||||
|
||||
- Canvas2D
|
||||
```javascript
|
||||
// 得到base64
|
||||
console.log(canvas.toDataURL());
|
||||
// 得到buffer
|
||||
console.log(canvas.toBuffer());
|
||||
```
|
||||
|
||||
### 保存二维码到本地相册
|
||||
|
||||
必须在导出临时文件路径成功后再执行保存。uni-app通用保存方式（H5除外）：
|
||||
```javascript
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: tempFilePath,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
H5可以通过设置`<a>`标签`href`属性的方式进行保存：
|
||||
```javascript
|
||||
const aEle = document.createElement('a');
|
||||
aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
|
||||
aEle.href = tempFilePath;
|
||||
document.body.appendChild(aEle);
|
||||
aEle.click();
|
||||
aEle.remove(); // 下载之后把创建的元素删除
|
||||
```
|
||||
经过测试，PC端浏览器可以下载，部分安卓自带或第三方浏览器可以下载，安卓微信浏览器不适用，移动端iOS所有浏览器均不适用，差异较大，还是推荐各位导出文件给图片组件显示，然后提示用户通过长按图片进行保存这种方式。
|
||||
|
||||
## uni-app组件方式
|
||||
|
||||
### 安装
|
||||
|
||||
通过uni-app插件市场地址安装：[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。详细配置请移步到：文档 > [uni-app组件](https://uqrcode.cn/doc/document/uni-app.html)。
|
||||
|
||||
### 引入
|
||||
|
||||
uni-app默认为easycom模式，可直接键入`<uqrcode>`标签。
|
||||
|
||||
### 简单用法
|
||||
|
||||
安装`uqrcode`组件后，在`template`中键入`<uqrcode/>`。设置`ref`属性可使用组件内部方法，`canvas-id`属性为组件内部的canvas组件标识，`value`属性为二维码生成对应内容，`options`为配置选项，可配置二维码样式，绘制Logo等，详见：[options](https://uqrcode.cn/doc/document/uni-app.html#options) 。
|
||||
|
||||
``` html
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
|
||||
```
|
||||
|
||||
### 导出临时文件路径
|
||||
|
||||
为了保证方法调用成功，请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
|
||||
|
||||
```javascript
|
||||
// uqrcode为组件的ref名称
|
||||
this.$refs.uqrcode.toTempFilePath({
|
||||
success: res => {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 保存二维码到本地相册
|
||||
|
||||
为了保证方法调用成功，请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
|
||||
|
||||
```javascript
|
||||
// uqrcode为组件的ref名称
|
||||
this.$refs.uqrcode.save({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '保存成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 更多使用说明请前往官方文档查看：[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
## 4.0.6（2022-12-12）
|
||||
修复`getDrawModules`，第一次获取结果正常，后续获取`tile`模块不存在的问题；
|
||||
修复安卓type:normal因Canvas API使用了小数或为0的参数导致生成异常的问题（注：安卓非2d Canvas部分API参数不支持携带小数，部分API参数必须大于0）。
|
||||
## 4.0.1（2022-11-28）
|
||||
优化组件loading属性的表现；
|
||||
新增组件type选项normal，以便于在某些条件编译初始为type=2d时还可以选择使用非2d组件类型；
|
||||
修复组件条件编译在其他编辑器语法提示报错；
|
||||
修复原生对es5的支持。
|
||||
## 4.0.0（2022-11-21）
|
||||
v4版本源代码全面开放，开源地址：[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)；
|
||||
|
||||
升级说明：v4为大版本更新，虽然已尽可能兼容上一代版本，但不可避免的还是存在一些细节差异，若更新后出现问题，请参考对照[v3 文档](https://uqrcode.cn/doc/v3)，[v4 文档](https://uqrcode.cn/doc)进行修改。
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const cacheImageList = [];
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
function Queue() {
|
||||
let waitingQueue = this.waitingQueue = [];
|
||||
let isRunning = this.isRunning = false; // 记录是否有未完成的任务
|
||||
|
||||
function execute(task, resolve, reject) {
|
||||
task()
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e);
|
||||
})
|
||||
.finally(() => {
|
||||
// 等待任务队列中如果有任务，则触发它；否则设置isRunning = false,表示无任务状态
|
||||
if (waitingQueue.length) {
|
||||
const next = waitingQueue.shift();
|
||||
execute(next.task, next.resolve, next.reject);
|
||||
} else {
|
||||
isRunning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.exec = function(task) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (isRunning) {
|
||||
waitingQueue.push({
|
||||
task,
|
||||
resolve,
|
||||
reject
|
||||
});
|
||||
} else {
|
||||
isRunning = true;
|
||||
execute(task, resolve, reject);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* 队列实例，某些平台一起使用多个组件时需要通过队列逐一绘制，否则部分绘制方法异常，nvue端的iOS gcanvas尤其明显，在不通过队列绘制时会出现图片丢失的情况 */
|
||||
export const queueDraw = new Queue();
|
||||
export const queueLoadImage = new Queue();
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
declare module '*/common/cache' {
|
||||
export const cacheImageList: Array;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
declare module '*/common/queue' {
|
||||
export const queueDraw: any;
|
||||
export const queueLoadImage: any;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,241 @@
|
|||
const isWeex = typeof WXEnvironment !== 'undefined';
|
||||
const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
|
||||
const isWeexAndroid = isWeex && !isWeexIOS;
|
||||
|
||||
import GLmethod from '../context-webgl/GLmethod';
|
||||
|
||||
const GCanvasModule =
|
||||
(typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
|
||||
(typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
|
||||
|
||||
let isDebugging = false;
|
||||
|
||||
let isComboDisabled = false;
|
||||
|
||||
const logCommand = (function () {
|
||||
const methodQuery = [];
|
||||
Object.keys(GLmethod).forEach(key => {
|
||||
methodQuery[GLmethod[key]] = key;
|
||||
})
|
||||
const queryMethod = (id) => {
|
||||
return methodQuery[parseInt(id)] || 'NotFoundMethod';
|
||||
}
|
||||
const logCommand = (id, cmds) => {
|
||||
const mId = cmds.split(',')[0];
|
||||
const mName = queryMethod(mId);
|
||||
console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
|
||||
}
|
||||
return logCommand;
|
||||
})();
|
||||
|
||||
function joinArray(arr, sep) {
|
||||
let res = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i !== 0) {
|
||||
res += sep;
|
||||
}
|
||||
res += arr[i];
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const commandsCache = {}
|
||||
|
||||
const GBridge = {
|
||||
|
||||
callEnable: (ref, configArray) => {
|
||||
|
||||
commandsCache[ref] = [];
|
||||
|
||||
return GCanvasModule.enable({
|
||||
componentId: ref,
|
||||
config: configArray
|
||||
});
|
||||
},
|
||||
|
||||
callEnableDebug: () => {
|
||||
isDebugging = true;
|
||||
},
|
||||
|
||||
callEnableDisableCombo: () => {
|
||||
isComboDisabled = true;
|
||||
},
|
||||
|
||||
callSetContextType: function (componentId, context_type) {
|
||||
GCanvasModule.setContextType(context_type, componentId);
|
||||
},
|
||||
|
||||
callReset: function(id){
|
||||
GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
|
||||
},
|
||||
|
||||
render: isWeexIOS ? function (componentId) {
|
||||
return GCanvasModule.extendCallNative({
|
||||
contextId: componentId,
|
||||
type: 0x60000001
|
||||
});
|
||||
} : function (componentId) {
|
||||
return callGCanvasLinkNative(componentId, 0x60000001, 'render');
|
||||
},
|
||||
|
||||
render2d: isWeexIOS ? function (componentId, commands, callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
GCanvasModule.render([commands, callback?true:false], componentId, callback);
|
||||
|
||||
} : function (componentId, commands,callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
callGCanvasLinkNative(componentId, 0x20000001, commands);
|
||||
if(callback){
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
} : function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
},
|
||||
|
||||
|
||||
flushNative: isWeexIOS ? function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = GCanvasModule.extendCallNative({
|
||||
"contextId": componentId,
|
||||
"type": 0x60000000,
|
||||
"args": cmdArgs
|
||||
});
|
||||
|
||||
const res = result && result.result;
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + res);
|
||||
}
|
||||
|
||||
return res;
|
||||
|
||||
} : function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + result);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
callNative: function (componentId, cmdArgs, cache) {
|
||||
|
||||
if (isDebugging) {
|
||||
logCommand(componentId, cmdArgs);
|
||||
}
|
||||
|
||||
commandsCache[componentId].push(cmdArgs);
|
||||
|
||||
if (!cache || isComboDisabled) {
|
||||
return GBridge.flushNative(componentId);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
texImage2D(componentId, ...args) {
|
||||
if (isWeexIOS) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
|
||||
+ format + ',' + type + ',' + (image ? image.src : 0)
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
|
||||
if (isWeexIOS) {
|
||||
if (arguments.length === 8) {
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
|
||||
}
|
||||
},
|
||||
|
||||
bindImageTexture(componentId, src, imageId) {
|
||||
GCanvasModule.bindImageTexture([src, imageId], componentId);
|
||||
},
|
||||
|
||||
perloadImage([url, id], callback) {
|
||||
GCanvasModule.preLoadImage([url, id], function (image) {
|
||||
image.url = url;
|
||||
image.id = id;
|
||||
callback(image);
|
||||
});
|
||||
},
|
||||
|
||||
measureText(text, fontStyle, componentId) {
|
||||
return GCanvasModule.measureText([text, fontStyle], componentId);
|
||||
},
|
||||
|
||||
getImageData (componentId, x, y, w, h, callback) {
|
||||
GCanvasModule.getImageData([x, y,w,h],componentId,callback);
|
||||
},
|
||||
|
||||
putImageData (componentId, data, x, y, w, h, callback) {
|
||||
GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
|
||||
},
|
||||
|
||||
toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){
|
||||
GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default GBridge;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
class FillStyleLinearGradient {
|
||||
|
||||
constructor(x0, y0, x1, y1) {
|
||||
this._start_pos = { _x: x0, _y: y0 };
|
||||
this._end_pos = { _x: x1, _y: y1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop = function (pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleLinearGradient;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
class FillStylePattern {
|
||||
constructor(img, pattern) {
|
||||
this._style = pattern;
|
||||
this._img = img;
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStylePattern;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
class FillStyleRadialGradient {
|
||||
constructor(x0, y0, r0, x1, y1, r1) {
|
||||
this._start_pos = { _x: x0, _y: y0, _r: r0 };
|
||||
this._end_pos = { _x: x1, _y: y1, _r: r1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop(pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleRadialGradient;
|
||||
|
|
@ -0,0 +1,666 @@
|
|||
import FillStylePattern from './FillStylePattern';
|
||||
import FillStyleLinearGradient from './FillStyleLinearGradient';
|
||||
import FillStyleRadialGradient from './FillStyleRadialGradient';
|
||||
import GImage from '../env/image.js';
|
||||
import {
|
||||
ArrayBufferToBase64,
|
||||
Base64ToUint8ClampedArray
|
||||
} from '../env/tool.js';
|
||||
|
||||
export default class CanvasRenderingContext2D {
|
||||
|
||||
_drawCommands = '';
|
||||
|
||||
_globalAlpha = 1.0;
|
||||
|
||||
_fillStyle = 'rgb(0,0,0)';
|
||||
_strokeStyle = 'rgb(0,0,0)';
|
||||
|
||||
_lineWidth = 1;
|
||||
_lineCap = 'butt';
|
||||
_lineJoin = 'miter';
|
||||
|
||||
_miterLimit = 10;
|
||||
|
||||
_globalCompositeOperation = 'source-over';
|
||||
|
||||
_textAlign = 'start';
|
||||
_textBaseline = 'alphabetic';
|
||||
|
||||
_font = '10px sans-serif';
|
||||
|
||||
_savedGlobalAlpha = [];
|
||||
|
||||
timer = null;
|
||||
componentId = null;
|
||||
|
||||
_notCommitDrawImageCache = [];
|
||||
_needRedrawImageCache = [];
|
||||
_redrawCommands = '';
|
||||
_autoSaveContext = true;
|
||||
// _imageMap = new GHashMap();
|
||||
// _textureMap = new GHashMap();
|
||||
|
||||
constructor() {
|
||||
this.className = 'CanvasRenderingContext2D';
|
||||
//this.save()
|
||||
}
|
||||
|
||||
setFillStyle(value) {
|
||||
this.fillStyle = value;
|
||||
}
|
||||
|
||||
set fillStyle(value) {
|
||||
this._fillStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("F" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
const image = value._img;
|
||||
if (!image.complete) {
|
||||
image.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
|
||||
//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._globalAlpha;
|
||||
}
|
||||
|
||||
setGlobalAlpha(value) {
|
||||
this.globalAlpha = value;
|
||||
}
|
||||
|
||||
set globalAlpha(value) {
|
||||
this._globalAlpha = value;
|
||||
this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
|
||||
get strokeStyle() {
|
||||
return this._strokeStyle;
|
||||
}
|
||||
|
||||
setStrokeStyle(value) {
|
||||
this.strokeStyle = value;
|
||||
}
|
||||
|
||||
set strokeStyle(value) {
|
||||
|
||||
this._strokeStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("S" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this._lineWidth;
|
||||
}
|
||||
|
||||
setLineWidth(value) {
|
||||
this.lineWidth = value;
|
||||
}
|
||||
|
||||
set lineWidth(value) {
|
||||
this._lineWidth = value;
|
||||
this._drawCommands = this._drawCommands.concat("W" + value + ";");
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._lineCap;
|
||||
}
|
||||
|
||||
setLineCap(value) {
|
||||
this.lineCap = value;
|
||||
}
|
||||
|
||||
set lineCap(value) {
|
||||
this._lineCap = value;
|
||||
this._drawCommands = this._drawCommands.concat("C" + value + ";");
|
||||
}
|
||||
|
||||
get lineJoin() {
|
||||
return this._lineJoin;
|
||||
}
|
||||
|
||||
setLineJoin(value) {
|
||||
this.lineJoin = value
|
||||
}
|
||||
|
||||
set lineJoin(value) {
|
||||
this._lineJoin = value;
|
||||
this._drawCommands = this._drawCommands.concat("J" + value + ";");
|
||||
}
|
||||
|
||||
get miterLimit() {
|
||||
return this._miterLimit;
|
||||
}
|
||||
|
||||
setMiterLimit(value) {
|
||||
this.miterLimit = value
|
||||
}
|
||||
|
||||
set miterLimit(value) {
|
||||
this._miterLimit = value;
|
||||
this._drawCommands = this._drawCommands.concat("M" + value + ";");
|
||||
}
|
||||
|
||||
get globalCompositeOperation() {
|
||||
return this._globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(value) {
|
||||
|
||||
this._globalCompositeOperation = value;
|
||||
let mode = 0;
|
||||
switch (value) {
|
||||
case "source-over":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-atop":
|
||||
mode = 5;
|
||||
break;
|
||||
case "source-in":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-out":
|
||||
mode = 2;
|
||||
break;
|
||||
case "destination-over":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-atop":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-in":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-out":
|
||||
mode = 3;
|
||||
break;
|
||||
case "lighter":
|
||||
mode = 1;
|
||||
break;
|
||||
case "copy":
|
||||
mode = 2;
|
||||
break;
|
||||
case "xor":
|
||||
mode = 6;
|
||||
break;
|
||||
default:
|
||||
mode = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("B" + mode + ";");
|
||||
}
|
||||
|
||||
get textAlign() {
|
||||
return this._textAlign;
|
||||
}
|
||||
|
||||
setTextAlign(value) {
|
||||
this.textAlign = value
|
||||
}
|
||||
|
||||
set textAlign(value) {
|
||||
|
||||
this._textAlign = value;
|
||||
let Align = 0;
|
||||
switch (value) {
|
||||
case "start":
|
||||
Align = 0;
|
||||
break;
|
||||
case "end":
|
||||
Align = 1;
|
||||
break;
|
||||
case "left":
|
||||
Align = 2;
|
||||
break;
|
||||
case "center":
|
||||
Align = 3;
|
||||
break;
|
||||
case "right":
|
||||
Align = 4;
|
||||
break;
|
||||
default:
|
||||
Align = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("A" + Align + ";");
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._textBaseline;
|
||||
}
|
||||
|
||||
setTextBaseline(value) {
|
||||
this.textBaseline = value
|
||||
}
|
||||
|
||||
set textBaseline(value) {
|
||||
this._textBaseline = value;
|
||||
let baseline = 0;
|
||||
switch (value) {
|
||||
case "alphabetic":
|
||||
baseline = 0;
|
||||
break;
|
||||
case "middle":
|
||||
baseline = 1;
|
||||
break;
|
||||
case "top":
|
||||
baseline = 2;
|
||||
break;
|
||||
case "hanging":
|
||||
baseline = 3;
|
||||
break;
|
||||
case "bottom":
|
||||
baseline = 4;
|
||||
break;
|
||||
case "ideographic":
|
||||
baseline = 5;
|
||||
break;
|
||||
default:
|
||||
baseline = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
|
||||
}
|
||||
|
||||
get font() {
|
||||
return this._font;
|
||||
}
|
||||
|
||||
setFontSize(size) {
|
||||
var str = this._font;
|
||||
var strs = str.trim().split(/\s+/);
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
|
||||
"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
|
||||
"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
|
||||
"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
|
||||
];
|
||||
|
||||
if (-1 == values.indexOf(strs[i].trim())) {
|
||||
if (typeof size === 'string') {
|
||||
strs[i] = size;
|
||||
} else if (typeof size === 'number') {
|
||||
strs[i] = String(size) + 'px';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.font = strs.join(" ");
|
||||
}
|
||||
|
||||
set font(value) {
|
||||
this._font = value;
|
||||
this._drawCommands = this._drawCommands.concat("j" + value + ";");
|
||||
}
|
||||
|
||||
setTransform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("t" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
transform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("f" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
|
||||
}
|
||||
|
||||
resetTransform() {
|
||||
this._drawCommands = this._drawCommands.concat("m;");
|
||||
}
|
||||
|
||||
scale(a, d) {
|
||||
this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
|
||||
d.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
rotate(angle) {
|
||||
this._drawCommands = this._drawCommands
|
||||
.concat("r" + angle.toFixed(6) + ";");
|
||||
}
|
||||
|
||||
translate(tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
save() {
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._drawCommands = this._drawCommands.concat("v;");
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._drawCommands = this._drawCommands.concat("e;");
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
}
|
||||
|
||||
createPattern(img, pattern) {
|
||||
if (typeof img === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = img;
|
||||
img = imgObj;
|
||||
}
|
||||
return new FillStylePattern(img, pattern);
|
||||
}
|
||||
|
||||
createLinearGradient(x0, y0, x1, y1) {
|
||||
return new FillStyleLinearGradient(x0, y0, x1, y1);
|
||||
}
|
||||
|
||||
createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
|
||||
return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
|
||||
};
|
||||
|
||||
createCircularGradient = function(x0, y0, r0) {
|
||||
return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
|
||||
};
|
||||
|
||||
strokeRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
|
||||
clearRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
clip() {
|
||||
this._drawCommands = this._drawCommands.concat("p;");
|
||||
}
|
||||
|
||||
resetClip() {
|
||||
this._drawCommands = this._drawCommands.concat("q;");
|
||||
}
|
||||
|
||||
closePath() {
|
||||
this._drawCommands = this._drawCommands.concat("o;");
|
||||
}
|
||||
|
||||
moveTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
lineTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
quadraticCurveTo = function(cpx, cpy, x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
|
||||
}
|
||||
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
|
||||
x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
arcTo(x1, y1, x2, y2, radius) {
|
||||
this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
this._drawCommands = this._drawCommands.concat("b;");
|
||||
}
|
||||
|
||||
|
||||
fillRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
rect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
fill() {
|
||||
this._drawCommands = this._drawCommands.concat("L;");
|
||||
}
|
||||
|
||||
stroke(path) {
|
||||
this._drawCommands = this._drawCommands.concat("x;");
|
||||
}
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise) {
|
||||
|
||||
let ianticlockwise = 0;
|
||||
if (anticlockwise) {
|
||||
ianticlockwise = 1;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
|
||||
radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
|
||||
";"
|
||||
);
|
||||
}
|
||||
|
||||
fillText(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
strokeText = function(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
measureText(text) {
|
||||
return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
|
||||
}
|
||||
|
||||
isPointInPath = function(x, y) {
|
||||
throw new Error('GCanvas not supported yet');
|
||||
}
|
||||
|
||||
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (typeof image === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = image;
|
||||
image = imgObj;
|
||||
}
|
||||
if (image instanceof GImage) {
|
||||
if (!image.complete) {
|
||||
imgObj.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
|
||||
var args = [];
|
||||
for (var arg in srcArgs) {
|
||||
if (typeof(srcArgs[arg]) != 'undefined') {
|
||||
args.push(srcArgs[arg]);
|
||||
}
|
||||
}
|
||||
this.__drawImage.apply(this, args);
|
||||
//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
}
|
||||
|
||||
__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
const numArgs = arguments.length;
|
||||
|
||||
function drawImageCommands() {
|
||||
|
||||
if (numArgs === 3) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + image.width + "," + image.height + ";");
|
||||
} else if (numArgs === 5) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
const width = parseInt(sw) || image.width;
|
||||
const height = parseInt(sh) || image.height;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + width + "," + height + ";");
|
||||
} else if (numArgs === 9) {
|
||||
sx = parseFloat(sx) || 0.0;
|
||||
sy = parseFloat(sy) || 0.0;
|
||||
sw = parseInt(sw) || image.width;
|
||||
sh = parseInt(sh) || image.height;
|
||||
dx = parseFloat(dx) || 0.0;
|
||||
dy = parseFloat(dy) || 0.0;
|
||||
dw = parseInt(dw) || image.width;
|
||||
dh = parseInt(dh) || image.height;
|
||||
|
||||
return ("d" + image._id + "," +
|
||||
sx + "," + sy + "," + sw + "," + sh + "," +
|
||||
dx + "," + dy + "," + dw + "," + dh + ";");
|
||||
}
|
||||
}
|
||||
this._drawCommands += drawImageCommands();
|
||||
}
|
||||
|
||||
_flush(reserve, callback) {
|
||||
const commands = this._drawCommands;
|
||||
this._drawCommands = '';
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
this._needRender = false;
|
||||
}
|
||||
|
||||
_redrawflush(reserve, callback) {
|
||||
const commands = this._redrawCommands;
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
if (this._needRedrawImageCache.length == 0) {
|
||||
this._redrawCommands = '';
|
||||
}
|
||||
}
|
||||
|
||||
draw(reserve, callback) {
|
||||
if (!reserve) {
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._redrawCommands = this._drawCommands;
|
||||
this._needRedrawImageCache = this._notCommitDrawImageCache;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
} else {
|
||||
this._drawCommands = ("e;X;v;" + this._drawCommands);
|
||||
}
|
||||
} else {
|
||||
this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
|
||||
this._redrawCommands += this._drawCommands;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache = [];
|
||||
if (this._flush) {
|
||||
this._flush(reserve, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getImageData(x, y, w, h, callback) {
|
||||
CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
|
||||
res.data = Base64ToUint8ClampedArray(res.data);
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
putImageData(data, x, y, w, h, callback) {
|
||||
if (data instanceof Uint8ClampedArray) {
|
||||
data = ArrayBufferToBase64(data);
|
||||
CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
|
||||
CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
|
||||
fileType, quality,
|
||||
function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export default class WebGLActiveInfo {
|
||||
className = 'WebGLActiveInfo';
|
||||
|
||||
constructor({
|
||||
type, name, size
|
||||
}) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.size = size;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLBuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLFrameBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLFramebuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
export default {
|
||||
"DEPTH_BUFFER_BIT": 256,
|
||||
"STENCIL_BUFFER_BIT": 1024,
|
||||
"COLOR_BUFFER_BIT": 16384,
|
||||
"POINTS": 0,
|
||||
"LINES": 1,
|
||||
"LINE_LOOP": 2,
|
||||
"LINE_STRIP": 3,
|
||||
"TRIANGLES": 4,
|
||||
"TRIANGLE_STRIP": 5,
|
||||
"TRIANGLE_FAN": 6,
|
||||
"ZERO": 0,
|
||||
"ONE": 1,
|
||||
"SRC_COLOR": 768,
|
||||
"ONE_MINUS_SRC_COLOR": 769,
|
||||
"SRC_ALPHA": 770,
|
||||
"ONE_MINUS_SRC_ALPHA": 771,
|
||||
"DST_ALPHA": 772,
|
||||
"ONE_MINUS_DST_ALPHA": 773,
|
||||
"DST_COLOR": 774,
|
||||
"ONE_MINUS_DST_COLOR": 775,
|
||||
"SRC_ALPHA_SATURATE": 776,
|
||||
"FUNC_ADD": 32774,
|
||||
"BLEND_EQUATION": 32777,
|
||||
"BLEND_EQUATION_RGB": 32777,
|
||||
"BLEND_EQUATION_ALPHA": 34877,
|
||||
"FUNC_SUBTRACT": 32778,
|
||||
"FUNC_REVERSE_SUBTRACT": 32779,
|
||||
"BLEND_DST_RGB": 32968,
|
||||
"BLEND_SRC_RGB": 32969,
|
||||
"BLEND_DST_ALPHA": 32970,
|
||||
"BLEND_SRC_ALPHA": 32971,
|
||||
"CONSTANT_COLOR": 32769,
|
||||
"ONE_MINUS_CONSTANT_COLOR": 32770,
|
||||
"CONSTANT_ALPHA": 32771,
|
||||
"ONE_MINUS_CONSTANT_ALPHA": 32772,
|
||||
"BLEND_COLOR": 32773,
|
||||
"ARRAY_BUFFER": 34962,
|
||||
"ELEMENT_ARRAY_BUFFER": 34963,
|
||||
"ARRAY_BUFFER_BINDING": 34964,
|
||||
"ELEMENT_ARRAY_BUFFER_BINDING": 34965,
|
||||
"STREAM_DRAW": 35040,
|
||||
"STATIC_DRAW": 35044,
|
||||
"DYNAMIC_DRAW": 35048,
|
||||
"BUFFER_SIZE": 34660,
|
||||
"BUFFER_USAGE": 34661,
|
||||
"CURRENT_VERTEX_ATTRIB": 34342,
|
||||
"FRONT": 1028,
|
||||
"BACK": 1029,
|
||||
"FRONT_AND_BACK": 1032,
|
||||
"TEXTURE_2D": 3553,
|
||||
"CULL_FACE": 2884,
|
||||
"BLEND": 3042,
|
||||
"DITHER": 3024,
|
||||
"STENCIL_TEST": 2960,
|
||||
"DEPTH_TEST": 2929,
|
||||
"SCISSOR_TEST": 3089,
|
||||
"POLYGON_OFFSET_FILL": 32823,
|
||||
"SAMPLE_ALPHA_TO_COVERAGE": 32926,
|
||||
"SAMPLE_COVERAGE": 32928,
|
||||
"NO_ERROR": 0,
|
||||
"INVALID_ENUM": 1280,
|
||||
"INVALID_VALUE": 1281,
|
||||
"INVALID_OPERATION": 1282,
|
||||
"OUT_OF_MEMORY": 1285,
|
||||
"CW": 2304,
|
||||
"CCW": 2305,
|
||||
"LINE_WIDTH": 2849,
|
||||
"ALIASED_POINT_SIZE_RANGE": 33901,
|
||||
"ALIASED_LINE_WIDTH_RANGE": 33902,
|
||||
"CULL_FACE_MODE": 2885,
|
||||
"FRONT_FACE": 2886,
|
||||
"DEPTH_RANGE": 2928,
|
||||
"DEPTH_WRITEMASK": 2930,
|
||||
"DEPTH_CLEAR_VALUE": 2931,
|
||||
"DEPTH_FUNC": 2932,
|
||||
"STENCIL_CLEAR_VALUE": 2961,
|
||||
"STENCIL_FUNC": 2962,
|
||||
"STENCIL_FAIL": 2964,
|
||||
"STENCIL_PASS_DEPTH_FAIL": 2965,
|
||||
"STENCIL_PASS_DEPTH_PASS": 2966,
|
||||
"STENCIL_REF": 2967,
|
||||
"STENCIL_VALUE_MASK": 2963,
|
||||
"STENCIL_WRITEMASK": 2968,
|
||||
"STENCIL_BACK_FUNC": 34816,
|
||||
"STENCIL_BACK_FAIL": 34817,
|
||||
"STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
|
||||
"STENCIL_BACK_PASS_DEPTH_PASS": 34819,
|
||||
"STENCIL_BACK_REF": 36003,
|
||||
"STENCIL_BACK_VALUE_MASK": 36004,
|
||||
"STENCIL_BACK_WRITEMASK": 36005,
|
||||
"VIEWPORT": 2978,
|
||||
"SCISSOR_BOX": 3088,
|
||||
"COLOR_CLEAR_VALUE": 3106,
|
||||
"COLOR_WRITEMASK": 3107,
|
||||
"UNPACK_ALIGNMENT": 3317,
|
||||
"PACK_ALIGNMENT": 3333,
|
||||
"MAX_TEXTURE_SIZE": 3379,
|
||||
"MAX_VIEWPORT_DIMS": 3386,
|
||||
"SUBPIXEL_BITS": 3408,
|
||||
"RED_BITS": 3410,
|
||||
"GREEN_BITS": 3411,
|
||||
"BLUE_BITS": 3412,
|
||||
"ALPHA_BITS": 3413,
|
||||
"DEPTH_BITS": 3414,
|
||||
"STENCIL_BITS": 3415,
|
||||
"POLYGON_OFFSET_UNITS": 10752,
|
||||
"POLYGON_OFFSET_FACTOR": 32824,
|
||||
"TEXTURE_BINDING_2D": 32873,
|
||||
"SAMPLE_BUFFERS": 32936,
|
||||
"SAMPLES": 32937,
|
||||
"SAMPLE_COVERAGE_VALUE": 32938,
|
||||
"SAMPLE_COVERAGE_INVERT": 32939,
|
||||
"COMPRESSED_TEXTURE_FORMATS": 34467,
|
||||
"DONT_CARE": 4352,
|
||||
"FASTEST": 4353,
|
||||
"NICEST": 4354,
|
||||
"GENERATE_MIPMAP_HINT": 33170,
|
||||
"BYTE": 5120,
|
||||
"UNSIGNED_BYTE": 5121,
|
||||
"SHORT": 5122,
|
||||
"UNSIGNED_SHORT": 5123,
|
||||
"INT": 5124,
|
||||
"UNSIGNED_INT": 5125,
|
||||
"FLOAT": 5126,
|
||||
"DEPTH_COMPONENT": 6402,
|
||||
"ALPHA": 6406,
|
||||
"RGB": 6407,
|
||||
"RGBA": 6408,
|
||||
"LUMINANCE": 6409,
|
||||
"LUMINANCE_ALPHA": 6410,
|
||||
"UNSIGNED_SHORT_4_4_4_4": 32819,
|
||||
"UNSIGNED_SHORT_5_5_5_1": 32820,
|
||||
"UNSIGNED_SHORT_5_6_5": 33635,
|
||||
"FRAGMENT_SHADER": 35632,
|
||||
"VERTEX_SHADER": 35633,
|
||||
"MAX_VERTEX_ATTRIBS": 34921,
|
||||
"MAX_VERTEX_UNIFORM_VECTORS": 36347,
|
||||
"MAX_VARYING_VECTORS": 36348,
|
||||
"MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
|
||||
"MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
|
||||
"MAX_TEXTURE_IMAGE_UNITS": 34930,
|
||||
"MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
|
||||
"SHADER_TYPE": 35663,
|
||||
"DELETE_STATUS": 35712,
|
||||
"LINK_STATUS": 35714,
|
||||
"VALIDATE_STATUS": 35715,
|
||||
"ATTACHED_SHADERS": 35717,
|
||||
"ACTIVE_UNIFORMS": 35718,
|
||||
"ACTIVE_ATTRIBUTES": 35721,
|
||||
"SHADING_LANGUAGE_VERSION": 35724,
|
||||
"CURRENT_PROGRAM": 35725,
|
||||
"NEVER": 512,
|
||||
"LESS": 513,
|
||||
"EQUAL": 514,
|
||||
"LEQUAL": 515,
|
||||
"GREATER": 516,
|
||||
"NOTEQUAL": 517,
|
||||
"GEQUAL": 518,
|
||||
"ALWAYS": 519,
|
||||
"KEEP": 7680,
|
||||
"REPLACE": 7681,
|
||||
"INCR": 7682,
|
||||
"DECR": 7683,
|
||||
"INVERT": 5386,
|
||||
"INCR_WRAP": 34055,
|
||||
"DECR_WRAP": 34056,
|
||||
"VENDOR": 7936,
|
||||
"RENDERER": 7937,
|
||||
"VERSION": 7938,
|
||||
"NEAREST": 9728,
|
||||
"LINEAR": 9729,
|
||||
"NEAREST_MIPMAP_NEAREST": 9984,
|
||||
"LINEAR_MIPMAP_NEAREST": 9985,
|
||||
"NEAREST_MIPMAP_LINEAR": 9986,
|
||||
"LINEAR_MIPMAP_LINEAR": 9987,
|
||||
"TEXTURE_MAG_FILTER": 10240,
|
||||
"TEXTURE_MIN_FILTER": 10241,
|
||||
"TEXTURE_WRAP_S": 10242,
|
||||
"TEXTURE_WRAP_T": 10243,
|
||||
"TEXTURE": 5890,
|
||||
"TEXTURE_CUBE_MAP": 34067,
|
||||
"TEXTURE_BINDING_CUBE_MAP": 34068,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
|
||||
"MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
|
||||
"TEXTURE0": 33984,
|
||||
"TEXTURE1": 33985,
|
||||
"TEXTURE2": 33986,
|
||||
"TEXTURE3": 33987,
|
||||
"TEXTURE4": 33988,
|
||||
"TEXTURE5": 33989,
|
||||
"TEXTURE6": 33990,
|
||||
"TEXTURE7": 33991,
|
||||
"TEXTURE8": 33992,
|
||||
"TEXTURE9": 33993,
|
||||
"TEXTURE10": 33994,
|
||||
"TEXTURE11": 33995,
|
||||
"TEXTURE12": 33996,
|
||||
"TEXTURE13": 33997,
|
||||
"TEXTURE14": 33998,
|
||||
"TEXTURE15": 33999,
|
||||
"TEXTURE16": 34000,
|
||||
"TEXTURE17": 34001,
|
||||
"TEXTURE18": 34002,
|
||||
"TEXTURE19": 34003,
|
||||
"TEXTURE20": 34004,
|
||||
"TEXTURE21": 34005,
|
||||
"TEXTURE22": 34006,
|
||||
"TEXTURE23": 34007,
|
||||
"TEXTURE24": 34008,
|
||||
"TEXTURE25": 34009,
|
||||
"TEXTURE26": 34010,
|
||||
"TEXTURE27": 34011,
|
||||
"TEXTURE28": 34012,
|
||||
"TEXTURE29": 34013,
|
||||
"TEXTURE30": 34014,
|
||||
"TEXTURE31": 34015,
|
||||
"ACTIVE_TEXTURE": 34016,
|
||||
"REPEAT": 10497,
|
||||
"CLAMP_TO_EDGE": 33071,
|
||||
"MIRRORED_REPEAT": 33648,
|
||||
"FLOAT_VEC2": 35664,
|
||||
"FLOAT_VEC3": 35665,
|
||||
"FLOAT_VEC4": 35666,
|
||||
"INT_VEC2": 35667,
|
||||
"INT_VEC3": 35668,
|
||||
"INT_VEC4": 35669,
|
||||
"BOOL": 35670,
|
||||
"BOOL_VEC2": 35671,
|
||||
"BOOL_VEC3": 35672,
|
||||
"BOOL_VEC4": 35673,
|
||||
"FLOAT_MAT2": 35674,
|
||||
"FLOAT_MAT3": 35675,
|
||||
"FLOAT_MAT4": 35676,
|
||||
"SAMPLER_2D": 35678,
|
||||
"SAMPLER_CUBE": 35680,
|
||||
"VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
|
||||
"VERTEX_ATTRIB_ARRAY_SIZE": 34339,
|
||||
"VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
|
||||
"VERTEX_ATTRIB_ARRAY_TYPE": 34341,
|
||||
"VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
|
||||
"VERTEX_ATTRIB_ARRAY_POINTER": 34373,
|
||||
"VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
|
||||
"IMPLEMENTATION_COLOR_READ_TYPE": 35738,
|
||||
"IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
|
||||
"COMPILE_STATUS": 35713,
|
||||
"LOW_FLOAT": 36336,
|
||||
"MEDIUM_FLOAT": 36337,
|
||||
"HIGH_FLOAT": 36338,
|
||||
"LOW_INT": 36339,
|
||||
"MEDIUM_INT": 36340,
|
||||
"HIGH_INT": 36341,
|
||||
"FRAMEBUFFER": 36160,
|
||||
"RENDERBUFFER": 36161,
|
||||
"RGBA4": 32854,
|
||||
"RGB5_A1": 32855,
|
||||
"RGB565": 36194,
|
||||
"DEPTH_COMPONENT16": 33189,
|
||||
"STENCIL_INDEX8": 36168,
|
||||
"DEPTH_STENCIL": 34041,
|
||||
"RENDERBUFFER_WIDTH": 36162,
|
||||
"RENDERBUFFER_HEIGHT": 36163,
|
||||
"RENDERBUFFER_INTERNAL_FORMAT": 36164,
|
||||
"RENDERBUFFER_RED_SIZE": 36176,
|
||||
"RENDERBUFFER_GREEN_SIZE": 36177,
|
||||
"RENDERBUFFER_BLUE_SIZE": 36178,
|
||||
"RENDERBUFFER_ALPHA_SIZE": 36179,
|
||||
"RENDERBUFFER_DEPTH_SIZE": 36180,
|
||||
"RENDERBUFFER_STENCIL_SIZE": 36181,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
|
||||
"COLOR_ATTACHMENT0": 36064,
|
||||
"DEPTH_ATTACHMENT": 36096,
|
||||
"STENCIL_ATTACHMENT": 36128,
|
||||
"DEPTH_STENCIL_ATTACHMENT": 33306,
|
||||
"NONE": 0,
|
||||
"FRAMEBUFFER_COMPLETE": 36053,
|
||||
"FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
|
||||
"FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
|
||||
"FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
|
||||
"FRAMEBUFFER_UNSUPPORTED": 36061,
|
||||
"FRAMEBUFFER_BINDING": 36006,
|
||||
"RENDERBUFFER_BINDING": 36007,
|
||||
"MAX_RENDERBUFFER_SIZE": 34024,
|
||||
"INVALID_FRAMEBUFFER_OPERATION": 1286,
|
||||
"UNPACK_FLIP_Y_WEBGL": 37440,
|
||||
"UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
|
||||
"CONTEXT_LOST_WEBGL": 37442,
|
||||
"UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
|
||||
"BROWSER_DEFAULT_WEBGL": 37444
|
||||
};
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
let i = 1;
|
||||
|
||||
const GLmethod = {};
|
||||
|
||||
GLmethod.activeTexture = i++; //1
|
||||
GLmethod.attachShader = i++;
|
||||
GLmethod.bindAttribLocation = i++;
|
||||
GLmethod.bindBuffer = i++;
|
||||
GLmethod.bindFramebuffer = i++;
|
||||
GLmethod.bindRenderbuffer = i++;
|
||||
GLmethod.bindTexture = i++;
|
||||
GLmethod.blendColor = i++;
|
||||
GLmethod.blendEquation = i++;
|
||||
GLmethod.blendEquationSeparate = i++; //10
|
||||
GLmethod.blendFunc = i++;
|
||||
GLmethod.blendFuncSeparate = i++;
|
||||
GLmethod.bufferData = i++;
|
||||
GLmethod.bufferSubData = i++;
|
||||
GLmethod.checkFramebufferStatus = i++;
|
||||
GLmethod.clear = i++;
|
||||
GLmethod.clearColor = i++;
|
||||
GLmethod.clearDepth = i++;
|
||||
GLmethod.clearStencil = i++;
|
||||
GLmethod.colorMask = i++; //20
|
||||
GLmethod.compileShader = i++;
|
||||
GLmethod.compressedTexImage2D = i++;
|
||||
GLmethod.compressedTexSubImage2D = i++;
|
||||
GLmethod.copyTexImage2D = i++;
|
||||
GLmethod.copyTexSubImage2D = i++;
|
||||
GLmethod.createBuffer = i++;
|
||||
GLmethod.createFramebuffer = i++;
|
||||
GLmethod.createProgram = i++;
|
||||
GLmethod.createRenderbuffer = i++;
|
||||
GLmethod.createShader = i++; //30
|
||||
GLmethod.createTexture = i++;
|
||||
GLmethod.cullFace = i++;
|
||||
GLmethod.deleteBuffer = i++;
|
||||
GLmethod.deleteFramebuffer = i++;
|
||||
GLmethod.deleteProgram = i++;
|
||||
GLmethod.deleteRenderbuffer = i++;
|
||||
GLmethod.deleteShader = i++;
|
||||
GLmethod.deleteTexture = i++;
|
||||
GLmethod.depthFunc = i++;
|
||||
GLmethod.depthMask = i++; //40
|
||||
GLmethod.depthRange = i++;
|
||||
GLmethod.detachShader = i++;
|
||||
GLmethod.disable = i++;
|
||||
GLmethod.disableVertexAttribArray = i++;
|
||||
GLmethod.drawArrays = i++;
|
||||
GLmethod.drawArraysInstancedANGLE = i++;
|
||||
GLmethod.drawElements = i++;
|
||||
GLmethod.drawElementsInstancedANGLE = i++;
|
||||
GLmethod.enable = i++;
|
||||
GLmethod.enableVertexAttribArray = i++; //50
|
||||
GLmethod.flush = i++;
|
||||
GLmethod.framebufferRenderbuffer = i++;
|
||||
GLmethod.framebufferTexture2D = i++;
|
||||
GLmethod.frontFace = i++;
|
||||
GLmethod.generateMipmap = i++;
|
||||
GLmethod.getActiveAttrib = i++;
|
||||
GLmethod.getActiveUniform = i++;
|
||||
GLmethod.getAttachedShaders = i++;
|
||||
GLmethod.getAttribLocation = i++;
|
||||
GLmethod.getBufferParameter = i++; //60
|
||||
GLmethod.getContextAttributes = i++;
|
||||
GLmethod.getError = i++;
|
||||
GLmethod.getExtension = i++;
|
||||
GLmethod.getFramebufferAttachmentParameter = i++;
|
||||
GLmethod.getParameter = i++;
|
||||
GLmethod.getProgramInfoLog = i++;
|
||||
GLmethod.getProgramParameter = i++;
|
||||
GLmethod.getRenderbufferParameter = i++;
|
||||
GLmethod.getShaderInfoLog = i++;
|
||||
GLmethod.getShaderParameter = i++; //70
|
||||
GLmethod.getShaderPrecisionFormat = i++;
|
||||
GLmethod.getShaderSource = i++;
|
||||
GLmethod.getSupportedExtensions = i++;
|
||||
GLmethod.getTexParameter = i++;
|
||||
GLmethod.getUniform = i++;
|
||||
GLmethod.getUniformLocation = i++;
|
||||
GLmethod.getVertexAttrib = i++;
|
||||
GLmethod.getVertexAttribOffset = i++;
|
||||
GLmethod.isBuffer = i++;
|
||||
GLmethod.isContextLost = i++; //80
|
||||
GLmethod.isEnabled = i++;
|
||||
GLmethod.isFramebuffer = i++;
|
||||
GLmethod.isProgram = i++;
|
||||
GLmethod.isRenderbuffer = i++;
|
||||
GLmethod.isShader = i++;
|
||||
GLmethod.isTexture = i++;
|
||||
GLmethod.lineWidth = i++;
|
||||
GLmethod.linkProgram = i++;
|
||||
GLmethod.pixelStorei = i++;
|
||||
GLmethod.polygonOffset = i++; //90
|
||||
GLmethod.readPixels = i++;
|
||||
GLmethod.renderbufferStorage = i++;
|
||||
GLmethod.sampleCoverage = i++;
|
||||
GLmethod.scissor = i++;
|
||||
GLmethod.shaderSource = i++;
|
||||
GLmethod.stencilFunc = i++;
|
||||
GLmethod.stencilFuncSeparate = i++;
|
||||
GLmethod.stencilMask = i++;
|
||||
GLmethod.stencilMaskSeparate = i++;
|
||||
GLmethod.stencilOp = i++; //100
|
||||
GLmethod.stencilOpSeparate = i++;
|
||||
GLmethod.texImage2D = i++;
|
||||
GLmethod.texParameterf = i++;
|
||||
GLmethod.texParameteri = i++;
|
||||
GLmethod.texSubImage2D = i++;
|
||||
GLmethod.uniform1f = i++;
|
||||
GLmethod.uniform1fv = i++;
|
||||
GLmethod.uniform1i = i++;
|
||||
GLmethod.uniform1iv = i++;
|
||||
GLmethod.uniform2f = i++; //110
|
||||
GLmethod.uniform2fv = i++;
|
||||
GLmethod.uniform2i = i++;
|
||||
GLmethod.uniform2iv = i++;
|
||||
GLmethod.uniform3f = i++;
|
||||
GLmethod.uniform3fv = i++;
|
||||
GLmethod.uniform3i = i++;
|
||||
GLmethod.uniform3iv = i++;
|
||||
GLmethod.uniform4f = i++;
|
||||
GLmethod.uniform4fv = i++;
|
||||
GLmethod.uniform4i = i++; //120
|
||||
GLmethod.uniform4iv = i++;
|
||||
GLmethod.uniformMatrix2fv = i++;
|
||||
GLmethod.uniformMatrix3fv = i++;
|
||||
GLmethod.uniformMatrix4fv = i++;
|
||||
GLmethod.useProgram = i++;
|
||||
GLmethod.validateProgram = i++;
|
||||
GLmethod.vertexAttrib1f = i++; //new
|
||||
GLmethod.vertexAttrib2f = i++; //new
|
||||
GLmethod.vertexAttrib3f = i++; //new
|
||||
GLmethod.vertexAttrib4f = i++; //new //130
|
||||
GLmethod.vertexAttrib1fv = i++; //new
|
||||
GLmethod.vertexAttrib2fv = i++; //new
|
||||
GLmethod.vertexAttrib3fv = i++; //new
|
||||
GLmethod.vertexAttrib4fv = i++; //new
|
||||
GLmethod.vertexAttribPointer = i++;
|
||||
GLmethod.viewport = i++;
|
||||
|
||||
export default GLmethod;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
const GLtype = {};
|
||||
|
||||
[
|
||||
"GLbitfield",
|
||||
"GLboolean",
|
||||
"GLbyte",
|
||||
"GLclampf",
|
||||
"GLenum",
|
||||
"GLfloat",
|
||||
"GLint",
|
||||
"GLintptr",
|
||||
"GLsizei",
|
||||
"GLsizeiptr",
|
||||
"GLshort",
|
||||
"GLubyte",
|
||||
"GLuint",
|
||||
"GLushort"
|
||||
].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
|
||||
|
||||
export default GLtype;
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLProgram';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLProgram {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLRenderBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLRenderbuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,22 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLShader';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLShader {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export default class WebGLShaderPrecisionFormat {
|
||||
className = 'WebGLShaderPrecisionFormat';
|
||||
|
||||
constructor({
|
||||
rangeMin, rangeMax, precision
|
||||
}) {
|
||||
this.rangeMin = rangeMin;
|
||||
this.rangeMax = rangeMax;
|
||||
this.precision = precision;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLTexture';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLTexture {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLUniformLocation';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLUniformLocation {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export function getTransferedObjectUUID(name, id) {
|
||||
return `${name.toLowerCase()}-${id}`;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import GContext2D from '../context-2d/RenderingContext';
|
||||
import GContextWebGL from '../context-webgl/RenderingContext';
|
||||
|
||||
export default class GCanvas {
|
||||
|
||||
// static GBridge = null;
|
||||
|
||||
id = null;
|
||||
|
||||
_needRender = true;
|
||||
|
||||
constructor(id, { disableAutoSwap }) {
|
||||
this.id = id;
|
||||
|
||||
this._disableAutoSwap = disableAutoSwap;
|
||||
if (disableAutoSwap) {
|
||||
this._swapBuffers = () => {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getContext(type) {
|
||||
|
||||
let context = null;
|
||||
|
||||
if (type.match(/webgl/i)) {
|
||||
context = new GContextWebGL(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
if (!this._disableAutoSwap) {
|
||||
const render = () => {
|
||||
if (this._needRender) {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
this._needRender = false;
|
||||
}
|
||||
}
|
||||
setInterval(render, 16);
|
||||
}
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
|
||||
} else if (type.match(/2d/i)) {
|
||||
context = new GContext2D(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
// const render = ( callback ) => {
|
||||
//
|
||||
// const commands = context._drawCommands;
|
||||
// context._drawCommands = '';
|
||||
//
|
||||
// GCanvas.GBridge.render2d(this.id, commands, callback);
|
||||
// this._needRender = false;
|
||||
// }
|
||||
// //draw方法触发
|
||||
// context._flush = render;
|
||||
// //setInterval(render, 16);
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 0);
|
||||
} else {
|
||||
throw new Error('not supported context ' + type);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
GCanvas.GBridge.callReset(this.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
let incId = 1;
|
||||
|
||||
const noop = function () { };
|
||||
|
||||
class GImage {
|
||||
|
||||
static GBridge = null;
|
||||
|
||||
constructor() {
|
||||
this._id = incId++;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._src = undefined;
|
||||
this._onload = noop;
|
||||
this._onerror = noop;
|
||||
this.complete = false;
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this._width;
|
||||
}
|
||||
set width(v) {
|
||||
this._width = v;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this._height = v;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(v) {
|
||||
|
||||
if (v.startsWith('//')) {
|
||||
v = 'http:' + v;
|
||||
}
|
||||
|
||||
this._src = v;
|
||||
|
||||
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
|
||||
if (typeof data === 'string') {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
if (data.error) {
|
||||
var evt = { type: 'error', target: this };
|
||||
this.onerror(evt);
|
||||
} else {
|
||||
this.complete = true;
|
||||
this.width = typeof data.width === 'number' ? data.width : 0;
|
||||
this.height = typeof data.height === 'number' ? data.height : 0;
|
||||
var evt = { type: 'load', target: this };
|
||||
this.onload(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = listener;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = listener;
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = noop;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = noop;
|
||||
}
|
||||
}
|
||||
|
||||
get onload() {
|
||||
return this._onload;
|
||||
}
|
||||
|
||||
set onload(v) {
|
||||
this._onload = v;
|
||||
}
|
||||
|
||||
get onerror() {
|
||||
return this._onerror;
|
||||
}
|
||||
|
||||
set onerror(v) {
|
||||
this._onerror = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default GImage;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
export function ArrayBufferToBase64 (buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8ClampedArray(buffer);
|
||||
for (var len = bytes.byteLength, i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function Base64ToUint8ClampedArray(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = atob(base64);
|
||||
const outputArray = new Uint8ClampedArray(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import GCanvas from './env/canvas';
|
||||
import GImage from './env/image';
|
||||
|
||||
import GWebGLRenderingContext from './context-webgl/RenderingContext';
|
||||
import GContext2D from './context-2d/RenderingContext';
|
||||
|
||||
import GBridgeWeex from './bridge/bridge-weex';
|
||||
|
||||
export let Image = GImage;
|
||||
|
||||
export let WeexBridge = GBridgeWeex;
|
||||
|
||||
export function enable(el, { bridge, debug, disableAutoSwap, disableComboCommands } = {}) {
|
||||
|
||||
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
|
||||
|
||||
GBridge.callEnable(el.ref, [
|
||||
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
|
||||
-1, // hybridLayerType: 0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
|
||||
false, // supportScroll
|
||||
false, // newCanvasMode
|
||||
1, // compatible
|
||||
'white',// clearColor
|
||||
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
|
||||
]);
|
||||
|
||||
if (debug === true) {
|
||||
GBridge.callEnableDebug();
|
||||
}
|
||||
if (disableComboCommands) {
|
||||
GBridge.callEnableDisableCombo();
|
||||
}
|
||||
|
||||
var canvas = new GCanvas(el.ref, { disableAutoSwap });
|
||||
canvas.width = el.style.width;
|
||||
canvas.height = el.style.height;
|
||||
|
||||
return canvas;
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,79 @@
|
|||
{
|
||||
"id": "Sansnn-uQRCode",
|
||||
"displayName": "uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端",
|
||||
"version": "4.0.6",
|
||||
"description": "uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和Node.js。",
|
||||
"keywords": [
|
||||
"二维码",
|
||||
"uQRCode",
|
||||
"qrcode",
|
||||
"qr"
|
||||
],
|
||||
"repository": "https://github.com/Sansnn/uQRCode",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/uqrcodejs",
|
||||
"type": "sdk-js"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
## 2.5.0-20230101（2023-01-01）
|
||||
- 秋云图表组件 修改条件编译顺序，确保uniapp的cli方式的项目依赖不完整时可以正常显示
|
||||
- 秋云图表组件 恢复props属性directory的使用，以修复vue3项目中，开启echarts后，echarts目录识别错误的bug
|
||||
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
|
||||
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
|
||||
- uCharts.js 修复x轴使用labelCount时，并且boundaryGap = 'justify' 并且关闭Y轴显示的时候，最后一个坐标值不显示的bug
|
||||
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
|
||||
- uCharts.js 修复玫瑰图半径显示不正确的bug
|
||||
- uCharts.js 柱状图、山峰图增加正负图功能，y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定，后续版本优化自动显示0轴
|
||||
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition，数据标签位置，有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
|
||||
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow，否显示各项标识文案是，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding，提示窗边框填充距离，默认3px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize，提示窗字体大小配置，默认13px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight，提示窗文字行高，默认20px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow，是否显示左侧图例，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape，图例形状，图例标识样式，有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize，字体大小配置，默认13px
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding，标签边框内填充距离，默认6px
|
||||
- uCharts.js 折线图line增加 opts.extra.line.linearType，渐变色类型，可选值 none关闭渐变色，custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
|
||||
- uCharts.js 折线图line增加 serie.linearColor，渐变色数组，格式为2维数组[起始位置，颜色值]，例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.onShadow，是否开启折线阴影，开启后请赋值serie.setShadow阴影设置
|
||||
- uCharts.js 折线图line增加 serie.setShadow，阴影配置，格式为4位数组：[offsetX,offsetY,blur,color]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.animation，动画效果方向，可选值为vertical 垂直动画效果，horizontal 水平动画效果
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight，X轴字体行高，默认20px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop，X轴文字距离轴线的距离，默认0px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.title，当前X轴标题
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize，标题字体大小，默认13px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor，标题字体颜色，默认#666666
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
- 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
- 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
- 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
- 或者添加uniCloud的依赖；
|
||||
- 或者使用原生uCharts；
|
||||
## 2.4.5-20221130（2022-11-30）
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 折线图修复特殊情况下只有单点数据，并改变线宽后点变为圆形的bug
|
||||
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
|
||||
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
|
||||
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
|
||||
- uCharts.js 折线图、区域图增加tooltip指示点，opts.extra.line.activeType/opts.extra.area.activeType，可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
|
||||
## 2.4.4-20221102（2022-11-02）
|
||||
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
|
||||
- 秋云图表组件 修复使用echarts时，初始化时宽高不正确的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
|
||||
- 秋云图表组件 修复uniapp的h5使用history模式时，无法加载echarts的bug
|
||||
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出，方便一些特殊需求的交互获取数据。
|
||||
|
||||
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
|
||||
- uCharts.js 地图新增参数opts.series[i].fillOpacity，以透明度方式来设置颜色过度效果，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
|
||||
- uCharts.js 地图新增参数opts.extra.map.active，是否启用点击激活变色
|
||||
- uCharts.js 地图新增参数opts.extra.map.activeTextColor，是否启用点击激活变色
|
||||
- uCharts.js 地图新增渲染完成事件renderComplete
|
||||
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小，默认opts.fontSize
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色，默认#FFFFFF
|
||||
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度，默认0
|
||||
- uCharts.js 进度条新增参数opts.extra.arcbar.direction，动画方向，可选值为cw顺时针、ccw逆时针
|
||||
- uCharts.js 混合图新增参数opts.extra.mix.line.width，折线的宽度，默认2
|
||||
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时，图表显示错位的bug
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
|
||||
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
|
||||
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
1. 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
2. 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
3. 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
4. 或者添加uniCloud的依赖；
|
||||
5. 或者使用原生uCharts；
|
||||
## 2.4.3-20220505（2022-05-05）
|
||||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时，再次赋值后画布闪动的bug
|
||||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval，数据点位网格抽希，默认1
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel， 是否显示刻度点值，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix，刻度点值小数位数，默认0
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow，是否显示末端刻度圆点，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius，刻度圆点的半径，默认3
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor，刻度圆点的颜色，默认#cccccc
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType，渐变色类型，可选值"none"关闭渐变,"custom"开启渐变
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor，自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
|
||||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||
- uCharts.js 柱状图中温度计式图标，优化支持全圆角类型，修复边框有缝隙的bug，详见官网【演示】中的温度计图表
|
||||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth，当前点击柱状图的背景宽度，默认一个单元格单位
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度，默认0.2
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelText，自定义标签文字，避免formatter格式化的繁琐，详见官网【演示】中的饼图
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelShow，自定义是否显示某一个指示标签，避免因饼图类别太多导致标签重复或者居多导致图形变形的问题，详见官网【演示】中的饼图
|
||||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText（与series.name同级）自定义图例显示文字的方法
|
||||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参，统一为fromatter:function(value,index,opts){}
|
||||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||
- 【官网模板】增加外部自定义图例与图表交互的例子，[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||
|
||||
## 注意：非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下，请到码云更新非 unimodules 版本组件，[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||
## 2.4.2-20220421（2022-04-21）
|
||||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||
## 2.4.2-20220420（2022-04-20）
|
||||
## 重要！此版本uCharts新增了很多功能，修复了诸多已知问题
|
||||
- 秋云图表组件 新增onzoom开启双指缩放功能（仅uCharts），前提需要直角坐标系类图表类型，并且ontouch为true、opts.enableScroll为true，详见实例项目K线图
|
||||
- 秋云图表组件 新增optsWatch是否监听opts变化，关闭optsWatch后，动态修改opts不会触发图表重绘
|
||||
- 秋云图表组件 修复开启canvas2d功能后，动态更新数据后画布闪动的bug
|
||||
- 秋云图表组件 去除directory属性，改为自动获取echarts.min.js路径（升级不受影响）
|
||||
- 秋云图表组件 增加getImage()方法及@getImage事件，通过ref调用getImage()方法获，触发@getImage事件获取当前画布的base64图片文件流。
|
||||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||
- 秋云图表组件 新增加【非uniCloud】版本组件，避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题，请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)，或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||
- uCharts.js 新增山峰图type="mount"，数据格式为饼图类格式，不需要传入categories，具体详见新版官网在线演示
|
||||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts)，方便格式化时有更多参数可用
|
||||
- uCharts.js 标记线功能增加labelText自定义显示文字，增加labelAlign标签显示位置（左侧或右侧），增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||
- uCharts.js 修复X轴开启disabled后，X轴仍占用空间的bug
|
||||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后，X轴文字与滚动条重叠的bug
|
||||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度，取值范围(-90至90)
|
||||
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||
- uCharts.js 修复当opts.padding上边距为0时，Y轴顶部刻度标签位置不正确的bug
|
||||
|
||||
## 另外我们还开发了各大原生小程序组件，已发布至码云和npm
|
||||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||
|
||||
## 对于原生uCharts文档我们已上线新版官方网站，详情点击下面链接进入官网
|
||||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||
## 2.3.7-20220122（2022-01-22）
|
||||
## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118（2022-01-18）
|
||||
## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
|
||||
## 2.3.67-20220118（2022-01-18）
|
||||
- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
|
||||
1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
|
||||
2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
|
||||
## 2.3.6-20220111（2022-01-11）
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201（2021-12-01）
|
||||
- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014（2021-10-15）
|
||||
- uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
|
||||
## 2.3.4-20211012（2021-10-12）
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706（2021-07-06）
|
||||
- uCharts.js 增加雷达图开启数据点值（opts.dataLabel）的显示
|
||||
## 2.3.2-20210627（2021-06-27）
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616（2021-06-16）
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时，当数值过大时不正确的bug
|
||||
## 2.3.0-20210612（2021-06-12）
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容，可在nvue项目中使用gcanvas组件渲染uCharts，[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性，是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数，以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法，详见showOptsTooltip方法
|
||||
## 2.2.1-20210603（2021-06-03）
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图，当起始角度不为0时，tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529（2021-05-29）
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524（2021-05-24）
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523（2021-05-23）
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702（2021-05-17）
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517（2021-05-17）
|
||||
- uCharts.js 修复Y轴自定义min和max时，未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516（2021-05-16）
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时，清空series显示loading图标后再显示图表，图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后，x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513（2021-05-13）
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法，支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言，如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时，原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category（x轴对应点位）标题的功能，opts.extra.tooltip.showCategory，默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时，tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条，图表在拖动中动态打点，滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式，series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后，@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新（数据动态打点）的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509（2021-05-09）
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509（2021-05-09）
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行，支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found：Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507（2021-05-07）
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506（2021-05-06）
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用，无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图（type="tline"）、时间轴区域图（type="tarea"）、散点图（type="scatter"）、气泡图demo（type="bubble"）、倒三角形漏斗图（opts.extra.funnel.type="triangle"）、金字塔形漏斗图（opts.extra.funnel.type="pyramid"）
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例，只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例，其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴（时间轴）情况下，点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法（原生uCharts.js用法请使用formatter）
|
||||
- uCharts.js 增加 漏斗图扩展配置，倒三角形（opts.extra.funnel.type="triangle"），金字塔形（opts.extra.funnel.type="pyramid"）
|
||||
- uCharts.js 增加 散点图（opts.type="scatter"）、气泡图（opts.type="bubble"）
|
||||
- 后期计划 完善散点图、气泡图，增加markPoints标记点，增加横向条状图。
|
||||
## 2.0.0-20210502（2021-05-02）
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501（2021-05-01）
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下，v-for循环使用图表，显示不正确的bug
|
||||
## 2.0.0-20210426（2021-04-26）
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数，柱状图类每个category点位（X轴点）柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数，仪表盘标签文字径向便宜距离，默认13px
|
||||
## 2.0.0-20210422-2（2021-04-22）
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422（2021-04-22）
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421（2021-04-21）
|
||||
- uCharts.js 修复多行图例的情况下，图例在上方或者下方时，图例float为左侧或者右侧时，第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420（2021-04-20）
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后，windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419（2021-04-19）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时，开启canvas2d后，未对应放大字体的bug
|
||||
## 2.0.0-20210418（2021-04-18）
|
||||
- 秋云图表组件 增加directory配置，修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416（2021-04-16）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415（2021-04-15）
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414（2021-04-14）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413（2021-04-13）
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时，@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2（2021-04-12）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX。如仍不好用，请重启电脑，此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图（条状图）的示例
|
||||
## 2.0.0-20210412（2021-04-12）
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别，改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411（2021-04-11）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能，详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created，变更type2d默认值为true，优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时，右侧图表点击坐标错误的bug，修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410（2021-04-10）
|
||||
- 修复左右布局时，右侧图表点击坐标错误的bug，修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409（2021-04-08）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug，修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408（2021-04-07）
|
||||
- 修复组件在支付宝小程序端不能显示的bug（目前支付宝小程不能点击交互，后续修复）
|
||||
- uCharts.js 修复高分屏下柱状图类，圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407（2021-04-06）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue