Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
aixianling
@@ -4,7 +4,7 @@
|
||||
<h2>创建成功</h2>
|
||||
<p>表单创建成功，您现在可以把表单分享给更多的好友，来填写数据！</p>
|
||||
<div class="result-btn" @click="confirm">确定</div>
|
||||
<div class="result-footer">
|
||||
<!-- <div class="result-footer">
|
||||
<div class="result-footer__item" @click="copy">
|
||||
<div>
|
||||
<image :src="`${$cdn}form/form-copylink.png`"/>
|
||||
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<h3>分享</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<span @click="toMap" class="right-span" :style="forms.mapInfo.address ? '' : 'color:#999;'">{{ forms.mapInfo.address || '请选择上报位置' }}</span>
|
||||
</u-form-item>
|
||||
<u-form-item label="所属网格" prop="girdName" required :border-bottom="false">
|
||||
<AiPagePicker type="gird" v-model="forms.girdId" @change="confirmGird" valueObj nodeKey="id" formType="2" class="right-span">
|
||||
<AiPagePicker type="gird" @select="confirmGird" valueObj nodeKey="id" formType="2" action="/app/appgirdmemberinfo/queryMyGirdList" class="right-span">
|
||||
<AiMore v-model="forms.girdName" placeholder="请选择所属网格"/>
|
||||
</AiPagePicker>
|
||||
</u-form-item>
|
||||
@@ -73,15 +73,15 @@ export default {
|
||||
},
|
||||
onLoad() {
|
||||
this.typeList()
|
||||
this.forms.girdId = this.user.girdId
|
||||
this.forms.girdName = this.user.girdName
|
||||
this.forms.girdMemberId = this.user.girdMemberId
|
||||
this.forms.girdMemberName = this.user.name
|
||||
},
|
||||
onShow() {
|
||||
document.title = '巡查添加'
|
||||
this.forms.name = this.user.name
|
||||
this.forms.phone = this.user.phone
|
||||
this.forms.girdId = this.user.girdId
|
||||
this.forms.girdName = this.user.girdName
|
||||
this.forms.girdMemberId = this.user.girdMemberId
|
||||
this.forms.girdMemberName = this.user.name
|
||||
uni.$on('chooseLat', res => {
|
||||
this.forms.mapInfo = {...res}
|
||||
})
|
||||
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
methods: {
|
||||
getStatistics() {
|
||||
this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
|
||||
this.$http.post(`/app/apppatrolreportinfo/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
|
||||
this.$http.post(`/app/apppatrolreportinfov2/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
|
||||
Object.keys(res.data.allCountMap).forEach((key) => {
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
},
|
||||
getList() {
|
||||
let {current, girdId, searchType} = this
|
||||
this.$http.post(`/app/apppatrolreportinfo/listByStatus`, null, {
|
||||
this.$http.post(`/app/apppatrolreportinfov2/listByStatus`, null, {
|
||||
params: {
|
||||
size: 10,
|
||||
current,
|
||||
|
||||
226
src/apps/AppWorkTask/AppWorkTask.vue
Normal file
226
src/apps/AppWorkTask/AppWorkTask.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="AppWorkTask">
|
||||
<AiTopFixed>
|
||||
<u-tabs :list="tabs" height="88" bar-width="136" :current="index" @change="change"></u-tabs>
|
||||
</AiTopFixed>
|
||||
<div class="list-data" v-if="list.length">
|
||||
<div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
|
||||
<header>{{item.taskTitle}}</header>
|
||||
<u-gap height="24"></u-gap>
|
||||
<u-row>
|
||||
<text>任务类型：</text>
|
||||
<text>{{$dict.getLabel("workTaskType",item.type)}}</text>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<text>截止时间：</text>
|
||||
<text>{{item.lastTime}}</text>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<text>剩余时间：</text>
|
||||
<text :style="{color:item.isOverTime==1?'#FF4466':'#1365DD'}">{{item.overTimeStatus}}</text>
|
||||
</u-row>
|
||||
<u-gap height="24"></u-gap>
|
||||
<span>已完成{{item.percent}}%</span>
|
||||
<u-gap height="16"></u-gap>
|
||||
<div class="progress">
|
||||
<div class="active" :style="{width: item.percent + '%'}"></div>
|
||||
</div>
|
||||
<img :src="$cdn + tag(item.status)" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
<AiAdd @add="add" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
appName: '工作任务',
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
current: 1,
|
||||
list: [],
|
||||
status: "加载更多",
|
||||
userSelect: false,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
tabs() {
|
||||
return [
|
||||
{name: "我执行的"},
|
||||
{name: "我完成的"},
|
||||
{name: "我发起的"},
|
||||
{name: "我督办的"},
|
||||
{name: "抄送我的"},
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$dict.load("workTaskType").then(() => {
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('getList', () => {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '工作任务'
|
||||
uni.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: 0
|
||||
})
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
tag(status) {
|
||||
return {
|
||||
"0": "common/1jxz.png",
|
||||
"1": "common/1ywc.png",
|
||||
"2": "common/1ygb.png"
|
||||
}[status]
|
||||
},
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
url: "./detail?id=" + item.id + "&taskCode=" + item.taskCode + "&isMine=" + this.index
|
||||
})
|
||||
},
|
||||
add() {
|
||||
uni.navigateTo({
|
||||
url: "./create"
|
||||
})
|
||||
},
|
||||
|
||||
change(e) {
|
||||
this.index = e
|
||||
this.current = 1
|
||||
this.getList()
|
||||
|
||||
},
|
||||
|
||||
map(index) {
|
||||
return {
|
||||
"0": {
|
||||
taskRole: 1,
|
||||
status: 0,
|
||||
},
|
||||
"1": {
|
||||
taskRole: 1,
|
||||
status: 1,
|
||||
},
|
||||
"2": {
|
||||
taskRole: 0,
|
||||
},
|
||||
"3": {
|
||||
taskRole: 2,
|
||||
},
|
||||
"4": {
|
||||
taskRole: 3,
|
||||
}
|
||||
}[index]
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.$http.post("/app/appworktaskinfo/list", null, {
|
||||
params: {
|
||||
...this.map(this.index),
|
||||
size: 10,
|
||||
current: this.current
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
if (this.current > 1 && this.current > res.data.pages) {
|
||||
this.status = "已经到底啦"
|
||||
}
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1;
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppWorkTask {
|
||||
min-height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 32px;
|
||||
|
||||
::v-deep .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-data {
|
||||
box-sizing: border-box;
|
||||
padding: 32px 32px 0 32px;
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
|
||||
& > header {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
& > .u-row {
|
||||
text {
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 26px;
|
||||
color: #649EFD;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #F0F1F2;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
.active {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 4px;
|
||||
background: #639EFD;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
317
src/apps/AppWorkTask/create.vue
Normal file
317
src/apps/AppWorkTask/create.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="create-sub-task">
|
||||
<template>
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="left">
|
||||
<em>*</em>任务类型
|
||||
</div>
|
||||
<picker @change="change" :value="form.type" range-key="dictName" :range="$dict.getDict('workTaskType')">
|
||||
<u-row>
|
||||
<div v-if="form.type!=null" class="value">{{$dict.getDict('workTaskType')[form.type]["dictName"]}}</div>
|
||||
<div v-else class="placeholder">请选择</div>
|
||||
<div class="arrow"></div>
|
||||
</u-row>
|
||||
</picker>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="left">
|
||||
<em>*</em>任务标题
|
||||
</div>
|
||||
</u-row>
|
||||
<u-gap height="16"></u-gap>
|
||||
<input maxlength="30" v-model.trim="form.taskTitle" placeholder="限30字">
|
||||
<u-gap height="32"></u-gap>
|
||||
</div>
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="left">
|
||||
<em>*</em>任务说明
|
||||
</div>
|
||||
</u-row>
|
||||
<u-gap height="16"></u-gap>
|
||||
<textarea maxlength="1000" v-model.trim="form.taskDescription" placeholder="请输入任务内容，限1000字"/>
|
||||
</div>
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="left">
|
||||
<em>*</em>截止日期
|
||||
</div>
|
||||
<picker @change="dateChange" mode="date" :value="form.lastTime" :start="startDate" :end="endDate">
|
||||
<u-row>
|
||||
<div v-if="form.lastTime!=null" class="value">{{form.lastTime}}</div>
|
||||
<div v-else class="placeholder">请选择</div>
|
||||
<div class="arrow" v-if="form.lastTime==null"></div>
|
||||
<div class="clear" v-else @click.stop="form.lastTime = null"></div>
|
||||
</u-row>
|
||||
</picker>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card" style="padding: 13px 17px;margin-bottom: 0">
|
||||
<u-row justify="between">
|
||||
<div class="left" style="line-height: 22px;">
|
||||
<em>*</em>执行人
|
||||
</div>
|
||||
<AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.userInfoList"
|
||||
action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
|
||||
<app-nucleic-acid-sampling v-if="form.userInfoList.length" class="value">
|
||||
已选择<em>{{form.userInfoList.slice(0,2).map(e=>e.name).join("、")}}</em>等
|
||||
<em>{{form.userInfoList.length}}</em>人
|
||||
</app-nucleic-acid-sampling>
|
||||
<span v-else class="color-999">请选择</span>
|
||||
<div class="arrow"></div>
|
||||
</AiPagePicker>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card border" style="padding: 13px 17px;margin-bottom: 0">
|
||||
<u-row justify="between">
|
||||
<div class="left" style="line-height: 22px;">督办人</div>
|
||||
<AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.checkUserList"
|
||||
action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
|
||||
<app-nucleic-acid-sampling v-if="form.checkUserList.length" class="value">
|
||||
已选择<em>{{form.checkUserList.slice(0,2).map(e=>e.name).join("、")}}</em>等
|
||||
<em>{{form.checkUserList.length}}</em>人
|
||||
</app-nucleic-acid-sampling>
|
||||
<span v-else class="color-999">请选择</span>
|
||||
<div class="arrow"></div>
|
||||
</AiPagePicker>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card" style="padding: 13px 17px">
|
||||
<u-row justify="between">
|
||||
<div class="left" style="line-height: 22px;">抄送人</div>
|
||||
<AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.sendUserList"
|
||||
action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
|
||||
<app-nucleic-acid-sampling v-if="form.sendUserList.length" class="value">
|
||||
已选择<em>{{form.sendUserList.slice(0,2).map(e=>e.name).join("、")}}</em>等
|
||||
<em>{{form.sendUserList.length}}</em>人
|
||||
</app-nucleic-acid-sampling>
|
||||
<span v-else class="color-999">请选择</span>
|
||||
<div class="arrow"></div>
|
||||
</AiPagePicker>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="card" style="padding: 12px 17px;">
|
||||
<u-row justify="between">
|
||||
<div class="left"> 发送任务通知</div>
|
||||
<switch :checked="!!form.isNofity" @change="(e)=>form.isNofity=Number(e.detail.value)"/>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="footer" @click="handleCreate">创建</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "create",
|
||||
data() {
|
||||
return {
|
||||
index: null,
|
||||
selectList: [],
|
||||
form: {
|
||||
parentTaskCode: null,
|
||||
type: null,
|
||||
taskTitle: "",
|
||||
taskDescription: "",
|
||||
lastTime: null,
|
||||
userInfoList: [],
|
||||
checkUserList: [],
|
||||
sendUserList: [],
|
||||
isNofity: 0
|
||||
},
|
||||
currentClick: null,
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
if (opt.taskCode) {
|
||||
this.form.parentTaskCode = opt.taskCode
|
||||
}
|
||||
this.$dict.load("workTaskType")
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate('start');
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate('end');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCreate() {
|
||||
if (this.form.type==null) return this.$u.toast("请选择任务类型")
|
||||
if (!this.form.taskTitle) return this.$u.toast("请输入任务标题")
|
||||
if (!this.form.taskDescription) return this.$u.toast("请输入任务说明")
|
||||
if (this.form.lastTime==null) return this.$u.toast("请选择截止日期")
|
||||
if (!this.form.userInfoList.length) return this.$u.toast("请选择执行人")
|
||||
|
||||
this.$http.post("/app/appworktaskinfo/addOrUpdate", {
|
||||
...this.form,
|
||||
lastTime:this.form.lastTime + " 23:59:59"
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("创建成功")
|
||||
uni.$emit('getList')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 500)
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
dateChange(e) {
|
||||
let date = this.getDate({format: true});
|
||||
if (new Date(date).getTime() > new Date(e.target.value).getTime()) {
|
||||
this.form.lastTime = null
|
||||
return this.$u.toast("截止时间不能小于当前时间")
|
||||
}
|
||||
this.form.lastTime = e.target.value
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 60;
|
||||
} else if (type === 'end') {
|
||||
year = year + 2;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
change(e) {
|
||||
this.form.type = e.detail.value
|
||||
},
|
||||
userChange(e) {
|
||||
if (this.currentClick == 0) {
|
||||
this.form.userInfoList = e
|
||||
} else if (this.currentClick == 1) {
|
||||
this.form.checkUserList = e
|
||||
} else if (this.currentClick == 2) {
|
||||
this.form.sendUserList = e
|
||||
}
|
||||
this.selectList = []
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.create-sub-task {
|
||||
min-height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 0 140px 0;
|
||||
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 32px 34px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.left {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #FF4466;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-top: 5px solid #CCCCCC;
|
||||
border-right: 5px solid #CCCCCC;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.clear {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #CCCCCC;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border-top: 1px solid rgba(216, 221, 230, 0.5);
|
||||
border-bottom: 1px solid rgba(216, 221, 230, 0.5);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1365DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
440
src/apps/AppWorkTask/detail.vue
Normal file
440
src/apps/AppWorkTask/detail.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<ai-top-fixed>
|
||||
<u-tabs :list="tabs" height="96" :is-scroll="false" item-width="33.33%" bar-width="250" :current="index"
|
||||
@change="change"></u-tabs>
|
||||
</ai-top-fixed>
|
||||
<template v-if="index==0">
|
||||
<div class="card">
|
||||
<header>{{detail.taskTitle}}</header>
|
||||
<u-gap height="16"></u-gap>
|
||||
<u-row>
|
||||
<span>任务类型：</span>
|
||||
<span>{{$dict.getLabel("workTaskType",detail.type)}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>开始时间：</span>
|
||||
<span>{{detail.createTime}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>截止时间：</span>
|
||||
<span style="color:#1365DD">{{detail.lastTime}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>剩余时间：</span>
|
||||
<span style="color:#1365DD">{{detail.overTimeStatus}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>任务状态：</span>
|
||||
<span>{{$dict.getLabel("workTaskDoStatus",detail.status)}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>执行说明：</span>
|
||||
<span>{{detail.doDescription}}</span>
|
||||
</u-row>
|
||||
<u-gap height="16"></u-gap>
|
||||
</div>
|
||||
<div class="card" style="padding-top: 0">
|
||||
<div class="label">任务说明</div>
|
||||
<u-read-more close-text="展开" color="#999999" show-height="300">
|
||||
<span>{{detail.taskDescription}}</span>
|
||||
</u-read-more>
|
||||
</div>
|
||||
<div class="card" style="padding-top: 0" v-if="detail.fileList && detail.fileList.length">
|
||||
<div class="label">相关附件</div>
|
||||
<div class="file" v-for="(item,index) in detail.fileList" :key="index" @click="preFile(item)">
|
||||
<u-row justify="between">
|
||||
<label class="left">
|
||||
<img :src="$cdn + 'common/appendix.png'" alt="">
|
||||
<span>{{item.name}}.{{item.postfix}}</span>
|
||||
</label>
|
||||
<span>{{(item.size/1024).toFixed(2)}}KB</span>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="index==1">
|
||||
<template v-if="['0','1'].includes(isMine)">
|
||||
<div class="card">
|
||||
<div class="label">我的进度</div>
|
||||
<text>已完成{{detail.myUserInfo.percent}}%</text>
|
||||
<div class="progress">
|
||||
<div class="pro-active" :style="{width:detail.myUserInfo.percent + '%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" v-if="detail.processList.length">
|
||||
<u-collapse>
|
||||
<u-collapse-item :title="item.createDate && item.createDate.split(' ')[0]" v-for="(item, index) in detail.processList" :key="index">
|
||||
<template slot="info">
|
||||
完成到<em>{{item.percent}}%</em>
|
||||
</template>
|
||||
{{item.remarks}}
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="card" v-for="(item,index) in detail.userInfoList" :key="index">
|
||||
<div class="label">{{item.userName}}</div>
|
||||
<text>已完成{{item.percent}}%</text>
|
||||
<div class="progress">
|
||||
<div class="pro-active" :style="{width:item.percent + '%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-if="index==2">
|
||||
<div class="card" v-if="list.length">
|
||||
<u-row justify="between" v-for="(item,index) in list" :key="index" class="item" @click="subDetail(item)">
|
||||
<label class="title">{{item.taskTitle}}</label>
|
||||
<label class="right">{{item.percent}}%
|
||||
<div class="arrow"></div>
|
||||
</label>
|
||||
</u-row>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</template>
|
||||
|
||||
<ai-back></ai-back>
|
||||
<div class="footer" v-if="index==1 && detail.myUserInfo.taskRole == 1 && detail.myUserInfo.doStatus==0" @click="handleClick">去完成</div>
|
||||
<div class="footer" v-if="index==2" @click="createSubTask">创建子任务</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "detail",
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
index: 0,
|
||||
id: null,
|
||||
taskCode: null,
|
||||
isMine: null,
|
||||
detail: {},
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
this.id = opt.id
|
||||
this.taskCode = opt.taskCode
|
||||
this.isMine = opt.isMine
|
||||
this.$dict.load("workTaskType", "workTaskDoStatus")
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{name: "信息"},
|
||||
{name: "进度"},
|
||||
{name: "子任务"},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['previewFile', 'injectJWeixin']),
|
||||
preFile(e) {
|
||||
if([".jpg",".png",".gif"].includes(e.postfix.toLowerCase())){
|
||||
uni.previewImage({
|
||||
current: e.url,
|
||||
urls: [e.url]
|
||||
})
|
||||
}else {
|
||||
this.previewFile({ ...e})
|
||||
}
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post("/app/appworktaskinfo/queryDetailById", null, {
|
||||
params: {
|
||||
id: this.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.detail = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getList(){
|
||||
this.$http.post("/app/appworktaskinfo/list", null, {
|
||||
params: {
|
||||
parentTaskCode: this.detail.taskCode,
|
||||
size: 999,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
createSubTask() {
|
||||
uni.navigateTo({
|
||||
url: "./create?taskCode=" + this.taskCode
|
||||
})
|
||||
},
|
||||
subDetail({id}) {
|
||||
uni.navigateTo({
|
||||
url: "./subDetail?id=" + id
|
||||
})
|
||||
},
|
||||
handleClick() {
|
||||
uni.navigateTo({
|
||||
url: "./finish?taskCode=" + this.detail.taskCode + "&percent=" + this.detail.myUserInfo.percent
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
this.index = e
|
||||
if (e == 2) {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
this.getDetail()
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
min-height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 140px;
|
||||
|
||||
::v-deep .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 32px;
|
||||
|
||||
header {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 64px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.u-row {
|
||||
& > div {
|
||||
background-color: #2266FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 30px;
|
||||
color: #999999;;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 30px;
|
||||
color: #343D65;
|
||||
margin-left: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 490px;
|
||||
height: 112px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-top: 3px solid #CCCCCC;
|
||||
border-right: 3px solid #CCCCCC;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: rgba(216, 221, 230, 0.5);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
height: 128px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CCCCCC;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
& > .u-row {
|
||||
height: 100%;
|
||||
|
||||
.left {
|
||||
width: 476px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
flex-shrink: 0;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
display: inline-block;
|
||||
line-height: 44px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
|
||||
& > text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
color: #649EFD;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 12px;
|
||||
background: #F2F4FC;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
margin: 16px 0 64px 0;
|
||||
|
||||
.pro-active {
|
||||
height: 12px;
|
||||
background: #639EFD;
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
|
||||
::v-deep .u-collapse {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 718px;
|
||||
height: 1px;
|
||||
background-color: rgba(216, 221, 230, 0.5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.u-collapse-head {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1365DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
src/apps/AppWorkTask/finish.vue
Normal file
181
src/apps/AppWorkTask/finish.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="finish">
|
||||
<div class="card">
|
||||
<header>设置进度</header>
|
||||
<u-gap height="120"></u-gap>
|
||||
<u-slider v-model="form.percent" min="0" max="100" :use-slot="true">
|
||||
<div class="wrap">
|
||||
<div class="value" :style="{right:form.percent<30?'-50px':''}">{{ form.percent }}%</div>
|
||||
<div class="btn" :style="{background:'url('+$cdn+ 'common/yuan.png)'}"></div>
|
||||
</div>
|
||||
</u-slider>
|
||||
<u-gap height="70"></u-gap>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">
|
||||
<em>*</em>
|
||||
完成说明
|
||||
</div>
|
||||
<textarea placeholder="请输入说明" v-model.trim="form.remarks" :maxlength="1000"></textarea>
|
||||
<u-gap height="28"></u-gap>
|
||||
<u-row justify="between">
|
||||
<text @click="form.remarks=''">清空内容</text>
|
||||
<text>{{ form.remarks.length }}/1000</text>
|
||||
</u-row>
|
||||
<u-gap height="48"></u-gap>
|
||||
</div>
|
||||
<div class="footer" @click="submit">提交</div>
|
||||
<u-modal v-model="show" content="提交后将无法撤回，您确定要执行此操作？" @confirm="handleConfirm"></u-modal>
|
||||
<ai-back ref="aiBack"></ai-back>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "finish",
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
show: false,
|
||||
form: {
|
||||
percent: 0,
|
||||
remarks: "",
|
||||
taskCode: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
this.form.taskCode = opt.taskCode
|
||||
this.form.percent = opt.percent
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (!this.form.remarks) return this.$u.toast("请输入完成说明")
|
||||
this.show = true
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$http.post("/app/appworktaskprocess/addOrUpdate", {
|
||||
...this.form
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("提交成功")
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.finish {
|
||||
min-height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 140px;
|
||||
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 32px;
|
||||
|
||||
header {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 44px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
::v-deep .u-slider {
|
||||
background: #F2F4FC !important;
|
||||
border-radius: 12px !important;
|
||||
|
||||
.u-slider__gap {
|
||||
height: 12px !important;
|
||||
|
||||
.u-slider__button-wrap {
|
||||
top: 100% !important;
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
width: 136px;
|
||||
height: 64px;
|
||||
background: #4F8DE7;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
right: 50px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #FF4466;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-row {
|
||||
& > text:first-child {
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
|
||||
& > text:last-child {
|
||||
font-size: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1365DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
src/apps/AppWorkTask/finishDetail.vue
Normal file
184
src/apps/AppWorkTask/finishDetail.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="finish-detail">
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="left">
|
||||
<u-avatar :src="detail.avatar" v-if="detail.avatar"></u-avatar>
|
||||
<div class="avatar" v-else>{{detail.name && detail.name.substr(-2)}}</div>
|
||||
<div class="info">
|
||||
<div class="name">{{detail.name}}</div>
|
||||
<div class="status">{{$dict.getLabel("workTaskRole",detail.taskRole)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="btn">-->
|
||||
<!-- <img src="../static/tx.png" alt="">催办提醒-->
|
||||
<!-- </div>-->
|
||||
</u-row>
|
||||
<u-gap height="32"></u-gap>
|
||||
<u-row>
|
||||
<div class="label">完成时间：</div>
|
||||
<div class="value">{{detail.finishTime}}</div>
|
||||
</u-row>
|
||||
<u-gap height="16"></u-gap>
|
||||
<u-row>
|
||||
<div class="label">逾期时间：</div>
|
||||
<div class="value" style="color: #FF4466">{{detail.overTimeStatus}}</div>
|
||||
</u-row>
|
||||
<u-gap height="30"></u-gap>
|
||||
</div>
|
||||
|
||||
<div class="card" v-if="detail.processList && detail.processList.length">
|
||||
<u-collapse v-for="(item,index) in detail.processList" :key="index">
|
||||
<u-collapse-item :title="item.createDate && item.createDate.split(' ')[0]">
|
||||
<template slot="info">
|
||||
完成到<em>{{item.percent}}%</em>
|
||||
</template>
|
||||
{{item.remarks}}
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</div>
|
||||
<ai-back></ai-back>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "finishDetail",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
this.id = opt.id
|
||||
this.$dict.load("workTaskRole").then(_=>this.getDetail())
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post("/app/appworktaskuserinfo/queryDetailById", null, {
|
||||
params: {
|
||||
id: this.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.finish-detail {
|
||||
min-height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
padding: 18px 32px;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #2266FF;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16px;
|
||||
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #1365DD;
|
||||
|
||||
& > img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
color: #343D65;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
|
||||
::v-deep .u-collapse {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 718px;
|
||||
height: 1px;
|
||||
background-color: rgba(216, 221, 230, 0.5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.u-collapse-head {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
339
src/apps/AppWorkTask/subDetail.vue
Normal file
339
src/apps/AppWorkTask/subDetail.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="sub-detail">
|
||||
<div class="card">
|
||||
<header>
|
||||
<em>[子任务]</em>
|
||||
{{detail.taskTitle}}
|
||||
</header>
|
||||
<u-gap height="16"></u-gap>
|
||||
<u-row>
|
||||
<span>任务类型：</span>
|
||||
<span>{{$dict.getLabel("workTaskType",detail.type)}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>开始时间：</span>
|
||||
<span>{{detail.createTime}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>截止时间：</span>
|
||||
<span>{{detail.lastTime}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>剩余时间：</span>
|
||||
<span style="color:#1365DD">{{detail.overTimeStatus}}</span>
|
||||
</u-row>
|
||||
<u-gap height="8"></u-gap>
|
||||
<u-row>
|
||||
<span>任务状态：</span>
|
||||
<span style="color:#1365DD">{{$dict.getLabel("workTaskDoStatus",detail.status)}}</span>
|
||||
</u-row>
|
||||
<u-gap height="16"></u-gap>
|
||||
</div>
|
||||
<div class="card" style="padding-top: 0">
|
||||
<div class="label">任务说明</div>
|
||||
<u-read-more close-text="展开" color="#999999" show-height="300">
|
||||
<span>{{detail.taskDescription}}</span>
|
||||
</u-read-more>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="label">当前进度</div>
|
||||
<text>已完成{{detail.percent}}%</text>
|
||||
<div class="progress">
|
||||
<div class="pro-active" :style="{width:detail.percent + '%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding-top: 0" v-if="detail.userInfoList && detail.userInfoList.length">
|
||||
<div class="label title">任务完成进度(<i>{{count}}</i>/{{detail.userInfoList.length}})</div>
|
||||
<u-row justify="between" v-for="(item,index) in detail.userInfoList" :key="index" @click="finishDetail(item)">
|
||||
<div>{{item.userName && item.userName.substr(-2)}}</div>
|
||||
<u-row justify="between" class="item">
|
||||
<text class="name">{{item.userName}}</text>
|
||||
<label class="right">
|
||||
<span>已完成{{item.percent}}%</span>
|
||||
<label class="arrow"></label>
|
||||
</label>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</div>
|
||||
|
||||
<div class="footer" v-if="detail.status==0">
|
||||
<div>
|
||||
<img :src="$cdn + 'common/gb.png'" alt="" @click="show=true,content='确定是否要关闭任务？',idx=0">关闭任务
|
||||
</div>
|
||||
<div>
|
||||
<img :src="$cdn + 'common/tx.png'" alt="" @click="show=true,content='该操作会向所有执行人发送提醒，您确定发送吗？',idx=1">一键催办
|
||||
</div>
|
||||
</div>
|
||||
<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
|
||||
<ai-back></ai-back>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "subDetail",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
detail: {},
|
||||
show: false,
|
||||
content: "",
|
||||
idx: null,
|
||||
count: 0,
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
this.id = opt.id
|
||||
this.$dict.load("workTaskType", "workTaskDoStatus").then(_ => this.getDetail())
|
||||
},
|
||||
methods: {
|
||||
finishDetail({id}){
|
||||
uni.navigateTo({
|
||||
url:"./finishDetail?id=" + id
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$http.post(this.idx == 0 ? "/app/appworktaskinfo/stopOrFinish" : "/app/appworktaskuserinfo/sendMesage", null, {
|
||||
params: {
|
||||
id: this.id,
|
||||
status: this.idx == 0 ? 2 : null
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast(this.idx == 0 ? "关闭成功" : "催办成功")
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post("/app/appworktaskinfo/queryDetailById", null, {
|
||||
params: {
|
||||
id: this.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.detail = res.data
|
||||
this.count = res.data?.userInfoList?.reduce((pre,cur)=>{
|
||||
return pre + (cur.percent==100 ? 1 : 0)
|
||||
},0)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-detail {
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 140px;
|
||||
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 32px;
|
||||
|
||||
header {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 64px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
color: #1365DD;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-row {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
position: relative;
|
||||
|
||||
|
||||
.item {
|
||||
height: 112px;
|
||||
|
||||
&:after {
|
||||
width: 622px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(216, 221, 230, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #4E8EEE;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 30px;
|
||||
color: #999999;;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 30px;
|
||||
color: #343D65;
|
||||
margin-left: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 490px;
|
||||
height: 112px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-top: 3px solid #CCCCCC;
|
||||
border-right: 3px solid #CCCCCC;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
color: #649EFD;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 12px;
|
||||
background: #F2F4FC;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
margin: 16px 0 80px 0;
|
||||
|
||||
.pro-active {
|
||||
height: 12px;
|
||||
background: #639EFD;
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
line-height: 48px;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
& > em {
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #1365DD;
|
||||
}
|
||||
|
||||
& > i {
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: #2EA222;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
height: 96px;
|
||||
border-bottom: 1px solid rgba(216, 221, 230, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& > div:first-child, div:last-child {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > div:first-child {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div class="AppCooperationPropagandaBeta">
|
||||
<AiTopFixed>
|
||||
<!-- <div class="tab-select">
|
||||
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(item,index)">{{ item.name }}<span></span></div>
|
||||
</div> -->
|
||||
<div class="search">
|
||||
<div class="searchBox">
|
||||
<u-search placeholder="请输入任务名称" v-model="taskTitle" clearabled @search="searchBtn" @clear="taskTitle='',getList()" :show-action="false"></u-search>
|
||||
</div>
|
||||
<div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="resident_list" v-if="list.length">
|
||||
<div class="card" v-for="(item,index) in list" :key="index">
|
||||
<div class="card_top" @click="toDetail(item)">
|
||||
<div class="card_title">
|
||||
<div class="card_left">{{ item.taskTitle }}</div>
|
||||
<div class="card_right"><span :class="item.status==0? 'status0': item.status==1? 'status1': item.status==2? 'status2':
|
||||
item.status == 3? 'status3':item.status==4? 'status4': 'status5'"></span>{{ $dict.getLabel('mstStatus', item.status) }}</div>
|
||||
</div>
|
||||
<div>群发时间：<span>{{ item.choiceTime }}</span></div>
|
||||
<div>共需
|
||||
<span class="num">
|
||||
<span v-if="tabIndex==0">{{ item.groupOwnerCount || 0 }}</span>
|
||||
<span v-else>{{ item.receiveExecutorCount || 0 }} </span>
|
||||
</span>名成员完成群发，目前已完成
|
||||
<span class="num">{{ item.completionRate || 0}}%</span>
|
||||
</div>
|
||||
<div>
|
||||
创建部门：
|
||||
<span v-if="item.createUserDeptName">{{ item.createUserDeptName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card_bottom" v-if="item.status == 4 && item.createUserId == user.wxUserId" @click="stopBtn(item.id)">关闭任务</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!list.length"/>
|
||||
|
||||
<div class="btn">
|
||||
<div class="addBtn" @click="toAdd">新增群发{{tabIndex==0? '居民群': tabIndex==1? '居民':'朋友圈'}}</div>
|
||||
</div>
|
||||
|
||||
<u-popup v-model="filterShow" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="tips"></div>
|
||||
<div class="title">
|
||||
<div
|
||||
class="cancel"
|
||||
@click.stop="(filterShow = false), (timeSelect = 0)"
|
||||
>
|
||||
取消
|
||||
</div>
|
||||
<p>筛选条件</p>
|
||||
<div class="confirm" @click.stop="selectConfirm">确定</div>
|
||||
</div>
|
||||
<scroll-view class="select-content" scroll-y="true">
|
||||
<div class="type-list">
|
||||
<div class="type-title">创建人</div>
|
||||
<AiPagePicker type="custom" :selected.sync="userIdList" nodeKey="createUserId" :ops="{url:`./selectUser?tabIndex=${this.tabIndex}`,label: 'id'}">
|
||||
<div class="page_picker">
|
||||
<span class="label" v-if="userIdList.length">已选择</span>
|
||||
<span v-else style="color:#999;">请选择</span>
|
||||
<u-icon name="arrow-right" color="#303133" size="24" style="margin-left:8px;"/>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="type-list">
|
||||
<div class="type-title">任务状态</div>
|
||||
<div class="items">
|
||||
<AiSelect dict="mstStatus" v-model="status"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-list">
|
||||
<div class="type-title">群发时间</div>
|
||||
<div class="item">
|
||||
<div>开始时间</div>
|
||||
<div style="display: flex;">
|
||||
<u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>结束时间</div>
|
||||
<div style="display: flex;">
|
||||
<u-input v-model="endTime" disabled placeholder="请选择结束时间" @click="showEnd = true" />
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
<u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
|
||||
<u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
|
||||
<div class="popBtn">
|
||||
<div @click="reset">重置</div>
|
||||
<div @click="selectConfirm">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'AppCooperationPropagandaBeta',
|
||||
appName: '协同宣发',
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
name: '群发居民群',
|
||||
value: 'ResidentsGroup'
|
||||
},
|
||||
{
|
||||
name: '群发居民',
|
||||
value: 'Residents'
|
||||
},
|
||||
{
|
||||
name: '群发朋友圈',
|
||||
value: 'CircleOfFriends'
|
||||
},
|
||||
],
|
||||
tabIndex: 0,
|
||||
current: 1,
|
||||
name: '',
|
||||
list: [],
|
||||
filterShow: false,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
start: "",
|
||||
end: "",
|
||||
showStart: false,
|
||||
showEnd: false,
|
||||
taskTitle: '',
|
||||
createUserId: '',
|
||||
userList: [],
|
||||
userIdList: [],
|
||||
status: '',
|
||||
sendType: 'ResidentsGroup',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
methods: {
|
||||
tabClick(item,index) {
|
||||
this.list = []
|
||||
this.current = 1
|
||||
this.tabIndex = index;
|
||||
this.sendType = item.value
|
||||
uni.removeStorageSync('userSelect')
|
||||
uni.removeStorageSync('wxGroupsUser')
|
||||
uni.removeStorageSync('girdSelect')
|
||||
uni.removeStorageSync('deptList')
|
||||
uni.removeStorageSync('sendScope')
|
||||
uni.removeStorageSync('ResidentTags')
|
||||
uni.removeStorageSync('ResidentTagsRemove')
|
||||
uni.removeStorageSync('circleTags')
|
||||
uni.removeStorageSync('circleTagsRemove')
|
||||
uni.removeStorageSync('startTime')
|
||||
uni.removeStorageSync('endTime')
|
||||
uni.removeStorageSync('selectDeptUser')
|
||||
uni.removeStorageSync('checkedList')
|
||||
this.$dict.load('mstStatus').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
if(this.tabIndex == 0) {
|
||||
uni.navigateTo({url: `./cooperationDetail?id=${item.id}&type=${this.sendType}`})
|
||||
} else {
|
||||
uni.navigateTo({url: `./circleDetail??id=${item.id}&type=${this.sendType}`})
|
||||
}
|
||||
},
|
||||
searchBtn() {
|
||||
this.current = 1
|
||||
this.list = [],
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
let url = ''
|
||||
let data = {
|
||||
current: this.current,
|
||||
taskTitle: this.taskTitle,
|
||||
startTime: this.start,
|
||||
endTime: this.end,
|
||||
createUserId: this.createUserId,
|
||||
status: this.status,
|
||||
}
|
||||
if(this.tabIndex==0) {
|
||||
url = `/app/appmasssendingtask/list`
|
||||
} else if(this.tabIndex==1 || this.tabIndex==2) {
|
||||
url = `/app/whchatmomentstask/list`
|
||||
data = {
|
||||
...data,
|
||||
taskType: this.tabIndex == 0? '': this.tabIndex==1? 1:0
|
||||
}
|
||||
}
|
||||
this.$http.post(url,null, {params:{...data}}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.list = this.current == 1? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.start = '',
|
||||
this.end = '',
|
||||
this.startTime = '',
|
||||
this.endTime = ''
|
||||
this.userIdList = []
|
||||
this.createUserId = ''
|
||||
this.status = ''
|
||||
uni.setStorageSync('userSelect', [])
|
||||
},
|
||||
|
||||
selectConfirm() {
|
||||
if(this.userIdList.length) {
|
||||
this.createUserId = this.userIdList?.[0].userId
|
||||
}
|
||||
|
||||
this.start = this.startTime,
|
||||
this.end = this.endTime
|
||||
let startTmp = this.start.split("-");
|
||||
let endTmp = this.end.split("-");
|
||||
let stT = new Date(startTmp[0], startTmp[1], startTmp[2]);
|
||||
let edT = new Date(endTmp[0], endTmp[1], endTmp[2]);
|
||||
if (stT.getTime() > edT.getTime()) {
|
||||
this.$u.toast("开始日期不能大于结束日期！");
|
||||
this.filterShow = true
|
||||
return
|
||||
}
|
||||
this.filterShow = false
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
confirmStart(val) {
|
||||
this.startTime = val.year + '-' + val.month + '-' + val.day
|
||||
},
|
||||
confirmEnd(val) {
|
||||
this.endTime = val.year + '-' + val.month + '-' + val.day
|
||||
},
|
||||
toAdd() {
|
||||
uni.navigateTo({url: `./addPropaganda?type=${this.sendType}`})
|
||||
},
|
||||
stopBtn(id) {
|
||||
this.$confirm('确定停止该任务吗？').then(() => {
|
||||
let url = ''
|
||||
if(this.tabIndex==0) {
|
||||
url = `/app/appmasssendingtask/closeTask`
|
||||
} else {
|
||||
url = `/app/whchatmomentstask/closeTask`
|
||||
}
|
||||
this.$http.post(url,null,{
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.code==0) {
|
||||
this.$u.toast('已关闭该任务')
|
||||
setTimeout(()=>{
|
||||
this.getList()
|
||||
}, 400)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = '宣发助手'
|
||||
this.$dict.load('mstStatus').then(() => {
|
||||
this.list = []
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppCooperationPropagandaBeta {
|
||||
|
||||
padding-bottom: 130px;
|
||||
box-sizing: border-box;
|
||||
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #3975c6;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #cddcf0;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.searchBox {
|
||||
width: 562px;
|
||||
}
|
||||
.filterBtn {
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.resident_list {
|
||||
padding: 24px 32px 20px 32px;
|
||||
box-sizing: border-box;
|
||||
.card {
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
.card_top {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
& > div {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.num {
|
||||
color: #3AA0FF;
|
||||
}
|
||||
.card_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.card_left {
|
||||
font-size: 32px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card_right {
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
// background: #3399FF;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.status0 {
|
||||
background: #FFA938;
|
||||
}
|
||||
.status1 {
|
||||
background: #FF6758;
|
||||
}
|
||||
.status2 {
|
||||
background: #3399FF;
|
||||
}
|
||||
.status3 {
|
||||
background: #FF6758;
|
||||
}
|
||||
.status4 {
|
||||
background: #3399FF;
|
||||
}
|
||||
.status5 {
|
||||
background: #1CCEB0;
|
||||
}
|
||||
.status6 {
|
||||
background: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card_bottom {
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #1365DD;
|
||||
font-weight: 600;
|
||||
border-top: 1px solid #d4d4d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.addBtn {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #CCCCCC;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
box-sizing: border-box;
|
||||
// height: 800px;
|
||||
.tips {
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: #dddddd;
|
||||
border-radius: 4px;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
margin: 32px auto 8px auto;
|
||||
}
|
||||
.title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 32px;
|
||||
.cancel {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
color: #aaa;
|
||||
}
|
||||
.confirm {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
color: #333;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
width: calc(100% - 400px);
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.select-content {
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.type-list {
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32px;
|
||||
.type-title {
|
||||
line-height: 108px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& > div:last-child {
|
||||
::v-deep .uni-input-input,
|
||||
::v-deep .uni-input-placeholder {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.items {
|
||||
::v-deep .AiSelect .display {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #1365dd;
|
||||
color: #fff;
|
||||
}
|
||||
.user {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.popBtn {
|
||||
display: flex;
|
||||
height: 98px;
|
||||
line-height: 98px;
|
||||
div {
|
||||
width: 50%;
|
||||
border: 2px solid #3399ff;
|
||||
text-align: center;
|
||||
}
|
||||
div:first-child {
|
||||
color: #3399ff;
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
background: #3399ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .uicon-arrow-right::before {
|
||||
color: #606266 !important;
|
||||
}
|
||||
.page_picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1354
src/project/biaopin/AppCooperationPropaganda/addPropaganda.vue
Normal file
1354
src/project/biaopin/AppCooperationPropaganda/addPropaganda.vue
Normal file
File diff suppressed because it is too large
Load Diff
471
src/project/biaopin/AppCooperationPropaganda/circleDetail.vue
Normal file
471
src/project/biaopin/AppCooperationPropaganda/circleDetail.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="circleDetail">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<div>{{ detail.taskTitle }} <span :class="detail.status==0? 'status0': detail.status==1? 'status1': detail.status==2? 'status2':
|
||||
detail.status == 3? 'status3':detail.status==4? 'status4': 'status5'">{{ $dict.getLabel('mstStatus', detail.status) }}</span></div>
|
||||
<div>
|
||||
创建时间: <span>{{ detail.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_right" @click="toDetail">查看详情</div>
|
||||
</div>
|
||||
|
||||
<div class="pieEcharts">
|
||||
<div class="pie_info">
|
||||
<div class="tips" v-if="detail.status">
|
||||
数据更新于<span>{{ info.remindTime }}</span>
|
||||
</div>
|
||||
<div class="pie_card">
|
||||
<div id="pieEcharts"></div>
|
||||
<div class="pie_right">
|
||||
<div>
|
||||
<span>计划执行成员：</span>
|
||||
<span>{{ info.planCount || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>未执行成员：</span>
|
||||
<span>{{ info.unExecutedCount || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>已执行成员：</span>
|
||||
<span>{{ info.executedCount || 0 }}</span>
|
||||
</div>
|
||||
<div v-if="type == 'Residents'">
|
||||
<span>无法执行成员：</span>
|
||||
<span>{{ info.cannotExecuteCount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detail.status == 4" class="btn" @click="remindSend">提醒成员发送</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list_content">
|
||||
<div class="list_card">
|
||||
<div class="tab" v-show="update">
|
||||
<div class="item" :class="subIndex == index? 'bgactive': ''" v-for="(item,index) in subsection" :key="index" @click="changeSub(index)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiTable
|
||||
:data="tableData"
|
||||
:colConfigs="type =='CircleOfFriends'? colConfigs1: colConfigs0"
|
||||
v-if="tableData.length"/>
|
||||
<AiEmpty v-if="!tableData.length" description="暂无数据"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
export default {
|
||||
name: "circleDetail",
|
||||
data() {
|
||||
return {
|
||||
pieEcharts: null,
|
||||
subIndex: 0,
|
||||
tableData: [],
|
||||
id: "",
|
||||
info: {},
|
||||
current: 1,
|
||||
firstClickTime: "",
|
||||
currentClickTime: "",
|
||||
detail: {},
|
||||
|
||||
subsection: [],
|
||||
update: true,
|
||||
type: "",
|
||||
percent: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colConfigs0() {
|
||||
return [
|
||||
{ prop: "userName", label: "成员" },
|
||||
{ prop: "customerCount", label: "预计送达居民"},
|
||||
];
|
||||
},
|
||||
colConfigs1() {
|
||||
return [
|
||||
{ prop: "userName", label: "成员" },
|
||||
{ prop: "customerCount", label: "预计发送朋友圈"},
|
||||
];
|
||||
},
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id;
|
||||
this.type = o.type
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler(v) {
|
||||
if(v=="CircleOfFriends") {
|
||||
this.subsection = ["未执行","已执行"]
|
||||
}
|
||||
if(v=="Residents") {
|
||||
this.subsection = ["未执行","已执行","无法执行"]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/whchatmomentstask/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toDetail() {
|
||||
uni.navigateTo({ url: `./detail?id=${this.id}&type=${this.type}` });
|
||||
},
|
||||
// 提醒发送
|
||||
remindSend() {
|
||||
uni.getSystemInfo({
|
||||
success: (res)=>{
|
||||
if(res.platform == "ios") {
|
||||
this.firstClickTime = new Date(this.detail.remindTime?.replace(/-/g, "/")).getTime() || 0
|
||||
} else {
|
||||
this.firstClickTime = new Date(this.detail.remindTime).getTime() || 0
|
||||
}
|
||||
}
|
||||
});
|
||||
this.currentClickTime = +new Date();
|
||||
let time = this.currentClickTime - this.firstClickTime;
|
||||
if (time >= 3600000) {
|
||||
this.$http.post("/app/whchatmomentstask/remindSend", null, {
|
||||
params: {
|
||||
id: this.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("已提醒成员发送");
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
time = 3600000 - time;
|
||||
const min = Math.floor(time / 60000); // 分钟
|
||||
let second = Math.floor(time / 1000); // 秒
|
||||
second %= 60;
|
||||
let msg = ``;
|
||||
if (min > 0 && second > 0) {
|
||||
msg = `${min}分钟${second}秒后可以再次点击`;
|
||||
} else if (min > 0 && second <= 0) {
|
||||
msg = `${min}分钟后可以再次点击`;
|
||||
} else if (min <= 0 && second > 0) {
|
||||
msg = `${second}秒后可以再次点击`;
|
||||
}
|
||||
this.$u.toast(msg);
|
||||
}
|
||||
},
|
||||
// 切换分段器
|
||||
changeSub(index) {
|
||||
this.subIndex = index;
|
||||
this.getStatistics();
|
||||
},
|
||||
// 获取表格数据
|
||||
getStatistics() {
|
||||
this.$http.post('/app/whchatmomentstask/detailStatistics', null, {
|
||||
params: {
|
||||
sendStatus: this.subIndex,
|
||||
taskId: this.id,
|
||||
current: this.current,
|
||||
size: 3000,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.info = res.data
|
||||
this.tableData = res.data.executedList.records
|
||||
setTimeout(()=>{
|
||||
this.getPieEcharts()
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 饼图
|
||||
getPieEcharts() {
|
||||
this.pieEcharts = echarts.init(document.getElementById("pieEcharts"));
|
||||
this.pieEcharts.setOption({
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
color: ["#1684fc","#ccc"],
|
||||
series: [
|
||||
{
|
||||
name: "任务完成率",
|
||||
type: "pie",
|
||||
radius: ["50%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.info.executedCount,
|
||||
name: "已执行成员",
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: ({ name, value }) => {
|
||||
this.percent = value / this.info.planCount * 100 || 0
|
||||
// console.log(this.percent)
|
||||
return `{name|任务达成率\n\n}{value|${ this.percent }%}`
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
color: "#999",
|
||||
|
||||
},
|
||||
value: {
|
||||
color: "#000000",
|
||||
fontSize: 26,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.info.planCount - this.info.executedCount,
|
||||
name: "未执行成员"
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = this.type == "Residents"? '群发居民':'群发朋友圈';
|
||||
this.$dict.load("mstStatus")
|
||||
this.getStatistics();
|
||||
this.getDetail();
|
||||
},
|
||||
mounted() {
|
||||
this.getPieEcharts();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.circleDetail {
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .emptyWrap {
|
||||
border: 2px solid #d0d4dc;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #3975c6;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #cddcf0;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header_left {
|
||||
width: calc(100% - 120px);
|
||||
div:first-child {
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.status0 {
|
||||
color: #FFA938 !important;
|
||||
}
|
||||
.status1 {
|
||||
color: #FF6758 !important;
|
||||
}
|
||||
.status2 {
|
||||
color: #3399FF !important;
|
||||
}
|
||||
.status3 {
|
||||
color: #FF6758 !important;
|
||||
}
|
||||
.status4 {
|
||||
color: #3399FF !important;
|
||||
}
|
||||
.status5 {
|
||||
color: #1CCEB0 !important;
|
||||
}
|
||||
.status6 {
|
||||
color: #666666 !important;
|
||||
}
|
||||
}
|
||||
div:last-child {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.header_right {
|
||||
width: 120px;
|
||||
color: #5297ff;
|
||||
}
|
||||
}
|
||||
|
||||
.pieEcharts {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
.pie_info {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.tips {
|
||||
color: #666666;
|
||||
padding: 40px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pie_card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
#pieEcharts {
|
||||
width: 60%;
|
||||
height: 400px;
|
||||
}
|
||||
::v-deep .emptyWrap {
|
||||
width: 60%;
|
||||
}
|
||||
.pie_right {
|
||||
width: 40%;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #3aa0ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_content {
|
||||
padding: 0 32px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.list_card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 30px 30px;
|
||||
|
||||
.tab {
|
||||
margin-bottom: 34px;
|
||||
|
||||
::v-deep .u-subsection uni-view{
|
||||
background: #eeef !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiTable .u-table .u-tr .u-td p{
|
||||
width: 100%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep .AiTable .u-table .u-tr .u-td {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab {
|
||||
height: 70px;
|
||||
background-color: #eeeeef;
|
||||
padding: 3px 4px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item {
|
||||
flex: 1;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
border-radius: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
.bgactive {
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
color: #3aa0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<div class="cooperationDetail">
|
||||
<AiTopFixed>
|
||||
<div class="tab-select">
|
||||
<div
|
||||
class="item"
|
||||
:class="tabIndex == index ? 'active' : ''"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
@click="tabClick(index)"
|
||||
>
|
||||
{{ item }}<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<div>{{ detail.taskTitle }} <span :class="detail.status==0? 'status0': detail.status==1? 'status1': detail.status==2? 'status2':
|
||||
detail.status == 3? 'status3':detail.status==4? 'status4': 'status5'">{{ $dict.getLabel('mstStatus', detail.status) }}</span></div>
|
||||
<div>
|
||||
创建时间: <span>{{ detail.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_right" @click="toDetail">查看详情</div>
|
||||
</div>
|
||||
|
||||
<div class="pieEcharts">
|
||||
<div class="pie_info">
|
||||
<div class="tips" v-if="detail.status">
|
||||
数据更新于<span>{{ info.remindTime }}</span>
|
||||
</div>
|
||||
<div class="pie_card">
|
||||
<div id="pieEcharts"></div>
|
||||
<div class="pie_right">
|
||||
<div>
|
||||
<span>{{
|
||||
tabIndex == 0 ? "计划执行成员：" : "计划送达居民群："
|
||||
}}</span>
|
||||
<span>{{ info.planCount || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{
|
||||
tabIndex == 0 ? "未执行成员：" : "未送达居民群："
|
||||
}}</span>
|
||||
<span>{{ info.unExecutedCount || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{
|
||||
tabIndex == 0 ? "已执行成员：" : "已送达居民群："
|
||||
}}</span>
|
||||
<span>{{ info.executedCount || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{
|
||||
tabIndex == 0 ? "无法执行成员：" : "无法送达居民群："
|
||||
}}</span>
|
||||
<span>{{ info.cannotExecuteCount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detail.status == 4" class="btn" @click="remindSend">提醒成员发送</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list_content">
|
||||
<div class="list_card">
|
||||
<div class="tab" >
|
||||
<div class="item" :class="subIndex == index? 'bgactive': ''" v-for="(item,index) in subsection" :key="index" @click="changeSub(index)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiTable
|
||||
:data="tableData"
|
||||
:colConfigs="tabIndex == 0 ? colConfigs0 : colConfigs1"
|
||||
v-if="tableData.length"/>
|
||||
<AiEmpty v-if="!tableData.length" description="暂无数据"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: ["成员统计", "居民群统计"],
|
||||
tabIndex: 0,
|
||||
pieEcharts: null,
|
||||
subIndex: 0,
|
||||
tableData: [],
|
||||
id: "",
|
||||
info: {},
|
||||
current: 1,
|
||||
firstClickTime: "",
|
||||
currentClickTime: "",
|
||||
detail: {},
|
||||
subsection: [],
|
||||
update0: true,
|
||||
update1: false,
|
||||
type: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colConfigs0() {
|
||||
return [
|
||||
{ prop: "groupOwnerName", label: "成员" },
|
||||
{ label: "预计送达居民群", prop: "groupCount" },
|
||||
];
|
||||
},
|
||||
colConfigs1() {
|
||||
return [
|
||||
{ label: "居民群", prop: "groupName" },
|
||||
{ label: "群人数", prop: "memberCount" },
|
||||
{ prop: "groupOwnerName", label: "群主" },
|
||||
];
|
||||
},
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id;
|
||||
this.type = o.type
|
||||
},
|
||||
methods: {
|
||||
tabClick(index) {
|
||||
this.tabIndex = index;
|
||||
this.subIndex = 0
|
||||
if(this.sendChannel == 1) {
|
||||
if(this.tabIndex == 0) {
|
||||
this.subsection = ["未执行","已执行"]
|
||||
} else if(this.tabIndex == 1){
|
||||
this.subsection = ["未送达","已送达"]
|
||||
}
|
||||
} else if(this.sendChannel != 1) {
|
||||
if(this.tabIndex == 0) {
|
||||
this.subsection = ["未执行","已执行","无法执行"]
|
||||
} else if(this.tabIndex == 1) {
|
||||
this.subsection = ["未送达","已送达","无法送达"]
|
||||
}
|
||||
}
|
||||
this.getStatistics();
|
||||
},
|
||||
|
||||
getDetail() {
|
||||
this.$http
|
||||
.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`)
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toDetail() {
|
||||
uni.navigateTo({ url: `./detail?id=${this.id}&type=${this.type}` });
|
||||
},
|
||||
// 提醒发送
|
||||
remindSend() {
|
||||
uni.getSystemInfo({
|
||||
success: (res)=>{
|
||||
if(res.platform == "ios") {
|
||||
this.firstClickTime = new Date(this.detail.remindTime.replace(/-/g, "/")).getTime() || 0
|
||||
} else {
|
||||
this.firstClickTime = new Date(this.detail.remindTime).getTime() || 0
|
||||
}
|
||||
}
|
||||
});
|
||||
this.currentClickTime = +new Date();
|
||||
let time = this.currentClickTime - this.firstClickTime;
|
||||
if (time >= 3600000) {
|
||||
this.$http.post("/app/appmasssendingtask/remindSend", null, {
|
||||
params: {
|
||||
id: this.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("已提醒成员发送");
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
time = 3600000 - time;
|
||||
const min = Math.floor(time / 60000); // 分钟
|
||||
let second = Math.floor(time / 1000); // 秒
|
||||
second %= 60;
|
||||
let msg = ``;
|
||||
if (min > 0 && second > 0) {
|
||||
msg = `${min}分钟${second}秒后可以再次点击`;
|
||||
} else if (min > 0 && second <= 0) {
|
||||
msg = `${min}分钟后可以再次点击`;
|
||||
} else if (min <= 0 && second > 0) {
|
||||
msg = `${second}秒后可以再次点击`;
|
||||
}
|
||||
this.$u.toast(msg);
|
||||
}
|
||||
},
|
||||
// 切换分段器
|
||||
changeSub(index) {
|
||||
this.subIndex = index;
|
||||
this.getStatistics();
|
||||
},
|
||||
// 获取数据
|
||||
getStatistics() {
|
||||
this.$http.post(`/app/appmasssendingtask/detailStatistics`, null, {
|
||||
params: {
|
||||
type: this.tabIndex,
|
||||
sendStatus: this.subIndex,
|
||||
taskId: this.id,
|
||||
current: this.current,
|
||||
size: 3000,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.info = res.data;
|
||||
this.tableData = res.data.executedList.records;
|
||||
setTimeout(()=>{
|
||||
this.getPieEcharts();
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 饼图
|
||||
getPieEcharts() {
|
||||
this.pieEcharts = echarts.init(document.getElementById("pieEcharts"));
|
||||
this.pieEcharts.setOption({
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
color: ["#1684fc", "#ccc"],
|
||||
series: [
|
||||
{
|
||||
name: this.tabIndex == 0 ? "任务完成率" : "群发送达率",
|
||||
type: "pie",
|
||||
radius: ["50%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.info.executedCount,
|
||||
name: "已执行成员",
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: ({ name, value }) => {
|
||||
let num = value / this.info.planCount * 100
|
||||
if (this.tabIndex == 0) {
|
||||
return num % 1==0? `{name|任务达成率\n\n}{value|${num}%}`: `{name|任务达成率\n\n}{value|${ num.toFixed(1) }%}`;
|
||||
} else {
|
||||
return num % 1==0? `{name|群发送达率\n\n}{value|${num}%}`: `{name|群发送达率\n\n}{value|${ num.toFixed(1) }%}`;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
color: "#999",
|
||||
|
||||
},
|
||||
value: {
|
||||
color: "#000000",
|
||||
fontSize: 26,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.info.planCount - this.info.executedCount ,
|
||||
name: "未执行成员"
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
detail: {
|
||||
handler(v) {
|
||||
if(v) {
|
||||
this.sendChannel = v.sendChannel
|
||||
if(v.sendChannel == 1) {
|
||||
if(this.tabIndex == 0) {
|
||||
this.subsection = ["未执行","已执行"]
|
||||
this.$forceUpdate()
|
||||
} else if(this.tabIndex == 1){
|
||||
this.subsection = ["未送达","已送达"]
|
||||
this.$forceUpdate()
|
||||
}
|
||||
} else if(v.sendChannel != 1) {
|
||||
if(this.tabIndex == 0) {
|
||||
this.subsection = ["未执行","已执行","无法执行"]
|
||||
this.$forceUpdate()
|
||||
} else if(this.tabIndex == 1){
|
||||
this.subsection = ["未送达","已送达","无法送达"]
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
document.title = "群发居民群统计";
|
||||
this.$dict.load("mstStatus")
|
||||
this.getStatistics();
|
||||
this.getDetail();
|
||||
},
|
||||
mounted() {
|
||||
this.getPieEcharts();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cooperationDetail {
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .emptyWrap {
|
||||
border: 2px solid #d0d4dc;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.tab-select {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #3975c6;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #cddcf0;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header_left {
|
||||
width: calc(100% - 120px);
|
||||
div:first-child {
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.status0 {
|
||||
color: #FFA938 !important;
|
||||
}
|
||||
.status1 {
|
||||
color: #FF6758 !important;
|
||||
}
|
||||
.status2 {
|
||||
color: #3399FF !important;
|
||||
}
|
||||
.status3 {
|
||||
color: #FF6758 !important;
|
||||
}
|
||||
.status4 {
|
||||
color: #3399FF !important;
|
||||
}
|
||||
.status5 {
|
||||
color: #1CCEB0 !important;
|
||||
}
|
||||
.status6 {
|
||||
color: #666666 !important;
|
||||
}
|
||||
}
|
||||
div:last-child {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.header_right {
|
||||
width: 120px;
|
||||
color: #5297ff;
|
||||
}
|
||||
}
|
||||
|
||||
.pieEcharts {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
.pie_info {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.tips {
|
||||
color: #666666;
|
||||
padding: 40px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pie_card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
#pieEcharts {
|
||||
width: 60%;
|
||||
height: 400px;
|
||||
}
|
||||
::v-deep .emptyWrap {
|
||||
width: 60%;
|
||||
}
|
||||
.pie_right {
|
||||
width: 40%;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #3aa0ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_content {
|
||||
padding: 0 32px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.list_card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 30px 30px;
|
||||
|
||||
.tab {
|
||||
margin-bottom: 34px;
|
||||
|
||||
::v-deep .u-subsection uni-view{
|
||||
background: #eeef !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiTable .u-table .u-tr .u-td p{
|
||||
width: 100%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep .AiTable .u-table .u-tr .u-td {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
height: 70px;
|
||||
background-color: #eeeeef;
|
||||
padding: 3px 4px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item {
|
||||
flex: 1;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
border-radius: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
.bgactive {
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
color: #3aa0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
src/project/biaopin/AppCooperationPropaganda/detail.vue
Normal file
349
src/project/biaopin/AppCooperationPropaganda/detail.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="task">
|
||||
<div class="task_title">群发客户群</div>
|
||||
<div class="task_content">
|
||||
<div class="item">
|
||||
<span>任务名称</span>
|
||||
<span>{{ data.taskTitle }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>创建人</span>
|
||||
<span>
|
||||
{{ data.createUserName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item" v-if="data.enableExamine == 1">
|
||||
<span>审批人</span>
|
||||
<span>
|
||||
<span v-for="(item, index) in approver" :key="index" style="color: #333;">
|
||||
{{ item.examineUserName }}
|
||||
<span v-show="index < approver.length - 1">、</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>所在部门</span>
|
||||
<span style="display: flex;">
|
||||
<div v-if="data.createUserDeptName">{{ data.createUserDeptName }}</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>群发时间</span>
|
||||
<span>{{ data.choiceTime }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>结束时间</span>
|
||||
<span>{{ data.taskEndTime }}</span>
|
||||
</div>
|
||||
<div class="item" v-if="data.markTag">
|
||||
<span>标签</span>
|
||||
<span>{{ data.markTag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task_results" v-if="data.enableExamine == 1">
|
||||
<img v-if="data.status == 1" src="./images/refuse.png" alt="">
|
||||
<img v-if="data.status > 1" src="./images/pass.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="scope">
|
||||
<span>群发范围</span>
|
||||
<div>
|
||||
<span v-if="data.sendScope==0">全部</span><span v-if="data.sendScope==1 || data.sendScope==2">按条件筛选的</span>
|
||||
<span v-if="type=='ResidentsGroup'">{{ data.receiveGroupCount || 0}}</span>
|
||||
<span v-if="type=='Residents'">{{ resSum || 0}}</span>
|
||||
<span v-if="type=='CircleOfFriends'">{{ cirSum || 0}}</span>
|
||||
<span v-if="type=='ResidentsGroup'">个居民群</span><span v-if="type=='Residents'">个居民</span><span v-if="type=='CircleOfFriends'">个朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>群发内容</p>
|
||||
<div>
|
||||
<!-- 文本 -->
|
||||
<div class="textarea" v-show="content.length">{{ content }}</div>
|
||||
<!-- 图片 -->
|
||||
<div class="pictures" v-show="picList.length">
|
||||
<image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
|
||||
</div>
|
||||
<!-- 视频 -->
|
||||
<div class="video" v-show="videoList.length">
|
||||
<video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
|
||||
</div>
|
||||
<!-- 文件 -->
|
||||
<div class="file" v-show="fileList.length">
|
||||
<div class="file_item" v-for="(item,index) in fileList" :key="index" @click="prevFile(item.sysFile)">
|
||||
<img src="./images/files.png" alt="">
|
||||
<div>{{ item.sysFile.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 网页 -->
|
||||
<div class="webpage" v-show="webpage.length">
|
||||
<p>链接地址</p>
|
||||
<a v-for="(item, index) in webpage" :key="index" :href="item.linkUrl">
|
||||
<div v-if="item.linkTitle">{{item.linkTitle}}</div>
|
||||
<div v-else>{{ item.linkUrl }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 小程序 -->
|
||||
<div class="miniapp" v-show="miniapp.length">
|
||||
<p>小程序</p>
|
||||
<div v-for="(item, index) in miniapp" :key="index">{{item.mpTitle}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" v-if="data.status==0 && data.haveExaminPower">
|
||||
<div class="refuse" @click="refuseBtn">审核拒绝</div>
|
||||
<div class="pass" @click="passBtn">审核通过</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState ,mapActions } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
data: {},
|
||||
content: '',
|
||||
picList: [],
|
||||
videoList: [],
|
||||
fileList: [],
|
||||
webpage: [],
|
||||
miniapp: [],
|
||||
pictres: [],
|
||||
options: '',
|
||||
approver: [], //审批人
|
||||
type: '',
|
||||
resSum: 0,
|
||||
cirSum: 0,
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.type = o.type
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
let url = ''
|
||||
if(this.type == 'ResidentsGroup') {
|
||||
url = `/app/appmasssendingtask/queryDetailById?id=${this.id}`
|
||||
} else {
|
||||
url = `/app/whchatmomentstask/queryDetailById?id=${this.id}`
|
||||
}
|
||||
this.$http.post(url).then(res=> {
|
||||
if (res?.data) {
|
||||
this.data = res.data
|
||||
this.content = res.data.contents.filter(v=> v.msgType == 0)?.[0].content
|
||||
this.picList = res.data.contents.filter(v=> v.msgType == 1)
|
||||
this.videoList = res.data.contents.filter(v=> v.msgType == 2)
|
||||
this.fileList = res.data.contents.filter(v=> v.msgType == 3)
|
||||
this.webpage = res.data.contents.filter(v=> v.msgType == 4)
|
||||
this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
|
||||
this.approver = res.data.examines
|
||||
this.resSum = res.data.groupList?.reduce((pre, cur) => pre + cur.customerCount, 0)
|
||||
this.cirSum = res.data.executorList?.reduce((pre, cur) => pre + cur.customerCount, 0)
|
||||
// if(res.data.status==1) { // 拒绝
|
||||
// this.approver = res.data.examines.filter(e=> e.examineStatus == 2)
|
||||
// } else { // 通过
|
||||
// this.approver = res.data.examines
|
||||
// }
|
||||
}
|
||||
})
|
||||
},
|
||||
previewImages(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map(v => v.imgPicUrl),
|
||||
current: img
|
||||
})
|
||||
},
|
||||
...mapActions(['previewFile']),
|
||||
prevFile(file) {
|
||||
this.$loading()
|
||||
this.previewFile({ ...file }).then(()=>{
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
// 拒绝
|
||||
refuseBtn() {
|
||||
this.pass = 0
|
||||
this.$confirm('确认审核拒绝该任务？').then(() => {
|
||||
this.examine()
|
||||
})
|
||||
},
|
||||
// 通过
|
||||
passBtn() {
|
||||
this.pass = 1
|
||||
this.$confirm('确认审核通过该任务？').then(() => {
|
||||
this.examine()
|
||||
})
|
||||
},
|
||||
examine() {
|
||||
let url = ''
|
||||
if(this.type == 'ResidentsGroup') {
|
||||
url = `/app/appmasssendingtask/examine`
|
||||
} else {
|
||||
url = `/app/whchatmomentstask/examine`
|
||||
}
|
||||
this.$http.post(url,null,{
|
||||
params: {
|
||||
pass: this.pass,
|
||||
id: this.id,
|
||||
options: this.options
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.code == 0) {
|
||||
if(this.pass == 0) {
|
||||
this.$u.toast('任务已拒绝')
|
||||
} else if(this.pass == 1) {
|
||||
this.$u.toast('任务审核通过')
|
||||
}
|
||||
this.getDetail()
|
||||
}
|
||||
}).catch(()=> {
|
||||
})
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = "群发审批"
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
padding: 32px 32px 140px 32px;
|
||||
box-sizing: border-box;
|
||||
.task {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
background: #FFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
|
||||
.task_title {
|
||||
padding: 26px 32px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid #DDDDDD;
|
||||
}
|
||||
.task_content {
|
||||
padding: 0 32px 26px 32px;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
display: flex;
|
||||
padding-top: 26px;
|
||||
box-sizing: border-box;
|
||||
span:first-child {
|
||||
width: 160px;
|
||||
color: #999999;
|
||||
}
|
||||
span:last-child {
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.task_results {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #FFF;
|
||||
border-radius: 8px;
|
||||
padding: 26px 32px;
|
||||
box-sizing: border-box;
|
||||
.scope {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
& > span {
|
||||
width: 160px;
|
||||
color: #999;
|
||||
}
|
||||
& > div {
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
p {
|
||||
color: #999;
|
||||
}
|
||||
.textarea,
|
||||
.pictures,
|
||||
.video,
|
||||
.file,
|
||||
.webpage,
|
||||
.miniapp {
|
||||
background: #F9F9F9;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 26px;
|
||||
}
|
||||
.pictures {
|
||||
margin-top: 16px;
|
||||
image {
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
image:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
video {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
.file {
|
||||
.file_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
font-size: 32px;
|
||||
z-index: 9;
|
||||
.refuse {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background: #FFF;
|
||||
color: #FF4466;
|
||||
text-align: center;
|
||||
}
|
||||
.pass {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: #3975C6;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
273
src/project/biaopin/AppCooperationPropaganda/fodderList.vue
Normal file
273
src/project/biaopin/AppCooperationPropaganda/fodderList.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="fodderList">
|
||||
<div class="search-box">
|
||||
<u-search placeholder="素材名称" v-model="title" :clearabled="false" @search="getList()" :show-action="false"></u-search>
|
||||
</div>
|
||||
<div class="card" v-for="(item,index) in list" :key="index">
|
||||
<div class="left">
|
||||
<!-- 话术 -->
|
||||
<div v-if="type == 0">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="info">{{ item.content }}</div>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<div class="files" v-if="type == 1">
|
||||
<div class="pics">
|
||||
<img :src="item.imgPicUrl" alt="">
|
||||
</div>
|
||||
<div class="pic-r">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="mar-top info">{{ item.fileSizeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小程序 -->
|
||||
<div class="files" v-if="type == 2">
|
||||
<div class="pic">
|
||||
<img :src="item.pictureUrl" alt="">
|
||||
</div>
|
||||
<div class="files-r align">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<!-- <div class="mar-top info">www.baidu.com</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件 -->
|
||||
<div class="files" v-if="type == 3">
|
||||
<div class="pic">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
|
||||
</div>
|
||||
<div class="files-r">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="mar-top info">{{ item.fileSizeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频 -->
|
||||
<div class="files" v-if="type == 4">
|
||||
<div class="pic">
|
||||
<img :src="item.pictureUrl" alt="">
|
||||
</div>
|
||||
<div class="files-r">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="mar-top info">{{ item.fileSizeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 网页 -->
|
||||
<div class="files" v-if="type == 5">
|
||||
<div class="pic">
|
||||
<img :src="item.pictureUrl" alt="">
|
||||
</div>
|
||||
<div class="files-r">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="mar-top info">{{ item.linkUrl }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" @click="itemCheck(item)">
|
||||
<img src="./images/xzh.png" v-if="item.isChecked" alt="">
|
||||
<img src="./images/xz.png" v-else alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "fodderList",
|
||||
data() {
|
||||
return {
|
||||
mstType: null,
|
||||
current: 1,
|
||||
title: '',
|
||||
type: '',
|
||||
list: [],
|
||||
checkedList: [],
|
||||
typeArr: ['话术','图片','小程序','文件','视频','网页'],
|
||||
arr: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http.post(`/app/appmaterialinfo/listByMST`,null,{
|
||||
params: {
|
||||
mstType: this.mstType,
|
||||
current: this.current,
|
||||
title: this.title,
|
||||
type: this.type,
|
||||
size: 10,
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.arr = this.current==1? res.data.records : [...this.arr, ...res.data.records]
|
||||
this.list = this.arr.map(e => {
|
||||
return {
|
||||
...e,
|
||||
isChecked: this.checkedList?.find(i => i.id == e.id),
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
itemCheck(e) {
|
||||
e.isChecked = !!!e.isChecked
|
||||
if (e.isChecked == true) {
|
||||
this.checkedList.push(e)
|
||||
} else {
|
||||
let index = this.checkedList.findIndex(item=> item.id==e.id)
|
||||
index>=0 && this.checkedList.splice(index,1)
|
||||
}
|
||||
uni.setStorageSync('checkedList', this.checkedList)
|
||||
},
|
||||
submit() {
|
||||
if (!this.checkedList.length) {
|
||||
return this.$u.toast(`请选择${this.typeArr[this.mstType]}`)
|
||||
}
|
||||
uni.$emit("fodder", [this.checkedList])
|
||||
uni.setStorageSync('checkedList', this.checkedList)
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
if(o.type == 'CircleOfFriends') {
|
||||
this.mstType = 1
|
||||
} else if(o.type == 'Residents') {
|
||||
this.mstType = 2
|
||||
} else if (o.type == 'ResidentsGroup') {
|
||||
this.mstType = 0
|
||||
}
|
||||
this.type = o.msgType
|
||||
this.checkedList = uni.getStorageSync('checkedList') || []
|
||||
this.getList()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++,
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fodderList {
|
||||
padding: 120px 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 104px;
|
||||
background: #FFF;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
.left {
|
||||
width: calc(100% - 50px);
|
||||
height: auto;
|
||||
background: #f2f2f2;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mar-top {
|
||||
margin-top: auto;
|
||||
}
|
||||
.files {
|
||||
display: flex;
|
||||
|
||||
.pic {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pics {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-r {
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
|
||||
.files-r {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
.align {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppCooperationPropaganda/images/files.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/files.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/project/biaopin/AppCooperationPropaganda/images/pass.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/pass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/project/biaopin/AppCooperationPropaganda/images/refuse.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/refuse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
BIN
src/project/biaopin/AppCooperationPropaganda/images/shaixuan.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/shaixuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 663 B |
BIN
src/project/biaopin/AppCooperationPropaganda/images/tx@2x.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/tx@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/project/biaopin/AppCooperationPropaganda/images/xz.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/xz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/project/biaopin/AppCooperationPropaganda/images/xzh.png
Normal file
BIN
src/project/biaopin/AppCooperationPropaganda/images/xzh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
203
src/project/biaopin/AppCooperationPropaganda/scopedSelect.vue
Normal file
203
src/project/biaopin/AppCooperationPropaganda/scopedSelect.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="scopedSelect">
|
||||
<div class="item">
|
||||
<div>添加人</div>
|
||||
<div v-if="type == 1" style="display: inline-block;">
|
||||
<AiPagePicker type="custom" :selected.sync="deptListArr" @select="getDeptList" nodeKey="id" isRequire="0" :ops="{ url: `./selectDeptUser?selectTtype=1`, label: 'id' }">
|
||||
<span class="label" v-if="deptListArr.length">已选择{{ deptListArr.length }}个部门</span>
|
||||
<span class="color_gray" v-else>请选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3" size="28"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div @click="selectUser" v-if="type == 2" style="display: inline-block;">
|
||||
<span v-if="selectedUser.length">已选择{{ selectedUser.length }}个网格</span>
|
||||
<span class="color_gray" v-else>请选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" v-if="['Residents', 'CircleOfFriends'].includes(sendType)">
|
||||
<div>包含标签</div>
|
||||
<div @click="toTagsList(0)">
|
||||
<span v-if="circleTags.length || ResidentTags.length">已选择{{ circleTags.length || ResidentTags.length }}个标签</span>
|
||||
<span class="color_gray" v-else>请选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" v-if="['Residents'].includes(sendType)">
|
||||
<div>剔除标签</div>
|
||||
<div @click="toTagsList(1)">
|
||||
<span v-if="circleTagsRemove.length || ResidentTagsRemove.length">已剔除{{ circleTagsRemove.length || ResidentTagsRemove.length }}个标签</span>
|
||||
<span class="color_gray" v-else>请选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" v-if="['Residents'].includes(sendType)">
|
||||
<div>添加时间</div>
|
||||
<div @click="showCalendar = true">
|
||||
<span v-if="!startTime.length && !endTime.length" class="color_gray">请选择</span>
|
||||
<span v-if="startTime.length && endTime.length">{{ startTime }} - {{ endTime }}</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="items" v-if="['Residents'].includes(sendType)">
|
||||
<div>性别</div>
|
||||
<div class="sex">
|
||||
<span :class="sex == 0? 'active':''" @click="sex = 0">全部</span>
|
||||
<span :class="sex == 1? 'active':''" @click="sex = 1">男</span>
|
||||
<span :class="sex == 2? 'active':''" @click="sex = 2">女</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>
|
||||
|
||||
<div class="btn">
|
||||
<div class="submitBtn" @click="submit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
export default {
|
||||
name: "scopedSelect",
|
||||
data() {
|
||||
return {
|
||||
type: "",
|
||||
sendType: '',
|
||||
showCalendar: false,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
sex: 0, // 性别：0-女、1-男、2-全部
|
||||
userList: [],
|
||||
deptListArr: [],
|
||||
selectedUser: [],
|
||||
circleTags: [], // 朋友圈包含标签
|
||||
circleTagsRemove: [], // 朋友圈剔除标签
|
||||
ResidentTags: [], // 居民包含标签
|
||||
ResidentTagsRemove: [], // 居民剔除标签
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['selectEnterpriseContact']),
|
||||
// 选网格
|
||||
selectUser() {
|
||||
uni.navigateTo({url: `./selectGridMember`})
|
||||
},
|
||||
// 选部门
|
||||
getDeptList(e) {
|
||||
this.deptListArr = e
|
||||
uni.setStorageSync('deptList', this.deptListArr)
|
||||
},
|
||||
|
||||
// 选择包含、剔除的标签 0包含 1剔除
|
||||
toTagsList(e) {
|
||||
uni.navigateTo({url: `./tagsList?type=${e}&sendType=${this.sendType}`})
|
||||
},
|
||||
|
||||
// 选时间范围
|
||||
selectDate(e) {
|
||||
this.startTime = e.startDate
|
||||
this.endTime = e.endDate
|
||||
},
|
||||
submit() {
|
||||
uni.setStorageSync('gender',this.sex)
|
||||
uni.setStorageSync('startTime', this.startTime)
|
||||
uni.setStorageSync('endTime', this.endTime)
|
||||
uni.setStorageSync('deptList',this.deptListArr)
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.type = o.type;
|
||||
this.sendType = o.sendType;
|
||||
document.title = this.type == 1? '按部门选择':'按网格选择'
|
||||
},
|
||||
onShow() {
|
||||
// 网格或者部门
|
||||
this.selectedUser = uni.getStorageSync('girdSelect') || []
|
||||
this.deptListArr = uni.getStorageSync('deptList') || []
|
||||
|
||||
// 添加时间
|
||||
this.startTime = uni.getStorageSync('startTime')
|
||||
this.endTime = uni.getStorageSync('endTime')
|
||||
// 标签
|
||||
if(this.sendType == 'Residents') {
|
||||
this.ResidentTags = uni.getStorageSync('ResidentTags') // 居民包含
|
||||
this.ResidentTagsRemove = uni.getStorageSync('ResidentTagsRemove') // 居民剔除
|
||||
} else if(this.sendType == 'CircleOfFriends') {
|
||||
this.circleTags = uni.getStorageSync('circleTags') // 朋友圈包含
|
||||
this.circleTagsRemove = uni.getStorageSync('circleTagsRemove') // 朋友圈剔除
|
||||
}
|
||||
// 性别
|
||||
this.sex = uni.getStorageSync('gender')
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scopedSelect {
|
||||
.item {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.items {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
.sex {
|
||||
margin-top: 32px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
border: 2px solid #CCCCCC;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.active {
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color_gray {
|
||||
color: #CCD0D3;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.submitBtn {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #CCCCCC;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
324
src/project/biaopin/AppCooperationPropaganda/selectDeptUser.vue
Normal file
324
src/project/biaopin/AppCooperationPropaganda/selectDeptUser.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<section class="selectDeptUser">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in selectDeptPath" :key="index">
|
||||
<span v-if="index>0" class="mar-h4">/</span>
|
||||
<span class="color-3F8DF5" @click="deptNameClick(item, index)">{{ item.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<div class="imgselect" v-if="type == 1" :class="{checked:item.isChecked}" @click.stop="itemCheck(item, 'dept')"/>
|
||||
<img src="./images/gird--select-icon.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.name }}</div>
|
||||
<img src="./images/right-icon.png" alt="" class="imgs"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type == 0">
|
||||
<div class="userCards" v-for="e in userList" :key="e.id">
|
||||
<div class="imges">
|
||||
<div class="imgselect" :class="{checked:e.isChecked}" @click.stop="itemCheck(e, 'user')"/>
|
||||
<img src="./images/tx@2x.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rights fill">
|
||||
<div class="applicationNames" v-text="e.name"></div>
|
||||
<div class="idNumbers">{{ e.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!hasData"/>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "selectDeptUser",
|
||||
appName: "选择人员",
|
||||
data() {
|
||||
return {
|
||||
selected: [],
|
||||
allData: null,
|
||||
treeList: [],
|
||||
selectDeptPath: [],
|
||||
userList: [],
|
||||
type: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasData() {
|
||||
return this.treeList?.length > 0 || this.userList?.length > 0
|
||||
},
|
||||
...mapState(['user'])
|
||||
},
|
||||
onLoad(o) {
|
||||
|
||||
this.type = o.selectTtype.split('?')[0]
|
||||
|
||||
if(this.type == 1) { //选择发送范围部门
|
||||
this.getAllDepts()
|
||||
this.selected = uni.getStorageSync('deptList') || []
|
||||
}else { //选择审批人
|
||||
this.getListAll()
|
||||
this.selected = uni.getStorageSync('selectDeptUser') || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSelected(id, corpId) {
|
||||
return !!this.selected.find(e => e.id == id && e.corpId == corpId)
|
||||
},
|
||||
getListAll() {
|
||||
this.$http.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
|
||||
if (res?.data) {
|
||||
let parents = res.data.map(e => e.parentid)
|
||||
this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
|
||||
this.deptInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
getAllDepts() {
|
||||
// this.$http.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
|
||||
// if (res?.data) {
|
||||
// let parents = res.data.map(e => e.parentid)
|
||||
// this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
|
||||
// this.deptInit()
|
||||
// }
|
||||
// })
|
||||
|
||||
this.$http.post(`/app/wxcp/wxdepartment/listAll?wxMainDepartmentId=${this.user.wxMainDepartmentId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
let parents = res.data.map(e => e.parentid)
|
||||
this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
|
||||
this.deptInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
deptInit() {
|
||||
if(this.type == 1) { //选择发送范围部门
|
||||
this.treeList = this.allData.filter(e => e.id == this.user.wxMainDepartmentId)
|
||||
}else { //选择审批人
|
||||
this.treeList = this.allData.filter(e => !e.parentid)
|
||||
}
|
||||
this.selectDeptPath = [{name: "可选范围", id: ''}]
|
||||
},
|
||||
itemClick({id, name, corpId}) {
|
||||
let index = this.selectDeptPath.findIndex(e => e.id == id && e.corpId == corpId)
|
||||
if (index == -1) {
|
||||
this.selectDeptPath.push({name, id, corpId})
|
||||
this.getDeptsAndUsersByParent(id, corpId)
|
||||
}
|
||||
},
|
||||
getDeptsAndUsersByParent(departmentId, corpId) {
|
||||
this.treeList = this.allData.filter(e => e.parentid == departmentId && e.corpId == corpId)
|
||||
this.userList = []
|
||||
this.$http.post(`/app/wxcp/wxuser/listByDeptId`, null, {
|
||||
params: {departmentId, status: 1, cid: corpId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.userList = res.data.map(e => ({...e, isChecked: this.isSelected(e.id, e.corpId)}))
|
||||
}
|
||||
})
|
||||
},
|
||||
deptNameClick(row, index) {
|
||||
this.userList = []
|
||||
if (!index) { //第一级别
|
||||
this.deptInit()
|
||||
} else {
|
||||
let length = this.selectDeptPath.length - index
|
||||
this.selectDeptPath.splice(index + 1, length)
|
||||
this.getDeptsAndUsersByParent(row.id, row.corpId)
|
||||
}
|
||||
},
|
||||
itemCheck(row, kind) {
|
||||
row.isChecked = !row.isChecked
|
||||
if (row.isChecked) {
|
||||
this.selected.push({...row, kind})
|
||||
} else {
|
||||
let index = this.selected.findIndex(e => e.id == row.id)
|
||||
this.selected.splice(index, 1)
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
submit() {
|
||||
console.log([this.selected].flat())
|
||||
if(this.type == 1) { //选择部门
|
||||
if(![this.selected].flat().length) {
|
||||
return this.$u.toast('请选择部门')
|
||||
}
|
||||
uni.setStorageSync('deptList', [this.selected].flat())
|
||||
}else { //选择人
|
||||
if(![this.selected].flat().length) {
|
||||
return this.$u.toast('请选择审核人员')
|
||||
}
|
||||
uni.$emit("pagePicker:custom", [this.selected].flat())
|
||||
// uni.setStorageSync('selectDeptUser', [this.selected].flat())
|
||||
}
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectDeptUser {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
background-image: url("./images/xz.png");
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.checked {
|
||||
background-image: url("./images/xzh.png");
|
||||
}
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userCards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.rights {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.color-3F8DF5 {
|
||||
color: #3F8DF5;
|
||||
}
|
||||
|
||||
.mar-h4 {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<section class="selectGridMember">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in selectGridPath" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
|
||||
style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
|
||||
</div>
|
||||
<div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<img src="./images/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
|
||||
@click.stop="girdClick(item)"/>
|
||||
<img src="./images/xz.png" alt="" class="imgselect" v-else
|
||||
@click.stop="girdClick(item)"/>
|
||||
<img src="./images/gird--select-icon.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./images/right-icon.png" alt="" class="imgs"/>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!hasData"/>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 选择网格
|
||||
name: "selectGridMember",
|
||||
data() {
|
||||
return {
|
||||
selected: {},
|
||||
allData: null,
|
||||
treeList: [],
|
||||
selectGridPath: [],
|
||||
userList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasData() {
|
||||
return this.treeList?.length > 0 || this.userList?.length > 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.selected.id = this.$route.query.id
|
||||
this.getAllGrids()
|
||||
this.selected = uni.getStorageSync('girdSelect') || []
|
||||
},
|
||||
onShow() {
|
||||
document.title = '选择人员'
|
||||
},
|
||||
methods: {
|
||||
getAllGrids() {
|
||||
uni.showLoading({title: '加载中'})
|
||||
this.$http.post('/app/appgirdinfo/listByInfo').then((res) => {
|
||||
if (res?.data) {
|
||||
let parents = res.data.map(e => e.parentGirdId)
|
||||
this.allData = res.data.map(e => ({...e, isChecked: this.selected.find(i=> i.id == e.id), hasChildren: parents.includes(e.id)}))
|
||||
this.gridInit()
|
||||
}
|
||||
}).then(()=> {
|
||||
uni.hideLoading()
|
||||
}).finally(()=> {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
gridInit() {
|
||||
this.treeList = this.allData.filter(e => !e.parentGirdId)
|
||||
this.selectGridPath = [{girdName: "可选范围", id: ''}]
|
||||
},
|
||||
itemClick({id,girdName}) {
|
||||
this.selectGridPath.push({girdName,id})
|
||||
this.getGridsAndUsersByParent(id)
|
||||
},
|
||||
|
||||
getGridsAndUsersByParent(id) {
|
||||
this.treeList = this.allData.filter(e => (e.parentGirdId == id)).map(v=> ({...v, isChecked: this.selected.find(i=>i.id == v.id)}))
|
||||
},
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if (!index) { //第一级别
|
||||
this.gridInit()
|
||||
} else {
|
||||
let length = this.selectGridPath.length - index
|
||||
this.selectGridPath.splice(index, length)
|
||||
this.getGridsAndUsersByParent(row.id)
|
||||
}
|
||||
},
|
||||
girdClick(row) {
|
||||
row.isChecked = !!!row.isChecked
|
||||
if(row.isChecked) {
|
||||
this.selected.push(row)
|
||||
} else {
|
||||
let index=this.selected.findIndex(item=>row.id == item.id)
|
||||
index >= 0 && this.selected.splice(index, 1)
|
||||
}
|
||||
uni.setStorageSync('girdSelect', this.selected)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.selected.length) {
|
||||
return this.$u.toast('请选择网格员')
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectGridMember {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
// word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userCards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.rights {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
240
src/project/biaopin/AppCooperationPropaganda/selectTag.vue
Normal file
240
src/project/biaopin/AppCooperationPropaganda/selectTag.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<section class="selectTag">
|
||||
<div class="header-middle">
|
||||
<div class="userCards" v-for="(e, index) in tagList" :key="index">
|
||||
<div class="imges">
|
||||
<div class="imgselect" :class="{ 'checked': e.isChecked }" @click.stop="itemCheck(index)" />
|
||||
</div>
|
||||
<div class="rights fill">
|
||||
<div class="applicationNames">{{ e.dictName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!tagList.length"/>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
// 选择标签
|
||||
name: "selectTag",
|
||||
data() {
|
||||
return {
|
||||
selected: {},
|
||||
tagList: [],
|
||||
current: 1,
|
||||
tabIndex: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
hasData() {
|
||||
return this.userList?.length > 0
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.tabIndex = o.tabIndex
|
||||
this.selected = o.selected.split(',') || []
|
||||
this.getTagList()
|
||||
},
|
||||
methods: {
|
||||
isSelected(val) {
|
||||
var isCheck = false
|
||||
this.selected.map((item) => {
|
||||
if(item == val) {
|
||||
isCheck = true
|
||||
}
|
||||
})
|
||||
return isCheck
|
||||
},
|
||||
getTagList() {
|
||||
this.$dict.load(['mstTag']).then(() => {
|
||||
var list = this.$dict.getDict('mstTag')
|
||||
list.map((item) => {
|
||||
item.isChecked = this.isSelected(item.dictValue)
|
||||
})
|
||||
this.tagList = list
|
||||
})
|
||||
},
|
||||
itemCheck(index) {
|
||||
this.tagList[index].isChecked = !this.tagList[index].isChecked
|
||||
},
|
||||
submit() {
|
||||
this.selected = []
|
||||
this.tagList.map((item) => {
|
||||
if(item.isChecked) {
|
||||
this.selected.push(item.dictValue)
|
||||
}
|
||||
})
|
||||
if(!this.selected.length) {
|
||||
return this.$u.toast('请选择标签')
|
||||
}
|
||||
uni.$emit("tagSelect", this.selected)
|
||||
uni.setStorageSync('tagList', this.selected)
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectTag {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
background-image: url("./images/xz.png");
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.checked {
|
||||
background-image: url("./images/xzh.png");
|
||||
}
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userCards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.rights {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.color-3F8DF5 {
|
||||
color: #3F8DF5;
|
||||
}
|
||||
|
||||
.mar-h4 {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
243
src/project/biaopin/AppCooperationPropaganda/selectUser.vue
Normal file
243
src/project/biaopin/AppCooperationPropaganda/selectUser.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<section class="selectUser">
|
||||
<div class="header-middle">
|
||||
<div class="userCards" v-for="e in userList" :key="e.userId">
|
||||
<div class="imges">
|
||||
<div class="imgselect" :class="{ 'checked': e.isChecked }" @click.stop="itemCheck(e)" />
|
||||
<img src="./images/tx@2x.png" alt="" class="avatras"/>
|
||||
</div>
|
||||
<div class="rights fill">
|
||||
<div class="applicationNames">{{ e.userName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" v-if="!userList.length"/>
|
||||
</div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
// 选择创建人
|
||||
name: "selectUser",
|
||||
data() {
|
||||
return {
|
||||
selected: {},
|
||||
userList: [],
|
||||
current: 1,
|
||||
tabIndex: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
hasData() {
|
||||
return this.userList?.length > 0
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.tabIndex = o.tabIndex
|
||||
this.selected = uni.getStorageSync('userSelect') || []
|
||||
this.getCreateUserList()
|
||||
},
|
||||
methods: {
|
||||
isSelected(userId) {
|
||||
return this.selected.userId===userId
|
||||
},
|
||||
getCreateUserList() {
|
||||
this.userList = []
|
||||
let url = '/app/appmasssendingtask/createUserlist'
|
||||
// if(this.tabIndex == 0) {
|
||||
// url = `/app/appmasssendingtask/createUserlist`
|
||||
// } else {
|
||||
// url = `/app/whchatmomentstask/createUserlist`
|
||||
// }
|
||||
this.$http.post(url).then(res => {
|
||||
if (res?.data) {
|
||||
this.userList = res.data.map(e => ({
|
||||
userId: e.create_user_id,
|
||||
userName: e.create_user_name,
|
||||
isChecked: this.isSelected(e.create_user_id)}
|
||||
))
|
||||
}
|
||||
})
|
||||
},
|
||||
itemCheck(row) {
|
||||
this.userList.forEach(e => e.isChecked = false)
|
||||
const index = this.userList.findIndex(o => {
|
||||
return row.userId===o.userId
|
||||
})
|
||||
this.userList[index].isChecked = true
|
||||
this.selected = this.userList[index]
|
||||
},
|
||||
submit() {
|
||||
if(!this.selected.userId) {
|
||||
return this.$u.toast('请选择创建人')
|
||||
}
|
||||
uni.$emit("pagePicker:custom", [this.selected])
|
||||
uni.setStorageSync('userSelect', this.selected)
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selectUser {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0 1px 0 0 #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
background-image: url("./images/xz.png");
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.checked {
|
||||
background-image: url("./images/xzh.png");
|
||||
}
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rightes {
|
||||
width: calc(100% - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
|
||||
.applicationNames {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userCards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.rights {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
height: inherit;
|
||||
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.color-3F8DF5 {
|
||||
color: #3F8DF5;
|
||||
}
|
||||
|
||||
.mar-h4 {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
212
src/project/biaopin/AppCooperationPropaganda/sendScoped.vue
Normal file
212
src/project/biaopin/AppCooperationPropaganda/sendScoped.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="sendScoped">
|
||||
<div class="checkedBox">
|
||||
<div class="item" v-for="(item,index) in checkList" :key="index" @click="checkBtn(item)">
|
||||
<div class="left">
|
||||
<icon type="success" size="18" v-if="item.value == sendScope"/>
|
||||
<icon type="circle" size="18" v-if="item.value != sendScope" />
|
||||
<div class="title">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="right" v-if="item.value != 0">
|
||||
<div v-if="item.value == '1' && deptSelect.length">已选择{{ deptSelect.length }}个部门</div>
|
||||
<div v-if="item.value == '2' && girdSelect.length">已选择{{ girdSelect.length }}个网格</div>
|
||||
<u-icon name="arrow-right" color="#CCD0D3" ></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="submitBtn" @click="submit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sendScoped',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
checkList: [
|
||||
// { name: '全部居民群', value: '0'},
|
||||
{ name: '按部门选择', value: '1'},
|
||||
// { name: '按网格选择', value: '2'}
|
||||
],
|
||||
showContent: false,
|
||||
sendType: '', // Residents,CircleOfFriends,ResidentsGroup
|
||||
deptSelect: [],
|
||||
girdSelect: [],
|
||||
sendScope: '1',
|
||||
girdListIds: [],
|
||||
deptListIds: [],
|
||||
wxGroups: [], // 居民群,居民,朋友圈
|
||||
sex: '',
|
||||
ResidentTags: [],
|
||||
ResidentTagsRemove: [],
|
||||
circleTags: [],
|
||||
circleTagsRemove: [],
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkBtn(e) {
|
||||
if(e.value == '1' || e.value == '2') {
|
||||
uni.navigateTo({url: `./scopedSelect?type=${e.value}&sendType=${this.sendType}`})
|
||||
}
|
||||
this.sendScope = e.value;
|
||||
uni.setStorageSync('sendScope', this.sendScope)
|
||||
},
|
||||
submit() {
|
||||
this.$loading()
|
||||
if(this.sendType == 'ResidentsGroup') {
|
||||
this.getWxGroups()
|
||||
}
|
||||
if(this.sendType == 'Residents' || this.sendType == 'CircleOfFriends') {
|
||||
this.getSendScope()
|
||||
}
|
||||
uni.setStorageSync('sendScope', this.sendScope)
|
||||
|
||||
},
|
||||
// 群发居民群
|
||||
getWxGroups() {
|
||||
uni.showLoading({title: '加载中'})
|
||||
this.$http.post(`/app/appmasssendingtask/queryWxGroups?sendScope=${this.sendScope}`,
|
||||
{
|
||||
filterCriteria: this.girdListIds.join(',') || this.deptListIds.join(',') || ''
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.wxGroups = res.data
|
||||
uni.hideLoading()
|
||||
uni.setStorageSync('wxGroupsUser', this.wxGroups)
|
||||
}
|
||||
}).then(()=> {
|
||||
uni.hideLoading()
|
||||
uni.navigateBack()
|
||||
}).finally(()=> {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
// 群发朋友圈、居民
|
||||
getSendScope() {
|
||||
uni.showLoading({title: '加载中'})
|
||||
let formData = {}
|
||||
if(this.sendScope == 0) {
|
||||
formData = {
|
||||
sendScope: this.sendScope,
|
||||
taskType: this.sendType == 'Residents'? 1:0,
|
||||
}
|
||||
} else {
|
||||
let resTags='', cirTags='', resRemove='', cirRemove=''
|
||||
if(this.ResidentTags.length) {
|
||||
resTags = this.ResidentTags?.map(e=> e.id).toString()
|
||||
} else if(this.circleTags.length) {
|
||||
cirTags = this.circleTags?.map(e=> e.id).toString()
|
||||
} else if(this.ResidentTagsRemove.length) {
|
||||
resRemove = this.ResidentTagsRemove?.map(e=> e.id).toString() || ''
|
||||
} else if(this.circleTagsRemove.length) {
|
||||
cirRemove = this.circleTagsRemove?.map(e=> e.id).toString() || ''
|
||||
}
|
||||
|
||||
formData = {
|
||||
filterCriteria: this.girdListIds.toString() || this.deptListIds.toString() || '',
|
||||
sendScope: this.sendScope,
|
||||
tags: resTags || cirTags,
|
||||
excludeTags: resRemove || cirRemove,
|
||||
addFromTime: this.startTime,
|
||||
addEndTime: this.endTime,
|
||||
gender: this.sex,
|
||||
taskType: this.sendType == 'Residents'? 1:0,
|
||||
}
|
||||
}
|
||||
this.$http.post(`/app/whchatmomentstask/getSendScope`,{...formData}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.wxGroups = res.data
|
||||
uni.setStorageSync('wxGroupsUser', this.wxGroups)
|
||||
}
|
||||
}).then(()=> {
|
||||
uni.hideLoading()
|
||||
uni.navigateBack()
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.sendType = o.type;
|
||||
document.title = "选择发送范围"
|
||||
},
|
||||
onShow() {
|
||||
this.sendScope = uni.getStorageSync('sendScope') || ''
|
||||
// 部门、网格
|
||||
const girdArr = uni.getStorageSync('girdSelect')
|
||||
if(girdArr.length) {
|
||||
this.girdListIds = girdArr.map(e=>e.id)
|
||||
}
|
||||
const deptArr = uni.getStorageSync('deptList')
|
||||
if(deptArr.length) {
|
||||
this.deptListIds = deptArr.map(v=>v.id)
|
||||
}
|
||||
// 性别
|
||||
this.sex = uni.getStorageSync('gender')
|
||||
// 标签
|
||||
if(this.sendType == 'Residents') {
|
||||
this.ResidentTags = uni.getStorageSync('ResidentTags') // 居民包含
|
||||
this.ResidentTagsRemove = uni.getStorageSync('ResidentTagsRemove') // 居民剔除
|
||||
} else if(this.sendType == 'CircleOfFriends') {
|
||||
this.circleTags = uni.getStorageSync('circleTags') // 朋友圈包含
|
||||
this.circleTagsRemove = uni.getStorageSync('circleTagsRemove') // 朋友圈剔除
|
||||
}
|
||||
// 时间
|
||||
this.startTime = uni.getStorageSync('startTime')
|
||||
this.endTime = uni.getStorageSync('endTime')
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sendScoped {
|
||||
.checkedBox {
|
||||
background: #FFF;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: 30px 0;
|
||||
box-sizing: border-box;
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.submitBtn {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #CCCCCC;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
src/project/biaopin/AppCooperationPropaganda/tagsList.vue
Normal file
158
src/project/biaopin/AppCooperationPropaganda/tagsList.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="tagsList">
|
||||
<div class="tags-group">
|
||||
<div class="tags-list" v-for="items in subTags" :key="items.id">
|
||||
<div class="tag_title">{{ items.name }}</div>
|
||||
<div class="item"
|
||||
v-for="item in items.tagList"
|
||||
:class="checked.map(e=>e.id).includes(item.id)? 'active' : ''"
|
||||
:key="item.id"
|
||||
@click="onClick(item)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="submit">
|
||||
<div>确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tagsList",
|
||||
data() {
|
||||
return {
|
||||
sendType: '',
|
||||
subTags: [],
|
||||
checked: [],
|
||||
type: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTags() {
|
||||
this.$http.post(`/app/wxcp/wxcorptag/listAll?current=1&size=3000`).then(res => {
|
||||
if (res?.data) {
|
||||
this.subTags = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
onClick(item) {
|
||||
const index = this.checked.map(i=>i.id).indexOf(item.id)
|
||||
if (index === -1) {
|
||||
this.checked.push(item)
|
||||
} else {
|
||||
this.checked.splice(index, 1)
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
if(this.sendType == 'Residents') {
|
||||
if(this.type == '0') { // 居民包含
|
||||
uni.setStorageSync('ResidentTags', this.checked)
|
||||
} else if(this.type == '1') { // 居民剔除
|
||||
uni.setStorageSync('ResidentTagsRemove', this.checked)
|
||||
}
|
||||
} else if(this.sendType == 'CircleOfFriends') {
|
||||
if(this.type == '0') { // 朋友圈包含
|
||||
uni.setStorageSync('circleTags', this.checked)
|
||||
} else if(this.type == '1') { // 朋友圈剔除
|
||||
uni.setStorageSync('circleTagsRemove', this.checked)
|
||||
}
|
||||
}
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getTags()
|
||||
this.checked = []
|
||||
if(this.sendType == 'Residents') {
|
||||
if(this.type == 0) { // 居民包含
|
||||
this.checked = uni.getStorageSync('ResidentTags') || []
|
||||
} else { // 居民剔除
|
||||
this.checked = uni.getStorageSync('ResidentTagsRemove') || []
|
||||
}
|
||||
} else if(this.sendType == 'CircleOfFriends') {
|
||||
if(this.type == 0) { // 朋友圈包含
|
||||
this.checked = uni.getStorageSync('circleTags') || []
|
||||
} else { // 朋友圈剔除
|
||||
this.checked = uni.getStorageSync('circleTagsRemove') || []
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
document.title = o.type ==0? '包含标签': '剔除标签'
|
||||
this.sendType = o.sendType
|
||||
this.type = o.type
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tagsList {
|
||||
padding-bottom: 120px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tags-group {
|
||||
margin-bottom: 16px;
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 1;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tag_title {
|
||||
width: 100%;
|
||||
height: 108px;
|
||||
line-height: 108px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
margin: 0 16px 16px 0;
|
||||
padding: 0 32px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
background: #F3F4F7;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #CCCCCC;
|
||||
background: #1365DD;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
482
src/project/biaopin/AppCreditPoints/AppCreditPoints.vue
Normal file
482
src/project/biaopin/AppCreditPoints/AppCreditPoints.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<section class="AppCreditPoints">
|
||||
<AiTabPanes :tabs="tabList" v-model="tabIndex" @change="handChangeTab" />
|
||||
<div class="area-content">
|
||||
<AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
|
||||
<img src="components/img/local-icon.png" alt="">
|
||||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||||
<span v-else>请选择</span>
|
||||
<u-icon name="arrow-down" color="#666" size="24"/>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
<u-gap height="6"/>
|
||||
<div class="fill" v-if="info && info.length">
|
||||
<div class="ranking-content" v-if="info && info.length">
|
||||
<div class="item" v-if="info.length > 1" @click="toGridIntegral(2, info[1].integral_user_id)">
|
||||
<img
|
||||
src="https://cdn.cunwuyun.cn/dvcp/credit/2.png"
|
||||
alt=""
|
||||
class="top-img"
|
||||
/>
|
||||
<img
|
||||
:src="info[1].avatar_url"
|
||||
alt=""
|
||||
class="user-img mar-b4"
|
||||
v-if="info[1].avatar_url"
|
||||
/>
|
||||
<div class="user-name-bg mar-b4" v-else>
|
||||
{{ formatName(info[1].name) }}
|
||||
</div>
|
||||
<p class="user-name mar-b8">
|
||||
{{ info[1].name }}
|
||||
</p>
|
||||
<p class="item-num">{{ info[1].integral }}</p>
|
||||
</div>
|
||||
<div class="item-top item" v-if="info.length > 0" @click="toGridIntegral(1, info[0].integral_user_id)">
|
||||
<img
|
||||
src="https://cdn.cunwuyun.cn/dvcp/credit/1.png"
|
||||
alt=""
|
||||
class="top-img-one"
|
||||
/>
|
||||
<img
|
||||
:src="info[0].avatar_url"
|
||||
alt=""
|
||||
class="user-img mar-b4"
|
||||
v-if="info[0].avatar_url"
|
||||
/>
|
||||
<div class="user-name-bg mar-b4" v-else>
|
||||
{{ formatName(info[0].name) }}
|
||||
</div>
|
||||
<p class="user-name mar-b8">
|
||||
{{ info[0].name }}
|
||||
</p>
|
||||
<p class="item-num">{{ info[0].integral }}</p>
|
||||
</div>
|
||||
<div class="item" v-if="info.length > 2" @click="toGridIntegral(3, info[2].integral_user_id)">
|
||||
<img
|
||||
src="https://cdn.cunwuyun.cn/dvcp/credit/3.png"
|
||||
alt=""
|
||||
class="top-img"
|
||||
/>
|
||||
<img
|
||||
:src="info[2].avatar_url"
|
||||
alt=""
|
||||
class="user-img mar-b4"
|
||||
v-if="info[2].avatar_url"
|
||||
/>
|
||||
<div class="user-name-bg mar-b4" v-else>
|
||||
{{ formatName(info[2].name) }}
|
||||
</div>
|
||||
<p class="user-name mar-b8">
|
||||
{{ info[2].name }}
|
||||
</p>
|
||||
<p class="item-num">{{ info[2].integral }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<u-gap height="6"/>
|
||||
<div class="ranking-list" v-if="info && info.length">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in info"
|
||||
:key="index"
|
||||
v-if="index > 2"
|
||||
@click="toGridIntegral(index, item.integral_user_id)"
|
||||
>
|
||||
<span class="item-num">{{ index + 1 }}</span>
|
||||
<img
|
||||
:src="item.avatar_url"
|
||||
alt=""
|
||||
class="user-img mar-b4"
|
||||
v-if="item.avatar_url"
|
||||
/>
|
||||
<div class="user-name-bg mar-b4 mar-r24" v-else>
|
||||
{{ formatName(item.name) }}
|
||||
</div>
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<span class="item-point">{{ item.integral }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else/>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppCreditPoints",
|
||||
appName: "积分排行",
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: [],
|
||||
current: 1,
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
tabIndex: 0,
|
||||
tabList: ['总榜', '月榜', "周榜"],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.areaId = this.user.areaId
|
||||
this.areaName = this.user.areaName || ''
|
||||
this.getInfo();
|
||||
},
|
||||
methods: {
|
||||
handChangeTab() {
|
||||
this.getInfo()
|
||||
},
|
||||
areaSelect(e) {
|
||||
this.areaId = e
|
||||
this.getInfo()
|
||||
},
|
||||
// 积分排行
|
||||
getInfo() {
|
||||
this.info = []
|
||||
this.$http.post(`/app/appintegraluser/integralSortFD?type=${this.tabIndex}&areaId=${this.areaId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.info = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
formatName(name) {
|
||||
if (name == undefined) {
|
||||
return
|
||||
}
|
||||
return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
|
||||
},
|
||||
toGridIntegral(rankNum, userId) {
|
||||
uni.navigateTo({url: `./gridIntegral?rankNum=${rankNum}&userId=${userId}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.AppCreditPoints {
|
||||
width: 100vw;
|
||||
background-color: #f3f6f9;
|
||||
|
||||
.bg-blue {
|
||||
width: 100%;
|
||||
height: 176px;
|
||||
background-color: #3975C6;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: 690px;
|
||||
height: 256px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: -130px 0 40px 30px;
|
||||
padding: 100px 60px 40px 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
|
||||
.num {
|
||||
font-family: DIN;
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.color-5AAD6A {
|
||||
color: #5aad6a;
|
||||
}
|
||||
|
||||
.color-4185F5 {
|
||||
color: #4185f5;
|
||||
}
|
||||
|
||||
.color-CD413A {
|
||||
color: #cd413a;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
height: 250px;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content {
|
||||
padding: 94px 30px 32px;
|
||||
background-color: #fff;
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 216px;
|
||||
height: 320px;
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 12px;
|
||||
padding: 40px 0 0 0;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background: #fff;
|
||||
|
||||
.user-name {
|
||||
font-size: 30px;
|
||||
font-family: PingFang-SC-Medium, PingFang-SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 42px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-num {
|
||||
font-size: 46px;
|
||||
font-weight: 6000;
|
||||
color: #2c51ce;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.top-img {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-top {
|
||||
margin: -46px 20px 0;
|
||||
height: 366px;
|
||||
|
||||
.user-img {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.user-name-bg {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
border-radius: 50%;
|
||||
background-color: #4e8eee;
|
||||
font-size: 28px;
|
||||
line-height: 104px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-img-one {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
left: 0;
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-list {
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
background: #fff;
|
||||
padding: 0 64px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-num {
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
color: #858594;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.user-img {
|
||||
margin-right: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.item-point {
|
||||
display: inline-block;
|
||||
width: 210px;
|
||||
text-align: right;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mar-r24 {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-name-bg {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: #4e8eee;
|
||||
font-size: 28px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mar-b4 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mar-b8 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 690px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 432px 0 0 32px;
|
||||
padding: 30px 30px 94px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 34px 0 32px 0;
|
||||
border-bottom: 2px solid #ddd;
|
||||
display: flex;
|
||||
|
||||
.item-info {
|
||||
width: 500px;
|
||||
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-num {
|
||||
width: calc(100% - 500px);
|
||||
text-align: right;
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-0 {
|
||||
color: #2c51ce !important;
|
||||
}
|
||||
|
||||
.color-1 {
|
||||
color: #e6736e !important;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.header-tab {
|
||||
height: 96px;
|
||||
background-color: #3975C6;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-tab .tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.header-tab .tab-active {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-tab .active-line {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: #FFF;
|
||||
top: 48px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.area-content {
|
||||
padding: 32px;
|
||||
background-color: #fff;
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
vertical-align: middle;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::v-deep .content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppCreditPoints/components/img/line.png
Normal file
BIN
src/project/biaopin/AppCreditPoints/components/img/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
263
src/project/biaopin/AppCreditPoints/gridIntegral.vue
Normal file
263
src/project/biaopin/AppCreditPoints/gridIntegral.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="gridIntegral">
|
||||
<div class="bg-blue"></div>
|
||||
<div class="header-content">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/credit/head.png" alt="">
|
||||
<div class="headerDataPane">
|
||||
<div class="header-user" flex>
|
||||
<div class="user-name">{{info.userName}}</div>
|
||||
<div class="headerItem top">
|
||||
<div v-text="`积分余额`"/>
|
||||
<b v-text="info.integral||0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-rank" flex>
|
||||
<div class="headerItem">
|
||||
<div v-text="`历史累计积分`"/>
|
||||
<b v-text="info.totalIntegral||0"/>
|
||||
</div>
|
||||
<div class="divider"/>
|
||||
<div class="headerItem">
|
||||
<div v-text="`积分排名`"/>
|
||||
<b v-text="rankNum"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" v-if="list.length">
|
||||
<div flex>
|
||||
<div class="title fill">积分明细</div>
|
||||
<!-- <u-icon name="question-circle" label="积分规则" color="#3F8DF5" label-color="#3F8DF5" @click="gotoRules"/> -->
|
||||
</div>
|
||||
<u-gap/>
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-info">
|
||||
<p v-text="item.eventDesc||item.integralRuleName"/>
|
||||
<span v-text="item.doTime"/>
|
||||
</div>
|
||||
<div class="item-num" :class="'color-'+ item.integralCalcType">
|
||||
{{ (item.integralCalcType == 1 ? '+' : '-') + item.changeIntegral }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "gridIntegral",
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
list: [],
|
||||
current: 1,
|
||||
pages: 0,
|
||||
userId: '',
|
||||
rankNum: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInfo()
|
||||
this.getList()
|
||||
},
|
||||
onLoad(option) {
|
||||
this.rankNum = option.rankNum
|
||||
this.userId = option.userId
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分明细'
|
||||
},
|
||||
methods: {
|
||||
// 积分排行
|
||||
getInfo() {
|
||||
this.$http.post(`/app/appintegraluser/integralUserInfoFD?integralUserId=${this.userId}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.info = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegraldetail/list`, null, {
|
||||
params: {current: this.current, size: 10, integralUserId: this.userId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = [this.list, res.data.records || []].flat()
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoRules() {
|
||||
uni.navigateTo({url: './integralRules'})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.gridIntegral {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #f3f6f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.bg-blue {
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
background-color: #3975C6;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: 690px;
|
||||
height: 408px;
|
||||
margin: -130px 0 40px;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
|
||||
.headerDataPane {
|
||||
|
||||
top: 76px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
|
||||
|
||||
.header-rank {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.header-user {
|
||||
padding: 0 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.user-name {
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.headerItem {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 40px;
|
||||
|
||||
b {
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
color: #000;
|
||||
font-size: 36px;
|
||||
font-family: DIN, DINAlternate-Bold, DINAlternate;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&.top {
|
||||
b {
|
||||
font-size: 104px;
|
||||
line-height: 122px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > img {
|
||||
position: absolute;
|
||||
width: 342px;
|
||||
height: 220px;
|
||||
top: -60px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.mar-b4 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mar-b8 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 690px;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
padding: 30px 30px 94px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 34px 0 32px 0;
|
||||
border-bottom: 2px solid #ddd;
|
||||
display: flex;
|
||||
|
||||
.item-info {
|
||||
width: 500px;
|
||||
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-num {
|
||||
width: calc(100% - 500px);
|
||||
text-align: right;
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.color-1 {
|
||||
color: #2C51CE !important;
|
||||
}
|
||||
|
||||
.color-0 {
|
||||
color: #E6736E !important;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 2px;
|
||||
height: 60px;
|
||||
background: #ededed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
src/project/biaopin/AppPointsApply/AppPointsApply.vue
Normal file
137
src/project/biaopin/AppPointsApply/AppPointsApply.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="AppPointsApply">
|
||||
<div class="points_img" @click="toAdd">
|
||||
<img src="./imgs/points.png" alt="">
|
||||
</div>
|
||||
<h3>申请记录</h3>
|
||||
<div v-if="list.length">
|
||||
<div class="card" v-for="(item,index) in list" :key="index" >
|
||||
<div class="top">
|
||||
<div class="top_title">{{ item.applyItem }}</div>
|
||||
<div><span class="top_status" :class="item.status==0? 'status0' : item.status==1? 'status1': 'status2'">{{ $dict.getLabel('integralDeclareStatus',item.status) }}</span></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom_points">积分+{{ item.applyIntegral }}</div>
|
||||
<div class="bottom_time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppPointsApply',
|
||||
appName: '积分申请',
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$dict.load('integralDeclareStatus').then(() => {
|
||||
this.getPointsList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toAdd() {
|
||||
uni.navigateTo({url: './addPoints'})
|
||||
},
|
||||
getPointsList() {
|
||||
this.$http.post(`/app/appintegralmemberapply/listByGirdMember`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getPointsList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPointsApply {
|
||||
padding: 250px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.points_img {
|
||||
padding: 16px 32px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #F5F5F5;
|
||||
z-index: 9;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
.card {
|
||||
margin-top: 24px;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.02);
|
||||
border-radius: 16px;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.top_title {
|
||||
width: 450px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.top_status {
|
||||
padding: 6px 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
text-align: right;
|
||||
width: calc(100% - 450px);
|
||||
}
|
||||
.status0 {
|
||||
background: #FFEDE2;
|
||||
color: #FF883C;
|
||||
}
|
||||
|
||||
.status1 {
|
||||
background: #E2F6E1;
|
||||
color: #3BBC37;
|
||||
}
|
||||
|
||||
.status2 {
|
||||
background: #FAE2E2;
|
||||
color: #E23C3C;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
.bottom_points {
|
||||
color: #FF6900;
|
||||
}
|
||||
.bottom_time {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
175
src/project/biaopin/AppPointsApply/addPoints.vue
Normal file
175
src/project/biaopin/AppPointsApply/addPoints.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="addPoints">
|
||||
<div class="item">
|
||||
<div class="item_left"><span class="red">*</span><span class="color-666">事件类型</span></div>
|
||||
<AiSelect dict="integralApplyEventType" v-model="form.eventType"/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item_left"><span class="red">*</span><span class="color-666">申请事项</span></div>
|
||||
<div class="input"><u-input v-model="form.applyItem" type="text" placeholder="请输入" /></div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item_left"><span class="red">*</span><span class="color-666">积分数量</span></div>
|
||||
<div class="input"><u-input v-model="form.applyIntegral" type="number" disabled placeholder="请输入"/></div>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<div><span class="red">*</span><span class="color-666">上传图片</span></div>
|
||||
<AiUploader style="margin-top: 12px;" :def.sync="form.files" :limit="1" action="/admin/file/add2"></AiUploader>
|
||||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<div class="subBtn" @click="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'addPoints',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
form: {
|
||||
eventType: '',
|
||||
applyItem: '',
|
||||
applyIntegral: '',
|
||||
voucherImageUrl: '',
|
||||
files: []
|
||||
},
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
onLoad(opt) {
|
||||
document.title = '积分申请'
|
||||
if(opt) {
|
||||
this.getDetail(opt.id)
|
||||
}
|
||||
this.$dict.load('integralApplyEventType')
|
||||
},
|
||||
watch: {
|
||||
'form.eventType'(val) {
|
||||
if(val==0 || val == 1 || val == 5) {
|
||||
this.form.applyIntegral = 2
|
||||
} else if(val == 2 || val == 3 || val == 4) {
|
||||
this.form.applyIntegral = 5
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail(id) {
|
||||
this.$http.post(`/app/appintegralmemberapply/queryDetailById?id=${id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.form = res.data
|
||||
this.form.files = [{url:res.data.voucherImageUrl}]
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if(this.flag) return
|
||||
|
||||
if(!this.form.eventType) {
|
||||
return this.$u.toast('请选择事件类型')
|
||||
}
|
||||
|
||||
if(!this.form.applyItem) {
|
||||
return this.$u.toast('请输入申请事项')
|
||||
}
|
||||
|
||||
if(!this.form.applyIntegral) {
|
||||
return this.$u.toast('请输入积分数量')
|
||||
}
|
||||
if(!this.form.files.length) {
|
||||
return this.$u.toast('请上传图片')
|
||||
}
|
||||
if(this.form.files.length) {
|
||||
this.form.voucherImageUrl = this.form.files[0].url
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http.post(`/app/appintegralmemberapply/addOrUpdate`,{...this.form}).then(res=> {
|
||||
if(res.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 400)
|
||||
}
|
||||
}).catch(err=> {
|
||||
this.$u.toast(err.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.addPoints {
|
||||
padding: 0 16px 120px;
|
||||
box-sizing: border-box;
|
||||
font-size: 32px;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #EEEEEE;
|
||||
border-radius: 32px;
|
||||
padding: 16px 32px;
|
||||
box-sizing: border-box;
|
||||
.item_left {
|
||||
font-size: 32px;
|
||||
.red {
|
||||
color: #E64A4A;
|
||||
}
|
||||
.color-666 {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
::v-deep .uni-input-input,
|
||||
.uni-input-placeholder {
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
margin-top: 24px;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #EEEEEE;
|
||||
border-radius: 32px;
|
||||
padding: 16px 32px;
|
||||
box-sizing: border-box;
|
||||
.red {
|
||||
color: #E64A4A;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #F5F5F5;
|
||||
padding: 16px 32px;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
.subBtn {
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background: #3975C6;
|
||||
border-radius: 44px;
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
font-style: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppPointsApply/imgs/points.png
Normal file
BIN
src/project/biaopin/AppPointsApply/imgs/points.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
297
src/project/biaopin/AppPointsReview/AppPointsReview.vue
Normal file
297
src/project/biaopin/AppPointsReview/AppPointsReview.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="AppPointsReview">
|
||||
<AiTopFixed>
|
||||
<div class="top-search">
|
||||
<div class="left">
|
||||
<u-search v-model="search.createUserName" :clearabled="true" placeholder="请输入申请人、审批人" :show-action="false" bg-color="#F5F5F5"
|
||||
search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
|
||||
</u-search>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-select">
|
||||
<div class="item" @click="showDateSelect=true">
|
||||
<span v-if="!search.startTime" style="color:#999;">日期筛选</span>
|
||||
<span v-else>{{ search.startTime }}至{{ search.endTime }}</span>
|
||||
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" v-if="!search.startTime" />
|
||||
<img src="./img/del-icon.png" alt="" class="del-icon" v-else @click.stop="clearDate">
|
||||
</div>
|
||||
<div class="item" @click="isShowType=true">
|
||||
<span style="color:#999;" v-if="!search.type">事件类型</span>
|
||||
<span v-else>{{ search.typeName }}</span>
|
||||
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" v-if="!search.type"/>
|
||||
<img src="./img/del-icon.png" alt="" class="del-icon" v-else @click.stop="clearType">
|
||||
</div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
|
||||
<div class="title-flex">
|
||||
<p class="title">{{item.applyItemName}}</p>
|
||||
<div class="btn" v-if="item.status == 1">
|
||||
<p v-if="item.pushStatus == 1">已推送</p>
|
||||
<div @click.stop="pushNew(item.id)" v-else>推送精选</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-name">{{item.integralUserName}}<span>积分+{{item.applyIntegral}}</span></div>
|
||||
<div class="time-flex">
|
||||
<span>{{item.createTime}}</span>
|
||||
<span :class="`color-${item.status}`">{{ $dict.getLabel('appIntegralApplyEventStatus', item.status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length" description="暂无数据"></AiEmpty>
|
||||
|
||||
<u-calendar v-model="showDateSelect" mode="range" min-year="2023" @change="dateConfirm"></u-calendar>
|
||||
<u-select v-model="isShowType" :list="typeList" value-name="id" label-name="ruleName" @confirm="typeConfirm"></u-select>
|
||||
<u-modal v-model="showPush" :show-cancel-button="true" content="是否将精选内容对全体居民公开，选择否将只对本村/社区公开"
|
||||
confirm-text="是" cancel-text="否" @confirm="pushNewConfirm(1)" @cancel="pushNewConfirm(1)" :mask-close-able="true"></u-modal>
|
||||
<AiAdd @add="toAdd"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: "AppPointsReview",
|
||||
appName: "积分审核",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
|
||||
showDateSelect: false,
|
||||
search: {
|
||||
createUserName: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
type: '',
|
||||
typeName: ''
|
||||
},
|
||||
list: [],
|
||||
current: 1,
|
||||
pages: 2,
|
||||
typeList: [],
|
||||
isShowType: false,
|
||||
showPush: false,
|
||||
pushNewId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isGridMember() {
|
||||
return this.user.girdCheckType > 0
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.$dict.load('appIntegralApplyEventStatus').then(() => {
|
||||
this.getListInit()
|
||||
})
|
||||
this.getTypeList()
|
||||
uni.$on('updateList', () => {
|
||||
this.getListInit()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.pages = 2
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
console.log(4)
|
||||
if (this.current > this.pages) return
|
||||
this.$http.post(`/app/appintegraluserapply/listByGridMember`,null, {
|
||||
params:{
|
||||
...this.search,
|
||||
current: this.current,
|
||||
size: 10,
|
||||
applyItemId: this.search.type,
|
||||
createTimeStart: this.search.startTime,
|
||||
createTimeEnd: this.search.endTime
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
item.createTime = item.createTime.substring(0, 16)
|
||||
})
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
}
|
||||
})
|
||||
},
|
||||
dateConfirm(e) {
|
||||
console.log(123)
|
||||
this.search.startTime = e.startDate
|
||||
this.search.endTime = e.endDate
|
||||
this.getListInit()
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({url: `./detail?id=${id}`})
|
||||
},
|
||||
getTypeList() {
|
||||
this.$http.post(`/app/appintegralrule/listByFD`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.typeList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
typeConfirm(e) {
|
||||
this.search.type = e[0].value
|
||||
this.search.typeName = e[0].label
|
||||
this.getListInit()
|
||||
},
|
||||
pushNew(id) {
|
||||
this.pushNewId = id
|
||||
this.showPush = true
|
||||
},
|
||||
pushNewConfirm(status) {
|
||||
this.$http.post(`/app/appintegraluserapply/pushById?id=${this.pushNewId}&status=${status}`).then(res=> {
|
||||
if(res.code == 0) {
|
||||
this.$u.toast('推送成功')
|
||||
this.getListInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
clearDate() {
|
||||
this.search.startTime = ''
|
||||
this.search.endTime = ''
|
||||
this.getListInit()
|
||||
},
|
||||
clearType() {
|
||||
this.search.type = ''
|
||||
this.search.typeName = ''
|
||||
this.getListInit()
|
||||
},
|
||||
toAdd() {
|
||||
uni.navigateTo({url: './integralAdd'})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1;
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPointsReview {
|
||||
height: 100%;
|
||||
::v-deep .AiTopFixed {
|
||||
.placeholder {
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.fixed {
|
||||
margin: 0 !important;
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-search {
|
||||
padding: 20px 32px;
|
||||
display: flex;
|
||||
.left {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.top-select {
|
||||
display: flex;
|
||||
padding: 28px 0;
|
||||
.item {
|
||||
flex: 1;
|
||||
// padding: 0 8px;
|
||||
text-align: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
}
|
||||
.del-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
padding: 32px;
|
||||
.item {
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 32px;
|
||||
.title-flex {
|
||||
display: flex;
|
||||
.title {
|
||||
word-break: break-all;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 44px;
|
||||
width: calc(100% - 182px);
|
||||
}
|
||||
.btn {
|
||||
width: 182px;
|
||||
text-align: right;
|
||||
padding-left: 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
line-height: 56px;
|
||||
background: #1365DD;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
}
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-name {
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
margin-bottom: 16px;
|
||||
span {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
.time-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
.color-0{
|
||||
color: #FF9A40;
|
||||
}
|
||||
.color-1{
|
||||
color: #42D784;
|
||||
}
|
||||
.color-2{
|
||||
color: #cd413aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
471
src/project/biaopin/AppPointsReview/detail.vue
Normal file
471
src/project/biaopin/AppPointsReview/detail.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="header-content">
|
||||
<div class="title-flex">
|
||||
<p>{{info.applyItemName}}</p>
|
||||
<div :class="`color-${info.status}`">{{ $dict.getLabel('appIntegralApplyEventStatus', info.status) }}</div>
|
||||
</div>
|
||||
<div class="user-flex">
|
||||
<div>申请人：{{info.integralUserName}}</div>
|
||||
<div>电话号码：<span style="color:#1365DD;" @click="callPhone(info.phone)">{{info.phone}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title-flex">
|
||||
<p>申请信息</p>
|
||||
<div style="color:#1365DD;" v-if="info.status == 0">
|
||||
<span style="margin-right:16px" v-if="isEdit" @click="isEdit=false;getDetail()">取消</span>
|
||||
<span @click="edit">{{isEdit ? '保存' : '编辑'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-flex solid">
|
||||
<div class="label">积分值</div>
|
||||
<div class="value">
|
||||
<u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="info.applyIntegral" maxlength="10" v-if="isEdit"/>
|
||||
<!-- <u-number-box v-model="info.applyIntegral" input-height="44" size="14" :min="1" :max="100" v-if="isEdit"></u-number-box> -->
|
||||
<span v-else>{{info.applyIntegral}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-flex">
|
||||
<div class="label">详情描述</div>
|
||||
</div>
|
||||
<div class="info-textarea" v-if="isEdit">
|
||||
<u-input v-model="info.content" type="textarea" :height="200" auto-height maxlength="300" placeholder="请输入详细描述" />
|
||||
<div class="hint">{{ info.content.length }}/300</div>
|
||||
</div>
|
||||
<p class="text solid" v-else>{{info.content}}</p>
|
||||
|
||||
<div class="items solid" v-if="isEdit">
|
||||
<p>上传图片</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="info.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传图片，最多上传9张。</div>
|
||||
</div>
|
||||
<div class="items" v-if="isEdit">
|
||||
<p>上传视频</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="info.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传视频，最大30M。</div>
|
||||
</div>
|
||||
<div class="img-list" v-if="info.files && info.files.length && !isEdit">
|
||||
<div v-for="(item, index) in info.files" :key="index">
|
||||
<div v-if="item.postfix == '.mp4' || item.postfix == '.MOV'" class="video-item" @click="choose(item)" >
|
||||
<img :src="item.facePicture" alt="" class="pic-img">
|
||||
<img :src="`${$cdn}video/play-icon.png`" alt="" class="play-icon">
|
||||
</div>
|
||||
<img :src="item.accessUrl" alt="" @click="previewImages(item.accessUrl)" class="pic-img" v-else>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="pass-info" v-if="info.status == 2">
|
||||
<div class="title"><span></span>未通过理由</div>
|
||||
<p>{{info.auditDesc}}</p>
|
||||
</div>
|
||||
<div class="footer" v-if="info.status == 0 && !isEdit">
|
||||
<div class="confirm" @click="agree()">通过</div>
|
||||
<div class="cancel" @click="show=true">不通过</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<div class="textarea">
|
||||
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入不通过原因" :clearable="false" maxlength="500" />
|
||||
<p>字数{{ value.length }}/500</p>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<span @click="value = ''">清空内容</span>
|
||||
<span class="confirm" @click="confirm">保存</span>
|
||||
</div>
|
||||
</u-popup>
|
||||
<u-popup v-model="showVideo" mode="bottom">
|
||||
<div class="audio">
|
||||
<video controls class="only_video" :src="videoUrl" autoplay></video>
|
||||
<!-- <audio :src="url" ref="audio" :controls="true" :name="autioName" style="display: block;"></audio> -->
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "detail",
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
value: '',
|
||||
id: '',
|
||||
info: {},
|
||||
showVideo: false,
|
||||
videoUrl: '',
|
||||
isEdit: false,
|
||||
flag: false
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.$dict.load('appIntegralApplyEventStatus').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分详情'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.info = res.data
|
||||
this.info.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.postfix.split('.')[1])))
|
||||
this.info.videos = res.data.files.filter(e => (['mp4', 'MOV'].includes(e.postfix.split('.')[1])))
|
||||
this.flag = false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
if(!this.value) {
|
||||
return this.$u.toast('请输入不通过原因')
|
||||
}
|
||||
this.submit(0)
|
||||
},
|
||||
agree() {
|
||||
this.$confirm('确定通过该条申请').then(() => {
|
||||
this.submit(1)
|
||||
})
|
||||
},
|
||||
submit(status) {
|
||||
this.$http.post(`/app/appintegraluserapply/auditById`, {
|
||||
auditDesc: this.value,
|
||||
id: this.id,
|
||||
auditStatus: status
|
||||
}).then(res=> {
|
||||
if(res.code == 0) {
|
||||
this.$u.toast('操作成功')
|
||||
uni.$emit('updateList')
|
||||
this.show = false
|
||||
this.getDetail()
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
previewImages(img) {
|
||||
var imgs = []
|
||||
this.info.files.map((item) => {
|
||||
if(item.postfix != '.mp4' || item.postfix != '.MOV') {
|
||||
imgs.push(item.accessUrl)
|
||||
}
|
||||
})
|
||||
uni.previewImage({
|
||||
urls: imgs,
|
||||
current: img
|
||||
})
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({ phoneNumber: phone })
|
||||
},
|
||||
choose(item) {
|
||||
this.videoUrl = item.accessUrl
|
||||
this.showVideo = true
|
||||
},
|
||||
edit() {
|
||||
if(this.isEdit) {
|
||||
this.editSubmit()
|
||||
}else {
|
||||
this.isEdit = true
|
||||
}
|
||||
},
|
||||
editSubmit() {
|
||||
if(this.flag) return
|
||||
|
||||
if (!/^([1-9]\d*|0)(\.\d{1,2})?$/g.test(this.info.applyIntegral)) {
|
||||
this.info.applyIntegral = Number(this.info.applyIntegral).toFixed(2)
|
||||
return this.$u.toast('积分值最多只保留两位小数点')
|
||||
}
|
||||
|
||||
if (!this.info.content) {
|
||||
return this.$u.toast('请输入详细描述')
|
||||
}
|
||||
|
||||
if ((this.info.images.length + this.info.videos.length) > 9) {
|
||||
return this.$u.toast('图片和视频不得超过9个')
|
||||
} else {
|
||||
this.info.files = [...this.info.images,...this.info.videos]
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http.post(`/app/appintegraluserapply/updateByGirdMember`,{
|
||||
...this.info,
|
||||
userId: this.info.integralUserId,
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('updateList')
|
||||
this.getDetail()
|
||||
this.isEdit = false
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body {
|
||||
background-color: #F4F5FA;
|
||||
}
|
||||
.detail {
|
||||
height: 100%;
|
||||
padding-top: 32px;
|
||||
.title-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
p {
|
||||
color: #333;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
}
|
||||
div {
|
||||
font-size: 28px;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 40px;
|
||||
width: 280px;
|
||||
text-align: right;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.color-0{
|
||||
color: #FF9A40;
|
||||
}
|
||||
.color-1{
|
||||
color: #42D784;
|
||||
}
|
||||
.color-2{
|
||||
color: #cd413aff;
|
||||
}
|
||||
}
|
||||
.header-content {
|
||||
background-color: #fff;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32px;
|
||||
.user-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 42px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
background-color: #fff;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
.info-flex {
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
.label {
|
||||
color: #999;
|
||||
vertical-align: top;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
width: calc(100% - 160px);
|
||||
word-break: break-all;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
.text {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 42px;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.info-textarea{
|
||||
padding: 16px 0;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 32px;
|
||||
.hint {
|
||||
padding: 4px 0 8px 0;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.img-list {
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
.pic-img {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
margin: 0 16px 16px 0;
|
||||
}
|
||||
.pic-img:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.video-item {
|
||||
position: relative;
|
||||
}
|
||||
.play-icon {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 80px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pass-info {
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #CD413A;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 28px;
|
||||
font-family: "PingFang SC";
|
||||
line-height: 42px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
div {
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #FFF;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cancel {
|
||||
color: #1365DD;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.confirm {
|
||||
background-color: #1365DD;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.textarea {
|
||||
margin: 32px 32px 24px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
background: #f7f7f7;
|
||||
border-radius: 8px;
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 0 32px 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
}
|
||||
.confirm {
|
||||
width: 144px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.audio {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
.only_video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.items {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
padding: 24px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea {
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.tips {
|
||||
color: #f46;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text-tips {
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
.upload {
|
||||
padding: 24px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppPointsReview/img/del-icon.png
Normal file
BIN
src/project/biaopin/AppPointsReview/img/del-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
334
src/project/biaopin/AppPointsReview/integralAdd.vue
Normal file
334
src/project/biaopin/AppPointsReview/integralAdd.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="integralAdd">
|
||||
<div class="item">
|
||||
<div class="left"><span class="tips">*</span>姓名</div>
|
||||
<div class="right name-flex" :class="form.name ? '' : 'color-999'" >
|
||||
<AiPagePicker single :isShowPhone="true" @select="handleSelectUser" type="sysUser" class="pick" action="/app/appwechatuserqujing/listByFdAppletUserByGirdMember" nodeKey="openId">
|
||||
<AiMore v-model="form.name"/>
|
||||
</AiPagePicker>
|
||||
<u-icon name="scan" color="#333" size="40" class="scan" @click="scan"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left"><span class="tips">*</span>身份证</div>
|
||||
<div class="right" :class="form.idNumber ? '' : 'color-999'">{{form.idNumber || '自动获取'}}</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>手机号</div>
|
||||
<div class="right" :class="form.phone ? '' : 'color-999'">{{form.phone || '自动获取'}}</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>事件类型</div>
|
||||
<div class="right">
|
||||
<AiSelect :list="dictList" v-model="form.applyItemId" @data="selectType" v-if="dictList && dictList.length"></AiSelect>
|
||||
<span v-else class="color-999">请选择</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>积分值</div>
|
||||
<div class="right">
|
||||
<u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="form.applyIntegral" maxlength="10" />
|
||||
<!-- <u-number-box v-model="form.applyIntegral" input-height="44" size="14" :min="1" :max="100"></u-number-box> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p><span class="tips">*</span>详情描述</p>
|
||||
<textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
|
||||
<div class="text-tips">{{ form.content.length }}/300</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p>上传图片</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="form.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传图片，最多上传9张。</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p>上传视频</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="form.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传视频，最大30M。</div>
|
||||
</div>
|
||||
|
||||
<div class="item mar-b32">
|
||||
<div class="left">所属网格</div>
|
||||
<!-- <AiPagePicker type="gird" v-model="form.girdId" :params="{ formType: 2 }" @select="handleSelectGrid" nodeKey="id">
|
||||
<AiMore v-model="form.girdName"/>
|
||||
</AiPagePicker> -->
|
||||
<div class="right" :class="form.girdName ? '' : 'color-999'">{{form.girdName || '自动获取'}}</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div hover-class="text-hover" @click="submit">提交申请</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from "vuex";
|
||||
export default {
|
||||
name: "integralAdd",
|
||||
appName: '积分申请',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
userId: '',
|
||||
phone: '',
|
||||
idNumber: '',
|
||||
applyItemId: '',
|
||||
applyIntegral: '',
|
||||
applyItemName: '',
|
||||
content: '',
|
||||
files: [],
|
||||
images: [],
|
||||
videos: [],
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
},
|
||||
list: [],
|
||||
dictList: [],
|
||||
flag: false,
|
||||
id: '',
|
||||
delta: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(o) {
|
||||
if(o.id) {
|
||||
this.id = o.id
|
||||
this.getDetail()
|
||||
}
|
||||
this.$dict.load(['clapEventStatus'])
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分代申请'
|
||||
this.agentSign()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'agentSign']),
|
||||
submit() {
|
||||
if(this.flag) return
|
||||
|
||||
if (!this.form.name) {
|
||||
return this.$u.toast('请选择代申请人员')
|
||||
}
|
||||
|
||||
if (!this.form.applyItemId) {
|
||||
return this.$u.toast('请选择事件类型')
|
||||
}
|
||||
if (!/^([1-9]\d*|0)(\.\d{1,2})?$/g.test(this.form.applyIntegral)) {
|
||||
this.form.applyIntegral = Number(this.form.applyIntegral).toFixed(2)
|
||||
return this.$u.toast('积分值最多只保留两位小数点')
|
||||
}
|
||||
|
||||
if (!this.form.content) {
|
||||
return this.$u.toast('请输入详细描述')
|
||||
}
|
||||
|
||||
if ((this.form.images.length + this.form.videos.length) > 9) {
|
||||
return this.$u.toast('图片和视频不得超过9个')
|
||||
} else {
|
||||
this.form.files = [...this.form.images,...this.form.videos]
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http.post(`/app/appintegraluserapply/add`,{
|
||||
...this.form
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('updateList')
|
||||
setTimeout(()=> {
|
||||
uni.navigateBack({delta: this.delta})
|
||||
},500)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectType(selecteds) {
|
||||
this.form.applyItemName = this.list.filter(e=> (e.id==selecteds[0].value))[0].ruleName
|
||||
this.form.applyIntegral = this.list.filter(e => (e.id == selecteds[0].value))[0].integral
|
||||
},
|
||||
// 事件类型
|
||||
getType() {
|
||||
this.$http.post(`/app/appintegralrule/listByFdGirdMember?openId=${this.form.userId}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.list = res.data
|
||||
this.dictList = res.data.map(v => {
|
||||
return {
|
||||
value: v.id,
|
||||
label: v.ruleName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectGrid(v) {
|
||||
this.form.girdName = v.girdName
|
||||
this.form.girdId = v.girdId
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
this.form.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.name.split('.')[1])))
|
||||
this.form.videos = res.data.files.filter(e => (['mp4'].includes(e.name.split('.')[1])))
|
||||
this.form.files = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectUser(v) {
|
||||
this.form.name = v?.[0]?.realName || ""
|
||||
this.form.userId = v?.[0]?.openId || ""
|
||||
this.form.phone = v?.[0]?.phone || ""
|
||||
this.form.idNumber = v?.[0]?.idNumber || ""
|
||||
this.form.girdId = v?.[0]?.girdId || ""
|
||||
this.form.girdName = v?.[0]?.girdName || ""
|
||||
this.form.applyIntegral = ''
|
||||
this.form.applyItemId = ''
|
||||
this.form.applyItemName = ''
|
||||
this.dictList = []
|
||||
this.getType()
|
||||
},
|
||||
scan() {
|
||||
this.injectJWeixin('scanQRCode').then(() => {
|
||||
wx.scanQRCode({
|
||||
desc: '扫描居民信息',
|
||||
needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
|
||||
scanType: ["qrCode",], // 可以指定扫二维码还是条形码（一维码），默认二者都有
|
||||
success: (res) => {
|
||||
this.delta = 2
|
||||
var info = JSON.parse(res.resultStr)
|
||||
info.realName = info.name
|
||||
var userList = [{...info}]
|
||||
this.handleSelectUser(userList)
|
||||
},
|
||||
error: (res) => {
|
||||
console.log(res)
|
||||
alert(res)
|
||||
if (res.errMsg.indexOf('function_not_exist') > 0) {
|
||||
alert('版本过低请升级')
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch((err) => {
|
||||
alert(JSON.stringify(err))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.integralAdd {
|
||||
padding: 24px 0 120px 0;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #FFF;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 250px;
|
||||
.tips {
|
||||
color: #f46;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 200px);
|
||||
text-align: right;
|
||||
}
|
||||
.name-flex {
|
||||
display: flex;
|
||||
.pick {
|
||||
width: calc(100% - 60px);
|
||||
text-align:right;
|
||||
}
|
||||
.scan {
|
||||
width: 60px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep .AiSelect {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.mar-b32 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.items {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid #EEEEEE;
|
||||
}
|
||||
textarea {
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.tips {
|
||||
color: #f46;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text-tips {
|
||||
padding: 12px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
.upload {
|
||||
padding: 24px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .display {
|
||||
// display: inline-block;
|
||||
// }
|
||||
.footer{
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
div {
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #1365DD;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
137
src/project/biaopin/AppRedemptionPoints/AppRedemptionPoints.vue
Normal file
137
src/project/biaopin/AppRedemptionPoints/AppRedemptionPoints.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="AppRedemptionPoints">
|
||||
<AiTopFixed>
|
||||
<u-search v-model="keyword" :clearabled="false" placeholder="请输入申请人" :show-action="false" bg-color="#F5F5F5"
|
||||
search-icon-color="#999" color="#666" @search="getListInit"></u-search>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" @click="toGoodsList(item)">
|
||||
<div class="name">
|
||||
<img :src="item.avatarUrl" alt="" v-if="item.avatarUrl">
|
||||
<img src="./img/user-img.png" alt="" v-else>{{item.name}}
|
||||
</div>
|
||||
<div class="total">
|
||||
<span>积分总额：{{item.allIntegral}}</span>
|
||||
<span>积分余额：{{item.integral}}</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p>帮兑换</p>
|
||||
<u-icon name="arrow-right" color="#CACACA" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppRedemptionPoints",
|
||||
appName: "积分代兑换",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
keyword: '',
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad() {
|
||||
this.getListInit()
|
||||
uni.$on('updateGoodsList', () => {
|
||||
this.getListInit()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = "积分代兑换"
|
||||
},
|
||||
|
||||
methods: {
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appwechatuserqujing/listByFdAppletUserByGirdMember`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
con: this.keyword
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
toGoodsList(item) {
|
||||
uni.navigateTo({url: `./goodsList?openId=${item.openId}&userId=${item.id}&integralUserId=${item.integralUserId}`})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppRedemptionPoints {
|
||||
::v-deep .fixed {
|
||||
z-index: 9999;
|
||||
}
|
||||
::v-deep .u-search {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.list-content {
|
||||
padding: 32px;
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 32px 30px 0;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 32px;
|
||||
.name {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #000;
|
||||
line-height: 40px;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 12px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.total {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
padding-bottom: 34px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28px;
|
||||
color: #000;
|
||||
line-height: 38px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
379
src/project/biaopin/AppRedemptionPoints/goodsList.vue
Normal file
379
src/project/biaopin/AppRedemptionPoints/goodsList.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="goodsList">
|
||||
<div class="fixed-top">
|
||||
<div class="header">
|
||||
<div class="num">
|
||||
<p>积分余额</p>
|
||||
<h3>{{total}}</h3>
|
||||
</div>
|
||||
<div class="btn" @click="toMyOrder">ta的订单</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<!-- <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1"
|
||||
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs> -->
|
||||
<div class="type-select">
|
||||
<div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
|
||||
{{item}}
|
||||
<span v-if="index == 1" class="down-icon">⏷</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="point-select" v-if="currentType == 1">
|
||||
<u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666"
|
||||
active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="left-list">
|
||||
<div class="list-info" v-for="(item, index) in leftList" :key="index" v-if="goodsList.length">
|
||||
<div class="item" @click="toProductDetail(item)">
|
||||
<img :src="item.picUrl" alt="">
|
||||
<div class="type" :class="`type`+item.typeText">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
|
||||
<div class="content">
|
||||
<p class="text">{{item.title}}</p>
|
||||
<div class="item-money">
|
||||
<h3>{{item.integralPrice}}积分</h3>
|
||||
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
|
||||
<span v-if="item.type == 1">兑换后再付</span>
|
||||
</div>
|
||||
<div v-if="item.shopStatus == 1">
|
||||
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
|
||||
<div class="btn btn0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-list">
|
||||
<div class="list-info" v-for="(item, index) in rightList" :key="index" v-if="goodsList.length">
|
||||
<div class="item" @click="toProductDetail(item)">
|
||||
<img :src="item.picUrl" alt="">
|
||||
<div class="type" :class="`type`+item.typeText">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
|
||||
<div class="content">
|
||||
<p class="text">{{item.title}}</p>
|
||||
<div class="item-money">
|
||||
<h3>{{item.integralPrice}}积分</h3>
|
||||
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
|
||||
<span v-if="item.type == 1">兑换后再付</span>
|
||||
</div>
|
||||
<div v-if="item.shopStatus == 1">
|
||||
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
|
||||
<div class="btn btn0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!goodsList.length"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'goodsList',
|
||||
data() {
|
||||
return {
|
||||
tabList: [{name: '全部'}, {name: '积分兑换'}, {name: '京东低价商品'}],
|
||||
currentTabs: 1,
|
||||
barStyle: {
|
||||
'width': '20px',
|
||||
'height': '3px',
|
||||
'border-radius': '2px',
|
||||
'bottom': '-3px',
|
||||
'background': '#2D7DFF'
|
||||
},
|
||||
typeList: ['最新上架', '积分', '我可兑换的'],
|
||||
currentType: 0,
|
||||
pointTypeList: [{name: '全部'}, {name: '50分以下'}, {name: '100分以下'}, {name: '200分以下'}, {name: '5000分以下'}],
|
||||
currentPoint: 0,
|
||||
goodsList: [],
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
total: 0,
|
||||
current: 1,
|
||||
openId: '',
|
||||
integralUserId: '',
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.openId = option.openId
|
||||
this.userId = option.userId
|
||||
this.integralUserId = option.integralUserId
|
||||
this.getTotal()
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分代兑换'
|
||||
this.getTotal()
|
||||
},
|
||||
methods: {
|
||||
getTotal() {
|
||||
this.$http.post(`/app/appintegraluser/integralUserInfoFD?integralUserId=${this.integralUserId}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.total = res.data.integral || 0
|
||||
}
|
||||
})
|
||||
},
|
||||
getListInit() {
|
||||
this.goodsList = []
|
||||
this.leftList = []
|
||||
this.rightList = []
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/goodsListWXCP`, null, {
|
||||
params: {
|
||||
goodsType: this.currentTabs, //商品类型，0：全部、1：积分兑换、2：京东低价商品，默认0
|
||||
orderType: this.currentType == 0 ? 1 : 0, //排序类型，0：积分升序、1：上架时间倒序，默认0
|
||||
filterIntegral: this.currentType == 2 ? true : false, //过滤我可兑换的，默认false
|
||||
integralRange: this.currentType == 1 ? this.currentPoint : '', //积分区间类型，0：全部、1：50分以下、2:100分以下、3：200分以下、4：5000分以下默认0
|
||||
current: this.current,
|
||||
userId: this.userId,
|
||||
openId: this.openId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsList = this.current == 1 ? res.data.records : [...this.goodsList, ...res.data.records]
|
||||
res.data.records.map((item, index) => {
|
||||
item.typeText = item.type == 0 ? 0 : 1
|
||||
if(index%2 ==0) {
|
||||
this.leftList.push(item)
|
||||
}else {
|
||||
this.rightList.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTab(index) {
|
||||
this.currentTabs = index
|
||||
this.getListInit()
|
||||
},
|
||||
typeClick(index) {
|
||||
this.currentType = index
|
||||
this.getListInit()
|
||||
},
|
||||
pointClick(index) {
|
||||
this.currentPoint = index
|
||||
this.getListInit()
|
||||
},
|
||||
toProductDetail(item) {
|
||||
uni.navigateTo({url: `./productDetails?shopGoodsId=${item.shopGoodsId}&total=${this.total}&userId=${this.userId}`})
|
||||
},
|
||||
toMyOrder() {
|
||||
uni.navigateTo({url: `./myOrderList?userId=${this.userId}`})
|
||||
},
|
||||
toOrder(item) {
|
||||
if(this.total >= item.integralPrice && item.stock > 0) {
|
||||
uni.navigateTo({url: `./placeOrder?shopGoodsId=${item.shopGoodsId}&total=${this.total}&backLevel=3&userId=${this.userId}`})
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goodsList {
|
||||
.fixed-top {
|
||||
background-color: #f3f6f9;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32px 24px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
.num {
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 66px;
|
||||
color: #FF6900;
|
||||
line-height: 92px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 168px;
|
||||
height: 64px;
|
||||
border: 1px solid #4181FF;
|
||||
line-height: 62px;
|
||||
border-radius: 44px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
color: #4181FF;
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
background-color: #fff;
|
||||
.type-select {
|
||||
display: flex;
|
||||
border-top: 1px solid #D8D8D8;
|
||||
line-height: 84px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #8891A1;
|
||||
.down-icon {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #4181FF;
|
||||
.down-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
padding: 396px 0 24px 24px;
|
||||
background-color: #f3f6f9;
|
||||
overflow: hidden;
|
||||
.left-list,
|
||||
.right-list {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.list-info {
|
||||
width: 100%;
|
||||
}
|
||||
.item {
|
||||
width: calc(100% - 24px);
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
.type {
|
||||
padding: 8px 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: #FFF;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.content {
|
||||
padding: 16px 16px 24px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
.text {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 38px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.item-money {
|
||||
width: calc(100% - 160px);
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
}
|
||||
p {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: #4181FF;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #4181FF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 14px 32px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
border-radius: 44px;
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
right: 16px;
|
||||
}
|
||||
.btn1 {
|
||||
background-color: #2D7DFF;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn0 {
|
||||
background-color: #E2E2E2;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n-1) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppRedemptionPoints/img/success.png
Normal file
BIN
src/project/biaopin/AppRedemptionPoints/img/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/project/biaopin/AppRedemptionPoints/img/user-img.png
Normal file
BIN
src/project/biaopin/AppRedemptionPoints/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
20
src/project/biaopin/AppRedemptionPoints/jdH5.vue
Normal file
20
src/project/biaopin/AppRedemptionPoints/jdH5.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="jdH5">
|
||||
<web-view :src="goodsJdUrl"></web-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'jdH5',
|
||||
data() {
|
||||
return {
|
||||
goodsJdUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.goodsJdUrl = option.goodsJdUrl
|
||||
},
|
||||
}
|
||||
</script>
|
||||
317
src/project/biaopin/AppRedemptionPoints/myOrderList.vue
Normal file
317
src/project/biaopin/AppRedemptionPoints/myOrderList.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="myOrderList">
|
||||
<div class="fixed-top">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="90" font-size="28" bg-color="#fff" inactive-color="#8891A1"
|
||||
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
|
||||
</div>
|
||||
<div class="list-content" v-if="list.length">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="time-flex">
|
||||
<p>{{item.createTime.substring(0, 16)}}</p>
|
||||
<div :class="`status`+item.status">{{ $dict.getLabel('integralSGOStatus', item.status) }}</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<img :src="item.goodsPicUrl" alt="">
|
||||
<div class="type" :class="`type`+item.goodsTypeText">{{ $dict.getLabel('integralSGTypeText', item.goodsTypeText) }}</div>
|
||||
<div class="flex-right">
|
||||
<p>{{item.goodsTitle}}</p>
|
||||
<div class="num-flex">
|
||||
<h3>{{item.usedIntegral}}积分<span v-if="item.goodsType == 2">+{{item.payMoney}}元</span></h3>
|
||||
<div>x {{item.quantity}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips" v-if="item.goodsType == 2"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
|
||||
<p class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</p>
|
||||
<p class="remark" v-if="item.remarks">备注：{{item.remarks}}</p>
|
||||
<div class="flex-btn" v-if="item.goodsType == 2 && item.status != 2">
|
||||
<p></p>
|
||||
<div class="btn confirm" @click="openJd(item)">去购买</div>
|
||||
</div>
|
||||
<div class="flex-btn" v-else>
|
||||
<p>核销码:<span>{{item.verificationCode}}</span></p>
|
||||
<div class="btn" v-if="item.status == 0" @click="cancel(item)">取消订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty class="pad-t112" v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'myOrderList',
|
||||
appName: '我的订单',
|
||||
data() {
|
||||
return {
|
||||
tabList: [{name: '全部'}, {name: '待核销'}, {name: '已完成'}, {name: '已取消'}],
|
||||
currentTabs: 0,
|
||||
barStyle: {
|
||||
'width': '20px',
|
||||
'height': '3px',
|
||||
'border-radius': '2px',
|
||||
'bottom': '3px',
|
||||
'background': '#2D7DFF'
|
||||
},
|
||||
list: [],
|
||||
current: 1,
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.userId = option.userId
|
||||
this.$dict.load(['integralSGOStatus', 'integralSGTypeText']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.currentTabs = index
|
||||
this.getListInit()
|
||||
},
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/listForXCX`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
status: this.currentTabs == 0 ? '' : this.currentTabs - 1,
|
||||
createUserId: this.userId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
res.data.records.map((item) => {
|
||||
item.goodsTypeText = item.goodsType == 0 ? 0 : 1
|
||||
})
|
||||
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
openJd(item) {
|
||||
if(item.goodsType == 1) {
|
||||
uni.navigateTo({url: `./jdH5?goodsJdUrl=${item.goodsJdUrl}`})
|
||||
}else {
|
||||
uni.navigateToMiniProgram({
|
||||
appId: item.goodsJdAppid,
|
||||
path: item.goodsJdUrl
|
||||
})
|
||||
}
|
||||
},
|
||||
cancel(item) {
|
||||
uni.showModal({
|
||||
title: '确认取消此订单？',
|
||||
content: '取消订单后，积分将退回至积分余额',
|
||||
confirmColor: "#2D7DFF",
|
||||
cancelColor: "#2D7DFF",
|
||||
cancelText: "我在想想",
|
||||
confirmText: "确认取消",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.cancelOrder(item)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelOrder(item) {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/cancelForXCX?id=${item.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.getListInit()
|
||||
uni.$emit('updateGoodsList')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myOrderList {
|
||||
min-height: 100%;
|
||||
.fixed-top {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.list-content {
|
||||
padding: 112px 24px 24px;
|
||||
background-color: #F3F6F9;
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 32px;
|
||||
.time-flex {
|
||||
padding: 0 32px;
|
||||
line-height: 64px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
div {
|
||||
color: #2D7DFF;
|
||||
}
|
||||
.status2 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
padding: 32px 32px 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 166px;
|
||||
height: 166px;
|
||||
border-radius: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
width: 166px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
p {
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.flex-right {
|
||||
width: calc(100% - 186px);
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 34px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.num-flex {
|
||||
display: flex;
|
||||
h3 {
|
||||
width: calc(100% - 100px);
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
margin: 0 32px 16px 32px;
|
||||
span {
|
||||
display: inline-block;
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
.remark {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
word-break: break-all;
|
||||
margin: 0 32px 24px 32px;
|
||||
}
|
||||
.flex-btn {
|
||||
padding: 0 32px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
p {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
color: #2D7DFF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 136px;
|
||||
text-align: center;
|
||||
line-height: 54px;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
}
|
||||
.confirm {
|
||||
border: 1px solid #2D7DFF;
|
||||
background-color: #2D7DFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pad-t112 {
|
||||
padding-top: 112px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
294
src/project/biaopin/AppRedemptionPoints/placeOrder.vue
Normal file
294
src/project/biaopin/AppRedemptionPoints/placeOrder.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="placeOrder">
|
||||
<div class="header-info">
|
||||
<div class="flex">
|
||||
<img :src="goodsInfo.picUrl" alt="">
|
||||
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
|
||||
<div class="flex-right">
|
||||
<p>{{goodsInfo.title}}</p>
|
||||
<div>
|
||||
<u-number-box v-model="goodsNum" @change="valChange" input-height="44" size="24" :min="1" :max="goodsInfo.stock"></u-number-box>
|
||||
</div>
|
||||
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 2">+￥{{goodsInfo.payMoney}}.00</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips" v-if="goodsInfo.type == 2">兑换成功后，点击「去购买」前往京东低价购买</p>
|
||||
<p class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item-flex" @click="show=true">
|
||||
<div class="label">订单备注</div>
|
||||
<div class="value" :class="value ? '' : 'color-999'">{{value || '无备注'}}<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">积分余额</div>
|
||||
<div class="value color-FF6900">{{total}}积分</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">支付积分</div>
|
||||
<div class="value">减{{(goodsNum*goodsInfo.integralPrice).toFixed(2)}}积分</div>
|
||||
</div>
|
||||
<div class="item-flex" v-if="goodsInfo.type == 2">
|
||||
<div class="label">京东支付</div>
|
||||
<div class="value color-999">¥{{(goodsNum*goodsInfo.payMoney).toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<div class="textarea">
|
||||
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
|
||||
<p>字数{{value.length}}/1000</p>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<span @click="value=''">清空内容</span>
|
||||
<span class="confirm" @click="confirm">保存</span>
|
||||
</div>
|
||||
</u-popup>
|
||||
<div class="bottom-btn" @click="confirmOrder()">
|
||||
<div>提交订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'placeOrder',
|
||||
appName: '提交订单',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
show: false,
|
||||
total: 0,
|
||||
goodsInfo: {},
|
||||
goodsNum: 1,
|
||||
backLevel: 0,
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.userId = option.userId
|
||||
this.shopGoodsId = option.shopGoodsId
|
||||
this.total = option.total
|
||||
this.backLevel = option.backLevel
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '提交订单'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsInfo = res.data
|
||||
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
|
||||
}
|
||||
})
|
||||
},
|
||||
valChange(e) {
|
||||
this.goodsNum = e.value
|
||||
},
|
||||
confirm() {
|
||||
this.show = false
|
||||
},
|
||||
confirmOrder() {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/addWXCP`, {
|
||||
shopId: this.goodsInfo.shopId,
|
||||
goodsId: this.goodsInfo.id,
|
||||
remarks: this.value,
|
||||
quantity: this.goodsNum,
|
||||
createUserId: this.userId
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
uni.$emit('updateGoodsList')
|
||||
this.toSuccess()
|
||||
}
|
||||
})
|
||||
},
|
||||
toSuccess() {
|
||||
var integralPrice = this.goodsNum*this.goodsInfo.integralPrice
|
||||
uni.navigateTo({url: `./successOrder?shopGoodsId=${this.goodsInfo.shopGoodsId}&integralPrice=${integralPrice}&backLevel=${this.backLevel}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.placeOrder {
|
||||
.header-info {
|
||||
padding: 48px 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
.flex {
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
img {
|
||||
width: 166px;
|
||||
height: 166px;
|
||||
border-radius: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
width: 166px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
p {
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.flex-right {
|
||||
width: calc(100% - 186px);
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 34px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
div {
|
||||
text-align: right;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
span {
|
||||
display: inline-block;
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 0 32px;
|
||||
background-color: #fff;
|
||||
.item-flex {
|
||||
display: flex;
|
||||
padding: 30px 0;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
.label {
|
||||
color: #222;
|
||||
width: 120px;
|
||||
}
|
||||
.value {
|
||||
width: calc(100% - 120px);
|
||||
text-align: right;
|
||||
color: #222;
|
||||
}
|
||||
.color-FF6900 {
|
||||
color: #FF6900;
|
||||
}
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.textarea {
|
||||
margin: 32px 32px 24px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
background: #f7f7f7;
|
||||
border-radius: 8px;
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 0 32px 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
}
|
||||
.confirm {
|
||||
width: 144px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #FFF;
|
||||
background: #4181FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
src/project/biaopin/AppRedemptionPoints/pointsPublicity.vue
Normal file
165
src/project/biaopin/AppRedemptionPoints/pointsPublicity.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="pointsPublicity">
|
||||
<div class="header">
|
||||
<img :src="`${cdn}/publicity-header.png`" alt="">
|
||||
<div class="title">{{user.girdName}}积分公示</div>
|
||||
</div>
|
||||
<div class="list-content" v-if="list.length">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<span class="blue-tips"></span>
|
||||
<p class="title">{{item.classOne}}</p>
|
||||
<div class="item-info">
|
||||
<p class="mini-title">{{item.classTwo}}</p>
|
||||
<div class="text-flex">
|
||||
<p>{{item.classThree}}</p>
|
||||
<div>
|
||||
<img :src="`${cdn}/star-icon.png`" alt="">+{{item.integral}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'pointsPublicity',
|
||||
appName: '积分公示',
|
||||
data() {
|
||||
return {
|
||||
cdn: "https://cdn.cunwuyun.cn/fengdu",
|
||||
list: [],
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad() {
|
||||
this.getAuth()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分公示'
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo']),
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralpublicityinfo/list?current=${this.current}&girdId=${this.user.girdId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
getAuth() {
|
||||
this.$nextTick(() => {
|
||||
this.getUserInfo('qujing')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
background-color: #fff;
|
||||
}
|
||||
.pointsPublicity {
|
||||
.header {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
padding: 38px 32px;
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
padding: 0 32px;
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #EEEEEE;
|
||||
padding: 32px 32px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
.blue-tips {
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 36px;
|
||||
background: #2D7DFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.item-info {
|
||||
width: 100%;
|
||||
padding: 32px 0;
|
||||
border-top: 1px solid #eee;
|
||||
.mini-title {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.text-flex {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
p {
|
||||
width: calc(100% - 160px);
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
}
|
||||
div {
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
font-family: DINAlternate-Bold;
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
color: #FF7109;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-info:nth-of-type(2) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/project/biaopin/AppRedemptionPoints/productDetails.vue
Normal file
187
src/project/biaopin/AppRedemptionPoints/productDetails.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="productDetails" v-if="goodsInfo.picUrl">
|
||||
<img :src="goodsInfo.picUrl" alt="">
|
||||
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
|
||||
<div class="product-info">
|
||||
<p>{{goodsInfo.title}}</p>
|
||||
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 2">+￥{{goodsInfo.payMoney}}<span v-if="goodsInfo.type == 2">（兑换后再付）</span></span></h3>
|
||||
<div>零售单价¥{{goodsInfo.retailPrice}}</div>
|
||||
<span class="tips" v-if="goodsInfo.type == 2">兑换成功后，点击「去购买」前往京东低价购买</span>
|
||||
<span class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</span>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<p>商品描述：</p>
|
||||
<p v-html="goodsInfo.description"></p>
|
||||
</div>
|
||||
<div class="btn" @click="toOrder()" v-if="goodsInfo.shopStatus == 1">
|
||||
<div :class="total >= goodsInfo.integralPrice ? 'status1' : 'status0'" v-if="goodsInfo.stock > 0">{{total >= goodsInfo.integralPrice ? '立即兑换' : '积分不足'}}</div>
|
||||
<div class="status0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div class="btn" v-else>
|
||||
<div class="status0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'productDetails',
|
||||
appName: '兑换商品',
|
||||
data() {
|
||||
return {
|
||||
shopGoodsId: '',
|
||||
goodsInfo: {},
|
||||
total: 0,
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.shopGoodsId = option.shopGoodsId
|
||||
this.userId = option.userId
|
||||
this.total = option.total
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '兑换商品'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsInfo = res.data
|
||||
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
|
||||
}
|
||||
})
|
||||
},
|
||||
toOrder() {
|
||||
if(this.total >= this.goodsInfo.integralPrice && this.goodsInfo.stock > 0 && this.goodsInfo.status == 1) {
|
||||
uni.navigateTo({url: `./placeOrder?shopGoodsId=${this.goodsInfo.shopGoodsId}&total=${this.total}&backLevel=4&userId=${this.userId}`})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.productDetails {
|
||||
background-color: #f3f6f9;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 42px;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
color: #FFF;
|
||||
padding: 16px 16px 16px 36px;
|
||||
border-bottom-left-radius: 40px;
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.product-info {
|
||||
padding: 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
color: #222;
|
||||
letter-spacing: 0;
|
||||
line-height: 76px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #FF6900;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
font-size: 44px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
margin-bottom: 24px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
padding: 34px 64px 162px;
|
||||
background-color: #fff;
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
}
|
||||
.status1 {
|
||||
color: #FFF;
|
||||
background: #4181FF;
|
||||
}
|
||||
.status0 {
|
||||
color: #666;
|
||||
background: #E2E2E2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/project/biaopin/AppRedemptionPoints/successOrder.vue
Normal file
145
src/project/biaopin/AppRedemptionPoints/successOrder.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="successOrder">
|
||||
<img src="./img/success.png" alt="">
|
||||
<div v-if="goodsInfo.type == 0">
|
||||
<h3>提交成功</h3>
|
||||
<p>提交「积分兑换」订单成功，扣减 <span>{{integralPrice}}积分</span></p>
|
||||
<div class="btn-flex">
|
||||
<div @click="back">返回</div>
|
||||
<div @click="toOrderList">查看订单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h3>兑换成功</h3>
|
||||
<p>提交「京东低价商品」订单成功，扣减 <span>{{integralPrice}}积分</span>
|
||||
可点击下方按钮前往京东商城进行低价购买
|
||||
</p>
|
||||
<div class="btn" @click="openJd">去购买</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'successOrder',
|
||||
appName: '提交订单',
|
||||
data() {
|
||||
return {
|
||||
integralPrice: 0,
|
||||
backLevel: 1,
|
||||
shopGoodsId: '',
|
||||
goodsInfo: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.integralPrice = option.integralPrice
|
||||
this.backLevel = option.backLevel
|
||||
this.shopGoodsId = option.shopGoodsId
|
||||
this.getDetail()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '提交订单'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
openJd() {
|
||||
if(this.goodsInfo.type == 1) {
|
||||
uni.navigateTo({url: `./jdH5?goodsJdUrl=${this.goodsInfo.jdUrl}`})
|
||||
}else {
|
||||
uni.navigateToMiniProgram({
|
||||
appId: this.goodsInfo.jdAppid,
|
||||
path: this.goodsInfo.jdUrl
|
||||
})
|
||||
}
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({delta: Number(this.backLevel)})
|
||||
},
|
||||
toOrderList() {
|
||||
uni.redirectTo({
|
||||
url: './myOrderList'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
background-color: #fff;
|
||||
}
|
||||
.successOrder {
|
||||
padding: 0 60px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 240px;
|
||||
height: 232px;
|
||||
margin: 168px auto 32px auto;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
line-height: 56px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
span {
|
||||
color: #FF6900;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 410px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
background: #2D7DFF;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.btn-flex {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
margin: 0 auto;
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 272px;
|
||||
text-align: center;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
border-radius: 44px;
|
||||
color: #FFF;
|
||||
background-color: #2D7DFF;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
background-color: #E5EFFF;
|
||||
color: #2D7DFF;
|
||||
margin-right: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
378
src/project/biaopin/AppSuperMarket/AppSuperMarket.vue
Normal file
378
src/project/biaopin/AppSuperMarket/AppSuperMarket.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="AppSuperMarket">
|
||||
<div class="fixed-top">
|
||||
<div class="header">
|
||||
<div class="num">
|
||||
<p>积分余额</p>
|
||||
<h3>{{total}}</h3>
|
||||
</div>
|
||||
<div class="btn" @click="toMyOrder">我的订单</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1"
|
||||
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
|
||||
<div class="type-select">
|
||||
<div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
|
||||
{{item}}
|
||||
<span v-if="index == 1" class="down-icon">⏷</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="point-select" v-if="currentType == 1">
|
||||
<u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666"
|
||||
active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="left-list">
|
||||
<div class="list-info" v-for="(item, index) in leftList" :key="index" v-if="goodsList.length">
|
||||
<div class="item" @click="toProductDetail(item)">
|
||||
<img :src="item.picUrl" alt="">
|
||||
<div class="type" :class="`type`+item.typeText">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
|
||||
<div class="content">
|
||||
<p class="text">{{item.title}}</p>
|
||||
<div class="item-money">
|
||||
<h3>{{item.integralPrice}}积分</h3>
|
||||
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
|
||||
<span v-if="item.type == 1">兑换后再付</span>
|
||||
</div>
|
||||
<div v-if="item.shopStatus == 1">
|
||||
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
|
||||
<div class="btn btn0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-list">
|
||||
<div class="list-info" v-for="(item, index) in rightList" :key="index" v-if="goodsList.length">
|
||||
<div class="item" @click="toProductDetail(item)">
|
||||
<img :src="item.picUrl" alt="">
|
||||
<div class="type" :class="`type`+item.typeText">{{ $dict.getLabel('integralSGTypeText', item.typeText) }}</div>
|
||||
<div class="content">
|
||||
<p class="text">{{item.title}}</p>
|
||||
<div class="item-money">
|
||||
<h3>{{item.integralPrice}}积分</h3>
|
||||
<p v-if="item.type == 1">+￥{{item.payMoney}}</p>
|
||||
<span v-if="item.type == 1">兑换后再付</span>
|
||||
</div>
|
||||
<div v-if="item.shopStatus == 1">
|
||||
<div class="btn" :class="total >= item.integralPrice ? 'btn1' : 'btn0'" @click.stop="toOrder(item)" v-if="item.stock > 0">{{total >= item.integralPrice ? '去兑换' : '积分不足'}}</div>
|
||||
<div class="btn btn0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!goodsList.length"></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapActions} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AppSuperMarket',
|
||||
appName: '积分商城',
|
||||
data() {
|
||||
return {
|
||||
tabList: [{name: '全部'}, {name: '免费兑'}, {name: '京东低价商品'}],
|
||||
currentTabs: 0,
|
||||
barStyle: {
|
||||
'width': '20px',
|
||||
'height': '3px',
|
||||
'border-radius': '2px',
|
||||
'bottom': '-3px',
|
||||
'background': '#2D7DFF'
|
||||
},
|
||||
typeList: ['最新上架', '积分', '我可兑换的'],
|
||||
currentType: 0,
|
||||
pointTypeList: [{name: '全部'}, {name: '50分以下'}, {name: '100分以下'}, {name: '200分以下'}, {name: '5000分以下'}],
|
||||
currentPoint: 0,
|
||||
goodsList: [],
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
total: 0,
|
||||
current: 1,
|
||||
openId: '',
|
||||
integralUserId: '',
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad() {
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getListInit()
|
||||
})
|
||||
uni.$on('updateGoodsList', () => {
|
||||
this.getListInit()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分商城'
|
||||
this.$nextTick(() => {
|
||||
this.getAccount().then(() => {
|
||||
this.total = this.user.girdIntegral || 0
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getAccount']),
|
||||
getListInit() {
|
||||
this.goodsList = []
|
||||
this.leftList = []
|
||||
this.rightList = []
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/goodsListGird`, null, {
|
||||
params: {
|
||||
goodsType: this.currentTabs, //商品类型，0：全部、1：免费兑、2：京东低价商品，默认0
|
||||
orderType: this.currentType == 0 ? 1 : 0, //排序类型，0：积分升序、1：上架时间倒序，默认0
|
||||
filterIntegral: this.currentType == 2 ? true : false, //过滤我可兑换的，默认false
|
||||
integralRange: this.currentType == 1 ? this.currentPoint : '', //积分区间类型，0：全部、1：50分以下、2:100分以下、3：200分以下、4：5000分以下默认0
|
||||
current: this.current,
|
||||
// userId: this.userId,
|
||||
// openId: this.openId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsList = this.current == 1 ? res.data.records : [...this.goodsList, ...res.data.records]
|
||||
res.data.records.map((item, index) => {
|
||||
item.typeText = item.type == 0 ? 0 : 1
|
||||
if(index%2 ==0) {
|
||||
this.leftList.push(item)
|
||||
}else {
|
||||
this.rightList.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTab(index) {
|
||||
this.currentTabs = index
|
||||
this.getListInit()
|
||||
},
|
||||
typeClick(index) {
|
||||
this.currentType = index
|
||||
this.getListInit()
|
||||
},
|
||||
pointClick(index) {
|
||||
this.currentPoint = index
|
||||
this.getListInit()
|
||||
},
|
||||
toProductDetail(item) {
|
||||
uni.navigateTo({url: `./productDetails?shopGoodsId=${item.shopGoodsId}&total=${this.total}`})
|
||||
},
|
||||
toMyOrder() {
|
||||
uni.navigateTo({url: `./myOrderList`})
|
||||
},
|
||||
toOrder(item) {
|
||||
if(this.total >= item.integralPrice && item.stock > 0) {
|
||||
uni.navigateTo({url: `./placeOrder?shopGoodsId=${item.shopGoodsId}&total=${this.total}&backLevel=2`})
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppSuperMarket {
|
||||
.fixed-top {
|
||||
background-color: #f3f6f9;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32px 24px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
.num {
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 66px;
|
||||
color: #FF6900;
|
||||
line-height: 92px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 168px;
|
||||
height: 64px;
|
||||
border: 1px solid #4181FF;
|
||||
line-height: 62px;
|
||||
border-radius: 44px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
color: #4181FF;
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
background-color: #fff;
|
||||
.type-select {
|
||||
display: flex;
|
||||
border-top: 1px solid #D8D8D8;
|
||||
line-height: 84px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #8891A1;
|
||||
.down-icon {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #4181FF;
|
||||
.down-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
padding: 396px 0 24px 24px;
|
||||
background-color: #f3f6f9;
|
||||
overflow: hidden;
|
||||
.left-list,
|
||||
.right-list {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.list-info {
|
||||
width: 100%;
|
||||
}
|
||||
.item {
|
||||
width: calc(100% - 24px);
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
.type {
|
||||
padding: 8px 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: #FFF;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.content {
|
||||
padding: 16px 16px 24px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
.text {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 38px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.item-money {
|
||||
width: calc(100% - 160px);
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
}
|
||||
p {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: #4181FF;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #4181FF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 14px 32px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
border-radius: 44px;
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
right: 16px;
|
||||
}
|
||||
.btn1 {
|
||||
background-color: #2D7DFF;
|
||||
color: #FFF;
|
||||
}
|
||||
.btn0 {
|
||||
background-color: #E2E2E2;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n-1) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/biaopin/AppSuperMarket/img/success.png
Normal file
BIN
src/project/biaopin/AppSuperMarket/img/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/project/biaopin/AppSuperMarket/img/user-img.png
Normal file
BIN
src/project/biaopin/AppSuperMarket/img/user-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
20
src/project/biaopin/AppSuperMarket/jdH5.vue
Normal file
20
src/project/biaopin/AppSuperMarket/jdH5.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="jdH5">
|
||||
<web-view :src="goodsJdUrl"></web-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'jdH5',
|
||||
data() {
|
||||
return {
|
||||
goodsJdUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.goodsJdUrl = option.goodsJdUrl
|
||||
},
|
||||
}
|
||||
</script>
|
||||
338
src/project/biaopin/AppSuperMarket/myOrderList.vue
Normal file
338
src/project/biaopin/AppSuperMarket/myOrderList.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="myOrderList">
|
||||
<div class="fixed-top">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="90" font-size="28" bg-color="#fff"
|
||||
inactive-color="#8891A1"
|
||||
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab"></u-tabs>
|
||||
</div>
|
||||
<div class="list-content" v-if="list.length">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="time-flex">
|
||||
<p>{{ item.createTime.substring(0, 16) }}</p>
|
||||
<div :class="`status`+item.status">{{ $dict.getLabel('integralSGOStatus', item.status) }}</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<img :src="item.goodsPicUrl" alt="">
|
||||
<div class="type" :class="`type`+item.goodsTypeText">
|
||||
{{ $dict.getLabel('integralSGTypeText', item.goodsTypeText) }}
|
||||
</div>
|
||||
<div class="flex-right">
|
||||
<p>{{ item.goodsTitle }}</p>
|
||||
<div class="num-flex">
|
||||
<h3>{{ item.usedIntegral }}积分<span v-if="item.goodsType == 1">+{{ item.payMoney }}元</span></h3>
|
||||
<div>x {{ item.quantity }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips" v-if="item.goodsType == 1"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
|
||||
<p class="tips" v-else>免费兑换商品，可到固定的兑换点进行「核销兑换」</p>
|
||||
<p class="remark" v-if="item.remarks">备注：{{ item.remarks }}</p>
|
||||
<div class="flex-btn" v-if="item.goodsType == 1 && item.status != 2">
|
||||
<p></p>
|
||||
<div class="btn confirm" @click="openJd(item)">去购买</div>
|
||||
</div>
|
||||
<div class="flex-btn" v-else>
|
||||
<p>核销码:<span>{{ item.verificationCode }}</span></p>
|
||||
<div class="btn" v-if="item.status == 0" @click="cancel(item)">取消订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty class="pad-t112" v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'myOrderList',
|
||||
appName: '我的订单',
|
||||
data() {
|
||||
return {
|
||||
tabList: [{name: '全部'}, {name: '待核销'}, {name: '已完成'}, {name: '已取消'}],
|
||||
currentTabs: 0,
|
||||
barStyle: {
|
||||
'width': '20px',
|
||||
'height': '3px',
|
||||
'border-radius': '2px',
|
||||
'bottom': '3px',
|
||||
'background': '#2D7DFF'
|
||||
},
|
||||
list: [],
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.$dict.load(['integralSGOStatus', 'integralSGTypeText']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.currentTabs = index
|
||||
this.getListInit()
|
||||
},
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/listForXCX?type=0`, null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
status: this.currentTabs == 0 ? '' : this.currentTabs - 1,
|
||||
createUserId: this.user.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
res.data.records.map((item) => {
|
||||
item.goodsTypeText = item.goodsType == 0 ? 0 : 1
|
||||
})
|
||||
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
openJd(item) {
|
||||
location.href = item.goodsJdUrl
|
||||
},
|
||||
cancel(item) {
|
||||
uni.showModal({
|
||||
title: '确认取消此订单？',
|
||||
content: '取消订单后，积分将退回至积分余额',
|
||||
confirmColor: "#2D7DFF",
|
||||
cancelColor: "#2D7DFF",
|
||||
cancelText: "我在想想",
|
||||
confirmText: "确认取消",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.cancelOrder(item)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelOrder(item) {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/cancelForGird?id=${item.id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.getListInit()
|
||||
uni.$emit('updateGoodsList')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myOrderList {
|
||||
min-height: 100%;
|
||||
|
||||
.fixed-top {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
padding: 112px 24px 24px;
|
||||
background-color: #F3F6F9;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.time-flex {
|
||||
padding: 0 32px;
|
||||
line-height: 64px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
div {
|
||||
color: #2D7DFF;
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
padding: 32px 32px 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
width: 166px;
|
||||
height: 166px;
|
||||
border-radius: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.type {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
width: 166px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
|
||||
p {
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
width: calc(100% - 186px);
|
||||
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 34px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.num-flex {
|
||||
display: flex;
|
||||
|
||||
h3 {
|
||||
width: calc(100% - 100px);
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
margin: 0 32px 16px 32px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
word-break: break-all;
|
||||
margin: 0 32px 24px 32px;
|
||||
}
|
||||
|
||||
.flex-btn {
|
||||
padding: 0 32px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
color: #2D7DFF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 136px;
|
||||
text-align: center;
|
||||
line-height: 54px;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
border: 1px solid #2D7DFF;
|
||||
background-color: #2D7DFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pad-t112 {
|
||||
padding-top: 112px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
293
src/project/biaopin/AppSuperMarket/placeOrder.vue
Normal file
293
src/project/biaopin/AppSuperMarket/placeOrder.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="placeOrder">
|
||||
<div class="header-info">
|
||||
<div class="flex">
|
||||
<img :src="goodsInfo.picUrl" alt="">
|
||||
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
|
||||
<div class="flex-right">
|
||||
<p>{{goodsInfo.title}}</p>
|
||||
<div>
|
||||
<u-number-box v-model="goodsNum" @change="valChange" input-height="44" size="24" :min="1" :max="goodsInfo.stock"></u-number-box>
|
||||
</div>
|
||||
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 1">+￥{{goodsInfo.payMoney}}.00</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips" v-if="goodsInfo.type == 1">兑换成功后，点击「去购买」前往京东低价购买</p>
|
||||
<p class="tips" v-else>免费兑换商品，可到固定的兑换点进行「核销兑换」</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item-flex" @click="show=true">
|
||||
<div class="label">订单备注</div>
|
||||
<div class="value" :class="value ? '' : 'color-999'">{{value || '无备注'}}<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">积分余额</div>
|
||||
<div class="value color-FF6900">{{total}}积分</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
<div class="label">支付积分</div>
|
||||
<div class="value">减{{(goodsNum*goodsInfo.integralPrice).toFixed(2)}}积分</div>
|
||||
</div>
|
||||
<div class="item-flex" v-if="goodsInfo.type == 1">
|
||||
<div class="label">京东支付</div>
|
||||
<div class="value color-999">¥{{(goodsNum*goodsInfo.payMoney).toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<div class="textarea">
|
||||
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
|
||||
<p>字数{{value.length}}/1000</p>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<span @click="value=''">清空内容</span>
|
||||
<span class="confirm" @click="confirm">保存</span>
|
||||
</div>
|
||||
</u-popup>
|
||||
<div class="bottom-btn" @click="confirmOrder()">
|
||||
<div>提交订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'placeOrder',
|
||||
appName: '提交订单',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
show: false,
|
||||
total: 0,
|
||||
goodsInfo: {},
|
||||
goodsNum: 1,
|
||||
backLevel: 0,
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.userId = option.userId
|
||||
this.shopGoodsId = option.shopGoodsId
|
||||
this.total = option.total
|
||||
this.backLevel = option.backLevel
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '提交订单'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsInfo = res.data
|
||||
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
|
||||
}
|
||||
})
|
||||
},
|
||||
valChange(e) {
|
||||
this.goodsNum = e.value
|
||||
},
|
||||
confirm() {
|
||||
this.show = false
|
||||
},
|
||||
confirmOrder() {
|
||||
this.$http.post(`/app/appintegralsupermarketorder/addGird`, {
|
||||
shopId: this.goodsInfo.shopId,
|
||||
goodsId: this.goodsInfo.id,
|
||||
remarks: this.value,
|
||||
quantity: this.goodsNum
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
uni.$emit('updateGoodsList')
|
||||
this.toSuccess()
|
||||
}
|
||||
})
|
||||
},
|
||||
toSuccess() {
|
||||
var integralPrice = this.goodsNum*this.goodsInfo.integralPrice
|
||||
uni.navigateTo({url: `./successOrder?isFree=${this.goodsInfo.type}&integralPrice=${integralPrice}&backLevel=${this.backLevel}&goodsJdUrl=${this.goodsInfo.jdUrl}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.placeOrder {
|
||||
.header-info {
|
||||
padding: 48px 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
.flex {
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
img {
|
||||
width: 166px;
|
||||
height: 166px;
|
||||
border-radius: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
width: 166px;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
p {
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.flex-right {
|
||||
width: calc(100% - 186px);
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #222;
|
||||
line-height: 34px;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
div {
|
||||
text-align: right;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FF6900;
|
||||
line-height: 48px;
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
span {
|
||||
display: inline-block;
|
||||
scale: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 0 32px;
|
||||
background-color: #fff;
|
||||
.item-flex {
|
||||
display: flex;
|
||||
padding: 30px 0;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
font-family: PingFangSC-Regular;
|
||||
.label {
|
||||
color: #222;
|
||||
width: 120px;
|
||||
}
|
||||
.value {
|
||||
width: calc(100% - 120px);
|
||||
text-align: right;
|
||||
color: #222;
|
||||
}
|
||||
.color-FF6900 {
|
||||
color: #FF6900;
|
||||
}
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.textarea {
|
||||
margin: 32px 32px 24px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
background: #f7f7f7;
|
||||
border-radius: 8px;
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 0 32px 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
}
|
||||
.confirm {
|
||||
width: 144px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #FFF;
|
||||
background: #4181FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
src/project/biaopin/AppSuperMarket/pointsPublicity.vue
Normal file
165
src/project/biaopin/AppSuperMarket/pointsPublicity.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="pointsPublicity">
|
||||
<div class="header">
|
||||
<img :src="`${cdn}/publicity-header.png`" alt="">
|
||||
<div class="title">{{user.girdName}}积分公示</div>
|
||||
</div>
|
||||
<div class="list-content" v-if="list.length">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<span class="blue-tips"></span>
|
||||
<p class="title">{{item.classOne}}</p>
|
||||
<div class="item-info">
|
||||
<p class="mini-title">{{item.classTwo}}</p>
|
||||
<div class="text-flex">
|
||||
<p>{{item.classThree}}</p>
|
||||
<div>
|
||||
<img :src="`${cdn}/star-icon.png`" alt="">+{{item.integral}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'pointsPublicity',
|
||||
appName: '积分公示',
|
||||
data() {
|
||||
return {
|
||||
cdn: "https://cdn.cunwuyun.cn/fengdu",
|
||||
list: [],
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad() {
|
||||
this.getAuth()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分公示'
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo']),
|
||||
getList() {
|
||||
this.$http.post(`/app/appintegralpublicityinfo/list?current=${this.current}&girdId=${this.user.girdId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = this.current == 1 ? res.data.records : [...this.list, ...res.data.records]
|
||||
}
|
||||
})
|
||||
},
|
||||
getAuth() {
|
||||
this.$nextTick(() => {
|
||||
this.getUserInfo('qujing')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
background-color: #fff;
|
||||
}
|
||||
.pointsPublicity {
|
||||
.header {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
padding: 38px 32px;
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
padding: 0 32px;
|
||||
.item {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #EEEEEE;
|
||||
padding: 32px 32px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
.blue-tips {
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 36px;
|
||||
background: #2D7DFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.item-info {
|
||||
width: 100%;
|
||||
padding: 32px 0;
|
||||
border-top: 1px solid #eee;
|
||||
.mini-title {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 34px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
word-break: break-all;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.text-flex {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
p {
|
||||
width: calc(100% - 160px);
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
}
|
||||
div {
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
font-family: DINAlternate-Bold;
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
color: #FF7109;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-info:nth-of-type(2) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
185
src/project/biaopin/AppSuperMarket/productDetails.vue
Normal file
185
src/project/biaopin/AppSuperMarket/productDetails.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="productDetails" v-if="goodsInfo.picUrl">
|
||||
<img :src="goodsInfo.picUrl" alt="">
|
||||
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
|
||||
<div class="product-info">
|
||||
<p>{{goodsInfo.title}}</p>
|
||||
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 1">+￥{{goodsInfo.payMoney}}<span v-if="goodsInfo.type == 1">（兑换后再付）</span></span></h3>
|
||||
<div>零售单价¥{{goodsInfo.retailPrice}}</div>
|
||||
<span class="tips" v-if="goodsInfo.type == 1">兑换成功后，点击「去购买」前往京东低价购买</span>
|
||||
<span class="tips" v-else>免费兑换商品，可到固定的兑换点进行「核销兑换」</span>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<p>商品描述：</p>
|
||||
<p v-html="goodsInfo.description"></p>
|
||||
</div>
|
||||
<div class="btn" @click="toOrder()" v-if="goodsInfo.shopStatus == 1">
|
||||
<div :class="total >= goodsInfo.integralPrice ? 'status1' : 'status0'" v-if="goodsInfo.stock > 0">{{total >= goodsInfo.integralPrice ? '立即兑换' : '积分不足'}}</div>
|
||||
<div class="status0" v-else>商品缺货</div>
|
||||
</div>
|
||||
<div class="btn" v-else>
|
||||
<div class="status0">店铺停用</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'productDetails',
|
||||
appName: '兑换商品',
|
||||
data() {
|
||||
return {
|
||||
shopGoodsId: '',
|
||||
goodsInfo: {},
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.shopGoodsId = option.shopGoodsId
|
||||
this.total = option.total
|
||||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '兑换商品'
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.goodsInfo = res.data
|
||||
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
|
||||
}
|
||||
})
|
||||
},
|
||||
toOrder() {
|
||||
if(this.total >= this.goodsInfo.integralPrice && this.goodsInfo.stock > 0 && this.goodsInfo.status == 1) {
|
||||
uni.navigateTo({url: `./placeOrder?shopGoodsId=${this.goodsInfo.shopGoodsId}&total=${this.total}&backLevel=4`})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.productDetails {
|
||||
background-color: #f3f6f9;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
}
|
||||
.type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 42px;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
color: #FFF;
|
||||
padding: 16px 16px 16px 36px;
|
||||
border-bottom-left-radius: 40px;
|
||||
}
|
||||
.type1 {
|
||||
background-color: #E64E39;
|
||||
}
|
||||
.type0 {
|
||||
background-color: #FF6900;
|
||||
}
|
||||
.product-info {
|
||||
padding: 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
word-break: break-all;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
color: #222;
|
||||
letter-spacing: 0;
|
||||
line-height: 76px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #FF6900;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
font-size: 44px;
|
||||
color: #4181FF;
|
||||
margin-left: 8px;
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
margin-bottom: 24px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
line-height: 36px;
|
||||
background: #F5FCF5;
|
||||
border-radius: 16px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #3BBC37;
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
padding: 34px 64px 162px;
|
||||
background-color: #fff;
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 20px 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
}
|
||||
.status1 {
|
||||
color: #FFF;
|
||||
background: #4181FF;
|
||||
}
|
||||
.status0 {
|
||||
color: #666;
|
||||
background: #E2E2E2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
133
src/project/biaopin/AppSuperMarket/successOrder.vue
Normal file
133
src/project/biaopin/AppSuperMarket/successOrder.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="successOrder">
|
||||
<img src="./img/success.png" alt="">
|
||||
|
||||
<div v-if="isFree == 1">
|
||||
<h3>兑换成功</h3>
|
||||
<p>提交「京东低价商品」订单成功，扣减 <span>{{integralPrice}}积分</span>
|
||||
可点击下方按钮前往京东商城进行低价购买
|
||||
</p>
|
||||
<div class="btn" @click="openJd">去购买</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h3>提交成功</h3>
|
||||
<p>提交「免费兑」订单成功，扣减 <span>{{integralPrice}}积分</span></p>
|
||||
<div class="btn-flex">
|
||||
<div @click="back">返回</div>
|
||||
<div @click="toOrderList">查看订单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'successOrder',
|
||||
appName: '提交订单',
|
||||
data() {
|
||||
return {
|
||||
isFree: 0, // 0免费 1京东
|
||||
integralPrice: 0,
|
||||
backLevel: 1,
|
||||
goodsJdUrl: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
this.isFree = option.isFree
|
||||
this.integralPrice = option.integralPrice
|
||||
this.backLevel = option.backLevel
|
||||
this.goodsJdUrl = option.goodsJdUrl
|
||||
},
|
||||
onShow() {
|
||||
document.title = '提交订单'
|
||||
},
|
||||
methods: {
|
||||
openJd() {
|
||||
// uni.navigateTo({url: `./jdH5?goodsJdUrl=${this.goodsJdUrl}`})
|
||||
location.href = this.goodsJdUrl
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({delta: Number(this.backLevel)})
|
||||
},
|
||||
toOrderList() {
|
||||
uni.redirectTo({
|
||||
url: './myOrderList'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
background-color: #fff;
|
||||
}
|
||||
.successOrder {
|
||||
padding: 0 60px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 240px;
|
||||
height: 232px;
|
||||
margin: 168px auto 32px auto;
|
||||
}
|
||||
h3 {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
line-height: 56px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
span {
|
||||
color: #FF6900;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 410px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
background: #2D7DFF;
|
||||
border-radius: 44px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.btn-flex {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
margin: 0 auto;
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 272px;
|
||||
text-align: center;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
border-radius: 44px;
|
||||
color: #FFF;
|
||||
background-color: #2D7DFF;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
background-color: #E5EFFF;
|
||||
color: #2D7DFF;
|
||||
margin-right: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user