jje_uniapp/orderPages/storeService/index.vue

<template>
  <view class="page">
    <view class="flex-col group">
      <view class="serob"><text>服务对象</text></view>
      <view class="serobItems flex-row">
        <scroll-view class="scrollX" scroll-x>
          <view class="flex-row">
            <view class="serobItem flex-col" v-for="(item,index) in serviceObjectList" :key="index">
              <view class="serobImgView" @click="selectServiceObject(item)">
                <image class="serobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/logo.png'"></image>
              </view>
              <text class="serobName">{{item.nickName || '未填写'}}</text>
              <view class="serobV" v-if="item.select === true">
                <image class="serobVicon" src="/static/order/ud20.png"></image>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="addSerobImg" @click="addServiceObject">
          <text>+</text>
        </view>
      </view>
    </view>


    <view class="flex-row hintView">
      <view class="flex-col justify-center">
        <view class="hint">
          <text>!</text>
        </view>
      </view>
      <view class="hintCentent">
        <text>娇宝，此排队提交后只针对一个服务对象，服务对象指接受娇骄儿理发服务的儿童</text>
      </view>

    </view>

    <view class="flex-col group marginTop" v-for="(item, index) in  orderParam.childService" :key="index">
      <view class="flex-row">
        <image class="selectSerobImg" mode="aspectFill" :src="item.facePhotoUrl || '/static/logo.png'"></image>
        <text class="selectSerobName">{{item.nickName || '未填写'}}</text>
      </view>

      <view class="flex-row  groupItem ">
        <view class="groupItemKey ">
          <text>服务日期</text>
        </view>
        <view class="flex-row justify-between groupItemContent ">
          <text>{{ orderParam.serviceDate || '请选择服务日期' }}</text>
        </view>
      </view>

      <view class="flex-row  groupItem">
        <view class="groupItemKey">
          <text>服务人员</text>
        </view>
        <view class="flex-row justify-between groupItemContent" >
          <text>系统随机</text>
        </view>
      </view>

      <view class="flex-row  groupItem">
        <view class="groupItemKey">
          <text>服务时段</text>
        </view>
        <view class="flex-row justify-between groupItemContent">
          <text>系统随机</text>
        </view>
      </view>
    </view>


    <view class="flex-col group marginTop">
      <view class="groupItemKey">
        <text>服务定制</text>
      </view>
      <view class="textareaView">
        <textarea v-model="orderParam.remark" placeholder-style="color:#999999;fontSize:28rpx" placeholder="如有其它特殊需求，请在此输入您的需求" />
      </view>
    </view>

    <view class="tabBarLineHeight "></view>
    <view class="tabBarView">
      <view class="submitButton " @click="commonGeneralOrder">提交</view>
    </view>

  </view>
</template>

<script>

export default {

  components: {

  },
  data() {
    return {
      userInfo:{},
      store:{},
      serviceObjectList: [],
      requestStatus: false,
      orderParam:{
        orderType: 1,
        serviceAttribute: 1,
        serviceStoreId: '',
        remark: '',
        serviceDate:'',
        childService:[
          // {
          //   periodDate:'',//回显需要，不做参数
          //   serviceObjectId: '',
          //   facePhotoUrl:'', //回显需要，不做参数
          //   nickName:'', //回显需要，不做参数
          //   serviceUserId: '',
          //   personName:'',//回显需要，不做参数
          //   fee:'',//回显需要，不做参数
          //   serviceStartTime: ''
          // }
        ]
      }

    }
  },
  onLoad() {
    this.store = uni.getStorageSync('storeInfo')
    this.userInfo = uni.getStorageSync('userInfo')
    this.orderParam.serviceStoreId = this.store.storeId
    let date = new Date();
    this.orderParam.serviceDate = date.getFullYear() + '-' + ('0' + (date.getMonth() +1) ).slice(-2) + '-' + ('0' + date.getDate()).slice(-2)

  },
  onShow() {
    // 服务对象
    this.listServiceObject()
  },
  methods: {

    // 查询服务对接信息列表
    listServiceObject() {
      this.$api.listServiceObject(this.reqParm).then((res) => {
        console.log(res)
        this.serviceObjectList = res.data.data
        this.getImgUrlByBannerOssId(this.serviceObjectList);

        if (this.orderParam.childService.length === 0) {
          let selectServiceObject = this.serviceObjectList[0]
          this.serviceObjectList[0].select = true

          let childService ={
            periodDate: '',
            serviceObjectId: selectServiceObject.id,
            facePhotoUrl:selectServiceObject.facePhotoUrl,
            nickName:selectServiceObject.nickName,
            serviceUserId: -1 ,
            fee:'' ,
            serviceStartTime: '' ,
          }
          this.orderParam.childService.push(childService)
        } else {
          for (let selectServiceObject of this.orderParam.childService) {
            for (let serviceObject of this.serviceObjectList) {
              if (selectServiceObject.id === serviceObject.id) {
                serviceObject.select = true
              }
            }
          }
        }


      })
    },
    // 获取图片
    getImgUrlByBannerOssId(items) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].facePhoto) {
          this.$api.getImgUrlByOssId({
            ossId: items[i].facePhoto
          }).then(res => {
            items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
            this.$set(this.serviceObjectList, i, items[i])
            if (i === 0){
              this.orderParam.childService[0].facePhotoUrl =res.data.data[0].url.replace(/^http:/, "https:")
            }
          })
        }
      }
    },

    addServiceObject() {
      uni.navigateTo({
        url: '/myPages/ServiceObjectManagement/index'
      })
    },

    selectServiceObject(item) {
      if (item.select) {
        this.orderParam.childService = this.orderParam.childService.filter(selectServiceObject =>
                selectServiceObject.serviceObjectId !== item.id)
      } else {
        let childService ={
          periodDate: '',
          serviceObjectId: item.id,
          facePhotoUrl:item.facePhotoUrl,
          nickName:item.nickName,
          serviceUserId: -1 ,
          fee:'' ,
          serviceStartTime: '' ,
        }
        this.orderParam.childService.push(childService)

      }
      item.select = !item.select
      this.price = 0
      for (let childService of this.orderParam.childService) {
        this.price =  this.price * 1 + childService.fee * 1
      }
    },



    commonGeneralOrder() {


      if(!this.orderParam.childService.length){
        uni.$u.toast('请选择服务对象')
        return
      }
      if (this.requestStatus) {
        return;
      }
      this.requestStatus = true

      this.$api.commonGeneralOrder(this.orderParam).then(res => {
        this.requestStatus = false
        uni.switchTab({
          url: '/pages/order/index'
        })

      }).catch(err=>{
        this.requestStatus = false
      })
    }

  }
}
</script>

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