epmet-work-uni/subpages/carManagement/pages/add/add.vue

<template>
    <!-- subpages/carManagement/pages/add/add.wxml -->
    <view class="personal-info">
        <view class="basic-info">
            <view :class="'item  ' + (isDisabled ? 'disabled' : '')">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">事件分类</view>
                </view>
                <view class="value-dl" @tap="onOpen1">
                    <view :class="category ? 'di-name' : 'di-name1'">{{ category ? category : '请选择' }}</view>
                    <image class="di-but" src="/static/images/right.png" mode="aspectFit" />
                </view>
            </view>
            <view class="item">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">发生地点</view>
                </view>
                <view class="value-dl">
                    <view class="di-name" @tap="toughGetLocation">{{ addressContent }}</view>
                    <image class="di-but" v-if="!addressContent" src="/static/images/right.png" mode="aspectFit" />
                    <image class="di-but" v-else style="width: 46rpx; height: 46rpx" src="/static/images/导航.png" mode="aspectFit" @tap="routePlanning" />
                </view>
            </view>

            <view :class="'item  ' + (isDisabled ? 'disabled' : '')">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">{{ tabVal === '1' ? '需求人' : '责任人' }}</view>
                </view>
                <navigator hover-class="backC" class="value-dl" url="/subpages/demandCheck/pages/dissatisfied/searchResi/searchResi">
                    <view :class="resiName ? 'di-name' : 'di-name1'">
                        {{ resiName ? resiName : '请选择' }}
                    </view>
                    <image class="di-but" src="/static/images/right.png" mode="aspectFit" />
                </navigator>
            </view>
            <view :class="'item  ' + (isDisabled ? 'disabled' : '')">
                <view class="field">
                    <text class="must">*</text>
                    <view class="field-text">{{ tabVal === '0' ? '责任人电话' : '联系电话' }}</view>
                </view>
                <view hover-class="backC" class="value-dl">
                    <!-- <view class="di-name" > 
                      {{resiMobile?resiMobile:'请输入'}}
                      </view> -->
                    <input class="telInput" type="text" placeholder="请输入" :value="resiMobile" @blur="bindMobile" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import wuxPicker from '../../../../../wxcomponents/dist/picker/index';
// subpages/carManagement/pages/add/add.js
export default {
    components: {
        wuxPicker
    },
    data() {
        return {
            isDisabled: false,
            category: false,
            addressContent: '',
            tabVal: '',
            resiName: false,
            resiMobile: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onOpen1() {
            console.log('占位：函数 onOpen1 未声明');
        },

        toughGetLocation() {
            console.log('占位：函数 toughGetLocation 未声明');
        },

        routePlanning() {
            console.log('占位：函数 routePlanning 未声明');
        },

        bindMobile() {
            console.log('占位：函数 bindMobile 未声明');
        }
    }
};
</script>
<style>
/* subpages/carManagement/pages/add/add.wxss */
page {
    width: 100%;
    height: auto;
    overflow-y: auto;
    background: #f7f7f7;
    padding-bottom: 20rpx;
    box-sizing: border-box;
}
.personal-info {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    overflow: hidden;
}

.basic-info {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin-top: 20rpx;
}
.item {
    border-bottom: 1rpx solid #e7eeee;
    padding: 25rpx 0;
    line-height: 60rpx;
    display: flex;
}
.field {
    position: relative;
    box-sizing: border-box;
    width: 180rpx;
    padding-left: 25rpx;
}

.field-d {
    width: 220rpx !important;
}
.value-d {
    width: 450rpx !important;
}
.field.mobile-field {
    width: 250rpx !important;
}
.field .must {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    color: #f61616;
    font-size: 30rpx;
}
.field .field-text {
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
}

.field .field-text-small {
    font-size: 28rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

.value {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
}
.value-dl {
    position: relative;
    display: flex;
    font-size: 32rpx;
    color: #333;
    line-height: 60rpx;
    align-items: center;
    display: flex;
    justify-content: space-between;

    flex: 1;
}
.telInput {
    margin-left: 40rpx;
}

.di-name {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
}
.di-name1 {
    margin-right: 14rpx;
    text-align: left;
    width: calc(100% - 30rpx);
    margin-left: 40rpx;
    font-family: 'PingFangSC-Regular', sans-serif;
    color: #999;
}
.di-but {
    width: 30rpx;
    height: 34rpx;
}
.value input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 100%;
}
.value .picker {
    position: relative;
    width: 100%;
    padding-right: 40rpx;
    text-align: right;
}
.value .picker .z-weak {
    color: #999;
}
.value .picker .menu-arrow {
    position: absolute;
    top: 20rpx;
    right: 0;
    width: 16rpx;
    height: 23rpx;
}
.value-mobile {
    position: relative;
    width: 410rpx;
    display: flex;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 400;
    color: #333;
    line-height: 60rpx;
    display: flex;
    margin-left: 30rpx;
}
.value-mobile .get-code {
    padding: 0 15rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(to right, #f40c0c, #ff4e4e);
    color: #fff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin: 0;
    margin-left: 25rpx;
}
.value-mobile .button-hover {
    background: rgb(175, 1, 1);
}
.value-mobile input {
    text-align: right;
    font-size: 34rpx;
    color: #333;
    height: 100%;
    width: 55%;
}
.placeholder-style {
    font-size: 28rpx;
    color: #999;
}

.is-open {
    margin-top: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 30rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
}

.submit-button {
    width: 100%;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80rpx 0 65rpx;
}
.submit-button button {
    height: 84rpx;
    line-height: 84rpx;
    width: 560rpx;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 33rpx;
    border-radius: 84rpx;
    background: linear-gradient(to right, #82b4fd, #3e93fe);
}
.disabled {
    pointer-events: none; /* 禁止点击 */
}
</style>