Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a4a363ba 1 parent 17d6427a

新增新建主办方页面

Inline Side-by-side
Showing 5 changed files with 333 additions and 3 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 15:41:01
* @LastEditTime: 2022-10-09 09:25:56
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -37,6 +37,7 @@ export default {
'pages/myCreateActivity/index',
'pages/myFollowUser/index',
'pages/projectManage/index',
'pages/createProject/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
/*
* @Date: 2022-10-08 18:29:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 18:30:17
* @FilePath: /swx/src/pages/createProject/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '新建主办方',
usingComponents: {
},
}
.create-project-page {
background-color: #FFFFFF;
height: 100%;
overflow: scroll;
.activity-title {
background-color: #FFFFFF;
.box {
padding: 1rem 1rem 0.5rem 1rem;
text-align: center;
}
}
.bg-gradient {
background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
/*调整下划线的宽度占百分之百 高度是3px */
background-size: 100% 1vw;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.25rem;
}
.sign-box {
width: 100%;
display: flex;
flex-wrap: wrap;
background-color: #FFFFFF;
padding-bottom: 1rem;
.sign-item {
flex: 1;
width: 27%;
min-width: 27%;
max-width: 27%;
border: 1px solid #999999;
color: #999999;
margin: 1rem;
margin-right: 0;
margin-bottom: 0;
text-align: center;
padding: 0.5rem 0;
text {
position: relative;
&.required::before {
color: red;
content: "*";
font-size: 0.9rem;
left: -0.5rem;
position: absolute;
}
}
&.checked {
border: 1px solid #199A74;
color: #199A74;
}
}
}
}
.sign-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.block {
background-color: #fff;
border-radius: 0.6rem;
.title {
padding: 1rem 1rem 0.5rem 1rem;
text-align: center;
text {
font-size: 1.15rem;
}
}
.border {
overflow: auto;
border-bottom: 1px solid #F2F2F2;
.fix {
float: left;
padding-top: 0.5rem;
}
}
.cancel-box {
padding: 1rem 0;
margin: 1rem;
text-align: center;
.button {
color: #199A74;
border: 1px solid #199A74;
padding: 0.5rem 1rem;
border-radius: 1rem;
}
}
.confirm-box {
padding: 1rem 0;
margin: 1rem;
text-align: center;
.button {
color: #FFFFFF;
background-color: #199A74;
padding: 0.5rem 1rem;
border-radius: 1rem;
}
}
}
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-09 11:25:53
* @FilePath: /swx/src/pages/createProject/index.vue
* @Description: 文件描述
-->
<template>
<view class="create-project-page">
<view class="activity-title">
<view class="box">
<text class="bg-gradient" style="font-size: 1.25rem;">主办方信息设置</text>
</view>
</view>
<AtInput :border="true" title="主办方名称" type='text' placeholder='请输入主办方名称' v-model:value="username" />
<view style="padding-top: 1rem;">
<text style="font-size: 32rpx; margin-left: 1rem;">用户类型</text>
<view class="sign-box">
<view @tap="onTapType(item)" @longpress="onLongPressType(item)" v-for="(item, index) in userType" :key="index"
class="sign-item" :class="{ 'checked': item.checked }"><text>{{ item.label }}</text></view>
<view class="sign-item" @tap="addSign">
<van-icon name="plus" color="" />
</view>
</view>
<view style="margin: 0 1rem; border-bottom: 1px solid #F2F2F2;"></view>
</view>
<view style="padding-top: 1rem;">
<text style="font-size: 32rpx; margin-left: 1rem;">用户状态</text>
<view class="sign-box">
<view @tap="onTapStatus(item)" @longpress="onLongPressStatus(item)" v-for="(item, index) in userStatus" :key="index"
class="sign-item" :class="{ 'checked': item.checked }"><text>{{ item.label }}</text></view>
<view class="sign-item" @tap="addStatus">
<van-icon name="plus" color="" />
</view>
</view>
<view style="margin: 0 1rem; border-bottom: 1px solid #F2F2F2;"></view>
</view>
<view style="height: 6rem;"></view>
<bottom-button @on-submit="onSubmit">保存</bottom-button>
</view>
<!-- 用户类型弹出框 -->
<van-overlay :show="show_edit_type" z-index="999">
<view class="sign-wrapper">
<view class="block">
<view class="title">
<text class="bg-gradient">用户类型</text>
</view>
<view style="width: 22rem;">
<van-field :value="message" label-class="label-class" input-class="input-class" rows="1" autosize label="字段名称"
type="textarea" placeholder="请输入字段名称（6个字以内）" placeholder-style="color: #999;" customStyle="" inputAlign=""
rightIcon="" :required="true" :maxlength="6" :border="true" @change="onChangeType" />
<van-row>
<van-col span="12">
<view class="cancel-box">
<view class="button" @tap="closeEditType">取消</view>
</view>
</van-col>
<van-col span="12">
<view class="confirm-box">
<view class="button" @tap="confirmEditType">确定</view>
</view>
</van-col>
</van-row>
</view>
</view>
</view>
</van-overlay>
<!-- 用户状态弹出框 -->
<van-overlay :show="show_edit_status" z-index="999">
<view class="sign-wrapper">
<view class="block">
<view class="title">
<text class="bg-gradient">用户状态</text>
</view>
<view style="width: 22rem;">
<van-field :value="message" label-class="label-class" input-class="input-class" rows="1" autosize label="字段名称"
type="textarea" placeholder="请输入字段名称（6个字以内）" placeholder-style="color: #999;" customStyle="" inputAlign=""
rightIcon="" :required="true" :maxlength="6" :border="true" @change="onChangeStatus" />
<van-row>
<van-col span="12">
<view class="cancel-box">
<view class="button" @tap="closeEditStatus">取消</view>
</view>
</van-col>
<van-col span="12">
<view class="confirm-box">
<view class="button" @tap="confirmEditStatus">确定</view>
</view>
</van-col>
</van-row>
</view>
</view>
</view>
</van-overlay>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import { AtInput } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/input.scss";
import bottomButton from "@/components/bottom-button";
const username = ref('');
const onSubmit = (val) => {
console.warn(val);
Taro.showToast({
title: '请检查输入项',
icon: 'error',
duration: 2000
});
// Taro.redirectTo({
// url: '../joinSuccess/index'
// })
}
const userType = ref([{
key: '首次参与',
label: '首次参与',
checked: 1,
}, {
key: '老用户',
label: '老用户',
checked: 1,
}]);
const userStatus = ref([{
key: '跟踪',
label: '跟踪',
checked: 1,
}, {
key: '引导',
label: '引导',
checked: 1,
}]);
// 用户类型
const onTapType = (item) => {
item.checked = !item.checked
}
const onLongPressType = (item) => {
console.warn(item);
show_edit_type.value = true;
}
const show_edit_type = ref(false)
const onChangeType = ({ detail }) => {
console.warn(detail);
checked.value = detail;
}
const closeEditType = () => {
show_edit_type.value = false;
}
const confirmEditType = () => {
show_edit_type.value = false;
userType.value.push({
key: '推荐人',
label: '推荐人',
checked: 1,
})
}
const addSign = () => {
show_edit_type.value = true;
}
// 用户状态
const onTapStatus = (item) => {
item.checked = !item.checked
}
const onLongPressStatus = (item) => {
console.warn(item);
show_edit_status.value = true;
}
const show_edit_status= ref(false)
const onChangeStatus = ({ detail }) => {
console.warn(detail);
checked.value = detail;
}
const closeEditStatus = () => {
show_edit_status.value = false;
}
const confirmEditStatus = () => {
show_edit_status.value = false;
userStatus.value.push({
key: '关注',
label: '关注',
checked: 1,
})
}
const addStatus = () => {
show_edit_status.value = true;
}
</script>
<script>
import "./index.less";
export default {
name: "createProjectPage",
};
</script>
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 16:54:15
* @LastEditTime: 2022-10-09 09:50:24
* @FilePath: /swx/src/pages/projectManage/index.vue
* @Description: 文件描述
-->
......@@ -70,7 +70,9 @@ const joinProject = ref([{
}]);
const onSubmit = () => {
Taro.navigateTo({
url: '../createProject/index'
})
}
</script>
......