ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整部分样式

Browse Source
This commit is contained in:
dftre 2025-08-22 16:22:00 +08:00
parent df252d049e
commit 2e05794a09
14 changed files with 1566 additions and 1613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/geek-xd/components/geek-qrcode/README.md
View File

@ -2,26 +2,13 @@
改自作者诗小柒的tki-qrcode二维码生成器
### 作者：董玉可
### 作者：Dftre
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` 中使用
@ -88,3 +75,4 @@
[uni-app](https://uniapp.dcloud.io/ "uni-app")
[qrcode](https://github.com/aralejs/qrcode "qrcode")
tki-qrcode

32
src/pages/index.vue
View File

@ -1,18 +1,3 @@
<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';
@ -40,8 +25,21 @@ function getServerData() {
}, 500);
}
</script>
<style scoped>
<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;

72
src/pages/login.vue
View File

@ -1,39 +1,3 @@
<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'
@ -130,8 +94,42 @@ function handleUserAgrement() {
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>
<style lang="scss">
<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;
}

166
src/pages/mine.vue
View File

@ -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;
}

69
src/pages/template.vue
View File

@ -1,7 +1,28 @@
<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 list"
<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">
@ -12,54 +33,16 @@
</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>
page {
background-color: rgb(240, 242, 244);
}
.u-cell-icon {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
</style>

13
src/pages/work.vue
View File

@ -79,15 +79,10 @@
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'
}
const data = ref([
{ image: '/static/images/banner/banner01.jpg' },
{ image: '/static/images/banner/banner02.jpg' },
{ image: '/static/images/banner/banner03.jpg' }
]);
function clickBannerItem(item) {

136
src/pages_template/pages/coupon/components/jingdong-coupon.vue Normal file
View 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
View 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
View 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>

402
src/pages_template/pages/coupon/index.vue
View File

@ -1,92 +1,13 @@
<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">
<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>
<MeituanCoupon />
<JingdongCoupon />
<TaobaoCoupon />
</view>
</template>
@ -99,315 +20,4 @@ page {
.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>

9
src/pages_template/pages/keyboardPay/index.vue
View File

@ -1,13 +1,9 @@
<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
@ -25,10 +21,7 @@ const onBackspace = () => {
}
const pay = () => {
uni.showLoading({
title: '支付中'
})
uni.showLoading({ title: '支付中' })
setTimeout(() => {
uni.hideLoading()
show.value = false

7
src/static/scss/global.scss
View File

@ -22,7 +22,7 @@
}
.list-cell-arrow::before {
content: ' ';
content: " ";
height: 10px;
width: 10px;
border-width: 2px 2px 0 0;
@ -54,7 +54,7 @@
}
.list-cell::after {
content: '';
content: "";
position: absolute;
border-bottom: 1px solid #eaeef1;
-webkit-transform: scaleY(0.5) translateZ(0);
@ -66,7 +66,6 @@
pointer-events: none;
}
.menu-list {
margin: 15px 15px;
@ -76,7 +75,7 @@
align-items: center;
.menu-icon {
color: #007AFF;
color: #007aff;
font-size: 16px;
margin-right: 5px;
}

2
src/store/modules/user.ts
View File

@ -46,7 +46,7 @@ const useUserStore = defineStore("user", {
const avatar =
user.avatar == "" || user.avatar == null
? defAva
: import.meta.env.VITE_APP_BASE_API + user.avatar;
: user.avatar;
if (res.roles && res.roles.length > 0) {
// 验证返回的roles是否是一个非空数组