仇子明 / arena_app · 提交

转到一个项目

作者 xiaoqiu
提交 e1e1a0e3a81398918d9c7bc99f1289910b3615da 0 个父辈

首次提交

内嵌 并排对比
正在显示 55 个修改的文件 包含 4801 行增加 和 0 行删除

要显示太多修改。
重新载入完整差异 差异文件 邮件补丁

为保证性能只显示 55 of 55+ 个文件。

不能预览此文件类型
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
... ...
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import "@/uni_modules/uview-ui/index.scss";
@import url('~@/static/css/YouSheBiaoTiHei.css');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container_box{
min-height: 100vh;
background-color: #f6f6f6;
padding: 24rpx 30rpx;
box-sizing: border-box;
}
</style>
... ...
const http = uni.$u.http
// 获取运动类型列表
export const getSportList = (data) => http.get('/system/sports/list', {params: data, custom: {auth: true} })
/**
* 查询球馆列表
* @param {
longitude,
latitude
}
* @returns {
businessId, businessName, businessLicenseNo, gymName, contacts, contactsPhone, province, city, county, address, gymNum,
serviceCharge, commission, username, businessLicensePicture, gymPicture, longitude, latitude, sportsRange, distance, rank, price, businessTime
}
*/
export const getArenaList = (data) => http.get('/ground-business/business/list', {params: data, custom: {auth: true} })
/**
* 根据id查询球馆
* @param {
businessId: 球馆ID
}
* @returns {
businessId, businessName, businessLicenseNo, gymName, contacts, contactsPhone, province, city, county, address, gymNum,
serviceCharge, commission, username, businessLicensePicture, gymPicture, longitude, latitude, sportsRange, distance, rank, price, businessTime
}
*/
export const getArenaDetail = (businessId) => http.get(`/ground-business/business/${businessId}`, {custom: {auth: true} })
/**
* 发起约球
* @param {
groundId: 场地id,
peopleNum: 参与人数（不包括发起人）,
orderDate: 订场日期,
hourList: {
startHour: 开始时间,
endHour: 结束时间
}
}
* @returns {
orderId, orderNo, belongGym, groundNum, orderTime, appointmentStartTime, appointmentEndTime,
payAmount, peopleNum, serviceCharge, commission, orderType, state, businessId, clientId, groundId
}
*/
export const sendBall = (data) => http.post('/ground-business/ground/createDateOrder', data, {custom: {auth: true} })
... ...
const http = uni.$u.http
// 用户登录
export const userLogin = (data, config= {}) => http.post('/login', data, config)
// 商家注册
/* data参数
{
"username": 用户名
"password": 密码
"businessName": 商家名称
"businessLicenseNo": 统一社会信用代码
"gymName": 球馆名称
"contacts": 联系人
"contactsPhone": 联系人电话
"province": 省
"city": 市
"county": 县
"address": 地址
"gymPicture" 球馆图片
}
*/
export const userReg = ({ username, password, businessName, businessLicenseNo, gymName, contacts, contactsPhone, province, city, county, address, gymPicture }) => {
return request({
url: '/register',
method: 'post',
data: {
username,
password,
businessName,
businessLicenseNo,
gymName,
contacts,
contactsPhone,
province,
city,
county,
address,
gymPicture
}
})
}
\ No newline at end of file
... ...
<template>
<view class="comment_card" :class="{isPadding: isPadding}">
<CommentRate></CommentRate>
<view class="comment_content u-line-2">
不错不错，这个地方环境非常好，水饮料种类也很多，非常推荐过来，尤其是附近的小伙伴一定要过来看看
</view>
<!-- 评价图片 -->
<u-album :urls="urls2" :rowCount="4"></u-album>
</view>
</template>
<script>
import CommentRate from './commentRate.vue'
export default{
components: { CommentRate },
props: {
isPadding: {
type: Boolean,
default: false
}
},
data(){
return {
urls2: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/8.jpg',
'https://cdn.uviewui.com/uview/album/9.jpg',
'https://cdn.uviewui.com/uview/album/10.jpg'
]
}
}
}
</script>
<style scoped lang="scss">
.comment_card{
margin-top: 40rpx;
background-color: #fff;
}
.isPadding{
border-radius: 16rpx;
padding: 30rpx 24rpx 40rpx;
}
.comment_content{
color: #333;
font-size: 24rpx;
line-height: 40rpx;
margin: 24rpx 0 18rpx 0;
}
.album {
@include flex;
align-items: flex-start;
&__avatar {
background-color: $u-bg-color;
padding: 5px;
border-radius: 3px;
}
&__content {
margin-left: 10px;
flex: 1;
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="commentRate">
<view class="left">
<image class="avatar" src="@/static/logo.png" mode="widthFix"></image>
</view>
<view class="right">
<view class="info">
<view class="top">
<text class="name">CLOOL</text>
<text class="arenaNum">预订场号：3号场</text>
</view>
<u-rate :count="count" active-color="#FF9900" size="20" inactiveColor="#CDCDCD" v-model="value"></u-rate>
</view>
<view class="comment_time">2022-12-26</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
count: 5,
value: 2
}
}
}
</script>
<style lang="scss" scoped>
.commentRate{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
line-height: 32rpx;
color: #999;
.left{
width: 64rpx;
height: 64rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 16rpx;
.avatar{
width: 100%;
height: 100%;
}
}
.right{
display: flex;
justify-content: space-between;
flex: 1;
height: 100%;
.top {
margin-bottom: 8rpx;
.name{
color: #333;
margin-right: 10rpx;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="box">
<u-cell-group v-if="headTitle !== ''" :border="false">
<u-cell :title="headTitle" :titleStyle="{color: '#333', fontSize: '24rpx'}">
<text slot="right-icon" style="font-size: 24rpx;font-weight: 500;" :style="{color: colorState(state)}">{{ orderState(state) }}</text>
</u-cell>
</u-cell-group>
<view class="orderInfo">
<view class="order_line" :class="{isBorder: border}" v-for="(item, index) in lineInfo" :key="index">
<text class="left_text">{{ item.title }}</text>
<u-avatar v-if="item.type === 'avatar'" :src="userInfo[item.valueName]"></u-avatar>
<text v-if="item.type === 'text'">{{ item.valueName }}</text>
<u--input
v-if="item.type === 'input'"
:customStyle="{border: 0, width: '200rpx'}"
:placeholder="userInfo[item.valueName]"
v-model="userInfo[item.valueName]"
inputAlign="right"
color="#333"
fontSize="13px"
border="surround"
@blur="UpdataInfo"
/>
</view>
</view>
<u-cell-group v-if="rightTitle !== ''" :border="false">
<u-cell :title="rightTitle" :titleStyle="{color: '#666', fontSize: '24rpx'}">
<MyButton v-show="state === 2" slot="right-icon" title="立即支付" size="small"></MyButton>
<MyButton v-show="state === 1" slot="right-icon" title="取消/退款" size="small" color="#666666" bgColor="#F6F6F6"></MyButton>
<MyButton v-show="state === 3" slot="right-icon" size="small" title="去评价"></MyButton>
<MyButton v-show="state === 6" slot="right-icon" size="small" title="亮核销码" @comfirn="showQR"></MyButton>
</u-cell>
</u-cell-group>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
props: {
lineInfo: {
type: Array,
require: true
},
border: {
type: Boolean,
default: false
},
headTitle: {
type: String,
default: ''
},
rightTitle: {
type: String,
default: ''
},
state: {
type: Number,
default: 0
}
},
components: { MyButton },
data(){
return {
userInfo: {
avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
nickname: 'CLOOL',
sex: '男',
phoneNum: '13336668888',
Birthday: '1999-12-26'
},
}
},
computed: {
orderState(){
return (index) => {
let orderObj ={
1: '已完成',
2: '待支付',
3: '待评价',
4: '已取消',
5: '退款/售后',
6: '待使用'
}
return orderObj[index]
}
},
colorState(){
return (index) => {
let colorObj ={
1: '#FFA100',
2: '#F33B10',
3: '#FFA100',
4: '#999999',
5: '#F33B10',
6: '#999999'
}
return colorObj[index]
}
}
},
methods: {
UpdataInfo(value){
this.$emit('updataInfo', this.userInfo)
},
showQR(){
this.$emit('showQRcode', true)
}
}
}
</script>
<style lang="scss" scoped>
.box{
background: #FFFFFF;
border-radius: 12rpx;
box-sizing: border-box;
}
.orderInfo{
padding: 0 30rpx;
.order_line{
display: flex;
align-items: center;
justify-content: space-between;
height: 90rpx;
font-size: 26rpx;
color: #333;
&.isBorder {
border-bottom: 2rpx solid #E1E1E1;
}
&:last-child{
border-bottom: 0;
}
.left_text{
color: #666;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="common_content">
<u-icon :name="iconName"></u-icon>
<text class="title">{{ titleContent }}</text>
</view>
</template>
<script>
export default {
props: {
iconName: {
type: String,
default: 'chat'
},
titleContent: {
type: String,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.common_content{
display: flex;
align-content: center;
.title{
margin-left: 4rpx;
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="common_title_nav">
<view class="name">
<text style="font-weight: 600;">{{ titleName }}</text>
<text class="mark" :style="{ color: markColor }">{{ rightTitle }}</text>
</view>
<view :style="{ color: sideTitleColor, fontSize: sideTitleSize }">
<slot name="side-content"></slot>
</view>
</view>
</template>
<script>
export default {
props: {
titleName: {
type: String,
default: ''
},
rightTitle: {
type: String,
default: ''
},
sideTitle: {
type: String,
default: ''
},
sideTitleColor: {
type: String,
default: '#333'
},
markColor: {
type: String,
default: '#333'
},
sideTitleSize: {
type: Number,
default: 28
},
}
}
</script>
<style lang="scss" scoped>
.common_title_nav{
display: flex;
align-items: center;
justify-content: space-between;
.name{
font-size: 32rpx;
color: #333;
.mark{
font-size: 24rpx;
margin-left: 16rpx;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="my_button" :class="{border, size: size === 'small'}" :style="{background: bgColor, color}" @click="comfirn">
{{ title }}
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
require: true
},
color: {
type: String,
default: '#fff'
},
size: {
type: String,
default: 'normal'
},
bgColor: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
}
},
methods: {
comfirn(){
this.$emit('comfirn')
}
}
}
</script>
<style lang="scss" scoped>
.my_button{
box-sizing: border-box;
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
border-radius: 112rpx;
text-align: center;
line-height: 80rpx;
color: #fff;
font-size: 28rpx;
&.border{
border: 2rpx solid #FFA100;
}
}
.size{
padding: 8rpx 34rpx;
text-align: center;
color: #fff;
font-size: 24rpx;
line-height: 40rpx;
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
border-radius: 112rpx;
box-sizing: border-box;
}
</style>
\ No newline at end of file
... ...
<template>
<view class="systemTip">
<view v-for="(item, index) in systemInfo" :key="index" class="sytem_row">
<u-notice-bar :text="item" :fontSize="12" bgColor="transparent" color="#FFA100"></u-notice-bar>
</view>
</view>
</template>
<script>
export default{
data(){
return {
systemInfo: [
'（CLOOL发起拼场）2022-12-26 14:23:45',
'（奇犽加入拼场并成功支付）2022-12-26 14:23:45',
'（奇犽加入拼场并成功支付）2022-12-26 14:23:45'
]
}
}
}
</script>
<style scoped lang="scss">
.systemTip{
display: flex;
flex-direction: column;
gap: 20rpx;
background: rgba(255,161,0, .16);
border-radius: 12rpx;
margin: 0 30rpx;
padding: 16rpx 20rpx;
.sytem_row{
font-size: 24rpx;
line-height: 36rpx;
}
}
</style>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
... ...
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import uView from '@/uni_modules/uview-ui'
import store from './store/index.js'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App,
})
// 引入请求封装，将app参数传递到配置中
require('./utils/request.js')(app)
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
\ No newline at end of file
... ...
{
"name" : "arena_app",
"appid" : "__UNI__6C14005",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {
"OAuth" : {}
},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {
"oauth" : {
"weixin" : {
"appid" : "wx7902d7df47ea6739",
"UniversalLinks" : ""
}
}
},
"splashscreen" : {
"androidStyle" : "common",
"android" : {
"hdpi" : "static/images/start/login-bg.png",
"xhdpi" : "static/images/start/login-bg.png",
"xxhdpi" : "static/images/start/login-bg.png"
}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx7902d7df47ea6739",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2",
"h5" : {
"router" : {
"mode" : "hash"
},
"devServer" : {
"proxy" : {
"/rpa" : {
"target" : "http://rpa.crgx.xyz"
}
},
"https" : true
}
}
}
... ...
{
"name": "arena_app",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
... ...
{
"name": "arena_app",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "arena_app",
"version": "1.0.0",
"license": "ISC"
}
}
}
... ...
{
"name": "arena_app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
... ...
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/home/home",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/booking/booking",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/aboutSphere/aboutSphere",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mall/mall",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/arenaDetail/arenaDetail",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/arenaDetail/vipRecharge",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/morePhotos/morePhotos",
"style" :
{
"navigationBarTitleText" : "场馆照片",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/moreComment/moreComment",
"style" :
{
"navigationBarTitleText" : "球馆评论",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/comfirmOrder/comfirmOrder",
"style" :
{
"navigationBarTitleText" : "确认订单",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/timeBooking/timeBooking",
"style" :
{
"navigationBarTitleText" : "选时订场",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/paysuccess/paysuccess",
"style" :
{
"navigationBarTitleText" : "支付成功",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/aboutBalls/aboutBalls",
"style" :
{
"navigationBarTitleText" : "发起约球",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/aboutBallsDetail/aboutBallsDetail",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/editInfo/editInfo",
"style" :
{
"navigationBarTitleText" : "编辑信息",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/myOrder/myOrder",
"style" :
{
"navigationBarTitleText" : "我的订单",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/myWallet/myWallet",
"style" :
{
"navigationBarTitleText" : "我的钱包",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/moneyEdit/moneyEdit",
"style" :
{
"navigationBarTitleText" : "金额操作",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/operateSuccess/operateSuccess",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/login/index",
"style" :
{
"navigationBarTitleText" : "用户名登录",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/register/register",
"style" :
{
"navigationBarTitleText" : "注册",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/applyRefund/applyRefund",
"style" :
{
"navigationBarTitleText" : "申请退款",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/orderEvaluate/orderEvaluate",
"style" :
{
"navigationBarTitleText" : "订单评价",
"enablePullDownRefresh" : false
}
}
],
"tabBar": {
"color": "#888888",
"selectedColor": "#FFA100",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/home/home",
"iconPath": "static/tabbar/House.png",
"selectedIconPath": "static/tabbar/House_active.png",
"text": "首页"
}, {
"pagePath": "pages/booking/booking",
"iconPath": "static/tabbar/Timer.png",
"selectedIconPath": "static/tabbar/Timer_active.png",
"text": "订场"
}, {
"pagePath": "pages/aboutSphere/aboutSphere",
"iconPath": "static/tabbar/Basketball.png",
"selectedIconPath": "static/tabbar/Basketball_active.png",
"text": "约球"
}, {
"pagePath": "pages/mall/mall",
"iconPath": "static/tabbar/shopping.png",
"selectedIconPath": "static/tabbar/shopping_active.png",
"text": "商城"
},{
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/SmileyBlank.png",
"selectedIconPath": "static/tabbar/SmileyWink_active.png",
"text": "我的"
}]
},
"globalStyle": {
// #ifdef H5
// "navigationStyle": "custom",
"maxWidth": 750,
"rpxCalcMaxDeviceWidth": 750, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
"rpxCalcBaseDeviceWidth": 560, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
"rpxCalcIncludeWidth": 9999, // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
// #endif
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "",
"navigationBarTextStyle": "black",
"backgroundTextStyle": "dark"
},
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"uniIdRouter": {}
}
... ...
<template>
<view class="about_balls">
<!-- 选项卡片 -->
<view class="select_card">
<view class="title">运动项目</view>
<view class="ball_list">
<view class="ball_item" v-for="(item, index) in imageList" :key="index" @click="ballActive = index">
<image class="ball_icon" v-show="ballActive !== index" :src="item.activeIcon" mode="widthFix"></image>
<image class="ball_icon" v-show="ballActive === index" :src="item.icon" mode="widthFix"></image>
<text :class="{ ballname: ballActive === index }">{{ item.title }}</text>
</view>
</view>
<view class="title">选择场馆</view>
<!-- 选择场馆 -->
<view class="select_arena" @click="show = true">
<text>{{ arenaName }}</text>
<u-icon name="arrow-right" color="#999"></u-icon>
</view>
<view class="title">项目时间</view>
<!-- 时间范围 -->
<view class="time_list">
<view class="startTime" @click="selectTime('start')">{{ startTime }}</view>
<view class="line"></view>
<view class="endTime" @click="selectTime('end')">{{ endTime }}</view>
</view>
</view>
<!-- 运动人数 -->
<view class="sport_number">
<view class="title">运动人数</view>
<text>8 人</text>
</view>
<!-- 去人约球 -->
<view class="footer">
<MyButton title="发起约球" @comfirn="goRouter" />
</view>
<!-- 场馆选择 -->
<u-picker :show="show" title="选择场馆" confirmColor="#FFA100" :columns="columns" :closeOnClickOverlay="true" @cancel="show = false" @close="show = false" @confirm="confirm"></u-picker>
<!-- 时间选择 -->
<u-datetime-picker
ref="datetimePicker"
:show="showDate"
v-model="dateValue"
title="选择约球时间"
mode="datetime"
:formatter="formatter"
@cancel="showDate = false"
@confirm="confirmTime"
/>
</view>
</template>
<script>
import badminton from '@/static/images/sport/badminton.png'
import badminton1 from '@/static/images/sport/badminton-1.png'
import basketball from '@/static/images/sport/basketball.png'
import basketball1 from '@/static/images/sport/basketball-1.png'
import football from '@/static/images/sport/football.png'
import football1 from '@/static/images/sport/football-1.png'
import frisbee from '@/static/images/sport/frisbee.png'
import frisbee1 from '@/static/images/sport/frisbee-1.png'
import tableTennis from '@/static/images/sport/table-tennis.png'
import tableTennis1 from '@/static/images/sport/table-tennis-1.png'
import tennis from '@/static/images/sport/tennis.png'
import tennis1 from '@/static/images/sport/tennis-1.png'
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
data() {
return {
ballActive: 0, // 动态球类索引
show: false, // 显示场馆列表
showDate: false, // 时间选择列表
dateValue: '', // 选择的时间值
startTime: '开始时间', // 开始时间
endTime: '结束时间', // 结束时间
timeMode: '', // 时间状态
arenaName: '',
columns: [
['彩虹体育馆', '飞人网球场', 'L2T体育馆']
],
// 球类列表
imageList: [
{ title: '羽毛球', icon: badminton, activeIcon: badminton1 },
{ title: '足球', icon: football, activeIcon: football1 },
{ title: '网球', icon: tennis, activeIcon: tennis1 },
{ title: '飞盘', icon: frisbee, activeIcon: frisbee1 },
{ title: '篮球', icon: basketball, activeIcon: basketball1 },
{ title: '乒乓球', icon: tableTennis, activeIcon: tableTennis1 }
]
}
},
onReady() {
// 微信小程序需要用此写法
this.$refs.datetimePicker.setFormatter(this.formatter)
},
methods: {
// 确认选择场馆
confirm({value}){
this.show = false
this.arenaName = value
},
// 时间过滤器
formatter(type, value) {
let timeObj = {
year: `${value}年`,
month: `${value}月`,
day: `${value}日`,
hour: `${value}时`,
minute: `${value}分`,
}
return timeObj[type]
},
// 选择时间
selectTime(value){
this.timeMode = value
this.showDate = true
},
// 选择时间的值
confirmTime({value}){
if(this.timeMode === 'start') {
this.startTime = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM')
} else {
this.endTime = uni.$u.timeFormat(value, 'yyyy-mm-dd hh:MM')
}
this.showDate = false
},
// 前往订单详情
goRouter(){
uni.navigateTo({
url: '/pages/comfirmOrder/comfirmOrder'
})
}
}
}
</script>
<style lang="scss" scoped>
.title{
position: relative;
font-weight: 500;
font-size: 28rpx;
line-height: 36rpx;
color: #333;
margin-left: 20rpx;
&::before{
content: '';
position: absolute;
left: -20rpx;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 8rpx;
background-color: #FFA100;
border-radius: 50%;
}
}
.about_balls{
padding: 24rpx 30rpx 0;
background-color: #F6F6F6;
min-height: 100vh;
box-sizing: border-box;
.select_card{
height: 548rpx;
background: #FFFFFF;
box-sizing: border-box;
padding: 24rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.ball_list{
display: flex;
align-items: center;
justify-content: space-around;
margin: 34rpx 0;
.ball_item{
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
color: #999;
line-height: 28rpx;
.ballname{
color: #FFA100;
font-weight: 500;
}
.ball_icon{
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
}
}
// 选择场馆
.select_arena{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
height: 68rpx;
background: #F6F6F6;
border-radius: 68rpx;
color: #333;
font-size: 24rpx;
margin: 24rpx 0 36rpx 0;
}
// 选择时间
.time_list {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 22rpx;
.startTime, .endTime{
width: 256rpx;
height: 56rpx;
background: #F6F6F6;
border-radius: 68rpx;
font-size: 24rpx;
color: #333;
text-align: center;
line-height: 56rpx;
}
.line{
width: 44rpx;
height: 0rpx;
border: 2rpx solid rgba(225,225,225,0.7);
}
}
}
// 人数
.sport_number{
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
height: 88rpx;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin-top: 24rpx;
}
// 确认约球
.footer{
position: fixed;
height: 112rpx;
width: 100%;
box-sizing: border-box;
bottom: 0;
left: 0;
background-color: #fff;
padding: 16rpx 30rpx;
}
}
</style>
... ...
<template>
<view class="detail_container">
<!-- 头部详情 -->
<view class="detail_head">
<image class="head_cover" src="@/static/images/start/login-bg-mob.png" mode="widthFix"></image>
<view class="nav_item">
<u-icon name="arrow-left" color="#fff" @click="goBack"></u-icon>
</view>
</view>
<!-- 球馆信息卡片 -->
<view class="arnea_card">
<view class="arena_box">
<ArenaDetailCard />
</view>
</view>
<!-- 场馆评价 -->
<EvaluateCard />
<!-- 拼球信息卡 -->
<BookingInfoCard />
<!-- 系统通知 -->
<SystemTip />
</view>
</template>
<script>
import SystemTip from '@/components/systemTip.vue'
import BookingInfoCard from './components/bookingInfoCard.vue'
import EvaluateCard from './components/evaluateCard.vue'
import ArenaDetailCard from '@/pages/arenaDetail/components/ArenaDetailCard.vue'
export default {
components: { ArenaDetailCard, EvaluateCard, BookingInfoCard, SystemTip },
data() {
return {
status: 'loadmore'
}
},
methods: {
goBack() {
uni.navigateBack()
},
goRouter(path) {
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.detail_container{
background-color: #F6F6F6;
min-height: 100vh;
padding-bottom: 60rpx;
// 头部背景
.detail_head{
position: relative;
height: 396rpx;
overflow: hidden;
.head_cover{
position: absolute;
top: -344rpx;
left: 0;
width: 100%;
}
.nav_item{
width: 100%;
box-sizing: border-box;
margin: 68rpx 0 0 40rpx;
}
}
// 球馆信息
.arnea_card{
position: relative;
.arena_box{
margin-top: -172rpx;
}
}
}
</style>
... ...
<template>
<view class="bookingInfoCard">
<view class="row_info">
<view class="left">拼球发起人：CLOOL</view>
</view>
<view class="row_info" style="margin: 28rpx 0;">
<view class="left">需求拼场：6人</view>
<MyButton title="拼场" size="small"></MyButton>
</view>
<view class="row_info">
<view class="left">
<text>已经拼场：</text>
<u-avatar-group
:urls="urls"
size="20"
gap="0"
/>
</view>
<MyButton title="邀请" size="small"></MyButton>
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default{
components: { MyButton },
data(){
return {
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg'
]
}
}
}
</script>
<style lang="scss" scoped>
.bookingInfoCard{
background: #FFFFFF;
border-radius: 16rpx;
padding: 26rpx 32rpx;
margin: 0 30rpx 24rpx;
.row_info{
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
font-size: 28rpx;
line-height: 40rpx;
.left{
display: flex;
align-items: center;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="comment_arena">
<CommonTitleNav titleName="场馆评价">
<template #side-content>
<view style="display: flex;align-items: center;font-size: 24rpx;color: #999;">
<text style="margin-right: 6rpx;">更多评价</text>
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
</view>
</template>
</CommonTitleNav>
<!-- 评分 -->
<view class="evaluate">
<view class="left_box">
<view class="evaluate_item">
<text>整体评价</text>
<text class="score">4.8</text>
</view>
</view>
<view class="right_box">
<view v-for="(item, index) in evaluateList" :key="index" class="evaluate_item">
<text>{{ item.title }}</text>
<text class="score">{{ item.score }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import CommonTitleNav from '@/components/commonTitleNav.vue'
export default{
components: { CommonTitleNav },
data() {
return {
evaluateList: [
{ title: '环境', score: '4.6' },
{ title: '服务', score: '4.5' },
{ title: '性价比', score: '4.9' },
]
}
}
}
</script>
<style lang="scss" scoped>
// 场馆评价
.comment_arena{
background: #FFFFFF;
border-radius: 16rpx;
margin: 24rpx 30rpx;
padding: 24rpx 32rpx;
box-sizing: border-box;
// 评价
.evaluate{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 26rpx;
.left_box{
flex: 3;
.evaluate_item{
align-items: flex-start;
}
}
.right_box{
flex: 4;
display: flex;
justify-content: space-around;
}
.evaluate_item{
display: flex;
flex-direction: column;
align-items: center;
color: #333;
font-size: 24rpx;
line-height: 32rpx;
.score{
color: #FFA100;
font-size: 32rpx;
margin-top: 24rpx;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="booking">
<u-sticky bgColor="#fff">
<view class="header_booking">
<u-tabs :list="list" lineColor="#FFA100" :activeStyle="{color: '#ffa100'}"></u-tabs>
<view class="select_list">
<view class="select_item" @click="show = true">
<text class="text">距离</text>
<u-icon name="arrow-down-fill"></u-icon>
</view>
<view class="select_item" @click="show = true">
<text class="text">价格</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
<view class="select_item">
<text>时间段</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
</view>
</view>
</u-sticky>
<!-- 球场列表 -->
<view class="arena_list">
<ArenaCard v-for="item in 5" :isBooking="false" :key="item" />
</view>
<view class="footer">
<MyButton title="发起约球" @comfirn="goRouter" />
</view>
<u-picker :show="show" confirmColor="#ffa100" :columns="columns" :closeOnClickOverlay="true" @close="show = false" @cancel="show = false" @confirm="show = false"></u-picker>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
import ArenaCard from '@/pages/home/components/arenaCard.vue'
export default {
components: { ArenaCard, MyButton },
data() {
return {
show: false,
columns: [
['1km以内', '3km以内', '5km以内', '10km以内']
],
list: [
{name: '羽毛球'},
{name: '网球'},
{name: '飞盘'},
{name: '足球'},
{name: '篮球'},
{name: '兵乒球'}
]
}
},
methods: {
goRouter(){
uni.navigateTo({
url: '/pages/aboutBalls/aboutBalls'
})
}
}
}
</script>
<style lang="scss" scoped>
.booking{
background-color: #F6F6F6;
padding-bottom: 112rpx;
.header_booking{
background-color: #fff;
.select_list{
display: flex;
align-items: center;
justify-content: space-around;
height: 84rpx;
padding: 0 30rpx;
border-top: 2rpx solid #E1E1E1;
box-sizing: border-box;
.select_item{
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 32rpx;
color: #666;
.text{
margin-right: 8rpx;
}
}
}
}
.arena_list{
padding: 30rpx;
}
.footer{
position: fixed;
height: 112rpx;
width: 100%;
box-sizing: border-box;
bottom: 0;
left: 0;
background-color: #fff;
padding: 16rpx 30rpx;
}
}
</style>
... ...
<template>
<view class="apply_refund">
<view class="box">
<view class="arenaInfo">
<view class="detail">预约详情</view>
<view class="info">场馆信息</view>
<ArenaCard />
</view>
<u-cell-group :border="false">
<u-cell :border="false" v-for="(item, index) in orderInfo" :key="index" :titleStyle="{color: '#666', fontSize: '24rpx'}" :title="item.title">
<text slot="right-icon" style="font-size: 24rpx;color: #333;">{{ item.info }}</text>
</u-cell>
</u-cell-group>
</view>
<!-- 退款原因 -->
<view class="user_intro">
<view class="intro">退款原因：</view>
<u--textarea v-model="introStr" :placeholder="defaultTip" placeholderClass height="188rpx" count ></u--textarea>
</view>
<!-- 联系方式 -->
<view class="user_intro">
<view class="intro">联系方式：</view>
<u--form :model="form" ref="uForm" :labelStyle="{color: '#666', fontSize: '24rpx'}">
<u-form-item label="联系人:" prop="name">
<u-input v-model="form.name" placeholder="请输入您的姓名" :customStyle="{padding: '10rpx', backgroundColor: '#F6F6F6'}" />
</u-form-item>
<u-form-item label="手机号:" prop="phone">
<u-input v-model="form.phone" placeholder="请输入正确的手机号码，便于商家联系" :customStyle="{padding: '10rpx', backgroundColor: '#F6F6F6'}" />
</u-form-item>
</u--form>
</view>
<!-- 提交申请 -->
<view class="footer">
<MyButton title="提交申请" />
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
import ArenaCard from '@/pages/home/components/arenaCard.vue'
export default {
components: { ArenaCard, MyButton },
data() {
return {
form: {
name: '',
phone: ''
},
introStr: '',
defaultTip: '请正确输入退款原因，以便于商家审核，小于5小时退款订单，有可能对商家造成损失，可能无法进行退款。请尽可能的与商家进行友好协商',
orderInfo: [
{ title: '订单信息', info: '' },
{ title: '订单编号', info: '000026' },
{ title: '预约时间', info: '2022-12-26 14:00-16:66' },
{ title: '支付金额', info: '¥ 268' },
{ title: '支付流水号', info: '123456' }
]
};
}
}
</script>
<style lang="scss" scoped>
/deep/ .textarea-placeholder{
font-size: 22rpx;
color: #999;
line-height: 40rpx;
}
/deep/ .input-placeholder{
font-size: 24rpx;
color: #999;
}
.apply_refund{
min-height: 100vh;
padding: 18rpx 30rpx;
background-color: #F6F6F6;
box-sizing: border-box;
padding-bottom: 10rpx;
.box{
padding: 24rpx 0;
background: #FFFFFF;
border-radius: 12rpx;
}
.arenaInfo{
font-size: 28rpx;
color: #333;
line-height: 36rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #D8D8D8;
.detail{
padding: 0 30rpx;
}
.info{
padding: 0 30rpx;
font-size: 24rpx;
color: #999;
line-height: 32rpx;
margin: 16rpx 0 8rpx 0;
}
}
.user_intro{
margin-top: 24rpx;
padding: 28rpx;
background: #FFFFFF;
border-radius: 12rpx;
.intro{
font-size: 26rpx;
color: #333;
margin-bottom: 24rpx;
line-height: 36rpx;
}
}
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 16rpx 30rpx;
}
}
</style>
... ...
<template>
<view class="detail_container">
<!-- 头部详情 -->
<view class="detail_head">
<image class="head_cover" src="@/static/images/start/login-bg-mob.png" mode="widthFix"></image>
<view class="nav_item">
<u-icon name="arrow-left" color="#fff" @click="goBack"></u-icon>
</view>
</view>
<!-- 球馆信息卡片 -->
<view class="arnea_card">
<view class="arena_box">
<ArenaDetailCard />
</view>
</view>
<!-- 会员充值提示 -->
<view class="vip" @click="goRouter('/pages/arenaDetail/vipRecharge')">
<vipCard></vipCard>
</view>
<!-- 选场 -->
<view class="book">
<view class="book_title">
<view>选场预订</view>
<view class="bookNum">本球场共6个场地</view>
</view>
<view class="book_content">
<BookCard v-for="item in 4" :key="item" />
<u-loadmore :status="status" line />
</view>
</view>
<!-- 评论 -->
<view class="comment">
<view class="comment_box">
<CommonTitleNav title-name="用户评论" mark-color="#666666" right-title="（1265+评论）" >
<template #side-content>
<view style="display: flex;align-items: center;font-size: 24rpx;" @click="goRouter('/pages/moreComment/moreComment')">
<text style="margin-right: 6rpx;color: #999;">更多评价</text>
<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
</view>
</template>
</CommonTitleNav>
<view class="comment_content">
<!-- 评价内容 -->
<CommentCard v-for="item in 3" :key="item" />
</view>
</view>
</view>
</view>
</template>
<script>
import CommonTitleNav from '@/components/commonTitleNav.vue'
import ArenaDetailCard from './components/ArenaDetailCard.vue'
import vipCard from './components/vipCard.vue'
import BookCard from './components/bookCard.vue'
import CommentCard from '@/components/commentCard.vue'
export default {
components: { ArenaDetailCard, BookCard, CommonTitleNav, CommentCard, vipCard },
data() {
return {
status: 'loadmore',
}
},
methods: {
goBack() {
uni.navigateBack()
},
goRouter(path) {
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.detail_container{
background-color: #F6F6F6;
min-height: 100vh;
padding-bottom: 60rpx;
.detail_head{
position: relative;
height: 396rpx;
overflow: hidden;
.head_cover{
position: absolute;
top: -344rpx;
left: 0;
width: 100%;
}
.nav_item{
width: 100%;
box-sizing: border-box;
margin: 68rpx 0 0 40rpx;
}
}
.arnea_card{
position: relative;
.arena_box{
margin-top: -172rpx;
}
}
.vip{
padding: 0 30rpx;
margin: 20rpx 0;
box-sizing: border-box;
}
.book{
margin-top: 30rpx;
padding: 0 30rpx;
.book_title{
display: flex;
align-items: center;
margin-bottom: 24rpx;
font-size: 32rpx;
line-height: 40rpx;
color: #333;
.bookNum{
color: #999;
font-size: 24rpx;
line-height: 32rpx;
margin-left: 20rpx;
}
}
.book_content{
min-height: 548rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 34rpx 26rpx;
}
}
.comment{
margin-top: 20rpx;
padding: 0 30rpx;
.comment_box{
min-height: 684rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 24rpx 26rpx 30rpx;
}
}
.comment_content{
margin-top: 40rpx;
}
}
</style>
... ...
<template>
<view class="detail_card">
<view class="header_module">
<CommonTitleNav title-name="彩虹体育馆" mark-color="#FFA100" right-title="4.8分" sideTitleColor="#ffa100" >
<template #side-content>
<view style="display: flex;align-items: center;font-size: 24rpx;" @click="goMore">
<text style="margin-right: 6rpx;">更多场照</text>
<u-icon name="play-right-fill" color="#ffa100" size="12"></u-icon>
</view>
</template>
</CommonTitleNav>
<view class="range">距离您1.2km</view>
</view>
<u-scroll-list indicatorWidth="0">
<view class="list_card" v-for="(item, index) in list" :key="index">
<image class="cover" :src="item.thumb"></image>
</view>
</u-scroll-list>
<view class="footer-module">
<view class="left">
<view class="businessTime">营业时间：周一至周五 9:00-23:00</view>
<CommonIconNav icon-name="map" title-content="1.2km 滨湖路地铁C口"></CommonIconNav>
</view>
<view class="right">
<view class="nav">
<u-icon size="20" name="https://bpic.588ku.com/element_origin_min_pic/19/06/15/bf733c98b302dd7b87f9d086310e75ea.jpg"></u-icon>
<text class="text">导航</text>
</view>
<view class="phone">
<u-icon size="20" name="phone"></u-icon>
<text class="text">电话</text>
</view>
</view>
</view>
</view>
</template>
<script>
import CommonTitleNav from '@/components/commonTitleNav.vue'
import CommonIconNav from '@/components/commonIconNav.vue'
export default {
components: { CommonTitleNav, CommonIconNav },
data(){
return {
list: [{
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
}]
}
},
methods: {
goMore(){
uni.navigateTo({
url: '/pages/morePhotos/morePhotos'
})
}
}
}
</script>
<style lang="scss" scoped>
.u-scroll-list__indicator{
margin-top: 0;
}
.detail_card{
width: 690rpx;
height: 384rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
padding: 34rpx 34rpx 20rpx;
box-sizing: border-box;
.header_module{
.range{
margin: 14rpx 0;
color: #999;
font-size: 24rpx;
line-height: 28rpx;
}
}
.list_card{
width: 224rpx;
height: 136rpx;
margin-right: 20rpx;
&:last-child{
margin-right: 0;
}
.cover{
width: 224rpx;
height: 136rpx;
}
}
.footer-module{
display: flex;
align-content: center;
justify-content: space-between;
margin-top: -40rpx;
.left{
color: #333;
font-size: 24rpx;
line-height: 32rpx;
.businessTime{
margin-bottom: 14rpx;
}
}
.right{
display: flex;
align-items: center;
font-size: 24rpx;
color: #666;
.nav, .phone{
display: flex;
flex-direction: column;
align-items: center;
.text{
margin-top: 6rpx;
}
}
.nav{
margin-right: 40rpx;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="bookCard">
<view class="left">
<image class="arena_img" src="@/static/images/home/bg-1.png" mode="scaleToFill"></image>
</view>
<view class="right">
<view class="arenaInfo">
<view>羽毛球1号场</view>
<view class="price">¥ 160/小时</view>
</view>
<MyButton title="订场" size="small" @comfirn="goRouter" />
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
methods: {
goRouter(){
uni.navigateTo({
url: '/pages/timeBooking/timeBooking'
})
}
}
}
</script>
<style lang="scss" scoped>
.bookCard{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
.left{
width: 124rpx;
height: 124rpx;
margin-right: 24rpx;
.arena_img{
width: 100%;
max-height: 126rpx;
}
}
.right {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
height: 100%;
.arenaInfo{
font-size: 28rpx;
color: #333;
line-height: 32rpx;
.price{
font-size: 500;
margin-top: 20rpx;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="priceCard" :style="{backgroundColor: active ? '#FFE6B4' : '#fff'}" @click="toggle">
<text class="card_name">{{ info.name }}</text>
<text class="price">￥<text style="font-size: 72rpx; line-height: 96rpx;">{{ info.price }}</text></text>
<text class="old_price">￥{{ info.oldPrice }}</text>
<view class="avg_price" :style="{backgroundColor: active ? '#FFC675' : '#FFFAF1', color: active ? '#722F06' : '#DEB468'}">{{ info.avgText }}</view>
</view>
</template>
<script>
export default {
props: {
active: {
type: Number,
default: false
},
info: {
type: Object,
require: true
}
},
methods: {
toggle(){
this.$emit('toggle')
}
}
}
</script>
<style lang="scss" scoped>
.priceCard{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-top: 8rpx;
width: 330rpx;
height: 240rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
overflow: hidden;
border: 2rpx solid #EEEEEE;
box-sizing: border-box;
color: #722F06;
.card_name, .price{
font-size: 32rpx;
line-height: 42rpx;
font-weight: 500;
}
.old_price{
color: #BF9363;
font-size: 28rpx;
line-height: 38rpx;
text-decoration: line-through;
}
.avg_price{
height: 48rpx;
line-height: 48rpx;
color: #DEB468;
font-size: 28rpx;
width: 100%;
text-align: center;
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="vip_card">
<view class="left">
<image src="@/static/images/arenaDetail/detail_banner.png" mode="widthFix"></image>
</view>
<view class="center">
<text class="admin">会员优惠</text>
<text class="select">更多选择</text>
</view>
<view class="right">
<view class="apply">立即申请</view>
<u-icon name="arrow-right-double" color="#E6B976"></u-icon>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.vip_card{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
background: linear-gradient( 90deg, #EEC09F 0%, #FDF9F7 100%);
border-radius: 16rpx;
padding: 0 14rpx;
.left{
display: flex;
align-items: center;
justify-content: center;
width: 200rpx;
}
.center{
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
font-family: 'YouSheBiaoTiHei';
font-size: 28rpx;
line-height: 36rpx;
.admin{
background: linear-gradient(0deg, #D09351 0%, #E6B976 33%, #D09351 69%, #E6B976 100%);
-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;/*给文字设置成透明*/
font-size: 48rpx;
line-height: 62rpx;
}
.select{
background: linear-gradient(0deg, #D09351 0%, #E6B976 33%, #D09351 69%, #E6B976 100%);
-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;/*给文字设置成透明*/
}
}
.right{
display: flex;
align-items: center;
.apply{
width: 120rpx;
height: 36rpx;
background: linear-gradient( 270deg, #D09351 0%, #E6B976 26%, #D09351 69%, #E6B976 100%);
border-radius: 200rpx;
font-size: 24rpx;
line-height: 36rpx;
text-align: center;
color: #fff;
margin-right: 20rpx;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="vip_recharge">
<!-- 头部详情 -->
<view class="vip_head">
<image class="head_cover" src="@/static/images/arenaDetail/vip_bg.png" mode="widthFix"></image>
<u-navbar
title="申请场馆会员卡"
:autoBack="true"
:bgColor="bgColor"
/>
<view class="uesrInfoCard">
<view class="userInfo">
<u-avatar :src="src"></u-avatar>
<text class="name">CLOOL</text>
<text class="phone">（158****1234）</text>
</view>
</view>
</view>
<!-- 充值列表 -->
<view class="vip_list">
<view class="list_title">VIP会员</view>
<view class="price_list">
<PriceCard v-for="(item, index) in priceList" :key="index" :info="item" :active="index === current" @toggle="ontoggle(item, index)"/>
</view>
<view class="pay_btn">确认并支付￥{{ price }}</view>
<view class="agreement">
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" activeColor="#ffa100" label="开通前请阅读《世纪创软运动系列会员服务协议》"></u-checkbox>
</u-checkbox-group>
</view>
</view>
</view>
</template>
<script>
import PriceCard from './components/priceCard.vue'
export default {
components: { PriceCard },
data(){
return {
current: 0,
bgColor: 'transparent',
checked: false,
price: 0,
priceList: [
{ name: '3次卡', price: 40, oldPrice: 68, avgText: '约13.3/次'},
{ name: '周卡', price: 150, oldPrice: 500, avgText: '约21.4/天'},
{ name: '季卡', price: 999, oldPrice: 1500, avgText: '约333/月'},
{ name: '年卡', price: 3000, oldPrice: 5000, avgText: '约250/月'}
],
src: 'https://cdn.uviewui.com/uview/album/1.jpg'
}
},
mounted() {
this.price = this.priceList[0].price
},
methods: {
ontoggle(item, index){
this.current = index
this.price = item.price
}
}
}
</script>
<style lang="scss" scoped>
.vip_recharge{
min-height: 100vh;
}
// 头部
.vip_head{
position: relative;
height: 540rpx;
overflow: hidden;
.head_cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.uesrInfoCard {
width: 100%;
position: absolute;
bottom: 40rpx;
padding: 0 30rpx;
height: 100rpx;
box-sizing: border-box;
.userInfo{
display: flex;
align-items: center;
height: 100%;
padding: 0 40rpx;
background: rgba(255,255,255,0.7);
border-radius: 16rpx;
color: #999999;
font-size: 24rpx;
.name{
margin-left: 20rpx;
color: #3d3d3d;
font-size: 28rpx;
}
}
}
}
// 充值列表
.vip_list{
position: relative;
min-height: calc(100vh - 540rpx);
background-color: #fff;
margin-top: -55rpx;
border-radius: 40rpx 40rpx 0rpx 0rpx;
padding: 40rpx 30rpx 0;
.list_title{
font-size: 36rpx;
line-height: 48rpx;
font-weight: 600;
color: #3d3d3d;
padding-left: 30rpx;
margin-bottom: 20rpx;
}
.price_list{
display: flex;
flex-wrap: wrap;
gap: 30rpx;
}
.pay_btn{
margin: 30rpx 0;
width: 100%;
height: 100rpx;
background: linear-gradient( 90deg, #FFD176 0%, #FEDE9C 100%);
border-radius: 200rpx;
line-height: 100rpx;
text-align: center;
font-size: 40rpx;
color: #722F06;
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="booking">
<u-sticky bgColor="#fff">
<view class="header_booking">
<u-tabs :list="list" lineColor="#FFA100" :activeStyle="{color: '#ffa100'}"></u-tabs>
<view class="select_list">
<view class="select_item" @click="show = true">
<text class="text">距离</text>
<u-icon name="arrow-down-fill"></u-icon>
</view>
<view class="select_item" @click="show = true">
<text class="text">价格</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
<view class="select_item">
<text>时间段</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
</view>
</view>
</u-sticky>
<!-- 球场列表 -->
<view class="arena_list">
<ArenaCard v-for="item in 5" :key="item" />
</view>
<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="show = false"></u-picker>
</view>
</template>
<script>
import ArenaCard from '@/pages/home/components/arenaCard.vue'
export default {
components: { ArenaCard },
data() {
return {
show: false,
columns: [
['1km以内', '3km以内', '5km以内', '10km以内']
],
list: [
{name: '羽毛球'},
{name: '网球'},
{name: '飞盘'},
{name: '足球'},
{name: '篮球'},
{name: '兵乒球'}
]
}
}
}
</script>
<style lang="scss" scoped>
.booking{
min-height: 100vh;
background-color: #F6F6F6;
.header_booking{
background-color: #fff;
.select_list{
display: flex;
align-items: center;
justify-content: space-around;
height: 84rpx;
padding: 0 30rpx;
border-top: 2rpx solid #E1E1E1;
box-sizing: border-box;
.select_item{
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 32rpx;
color: #666;
.text{
margin-right: 8rpx;
}
}
}
}
.arena_list{
padding: 30rpx;
}
}
</style>
... ...
<template>
<view class="comfirmOrder">
<CommonCell :lineInfo="lineInfo" />
<view class="cost">人均费用：<text style="margin-left: 20rpx;color: #333;">20元/人</text></view>
<view class="agreement_list">
<u-checkbox-group
v-model="checkboxValue"
placement="column"
@change="checkboxChange"
>
<u-checkbox
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in checkboxList"
shape="circle"
activeColor="#ffa100"
labelSize="26rpx"
size="26rpx"
:key="index"
:label="item.name"
:name="item.name"
/>
</u-checkbox-group>
</view>
<view class="pay_box">
<MyButton title="立即支付" @comfirn="goRouter"/>
</view>
<u-popup :show="show" :round="10" mode="center" :customStyle="{width: '690rpx'}" @close="show = false">
<view class="popup_tip">
<view class="popup_title">- 温馨提示 -</view>
<view class="tip_box">
<image class="order_bg" src="@/static/images/arenaDetail/order_bg.png" mode="widthFix"></image>
<view class="tip_list">
<view class="tip_item" v-for="(item, index) in tipList" :key="index">
{{ item }}
</view>
</view>
</view>
<view class="btn" @click="show = false">我知道了</view>
</view>
</u-popup>
</view>
</template>
<script>
import CommonCell from '@/components/commonCell.vue'
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton, CommonCell },
data() {
return {
show: false, // 弹出层提示
tipList: [
'1.下单后10分钟内可以全额退款，距离开场8小时前取消可以全额退款。',
'2.下单后超过10分钟取消订单退订规则如下：',
'3.开场前8小时内取消订单则发起人可退回支付金额的50%；',
'4.室外场地因天气原因取消订单，则全额退款；需场地管理人员人工审核。'
],
lineInfo: [
{ title: '订单流水号', valueName: '南宁站 2022-12-26 16:23:45 000026', type: 'text' },
{ title: '参与人数', valueName: '8人', type: 'text' },
{ title: '场馆', valueName: '彩虹体育馆', type: 'text' },
{ title: '场地', valueName: '羽毛球1号场', type: 'text' },
{ title: '预约时间段', valueName: '2022-12-26（周一） 15:00-16:00', type: 'text' }
],
// 选择的值
checkboxValue:[],
// 协议数据列表
checkboxList: [
{ name: '我已阅读并同意《订场条款》', disabled: false },
{ name: '使用余额组合支付：¥236', disabled: false },
{ name: '使用周卡支付', disabled: false }
]
}
},
created() {
this.show = true
},
methods: {
checkboxChange(n) {
console.log('change', n);
},
goRouter(){
uni.navigateTo({
url: '/pages/paysuccess/paysuccess'
})
}
}
}
</script>
<style lang="scss" scoped>
.comfirmOrder{
position: relative;
padding: 24rpx 30rpx 0;
box-sizing: border-box;
min-height: 100vh;
background-color: #F6F6F6;
.cost{
display: flex;
align-items: center;
height: 96rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin: 20rpx 0;
padding: 0 30rpx;
font-size: 26rpx;
color: #666;
}
.agreement_list{
padding-top: 20rpx;
}
}
.pay_box{
position: absolute;
height: 112rpx;
width: 100%;
box-sizing: border-box;
bottom: 0;
left: 0;
background-color: #fff;
padding: 16rpx 30rpx;
}
.popup_tip{
height: 784rpx;
background: #FFFFFF;
border-radius: 24rpx;
padding: 38rpx 52rpx;
.popup_title{
color: #ff9900;
font-size: 32rpx;
line-height: 44rpx;
margin-bottom: 30rpx;
text-align: center;
}
.tip_box{
position: relative;
height: 530rpx;
margin-bottom: 70rpx;
.order_bg{
position: absolute;
left: 0;
bottom: 0;
width: 544rpx;
height: 438rpx;
}
.tip_list{
display: flex;
flex-direction: column;
font-size: 28rpx;
color: #666;
line-height: 48rpx;
.tip_item{
margin-bottom: 60rpx;
&:last-child{
margin-bottom: 0;
}
}
}
}
.btn{
width: 372rpx;
height: 76rpx;
margin: 0 auto;
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
border-radius: 686rpx;
font-size: 28rpx;
color: #fff;
line-height: 76rpx;
text-align: center;
}
}
</style>
... ...
<template>
<view class="editInfo">
<CommonCell :lineInfo="rowTitle" @updataInfo="getUserInfo" />
<!-- 个人简介 -->
<view class="user_intro">
<view class="intro">个人介绍：</view>
<u--textarea v-model="introStr" placeholder="请输入内容" height="188rpx" border="bottom" count ></u--textarea>
</view>
<view class="footer">
<MyButton title="确定保存"></MyButton>
</view>
</view>
</template>
<script>
import CommonCell from '@/components/commonCell.vue'
import MyButton from '@/components/myButton.vue'
export default {
components: { CommonCell, MyButton },
data() {
return {
introStr: '', // 简介
rowTitle: [
{ title: '头像', type: 'avatar', valueName: 'avatar' },
{ title: '昵称', type: 'input', valueName: 'nickname' },
{ title: '性别', type: 'input', valueName: 'sex' },
{ title: '手机号', type: 'input', valueName: 'phoneNum' },
{ title: '生日', type: 'input', valueName: 'Birthday' }
]
};
},
methods: {
getUserInfo(value) {
console.log((value))
}
}
}
</script>
<style lang="scss" scoped>
.editInfo{
padding: 24rpx 30rpx;
min-height: calc(100vh - 88rpx);
background-color: #F6F6F6;
.user_intro{
margin-top: 24rpx;
padding: 28rpx;
height: 312rpx;
background: #FFFFFF;
border-radius: 12rpx;
.intro{
font-size: 26rpx;
color: #333;
margin-bottom: 24rpx;
line-height: 36rpx;
}
}
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 16rpx 30rpx;
background-color: #fff;
box-sizing: border-box;
}
}
</style>
... ...
<template>
<view class="arenaCard" :style="customStyle">
<view class="left">
<image class="cover_img" src="@/static/images/home/bg-1.png" mode="scaleToFill"></image>
</view>
<view class="right">
<CommonTitleNav title-name="彩虹体育馆" mark-color="#FFA100" right-title="4.8分" >
<template #side-content>
{{ isBooking ? '160/小时' : '¥ 36/人' }}
</template>
</CommonTitleNav>
<view class="center">
<CommonIconNav v-if="isBooking" icon-name="map" title-content="1.2km 滨湖路地铁C口"></CommonIconNav>
<CommonIconNav v-else icon-name="clock" title-content="2023-02-06 9:00-23:00"></CommonIconNav>
</view>
<view v-if="isBooking" class="startTime">
<CommonIconNav icon-name="clock" title-content="9:00-23:00"></CommonIconNav>
<view class="detail" @click="goRouter('/pages/arenaDetail/arenaDetail')">
<text>详情</text>
<u-icon name="play-right-fill" color="#FFA100" size="12"></u-icon>
</view>
</view>
<view v-else class="startTime">
<view class="number">
<u-avatar-group
:urls="urls"
size="24"
gap="0.4"
/>
</view>
<MyButton title="拼场" size="small" @comfirn="goRouter('/pages/aboutBallsDetail/aboutBallsDetail')" />
</view>
</view>
</view>
</template>
<script>
import CommonIconNav from '@/components/commonIconNav.vue'
import CommonTitleNav from '@/components/commonTitleNav.vue'
import MyButton from '@/components/myButton.vue'
export default {
components: { CommonIconNav, CommonTitleNav, MyButton },
props: {
isBooking: {
type: Boolean,
default: true
},
customStyle: {
type: String,
default: ''
}
},
data() {
return {
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg'
]
}
},
methods: {
goRouter(path){
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.arenaCard{
display: flex;
align-items: center;
padding: 20rpx;
height: 188rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
.left{
width: 144rpx;
height: 144rpx;
margin-right: 20rpx;
.cover_img{
width: 100%;
height: 100%;
}
}
.right{
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
height: 100%;
.center{
display: flex;
align-items: center;
color: #333;
font-size: 24rpx;
line-height: 32rpx;
}
.startTime{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
color: #666666;
font-size: 24rpx;
.detail{
display: flex;
align-items: center;
position: absolute;
color: #FFA100;
font-size: 24rpx;
top: 0;
right: 0;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="ballNav">
<view class="headerNav">
<u-tabs :list="navlist" lineColor="#FFA100"></u-tabs>
<view class="classify">
<u-icon name="grid" color="#FFA100" size="24" :activeStyle="activeStyle" @click="isShow = !isShow"></u-icon>
</view>
<view class="select_ball" :class="{show: isShow}">
<view class="ball_item" @click="isShow = false">飞盘</view>
<view class="line"></view>
<view class="ball_item" @click="isShow = false">网球</view>
</view>
</view>
<view class="date_show">
<view class="date_item" v-for="(item, index) in timeList" :key="index">
<view class="left">
<u-icon :name="item.iconName" color="#FFA100" size="22"></u-icon>
<text style="margin-left: 18rpx;">{{ item.time }}</text>
</view>
<view class="right">
<u-icon name="more-dot-fill" color="#999"></u-icon>
</view>
</view>
</view>
<view class="btn_list">
<view class="boking">立即找场</view>
<view class="ball">发起约球</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
isShow: false, // 是否显示下拉列表
navlist: [
{ name: '篮球', id: '1'},
{ name: '足球', id: '2'},
{ name: '羽毛球', id: '3'},
{ name: '乒乓球', id: '4'}
],
activeStyle: {
color: '#111111',
fontSize: '30rpx'
},
timeList: [
{ iconName: 'calendar', time: '2月25日（今天' },
{ iconName: 'clock', time: '14:00 - 15:00 1小时' }
]
}
}
}
</script>
<style lang="scss" scoped>
.ballNav{
padding: 0 24rpx;
min-height: 452rpx;
background: #FFFFFF;
margin: 62rpx 0 28rpx 0;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.headerNav{
position: relative;
.classify{
position: absolute;
width: 50rpx;
height: 50rpx;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.select_ball{
position: absolute;
top: 76rpx;
left: 64%;
padding: 22rpx;
width: 220rpx;
min-height: 196rpx;
background: #FFFFFF;
box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0,0,0,0.1);
border-radius: 12rpx;
z-index: 99;
box-sizing: border-box;
opacity: 0;
transition: all .5s ease;
&.show{
opacity: 1;
}
.ball_item{
text-align: center;
font-size: 28rpx;
color: #333;
}
.line{
height: 2rpx;
background-color: #E1E1E1;
margin: 34rpx 0 ;
}
}
}
.date_show{
.date_item{
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
box-sizing: border-box;
border-bottom: 2rpx solid #E1E1E1;
.left {
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 32rpx;
color: #111;
}
}
}
.btn_list{
display: flex;
align-items: center;
justify-content: space-between;
gap: 30rpx;
margin: 40rpx 0 54rpx 0;
.boking, .ball {
flex: 1;
height: 72rpx;
line-height: 72rpx;
text-align: center;
font-size: 28rpx;
color: #FFA100;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.boking{
border: 2rpx solid #FFA100;
}
.ball {
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
color: #fff;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="banner">
<u-swiper
:list="list"
:indicator="true"
indicatorActiveColor="#FFA100"
indicatorInactiveColor="#E1E1E1"
indicatorMode="dot"
/>
</view>
</template>
<script>
import banner from '@/static/images/home/banner.png'
export default {
data() {
return {
list: [
banner,
banner,
banner
]
}
}
}
</script>
<style lang="scss" scoped>
.banner{
width: 100%;
box-sizing: border-box;
}
</style>
\ No newline at end of file
... ...
<template>
<view class="booking_container">
<view class="nav_title">
<view class="nav_item" v-for="(item, index) in navList" :key="index" @click="current = index">
<text class="ballName" :class="{ ballActive: current === index}">{{ item.ballName }}</text>
<text class="booking" :class="{ bookingActive: current === index}">订场</text>
</view>
</view>
<ArenaCard v-for="item in navList" :key="item.id" />
</view>
</template>
<script>
import ArenaCard from './arenaCard.vue'
export default {
components: { ArenaCard },
data(){
return {
current: 0,
navList: [
{ ballName: '羽毛球', id: 1 },
{ ballName: '篮球', id: 2 },
{ ballName: '网球', id: 3 },
{ ballName: '足球', id: 4 },
]
}
}
}
</script>
<style lang="scss" scoped>
.booking_container{
margin-top: 30rpx;
.nav_title{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28rpx;
.nav_item{
display: flex;
flex-direction: column;
align-items: center;
.ballName{
color: #333333;
font-size: 32rpx;
line-height: 44rpx;
&.ballActive{
background: linear-gradient(180deg, #FFA100 0%, #FFD400 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 400;
}
}
.booking{
color: #666666;
font-size: 24rpx;
margin-top: 8rpx;
&.bookingActive{
padding: 6rpx 24rpx;
color: #fff;
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
}
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="venue">
<view class="title">热门场馆</view>
<view class="content_list">
<u-scroll-list indicatorWidth="0">
<view class="list_item" v-for="(item, index) in list" :key="index" @click="goArenaDetail">
<image class="cover" :src="item.thumb"></image>
<text class="name">{{ item.title }}</text>
<view class="tip">
<CommonIconNav icon-name="map" :title-content="item.address" />
<text class="price">￥{{ item.price }}人</text>
</view>
</view>
</u-scroll-list>
</view>
</view>
</template>
<script>
import bg1 from '@/static/images/home/bg-1.png'
import CommonIconNav from '@/components/commonIconNav.vue'
export default {
components: { CommonIconNav },
data(){
return {
list: [
{ thumb: bg1, title: '彩虹体育馆', address: '青秀区', price: 23 },
{ thumb: bg1, title: '飞人网球场', address: '兴宁区', price: 23 },
{ thumb: bg1, title: 'L2T体育馆', address: '西乡塘', price: 23 },
{ thumb: bg1, title: '广西体育馆', address: '五象新区', price: 24 },
]
}
},
methods: {
goArenaDetail(){
uni.navigateTo({
url: '/pages/arenaDetail/arenaDetail'
})
}
}
}
</script>
<style lang="scss" scoped>
.venue{
margin-top: 28rpx;
.title{
position: relative;
padding-left: 18rpx;
color: #333333;
font-size: 32rpx;
line-height: 36rpx;
margin-bottom: 24rpx;
&::before{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 8rpx;
height: 26rpx;
background-color: #FFA100;
}
}
.content_list{
padding: 24rpx;
padding-bottom: 0;
height: 284rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
box-sizing: border-box;
.list_item{
display: flex;
flex-direction: column;
margin-right: 20rpx;
&:last-child{
margin-right: 0;
}
.cover{
width: 220rpx;
height: 156rpx;
border-radius: 12rpx;
margin-bottom: 16rpx;
}
.name{
color: #333333;
font-weight: 500;
line-height: 34rpx;
font-size: 24rpx;
margin-bottom: 6rpx;
}
.tip{
display: flex;
align-items: center;
color: #666;
font-size: 20rpx;
.price{
margin-left: 16rpx;
}
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="search_box">
<view class="search_input">
<u-search placeholder="输入球场名字搜索" placeholder-color="#CDCDCD" bg-color="#F6F6F6" v-model="keyword" :show-action="false"></u-search>
</view>
<view class="location">
<u-icon name="map" color="#FFA100"></u-icon>
<text>南宁</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
}
}
</script>
<style lang="scss" scoped>
.search_box{
display: flex;
align-items: center;
justify-content: space-between;
height: 108rpx;
margin: 20rpx 0;
padding: 24rpx 30rpx;
box-sizing: border-box;
background-color: #fff;
.search_input{
flex: 1;
}
.location{
display: flex;
flex-direction: column;
align-items: center;
width: 50rpx;
font-size: 24rpx;
line-height: 28rpx;
color: #FFA100;
margin-left: 28rpx;
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="home_container">
<SearchHead />
<view class="content_box">
<Banner />
<BallNav />
<u-notice-bar :text="text"></u-notice-bar>
<HotVnue />
<BookingNavlist />
</view>
</view>
</template>
<script>
import SearchHead from './components/searchHead.vue'
import Banner from './components/banner.vue'
import BallNav from './components/ballNav.vue'
import HotVnue from './components/hotvenue.vue'
import BookingNavlist from './components/bookingNavlist.vue'
import { getSportList } from '@/api/sport.js'
export default {
components: { SearchHead, Banner, BallNav, HotVnue, BookingNavlist },
data() {
return {
text: '用户45553发起了琅东羽毛球场约球...'
};
},
async onLoad() {
// const res = await getSportList({pageNum: 1, pageSize: 10})
// console.log(res)
}
}
</script>
<style lang="scss">
.home_container{
background-color: #f6f6f6;
min-height: calc(100vh - 88rpx);
padding-bottom: 60rpx;
.content_box{
padding: 0 30rpx;
}
}
</style>
... ...
<template>
<view class="login-container">
<view class="login-title">用户名登录</view>
<u-form :model="logForm" ref="logForm">
<u-form-item prop="username">
<u-input v-model="logForm.username" placeholder="请输入用户名" />
</u-form-item>
<u-form-item prop="password">
<u-input v-model="logForm.password" type="password" placeholder="请输入密码" />
</u-form-item>
<u-form-item>
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" active-color="#FFA100"></u-checkbox>
<text class="agreement">我已阅读并同意《用户协议》及《隐私协议》</text>
</u-checkbox-group>
</u-form-item>
</u-form>
<view class="btn" @click="submit">登录</view>
<view class="tip">
没有账号？<text style="color: #FFA100;" @click="goReg">去注册</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
logForm: { username: '', password: ''},
checked: false,
logRules: {
username: [
{ required: true, message: '请填写用户名', trigger: ['blur']},
{ pattern: /^[0-9a-zA-Z]*$/g, transform(value) { return String(value) }, message: '只能包含字母或数字', trigger: 'change' },
{ min: 4, max: 12, message: '长度在6-12个字符之间', trigger: 'change' }
],
password: [
{ required: true, message: '请填写密码', trigger: ['blur']},
// { pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 8, message: '长度在6-16个字符之间', trigger: ['change'] },
]
}
}
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.logForm.setRules(this.logRules);
},
methods: {
goReg(){
uni.navigateTo({
url: '/pages/register/register'
})
},
// 提交登录
submit() {
this.$refs.logForm.validate().then(valid => {
if (valid) {
this.$store.dispatch('Login', this.logForm).then(res => {
console.log(res)
uni.switchTab({
url: '/pages/home/home'
})
})
} else {
console.log('验证失败');
}
});
}
}
}
</script>
<style scoped lang="scss">
.login-container{
position: relative;
padding: 0 30rpx;
box-sizing: border-box;
height: calc(100vh - 88rpx);
max-height: 100vh;
.login-title{
color: #3d3d3d;
font-size: 56rpx;
margin: 40rpx 0 60rpx 0;
line-height: 74rpx;
font-weight: 500;
}
.agreement{
color: #333;
line-height: 38rpx;
font-size: 28rpx;
}
.btn{
width: 100%;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
background-color: #FFA100;
border-radius: 12rpx;
color: #fff;
margin-top: 30rpx;
}
.tip{
position: absolute;
bottom: 44rpx;
left: 50%;
font-size: 36rpx;
color: #333;
transform: translateX(-50%);
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="login-container">
<image class="login-bg" src="../../static/images/start/login-bg-mob.png" mode="widthFix"></image>
<view class="login-btn">
<u-button shape="circle" @click="goLogin">用户名登录/注册</u-button>
</view>
</view>
</template>
<script>
import { userLogin } from '@/api/user.js'
export default {
onLoad() {
},
methods: {
goLogin(){
uni.redirectTo({
url: '/pages/login/index'
});
}
}
}
</script>
<style lang="scss" scoped>
.login-container {
position: relative;
height: 100vh;
.login-bg{
width: 100%;
max-height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.login-btn{
position: absolute;
top: 55%;
left: 50%;
width: 600rpx;
transform: translateX(-50%);
}
}
</style>
... ...
<template>
<view class="mall_container">
<view class="locate">
<u-icon name="map"></u-icon>
<text class="site">南宁市活力篮球公园</text>
</view>
<view class="search_box">
<u-search placeholder="输入商品名字搜索" v-model="shopValue"></u-search>
</view>
</view>
</template>
<script>
export default {
data() {
return {
shopValue: '', // 商品名称
};
}
}
</script>
<style lang="scss" scoped>
.mall_container{
min-height: 100vh;
box-sizing: border-box;
.locate{
height: 88rpx;
display: flex;
align-items: center;
padding: 0 20rpx;
.site{
color: #3d3d3d;
font-size: 28rpx;
margin-left: 10rpx;
}
}
.search_box{
height: 106rpx;
box-sizing: border-box;
padding: 14rpx 20rpx 20rpx;
border-bottom: 2rpx solid #eee;
}
}
</style>
... ...
<template>
<view class="money_edit">
<view class="banner">
<image class="bg-img" src="@/static/myImage/wallet-bg.png" mode="widthFix"></image>
<view class="my_money">
<text>可提现金额（元）</text>
<text>¥<text class="number">2000.00</text> </text>
</view>
</view>
<view class="edit_box">
<view class="edit_title">提现金额</view>
<view class="money_line">¥<text class="number">1800</text></view>
<view class="option">
<u-cell-group :border="false">
<u-cell title="充值方式" :border="false">
<view slot="right-icon" class="opton-item">
<u-icon name="weixin-circle-fill" color="#04B62F"></u-icon>
<text style="margin-left: 12rpx;">微信</text>
</view>
</u-cell>
</u-cell-group>
</view>
<!-- 提交按钮 -->
<view class="footer">
<MyButton title="申请提现" ></MyButton>
</view>
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.money_edit{
min-height: 100vh;
background-color: #f6f6f6;
}
.banner{
position: relative;
height: 288rpx;
.bg-img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.my_money{
position: absolute;
top: 38rpx;
left: 28rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #fff;
.number{
font-size: 52rpx;
font-weight: 700;
line-height: 64rpx;
margin-left: 4rpx;
}
}
}
.edit_box{
position: relative;
height: 496rpx;
margin: 0 30rpx;
padding: 0 30rpx;
margin-top: -86rpx;
background: #FFFFFF;
border-radius: 12rpx;
.edit_title{
height: 86rpx;
color: #333;
line-height: 86rpx;
font-size: 28rpx;
}
.money_line{
font-size: 40rpx;
line-height: 52rpx;
color: #333;
padding-bottom: 6rpx;
border-bottom: 2rpx solid #D8D8D8;
.number{
font-size: 56rpx;
font-weight: 500;
margin-left: 12rpx;
}
}
.footer{
margin: 100rpx 72rpx 0;
}
.option{
margin-top: 30rpx;
}
.opton-item{
display: flex;
}
}
</style>
... ...
<template>
<view class="more_comment">
<CommentCard v-for="item in 5" :key="item" :isPadding="true"></CommentCard>
</view>
</template>
<script>
import CommentCard from '@/components/commentCard.vue'
export default {
components: { CommentCard },
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.more_comment{
padding: 30rpx;
background-color: #F6F6F6;
}
</style>
... ...
<template>
<view class="more_photos">
<image v-for="(item, index) in urls2" :key="index" class="photo" :src="item" mode="widthFix"></image>
</view>
</template>
<script>
export default {
data() {
return {
urls2: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/8.jpg',
'https://cdn.uviewui.com/uview/album/9.jpg',
'https://cdn.uviewui.com/uview/album/10.jpg'
],
}
}
}
</script>
<style lang="scss" scoped>
.more_photos {
display: flex;
flex-wrap: wrap;
gap: 18rpx;
padding: 30rpx;
.photo{
width: 330rpx;
}
}
</style>
... ...
<template>
<view class="function_card">
<view class="function_title">{{ title }}</view>
<view class="function_list">
<view class="function_item" v-for="(item, index) in functionData" :key="index">
<image class="list_icon" :src="item.icon" mode="widthFix"></image>
<text class="list_name">{{ item.text }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
functionData: {
tyep: Array,
require: true
}
},
methods: {
goRouter(){}
}
}
</script>
<style scoped lang="scss">
.function_card{
background: #FFFFFF;
border-radius: 12rpx;
.function_title{
line-height: 84rpx;
height: 84rpx;
padding-left: 36rpx;
font-size: 28rpx;
color: #333;
border-bottom: 2rpx solid #E1E1E1;
box-sizing: border-box;
}
.function_list{
display: flex;
gap: 28rpx;
flex-wrap: wrap;
padding: 24rpx 30rpx;
.function_item{
width: calc((100% - 90rpx) / 4);
display: flex;
flex-direction: column;
align-items: center;
font-size: 28rpx;
list-style: 40rpx;
color: #333;
.list_icon{
width: 52rpx;
height: 52rpx;
margin-bottom: 14rpx;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<view class="my_pages">
<view class="header_box">
<view v-if="token === ''" class="userInfo">
<u-avatar src="" size="108rpx"></u-avatar>
<view class="right" @click="goRouter('/pages/login/index')">
<view class="username">登录/注册</view>
</view>
</view>
<view v-else class="userInfo">
<u-avatar :src="src" size="108rpx"></u-avatar>
<view class="right">
<view class="username">CLOOL</view>
<view class="intro">
<text>一枚爱运动的少年吖~</text>
<u-icon name="edit-pen" color="#fff" @click="goRouter('/pages/editInfo/editInfo')"></u-icon>
</view>
</view>
</view>
</view>
<!-- 用户金额 -->
<view class="user_money">
<view class="left">
<view class="money">
<text>余额</text>
<u-icon name="eye"></u-icon>
</view>
<text>2000.00</text>
</view>
<view class="btn">我的钱包</view>
</view>
<!-- 列表 -->
<view class="list">
<FunctionList title="我的订单" :functionData="orderList" />
<FunctionList title="我的服务" :functionData="serviceList" />
</view>
</view>
</template>
<script>
import All from '@/static/myImage/all.png'
import BookingOrder from '@/static/myImage/booking_order.png'
import CustomerService from '@/static/myImage/customer_service.png'
import EmptyWalletTime from '@/static/myImage/empty-wallet-time.png'
import EmptyWallet from '@/static/myImage/empty-wallet.png'
import Recharge from '@/static/myImage/recharge.png'
import SingUp from '@/static/myImage/sing_up.png'
import Vip from '@/static/myImage/vip.png'
import ToBeUsed from '@/static/myImage/to_be_used.png'
import FunctionList from './components/functionList.vue'
import { mapGetters } from 'vuex'
export default {
components: { FunctionList },
data() {
return {
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
orderList: [
{ text: '全部', icon: All },
{ text: '待付款', icon: EmptyWalletTime },
{ text: '待使用', icon: ToBeUsed },
{ text: '退款售后', icon: CustomerService },
],
serviceList: [
{ text: '钱包', icon: EmptyWallet },
{ text: '充值', icon: Recharge },
{ text: '约球订单', icon: BookingOrder },
{ text: '我的报名', icon: SingUp },
{ text: '我的会员', icon: Vip },
]
};
},
computed: {
...mapGetters(['token'])
},
methods: {
goRouter(path){
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.my_pages{
background-color: #f6f6f6;
height: 100vh;
}
.header_box{
position: relative;
height: 330rpx;
padding: 0 30rpx;
box-sizing: border-box;
background: linear-gradient( 270deg, #FCD723 0%, #FFA100 100%);
&::after{
content: '';
position: absolute;
bottom: -40rpx;
left: 0;
width: 100%;
height: 100rpx;
background: linear-gradient( 270deg, #FCD723 0%, #FFA100 100%);
border-radius: 50%;
}
.userInfo{
position: absolute;
top: 160rpx;
display: flex;
align-items: center;
z-index: 10;
.right{
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
margin-left: 20rpx;
height: 100%;
font-size: 24rpx;
color: #fff;
.username{
font-size: 32rpx;
line-height: 48rpx;
font-weight: 500;
}
.intro{
display: flex;
align-items: center;
gap: 20rpx;
}
}
}
}
.user_money{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 30rpx 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
margin: 0 30rpx;
margin-top: -44rpx;
z-index: 20;
.left{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16rpx;
font-size: 36rpx;
color: #333;
.money{
display: flex;
align-items: center;
color: #666;
font-size: 28rpx;
gap: 14rpx;
}
}
.btn{
width: 176rpx;
height: 60rpx;
background: linear-gradient( 270deg, #FFA100 0%, #FCD723 100%);
border-radius: 90rpx;
line-height: 60rpx;
font-size: 28rpx;
text-align: center;
color: #fff;
}
}
.list{
display: flex;
flex-direction: column;
gap: 20rpx;
margin: 20rpx 30rpx 0;
}
</style>
... ...
<template>
<view class="myOrder">
<!-- 头部导航 -->
<u-sticky>
<view class="tab_nav">
<u-tabs :list="list" lineColor="#FFA100" :activeStyle="{ color: '#FFA100' }" @click="toggleOrder"></u-tabs>
</view>
</u-sticky>
<!-- 订单列表 -->
<view class="order_list">
<CommonCell
v-for="(item, index) in showList"
:key="index"
:lineInfo="item.orderInfo"
:headTitle="item.createTime"
:state="item.orderState"
:rightTitle="'合计：¥200.15'"
@showQRcode="showQRcode = true"
/>
</view>
<view v-show="showList.length === 0">
<u-empty
mode="list"
text="暂无订单"
/>
</view>
<!-- 弹出使用二维码框 -->
<u-popup :show="showQRcode" mode="center" @close="showQRcode = false" round="12rpx">
<view class="QRbox">
<view class="use_tip">
<text class="title">核销码</text>
<text class="use_time">有效期至 2023-02-023 13:00-16:30</text>
<text>错过有效期该核销码即失效</text>
</view>
<!-- 二维码使用 -->
<view class="qr_code">
<image class="qr_logo" src="@/static/myImage/QR_Code.png" mode="widthFix"></image>
<text>0000000000001</text>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import CommonCell from '@/components/commonCell.vue'
export default {
components: { CommonCell },
data() {
return {
showQRcode: false,
list: [{name: '全部', id: 0}, {name: '待支付', id: 2}, {name: '已完成', id: 1}, {name: '已取消', id: 4}, {name: '待使用', id: 6}, {name: '待评价', id: 3}, {name: '退款/售后', id: 5}],
current: 1,
showList: [],
orderList: [
{
createTime: '2022-12-22 15:23:45',
orderState: 1, // 已完成
orderInfo: [
{ title: '订单编号：', valueName: '000015', type: 'text' },
{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
]
},
{
createTime: '2022-12-22 15:23:45',
orderState: 2, // 待付款
orderInfo: [
{ title: '订单编号：', valueName: '000015', type: 'text' },
{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
]
},
{
createTime: '2022-12-22 15:23:45',
orderState: 4, // 已取消
orderInfo: [
{ title: '订单编号：', valueName: '000015', type: 'text' },
{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
]
},
{
createTime: '2022-12-22 15:23:45',
orderState: 3, // 待评价
orderInfo: [
{ title: '订单编号：', valueName: '000015', type: 'text' },
{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
]
},
{
createTime: '2022-12-22 15:23:45',
orderState: 6, // 待使用
orderInfo: [
{ title: '订单编号：', valueName: '000015', type: 'text' },
{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
]
}
]
};
},
mounted() {
this.showList = this.orderList
},
methods: {
toggleOrder(value){
let id = value.id
if(id === 0) {
this.showList = this.orderList
} else{
let list = this.orderList.filter(item => item.orderState === id)
this.showList = list
}
}
}
}
</script>
<style lang="scss" scoped>
.myOrder{
background-color: #F6F6F6;
min-height: 100vh;
.tab_nav{
background-color: #fff;
}
.order_list{
display: flex;
flex-direction: column;
gap: 24rpx;
padding: 24rpx 30rpx;
}
}
.QRbox{
width: 690rpx;
height: 544rpx;
background: #FFFFFF;
border-radius: 12rpx;
overflow: hidden;
.use_tip{
display: flex;
flex-direction: column;
align-items: center;
height: 168rpx;
background: #FFA100;
padding: 20rpx 0;
box-sizing: border-box;
font-size: 24rpx;
color: #fff;
line-height: 32rpx;
.title{
font-weight: 500;
font-size: 28rpx;
}
.use_time{
margin: 24rpx 0 10rpx 0;
}
}
.qr_code{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 22rpx;
color: #333;
font-size: 28rpx;
line-height: 32rpx;
margin-top: 56rpx;
.qr_logo{
width: 196rpx;
height: 196rpx;
}
}
}
</style>
... ...
<template>
<view class="wallet_bg">
<view class="banner">
<image class="bg-img" src="@/static/myImage/wallet-bg.png" mode="widthFix"></image>
<view class="my_money">
<text>我的余额</text>
<text>¥<text class="number">0.00</text> </text>
</view>
<view class="use">提现</view>
<view class="recharge">充值</view>
</view>
<u-tabs
:list="list"
lineColor="#FFA100"
:activeStyle="{ color: '#FFA100' }"
itemStyle="padding-left: 15px; padding-right: 15px; height: 92rpx;width: 33%;box-sizing: border-box;"
@click="toggleData"
/>
<!-- 账单列表 -->
<view class="bill_list">
<u-cell-group :border="false">
<u-cell
v-for="(item, index) in billList"
:key="index" :title="item.name"
:label="item.createTime"
:value="priceActive(item)"
:border="false"
/>
</u-cell-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '全部', id: 1},
{ name: '收入', id: 2},
{ name: '支出', id: 3},
],
billList: [
{ name: '南宁站 000026', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'add' },
{ name: '南宁站 000026', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'add' },
{ name: '提现', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'minus' },
{ name: '提现', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'minus' },
]
};
},
computed: {
priceActive(){
return (item) => {
return item.status === 'add' ? `+ ${item.price}` : `- ${item.price}`
}
}
},
methods: {
toggleData(){
}
}
}
</script>
<style lang="scss" scoped>
.wallet_bg{
padding: 20rpx 30rpx;
background-color: #F6F6F6;
min-height: 100vh;
.banner{
position: relative;
height: 288rpx;
border-radius: 16rpx;
.bg-img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.my_money{
position: absolute;
top: 38rpx;
left: 28rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #fff;
.number{
font-size: 52rpx;
font-weight: 700;
line-height: 64rpx;
margin-left: 4rpx;
}
}
.use{
position: absolute;
top: 96rpx;
left: 192rpx;
width: 96rpx;
height: 44rpx;
background: #FFFFFF;
border-radius: 40rpx;
text-align: center;
line-height: 44rpx;
color: #FFA100;
font-size: 24rpx;
}
.recharge{
position: absolute;
top: 34rpx;
right: 34rpx;
width: 128rpx;
height: 48rpx;
background: rgba(255,255,255,0.4);
border-radius: 40rpx;
color: #fff;
line-height: 48rpx;
text-align: center;
font-size: 24rpx;
border: 2rpx solid #FFFFFF;
}
}
.bill_list{
margin-top: 30rpx;
}
}
</style>
... ...
<template>
<view class="edit_success">
<view class="header_logo">
<view class="logo_box">
<image class="success_logo" src="@/static/myImage/edit_success.png" mode="widthFix"></image>
<text>充值成功</text>
</view>
</view>
<u-cell-group :border="false">
<u-cell v-for="(item, index) in editInfo" :key="index" :title="item.title" :border="false" :value="item.content"></u-cell>
</u-cell-group>
<view class="footer">
<MyButton title="完成" />
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
data() {
return {
editInfo: [
{ title: '充值金额', content: '¥1800' },
{ title: '充值方式', content: '微信' }
]
};
}
}
</script>
<style lang="scss" scoped>
.edit_success{
background-color: #fff;
min-height: 100vh;
.header_logo{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 0 30rpx;
margin-bottom: 30rpx;
.logo_box{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-bottom: 2rpx solid #E1E1E1;
padding: 132rpx 0 36rpx 0;
width: 100%;
.success_logo{
width: 136rpx;
height: 136rpx;
margin-bottom: 36rpx;
}
}
}
.footer{
padding: 0 30rpx;
margin-top: 80rpx;
}
}
</style>
... ...
<template>
<view class="container_box" style="padding-bottom: 200rpx;">
<!-- 球馆 -->
<view class="evaluate_box">
<!-- 头部信息 -->
<view class="header">
<view class="left_box">
<image class="arena_logo" src="@/static/images/home/bg-1.png" mode=""></image>
</view>
<view class="right_box">
<text class="title">彩虹体育馆</text>
<text>订单编号：000026</text>
<text>合计：¥200.15</text>
</view>
</view>
<!-- 评分列表 -->
<view class="evaluate_list">
<view v-for="(item, index) in rateList" :key="index" class="evaluate_item">
<view class="rate">
<text>{{ item.title }}</text>
<u-rate :count="5" v-model="item.retaValue" activeColor="#FFA100" inactiveColor="#D8D8D8" ></u-rate>
</view>
<view class="number">{{ item.retaValue }} 分</view>
</view>
</view>
</view>
<!-- 评论 -->
<view class="user_intro">
<view class="intro">退款原因：</view>
<u--textarea v-model="introStr" :placeholder="defaultTip" placeholderClass height="188rpx" count ></u--textarea>
</view>
<view class="user_intro">
<view class="intro">上传图片：</view>
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
/>
</view>
<view class="footer">
<view style="flex: 1;">
<MyButton title="取消" bgColor="#fff" color="#999999" :border="true" />
</view>
<view style="flex: 1;">
<MyButton title="提交评论" />
</view>
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
data() {
return {
introStr: '',
fileList1: [], // 上传图片列表
defaultTip: '请在此写下您的评论',
rateList: [
{ title: '环境：', retaValue: 4 },
{ title: '服务：', retaValue: 5 },
{ title: '性价比：', retaValue: 3 }
]
};
},
methods: {
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
}
}
}
</script>
<style lang="scss" scoped>
// 球馆信息
.evaluate_box{
height: 440rpx;
background: #FFFFFF;
border-radius: 12rpx;
box-sizing: border-box;
padding: 30rpx;
.header{
display: flex;
align-items: center;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #E1E1E1;
.left_box{
width: 136rpx;
height: 136rpx;
margin-right: 20rpx;
.arena_logo{
width: 136rpx;
height: 136rpx;
}
}
.right_box{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
gap: 12rpx;
font-size: 24rpx;
color: #666;
line-height: 32rpx;
.title{
color: #333;
font-size: 28rpx;
line-height: 36rpx;
}
}
}
.evaluate_list{
display: flex;
flex-direction: column;
padding-top: 26rpx;
gap: 36rpx;
.evaluate_item{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #333;
line-height: 36rpx;
.rate{
display: flex;
align-items: center;
}
}
}
}
// 评论
.user_intro{
margin-top: 24rpx;
padding: 28rpx;
background: #FFFFFF;
border-radius: 12rpx;
.intro{
font-size: 26rpx;
color: #333;
margin-bottom: 24rpx;
line-height: 36rpx;
}
}
.footer{
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
display: flex;
align-items: center;
background-color: #fff;
justify-content: space-between;
gap: 34rpx;
width: 100%;
padding: 16rpx 30rpx;
}
</style>
... ...
<template>
<view class="pay_success">
<view class="header_box"></view>
<view class="content_box">
<view class="dataCard">
<!-- 成功logo -->
<view class="success_log">
<image class="logo" src="@/static/images/arenaDetail/pay_success.png" mode="widthFix"></image>
<text>支付成功！</text>
</view>
<!-- 订单信息 -->
<view class="orderInfo">
<view class="order_line" v-for="(item, index) in lineInfo" :key="index">
<text class="left_text">{{ item.title }}</text>
<view class="right_text">{{ item.content }}</view>
</view>
</view>
<!-- 总金额 -->
<view v-if="!isVip" class="total_money">
<text>总支付金额</text>
<text style="color: #FFA100;font-weight: 700;">¥ 234.83</text>
</view>
<!-- 周卡支付 -->
<view v-else class="total_money">
<text>周卡剩余</text>
<text style="color: #FFA100;">5天</text>
</view>
<view v-if="!isVip" class="avg_money">人均费用：¥ 20/人</view>
</view>
</view>
<view class="btn_list">
<MyButton title="查看订单" @comfirn="goRouter" />
<MyButton title="返回首页" :border="true" bgColor="#fff" color="#FFA100" @comfirn="goRouter" />
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
export default {
components: { MyButton },
data() {
return {
isVip: false,
lineInfo: [
{ title: '订单流水号：', content: '南宁站 2022-12-26 16:23:45 000026' },
{ title: '参与人数：', content: '8人' },
{ title: '场馆：', content: '彩虹体育馆' },
{ title: '场地：', content: '羽毛球1号场' },
{ title: '预约时间段：', content: '2022-12-26（周一） 15:00-16:00' }
]
}
},
methods: {
goRouter(){
uni.switchTab({
url: '/pages/home/home'
})
}
}
}
</script>
<style lang="scss">
.pay_success{
background-color: #F6F6F6;
box-sizing: border-box;
padding-bottom: 60rpx;
.header_box{
width: 100%;
height: 208rpx;
background: linear-gradient( 270deg, #FCD723 0%, #FFA100 100%);
}
.content_box{
margin-top: -140rpx;
padding: 0 30rpx;
.dataCard{
position: relative;
padding: 32rpx;
background-color: #fff;
background-blend-mode: soft-light;
background-size: cover;
background-position: center;
// 成功logo
.success_log{
display: flex;
flex-direction: column;
align-items: center;
color: #333;
font-size: 36rpx;
font-weight: 600;
border-bottom: 2rpx dashed rgba(225,225,225,0.7);
padding-bottom: 36rpx;
.logo{
width: 122rpx;
height: 122rpx;
margin-bottom: 20rpx;
}
}
// 订单信息
.orderInfo{
height: 468rpx;
background: #FFFFFF;
border-radius: 12rpx;
box-sizing: border-box;
border-bottom: 2rpx dashed rgba(225,225,225,0.7);
.order_line{
display: flex;
align-items: center;
height: 90rpx;
font-size: 26rpx;
.left_text{
color: #666;
margin-right: 6rpx;
}
.right_text{
color: #333;
}
}
}
// 总金额
.total_money{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 32rpx;
line-height: 36rpx;
color: #333;
margin: 32rpx 0;
}
// 均额
.avg_money{
text-align: right;
color: #666;
font-size: 24rpx;
line-height: 36rpx;
}
&::before{
content: '';
position: absolute;
top: -20rpx;
left: 0;
width: 100%;
height: 40rpx;
display: block;
background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
background-size: 28rpx 44rpx;
}
&::after{
content: '';
position: absolute;
bottom: -20rpx;
left: 0;
width: 100%;
height: 40rpx;
display: block;
background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
background-size: 28rpx 44rpx;
transform: rotateX(180deg);
}
}
}
.btn_list{
display: flex;
flex-direction: column;
gap: 32rpx;
padding: 0 30rpx;
margin-top: 80rpx;
}
}
</style>
... ...
<template>
<view class="login-container">
<view class="login-title">用户注册</view>
<u-form :model="regForm" ref="regForm">
<u-form-item prop="username">
<u-input v-model="regForm.username" placeholder="请输入用户名" />
</u-form-item>
<u-form-item prop="password">
<u-input v-model="regForm.password" type="password" placeholder="请输入密码" />
</u-form-item>
<u-form-item prop="repassword">
<u-input v-model="regForm.repassword" type="password" placeholder="请再次输入密码" />
</u-form-item>
<u-form-item>
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" active-color="#FFA100"></u-checkbox>
<text class="agreement">我已阅读并同意《用户协议》及《隐私协议》</text>
</u-checkbox-group>
</u-form-item>
</u-form>
<view class="btn">注册</view>
<view class="tip">
已有账号，<text style="color: #FFA100;" @click="goLog">立即登录</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
regForm: { username: '', password: '', repassword: ''},
checked: false,
regRules: {
username: [
{ required: true, message: '请填写用户名', trigger: ['blur']},
{ pattern: /^[0-9a-zA-Z]*$/g, transform(value) { return String(value) }, message: '只能包含字母或数字', trigger: 'blur' },
{ min: 6, max: 8, message: '长度在6-8个字符之间', trigger: 'change' }
],
password: [
{ required: true, message: '请填写密码', trigger: ['blur']},
{ pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 8, message: '长度在6-16个字符之间', trigger: ['change'] },
],
repassword: [
{ required: true, message: '请填写密码', trigger: ['blur']},
{ pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
{ min: 6, max: 8, message: '长度在6-16个字符之间', trigger: ['change'] },
{
validator: (rule, value, callback) => {
value !== this.regForm.password ? callback(new Error('两次密码输入不一致')) : callback()
},
trigger: ['change']
}
]
}
}
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.regForm.setRules(this.regRules);
},
methods: {
// 前往登录
goLog() {
uni.redirectTo({
url: '/pages/login/index'
})
},
submit() {
this.$refs.regForm.validate().then(valid => {
if (valid) {
console.log('验证通过');
} else {
console.log('验证失败');
}
})
}
}
}
</script>
<style scoped lang="scss">
.login-container{
position: relative;
padding: 0 30rpx;
box-sizing: border-box;
height: calc(100vh - 88rpx);
max-height: 100vh;
.login-title{
color: #3d3d3d;
font-size: 56rpx;
margin: 40rpx 0 60rpx 0;
line-height: 74rpx;
font-weight: 500;
}
.agreement{
color: #333;
line-height: 38rpx;
font-size: 28rpx;
}
.btn{
width: 100%;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
background-color: #FFA100;
border-radius: 12rpx;
color: #fff;
margin-top: 30rpx;
}
.tip{
position: absolute;
bottom: 44rpx;
left: 50%;
font-size: 36rpx;
color: #333;
transform: translateX(-50%);
}
}
</style>
\ No newline at end of file
... ...