裂变星小程序-25.03.04
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.
 
 
 

348 lines
8.8 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',
}"
errorType="toast"
>
<view class="form-item">
<uv-form-item label="用户ID" prop="userId">
<view class="form-item-content">
<text>{{ userId }}</text>
<view style="margin-left: 20rpx;">
<button class="btn-simple" plain @click="$utils.copyText(userId)">
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
</button>
</view>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择头像" prop="headImage">
<view class="form-item-content">
<button
class="btn-avatar"
:plain="true"
:hairline="false"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
:src="form.headImage || '../static/auth/avatar.png'"
style="width: 68rpx; height: 68rpx;"
mode=""
></image>
</button>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="昵称" labelWidth="105rpx" prop="headTitle">
<view class="form-item-content">
<formInput v-model="form.headTitle" placeholder="请输入你的昵称" width="540rpx"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择封面图" prop="indexImage">
<view class="form-item-content">
<formUpload v-model="form.indexImage">
<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="num">
<view class="form-item-content">
<formNumberBox v-model="form.num" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择二维码" prop="wxCodeImage">
<view class="form-item-content">
<formUpload v-model="form.wxCodeImage">
<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="textDetails" labelPosition="top">
<view style="margin-top: 32rpx;">
<formTextarea
v-model="form.textDetails"
placeholder="请输入你的文案"
></formTextarea>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
<!-- 审核通过 -->
<button v-if="status === 1" class="button-submit" open-type="share">
发布
</button>
<!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
<button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
提交审核
</button>
</view>
</template>
<script>
import { mapState } from 'vuex'
import formInput from '../components/formInput.vue'
import formNumberBox from '../components/formNumberBox.vue'
import formUpload from '../components/formUpload.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formInput,
formNumberBox,
formUpload,
formTextarea,
},
data() {
return {
id: null,
status: null,
form: {
userId: null,
headImage: null,
headTitle: null,
indexImage: null,
num: 0,
wxCodeImage: null,
textDetails: null,
},
rules: {
'headImage': {
type: 'string',
required: true,
message: '请选择头像',
},
'headTitle': {
type: 'string',
required: true,
message: '请输入你的昵称',
},
'indexImage': {
type: 'string',
required: true,
message: '请选择封面图',
},
'num': {
type: 'number',
required: true,
message: '请设置转发次数(大于0)',
validator: (rule, value, callback) => {
if (value > 0) {
return true
}
return false;
},
},
'wxCodeImage': {
type: 'string',
required: true,
message: '请选择二维码',
},
'textDetails': {
type: 'string',
required: true,
message: '请输入你的文案',
},
},
}
},
computed: {
...mapState(['userInfo']),
userId() {
return this.form.userId || this.userInfo?.intentionCode
},
disabled() {
// todo
return ![0, 1].includes(this.status)
}
},
onLoad(option) {
const { id } = option
if (!id) {
return
}
this.id = id
this.fetchDetails(id)
},
onReady() {
this.$refs.form.setRules(this.rules);
},
onShareAppMessage(res) {
const {
textDetails,
indexImage,
} = this.form
let o = {
title : textDetails,
imageUrl: indexImage,
path: `/pages_order/sharing/personal?id=${this.id}&state=0&shareId=${this.userInfo.id}`
}
//调用增加分享次数的方法
const params = {
id:this.id,
state:"0",
}
this.$fetch('addLogShareInfo', params)
this.isLocked = false
return o
},
methods: {
onChooseAvatar(res) {
this.$Oss.ossUpload(res.target.avatarUrl)
.then(url => {
this.form.headImage = url
})
},
async fetchDetails(id) {
try {
const result = await this.$fetch('getShareInfo', { id })
const {
userId,
headImage,
headTitle,
indexImage,
num,
wxCodeImage,
textDetails,
status,
} = result || {}
this.form = {
userId,
headImage,
headTitle,
indexImage,
num,
wxCodeImage,
textDetails,
}
this.status = status
} catch (err) {
}
},
async onSubmit() {
try {
await this.$refs.form.validate()
const {
headImage,
headTitle,
indexImage,
num,
wxCodeImage,
textDetails,
} = this.form
const params = {
userId: this.userId,
headImage,
headTitle,
indexImage,
num,
wxCodeImage,
textDetails,
}
if (this.id) {
params.id = this.id
}
await this.$fetch('saveOrUpdateShare', params)
uni.showToast({
title: '提交成功',
icon: 'none'
})
setTimeout(uni.navigateBack, 1000, -1)
} catch (err) {
}
},
}
}
</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>