upload 花农小程序（todo商品管理）

xuxy

2024-06-24 a3ad988e9f74049a6b17efd4f3db8389ae6fe7ed

upload 花农小程序（todo商品管理）

 App.vue

@@ -78,6 +78,7 @@

    @import '@/common/self.scss';
    @import '@/common/icons.scss';
    @import '@/common/global.scss';

    /* #endif */
    .example-info {

 common/global.scss

对比新文件
@@ -0,0 +1,34 @@
.component-tab-container{
    display: flex;
    .tab-item{
        display: flex;
        text-align: center;
        border-radius: 8rpx;
        border: 2rpx solid var(--topicolor);
        background: #fff;
        color: var(--topicolor);
    }
    .tab-item.cur{
        background: var(--topicolor);
        border-radius: 0rpx 8rpx 8rpx 0rpx;
    }
}
.component-button-upload{
    width: 96rpx;
    height: 96rpx;
    border-radius: 4rpx;
    border: 2rpx solid #CECECE;
    position: relative;
    background-image: 100% 100%;
    &::after{
        content: "+";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(50%,50%);
        // width: 22rpx;
        // height: 22rpx;
        font-size: 24rpx;
        color: #000000;
    }
}

 common/icons.scss

@@ -9,4 +9,10 @@
                width: 28rpx;
                height: 28rpx;
                background-size: 100% 100%;
            }
            .icon-date{
				
                width: 38rpx;
                height: 38rpx;
                background-size: 100% 100%;
            }

 common/self.scss

@@ -561,7 +561,6 @@
    background-size: 100% 100%;
    width: 136rpx;
    height: 136rpx;
    background-image: url('@/static/app/imgs/app-add.png');
}
// #endif
.flex-w100{
@@ -943,3 +942,6 @@
    }


.before-line::before{
    border-top: 2rpx solid #EEEEEE;
}

 pages.json

@@ -1,12 +1,12 @@
{
    "pages": [{
            "path" : "pages/home/login/farmer-login",
            "style" : 
            {
                "navigationBarTitleText" : "登录",
                "enablePullDownRefresh" : false
            "path": "pages/login/farmer-login",
            "style": {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },{
        }, {
            "path": "pages/home/farmer-home",
            "style": {
                "navigationBarTitleText": "首页",
@@ -14,7 +14,7 @@
                "navigationStyle": "custom"
            }

        } , {
        }, {
            "path": "pages/user/farmer-user",
            "style": {
                "navigationBarTitleText": "我的",
@@ -43,45 +43,42 @@
                "enablePullDownRefresh": false
            }
        },
		

        {
            "path" : "pages/home/login/farmer-reg",
            "style" : 
            {
                "navigationBarTitleText" : "注册",
                "enablePullDownRefresh" : false
            "path": "pages/login/farmer-reg",
            "style": {
                "navigationBarTitleText": "申请入住",
                "enablePullDownRefresh": false
            }
        },
        {
            "path" : "pages/farmer/manage/order-settlement/order-settlement",
            "style" : 
            {
                "navigationBarTitleText" : "账单结算",
                "enablePullDownRefresh" : false
            "path": "pages/farmer/order-settlement/order-settlement",
            "style": {
                "navigationBarTitleText": "账单结算",
                "enablePullDownRefresh": false
            }
        },
        {
            "path" : "pages/farmer/manage/flower-manage/flower-manage",
            "style" : 
            {
                "navigationBarTitleText" : "商品管理",
                "enablePullDownRefresh" : false
            "path": "pages/farmer/flower-manage/flower-manage",
            "style": {
                "navigationBarTitleText": "商品管理",
                "enablePullDownRefresh": false
            }
        },
        {
            "path" : "pages/farmer/order-sale/order-sale",
            "style" : 
            {
                "navigationBarTitleText" : "售后理赔",
                "enablePullDownRefresh" : false
            "path": "pages/farmer/order-sale/order-sale",
            "style": {
                "navigationBarTitleText": "售后理赔",
                "enablePullDownRefresh": false
            }
        },
        {
            "path" : "pages/farmer/order-records/order-records",
            "style" : 
            {
                "navigationBarTitleText" : "扣款记录",
                "enablePullDownRefresh" : false
            "path": "pages/farmer/order-records/order-records",
            "style": {
                "navigationBarTitleText": "扣款记录",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor": "#E6F2EB"
				
            }
        }
    ],
@@ -94,14 +91,12 @@
            "background": "#efeff4"
        }
    },
    "condition" : { //模式配置，仅开发期间生效
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [
            {
                "name": "", //模式名称
                "path": "", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到
            }
        ]
        "list": [{
            "name": "", //模式名称
            "path": "", //启动页面，必选
            "query": "" //启动参数，在页面的onLoad函数里面得到
        }]
    }
}

 pages/farmer/order-records/order-records.vue

@@ -1,6 +1,55 @@
<template>
    <view>
		
    <view class="order-records">
        <view class="tj-container-p">
            <view class="tj-container">
                <view class="tj-each">
                    <view class="value">9</view>
                    <view class="label">买家</view>
                </view>
                <view class="tj-each">
                    <view class="value">9扎</view>
                    <view class="label">交易</view>
                </view>
                <view class="tj-each">
                    <view class="value">0.00</view>
                    <view class="label">理赔</view>
                </view>
                <view class="tj-each">
                    <view class="value">401.12</view>
                    <view class="label">交易合计</view>
                </view>
            </view>
        </view>
        <view class="p15" style="min-height: calc(100vh - 160rpx);">
            <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
            <view v-for="(item,index) in list" :key="index" class="order-records-list list-container">
                <view class="order-records-item list-item">
                    <view class="title flex">
                        <view>{{item.title}}</view>
                        <view class="m-l-a m-r-0 topic-gray">测试人员</view>
                    </view>
                    <view class="line"></view>
                    <view class="form">
                        <view class="form-item">
                            <view class="label">数量</view>
                            <view class="value">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">单价</view>
                            <view class="value">￥32.00</view>
                        </view>
                        <view class="form-item">
                            <view class="label">小计</view>
                            <view class="value red">￥32.00</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 判断是否到底了，自动吧 -->
        <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

    </view>
</template>

@@ -8,15 +57,101 @@
    export default {
        data() {
            return {
				

            }
        },
        methods: {
			

        }
    }
</script>

<style>
<style lang="scss" scoped>
    .order-records {
        .order-records-list {
            padding: 20rpx 30rpx;

</style>
            .order-records-item {
                padding: 24rpx 34rpx;
                margin-bottom: 20rpx;


                .title {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #000000;
                    line-height: 40rpx;
                }

                .line {
                    height: 2rpx solid #EEEEEE;
                    margin-top: 16rpx;
                    margin-bottom: 16rpx;
                }

                .form {
                    display: flex;

                    .form-item {
                        flex: 1;
                        min-width: 40%;
                        max-width: 50%;

                        .label {
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #666666;
                            line-height: 34rpx;
                        }

                        .label::after {
                            content: ":";
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #666666;
                            line-height: 34rpx;
                        }

                        .value {
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #000000;
                            line-height: 34rpx;
                        }

                        .value.red {
                            color: #CF0000;
                        }
                    }
                }
            }
        }

        .tj-container-p {
            background: #E6F2EB;
            padding: 30rpx;

            .tj-container {
                height: 148rpx;
                background: #FFFFFF;
                border-radius: 8rpx;

                .tj-each {
                    .label {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }

                    .value {
                        font-weight: 400;
                        font-size: 32rpx;
                        color: #CF0000;
                        line-height: 44rpx;
                    }
                }
            }
        }
    }
</style>

 pages/farmer/order-sale/order-sale.vue

@@ -1,6 +1,52 @@
<template>
    <view>
		
    <view class="list-container order-sale farmer">
        <view class="component-tab-container">
            <view class="tab-item" :class="[tabIndex==0?'cur':'']" @click="changeIndex(0)">本月</view>
            <view class="tab-item" :class="[tabIndex==1?'cur':'']" @click="changeIndex(1)">全部</view>
        </view>
        <view class="p15" style="min-height: calc(100vh - 160rpx);">
            <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
            <view v-for="(item,index) in list" :key="index" class="m-b-24 order-sale-list list-container">
                <view class="order-sale-item list-item">
                    <view class="title">{{item.title}}<span>A级</span></view>
                    <view class="line"></view>
                    <view class="form">
                        <view class="form-item">
                            <view class="label">理赔数量</view>
                            <view class="value">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">买家ID</view>
                            <view class="value">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">平台支付</view>
                            <view class="value red">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">商家赔付</view>
                            <view class="value red">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">下单时间</view>
                            <view class="value">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">申请时间</view>
                            <view class="value">1</view>
                        </view>
                        <view class="form-item width100">
                            <view class="label">申请原因</view>
                            <view class="value">1</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 判断是否到底了，自动吧 -->
        <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

    </view>
</template>

@@ -8,15 +54,97 @@
    export default {
        data() {
            return {
				
                tabIndex: 0,
            }
        },
        onLoad() {
            this.listApi = '/api/ua/announcement/list'
            this.getList()

        },
        onReachBottom() {
            this.page.current += 1
            this.getMore()
        },
        async onPullDownRefresh() {
            this.page.current = 1
            await this.getList()
            uni.stopPullDownRefresh()
        },
        methods: {
			
            changeIndex(index) {
                if (this.tabIndex !== index) {
                    this.changeIndex = index
                    // 刷新 query
                }
            },
            toDetail(item) {
                // uni.navigateTo({
                //     url: `/pages/notice/notice?id=${item.id}`
                // })
            }
        }
    }
</script>

<style>
<style lang="scss" scope>
    .order-sale-list {
        .order-sale-item {
            margin-bottom: 20rpx;
            padding: 28rpx;

</style>
            .title {
                font-weight: 600;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;
            }

            .line {
                height: 2rpx solid #EEEEEE;
                margin-top: 16rpx;
                margin-bottom: 16rpx;
            }

            .form {
                display: flex;

                .form-item {
                    flex: 1;
                    min-width: 40%;
                    max-width: 50%;

                    .label {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                        line-height: 34rpx;
                    }

                    .label::after {
                        content: ":";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                        line-height: 34rpx;
                    }

                    .value {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }

                    .value.red {
                        color: #CF0000;
                    }
                }

                .form-item.width100 {
                    max-width: unset;
                }
            }
        }
    }
</style>

 pages/farmer/order-settlement/order-settlement.vue

@@ -1,6 +1,68 @@
<template>
    <view>
		
    <view class="list-container order-settlement farmer">
        <view class="component-tab-container">
            <view class="tab-item" :class="[tabIndex==0?'cur':'']" @click="changeIndex(0)">本月</view>
            <view class="tab-item" :class="[tabIndex==1?'cur':'']" @click="changeIndex(1)">全部</view>
        </view>
        <view class="p15" style="min-height: calc(100vh - 160rpx);">
            <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
            <view v-for="(item,index) in list" :key="index" class="m-b-24 order-settlement-list list-container">
                <view class="order-settlement-item list-item">
                    <view class="title flex">
                        <image class="icon-date m-r-6 m-t-2" src="@/static/common/icon-date.png"></image>
                        <view>{{item.title}}</view>
                        <view class="status m-l-a m-r-0">已结算</view>
                    </view>
                    <view class="line"></view>
                    <view class="form">
                        <view class="form-item">
                            <view class="label">均价</view>
                            <view class="value">￥32.00</view>
                        </view>
                        <view class="form-item">
                            <view class="label">买家</view>
                            <view class="value">1位</view>
                        </view>
                        <view class="form-item">
                            <view class="label">数量</view>
                            <view class="value red">1扎</view>
                        </view>
                        <view class="form-item">
                            <view class="label">商家赔付</view>
                            <view class="value red">1</view>
                        </view>
                        <view class="form-item">
                            <view class="label">服务费</view>
                            <view class="value">￥32.00</view>
                        </view>
                        <view class="form-item">
                            <view class="label">理赔</view>
                            <view class="value">￥32.00</view>
                        </view>
                        <view class="form-item">
                            <view class="label">运费</view>
                            <view class="value">￥32.00</view>
                        </view>
                    </view>

                    <view class="line"></view>
                    <view class="flex">
                        <view class="flex1 tj">
                            <view class="label">交易合计：</view>
                            <view class="value">￥32.00</view>
                        </view>
                        <view class="flex1 tj text-right">
                            <view class="label">结算金额：</view>
                            <view class="value">￥32.00</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 判断是否到底了，自动吧 -->
        <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

    </view>
</template>

@@ -8,15 +70,126 @@
    export default {
        data() {
            return {
				
                tabIndex: 0,
            }
        },
        onLoad() {
            this.listApi = '/api/ua/announcement/list'
            this.getList()

        },
        onReachBottom() {
            this.page.current += 1
            this.getMore()
        },
        async onPullDownRefresh() {
            this.page.current = 1
            await this.getList()
            uni.stopPullDownRefresh()
        },
        methods: {
			
            changeIndex(index) {
                if (this.tabIndex !== index) {
                    this.changeIndex = index
                    // 刷新 query
                }
            },
            toDetail(item) {
                // uni.navigateTo({
                //     url: `/pages/notice/notice?id=${item.id}`
                // })
            }
        }
    }
</script>

<style>
<style lang="scss" scope>
    .order-settlement-list {
        .order-settlement-item {
            margin-bottom: 20rpx;
            padding: 28rpx;

</style>
            .title {
                font-weight: 600;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;

                .status {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #20613D;
                    line-height: 40rpx;
                }

                .status.red {
                    color: #CF0000;
                }

                .status.green {
                    color: var(--topiccolor);
                }
            }

            .line {
                height: 2rpx solid #EEEEEE;
                margin-top: 16rpx;
                margin-bottom: 16rpx;
            }

            .tj {
                .label {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #000000;
                    line-height: 40rpx;
                }

                .value {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #CF0000;
                    line-height: 40rpx;
                }
            }

            .form {
                display: flex;

                .form-item {
                    flex: 1;
                    min-width: 26%;
                    max-width: 33%;

                    .label {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                        line-height: 34rpx;
                    }

                    .label::after {
                        content: ":";
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                        line-height: 34rpx;
                    }

                    .value {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }

                    .value.red {
                        color: #CF0000;
                    }
                }


            }
        }
    }
</style>

 pages/login/farmer-login.vue

@@ -2,43 +2,38 @@
    <view class="main-container login-container img100" style="margin-top: 0rpx;">

        <view class="t-login top-bg">
            <view class="icons">
                <image class="icon1" src="../../static/imgs/user/usr-icon1.png" mode="aspectFit"></image>
                <image class="icon2" src="../../static/imgs/home/home-shop-top-icon.png" mode="aspectFit"></image>
            </view>
            <view class="nav-title">登录</view>
            <view class="login">
                <form class="cl">
                    <view class="t-a titles-top">
                        <view class="title-1">HELLO</view>
                        <view class="title-2">欢迎登录<span class="title-2">花满芜</span></view>
                        <view class="title-2">欢迎登录<span class="title-3">花满芜</span></view>
                    </view>
                    <view class="t-a">
                        <!-- <image src="/static/username.png"></image> -->
                        <!-- <uni-icons class="icon" type="person-filled" size="32" color="#04BA97"></uni-icons> -->

                        <!-- <view class="line"></view> -->
                    <view class="t-a input" v-if="loginType=='pwd'">
                        <input type="text" name="userName" placeholder="请输入账号" v-model="userName" />
                    </view>
                    <view class="t-a">
                        <!--                         <image src="/static/password.png"></image> -->
                        <!-- <uni-icons class="icon" type="locked-filled"  size="32" color="#04BA97"></uni-icons> -->
                        <!-- <view class="line"></view> -->
                    <view class="t-a input" v-if="loginType=='pwd'">
                        <input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
                    </view>
                    <view class="main-container" v-if="false">
                        <checkbox-group @change="changeAll" style="float:left;">
                            <label class="checkbox">
                                <checkbox value="1" :checked="checked" />
                            </label>
                        </checkbox-group>
                        同意<text @click="tc1(1)" style="color:red;">《用户服务协议》</text>及
                        <text @click="tc1(2)" style="color:red;">《隐私政策》</text>
                    <view class="t-a input" v-if="loginType=='code'">
                        <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
                            {{getCodeText}}
                        </view>

                        <input type="text" name="userName" placeholder="请输入手机号" v-model="phoneNumber" />

                    </view>
                    <button @tap="login()" style="background-color: #04BA97;">登 录</button>
                    <!-- <view @tap="backpage" class="to-home">返回首页</view> -->


                    <view class="t-a input" v-if="loginType=='code'">
                        <input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
                    </view>

                    <button @tap="login()" class="bottom-button">登 录</button>

                    <view class="flex">
                        <view class="topic-font">手机验证码登录</view>
                        <view class="topic-font">前往注册</view>
                        <view class="topic-font" @click="loginType='code'">手机验证码登录</view>
                        <view class="topic-font m-l-a m-r-0" @click="toReg">前往注册</view>
                    </view>
                </form>
            </view>
@@ -56,16 +51,70 @@
                // userName: '12345678',
                // password: '12345678',
                userName: '',
                phoneNumber: '',
                password: '',
                checked: false,
                loginType: 'pwd', //pwd和code，密码和验证码登录
                pcfvalue: undefined,
                getCodeText: '获取验证码',
                getCodeBtnColor: "#20613D",
                getCodeisWaiting: false,
                Timer: undefined
            };
        },
        methods: {
            toHome() {
            getCode() {
                uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
                if (this.getCodeisWaiting) {
                    return;
                }
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
                    uni.showToast({
                        title: '请填写正确手机号码',
                        icon: "none"
                    });
                    return false;
                }
                this.getCodeText = "发送中..." //发送验证码
                this.getCodeisWaiting = true;
                this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
                //示例用定时器模拟请求效果
                //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
                setTimeout(() => {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: "none"
                    }); //弹出提示框
                    //示例默认1234，生产中请删除这一句。
                    // this.code = '1234'; //发送验证码，进行填入
                    this.setTimer(); //调用定时器方法
                }, 1000)
            },
            //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
            setTimer() {
                let holdTime = 60; //定义变量并赋值
                this.getCodeText = "重新获取(60)"
                //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
                //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
                this.Timer = setInterval(() => {
                    if (holdTime <= 0) {
                        this.getCodeisWaiting = false;
                        this.getCodeBtnColor = "#20613D";
                        this.getCodeText = "获取验证码"
                        clearInterval(this.Timer); //清除该函数
                        return; //返回前面
                    }
                    this.getCodeText = "重新获取(" + holdTime + ")"
                    holdTime--;
                }, 1000)
            },
            toReg() {
                // uni.switchTab({
                //     url: '/pages/index/index'
                // })
                uni.navigateTo({
                    url: '/pages/login/farmer-reg'
                })

            },
            changeAll(e) {
@@ -178,6 +227,7 @@
    .t-login .login {
        width: 650rpx;
        margin: 60rpx auto;
        margin-top: 0rpx;
        font-size: 28rpx;
        color: #000;
    }

 pages/login/farmer-reg.vue

对比新文件
@@ -0,0 +1,444 @@
<template>
    <view class="container-page">
        <view>
            <view class="form-item">
                <view class="label required">店铺类型</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_type=true
                    }
                }">
                    <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>

            </view>
            <view class="form-item before-line">
                <view class="label required">店铺名称</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.applicationTitle" placeholder="请输入店铺名称"
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">店铺头像（750*750px）</view>
                <view class="m-l-a m-r-0 flex">
                    <view class="component-button-upload" @click="uploadIcon('icon')"
                        :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">

                    </view>
                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">姓名</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.applicationTitle" placeholder="请输入姓名"
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">联系方式</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.applicationTitle" placeholder="请输入联系方式"
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">集货站</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_type=true
                    }
                }">
                    <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>

            </view>
            <view class="form-item before-line">
                <view class="label required">地区</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_type=true
                    }
                }">
                    <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>

            </view>
            <view class="form-item before-line">
                <view class="label required">地址</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.applicationTitle" placeholder="请输入地址"
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">店铺简介</view>
            </view>
            <view class="flex">
                <u--textarea v-model="dto.ps" placeholder="请输入店铺简介"></u--textarea>

            </view>
            <view class="form-item before-line">
                <view class="label required">选择审核方式</view>
                <view class="m-l-a m-r-0 flex">
                    <u-radio-group v-model="dto.idcardType" placement="row">
                        <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in shTypeList" :key="index"
                            :label="item.name" :name="item.name">
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>
            <view class="form-item before-line" v-if="dto.idcardType=='身份证'">
                <view class="label required">身份证正反面</view>
                <view class="m-l-a m-r-0 flex">
                    <view class="component-button-upload m-r-15" @click="uploadIcon('icon')"
                        :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">

                    </view>
                    <view class="component-button-upload" @click="uploadIcon('icon')"
                        :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">

                    </view>
                </view>
            </view>
            <view class="form-item before-line" v-if="dto.idcardType=='营业执照'">
                <view class="label required">营业执照</view>
                <view class="m-l-a m-r-0 flex">
                    <view class="component-button-upload m-r-15" @click="uploadIcon('icon')"
                        :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">

                    </view>

                </view>
            </view>




            <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit">
                提交审核
            </view>

        </view>


        <u-picker @confirm="select_type" keyName="label" @cancel="show_select_type=false" :show="show_select_type"
            :columns="columns_types"></u-picker>

        <u-picker @confirm="select_user" keyName="label" @cancel="show_select_user=false" :show="show_select_user"
            :columns="userListCols"></u-picker>


    </view>
</template>

<script>
    import environments from '@/environments'
    import xflSelect from '@/components/xfl-select/xfl-select.vue'; //导入

    import {
        mapState
    } from 'vuex'

    export default {

        data() {
            return {
                id: '',
                orderId: '',
                show_addlog: false,
                log_remarks: '',
                refresh: false,
                api: '',
                dto: {
                    id: '',
                    applicationType: '',
                },
                show_select_type: false,
                show_select_user: false,
                columns_types: [],
                audit_remarks: '',
                audit_result: false,
                show_audit: false,


                //审核方式
                shTypeList: [{
                        name: '身份证',
                        disabled: false
                    },
                    {
                        name: '营业执照',
                        disabled: false
                    }
                ],
                radiovalue1: '身份证',

            }
        },
        onLoad(options) {
            if (options.id) {
                this.id = options.id
                this.getDetail()
            } else {
                // this.$http.request('get', '/api/personnel/employee/list', {
                //     params: {
                //         size: 4000,
                //         current: 1
                //     }
                // }).then(res => {
                //     this.userListAll = (res.data && res.data.records || []).map(item => {
                //         item.label = item.label || item.name || item.nickName || item.loginName || '-'
                //         return item
                //     })
                //     var index = 0
                //     this.userList = this.userListAll.map(item => {
                //         index += 1
                //         return `${index}.` + item.label + (item.tel ? `(${item.tel})` : '')
                //     })
                //     var arr = this.userListAll.map(item => {
                //         return {
                //             label: item.label + (item.tel ? `(${item.tel})` : ''),
                //             value: item.id
                //         }
                //     })
                //     this.userListCols = [arr]

                // })


                this.$http.request('get', '/api/dict/value', {
                    params: {
                        typeCode: 'APPLICATION_TYPE'
                    }
                }).then(res => {
                    var data = res.data
                    this.columns_types = [data || []]
                    this.columns_types[0].unshift({
                        label: '全部',
                        value: ''
                    })

                })
            }

        },

        methods: {


            select_type(e) {
                this.show_select_type = false
                this.dto.applicationTypeStr = e.value[0].label
                this.dto.applicationType = e.value[0].value
            },
            select_user(e) {
                this.show_select_user = false
                this.dto.auditPersonStr = e.value[0].label
                this.dto.auditPersonId = e.value[0].value
            },

            async getDetail() {
                this.$message.showLoading()
                const {
                    code,
                    data
                } = await this.$http.request('get', "/api/app/application/get/" + this.id, {})
                if (code == 0) {
                    this.dto = {
                        ...data,

                    }
                    if (this.dto.applicationDate) {
                        this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))
                    }
                    // console.log('this.dto', this.dto)

                }

                this.$message.hideLoading()

            },
            async submit() {
                if (!this.dto.applicationType) {
                    this.$message.showToast('未选择类型')
                    return
                }
                if (!this.dto.applicationTitle) {
                    this.$message.showToast('未填写申请主题')
                    return
                }
                if (!this.dto.auditPersonId) {
                    this.$message.showToast('未选择审批人')
                    return
                }
                await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)

                // this.$message.showToast('1')
                // return
                var dto = {
                    ...this.dto,
                    applicationDate: this.$util.toDate(new Date()),
                    applicantId: this.currentInfo.id
                }
                this.$message.showLoading()
                const re = await this.$http.request('post', '/api/app/application/create', {
                    data: dto
                })
                this.$message.hideLoading()
                if (re.code == 2000 || re.code == 0) {
                    this.$message.showToast('操作成功')
                    //需要标记加一下
                    this.$store.dispatch('sign_add', 'application');

                    this.backpage()
                }
            },
            async submitAudit() {
                var url = ''
                if (this.audit_result) {
                    url = '/api/app/application/audit/pass'
                } else {
                    url = '/api/app/application/audit/reject'
                }
                var dto = {
                    id: this.id,
                    auditRemarks: this.audit_remarks
                }
                this.show_audit = false
                this.$message.showLoading()
                const re = await this.$http.request('post', url, {
                    data: dto
                })
                this.$message.hideLoading()
                if (re.code == 2000 || re.code == 0) {
                    this.$message.showToast('操作成功')
                    this.$store.dispatch('sign_add', 'application');

                    this.getDetail()
                }
            },
            uploadIcon(key) {
                const that = this
                uni.chooseImage({
                    count: 1, // 最多可以选择的图片张数，默认9
                    sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
                    sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                    success: function({
                        errMsg,
                        tempFiles
                    }) {
                        if (errMsg === 'chooseImage:ok') {
                            // console.log(tempFiles[0])
                            that.$message.showLoading()
                            that.$http.upload(tempFiles[0].path).then(async res => {
                                var pic = res.data && res.data.length > 0 && res.data[
                                        0]
                                    .url || ''
                                that.$message.hideLoading()
                                that.dto[key] = pic || ''
                                that.$forceUpdate()
                            }).catch(res => {
                                that.$message.hideLoading()

                            })
                        }
                    }
                })
            },

        },
        computed: {
            ...mapState(['currentInfo'])
        },
        components: {
            xflSelect
        }
    }
</script>

<style lang="scss" scoped>
    .form-item {
        // padding: 40rpx;
        border-bottom: 1px solid #F3F3F3;
        display: flex;
        // height: 100px;

        .label {
            width: 300rpx;
            line-height: 60px;

        }

        .flex {
            line-height: 60px;

            .flex1 {
                flex: 1;
                text-align: center;
                color: var(--selfblue)
            }


        }
    }

    .form-item.bottom-border-no {
        border-bottom: none;
    }

    .container-page {
        padding: 40rpx;
        background-color: #FFFFFF;
        // min-height: calc(100vh - 80rpx);
        min-height: 100vh;
    }

    .style {
        width: fit-content;
        margin: 0 auto;
        line-height: 64rpx;
        border-radius: 8rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        // padding-top: 5rpx;
        // padding-bottom: 5rpx;
        border: 2rpx solid var(--selfblue);
        background-color: var(--selfbluebg);
        min-width: 100rpx;
    }


    .style-1 {
        border: 1px solid rgb(122, 187, 255);
        border: 1px solid #409EFF;
        color: #409EFF;
        background-color: rgb(240, 247, 255);
    }

    .style-2 {
        border: 1px solid rgb(255, 184, 78);
        border: 1px solid #FE9044;
        color: #FE9044;
        background-color: rgb(255, 247, 235);
    }

    .style-3 {
        border: 1px solid #19be6b;
        color: #19be6b;
        background-color: rgb(231, 244, 238);
    }

    .style-4 {
        border: 1px solid #F56c6c;
        color: #F56c6c;
        background-color: rgb(254, 243, 243);
    }
</style>

 pages/login/login.scss

@@ -1,6 +1,18 @@
.login-container{
        background-image: url('../../static/images/login/bg.png');
    min-height: 99vh;
        background-image: url('../../static/images/farmer/login/bg.png');
        .nav-title{
            font-weight: 400;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            text-align: center;
            padding-bottom: 176rpx;
            padding-top: 100rpx;
            font-weight: 600;
        }
        .titles-top{
            padding-bottom: 80rpx;
            .title-1{
                font-weight: 600;
                font-size: 20px;
@@ -13,10 +25,29 @@
                font-size: 24px;
                color: #000000;
                line-height: 33px;
                .title-3{
                    color: #20613D;
					
                }
            }
            .title-3{
                color: #20613D;
				
			
        }
        .t-login uni-input{
            border: none !important;
            background: none !important;
            border-bottom: 2rpx solid #e9e9e9 !important;
            padding-left: 40rpx;
            .input-placeholder{
                color: var(--topicgray);
            }
        }
        .bottom-button{
            height: 90rpx;
            background: var(--topicolor);
            border-radius: 46rpx;
            text-align: center;
            margin-top: 120rpx;
            margin-bottom: 42rpx;
			
        }
}

 pages/user/user.scss

@@ -6,7 +6,7 @@
    }
    .top-bg{
        // background: linear-gradient( 180deg, #BBE9E6 0%, rgba(245,245,245,0) 100%, rgba(245,245,245,0) 100%);
        background-image: url('../../static/images/farmer/user/bg.png');
        background-image: url('../../static/images/farmer/home/bg.png');
        
        width: 750rpx;
        height: 438rpx;

 static/common/icon-date.png