Skip to content

W
wangxiaolu-promotion-wechat
提交 cd67b396 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

上传照片添加loading效果

上级 80275d3a
隐藏空白字符变更
内嵌 并排
正在显示 包含 128 行增加 和 39 行删除
pages/home/index.vue
浏览文件 @ cd67b396
......@@ -26,13 +26,15 @@
</uni-forms-item>
</template>
<uni-forms-item label="当前位置">
<view class="address">
{{ address }}
<view class="add-formitem">
<view class="address">
{{ address }}
</view>
<uni-icons type="reload"
class="u-icon"
size="16"
ref="myIcon"
style="margin-left: 20px;"
style="margin-left: 5rpx;"
@click="refreshAdd">
刷新
</uni-icons>
......@@ -243,25 +245,26 @@ export default {
return
}
// 判断是否到了上班打卡时间
if (type === 1) {
const { clockInTime } = planObj
const time = parseTime(new Date(clockInTime), '{h}:{m}:{s}')
const isClock = checkStartLessEndTime(time, parseTime(new Date(), '{h}:{m}:{s}'))
if (!isClock) {
this.$modal.msgError('未到上班打卡时间')
return
}
}
// if (type === 1) {
// const { clockInTime } = planObj
// const time = parseTime(new Date(clockInTime), '{h}:{i}:{s}')
// const isClock = checkStartLessEndTime(time, parseTime(new Date(), '{h}:{i}:{s}'))
// if (!isClock) {
// this.$modal.msgError('未到上班打卡时间')
// return
// }
// }
// 判断是否能下班
if (type === 4) {
// 下班先提交促销上班看看是否通过后台校验
const res = await getOnWorkCardStatusAPI(this.onWorkRecord.reportedId)
if (res.code !== 0) return
}
// 判断确定下班
let wantClockOut = false
if (type === 4) {
await this.$modal.confirm('你真的确定下班吗？').then(() => {
await this.$modal.confirm('下班后无法再修改促销照片').then(() => {
wantClockOut = true
})
}
......@@ -289,9 +292,9 @@ export default {
try {
// 打卡
await getOnWorkCardAPI(attObj)
if (type === 1) {
if (type === 1 && !this.onWorkRecord.id) {
// 创建上报记录-才算完成打卡
const res = await createOnWorkPlanAPI({
await createOnWorkPlanAPI({
temporaryId: this.$store.getters.user.id, // 促销员 ID
temporaryName: this.$store.getters.user.name, // 促销员姓名
})
......@@ -362,7 +365,6 @@ export default {
res.data.clockOutTime = parseTime(new Date(res.data.clockOutTime), '{h}:{i}:{s}')
}
this.onWorkRecord = res.data
console.log(this.onWorkRecord)
this.isLoading = false
}
}
......@@ -371,11 +373,34 @@ export default {
<style scoped
lang="scss">
::v-deep .uni-forms-item__label text {
font-size: 30rpx;
}
::v-deep .checklist-text {
font-size: 30rpx !important;
}
::v-deep .uni-combox__input-box {
input {
font-size: 30rpx !important;
}
input::placeholder {
font-size: 30rpx !important;
}
.uni-combox__input-plac {
font-size: 30rpx !important;
}
}
::v-deep .uni-forms {
padding: 10px;
.uni-forms-item__label {
padding: 0;
width: 135rpx !important;
}
.uni-forms-item {
......@@ -383,7 +408,7 @@ export default {
}
.uni-forms-item__content {
margin-left: 20px;
margin-left: 10rpx;
}
}
......@@ -453,8 +478,28 @@ export default {
font-size: 26rpx;
}
}
}
}
}
.add-formitem {
display: flex;
align-items: center;
}
.address {
white-space: nowrap;
/* 强制文本不换行 */
overflow: hidden;
/* 隐藏溢出的文本 */
text-overflow: ellipsis;
/* 溢出的文本以省略号显示 */
font-size: 30rpx;
width: 460rpx;
}
::v-deep .uni-icons {
width: 100rpx;
font-size: 30rpx !important;
}
</style>
\ No newline at end of file
pages/register.vue
浏览文件 @ cd67b396
......@@ -7,22 +7,24 @@
<uni-forms-item label="头像"
required
name="avatarUrl">
<button class="avatar"
open-type="chooseAvatar"
@chooseavatar="chooseavatarFn">
<img v-if="formData.avatarUrl"
class="avatar_img"
:src="formData.avatarUrl" />
<img v-else
class="avatar_img"
src="/static/default_user.jpg">
</button>
<view class="header_wrap">
<button class="avatar"
open-type="chooseAvatar"
@chooseavatar="chooseavatarFn">
<img v-if="formData.avatarUrl"
class="avatar_img"
:src="formData.avatarUrl" />
<img v-else
class="avatar_img"
src="/static/default_user.jpg">
</button>
</view>
</uni-forms-item>
<uni-forms-item label="姓名"
required
name="name">
<uni-easyinput v-model="formData.name"
placeholder="请输入姓名" />
placeholder="请填写姓名" />
</uni-forms-item>
<uni-forms-item label="身份证">
<view class="id_card">
......@@ -140,10 +142,33 @@ page {
background-color: #ffffff;
}
::v-deep .header_wrap {
display: flex;
justify-content: center;
border-bottom: 1px solid #d8d8d8;
}
::v-deep .uni-forms-item__label text {
font-size: 30rpx;
}
::v-deep .uni-easyinput__content-input {
font-size: 30rpx !important;
}
::v-deep .uni-easyinput__placeholder-class {
font-size: 30rpx !important;
}
.file-title {
font-size: 30rpx !important;
}
.normal-register-container {
width: 100%;
padding: 40rpx;
button {
padding-left: 0 !important;
}
......@@ -196,9 +221,14 @@ page {
// 注册提示信息
.reg-info {
color: #999;
text-align: center;
margin-top: 30rpx;
font-size: 30rpx;
}
}
::v-deep .uni-file-picker {
margin-top: 5rpx !important;
}
</style>
pages/work/index.vue
浏览文件 @ cd67b396
......@@ -56,23 +56,22 @@ export default {
}
},
created() {
this.getOnWorkRecordFn()
this.getPromotionPhotoFn()
},
onShow() {
this.getPromotionPhotoFn()
this.getOnWorkRecordFn()
},
methods: {
// 获取促销员任务列表
async getOnWorkRecordFn() {
const res = await getOnWorkRecordAPI(this.$store.getters.user.id)
console.log(res)
this.storeName = res.data?.storeName
this.isOutTime = res.data?.clockOutTime ? true : false // 下班时间
this.activityReportedId = res.data?.reportedId // 活动上报 ID
},
// 获取推广照片列表
async getPromotionPhotoFn() {
this.$modal.loading("加载图片列表中...")
const res = await getPromotionPhotoRecordAPI(this.$store.getters.user.id)
if (res.data && res.data.tgscPhotoUrls) {
this.afterTryFileList = res.data.tgscPhotoUrls?.map(o => ({
......@@ -93,9 +92,11 @@ export default {
type: 'image'
}))
}
this.$modal.closeLoading()
},
// 推广试吃
async afterTry(event) {
this.$modal.loading("上传中...")
const photoUrl = await this.uploadPromotionPhoto(event)
photoUrl.forEach(url => {
this.afterTryFileList.push({
......@@ -104,10 +105,12 @@ export default {
})
})
// 提交照片给后台
this.submitPhoto()
await this.submitPhoto()
this.$modal.closeLoading()
},
// 推广互动
async afterInter(event) {
this.$modal.loading("上传中...")
const photoUrl = await this.uploadPromotionPhoto(event)
photoUrl.forEach(url => {
this.afterInterFileList.push({
......@@ -115,10 +118,13 @@ export default {
type: 'image'
})
})
this.submitPhoto()
// 提交照片给后台
await this.submitPhoto()
this.$modal.closeLoading()
},
// 推广成交
async afterDeal(event) {
this.$modal.loading("上传中...")
const photoUrl = await this.uploadPromotionPhoto(event)
photoUrl.forEach(url => {
this.afterDealFileList.push({
......@@ -126,9 +132,11 @@ export default {
type: 'image'
})
})
this.submitPhoto()
// 提交照片给后台
await this.submitPhoto()
this.$modal.closeLoading()
},
// 上传推广照片
// 上传推广照片到阿里云
async uploadPromotionPhoto(event) {
const { file } = event.detail;
let fileList = []
......@@ -158,7 +166,7 @@ export default {
tghdPhotoUrls: [...this.afterInterFileList.map(o => o.url)],
tgcjPhotoUrls: [...this.afterDealFileList.map(o => o.url)]
})
console.log(res)
return Promise.resolve(res)
},
// 删除照片
deleteTry(event) {
......@@ -181,6 +189,11 @@ export default {
<style lang="scss"
scoped>
::v-deep .uni-forms-item__label text {
font-size: 30rpx;
}
::v-deep .uni-forms {
padding: 10px;
......@@ -222,14 +235,14 @@ export default {
flex-direction: column;
.store_name {
font-size: 28rpx;
font-size: 30rpx;
display: inline-block;
color: #7b7b7b;
padding-left: 30rpx;
}
.title {
font-size: 26rpx;
font-size: 30rpx;
padding: 10px;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论