pet_uni/components/PetPage/index.vue

<template>
	<view class="pet-page-container" :style="{width:buttonWidth}">
    <view class="pet-page-capsule-container row">
      <view class="pet-page-capsule col-4" v-for="(item,index) in petTypeList"
            :class="{active:(index === petTypeChecked)}" @click="selectPetType(index)">
        {{item.label}}
      </view>
    </view>
	</view>
  <view class="pet-page-group row">
    <view class="order-item row">
      <view class="item-title">
        宝贝姓名
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-input inputAlign="right" placeholder="请输入"></u-input>
        </view>
      </view>
    </view>

    <view class="order-item row">
      <view class="item-title">
        宝贝品种
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-input inputAlign="right" placeholder="请输入"></u-input>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝体重(KG)
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-number-box :min="1" :max="1000" button-size="36" inputWidth="50" buttonSize="50"></u-number-box>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝生日
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝性别
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        最近疫苗时间
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        最近驱虫时间
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        是否有户口
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝图片
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-upload
              width="160"
              height="160"
              :fileList="imageList"
              name="img"
              multiple
              :maxCount="10"
              :previewFullImage="true"
              uploadIcon="plus"
              @afterRead="afterImgRead"
              @delete="deleteImg"
          ></u-upload>
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝视频
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          <u-upload
              width="160"
              height="160"
              :fileList="imageList"
              name="img"
              multiple
              :maxCount="10"
              :previewFullImage="true"
              uploadIcon="plus"
              @afterRead="afterImgRead"
              @delete="deleteImg"
          ></u-upload>
        </view>
      </view>
    </view>
  </view>
  <view class="pet-page-button row">
    <view class="col-12" style="justify-content: center;" v-if="type === 'lists'">
      <view class="" style="display: inline-block;">
        <MzButton
            title="添加萌宠"
            button-color="#FFFFFF"
            font-color="#262626"
            button-width="300rpx"
            class=""
        >
        </MzButton>
      </view>
    </view>
    <view class="col-6" v-if="type === 'create' && showCancel">
      <MzButton
          title="取消"
          button-color="#FFFFFF"
          font-color="#262626"
          button-width="300rpx"
          class=""
      >
      </MzButton>
    </view>
    <view class="col-6" v-if="type === 'create'">
      <MzButton
          title="保存"
          button-color="#4DC3B8"
          font-color="#fff"
          button-width="300rpx"
          class=""
          @click="submit"
      >
      </MzButton>
    </view>
  </view>
</template>

<script>
	import { imghost } from '@/config/host.js';
  import MzButton from "@/components/MzButton/Index.vue";
  import {editPet} from "@/api/pet";
  import {getSTS} from "@/api/other";

  export default{
		name:'PetPage',
		props:{
			title:{
				type:String,
				default:'确认'
			},
			buttonColor:{
				type:String,
				default:'#FFFFFF'
			},
			fontColor:{
				type:String,
				default:'#131313'
			},
			buttonWidth:{
				type:String,
				default:'100%'
			},
			isBackground:{
				type:Boolean,
				default:true
			},
			fontSize:{
				type:String,
				default:'30rpx',
			},
			paddingTb:{
				type:String,
				default:'15rpx',
			},
			btnStyle:{
				type:Object,
				default:{},
			},
			type:{
				type:String,
				default:'create',
			},
			showCancel:{
				type:Boolean,
				default:false,
			},
      autoBack:{
				type:Boolean,
				default:false,
			},
		},
    components:{
      MzButton
    },
		data() {
			return {
				loading: true,
				buttonBackground:imghost+"/static/image/small-button-background.png",
				staticImage:{
					buttonBackground:imghost+'/static/image/small-button-background.png'
				},
        petTypeList:[
          {
            label:'喵喵',
            value:'1',
          },{
            label:'汪汪',
            value:'2',
          },{
            label:'其他萌宠',
            value:'3',
          },
        ],
        petTypeChecked:0,
			}
		},
		onLoad() {
		
		},
		methods: {
      selectPetType(index){
        this.petTypeChecked = index;
      },
      submit(){
        let data = {
          "id": "",
            "avatar": "",
            "name": "124123",
            "type_name": "12412",
            "type": "1",
            "weight": "12",
            "birthday": "2020/01/04",
            "sex": "1",
            "last_vaccine_time": "",
            "last_insect_repellent_time": "",
            "remarks": "121122",
            "is_home": "1",
            "video": ""
        }
        // editPet(data).then(res => {
        //   console.log(res)
        // })
        getSTS({}).then(res => {
          console.log(res)
        })
      }
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>