fission-star-applet-250304/pages_order/record/personalSharing.vue

<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 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,
        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>