You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
6.6 KiB
221 lines
6.6 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="个人分享" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view class="content">
|
|
<uv-form
|
|
ref="form"
|
|
:model="form"
|
|
:rules="rules"
|
|
labelPosition="left"
|
|
labelWidth="300rpx"
|
|
:labelStyle="{
|
|
color: '#1B1B1B',
|
|
fontSize: '32rpx',
|
|
fontWeight: 'bold',
|
|
}"
|
|
>
|
|
<view class="form-item">
|
|
<uv-form-item label="用户ID" prop="id">
|
|
<view class="form-item-content">
|
|
<template v-if="form.id">
|
|
<text>{{ form.id }}</text>
|
|
<view style="margin-left: 20rpx;">
|
|
<button class="btn-simple" plain @click="$utils.copyText(form.id)">
|
|
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
|
|
</button>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<!-- todo: 选择头像 -->
|
|
<view class="form-item">
|
|
<uv-form-item label="选择头像" prop="imageUrl">
|
|
<view class="form-item-content">
|
|
<button
|
|
class="btn-avatar"
|
|
:plain="true"
|
|
:hairline="false"
|
|
open-type="chooseAvatar"
|
|
@chooseavatar="onChooseAvatar"
|
|
>
|
|
<image
|
|
:src="form.avatarUrl || '../static/auth/avatar.png'"
|
|
style="width: 68rpx; height: 68rpx;"
|
|
mode=""
|
|
></image>
|
|
</button>
|
|
<!-- <formUpload v-model="form.avatarUrl">
|
|
<template v-slot="{ value }">
|
|
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
|
|
<image
|
|
:src="value"
|
|
mode="aspectFill"
|
|
style="width: 68rpx; height: 68rpx;"
|
|
radius="14rpx"
|
|
/>
|
|
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
|
|
</view>
|
|
</template>
|
|
</formUpload> -->
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="昵称" labelWidth="105rpx" prop="nickName">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.nickName" placeholder="请输入你的群名称" width="540rpx"></formInput>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="选择封面图" prop="imageUrl">
|
|
<view class="form-item-content">
|
|
<formUpload v-model="form.imageUrl">
|
|
<template v-slot="{ value }">
|
|
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
|
|
<image
|
|
:src="value"
|
|
mode="aspectFill"
|
|
style="width: 68rpx; height: 68rpx;"
|
|
radius="14rpx"
|
|
/>
|
|
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
|
|
</view>
|
|
</template>
|
|
</formUpload>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="设置转发次数（次）" prop="times">
|
|
<view class="form-item-content">
|
|
<formNumberBox v-model="form.times" ></formNumberBox>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="选择二维码" prop="qrCode">
|
|
<view class="form-item-content">
|
|
<formUpload v-model="form.qrCode">
|
|
<template v-slot="{ value }">
|
|
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
|
|
<image
|
|
:src="value"
|
|
mode="aspectFill"
|
|
style="width: 45rpx; height: 45rpx;"
|
|
radius="14rpx"
|
|
/>
|
|
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
|
|
</view>
|
|
</template>
|
|
</formUpload>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="文案描述" prop="description" labelPosition="top">
|
|
<view style="margin-top: 32rpx;">
|
|
<formTextarea
|
|
v-model="form.description"
|
|
placeholder="请输入你的文案"
|
|
></formTextarea>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
|
|
<!-- 审核通过 -->
|
|
<button v-if="auditStatus === 1" class="button-submit" @click="onPublish">
|
|
发布
|
|
</button>
|
|
<!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
|
|
<button v-else-if="![0,2].includes(auditStatus)" class="button-submit" @click="onSubmit">
|
|
提交审核
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import formNumberBox from '../components/formNumberBox.vue'
|
|
import formUpload from '../components/formUpload.vue'
|
|
import formTextarea from '../components/formTextarea.vue'
|
|
|
|
export default {
|
|
components: {
|
|
formNumberBox,
|
|
formUpload,
|
|
formTextarea,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
auditStatus: null,
|
|
form: {
|
|
id: null,
|
|
avatarUrl: null,
|
|
nickName: null,
|
|
imageUrl: null,
|
|
times: 10,
|
|
qrCode: null,
|
|
description: null,
|
|
},
|
|
rules: {
|
|
// todo
|
|
},
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
const { id } = option
|
|
|
|
this.id = id
|
|
// todo: init data by id
|
|
},
|
|
methods: {
|
|
onChooseAvatar(res) {
|
|
this.$Oss.ossUpload(res.target.avatarUrl)
|
|
.then(url => {
|
|
this.form.avatarUrl = url
|
|
})
|
|
},
|
|
onSubmit() {
|
|
// todo
|
|
|
|
const params = { ...this.form }
|
|
|
|
this.$api('submitPersonalSharing', params)
|
|
},
|
|
onPublish() {
|
|
// todo
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '../styles/pageForm.scss';
|
|
|
|
|
|
.btn-avatar {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.button-submit {
|
|
margin: 0;
|
|
position: fixed;
|
|
bottom: 138rpx;
|
|
left: 20rpx;
|
|
width: calc(100% - 40rpx);
|
|
height: 90rpx;
|
|
}
|
|
</style>
|