20 changed files with 649 additions and 274 deletions
@ -1,3 +1,3 @@ |
|||
# 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