proginn-frontend/pages/otherpage/user/addConnect.vue

<template>
  <div class="userAddConnect">
    <div class="contentArea">
      <div class="cellBox" v-for="item in userData">
        <div class="stitle">{{item.title}}</div>
        <input
          type="text"
          v-model="item.value"
          :placeholder="item.placeholder"
          v-if="item.type === 'text'" />
        <el-select v-model="item.value" :placeholder="item.placeholder" v-else-if="item.type==='select'">
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
      </div>
      <div class="submitBtn" @click="submitHandler">
        <p>保存</p>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 名片夹
   */
  import Vue from 'vue'
  import { InfiniteScroll, Loadmore, CellSwipe, MessageBox } from 'mint-ui';
  import MintUI from 'mint-ui';
  import "mint-ui/lib/style.css";

  const mix =  {
    data() {
      return {
        // 详情id
        detailID: this.$route.params.detail,
      }
    },
    methods: {

    }
  }

  export default {
    name: 'UserAddConnect',
    mixins: [mix],
    data() {
      return {
        userData: [
          { title: '联系电话', type:"text", name: 'phone', value: '', placeholder: "请输入您的联系电话(选填)" },
          { title: '微信号',  type:"text",name: 'weixin', value: '', placeholder: "请输入您的微信号(选填)"  },
          { title: '企业官网',  type:"text", name: 'website', value: '', placeholder: "请输入您的企业官网链接，需以http://开头（选填）"},
          {
            title: '展示信息设置',  type:"select", name: 'qq', value: '', placeholder:  "选择您需要展示的联系方式",
            options: [{label: "不展示", value: 1},{label: "联系电话", value: 2},{label: "微信号", value: 3},{label: "企业官网", value: 4},]
          },
        ],
        loading: true,
      }
    },
    async created() {
    },
    async mounted() {
      await this.needLogin()
      this.getConnectInfo()
    },
    methods: {
      /** 获取 */
      getConnectInfo() {
        this.loading = true
        this.$axios.post('/api/nameCard/list', {}).then(res => {
          if (res.data.status === 1) {

          } else {
            this.$message.error('查询失败:' + res.info)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      jumpUserPage() {
        const { id } = this.selectedItem
        let url = `/wo/${id}`
        if (this.$deviceType.app) {
          location.href = `proginn://jump?path=${url}`
        } else {
          location.href = url
        }
      },

      calcUserVip(item) {
        const { isVip, vipTypeID } = item
        return { [ 'vip' + vipTypeID ]: isVip }
      },

      submitHandler() {
        if (!this.checkSubmit()) {
          return
        }
        //todo 存入
      },

      checkSubmit() {

        return true
      }
    },

  }
</script>
<style lang="scss">
  @import "../../../assets/css/scssCommon";
  .el-select  {
    width: 100%;
    .el-input__inner {
      margin-top: pxtovw(2);
      width: pxtovw(355);
      height: pxtovw(44);
      background: rgba(255, 255, 255, 1);
      border-radius: pxtovw(3);
      border:pxtovw(1) solid rgba(146,154,164,0.2);
      padding: pxtovw(15) pxtovw(10);
    }
  }

  input::placeholder {
    color: #AFB9C4;
    height:pxtovw(14);
    font-size:pxtovw(14);
    font-weight:400;
    line-height:pxtovw(14);
  }
</style>

<style lang="scss" scoped>
  @import '../../../assets/css/otherpage/user/addConnect.scss';
</style>