flat： 修改

pageMy/my/resume/index.vue

@@ -95,18 +95,73 @@
                     placeholder="请输入您的电话" border="none" clearable></u--input>
             </view>
         </view>
+        <view class="workexperience">
+            工作经历
+            <view class="workexperience-right" @click="cardaddshow = true; gzInfo = {}">+</view>
+        </view>
+        <view class="border"></view>
+        <view class="card" v-for="(item, index) in gzList" :key="index" @click="updataGz(item)"
+            @longtap="removeGz(item)">
+            <view class="card-title">
+                {{item.name}}
+                <view class="card-right">{{item.stime}}-{{item.etime}}</view>
+            </view>
+            <view class="card-subTitle">
+                <view class="card-sub1">{{item.work}}</view>
+                <view class="card-sub1">{{item.department}}</view>
+            </view>
+            <view class="card-content">
+                {{item.content}}
+            </view>
+        </view>
+        <custom-popup :content-h="100" :visible="cardaddshow" :hide="0" @onClose="cardaddshow = false; gzInfo = {}">
+            <view class="s-header">
+                <view class="heade-lf" @click="cardaddshow = false; gzInfo = {}">取消</view>
+                <view class="heade-ri" @click="confimPopup1">确认</view>
+            </view>
+            <u--form style="padding: 6px 14px;" labelPosition="left" :model="gzInfo" ref="form1">
+                <u-form-item label="企业名称:" labelWidth="80" prop="name" borderBottom>
+                    <u--input v-model="gzInfo.name" placeholder="请输入企业名称"></u--input>
+                </u-form-item>
+                <u-form-item label="工作岗位:" labelWidth="80" prop="work" borderBottom>
+                    <u--input v-model="gzInfo.work" placeholder="请输入工作岗位"></u--input>
+                </u-form-item>
+                <u-form-item label="开始时间" labelWidth="80" prop="stime" borderBottom
+                    @click="showStime = true; hideKeyboard()" ref="item1">
+                    <u--input v-model="gzInfo.stime" disabledColor="#ffffff" placeholder="请选择开始时间"
+                        border="none"></u--input>
+                    <u-icon slot="right" name="arrow-right"></u-icon>
+                </u-form-item>
+                <u-form-item label="结束时间" labelWidth="80" prop="etime" borderBottom
+                    @click="showEtime = true; hideKeyboard()" ref="item2">
+                    <u--input v-model="gzInfo.etime" disabledColor="#ffffff" placeholder="请选择结束时间"
+                        border="none"></u--input>
+                    <u-icon slot="right" name="arrow-right"></u-icon>
+                </u-form-item>
+                <u-form-item label="部门:" labelWidth="80" prop="department" borderBottom>
+                    <u--input v-model="gzInfo.department" placeholder="请输入部门"></u--input>
+                </u-form-item>
+                <u-form-item label="工作内容:" labelWidth="70" prop="content" borderBottom>
+                    <u--textarea v-model="gzInfo.content" placeholder="请输入工作内容"></u--textarea>
+                </u-form-item>
+            </u--form>
+        </custom-popup>
+
 
         <view v-if="isShowButton" class="saveWrapper">
             <u-button @click="subMitResume" type="primary" shape="circle" text="保存"></u-button>
         </view>
 
-        <view class="border"></view>
 
         <u-picker @confirm="pickerButtonFunc" @cancel="showPicker = false" :show="showPicker" :columns="columns"
             keyName="label"></u-picker>
 
         <u-toast ref="uToast"></u-toast>
 
+        <u-datetime-picker :show="showStime" :value="birthday" mode="date" closeOnClickOverlay @confirm="stimeConfirm"
+            @cancel="stimeClose" @close="stimeClose"></u-datetime-picker>
+        <u-datetime-picker :show="showEtime" :value="birthday" mode="date" closeOnClickOverlay @confirm="etimeConfirm"
+            @cancel="etimeClose" @close="etimeClose"></u-datetime-picker>
         <!-- 省市 -->
         <data-picker :show="areaModal.addressShow" @confirm='confirmAddress' @cancel='areaModal.addressShow = false'
             @close='areaModal.addressShow = false' :defaultNames="areaModal.defaultNames" :indexs="areaModal.indexs"
@@ -129,14 +184,32 @@
     } from '@/api/resume.js';
     import mSlideList from '@/components/mark-slide-list/mark-slide-list.vue';
     import controller from '@/components/mark-slide-list/controller';
-
+    import customPopup from '@/components/custom-popup/custom-popup.vue'
+    import {
+        cloneDeep,
+        forIn
+    } from 'lodash';
+    const validateForm = {
+        name: '请输入企业名称',
+        work: '请输入工作岗位',
+        stime: '请输入开始时间',
+        etime: '请选择结束时间',
+        department: '请输入部门',
+        content: '请输入工作内容',
+    }
     export default {
         components: {
-            mSlideList
+            mSlideList,
+            customPopup
         },
         data() {
             return {
                 controller: new controller(),
+                cardaddshow: false,
+                showStime: false,
+                showEtime: false,
+                gzInfo: {},
+                gzList: [],
                 myResume: {
                     city: {},
                     education: {},
@@ -156,12 +229,11 @@
                 columns: [
                     []
                 ],
-
                 canSubMit: false,
                 isShowButton: false,
                 isShowBorder: false,
                 isShowAddSkill: true,
-
+                birthday: Number(new Date()),
                 areaModal: {
                     address: '',
                     addressShow: false,
@@ -196,9 +268,70 @@
             }
         },
         methods: {
+            removeGz(item) {
+                const that = this
+                uni.showModal({
+                    content: '删除该条工作经历?',
+                    success(res) {
+                        if (res.confirm) {
+                            that.isShowButton = true
+                            that.gzList = that.gzList.filter((vItem) => item.id !== vItem.id)
+                        }
+                    },
+
+                })
+            },
+            updataGz(item) {
+                this.cardaddshow = true
+                this.gzInfo = item
+            },
+            confimPopup1() {
+                const copy = cloneDeep(this.gzInfo)
+                const keys = Object.keys(validateForm)
+                console.log(keys, copy)
+                for (let i = 0; i < keys.length; i++) {
+                    if (!copy[keys[i]]) {
+                        return this.$api.msg(validateForm[keys[i]])
+                    }
+                }
+                if (copy.id) {
+                    this.gzList = this.gzList.map((item) => {
+                        if (item.id === copy.id) {
+                            return copy
+                        } else {
+                            return item
+                        }
+                    })
+                } else {
+                    copy.id = Date.now()
+                    this.gzList.push(copy)
+                }
+                this.isShowButton = true
+                this.cardaddshow = false
+            },
+            stimeClose() {
+                this.showStime = false
+            },
+            stimeConfirm(e) {
+                this.showStime = false
+                this.gzInfo.stime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
+            },
+            etimeClose() {
+                this.showStime = false
+            },
+            etimeConfirm(e) {
+                this.showEtime = false
+                this.gzInfo.etime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
+            },
+            hideKeyboard() {
+                uni.hideKeyboard()
+            },
             getResume() {
                 myResume().then(res => {
                     const data = res.data.data
+                    if (data.workExperience) {
+                        this.gzList = JSON.parse(data.workExperience)
+                    }
                     this.myResume = {
                         city: {
                             workplace: data.workplace
@@ -381,6 +514,7 @@
                 // 中国大陆座机号码正则表达式
                 const landlineRegex = /\b(0\d{2,3}-\d{7,8}(-\d{1,4})?)\b/;
 
+                const workList = JSON.stringify(this.gzList)
 
                 if (mobileRegex.test(phone) || landlineRegex.test(phone)) {
                     // 电话号码格式正确
@@ -390,7 +524,8 @@
                         education: education.label,
                         workplace: city.workplace ? city.workplace : city.parentLabel + '-' + city.label,
                         telephone: phone,
-                        wage
+                        wage,
+                        workExperience: workList
                     }).then(res => {
                         this.isShowButton = false;
                         this.getResume()
@@ -421,6 +556,121 @@
     }
 </script>
 
+<style lang="scss" scoped>
+    .s-header {
+        display: flex;
+        justify-content: space-between;
+        text-align: center;
+        font-size: 13px;
+        padding: 10px 14px 0 14px;
+
+        .heade-lf {
+            line-height: 24px;
+            width: 38px;
+            height: 24px;
+            border-radius: 4px;
+            border: 1px solid #666666;
+            color: #666666;
+        }
+
+        .heade-ri {
+            line-height: 24px;
+            width: 38px;
+            height: 24px;
+            border-radius: 4px;
+            border: 1px solid #57ff36;
+            background-color: #57ff36;
+            color: #FFFFFF;
+        }
+    }
+
+    .workexperience {
+        font-weight: bold;
+        padding: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+
+        .workexperience-right {
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            line-height: 13px;
+            text-align: center;
+            font-size: 20px;
+            color: #666666;
+            border: 1px solid #666666;
+        }
+    }
+
+    .card {
+        display: flex;
+        flex-direction: column;
+        padding: 14px;
+
+
+        .card-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 16px;
+
+            .card-right {
+                font-size: 12px;
+                color: #666666;
+                position: relative;
+                padding: 0 10px;
+                text-wrap: nowrap;
+            }
+
+            .card-right::after {
+                position: absolute;
+                content: '';
+                right: 0;
+                top: 5px;
+                width: 6px;
+                height: 6px;
+                border-top: 1px solid #666666;
+                border-right: 1px solid #666666;
+                transform: rotate(45deg);
+            }
+
+            .card-right:active {
+                color: #e8e8e8;
+            }
+        }
+
+        .card-subTitle {
+            margin-top: 6px;
+            display: flex;
+            justify-content: flex-start;
+            font-size: 12px;
+            color: #666666;
+
+            .card-sub1 {
+                margin-right: 10px;
+            }
+        }
+
+        .card-content {
+            margin-top: 4px;
+            font-size: 13px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            color: #666666;
+            text-indent: 2em;
+            border-bottom: 1rpx solid #f2f2f2;
+        }
+    }
+
+    .card:active {
+        background-color: #f2f2f2;
+    }
+</style>
 <style>
     .border {
         margin-left: 30rpx;