<view class="btn"> | <view class="btn"> | ||||
<submit-button title="登录" @submit="doLogin"></submit-button> | <submit-button title="登录" @submit="doLogin"></submit-button> | ||||
<button size="default" type="primary" class="ui-btn" open-type="getPhoneNumber" @getphonenumber="doLogin" | |||||
>登录</button> | |||||
</view> | </view> | ||||
<view class="agreement"> | <view class="agreement"> | ||||
import { reactive } from "vue"; | import { reactive } from "vue"; | ||||
import { checkStr, msg, navTo, subscribeMessages } from "@/utils/utils"; | import { checkStr, msg, navTo, subscribeMessages } from "@/utils/utils"; | ||||
import { onLoad, onUnload } from "@dcloudio/uni-app"; | import { onLoad, onUnload } from "@dcloudio/uni-app"; | ||||
import { login, loginCode, loginTime, wechatAppID } from "@/utils/network/api.js"; | |||||
import { login, loginCode, loginTime, wechatAppID,userBasicGetOpenId,userBasicGetPhoneNumber } from "@/utils/network/api.js"; | |||||
import { requestNew} from "@/utils/network/request.js"; | import { requestNew} from "@/utils/network/request.js"; | ||||
import { stringToJson } from "@/utils/network/encryption"; | import { stringToJson } from "@/utils/network/encryption"; | ||||
import { useUserStore } from "@/stores/user"; | import { useUserStore } from "@/stores/user"; | ||||
/* 登录 */ | /* 登录 */ | ||||
const doLogin = () => { | |||||
if (!state.username) { | |||||
msg("请输入手机号!"); | |||||
return; | |||||
} | |||||
if (state.loginType === "pwd" && !state.password) { | |||||
msg("请输入密码!"); | |||||
return; | |||||
} | |||||
if (state.loginType === "code" && !state.code) { | |||||
msg("请输入验证码!"); | |||||
return; | |||||
} | |||||
if (!checkStr(state.username, "mobile")) { | |||||
msg("请输入正确的手机号!"); | |||||
return; | |||||
} | |||||
if (!state.checked) { | |||||
msg("请勾选我已阅读并同意《平台用户服务隐私协议》"); | |||||
return; | |||||
} | |||||
const doLogin = (e) => { | |||||
// if (!state.username) { | |||||
// msg("请输入手机号!"); | |||||
// return; | |||||
// } | |||||
// if (state.loginType === "pwd" && !state.password) { | |||||
// msg("请输入密码!"); | |||||
// return; | |||||
// } | |||||
// if (state.loginType === "code" && !state.code) { | |||||
// msg("请输入验证码!"); | |||||
// return; | |||||
// } | |||||
// if (!checkStr(state.username, "mobile")) { | |||||
// msg("请输入正确的手机号!"); | |||||
// return; | |||||
// } | |||||
// if (!state.checked) { | |||||
// msg("请勾选我已阅读并同意《平台用户服务隐私协议》"); | |||||
// return; | |||||
// } | |||||
console.log("e",e) | |||||
//判断是验证码登录,还是账号密码登录 | //判断是验证码登录,还是账号密码登录 | ||||
if (state.loginType === "code") { | |||||
reqLogin(loginCode, { | |||||
mobile: state.username, | |||||
code: state.code, | |||||
loginTime: loginTime, | |||||
}); | |||||
} else { | |||||
reqLogin(login, { | |||||
mobile: state.username, | |||||
password: state.password, | |||||
loginTime: loginTime, | |||||
// if (state.loginType === "code") { | |||||
// reqLogin(loginCode, { | |||||
// mobile: state.username, | |||||
// code: state.code, | |||||
// loginTime: loginTime, | |||||
// }); | |||||
// } else { | |||||
// reqLogin(login, { | |||||
// mobile: state.username, | |||||
// password: state.password, | |||||
// loginTime: loginTime, | |||||
// }); | |||||
// } | |||||
reqLogin(userBasicGetPhoneNumber, { | |||||
jsCode: e.detail.code, | |||||
iv: e.detail.iv, | |||||
encryptedData: e.detail.encryptedData, | |||||
}); | }); | ||||
} | |||||
}; | }; | ||||
/* 执行登录 */ | /* 执行登录 */ | ||||
}); | }); | ||||
}); | }); | ||||
}; | }; | ||||
const decryptPhoneNumber=(e)=>{ | |||||
console.log("e",e) | |||||
} | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> |
if ( | if ( | ||||
prefixName == "WJ" || | prefixName == "WJ" || | ||||
prefixName == "JL" || | prefixName == "JL" || | ||||
prefixName == "BY" || | |||||
prefixName == "JY" || | prefixName == "JY" || | ||||
prefixName == "AT" || | prefixName == "AT" || | ||||
prefixName == "JT" || | prefixName == "JT" || | ||||
case "JL": | case "JL": | ||||
_name = "聚利"; | _name = "聚利"; | ||||
break; | break; | ||||
case "BY": | |||||
_name = "宝溢"; | |||||
case "JY": | case "JY": | ||||
_name = "金溢"; | _name = "金溢"; | ||||
break; | break; | ||||
} | } | ||||
); | ); | ||||
break; | break; | ||||
case "BY": | |||||
// 宝溢用金溢sdk | |||||
jyApi.connectDevice( | |||||
device, | |||||
function (res) { | |||||
console.log('设备链接1', res) | |||||
connectSuccess(res); | |||||
}, | |||||
function (res) { | |||||
console.log('设备链接2', res) | |||||
listenStatus(res); | |||||
} | |||||
); | |||||
break; | |||||
case "JY": | case "JY": | ||||
jyApi.connectDevice( | jyApi.connectDevice( | ||||
device, | device, |
queryKey, | queryKey, | ||||
querySwiper, | querySwiper, | ||||
infoQuery, | infoQuery, | ||||
queryHighMsg | |||||
queryHighMsg, | |||||
orderQuery | |||||
} from "@/utils/network/api.js"; | } from "@/utils/network/api.js"; | ||||
import { | import { | ||||
duration: 500, | duration: 500, | ||||
easing: "default" | easing: "default" | ||||
}) | }) | ||||
const query = () => { | |||||
const options = { | |||||
type: 2, | |||||
data: {}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
requestNew(orderQuery, options).then((res) => { | |||||
console.log("擦寻", res,) | |||||
if(res.vehicPlateOrderList.length>0){ | |||||
uni.showModal({ | |||||
title: '提示', | |||||
content: '有未完成的线下渠道订单,是否继续办理', | |||||
success: function (res) { | |||||
if (res.confirm) { | |||||
console.log('用户点击确定'); | |||||
navTo('/subpackage/orders/transfer-page-sign') | |||||
} else if (res.cancel) { | |||||
console.log('用户点击取消'); | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
}) | |||||
} | |||||
onLoad((options) => { | onLoad((options) => { | ||||
console.log("wechatSignNo", options) | console.log("wechatSignNo", options) | ||||
getInfo(); | getInfo(); | ||||
// 订单查询 | |||||
if (hasLogin()) { | |||||
query() | |||||
} | |||||
}) | }) | ||||
const cancle=(val)=>{ | const cancle=(val)=>{ | ||||
state.showTips=val | state.showTips=val |
</view> | </view> | ||||
</view> | </view> | ||||
<!-- 激活成功popup --> | <!-- 激活成功popup --> | ||||
<u-popup v-model="state.showPopup" mode="center"> | |||||
<active-success @cancel="state.showPopup = false"></active-success> | |||||
</u-popup> | |||||
<view v-if="state.showPopup" class="mask"> | |||||
<piaoyi-progress-bar canvasId="progressCanvas4" :progress="state.progressNum" | |||||
progressBackgroundColor="#07C160" :showText="true" textColor="#fff" :textSize="28" :height="22" | |||||
:isCircular="true" :diameter="300"></piaoyi-progress-bar> | |||||
</view> | |||||
</template> | </template> | ||||
<script setup> | <script setup> | ||||
showPopup: false, | showPopup: false, | ||||
transfer: 0, //0 是原来的激活 1 是过户激活 | transfer: 0, //0 是原来的激活 1 是过户激活 | ||||
showBtn: true, | showBtn: true, | ||||
disabled: true | |||||
disabled: true, | |||||
progressNum:0 | |||||
}) | }) | ||||
onLoad((option) => { | onLoad((option) => { | ||||
vehicleClassStr: "" | vehicleClassStr: "" | ||||
}); | }); | ||||
function cmdResult1() { | function cmdResult1() { | ||||
tools.showLoadingAlert('正在激活,请等待') | |||||
// tools.showLoadingAlert('正在激活,请等待') | |||||
const options = { | const options = { | ||||
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | ||||
showLoading: false, | showLoading: false, | ||||
console.log("err",err) | console.log("err",err) | ||||
errorLog(datas.cmd,JSON.stringify(err),datas.stepNo) | errorLog(datas.cmd,JSON.stringify(err),datas.stepNo) | ||||
tools.hideLoadingAlert(); | tools.hideLoadingAlert(); | ||||
state.showPopup=false | |||||
}); | }); | ||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
console.log(err); | console.log(err); | ||||
tools.hideLoadingAlert(); | tools.hideLoadingAlert(); | ||||
state.showPopup=false | |||||
}); | }); | ||||
} | } | ||||
function implementCmd(transOrderId, cmd, cmdResult, stepNo) { | function implementCmd(transOrderId, cmd, cmdResult, stepNo) { | ||||
state.progressNum=state.progressNum+5 | |||||
const options = { | const options = { | ||||
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | ||||
showLoading: false, | showLoading: false, | ||||
if (datas.stepNo == 100) { | if (datas.stepNo == 100) { | ||||
state.disabled = true | state.disabled = true | ||||
tools.hideLoadingAlert(); | tools.hideLoadingAlert(); | ||||
msg("激活成功", { | |||||
'icon': 'success', | |||||
'duration': 3000 | |||||
}) | |||||
state.progressNum=100 | |||||
// msg("激活成功", { | |||||
// 'icon': 'success', | |||||
// 'duration': 3000 | |||||
// }) | |||||
setTimeout(() => { | setTimeout(() => { | ||||
state.showPopup=false | |||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: "/subpackage/after-sale/deviceInfo/deviceInfo", | url: "/subpackage/after-sale/deviceInfo/deviceInfo", | ||||
}); | }); | ||||
}, 3000) | |||||
},2000) | |||||
} else { | } else { | ||||
console.log("datas.stepNo", datas.stepNo) | console.log("datas.stepNo", datas.stepNo) | ||||
bluetoothUtil.transCmd(datas.cmd.split(','), datas.cmdType == 'CARD' ? '10' : '20', function(res) { | bluetoothUtil.transCmd(datas.cmd.split(','), datas.cmdType == 'CARD' ? '10' : '20', function(res) { | ||||
implementCmd(transOrderId, datas.cmd, res.toString(), datas.stepNo) | implementCmd(transOrderId, datas.cmd, res.toString(), datas.stepNo) | ||||
}, (err) => { | }, (err) => { | ||||
console.log("err",err) | console.log("err",err) | ||||
state.showPopup=false | |||||
errorLog(datas.cmd,JSON.stringify(err),datas.stepNo) | errorLog(datas.cmd,JSON.stringify(err),datas.stepNo) | ||||
showModals('在线激活异常') | showModals('在线激活异常') | ||||
}); | }); | ||||
.catch((err) => { | .catch((err) => { | ||||
console.log(err); | console.log(err); | ||||
tools.hideLoadingAlert(); | tools.hideLoadingAlert(); | ||||
state.showPopup=false | |||||
}); | }); | ||||
} | } | ||||
//开始激活 按钮事件 | //开始激活 按钮事件 | ||||
const btn = () => { | const btn = () => { | ||||
state.disabled = false | state.disabled = false | ||||
state.showPopup=true | |||||
console.log('orderInfo参数', orderInfo, state.disabled) | console.log('orderInfo参数', orderInfo, state.disabled) | ||||
cmdResult1() | cmdResult1() | ||||
}; | }; | ||||
font-size: 34rpx; | font-size: 34rpx; | ||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
} | } | ||||
.mask{ | |||||
width: 100%; | |||||
height:100vh; | |||||
background:rgba(0,0,0,0.63); | |||||
position: fixed; | |||||
left: 0; | |||||
top: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
z-index: 999; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
</style> | </style> |
}); | }); | ||||
} | } | ||||
onShow(()=>{ | onShow(()=>{ | ||||
// 支付完跳转到广告页,回来再次查询跳转 | |||||
// 支付完跳转到广告页,回来再次查询跳转 (签约完回来也要查询) | |||||
if(state.payOK){ | if(state.payOK){ | ||||
refreshFirst() | refreshFirst() | ||||
} | } | ||||
extraData: {}, | extraData: {}, | ||||
envVersion:'trial', | envVersion:'trial', | ||||
success(res) { | success(res) { | ||||
state.payOK=true | |||||
console.log(res); | console.log(res); | ||||
}, | }, | ||||
complete(res) { | complete(res) { | ||||
if(state.cardType=='1'){ | if(state.cardType=='1'){ | ||||
if(state.qtSign=='0'){ | if(state.qtSign=='0'){ | ||||
if(state.qdSignAppId){ | if(state.qdSignAppId){ | ||||
// 去外边签约 | |||||
uni.navigateToMiniProgram({ | uni.navigateToMiniProgram({ | ||||
appId: state.qdSignAppId, | appId: state.qdSignAppId, | ||||
path: state.qdSignUrl, | path: state.qdSignUrl, | ||||
extraData: {}, | extraData: {}, | ||||
envVersion:'trial', | envVersion:'trial', | ||||
success(res) { | success(res) { | ||||
state.payOK=true | |||||
console.log(res); | console.log(res); | ||||
}, | }, | ||||
complete(res) { | complete(res) { |
## 1.0.1(2023-09-19) | |||||
改为uni_modules规范 |
<template> | |||||
<view class="progress-bar" :style="'min-height:' + height + 'rpx'"> | |||||
<view v-if="!isCircular" class="progress-bar-bg" | |||||
:style="{ backgroundColor: backgroundColor, height: height + 'rpx' }"></view> | |||||
<view v-if="!isCircular" class="progress-bar-inner" | |||||
:style="{ width: progress + '%', backgroundColor: progressBackgroundColor, height: height + 'rpx' }"> | |||||
<view v-if="showText" class="progress-bar-text" :style="{ color: textColor, fontSize: textSize + 'rpx' }"> | |||||
{{ progress + '%' }} | |||||
</view> | |||||
</view> | |||||
<view v-if="isCircular" class="progress-bar-circular" | |||||
:style="{ width: diameter + 'rpx', height: diameter + 'rpx' }"> | |||||
<canvas :canvas-id="canvasId" :style="{ width: diameter + 'rpx', height: diameter + 'rpx',background:'rgba(0,0,0,0)' }"></canvas> | |||||
<view v-if="showText" class="progress-bar-text" :style="{ color: textColor, fontSize: textSize + 'rpx' }"> | |||||
{{ progress + '%' }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
screenWidth: 0, // 屏幕宽度 | |||||
} | |||||
}, | |||||
props: { | |||||
progress: { | |||||
type: Number, | |||||
required: true, | |||||
validator(value) { | |||||
// 自定义验证函数,限制范围为 0 到 100 | |||||
return value >= 0 && value <= 100; | |||||
} | |||||
}, | |||||
backgroundColor: { | |||||
type: String, | |||||
default: '#EFEFF4' | |||||
}, | |||||
progressBackgroundColor: { | |||||
type: String, | |||||
default: '#07C160' | |||||
}, | |||||
showText: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
textColor: { | |||||
type: String, | |||||
default: '#000000' | |||||
}, | |||||
textSize: { | |||||
type: Number, | |||||
default: 28 | |||||
}, | |||||
height: { | |||||
type: Number, | |||||
default: 20 | |||||
}, | |||||
isCircular: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
diameter: { | |||||
type: Number, | |||||
default: 100 | |||||
}, | |||||
canvasId: { | |||||
type: String, | |||||
default: 'canvasId' | |||||
} | |||||
}, | |||||
mounted() { | |||||
// 获取设备信息 | |||||
uni.getSystemInfo({ | |||||
success: (res) => { | |||||
this.screenWidth = res.screenWidth; | |||||
if (this.isCircular) { | |||||
this.drawCircularProgress(); | |||||
} | |||||
} | |||||
}); | |||||
}, | |||||
watch: { | |||||
progress: function(val) { | |||||
console.log(val) | |||||
if (this.isCircular) { | |||||
this.drawCircularProgress(); | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
drawCircularProgress() { | |||||
const canvas = uni.createCanvasContext(this.canvasId, this); | |||||
const radius = (this.rpxToPx(this.diameter) - this.rpxToPx(this.height)) / | |||||
2; // Subtracting 10 to leave space for the border | |||||
const startAngle = -Math.PI / 2; | |||||
const endAngle = (2 * Math.PI * this.progress) / 100 + startAngle; | |||||
// Draw background circle | |||||
canvas.setLineWidth(this.rpxToPx(this.height)); | |||||
canvas.setStrokeStyle(this.backgroundColor); | |||||
canvas.beginPath(); | |||||
canvas.arc(this.rpxToPx(this.diameter) / 2, this.rpxToPx(this.diameter) / 2, radius, 0, 2 * Math.PI); | |||||
canvas.stroke(); | |||||
// Draw progress arc | |||||
canvas.setLineWidth(this.rpxToPx(this.height)); | |||||
canvas.setStrokeStyle(this.progressBackgroundColor); | |||||
canvas.beginPath(); | |||||
canvas.arc(this.rpxToPx(this.diameter) / 2, this.rpxToPx(this.diameter) / 2, radius, startAngle, endAngle, | |||||
false); | |||||
canvas.stroke(); | |||||
canvas.draw(); | |||||
}, | |||||
rpxToPx(rpx) { | |||||
// 计算像素值 | |||||
const px = (rpx / 750) * this.screenWidth | |||||
return px; | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.progress-bar { | |||||
position: relative; | |||||
} | |||||
.progress-bar-bg { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
border-radius: 10rpx; | |||||
} | |||||
.progress-bar-inner { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
border-radius: 10rpx; | |||||
transition: width 0.3s ease-in-out; | |||||
} | |||||
.progress-bar-circular { | |||||
position: relative; | |||||
} | |||||
.progress-bar-text { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
} | |||||
</style> |
{ | |||||
"id": "piaoyi-progress-bar", | |||||
"name": "piaoyi进度条", | |||||
"displayName": "piaoyi进度条", | |||||
"version": "1.0.1", | |||||
"description": "进度条 可设置环状 开箱即用", | |||||
"keywords": [ | |||||
"进度条", | |||||
"可设置环状", | |||||
"开箱即用" | |||||
], | |||||
"dcloudext": { | |||||
"type": "component-vue" | |||||
} | |||||
} |
### piaoyi-progress-bar 进度条 | |||||
**使用方法:** | |||||
正常进度条 | |||||
``` | |||||
<piaoyiProgressBar :progress="50" backgroundColor="#EFEFF4" progressBackgroundColor="#07C160" :showText="true" | |||||
textColor="#fff" :textSize="24" :height="20"></piaoyiProgressBar> | |||||
<view class="bg"> | |||||
``` | |||||
环状进度条 | |||||
``` | |||||
<piaoyiProgressBar canvasId="progressCanvas4" :progress="75" backgroundColor="#EFEFF4" | |||||
progressBackgroundColor="#07C160" :showText="true" textColor="#000000" :textSize="24" :height="20" | |||||
:isCircular="true" :diameter="200"></piaoyiProgressBar> | |||||
<view class="bg"> | |||||
``` | |||||
``` | |||||
import piaoyiProgressBar from '@/uni_modules/piaoyi-progress-bar/components/piaoyi-progress-bar/piaoyi-progress-bar.vue'; | |||||
export default { | |||||
components: { | |||||
piaoyiProgressBar | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
``` | |||||
#### 事件说明 | |||||
无 | |||||
#### Prop | |||||
| 参数名称 | 描述 | 默认值 | | |||||
| -------- | ------------------------------ | ------------------------------ | | |||||
| progress | 进度值 | 空(范围:0-100) | | |||||
| backgroundColor | 背景色 | #EFEFF4 | | |||||
| progressBackgroundColor | 进度背景色 | #07C160 | | |||||
| showText | 是否显示文本 | true | | |||||
| textColor | 文本颜色 | #000000 | | |||||
| textSize | 文本大小 | 24 | | |||||
| height | 进度条线条宽度 | 20 | | |||||
| diameter | 进度条整体大小 | 200 | | |||||
| isCircular | 是否显示环状 | false | | |||||
| canvasId | isCircular为true时必传,一个页面使用多个需要定义不同的canvasId | canvasId | | |||||
### 可接定制化组件开发 | |||||
### 右侧有本人代表作小程序二维码,可以扫码体验 | |||||
### 如使用过程中有问题或有一些好的建议,欢迎加QQ群互相学习交流:120594820 |
// 自助工单 | // 自助工单 | ||||
export const selfServiceUserAdd = "/iaw/selfService/userAdd" //用户提交 - 新增 | export const selfServiceUserAdd = "/iaw/selfService/userAdd" //用户提交 - 新增 | ||||
export const errorLogAdd = "/iaw/api/active/errorLog/add" //新增错误信息 | |||||
export const errorLogAdd = "/iaw/api/active/errorLog/add" //新增错误信息 | |||||
export const userBasicGetOpenId = "/iaw/issue/userBasic/getOpenId" //一键登录 | |||||
export const userBasicGetPhoneNumber = "/iaw/issue/userBasic/getPhoneNumber" //code换手机号的接口 |