daoji_h5/user/pages/article.vue

221 lines
4.9 KiB
Vue

<template>
<view class="user-pages-article" v-if="isLoad">
<view class="pd-lg f-paragraph fill-base">
<parser :html="detail.text" @linkpress="linkpress" show-with-animation lazy-load>加载中...
</parser>
</view>
<block v-if="detail.is_form">
<view class="form-info mt-lg ml-md mr-md pd-lg fill-base radius-20">
<view class="mt-md mb-lg" v-for="(item,index) in detail.field" :key="index">
<view class="item-text flex-y-center"><i class="iconfont icon-required"
:class="[{'c-warning':item.is_required},{'c-base':!item.is_required}]"></i>{{item.title}}
</view>
<input v-model="item.field_value" type="text" class="item-input mt-md pd-lg radius-16"
:placeholder="`请输入${item.title}`" />
</view>
</view>
<fix-bottom-button @confirm="submit" :text="[{text:'提交',type:'confirm',isAuth:true}]" bgColor="#fff">
</fix-bottom-button>
</block>
<view :class="[{'space-footer':!detail.is_form},{'space-max-footer':detail.is_form}]"></view>
</view>
</template>
<script>
import {
mapState,
mapActions,
mapMutations
} from "vuex"
import parser from "@/components/jyf-Parser/index"
export default {
components: {
parser
},
data() {
return {
options: {},
isLoad: false,
detail: {},
pageLen: 1
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
userInfo: state => state.user.userInfo,
loginPage: state => state.user.loginPage,
}),
onLoad(options) {
this.options = options
this.$util.showLoading()
this.initIndex()
},
methods: {
...mapActions(['getConfigInfo', 'getUserInfo']),
...mapMutations(['updateUserItem']),
async initIndex(refresh = false) {
let {
id
} = this.options
let data = await this.$api.service.articleInfo({
id
})
if (data.is_form) {
data.field.map(aitem => {
aitem.field_value = ''
})
}
console.log("测试及一些",data);
this.detail = data
uni.setNavigationBarTitle({
title: data.title
})
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
this.$util.hideAll()
this.isLoad = true
this.pageLen = getCurrentPages().length
},
initRefresh() {
this.initIndex(true)
},
linkpress(res) {
// #ifdef APP-PLUS
this.$util.goUrl({
url: res.href,
openType: 'web'
})
// #endif
},
async submit() {
let {
id: uid = 0,
phone = ''
} = this.userInfo
let {
loginType
} = this
let {
short_code_status
} = this.configInfo
if (!uid || (loginType === 'weixin' && short_code_status && !phone)) {
let {
id,
type
} = this.options
this.updateUserItem({
key: 'loginPage',
val: `/user/pages/article?id=${id}`
})
this.$util.goUrl({
url: `/pages/login`
})
return
}
let {
is_form,
field
} = this.detail
if (is_form == 1) {
field = this.$util.deepCopy(field)
let isTel = /^(1[0-9]{10})$/
for (let key in field) {
let index = key * 1 + 1
let {
is_required,
field_value,
field_type,
title
} = field[key]
if (field_type === 1) {
field_value = field_value ? field_value.replace(/(^\s*)|(\s*$)/g, "") : field_value
}
if ((is_required && !field_value) || (field_type === 2 && (is_required || field_value) &&
!isTel.test(field_value))) {
this.$util.showToast({
title: field_type === 2 && field_value && !isTel.test(field_value) ?
`${field_value} ${title}无效` : `请输入${title}`
})
return
}
}
}
let {
id: article_id
} = this.options
let sub_data = this.detail.field.map(item => {
return {
field_id: item.field_id,
field_type: item.field_type,
key: item.title,
value: item.field_value
}
})
let arr = sub_data.filter(item => {
return item.value
})
if (arr.length === 0) {
this.$util.showToast({
title: `至少填写一项哦`
})
return
}
if (this.lockTap) return
this.lockTap = true
this.$util.showLoading()
try {
await this.$api.service.subArticleForm({
article_id,
sub_data
})
this.lockTap = false
this.$util.hideAll()
this.$util.showToast({
title: `提交成功`
})
setTimeout(() => {
let {
pageLen
} = this
let url = pageLen > 1 ? 1 : `/pages/service`
let openType = pageLen > 1 ? `navigateBack` : `reLaunch`
this.$util.goUrl({
url,
openType
})
}, 2000)
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
}
}
}
}
</script>
<style lang="scss">
.user-pages-info {
.form-info {
.item-input {
color: #333;
background: #F7F8FA;
}
}
}
</style>