jje_uniapp/orderPages/serviceItems/index.vue

<template>
    <view class="content">
        <view class="page">
                <view class="block_2 flex-row justify-start" v-for="(item,index) in projects.projectVos" :key="index" @click="clickItem(item)">

                    <view class="flex-col justify-center ">
                        <u-icon v-if="item.id === serviceProjectId" name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
                        <u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
                    </view>

                    <view class="outView ">
                        <text lines="1" class="text_3">{{item.serviceName}}</text>

                            <view class="group_2 ">
                                <view class="image-text_2">
                                    <u-icon name="server-man" size="16"></u-icon>
                                    <text lines="1" class="text-group_2">服务人员：</text>
                                    <text lines="1" class="text_5">{{projects.personName}}</text>
                                </view>
<!--                                <view class="group_3">-->
<!--                                    <u-icon name="clock" size="16"></u-icon>-->
<!--                                    <text lines="1" class="text-group_2">服务时间：</text>-->
<!--                                    <text lines="1" decode="true" class="text_5">2023-8-14&nbsp;12:33:55</text>-->
<!--                                </view>-->
                            </view>

                        <view class="text-wrapper_3  flex-row justify-start">
                            <text lines="1" class="text_7">标准价：</text>
                            <text lines="1" class="text_8">¥{{item.standardPrice}}</text>
<!--                            <text lines="1" class="text_9 text_7">会员价：</text>-->
<!--                            <text lines="1" class="text_8">¥{{item.memberPrice}}</text>-->
                        </view>
                        <view class="box_4"></view>
                    </view>



                </view>

            <view class="tabBarLineHeight"></view>

            <view class="bottomView">

                <view class="ticketView  flex-row">
                    <view class="ticketBtn" :class="{'ticketColor': ticketBtnIndex === 1}" @click="clickTicketBtn(1)">
                        <text>使用权益券</text>
                    </view>
                    <view class="ticketBtn" :class="{'ticketColor': ticketBtnIndex === 2}" @click="clickTicketBtn(2)">
                        <text>使用优惠券</text>
                    </view>
                </view>

                <view v-if="ticketBtnIndex === 1" class="flex-row justify-center" @click="goUseRights">
                    <view class="block_3 ">
                        <text lines="1" class="text_15">权益卡</text>
                        <view>
                            <view class="flex-row justify-between" v-if="equitys.length>0">
                                <view class="flex-row">
                                    <text class="text-group_5" v-for="(iter,i) in equitys" :key="i">{{iter.description}}</text>
                                </view>
                                <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                            </view>
                            <view v-else class="image-text_4 ">
                                <text  class="text-group_4">未选择</text>
                                <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                            </view>
                        </view>

                    </view>
                </view>

                <view v-if="ticketBtnIndex === 2" class="flex-row justify-center" @click="goUseCoupons">
                    <view class="block_3 ">
                        <text lines="1" class="text_15">优惠券</text>
                        <view>
                            <view class="flex-row justify-between" v-if="coupons.length>0">
                                <view class="flex-row">
                                    <text class="text-group_5" v-for="(iter,i) in coupons" :key="i">{{iter.name}}:-￥{{iter.discountsPrice}}</text>
                                </view>
                                <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                            </view>
                            <view v-else class="image-text_4 ">
                                <text  class="text-group_4">未选择</text>
                                <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                            </view>
                        </view>

                    </view>
                </view>

                <view class="flex-row justify-center">
                    <view class="submitButton" @click="addChildProject">确定</view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            coupons:[],
            equitys:[],
            couponIds:'',
            tabIndex: 3,
            projects:{},
            serviceStationId:'',
            orderId:'',
            serviceProject:{},
            serviceProjectId:'',
            serviceObjectId:'',
            ticketBtnIndex:1
        }
    },
    onLoad(e) {
        this.orderId=e.orderId
        this.serviceStationId=e.serviceStationId
        this.serviceObjectId=e.serviceObjectId
        this.getStationById(e.serviceStationId)

        uni.$off('getUseCoupons')
        uni.$on('getUseCoupons',this.getUseCoupons)
        uni.$on('getEquity',this.getEquity)

    },

    methods: {

        clickTicketBtn(ticketBtnIndex){
            this.ticketBtnIndex =ticketBtnIndex
        },

        getEquity(e){
            this.equitys =e
        },

        goUseRights(){

            if (this.serviceProjectId.length === 0){
                uni.$u.toast('请先选择服务项目')
                return
            }
            uni.navigateTo({
                url:'/storePages/useRights/index?serviceProjectId=' + this.serviceProjectId + '&serviceObjectId=' + this.serviceObjectId
            })
        },

        getUseCoupons(e){
            console.log('++++++++getUseCoupons+++++++++++++++',e)
            this.coupons= e
            this.couponIds = ''
            for (let eElement of e) {
                this.couponIds += eElement.id + ','
            }
            if (this.couponIds.length>0){
                this.couponIds = this.couponIds.substring(0,this.couponIds.length-1)
            }
        },

        goUseCoupons(){
            if (this.serviceProjectId.length === 0){
                uni.$u.toast('请先选择服务项目')
                return
            }
            uni.navigateTo({
                url: '/orderPages/useCoupons/index?standardPrice='+this.serviceProject.standardPrice
            })

        },

        clickItem(item){
            if (this.equitys.length>0){
                if (item.id != this.equitys[0].serviceObjectId){
                    this.equitys=[]
                }
            }

            this.serviceProjectId = item.id
            this.serviceProject = item
        },

        addChildProject(){

            if (this.ticketBtnIndex === 1){
                this.couponIds=''
            }

            if (this.ticketBtnIndex === 2){
                this.equitys=[]
            }

            if (this.id === ''){
                uni.$u.toast("请选择服务项目")
            }
            this.$api.addChildProject({
                orderId:this.orderId,
                serviceProjectId:this.serviceProjectId,
                servicePersonId:this.projects.personId,
                serviceStationId:this.serviceStationId,
                couponIds:this.couponIds,
                userEquityCardId:this.equitys[0].id
            }).then(res=>{
                uni.navigateTo({
                    url:'/orderPages/orderDetail/index?id='+ this.orderId
                })
            })


        },

        getStationById(qeCode){
            this.$api.getStationById({
                stationId:qeCode
            }).then(res=>{
                console.log('++++++++getStationById+++++++++++',res)

                this.projects=res.data.data

            })
        }


    }
}
</script>

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