进入新公司，在培训了两天公司的规章制度后，接手了一个比较简单的推广员的需求，开发比较顺利，第二周周五开始接手拼券需求的开发，历时１０个工作日左右，但是因为对应的业务线没有人开发，该需求的上线一直搁置，在第四周的周五开始进行预售活动的开发。原本就没有参与需求评审的我，在刚开始接手的时候以为就是一个表单而已，应该也不复杂，开发过程中发现了各种问题，现总结如下：
1.原型不明确，有些按照原型开发的内容显示问题，在测试那边会将所有的问题作为ｂｕｇ指给我这个前端开发人员
2. 未参与评审的我，开发过程中发现对接口字段的过程中，也是一个煎熬，主要是所有的活动对应的都是一个后端模型，对字段的过程中，需要一个一个与模型中对应去找，但是接口需要的字段也有可能有模型中的有出入，在来回对字段的过程中耗费了不少时间。这里面也有我自己的问题，其实前端开发过程中，我完全可以按照自己命名的字段进行处理，只要在给后端接口数据的时候，将数据转化一下即可，这个在开始开发前没有考虑到，这也导致后期的很多问题是由字段不一致，格式不一致导致。
３. 开发过程中，有很多校验的规则，这边没有考虑到。
- 发货的时间肯定是要在活动开始时间之后
- 优惠层级的时间段限制：
一 不能间断，
二 不能超过活动时间结束时间不能早于活动开始时间，
三 时间虽然不能间断，但是上一个优惠层级的活动时段，肯定要间隔一秒继续增加第二个优惠时间段，否则后端判断则是时间段重复
四 支持删除，支持修改日期修改时间，只要是前面选中的日期时间，在下一个层级优惠时间中则不可选择
4.不同状态下，字段的显示与否、复制与否、编辑与否等都是要加判断的
5. 选择商品组件这块，优化了选中的项目不可继续选择，如图
，应当显示为实心的而非对勾的选中状态，选中之后的显示，需要前端自行进行分页，页数切换，当前每一页显示几条数据等切换都需要重新渲染页面等
下面附上开发的一些核心代码
···
添加活动商品
<el-form-item v-if="isSingleAdd" label="商品图：" class="form-item required-item">
<div class="materialImg" v-if="goodsForm.customGoodsImgUrl">
<img width="375px" height="180px" :src="imgOriginUrl + goodsForm.customGoodsImgUrl" alt />
</div>
<div class="materialImg" v-else>
<img width="375px" height="180px" :src="goodsForm.goodsImgUrl" alt />
</div>
<div class="upload-btn" style="margin-left:20px" @click="openAlbumDialog(2)">
<i class="el-icon-plus"></i>
<p class="upload-btn-text">修改商品图</p>
</div>
<br style="clear:both" />
<p class="form-tips">
建议尺寸：750px*635px，大小不超过1M。
<!-- <el-popover placement="right" trigger="click">
<img src="https://images.qmai.cn/resource/20210824210616/2021/09/14/activeImg.jpg" alt />
<el-button slot="reference" type="text" size="mini">查看示例</el-button>
</el-popover>-->
</p>
</el-form-item>
<el-form-item v-if="isSingleAdd" label="自定义分享文案" class="form-item">
<el-input
class="form-item-input"
v-model="goodsForm.shareDocument"
maxlength="20"
minlength="1"
show-word-limit
size="small"
placeholder="这家预售，真的很给力～"
></el-input>
<p class="form-tips">
活动商品默认分享文案：“这家预售，真的很给力～”
<!-- <el-popover placement="right" trigger="click">
<img src=" https://images.qmai.cn/resource/20210824210616/2021/09/14/detailShare.jpg" alt />
<el-button slot="reference" type="text" size="mini">查看示例</el-button>
</el-popover>-->
</p>
</el-form-item>
<el-form-item v-if="isSingleAdd" label=" 商品价格:" class="form-item">
<el-input
class="form-item-input"
v-model="goodsForm.goodsPrice"
maxlength="20"
minlength="1"
show-word-limit
:disabled="true"
size="small"
placeholder="请输入商品价格"
></el-input>
</el-form-item>
<!-- 批量添加的内容 -->
<el-form-item label=" 商品信息:" v-if="!isSingleAdd" class="form-item">
<el-table
:data="goodsForm.moreGoodsList"
tooltip-effect="light"
:header-cell-style="{background:'var(--bg-5, #f9fafc)',color:'var(--color-1, #606266)',padding: '0'}"
:cell-style="{padding: '5px'}"
:style="'width: 742px'"
border
size="small"
>
<el-table-column prop="name" label="商品名称:"></el-table-column>
<el-table-column label="商品图">
<template slot-scope="scope">
<img :src="scope.row.goodsImgUrl" alt />
</template>
</el-table-column>
<el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
<el-table-column label="商品活动库存" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.activityStocks" size="mini" :min="0" :max="999999"></el-input-number>
</template>
</el-table-column>
<el-table-column label="模拟销量" width="180" :render-header="renderHeaderMethods">
<template slot-scope="scope">
<el-input-number v-model="scope.row.imitateSale" size="mini" :min="0" :max="999999"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="delMoreGoods(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label=" 活动时间" class="form-item">
<el-date-picker
class="form-item-input"
:disabled="true"
v-model="goodsForm.payTime"
range-separator="至"
type="datetimerange"
align="right"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="优惠设置：" class="form-item required-item">
<el-table
:data="goodsForm.discountLevel"
tooltip-effect="light"
:header-cell-style="{background:'var(--bg-5, #f9fafc)',color:'var(--color-1, #606266)',padding: '0'}"
:cell-style="{padding: '5px'}"
border
:style=" 'width: 900px'"
size="small"
>
<el-table-column prop="date" label="门槛条件（下单时间）">
<template slot-scope="scope">
<el-date-picker
popper-class="displayBtn"
:disabled="true"
v-if="scope.$index == 0"
v-model="scope.row.payStart"
type="datetime"
size="small"
class="datepicker-width"
></el-date-picker>
<span v-if="scope.$index == 0" style="margin:0 10px">至</span>
<el-date-picker
class="datepicker-width"
popper-class="displayBtn"
v-if="scope.$index == 0"
@change="changeDate(scope.row.payEnd,scope.$index)"
@focus="focusTime(scope.row.payStart,scope.$index)"
v-model="scope.row.payEnd"
type="datetime"
size="small"
:picker-options="scope.row.expireTimeOption"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
default-time="23:59:59"
></el-date-picker>
<template v-else>
<el-date-picker
class="datepicker-width"
popper-class="displayBtn"
:disabled="true"
v-model="scope.row.payStart"
type="datetime"
size="small"
></el-date-picker>
<span style="margin:0 10px">至</span>
<el-date-picker
class="datepicker-width"
popper-class="displayBtn"
v-model="scope.row.payEnd"
@change="changeDate(scope.row.payEnd,scope.$index)"
type="datetime"
:picker-options="scope.row.expireTimeOption"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
default-time="23:59:59"
size="small"
></el-date-picker>
</template>
</template>
</el-table-column>
<el-table-column label="优惠力度" width="190">
<template slot-scope="scope">
<el-input-number v-model="scope.row.discountValue" size="mini" :min="1" :max="10" :precision="1"></el-input-number>
<span class="ml6">折</span>
</template>
</el-table-column>
<el-table-column v-if="isSingleAdd" prop="showPriceLow" label="优惠后价格（元）" width="120">
<template slot-scope="scope">
<span>{{( goodsForm.goodsPrice * scope.row.discountValue*0.1 ).toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button
size="mini"
v-if="scope.$index === goodsForm.discountLevel.length-1 &&scope.$index>0"
type="text"
@click="delDiscountLevel(scope.$index)"
>删除</el-button>
<el-button size="mini" v-else disabled="true" type="text" @click="delDiscountLevel(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<p class="form-tips">
活动时间内，根据下单时间，设置一级优惠或多级优惠（同一时间段内只能设置一种优惠）。
<el-popover placement="right" trigger="click">
<img width="800px" src="https://images.qmai.cn/resource/20210824210616/2021/09/14/youhui.jpg" alt />
<el-button slot="reference" type="text" size="mini">查看示例</el-button>
</el-popover>
</p>
<div class="discount-ladder-add" v-if="goodsForm.discountLevel.length < 5">
<el-button size="mini" type="text" @click="addDiscountLevel()">
<i class="el-icon-plus el-icon--right"></i>新增优惠层级
</el-button>
</div>
</el-form-item>
<el-form-item v-if="isSingleAdd" label=" 活动库存:" prop="activityStocks" class="form-item required-item">
<el-input-number
class="form-item-input"
v-model="goodsForm.activityStocks"
size="small"
:min="activityStatus==2?this.editGoodsStocks:1"
:max="999999"
placeholder="请输入活动库存"
></el-input-number>
<p class="form-tips">
已售
<span>{{ goodsForm.salesNum }} 件</span>
</p>
</el-form-item>
<el-form-item v-if="isSingleAdd" label=" 模拟销量:" class="form-item">
<el-input-number
class="form-item-input"
v-model="goodsForm.imitateSale"
size="small"
:min="0"
:max="999999"
placeholder="请输入模拟销量"
></el-input-number>
<p class="form-tips">
小程序端预售活动展示的销量=模拟销量+真实销量。
<!-- <el-popover placement="right" trigger="click">
<img src="https://images.qmai.cn/resource/20210824210616/2021/09/14/mockSale.jpg" alt />
<el-button slot="reference" type="text" size="mini">查看示例</el-button>
</el-popover>-->
</p>
</el-form-item>
<el-form-item class="form-item">
<div class="btn-class mt10">
<el-button @click="cancel(2)">取消</el-button>
<el-button type="primary" @click="createSureGoods(2)">确定添加</el-button>
</div>
</el-form-item>
</el-form>
<!-- 图片弹框 -->
<AlbumDialog ref="albumDialog" :options="albumOptions" @sendAlbumData="getAlbumData"></AlbumDialog>
···
2804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
