20 changed files with 649 additions and 274 deletions
@ -1,3 +1,3 @@ |
|||||
# Huiqitong |
# Huiqitong |
||||
|
|
||||
惠企通 |
惠企帮 |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="formlist"> |
||||
|
<u-form :model="form" ref="uFormRef" labelPosition="top" :rules="rules"> |
||||
|
<u-form-item label="姓名" prop="name"> |
||||
|
<u-input v-model="form.name" placeholder="请输入真实姓名" placeholderStyle="color: #D3D3D3;" /> |
||||
|
</u-form-item> |
||||
|
<u-form-item label="会员标签" prop="type"> |
||||
|
<u-input v-model="form.type" placeholder="请选择" placeholderStyle="color: #D3D3D3;" |
||||
|
suffixIcon="arrow-down" @focus="show=true" /> |
||||
|
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=false"></u-picker> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="个人介绍" prop="emil"> |
||||
|
<u-textarea v-model="form.emil" placeholder="请输入个人介绍" placeholderStyle="color: #D3D3D3;" ></u-textarea> |
||||
|
</u-form-item> |
||||
|
<u-form-item label="个人二维码" prop="img"> |
||||
|
<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1" :imageMode="'heightFix'" |
||||
|
:width="auto" :height="144"> |
||||
|
<view class="yyzz" v-if="form.img === ''"> |
||||
|
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image> |
||||
|
请上传可以联系到自己的微信二维码 |
||||
|
</view> |
||||
|
<image v-else style="width: 100%;height: 288rpx;margin-top: 12rpx;" |
||||
|
:src="baseurl+ '/' + form.img" mode="scaleToFill"></image> |
||||
|
</u-upload> |
||||
|
</u-form-item> |
||||
|
</u-form> |
||||
|
</view> |
||||
|
<view class="sumitbotton"> |
||||
|
<view class="button" @click="submit"> |
||||
|
确认提交 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { |
||||
|
ref |
||||
|
} from 'vue'; |
||||
|
|
||||
|
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL) |
||||
|
|
||||
|
// 响应式表单数据 |
||||
|
const form = ref({ |
||||
|
name: '', |
||||
|
type: '', |
||||
|
number: '', |
||||
|
emil: '', |
||||
|
img: '', |
||||
|
case: '' |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
const show = ref(false); |
||||
|
const columns = reactive([ |
||||
|
['中国', '美国', '日本'] |
||||
|
]); |
||||
|
|
||||
|
// 校验规则 |
||||
|
const rules = { |
||||
|
name: [{ |
||||
|
required: true, |
||||
|
message: '请输入姓名', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
type: [{ |
||||
|
required: true, |
||||
|
message: '请输入标签', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
number: [{ |
||||
|
required: true, |
||||
|
message: '请输入联系方式', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
emil: [{ |
||||
|
required: true, |
||||
|
message: '请输入邮箱地址', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
img: [{ |
||||
|
required: true, |
||||
|
message: '请上传宣传封面', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
case: [{ |
||||
|
required: true, |
||||
|
message: '请输入真实案例', |
||||
|
trigger: ['blur', 'change'], |
||||
|
}, ], |
||||
|
}; |
||||
|
|
||||
|
const afterRead = async (e) => { |
||||
|
console.log(e); |
||||
|
uni.uploadFile({ |
||||
|
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
||||
|
filePath: e.file.url, |
||||
|
name: 'file', |
||||
|
header: { |
||||
|
'token': uni.getStorageSync('access_token') |
||||
|
}, |
||||
|
success: async (val) => { |
||||
|
if (JSON.parse(val.data).data.url) { |
||||
|
console.log(JSON.parse(val.data).data.url); |
||||
|
} |
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
console.log('失败', res); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 表单引用 |
||||
|
const uFormRef = ref(null); |
||||
|
|
||||
|
const confirm = (val) => { |
||||
|
console.log(val.value[0]); |
||||
|
form.value.type = val.value[0] |
||||
|
show.value = false |
||||
|
} |
||||
|
|
||||
|
// 提交方法 |
||||
|
function submit() { |
||||
|
uFormRef.value.validate().then(valid => { |
||||
|
if (valid) { |
||||
|
uni.$u.toast('校验通过') |
||||
|
} else { |
||||
|
uni.$u.toast('请填写完整') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
// 处理验证错误 |
||||
|
uni.$u.toast('请填写完整') |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.container { |
||||
|
background-color: #FFFFFF; |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
overflow-y: hidden; |
||||
|
|
||||
|
.formlist { |
||||
|
width: 100%; |
||||
|
max-height: calc(100vh - 168rpx); |
||||
|
background: #e9ecf3; |
||||
|
padding: 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.sumitbotton { |
||||
|
width: 100%; |
||||
|
height: 168rpx; |
||||
|
background: #FFFFFF; |
||||
|
/* 标签栏投影 */ |
||||
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
|
||||
|
.button { |
||||
|
width: 574rpx; |
||||
|
height: 96rpx; |
||||
|
border-radius: 248rpx; |
||||
|
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 32rpx; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.yyzz { |
||||
|
margin-top: 12rpx; |
||||
|
width: 100%; |
||||
|
height: 288rpx; |
||||
|
border-radius: 16rpx; |
||||
|
background: #FFFFFF; |
||||
|
display: grid; |
||||
|
align-content: center; |
||||
|
justify-items: center; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 70rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #CCCCCC; |
||||
|
} |
||||
|
|
||||
|
:deep(.u-upload) { |
||||
|
.u-upload__wrap { |
||||
|
view { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style> |
||||
|
.u-input { |
||||
|
background-color: #FFFFFF; |
||||
|
height: 100rpx !important; |
||||
|
} |
||||
|
|
||||
|
.u-form-item__body__left__content__label { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 444 B |
|
After Width: | Height: | Size: 608 B |
|
After Width: | Height: | Size: 523 B |
Loading…
Reference in new issue