小程序产品库完成
This commit is contained in:
aixianling
216
src/mods/AppMarFuneral/AppMarFuneral.vue
Normal file
216
src/mods/AppMarFuneral/AppMarFuneral.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="wrapper padding" v-if="pageShow">
|
||||
<template v-if="list.length">
|
||||
<header>
|
||||
<span>婚丧嫁娶列表</span>
|
||||
<div class="total">
|
||||
共<em>{{ list.length }}</em>条
|
||||
</div>
|
||||
</header>
|
||||
<div class="card" v-for="item in list" :key="item.id">
|
||||
<div class="item">
|
||||
<span class="label">事主姓名</span>
|
||||
<span class="value">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式</span>
|
||||
<span class="value">{{ item.phone }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">上报时间</span>
|
||||
<span class="value">{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">上报地点</span>
|
||||
<span class="value">{{ item.address }}</span>
|
||||
</div>
|
||||
<div class="item" v-if="item.content.trim().length">
|
||||
<span class="label">上报内容</span>
|
||||
<span class="value">{{ item.content || '' }}</span>
|
||||
</div>
|
||||
<div class="tag" :style="{backgroundColor:$dict.getColor('marriageType',item.type)}">
|
||||
{{ $dict.getLabel('marriageType', item.type) }}
|
||||
</div>
|
||||
<u-icon name="more-dot-fill" size="28" color="#999999" :custom-style="customStyle" @click="handleDel(item)"
|
||||
v-if="item.openId == userInfo.openId"></u-icon>
|
||||
</div>
|
||||
</template>
|
||||
<AiEmpty v-else/>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="suport" hover-class="text-hover">我要上报</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AppMarFuneral",
|
||||
appName: "婚丧嫁娶",
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
pageShow: false,
|
||||
list: [],
|
||||
userInfo: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customStyle() {
|
||||
return {
|
||||
position: "absolute",
|
||||
top: "16px",
|
||||
right: "24px",
|
||||
transform: "rotate(90deg)"
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.$loading()
|
||||
this.userInfo = uni.getStorageSync("userInfo");
|
||||
|
||||
this.$dict.load("marriageType").then(() => {
|
||||
this.getList()
|
||||
})
|
||||
|
||||
uni.$on('update', () => {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDel({id}) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定要删除？",
|
||||
success: ret => {
|
||||
if (ret.confirm) {
|
||||
this.$instance.post("/app/appmarriagefuneralinfo/delete", null, {
|
||||
params: {ids: id}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("删除成功");
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.$instance.post("/app/appmarriagefuneralinfo/list", null, {
|
||||
params: {
|
||||
current: this.current,
|
||||
size: 10,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
}
|
||||
|
||||
this.$hideLoading()
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
suport() {
|
||||
uni.navigateTo({
|
||||
url: "./marAdd"
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.current++;
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.padding {
|
||||
box-sizing: border-box;
|
||||
padding: 48px 32px 156px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 44px;
|
||||
|
||||
& > span {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.total {
|
||||
margin-left: auto;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
color: #4181FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 308px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.label {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 32px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
background: #FF883C;
|
||||
border-radius: 8px;
|
||||
font-size: 26px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
175
src/mods/AppMarFuneral/marAdd.vue
Normal file
175
src/mods/AppMarFuneral/marAdd.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<em>*</em>
|
||||
<label>类型</label>
|
||||
<div class="right" @click="show=true">
|
||||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||||
<span class="value" style="color: #999999;font-weight:normal;" v-if="!form.typeName">请选择</span>
|
||||
<span class="value" style="color: #333333;font-weight:normal;" v-else>{{ form.typeName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form border">
|
||||
<em>*</em>
|
||||
<label>事主姓名</label>
|
||||
<div class="right">
|
||||
<u-input trim placeholder="请输入" input-align="right" v-model="form.name"
|
||||
placeholder-style="color:#999;font-size: 16px;"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form border">
|
||||
<em>*</em>
|
||||
<label>联系方式</label>
|
||||
<div class="right">
|
||||
<u-input trim placeholder="请输入" input-align="right" v-model="form.phone"
|
||||
placeholder-style="color:#999;font-size: 16px;"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<em>*</em>
|
||||
<label>活动地点</label>
|
||||
<div class="right">
|
||||
<u-input trim placeholder="请输入" input-align="right" v-model="form.address"
|
||||
placeholder-style="color:#999;font-size: 16px;" style="flex: 1;margin-left: 16px;"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<em></em>
|
||||
<label>详细描述</label>
|
||||
</div>
|
||||
<u-input type="textarea" trim v-model="form.content" placeholder="请输入详细描述信息…" maxlength="500"
|
||||
placeholder-style="color: #999999;font-size: 15px;"/>
|
||||
</div>
|
||||
<div class="card" style="padding-bottom: 20px">
|
||||
<div class="form">
|
||||
<label>图片上传
|
||||
<span>(最多9张)</span>
|
||||
</label>
|
||||
</div>
|
||||
<AiUploader :limit="9" v-model="form.files"></AiUploader>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="submit" hover-class="text-hover">提交</div>
|
||||
</div>
|
||||
<u-select v-model="show" :list="$dict.getDict('marriageType')" value-name="dictValue"
|
||||
label-name="dictName" @confirm="confirm"></u-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiUploader from '../../components/AiUploader/AiUploader'
|
||||
|
||||
export default {
|
||||
name: "marAdd",
|
||||
components: {AiUploader},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
type: "",
|
||||
typeName: "",
|
||||
name: "",
|
||||
phone: "",
|
||||
address: "",
|
||||
content: "",
|
||||
personType: 0,
|
||||
files: [],
|
||||
},
|
||||
show: false,
|
||||
flag: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (!!!this.form.typeName) return this.$u.toast("请选择类型");
|
||||
if (!!!this.form.name) return this.$u.toast("请输入事主姓名");
|
||||
if (!!!this.form.phone) return this.$u.toast("请输入联系方式");
|
||||
if (!!!this.form.address) return this.$u.toast("请输入活动地点");
|
||||
if (this.flag) return
|
||||
this.flag = true
|
||||
this.$loading()
|
||||
this.$instance.post("/app/appmarriagefuneralinfo/addOrUpdate", {
|
||||
...this.form
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
this.flag = false
|
||||
if (res.code == 0) {
|
||||
uni.$emit('update')
|
||||
this.$u.toast("提交成功");
|
||||
setTimeout(_ => {
|
||||
uni.navigateBack();
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(val) {
|
||||
this.form.type = val[0].value;
|
||||
this.form.typeName = val[0].label;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
padding-bottom: 156px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.form {
|
||||
height: 112px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
width: 16px;
|
||||
height: 44px;
|
||||
font-weight: 400;
|
||||
color: #FF4466;
|
||||
line-height: 54px;
|
||||
font-style: normal;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& > label {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
|
||||
& > span {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 32px;
|
||||
|
||||
.value {
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user