jje_uniapp/orderPages/bookService/index.vue

<template>
    <view class="page">
        <view class="flex-col group">
            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务对象</text>
                </view>
                <view class="flex-row justify-between groupItemContent" @click="getServiceObject">
                    <text>{{serviceObject.nickName || '请选择对象' }}</text>
                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                </view>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务类别</text>
                </view>
                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{storeServiceList[index].typeName || '请选择服务类别' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>

        </view>


        <view class="flex-col group marginTop">

            <view class="flex-row ">
                <view class="hint">
                    <text>!</text>
                </view>
                <view class="hintCentent">
                    <text>需提前一天起预约，取消订单服务需服务前一天取消</text>
                </view>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务日期</text>
                </view>
                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{storeServiceList[index].typeName || '请选择服务日期' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>

            <view class="flex-col justify-around groupItem">

                <view class="groupItemKey">
                    <text>服务时段</text>
                </view>
                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{storeServiceList[index].typeName || '服务时段' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务人员</text>
                </view>
                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{storeServiceList[index].typeName || '请选择服务人员' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>


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

        <view :style="{'height':'236rpx'}"></view>

        <view class="flex-col  group2 ">
            <view class="btnTitle">
                <text>提交订单之前需支付预约服务费用</text>
            </view>
            <view class="btn flex-row justify-between">
                <view>
                    <text class="title">待支付</text>
                    <text class="num">￥120</text>
                </view>
                <view class="btnRight">
                    <text>提交</text>
                </view>
            </view>
        </view>

    </view>
</template>

<script>

export default {

    data() {
        return {
            store:{},
            serviceObject:{},
            storeServiceList:[],
            index:0
        }
    },
    onLoad() {
        this.listServiceObject()
    },

    onShow(){
        // 服务对象
        uni.$off()
        uni.$on('selectedServiceObject', this.selectedServiceObject);

        this.store = uni.getStorageSync('storeInfo')
        // this.storeAllServiceList()
        this.category()
    },

    methods: {

        // 查询服务对接信息列表
        listServiceObject(){
            this.$api.listServiceObject(this.reqParm).then((res)=>{
                console.log('++++++++++listServiceObject+++++++++++',res)
                this.getImgUrlByOssId(res.data.data[0]);
            }).catch(() =>{
                uni.showToast({
                    title: "操作失败"
                })
            });
        },
        // 获取图片
        getImgUrlByOssId(data){
            if (data.facePhoto){
                this.$api.getImgUrlByOssId({ossId:item.facePhoto}).then(res=>{
                    console.log('+++++++++++++getImgUrlByOssId+++++++++++++++',res)
                })
            }
            this.serviceObject = data
        },

        getServiceObject(){
            uni.navigateTo({
                url:'/orderPages/serviceObject/index'
            })
        },
        selectedServiceObject(e){
            this.serviceObject = e
        },

        bindPickerChange(e){
            this.index= e.detail.value
            console.log(e)
        },

        category(){
            this.$api.category({storeId:this.store.storeId}).then(res=>{
                this.storeServiceList= res.data.data
            })

        },

    }
}
</script>

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