aosiyiliaouniapp/pages/memberList/member.vue

<template>
    <view class="page">
		<hqs-popup class="hqs-popup" height="40vh" title="向下滑动关闭" from="top" :mask-click="maskClick" @back="onBack" v-model="showPop">
		    <view class="from-item">
		        <view class="from-item-label">会员姓名:</view>
		        <view class="bianju">
		        	<u-input v-model="queryFrom.memberName" :type="type" border="true" custom-style="background-color:rgb(246,246,246)" placeholder="请输入会员姓名"/>
		        </view>
		    </view>
			<view class="from-item">
			    <view class="from-item-label">会员电话:</view>
			    <view class="bianju">
			    	<u-input v-model="queryFrom.membershipPhone" :type="type" border="true" custom-style="background-color:rgb(246,246,246)" placeholder="请输入会员电话"/>
			    </view>
			</view>
		    <view class="from-item">
		        <view class="from-item-label">开始时间:</view>
		        <u-search class="from-item-input" @focus="showTime = true; type = 'createdStartDt'" v-model="queryFrom.createdStartDt" :showAction="false"
		            disabledColor="#ffffff" placeholder="请选择开始时间"></u-search>
		    </view>
		    <view class="from-item">
		        <view class="from-item-label">结束时间:</view>
		        <u-search class="from-item-input" @focus="showTime = true; type = 'createdEndDt'" v-model="queryFrom.createdEndDt" :showAction="false"
		            disabledColor="#ffffff" placeholder="请选择结束时间"></u-search>
		    </view>
		    <template v-slot:bottom>
		        <view class="chaxunx">
		            <u-button type="info" size="medium" :ripple="true" ripple-bg-color="#909399"
		                @click="resultFunc">重置</u-button>
		            <u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399"
		                @click="queryFunc">查询</u-button>
		        </view>
		    </template>
		</hqs-popup>
        <view class="query-view">
            <view class="header">
                <u-search placeholder="请查询" input-align="center" :show-action="false" @focus="onShowPopup"></u-search>
            </view>
        </view>
        <view class="list-view" style="max-height: 90vh;">
            <view
                style="font-size:1ex;padding: 1ex;box-shadow: .8ex .7ex 1ex #22222215;margin-left: 4.5vw;width: 88vw;height: 16vh;display: flex;" :key="index" 
                v-for="(item,index) in tableData">
                <view style="display: flex;flex-direction: column;flex:4.5">
                    <span class="span-porject span-porject-top">
                        <ul>项目名称</ul>
                        <ul>{{item.projectName}}</ul>
                    </span>
                    <span class="span-porject">
                        <ul>创建时间</ul>
                        <ul>{{item.createdDtFormatted}}</ul>
                    </span>
                    <span class="span-porject">
                        <ul>修改时间</ul>
                        <ul>{{item.updateDt?item.updateDt:''}}</ul>
                    </span>
                </view>
                <view style="display: block;flex: 0.01;background-color: #58b6ec;height: 82%;margin-top: 4%;"></view>
					<view style="margin-left: 1ex;display: flex;flex-direction: column;flex:3.5">
						<span class="span-porject span-porject-top">
							<ul>单价</ul>
							<ul>{{item.unitPrice}}</ul>
						</span>
						<span class="span-porject">
							<ul>创建人</ul>
							<ul>{{item.createdBy}}</ul>
						</span>
						<span class="span-porject">
							<ul>修改人</ul>
							<ul>{{item.updateBy?item.updateBy:''}}</ul>
						</span>
					</view>
					<view style="flex:2;display:flex;flex-direction:column;">
						<view style="margin-top:auto;">
							<u-button  type="warning" size="mini"  ripple-bg-color="#909399" 
							@click="editItem(item)">修改项目</u-button>
						</view>
						<view style="margin-top:1ex;margin-bottom: 0ex;">
							<u-button  type="error" size="mini" :ripple="true" ripple-bg-color="#909399" 
						@click="delItem(item)">删除项目</u-button>
					</view>
                </view>
            </view>
        </view>
        <view class="foot-view">
            <view class="chaxunx">
				<u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399" @click="addItem">新增项目</u-button>
			</view>
        </view>
        <u-picker :show="selectShow" :columns="columns" @confirm="confirm" @cancel="selectShow = false"></u-picker>
        <u-datetime-picker :show="showTime" v-model="time" format="YYYY-MM-DD HH:mm:ss" mode="date"
            @confirm="timeConfirm" @cancel="showTime = false"></u-datetime-picker>
        <u-popup :show="addAndEditShow" :round="10" mode="top" @close="close" @open="open">
			<view>
				<view class="from-item">
						<view class="from-item-label">项目名称:</view>
						<u--input class="from-item-input" v-model="selectRow.projectName"
							disabledColor="#ffffff" placeholder="请输入项目名称"></u--input>
					</view>
					<view class="from-item">
						<view class="from-item-label">单价(元):</view>
						<u--input class="from-item-input" placeholder="请输入单价" v-model="selectRow.unitPrice"></u--input>
					</view>
					<view class="chaxunx" style="margin-top: 2ex;">
				<u-button type="primary" size="medium" :ripple="true" ripple-bg-color="#909399" @click="commitInfo">提交</u-button>
				<u-button type="info" size="medium" :ripple="true" ripple-bg-color="#909399" @click="addAndEditShow = false">关闭</u-button>
			</view>
			</view>
		</u-popup>
		<view class="" >
			<u-notify style="height: 50upx;line-height: 50upx;" ref="uNotify" message="Hi uView"></u-notify>
		</view>
    </view>

</template>
<script>
import { commonDate } from "../../api/api.js"	
export default {
    data() {
        return {
            selectRow: {},
            type: '',
            addAndEditShow: false,
            maskClick: true,
            showPop: false,
            queryFrom: {memberName:'',membershipPhone:'',createdStartDt:'',createdEndDt:'',hospitalName:''},
            selectShow: false,
            showTime: false,
            columns: [['全部', '针灸', '拔火罐']],
            time: '',
            tableData: [{ 
                "sid": 5,
                "createdBy": "带头大哥",
                "createdDt": "2024-04-06T11:27:11.000+00:00",
                "projectName": "针灸1225",
                "unitPrice": 1750.00,
                "updateBy": "带头大哥",
                "updateDt": "2024-04-08 15:06:42",
                "createdDtFormatted": "2024-04-06 11:27:11"
            }]
        }

    },
	onLoad(options) {
		console.log(options.hospitalName)
		this.queryFrom.hospitalName=options.hospitalName
		
	},
    onShow() {
       

    },
    methods: {
        onBack() {
            uni.showToast({
                title: 'test',
            })
        },
        onShowPopup() {
            this.showPop = true
        },

        confirm(e) {
            console.log(e)
            this.queryFrom.projectName = e.value
            this.selectShow = false
        },
        timeConfirm(e) {
            // this.$set(this.queryFrom, this.type, this.time)
            this.queryFrom[this.type] = this.formatMillisecondsToDate(e.value)
            this.showTime = false
        },
        async queryFunc() {
            this.showPop = false
            const res = await commonDate('project/findProjectList',this.queryFrom)
            // console.log(res)
            if(res.code == 200){
                this.tableData = res.data
            }
        },
        formatMillisecondsToDate(milliseconds) {
            // 创建一个新的Date对象，参数为毫秒值  
            var date = new Date(milliseconds);

            // 提取年、月、日  
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1，并格式化为两位数  
            var day = ("0" + date.getDate()).slice(-2); // 格式化为两位数  

            // 返回年月日的字符串格式  
            return year + "-" + month + "-" + day;
        },
        resultFunc() {
            this.queryFrom = {memberName:'', membershipPhone:'', createdStartDt:'', createdEndDt:'', hospitalName:options.hospitalName}
        },
        editItem(item) { 
            this.selectRow = item
            this.addAndEditShow = true
         },
         addItem(){
            this.addAndEditShow = true
         },
         async delItem(item) { 
            const res = await commonDate('project/delProject',{sid:item.sid})
            if(res.code == 200){
				this.queryFunc()
				this.$refs.uNotify.show({
					top: 20,
					type: 'success',
					message: "删除成功",
					duration: 1000 * 3,
					fontSize: 40,
					safeAreaInsetTop:false
				})
			}
         },
        async commitInfo(){
            const {projectName,unitPrice,sid} = this.selectRow
            console.log(projectName,unitPrice,sid)
            console.log(this.selectRow)
            if(!projectName){
                return
            }
            if(!unitPrice){
                return
            }
            if(sid){
                const res = await commonDate('project/editProject',this.selectRow)
                if(res.code == 200){
                    this.addAndEditShow = false
					this.$refs.uNotify.show({
						top: 20,
						type: 'success',
						message: "修改成功",
						duration: 1000 * 3,
						fontSize: 40,
						safeAreaInsetTop:false
					})
                    this.queryFunc()
                }
            }else{
                const res = await commonDate('project/addProject',this.selectRow)
                if(res.code == 200){
                    this.addAndEditShow = false
					this.$refs.uNotify.show({
						top: 20,
						type: 'success',
						message: "新增成功",
						duration: 1000 * 3,
						fontSize: 40,
						safeAreaInsetTop:false
					})
                    this.queryFunc()
                }
            }
        }
    }
}

</script>
<style>
.query-view {
    position: fixed;
    top: 0ex;
    width: 100%;
}

.list-view {
    margin-top: 2.3ex;
    height: 90vh;
    overflow-y: auto;
}

.foot-view {
    position: fixed;
    bottom: 0.2ex;
    width: 100%;
}
.span-porject-top{
    margin-top: 1.5ex;
}
.span-porject > ul:nth-child(2){
    font-size: 2.1ex;
    color: #1d1d1d;
} 
.span-porject > ul:nth-child(1){
    font-size: 1.9ex;
    color: #5f5f5f;
}    
.span-porject{
    margin-bottom: .3ex;
}
.hqs-popup {
    padding: 2ex;
}

.from-item {
    display: flex;
    flex-direction: column;
}

.from-item-input {}

.from-item-label {
    font-size: 1.8ex;
    text-align: left;
    line-height: 4.8ex;
    margin-right: 1.8ex;

}

.chaxunx {
    display: flex;
}

.query-view .u-picker {
    position: fixed;
    /* 或者使用 absolute 或 relative，根据你的布局需求 */
    bottom: 0;
}
</style>