调整部分样式
This commit is contained in:
dftre
parent
df252d049e
commit
2e05794a09
@ -1,90 +1,78 @@
|
||||
# uni-app 二维码生成器
|
||||
|
||||
改自作者诗小柒的tki-qrcode二维码生成器
|
||||
|
||||
### 作者：董玉可
|
||||
|
||||
1. H5、微信小程序、支付宝小程序、APP，其它平台的小程序没有测试
|
||||
2. 使用canvas生成
|
||||
3. 可设置二维码背景色，前景色，角标色
|
||||
4. 可设置二维码logo
|
||||
|
||||
## 重要的事情说3遍 重要的事情说3遍 重要的事情说3遍
|
||||
|
||||
1. IOS、Android真机都可以正常生成二维码
|
||||
2. 使用的时候出现无法生成二维码或空白的请先github直接打包下载，问题依旧，请github上直接提出问题并配图
|
||||
3. 有问题请说明问题原因，这样我才好定位，否则我也无法解决
|
||||
4. 如果此插件有帮助到你请打5分或赞赏我，你的支持是我更新的动力
|
||||
|
||||
+ 图片1 是微信小程序真机实测
|
||||
+ 图片2 是微信小程序模拟实测
|
||||
+ 图片3 是支付宝小程序模拟器实测
|
||||
+ 图片4 是安卓真机实测
|
||||
+ 图片5 H5
|
||||
|
||||
### 使用方法
|
||||
|
||||
在 `template` 中使用
|
||||
|
||||
```javascript
|
||||
<view class="qrimg">
|
||||
<geek-qrcode
|
||||
ref="qrcode"
|
||||
:cid="cid"
|
||||
:val="val"
|
||||
:size="size"
|
||||
:unit="unit"
|
||||
:background="background"
|
||||
:foreground="foreground"
|
||||
:pdground="pdground"
|
||||
:icon="icon"
|
||||
:iconSize="iconsize"
|
||||
:lv="lv"
|
||||
:onval="onval"
|
||||
:loadMake="loadMake"
|
||||
:usingComponents="usingComponents"
|
||||
:showLoading="showLoading"
|
||||
:loadingText="loadingText"
|
||||
@result="qrR" />
|
||||
</view>
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| :-------------- | :-----: | :---------------: | :----: | :-------------------------------------------------------------------------------------------------- |
|
||||
| cid | String | tki-qrcode-canvas | | canvasId，页面存在多个二维码组件时需设置不同的ID |
|
||||
| size | Number | 200 | | 生成的二维码大小 |
|
||||
| unit | String | upx | px | 大小单位尺寸 |
|
||||
| show | Boolean | true | | 默认使用组件中的image标签显示二维码 |
|
||||
| val | String | 二维码 | | 要生成的内容 |
|
||||
| background | String | #000000 | | 二维码背景色 |
|
||||
| foreground | String | #ffffff | | 二维码前景色 |
|
||||
| pdground | String | #ffffff | | 二维码角标色 |
|
||||
| icon | String | | | 二维码图标URL（必须是本地图片，网络图需要先下载至本地） |
|
||||
| iconSize | Number | 40 | | 二维码图标大小（注意此大小不会跟随二维码size 动态变化，设置时需要注意大小，不要太大，以免无法识别） |
|
||||
| lv | Number | 3 | | 容错级别（一般不用设置） |
|
||||
| onval | Boolean | false | | 监听val值变化自动重新生成二维码 |
|
||||
| loadMake | Boolean | false | | 组件初始化完成后自动生成二维码，val需要有值 |
|
||||
| usingComponents | Boolean | true | false | 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题） |
|
||||
| showLoading | Boolean | true | false | 是否显示loading |
|
||||
| loadingText | String | 二维码生成中 | | loading文字 |
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 默认值 | 说明 |
|
||||
| :----------- | :--: | :----: | :-------------------------------------------------- |
|
||||
| _makeCode() | | | 生成二维码 |
|
||||
| _clearCode() | | | 清空二维码（清空二维码会触发result回调 返回值为空） |
|
||||
| _saveCode() | | | 保存二维码到图库 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 返回值 | 说明 |
|
||||
| :----- | :----------------------------: | --------------------------------------: |
|
||||
| result | 生成的图片base64或图片临时地址 | 返回二维码路径 注：_clearCode()后返回空 |
|
||||
|
||||
### 感谢
|
||||
|
||||
[uni-app](https://uniapp.dcloud.io/ "uni-app")
|
||||
[qrcode](https://github.com/aralejs/qrcode "qrcode")
|
||||
# uni-app 二维码生成器
|
||||
|
||||
改自作者诗小柒的tki-qrcode二维码生成器
|
||||
|
||||
### 作者：Dftre
|
||||
|
||||
1. H5、微信小程序、支付宝小程序、APP，其它平台的小程序没有测试
|
||||
2. 使用canvas生成
|
||||
3. 可设置二维码背景色，前景色，角标色
|
||||
4. 可设置二维码logo
|
||||
|
||||
### 使用方法
|
||||
|
||||
在 `template` 中使用
|
||||
|
||||
```javascript
|
||||
<view class="qrimg">
|
||||
<geek-qrcode
|
||||
ref="qrcode"
|
||||
:cid="cid"
|
||||
:val="val"
|
||||
:size="size"
|
||||
:unit="unit"
|
||||
:background="background"
|
||||
:foreground="foreground"
|
||||
:pdground="pdground"
|
||||
:icon="icon"
|
||||
:iconSize="iconsize"
|
||||
:lv="lv"
|
||||
:onval="onval"
|
||||
:loadMake="loadMake"
|
||||
:usingComponents="usingComponents"
|
||||
:showLoading="showLoading"
|
||||
:loadingText="loadingText"
|
||||
@result="qrR" />
|
||||
</view>
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| :-------------- | :-----: | :---------------: | :----: | :-------------------------------------------------------------------------------------------------- |
|
||||
| cid | String | tki-qrcode-canvas | | canvasId，页面存在多个二维码组件时需设置不同的ID |
|
||||
| size | Number | 200 | | 生成的二维码大小 |
|
||||
| unit | String | upx | px | 大小单位尺寸 |
|
||||
| show | Boolean | true | | 默认使用组件中的image标签显示二维码 |
|
||||
| val | String | 二维码 | | 要生成的内容 |
|
||||
| background | String | #000000 | | 二维码背景色 |
|
||||
| foreground | String | #ffffff | | 二维码前景色 |
|
||||
| pdground | String | #ffffff | | 二维码角标色 |
|
||||
| icon | String | | | 二维码图标URL（必须是本地图片，网络图需要先下载至本地） |
|
||||
| iconSize | Number | 40 | | 二维码图标大小（注意此大小不会跟随二维码size 动态变化，设置时需要注意大小，不要太大，以免无法识别） |
|
||||
| lv | Number | 3 | | 容错级别（一般不用设置） |
|
||||
| onval | Boolean | false | | 监听val值变化自动重新生成二维码 |
|
||||
| loadMake | Boolean | false | | 组件初始化完成后自动生成二维码，val需要有值 |
|
||||
| usingComponents | Boolean | true | false | 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题） |
|
||||
| showLoading | Boolean | true | false | 是否显示loading |
|
||||
| loadingText | String | 二维码生成中 | | loading文字 |
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 默认值 | 说明 |
|
||||
| :----------- | :--: | :----: | :-------------------------------------------------- |
|
||||
| _makeCode() | | | 生成二维码 |
|
||||
| _clearCode() | | | 清空二维码（清空二维码会触发result回调 返回值为空） |
|
||||
| _saveCode() | | | 保存二维码到图库 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 返回值 | 说明 |
|
||||
| :----- | :----------------------------: | --------------------------------------: |
|
||||
| result | 生成的图片base64或图片临时地址 | 返回二维码路径 注：_clearCode()后返回空 |
|
||||
|
||||
### 感谢
|
||||
|
||||
[uni-app](https://uniapp.dcloud.io/ "uni-app")
|
||||
[qrcode](https://github.com/aralejs/qrcode "qrcode")
|
||||
tki-qrcode
|
||||
|
||||
@ -1,205 +1,205 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="geek-qrcode">
|
||||
<canvas class="geek-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "geek-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'geek-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.geek-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.geek-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="geek-qrcode">
|
||||
<canvas class="geek-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "geek-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'geek-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.geek-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.geek-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,75 +1,73 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title"> RuoYi-Geek-App</text>
|
||||
</view>
|
||||
<view class="text-area">
|
||||
<up-text type="primary" text="uview-plus"></up-text>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const chartData = ref({});
|
||||
|
||||
onMounted(() => { getServerData() });
|
||||
|
||||
function getServerData() {
|
||||
// 模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
let res = {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||
series: [
|
||||
{
|
||||
name: '目标值',
|
||||
data: [35, 36, 31, 33, 13, 34],
|
||||
},
|
||||
{
|
||||
name: '完成量',
|
||||
data: [18, 27, 21, 24, 6, 28],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const chartData = ref({});
|
||||
|
||||
onMounted(() => { getServerData() });
|
||||
|
||||
function getServerData() {
|
||||
// 模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
let res = {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||
series: [
|
||||
{
|
||||
name: '目标值',
|
||||
data: [35, 36, 31, 33, 13, 34],
|
||||
},
|
||||
{
|
||||
name: '完成量',
|
||||
data: [18, 27, 21, 24, 6, 28],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title"> RuoYi-Geek-App</text>
|
||||
</view>
|
||||
<view class="text-area">
|
||||
<up-text type="primary" text="uview-plus"></up-text>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,208 +1,206 @@
|
||||
<template>
|
||||
<view class="normal-login-container">
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">若依移动端登录</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn">
|
||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xieyi text-center">
|
||||
<text class="text-grey1">登录即代表同意</text>
|
||||
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
||||
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import modal from '@/plugins/modal'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import { ref } from "vue";
|
||||
import config from '@/config.js'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { getWxCode } from '@/utils/geek';
|
||||
import { wxLogin } from '@/api/oauth';
|
||||
import { setToken } from '@/utils/auth';
|
||||
const userStore = useUserStore()
|
||||
const codeUrl = ref("");
|
||||
const captchaEnabled = ref(true); // 是否开启验证码
|
||||
const useWxLogin = ref(false); // 是否使用微信登录
|
||||
const globalConfig = ref(config);
|
||||
const loginForm = ref({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ''
|
||||
});
|
||||
|
||||
if (useWxLogin.value) {
|
||||
getWxCode().then(res => {
|
||||
console.log(res);
|
||||
wxLogin('miniapp',res).then(res => {
|
||||
if(res.token != null){
|
||||
setToken(res.token);
|
||||
loginSuccess()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取图形验证码
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img
|
||||
loginForm.value.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
async function handleLogin() {
|
||||
if (loginForm.value.username === "") {
|
||||
modal.msgError("请输入您的账号")
|
||||
} else if (loginForm.value.password === "") {
|
||||
modal.msgError("请输入您的密码")
|
||||
} else if (loginForm.value.code === "" && captchaEnabled.value) {
|
||||
modal.msgError("请输入验证码")
|
||||
} else {
|
||||
modal.loading("登录中，请耐心等待...")
|
||||
pwdLogin()
|
||||
}
|
||||
};
|
||||
// 密码登录
|
||||
async function pwdLogin() {
|
||||
userStore.login(loginForm.value).then(() => {
|
||||
modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
if (captchaEnabled.value) {
|
||||
modal.closeLoading()
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
userStore.getInfo().then(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 隐私协议
|
||||
function handlePrivacy() {
|
||||
let site = globalConfig.value.appInfo.agreements[0];
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
// 用户协议
|
||||
function handleUserAgrement() {
|
||||
let site = globalConfig.value.appInfo.agreements[1]
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
|
||||
getCode();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-content {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
margin-top: 15%;
|
||||
width: 80%;
|
||||
|
||||
.input-item {
|
||||
margin: 20px auto;
|
||||
background-color: #f5f6f7;
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import modal from '@/plugins/modal'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import { ref } from "vue";
|
||||
import config from '@/config.js'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { getWxCode } from '@/utils/geek';
|
||||
import { wxLogin } from '@/api/oauth';
|
||||
import { setToken } from '@/utils/auth';
|
||||
const userStore = useUserStore()
|
||||
const codeUrl = ref("");
|
||||
const captchaEnabled = ref(true); // 是否开启验证码
|
||||
const useWxLogin = ref(false); // 是否使用微信登录
|
||||
const globalConfig = ref(config);
|
||||
const loginForm = ref({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ''
|
||||
});
|
||||
|
||||
if (useWxLogin.value) {
|
||||
getWxCode().then(res => {
|
||||
console.log(res);
|
||||
wxLogin('miniapp', res).then(res => {
|
||||
if (res.token != null) {
|
||||
setToken(res.token);
|
||||
loginSuccess()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取图形验证码
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img
|
||||
loginForm.value.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
async function handleLogin() {
|
||||
if (loginForm.value.username === "") {
|
||||
modal.msgError("请输入您的账号")
|
||||
} else if (loginForm.value.password === "") {
|
||||
modal.msgError("请输入您的密码")
|
||||
} else if (loginForm.value.code === "" && captchaEnabled.value) {
|
||||
modal.msgError("请输入验证码")
|
||||
} else {
|
||||
modal.loading("登录中，请耐心等待...")
|
||||
pwdLogin()
|
||||
}
|
||||
};
|
||||
// 密码登录
|
||||
async function pwdLogin() {
|
||||
userStore.login(loginForm.value).then(() => {
|
||||
modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
if (captchaEnabled.value) {
|
||||
modal.closeLoading()
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
userStore.getInfo().then(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 隐私协议
|
||||
function handlePrivacy() {
|
||||
let site = globalConfig.value.appInfo.agreements[0];
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
// 用户协议
|
||||
function handleUserAgrement() {
|
||||
let site = globalConfig.value.appInfo.agreements[1]
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
|
||||
getCode();
|
||||
</script>
|
||||
<template>
|
||||
<view class="normal-login-container">
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">若依移动端登录</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn">
|
||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xieyi text-center">
|
||||
<text class="text-grey1">登录即代表同意</text>
|
||||
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
||||
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-content {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
margin-top: 15%;
|
||||
width: 80%;
|
||||
|
||||
.input-item {
|
||||
margin: 20px auto;
|
||||
background-color: #f5f6f7;
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,97 +1,8 @@
|
||||
<template>
|
||||
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="header-section">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex align-center">
|
||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||
<view class="iconfont icon-people text-gray icon"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="user-info">
|
||||
<view class="u_title">
|
||||
用户名：{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex align-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="mine-actions grid col-4 text-center">
|
||||
<view class="action-item" @click="handleJiaoLiuQun">
|
||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||
<text class="text">交流群</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-service text-blue icon"></view>
|
||||
<text class="text">在线客服</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-community text-mauve icon"></view>
|
||||
<text class="text">反馈社区</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-dianzan text-green icon"></view>
|
||||
<text class="text">点赞我们</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-help menu-icon"></view>
|
||||
<view>常见问题</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>关于我们</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-setting menu-icon"></view>
|
||||
<view>应用设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
|
||||
title="通知" content="确定注销并退出系统吗"
|
||||
@confirm="dialogConfirm"
|
||||
@close="dialogClose">
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import config from '@/config.js'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
const name = userStore.name;
|
||||
const version = config.appInfo.version;
|
||||
|
||||
const avatar = ref(userStore.avatar);
|
||||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
|
||||
@ -169,8 +80,83 @@ function handleBuilding() {
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="header-section">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex align-center">
|
||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||
<view class="iconfont icon-people text-gray icon"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="user-info">
|
||||
<view class="u_title">
|
||||
用户名：{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex align-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<style lang="scss">
|
||||
<view class="content-section">
|
||||
<view class="mine-actions grid col-4 text-center">
|
||||
<view class="action-item" @click="handleJiaoLiuQun">
|
||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||
<text class="text">交流群</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-service text-blue icon"></view>
|
||||
<text class="text">在线客服</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-community text-mauve icon"></view>
|
||||
<text class="text">反馈社区</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-dianzan text-green icon"></view>
|
||||
<text class="text">点赞我们</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-help menu-icon"></view>
|
||||
<view>常见问题</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>关于我们</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-setting menu-icon"></view>
|
||||
<view>应用设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
@ -1,65 +1,48 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
|
||||
:key="index">
|
||||
<u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<template v-slot:icon>
|
||||
<image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from "./template.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: list,
|
||||
// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return '../static/uview/demo/' + path + '.png';
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
getGroupTitle(item) {
|
||||
return item.groupName
|
||||
},
|
||||
getFieldTitle(item) {
|
||||
return item.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import tab from "@/plugins/tab";
|
||||
import list from "./template.config.js";
|
||||
|
||||
interface ListItem {
|
||||
groupName: string;
|
||||
list: FieldItem[];
|
||||
}
|
||||
|
||||
interface FieldItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
const listData = list as ListItem[];
|
||||
const getIcon = (path: string) => `../static/uview/demo/${path}.png`;
|
||||
const openPage = (path: string) => tab.navigateTo(path)
|
||||
const getGroupTitle = (item: ListItem) => item.groupName;
|
||||
const getFieldTitle = (item: FieldItem) => item.title;
|
||||
</script>
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in listData"
|
||||
:key="index">
|
||||
<u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<template v-slot:icon>
|
||||
<image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
}
|
||||
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,184 +1,179 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import modal from "@/plugins/modal"
|
||||
const current=ref(0);
|
||||
const swiperDotIndex=ref(0);
|
||||
const data=ref([{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]);
|
||||
|
||||
function clickBannerItem(item) {
|
||||
console.info(item)
|
||||
};
|
||||
function changeSwiper(e) {
|
||||
current.value = e.detail.current
|
||||
}
|
||||
function changeGrid(e) {
|
||||
modal.showToast({
|
||||
title: '模块建设中',
|
||||
mask: false,
|
||||
icon:'loading',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import modal from "@/plugins/modal"
|
||||
const current = ref(0);
|
||||
const swiperDotIndex = ref(0);
|
||||
const data = ref([
|
||||
{ image: '/static/images/banner/banner01.jpg' },
|
||||
{ image: '/static/images/banner/banner02.jpg' },
|
||||
{ image: '/static/images/banner/banner03.jpg' }
|
||||
]);
|
||||
|
||||
function clickBannerItem(item) {
|
||||
console.info(item)
|
||||
};
|
||||
function changeSwiper(e) {
|
||||
current.value = e.detail.current
|
||||
}
|
||||
function changeGrid(e) {
|
||||
modal.showToast({
|
||||
title: '模块建设中',
|
||||
mask: false,
|
||||
icon: 'loading',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
136
src/pages_template/pages/coupon/components/jingdong-coupon.vue
Normal file
136
src/pages_template/pages/coupon/components/jingdong-coupon.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<view class="jingdong">
|
||||
<view class="left">
|
||||
<view class="sum">
|
||||
￥
|
||||
<text class="num">100</text>
|
||||
</view>
|
||||
<view class="type">满149元可用</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<text class="tag">限品类东券</text>
|
||||
<text>仅可购买个人护理部分商品</text>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="date u-line-1">2020.01.01-2020.01.31</view>
|
||||
<view class="immediate-use">立即使用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="explain">
|
||||
<u-icon name="zhuanfa" class="transpond" :size="24"></u-icon>
|
||||
<text>可赠送</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.jingdong {
|
||||
margin-top: 40rpx;
|
||||
width: 700rpx;
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding: 0 30rpx;
|
||||
background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.sum {
|
||||
margin-top: 50rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
.top {
|
||||
border-bottom: 2rpx dashed $u-border-color;
|
||||
|
||||
.title {
|
||||
margin-right: 60rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
.tag {
|
||||
padding: 4rpx 20rpx;
|
||||
background-color: rgb(73, 154, 201);
|
||||
border-radius: 20rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.date {
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.immediate-use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
border: 2rpx solid rgb(117, 142, 165);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
|
||||
.transpond {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.explain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.particulars {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-top: 8rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $u-info-disabled;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/pages_template/pages/coupon/components/meituan-coupon.vue
Normal file
127
src/pages_template/pages/coupon/components/meituan-coupon.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="meituan">
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<view class="sum">
|
||||
￥<text class="num">8</text>
|
||||
</view>
|
||||
<view class="type">抵用券</view>
|
||||
</view>
|
||||
<view class="centre">
|
||||
<view class="title">【洗牙】8元无门槛红包</view>
|
||||
<view class="valid-date">今日到期</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view size="mini" class="immediate-use" :round="true">立即使用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="circle-left"></view>
|
||||
<view class="circle-right"></view>
|
||||
<view class="explain u-line-1">满8.1元可用、限最新版本客户端使用</view>
|
||||
<view class="rule">
|
||||
<text>使用规则</text>
|
||||
<u-icon name="arrow-right" color="" :size="20" @click=""></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.meituan {
|
||||
margin: 30rpx auto;
|
||||
background-color: #ffffff;
|
||||
width: 700rpx;
|
||||
// border: 10rpx;
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80rpx 20rpx;
|
||||
border: 10rpx;
|
||||
background-color: #fff5f4;
|
||||
|
||||
.left {
|
||||
.sum {
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin-left: 40rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $u-main-color;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 30rpx;
|
||||
|
||||
.immediate-use {
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: $u-warning !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 0 20rpx;
|
||||
border: 10rpx;
|
||||
background-color: $u-info-light;
|
||||
position: relative;
|
||||
color: $u-tips-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.circle-left,
|
||||
.circle-right {
|
||||
position: absolute;
|
||||
height: 36rpx;
|
||||
width: 18rpx;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.circle-right {
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
right: 0;
|
||||
top: -18rpx;
|
||||
}
|
||||
|
||||
.circle-left {
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
left: 0;
|
||||
top: -18rpx;
|
||||
}
|
||||
|
||||
.rule {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
src/pages_template/pages/coupon/components/taobao-coupon.vue
Normal file
140
src/pages_template/pages/coupon/components/taobao-coupon.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import logo from '@/static/logo.png';
|
||||
</script>
|
||||
<template>
|
||||
<view class="taobao">
|
||||
<view class="title">
|
||||
<view class="left">
|
||||
<image class="buddha" :src="logo" mode="aspectFill"></image>
|
||||
<view class="store">袜子精保护协会</view>
|
||||
</view>
|
||||
<view class="entrance">进店</view>
|
||||
</view>
|
||||
<view class="ticket">
|
||||
<view class="left">
|
||||
<image class="picture" :src="logo" mode="widthFix"></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
￥
|
||||
<text class="big">3</text>
|
||||
满88减3
|
||||
</view>
|
||||
<view class="type">店铺优惠券</view>
|
||||
<view class="date u-line-1">2019.11.28-2020.1.24</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="use immediate-use" :round="true">去使用</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.taobao {
|
||||
margin-top: 40rpx;
|
||||
width: 700rpx;
|
||||
background-color: white;
|
||||
padding: 30rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.store {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.buddha {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.entrance {
|
||||
color: $u-info;
|
||||
border: solid 2rpx $u-info;
|
||||
line-height: 48rpx;
|
||||
padding: 0 30rpx;
|
||||
background: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
border-right: dashed 2rpx rgb(224, 215, 211);
|
||||
display: flex;
|
||||
|
||||
.picture {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
margin-left: 10rpx;
|
||||
|
||||
.top {
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
|
||||
.big {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 28rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30%;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff !important;
|
||||
background-color: $u-warning !important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,413 +1,23 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<view class="meituan">
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<view class="sum">
|
||||
￥
|
||||
<text class="num">8</text>
|
||||
</view>
|
||||
<view class="type">抵用券</view>
|
||||
</view>
|
||||
<view class="centre">
|
||||
<view class="title">【洗牙】8元无门槛红包</view>
|
||||
<view class="valid-date">今日到期</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view size="mini" class="immediate-use" :round="true">立即使用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="circle-left"></view>
|
||||
<view class="circle-right"></view>
|
||||
<view class="explain u-line-1">满8.1元可用、限最新版本客户端使用</view>
|
||||
<view class="rule" @tap="xxx122">
|
||||
<text>使用规则</text>
|
||||
<u-icon name="arrow-right" color="" :size="20" @click=""></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jingdong">
|
||||
<view class="left">
|
||||
<view class="sum">
|
||||
￥
|
||||
<text class="num">100</text>
|
||||
</view>
|
||||
<view class="type">满149元可用</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<text class="tag">限品类东券</text>
|
||||
<text>仅可购买个人护理部分商品</text>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="date u-line-1">2020.01.01-2020.01.31</view>
|
||||
<view class="immediate-use">立即使用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="explain">
|
||||
<u-icon name="zhuanfa" class="transpond" :size="24"></u-icon>
|
||||
<text>可赠送</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="taobao">
|
||||
<view class="title">
|
||||
<view class="left">
|
||||
<image class="buddha"
|
||||
src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg"
|
||||
mode="aspectFill"></image>
|
||||
<view class="store">袜子精保护协会</view>
|
||||
</view>
|
||||
<view class="entrance">进店</view>
|
||||
</view>
|
||||
<view class="ticket">
|
||||
<view class="left">
|
||||
<image class="picture"
|
||||
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"
|
||||
mode="widthFix"></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
￥
|
||||
<text class="big">3</text>
|
||||
满88减3
|
||||
</view>
|
||||
<view class="type">店铺优惠券</view>
|
||||
<view class="date u-line-1">2019.11.28-2020.1.24</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="use immediate-use" :round="true">去使用</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: rgb(244, 244, 244);
|
||||
}
|
||||
|
||||
.u-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.meituan {
|
||||
margin: 30rpx auto;
|
||||
background-color: #ffffff;
|
||||
width: 700rpx;
|
||||
// border: 10rpx;
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80rpx 20rpx;
|
||||
border: 10rpx;
|
||||
background-color: #fff5f4;
|
||||
|
||||
.left {
|
||||
.sum {
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin-left: 40rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: $u-main-color;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 30rpx;
|
||||
|
||||
.immediate-use {
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: $u-warning !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 0 20rpx;
|
||||
border: 10rpx;
|
||||
background-color: $u-info-light;
|
||||
position: relative;
|
||||
color: $u-tips-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.circle-left,
|
||||
.circle-right {
|
||||
position: absolute;
|
||||
height: 36rpx;
|
||||
width: 18rpx;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.circle-right {
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
right: 0;
|
||||
top: -18rpx;
|
||||
}
|
||||
|
||||
.circle-left {
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
left: 0;
|
||||
top: -18rpx;
|
||||
}
|
||||
|
||||
.rule {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jingdong {
|
||||
margin-top: 40rpx;
|
||||
width: 700rpx;
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
padding: 0 30rpx;
|
||||
background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.sum {
|
||||
margin-top: 50rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
||||
.num {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
.top {
|
||||
border-bottom: 2rpx dashed $u-border-color;
|
||||
|
||||
.title {
|
||||
margin-right: 60rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
.tag {
|
||||
padding: 4rpx 20rpx;
|
||||
background-color: rgb(73, 154, 201);
|
||||
border-radius: 20rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.date {
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.immediate-use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
border: 2rpx solid rgb(117, 142, 165);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
|
||||
.transpond {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.explain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.particulars {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-top: 8rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $u-info-disabled;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taobao {
|
||||
margin-top: 40rpx;
|
||||
width: 700rpx;
|
||||
background-color: white;
|
||||
padding: 30rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.store {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.buddha {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.entrance {
|
||||
color: $u-info;
|
||||
border: solid 2rpx $u-info;
|
||||
line-height: 48rpx;
|
||||
padding: 0 30rpx;
|
||||
background: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 70%;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
border-right: dashed 2rpx rgb(224, 215, 211);
|
||||
display: flex;
|
||||
|
||||
.picture {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
margin-left: 10rpx;
|
||||
|
||||
.top {
|
||||
color: $u-warning;
|
||||
font-size: 28rpx;
|
||||
|
||||
.big {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 28rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: $u-info-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30%;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff !important;
|
||||
background-color: $u-warning !important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import MeituanCoupon from './components/meituan-coupon.vue';
|
||||
import JingdongCoupon from './components/jingdong-coupon.vue';
|
||||
import TaobaoCoupon from './components/taobao-coupon.vue';
|
||||
</script>
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<MeituanCoupon />
|
||||
<JingdongCoupon />
|
||||
<TaobaoCoupon />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: rgb(244, 244, 244);
|
||||
}
|
||||
|
||||
.u-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,106 +1,99 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const show = ref(false)
|
||||
const password = ref('')
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const onChange = (val) => {
|
||||
if (password.value.length < 6) {
|
||||
password.value += val
|
||||
}
|
||||
|
||||
if (password.value.length >= 6) {
|
||||
pay()
|
||||
}
|
||||
}
|
||||
|
||||
const onBackspace = () => {
|
||||
if (password.value.length > 0) {
|
||||
password.value = password.value.substring(0, password.value.length - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const pay = () => {
|
||||
uni.showLoading({
|
||||
title: '支付中'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
show.value = false
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '支付成功'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const showPop = (flag = true) => {
|
||||
password.value = ''
|
||||
show.value = flag
|
||||
// #ifdef H5 || WEB
|
||||
setTimeout(() => {
|
||||
const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray')
|
||||
if (btn) {
|
||||
console.log(btn)
|
||||
btn.onclick = onBackspace
|
||||
}
|
||||
}, 500)
|
||||
// #endif
|
||||
}
|
||||
|
||||
const finish = () => {
|
||||
console.log(11111)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-padding-40">
|
||||
<u-button type="success" @click="showPop(true)">
|
||||
<u-icon name="red-packet"></u-icon>
|
||||
<text class="u-padding-left-10">发送1.00元红包</text>
|
||||
</u-button>
|
||||
</view>
|
||||
<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
|
||||
:show="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
|
||||
<view>
|
||||
<view class="u-text-center u-padding-20 money">
|
||||
<text>1.00</text>
|
||||
<text class="u-font-20 u-padding-left-10">元</text>
|
||||
<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
|
||||
<u-icon name="close" color="#333333" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
|
||||
:disabled-keyboard="true" @finish="finish"></u-message-input>
|
||||
</view>
|
||||
<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
|
||||
</view>
|
||||
</u-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.money {
|
||||
font-size: 80rpx;
|
||||
color: $u-warning;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
line-height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const show = ref(false)
|
||||
const password = ref('')
|
||||
|
||||
const onChange = (val) => {
|
||||
if (password.value.length < 6) {
|
||||
password.value += val
|
||||
}
|
||||
|
||||
if (password.value.length >= 6) {
|
||||
pay()
|
||||
}
|
||||
}
|
||||
|
||||
const onBackspace = () => {
|
||||
if (password.value.length > 0) {
|
||||
password.value = password.value.substring(0, password.value.length - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const pay = () => {
|
||||
uni.showLoading({ title: '支付中' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
show.value = false
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '支付成功'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const showPop = (flag = true) => {
|
||||
password.value = ''
|
||||
show.value = flag
|
||||
// #ifdef H5 || WEB
|
||||
setTimeout(() => {
|
||||
const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray')
|
||||
if (btn) {
|
||||
console.log(btn)
|
||||
btn.onclick = onBackspace
|
||||
}
|
||||
}, 500)
|
||||
// #endif
|
||||
}
|
||||
|
||||
const finish = () => {
|
||||
console.log(11111)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-padding-40">
|
||||
<u-button type="success" @click="showPop(true)">
|
||||
<u-icon name="red-packet"></u-icon>
|
||||
<text class="u-padding-left-10">发送1.00元红包</text>
|
||||
</u-button>
|
||||
</view>
|
||||
<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
|
||||
:show="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
|
||||
<view>
|
||||
<view class="u-text-center u-padding-20 money">
|
||||
<text>1.00</text>
|
||||
<text class="u-font-20 u-padding-left-10">元</text>
|
||||
<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
|
||||
<u-icon name="close" color="#333333" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
|
||||
:disabled-keyboard="true" @finish="finish"></u-message-input>
|
||||
</view>
|
||||
<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
|
||||
</view>
|
||||
</u-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.money {
|
||||
font-size: 80rpx;
|
||||
color: $u-warning;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
line-height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
</style>
|
||||
@ -1,90 +1,89 @@
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-13 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.font-11 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.text-grey1 {
|
||||
color: #888;
|
||||
}
|
||||
.text-grey2 {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.list-cell-arrow::before {
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c0c0c0;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
|
||||
.list-cell:first-child {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.list-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.menu-list {
|
||||
margin: 15px 15px;
|
||||
|
||||
.menu-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
color: #007AFF;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
margin-left: auto;
|
||||
margin-right: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-13 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.font-11 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.text-grey1 {
|
||||
color: #888;
|
||||
}
|
||||
.text-grey2 {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.list-cell-arrow::before {
|
||||
content: " ";
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c0c0c0;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
|
||||
.list-cell:first-child {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.list-cell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin: 15px 15px;
|
||||
|
||||
.menu-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
margin-left: auto;
|
||||
margin-right: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,88 +1,88 @@
|
||||
import { login, logout, getInfo } from "@/api/login";
|
||||
import { getToken, setToken, removeToken } from "@/utils/auth";
|
||||
import defAva from "@/static/images/profile.jpg";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export interface LoginForm {
|
||||
username: string;
|
||||
password: string;
|
||||
code: string;
|
||||
uuid: string;
|
||||
}
|
||||
|
||||
const useUserStore = defineStore("user", {
|
||||
state: () => ({
|
||||
token: getToken(),
|
||||
name: "",
|
||||
avatar: "",
|
||||
roles: Array(),
|
||||
permissions: [],
|
||||
}),
|
||||
actions: {
|
||||
// 登录
|
||||
login(userInfo: LoginForm) {
|
||||
const username = userInfo.username.trim();
|
||||
const password = userInfo.password;
|
||||
const code = userInfo.code;
|
||||
const uuid = userInfo.uuid;
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid)
|
||||
.then((res: any) => {
|
||||
setToken(res.token);
|
||||
this.token = res.token;
|
||||
resolve(null);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取用户信息
|
||||
getInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo()
|
||||
.then((res: any) => {
|
||||
const user = res.user;
|
||||
const avatar =
|
||||
user.avatar == "" || user.avatar == null
|
||||
? defAva
|
||||
: import.meta.env.VITE_APP_BASE_API + user.avatar;
|
||||
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
// 验证返回的roles是否是一个非空数组
|
||||
this.roles = res.roles;
|
||||
this.permissions = res.permissions;
|
||||
} else {
|
||||
this.roles = ["ROLE_DEFAULT"];
|
||||
}
|
||||
this.name = user.userName;
|
||||
this.avatar = avatar;
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 退出系统
|
||||
logOut() {
|
||||
return new Promise<null>((resolve, reject) => {
|
||||
logout()
|
||||
.then(() => {
|
||||
this.token = "";
|
||||
this.roles = [];
|
||||
this.permissions = [];
|
||||
this.name = "";
|
||||
this.avatar = "";
|
||||
removeToken();
|
||||
resolve(null);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useUserStore;
|
||||
import { login, logout, getInfo } from "@/api/login";
|
||||
import { getToken, setToken, removeToken } from "@/utils/auth";
|
||||
import defAva from "@/static/images/profile.jpg";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export interface LoginForm {
|
||||
username: string;
|
||||
password: string;
|
||||
code: string;
|
||||
uuid: string;
|
||||
}
|
||||
|
||||
const useUserStore = defineStore("user", {
|
||||
state: () => ({
|
||||
token: getToken(),
|
||||
name: "",
|
||||
avatar: "",
|
||||
roles: Array(),
|
||||
permissions: [],
|
||||
}),
|
||||
actions: {
|
||||
// 登录
|
||||
login(userInfo: LoginForm) {
|
||||
const username = userInfo.username.trim();
|
||||
const password = userInfo.password;
|
||||
const code = userInfo.code;
|
||||
const uuid = userInfo.uuid;
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid)
|
||||
.then((res: any) => {
|
||||
setToken(res.token);
|
||||
this.token = res.token;
|
||||
resolve(null);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取用户信息
|
||||
getInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo()
|
||||
.then((res: any) => {
|
||||
const user = res.user;
|
||||
const avatar =
|
||||
user.avatar == "" || user.avatar == null
|
||||
? defAva
|
||||
: user.avatar;
|
||||
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
// 验证返回的roles是否是一个非空数组
|
||||
this.roles = res.roles;
|
||||
this.permissions = res.permissions;
|
||||
} else {
|
||||
this.roles = ["ROLE_DEFAULT"];
|
||||
}
|
||||
this.name = user.userName;
|
||||
this.avatar = avatar;
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 退出系统
|
||||
logOut() {
|
||||
return new Promise<null>((resolve, reject) => {
|
||||
logout()
|
||||
.then(() => {
|
||||
this.token = "";
|
||||
this.roles = [];
|
||||
this.permissions = [];
|
||||
this.name = "";
|
||||
this.avatar = "";
|
||||
removeToken();
|
||||
resolve(null);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useUserStore;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user