jianglong
3 years ago
5 changed files with 1170 additions and 0 deletions
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<view class="news-list"> |
|||
<view class="contain"> |
|||
<view class="banner"> |
|||
<ad-swipers :pid="33" height="340rpx"> |
|||
</ad-swipers> |
|||
</view> |
|||
<view class="news-details"> |
|||
<view class="header"> |
|||
<view class="title xxl m-b-20">{{ title }}</view> |
|||
</view> |
|||
<view class="main"> |
|||
<u-parse :html="article_content" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
mapGetters, |
|||
mapActions |
|||
} from 'vuex' |
|||
import { |
|||
getHelpDetail |
|||
} from '@/api/store'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
showLoading: true, |
|||
title: "", |
|||
article_content: "" |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.id = options.id; |
|||
if (this.id == 'documents') { |
|||
this.title = '证件办理' |
|||
uni.setNavigationBarTitle({ |
|||
title: '证件办理' |
|||
}); |
|||
}else if (this.id == 'train') { |
|||
this.title = '在线培训' |
|||
uni.setNavigationBarTitle({ |
|||
title: '在线培训' |
|||
}); |
|||
}else{ |
|||
this.title = '咨询我们' |
|||
uni.setNavigationBarTitle({ |
|||
title: '咨询我们' |
|||
}); |
|||
} |
|||
|
|||
this.getArticleDetailFun(); |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
getArticleDetailFun() { |
|||
getHelpDetail({ |
|||
id: this.id |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
setTimeout(() => { |
|||
this.article_content = res.data.content; |
|||
}, 200); |
|||
setTimeout(() => { |
|||
this.showLoading = false |
|||
}, 300); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.news-details .header{ |
|||
text-align: center; |
|||
padding: 20rpx 15px; |
|||
border-bottom: $-solid-border; |
|||
} |
|||
.news-details .main { |
|||
padding: 40rpx 15px; |
|||
} |
|||
.news-list { |
|||
.mainnav { |
|||
padding: 16rpx 150rpx; |
|||
background-color: $-color-white; |
|||
&--item { |
|||
width: 150rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
color: #BBBBBB; |
|||
transition: all .2s linear; |
|||
|
|||
.new { |
|||
width: 10rpx; |
|||
height: 10rpx; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
margin-bottom: 24rpx; |
|||
background-color: $-color-primary; |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
.article-list { |
|||
padding-top: 20rpx; |
|||
|
|||
.article-item { |
|||
padding: 20rpx; |
|||
align-items: flex-start; |
|||
&:not(:last-of-type){ |
|||
border-bottom: $-solid-border; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
page { |
|||
padding: 0; |
|||
} |
|||
.index-bg { |
|||
background-image: url('https://cdn.ahbcqz.com/uploads/images/202307051615359ddc37211.png'); |
|||
background-size: 100% auto; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.index { |
|||
min-height: calc(100vh - var(--window-bottom)); |
|||
|
|||
.u-navbar { |
|||
::v-deep .u-search { |
|||
padding: 0 30rpx; |
|||
} |
|||
} |
|||
|
|||
// 胶囊提示 |
|||
.capsule-tips { |
|||
width: 584rpx; |
|||
color: #FFFFFF; |
|||
padding: 12rpx 18rpx; |
|||
border-radius: 14rpx; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
position: relative; |
|||
position: absolute; |
|||
z-index: 9999; |
|||
bottom: -80rpx; |
|||
right: -150rpx; |
|||
} |
|||
.capsule-tips::after { |
|||
content: ''; |
|||
border-bottom: 14rpx solid rgba(0, 0, 0, 0.7); |
|||
border-right: 14rpx solid transparent; |
|||
border-left: 14rpx solid transparent; |
|||
position: absolute; |
|||
top: -14rpx; |
|||
right: 88rpx; |
|||
} |
|||
|
|||
.cate-btn { |
|||
padding: 12rpx 16rpx 12rpx 20rpx; |
|||
border-radius: 60rpx 0 0 60rpx; |
|||
background-color: rgba(256, 256, 256, .4); |
|||
} |
|||
} |
|||
.col-top { |
|||
position: relative; |
|||
.price { |
|||
position: absolute; |
|||
bottom:10rpx; |
|||
} |
|||
} |
|||
|
|||
.city { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
z-index: 999; |
|||
color: #fff; |
|||
padding: 10rpx 15rpx; |
|||
background: rgba(0,0,0,.3); |
|||
border-radius: 10rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,344 @@ |
|||
<template> |
|||
<view class="store-settled"> |
|||
<view class="content"> |
|||
<view class="apply-form bg-white"> |
|||
<!-- 联系人姓名 --> |
|||
<view class="apply-form-item"> |
|||
<u-field label="机构名称" v-model="form.name" label-width="160" placeholder="请输机构名称" required /> |
|||
</view> |
|||
<!-- 手机号码 --> |
|||
<view class="apply-form-item"> |
|||
<u-field label="联系方式" v-model="form.contact" label-width="160" placeholder="请输入联系方式" required /> |
|||
</view> |
|||
|
|||
<view class="apply-form-item"> |
|||
<view class="label" required>机构简介</view> |
|||
<view class="flex-1" style="background-color: #F8F8F8;"> |
|||
<u-input required v-model="form.intro" type="textarea" placeholder="请输入机构简介，300字以内" :border="false" |
|||
:height="160" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 手机号码 --> |
|||
<view class="apply-form-item"> |
|||
<u-field label="企业名称" v-model="form.company" label-width="160" placeholder="请输入企业名称" required /> |
|||
</view> |
|||
|
|||
<view @click="showRegion = true"> |
|||
<u-field v-model="region" :disabled="true" label-width="160" style="flex: 1;" label="所在地区" placeholder="请选择省、市" right-icon="arrow-right"> |
|||
</u-field> |
|||
</view> |
|||
|
|||
<!-- 问题截图 --> |
|||
<view class="apply-form-item"> |
|||
<u-field label="机构封面图" label-width="160" placeholder="请上传机构封面图" :border-bottom="false" |
|||
disabled /> |
|||
<view> |
|||
<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}" |
|||
:max-count="10" width="150" height="150" :action="action" upload-text="上传图片" |
|||
@on-success="onSuccess" @on-remove="onRemove" /> |
|||
</view> |
|||
<view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片</view> |
|||
</view> |
|||
|
|||
<!-- <view class="apply-form-item"> |
|||
<view class="label">内容</view> |
|||
<view class="flex-1" style="background-color: #F8F8F8;"> |
|||
<u-input v-model="content" type="textarea" placeholder="请输入机构详情" :border="false" |
|||
:height="160" /> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 提交申请 --> |
|||
<view style="padding: 30rpx 20rpx 30rpx 0;"> |
|||
<button type="primary" size="lg" class="br60" @tap="onSubmit">申请</button> |
|||
</view> |
|||
|
|||
<!-- 查阅记录 --> |
|||
<router-link to="/bundle/pages/user/organ_recode"> |
|||
<view class="flex row-center muted"> |
|||
<u-icon name="order" size="32" /> |
|||
<view class="m-l-10">查看申请记录</view> |
|||
</view> |
|||
</router-link> |
|||
</view> |
|||
</view> |
|||
<u-select v-model="showPop" mode="single-column" value-name="id" label-name="name" :list="shopCategory" |
|||
@confirm="confirmSelect"></u-select> |
|||
<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="lists"></u-select> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import area from '@/utils/area' |
|||
import { |
|||
organ, |
|||
organDetail |
|||
} from "@/api/user" |
|||
import { |
|||
baseURL |
|||
} from '@/config/app' |
|||
import { |
|||
sendSms |
|||
} from '@/api/app' |
|||
import { |
|||
SMSType |
|||
} from '@/utils/type' |
|||
export default { |
|||
data() { |
|||
return { |
|||
addressObj: { |
|||
province: '', |
|||
city: '', |
|||
district: '', |
|||
address: '', |
|||
is_default: false |
|||
}, |
|||
region: '', |
|||
addressId: '', |
|||
defaultRegion: ['安徽省', '合肥市'], |
|||
defaultRegionCode: '340100', |
|||
showRegion: false, |
|||
lists: [], |
|||
content:'', |
|||
// 表单数据 |
|||
form: { |
|||
id: '', |
|||
clabel: '', |
|||
name: '', |
|||
image: '', |
|||
content: '', |
|||
contact:'', |
|||
company:'', |
|||
intro:'', |
|||
}, |
|||
codeTips: '', |
|||
shopCategory: [], |
|||
showPop: false, |
|||
action: baseURL + '/api/file/formimage', |
|||
fileList: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.goLogin() |
|||
const options = this.$Route.query; |
|||
console.log("options.id",options.id) |
|||
if (options.id) { |
|||
this.form.id = options.id |
|||
this.initOrganDetail() |
|||
} |
|||
this.$nextTick(() => { |
|||
this.lists = area |
|||
console.log("地区:",area) |
|||
this.lists.forEach((item) => { |
|||
item.children.forEach((item2)=>{ |
|||
this.$delete(item2,"children") |
|||
}) |
|||
}) |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 初始化详情 |
|||
initOrganDetail() { |
|||
try { |
|||
console.log("this.form.id",this.form.id) |
|||
organDetail(this.form.id).then(res => { |
|||
if (res.code == 1) { |
|||
const { |
|||
id, |
|||
content, |
|||
name, |
|||
company, |
|||
intro, |
|||
contact, |
|||
image, |
|||
city_id, |
|||
province_id, |
|||
district_id, |
|||
address |
|||
} = res.data; |
|||
|
|||
this.addressObj.city_id= city_id; |
|||
this.addressObj.province_id= province_id; |
|||
this.region = `${address} ` |
|||
|
|||
this.form.id = id |
|||
this.form.content = content |
|||
this.form.name = name |
|||
this.form.company = company |
|||
this.form.intro = intro |
|||
this.form.contact = contact |
|||
this.form.image = image |
|||
} |
|||
}) |
|||
} catch (err) { |
|||
this.$nextTick(() => { |
|||
this.isFirstLoading = false; |
|||
}); |
|||
} |
|||
}, |
|||
goLogin() { |
|||
let { |
|||
isLogin |
|||
} = this; |
|||
if (isLogin) { |
|||
return; |
|||
} |
|||
uni.redirectTo({ |
|||
url: '/pages/login/login' |
|||
}); |
|||
}, |
|||
|
|||
async getComplainCategoryFun() { |
|||
const { |
|||
code, |
|||
data |
|||
} = await getComplainCategory() |
|||
if (code == 1) { |
|||
this.shopCategory = data.lists |
|||
this.form.cid = this.shopCategory[0].id |
|||
this.form.clabel = this.shopCategory[0].name |
|||
} |
|||
}, |
|||
// 提交表单 |
|||
async onSubmit() { |
|||
const { |
|||
form, |
|||
fileList |
|||
} = this |
|||
const submitObj = { |
|||
...form, |
|||
image: fileList[0], |
|||
content:this.content |
|||
} |
|||
console.log("表单内容",submitObj) |
|||
let { |
|||
addressObj: { |
|||
contact, |
|||
province_id, |
|||
city_id, |
|||
district_id, |
|||
is_default, |
|||
address |
|||
}, |
|||
addressId, |
|||
region, |
|||
} = this; |
|||
submitObj.province_id = parseInt(province_id) |
|||
submitObj.city_id = parseInt(city_id) |
|||
|
|||
if (!submitObj.name || submitObj.name == ""){ |
|||
return this.$toast({ |
|||
title: '请输入机构名称', |
|||
}); |
|||
} |
|||
if (!submitObj.company || submitObj.company == ""){ |
|||
return this.$toast({ |
|||
title: '请输入企业名称', |
|||
}); |
|||
} |
|||
|
|||
if (!submitObj.contact || submitObj.contact == ""){ |
|||
return this.$toast({ |
|||
title: '请输入联系方式', |
|||
}); |
|||
} |
|||
if (!submitObj.intro || submitObj.intro == ""){ |
|||
return this.$toast({ |
|||
title: '请输入简介内容', |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
delete submitObj.clabel |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await organ(submitObj) |
|||
|
|||
if(code == 1) { |
|||
this.$toast({ |
|||
title: msg |
|||
}) |
|||
setTimeout(() => { |
|||
this.$Router.replace({ |
|||
path: '/bundle/pages/user/organ_recode', |
|||
query: { |
|||
id: data.id |
|||
} |
|||
}) |
|||
},1000) |
|||
} |
|||
}, |
|||
confirmSelect(e) { |
|||
const { |
|||
value, |
|||
label |
|||
} = e[0] |
|||
this.form.cid = value |
|||
this.form.clabel = label |
|||
}, |
|||
onSuccess(e) { |
|||
this.fileList.push(e.data.base_uri) |
|||
}, |
|||
onRemove(index) { |
|||
this.fileList.splice(index, 1) |
|||
console.log(index) |
|||
}, |
|||
regionChange(region) { |
|||
console.log(region) |
|||
this.addressObj.province_id = region[0].value; |
|||
this.addressObj.city_id = region[1].value; |
|||
// this.addressObj.district_id = region[2].value; + " " + region[2].label |
|||
this.region = region[0].label + " " + region[1].label |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.store-settled { |
|||
background-color: #FA844C; |
|||
min-height: 100vh; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% auto; |
|||
overflow: hidden; |
|||
|
|||
.content { |
|||
margin-top: 60rpx; |
|||
padding: 0 20rpx 31rpx; |
|||
|
|||
.apply-form { |
|||
border-radius: 8px; |
|||
padding: 20rpx 0 30rpx 26rpx; |
|||
|
|||
.apply-form-item { |
|||
.send-code-btn { |
|||
height: 56rpx; |
|||
width: 188rpx; |
|||
border: 1rpx solid $-color-primary; |
|||
} |
|||
} |
|||
|
|||
.primary-btn { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background-color: $-color-primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// .pop-categories { |
|||
// .reason-item { |
|||
// padding: 24rpx 20rpx; |
|||
|
|||
// .reason-desc { |
|||
// line-height: 46rpx; |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" |
|||
:up="upOption"> |
|||
<view class="settled-recode"> |
|||
<view class="settled-list"> |
|||
<router-link v-for="(item, index) in list" :key="index" :to="{path: '/bundle/pages/user/organ_result', query: {id: item.id}}"> |
|||
<view class="settled-item bg-white m-t-20"> |
|||
<!-- Title --> |
|||
<view class="settled-title md bold">{{item.name}}[{{item.company}}]</view> |
|||
<view class="settled-info"> |
|||
<!-- Time --> |
|||
<view class="sm muted m-t-26"> |
|||
提交时间：{{item.create_time}} |
|||
</view> |
|||
<!-- Status --> |
|||
<view class="flex row-between m-t-20"> |
|||
<view class="muted sm" style="align-self: flex-end;"> |
|||
<text>处理状态：</text> |
|||
<text :class="{primary: item.audit_status == 1 }">{{item.audit_status==1?'已通过':(item.audit_status==0?'未处理':'未通过')}}</text> |
|||
</view> |
|||
<view class="watch-btn br60 flex row-center" @tap="onShowDetail">查看</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</router-link> |
|||
</view> |
|||
</view> |
|||
</mescroll-body> |
|||
</template> |
|||
|
|||
<script> |
|||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins"; |
|||
import { |
|||
organRecord |
|||
} from '@/api/user' |
|||
export default { |
|||
mixins: [MescrollMixin], |
|||
data() { |
|||
return { |
|||
upOption: { |
|||
empty: { |
|||
icon: '/static/images/order_null.png', |
|||
tip: "暂无记录", |
|||
} |
|||
}, |
|||
list: [] |
|||
}; |
|||
}, |
|||
methods: { |
|||
upCallback(page) { |
|||
organRecord({ |
|||
page_size: page.size, |
|||
page_no: page.num |
|||
}).then(({ |
|||
data |
|||
}) => { |
|||
if (page.num == 1) this.list = []; |
|||
let curPageData = data.lists; |
|||
let curPageLen = curPageData.length; |
|||
this.list = this.list.concat(curPageData); |
|||
let hasNext = !!data.more; |
|||
this.mescroll.endSuccess(curPageLen, hasNext); |
|||
}).catch(() => { |
|||
this.mescroll.endErr() |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.settled-recode { |
|||
|
|||
.settled-list { |
|||
padding: 20rpx; |
|||
|
|||
.settled-item { |
|||
border-radius: 10rpx; |
|||
padding: 20rpx 30rpx 30rpx; |
|||
|
|||
.settled-title { |
|||
padding: 21rpx 0 25rpx; |
|||
border-bottom: $-solid-border; |
|||
} |
|||
|
|||
.settled-info { |
|||
|
|||
.watch-btn { |
|||
border: $-solid-border; |
|||
height: 52rpx; |
|||
width: 124rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,191 @@ |
|||
<template > |
|||
<view class="settled-result" > |
|||
<view class="result-box"> |
|||
<!-- Header --> |
|||
<view class="result-header bg-white flex-col col-center"> |
|||
<u-image width="165rpx" height="165rpx" class="m-t-42" :src="getStatus.img" /> |
|||
<view class="m-t-32 lg bold">{{getStatus.text}}</view> |
|||
<view> |
|||
<view class="m-t-20 muted sm text-center">{{getStatus.desc}}</view> |
|||
<view class="flex" v-if="applyDetail.audit_status !=2"> |
|||
|
|||
<router-link class="flex-1" :to="{path: '/bundle/pages/user/organ', query: {id: applyDetail.id}}" > |
|||
<view class="br60 flex row-center back-btn m-t-60 md">重新编辑</view> |
|||
</router-link> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<!-- Content --> |
|||
<view class="result-content bg-white m-t-20 p-20"> |
|||
|
|||
<!-- 主营行业 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>机构名称</view> |
|||
<view>{{applyDetail.name}}</view> |
|||
</view> |
|||
|
|||
<!-- 主营行业 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>公司名称</view> |
|||
<view>{{applyDetail.company}}</view> |
|||
</view> |
|||
|
|||
<!-- 主营行业 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>联系方式</view> |
|||
<view>{{applyDetail.contact}}</view> |
|||
</view> |
|||
<!-- 主营行业 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>所在地区</view> |
|||
<view>{{applyDetail.address}}</view> |
|||
</view> |
|||
|
|||
<!-- 图片 --> |
|||
<view class="apply-form-item"> |
|||
<view><text class="primary m-r-10"></text>封面图</view> |
|||
<view class="license-list flex m-t-10 flex-wrap"> |
|||
<view v-for="(item,index) in license" class="m-r-14 m-t-20" @tap="previewImage(index)" |
|||
:key="index"> |
|||
<u-image width="152rpx" height="152rpx" :src="item" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 主营行业 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>机构简介</view> |
|||
<view>{{applyDetail.intro}}</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 处理结果 --> |
|||
<view class="apply-form-item flex row-between"> |
|||
<view><text class="primary m-r-10"></text>处理结果</view> |
|||
<view>{{applyDetail.remark?applyDetail.audit_remark:'--'}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { |
|||
organDetail |
|||
} from '@/api/user' |
|||
import {copy} from '@/utils/tools' |
|||
export default { |
|||
data() { |
|||
return { |
|||
applyDetail: {}, |
|||
license: [] |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
async organDetail() { |
|||
const { |
|||
data, |
|||
code |
|||
} = await organDetail(this.id) |
|||
if (code == 1) { |
|||
this.applyDetail = data |
|||
this.license = [data.image] |
|||
} |
|||
}, |
|||
previewImage(current) { |
|||
uni.previewImage({ |
|||
current, |
|||
urls: this.license |
|||
}) |
|||
}, |
|||
onCopy(text) { |
|||
copy(text) |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.id = this.$Route.query.id |
|||
this.organDetail() |
|||
}, |
|||
computed: { |
|||
getStatus() { |
|||
const { |
|||
applyDetail: { |
|||
audit_status |
|||
} |
|||
} = this |
|||
switch (audit_status) { |
|||
case 0: |
|||
return { |
|||
img: '/static/images/img_store_submit.png', |
|||
text: '已提交等待处理！', |
|||
desc: '工作人员将会电话联系您，请注意接听！' |
|||
} |
|||
case 1: |
|||
return { |
|||
img: '/static/images/img_store_success.png', |
|||
text: '工作人员已处理！', |
|||
desc: '请查看处理结果' |
|||
} |
|||
case 2: |
|||
return { |
|||
img: '/static/images/img_store_fail.png', |
|||
text: '工作人员已拒绝！', |
|||
desc: '请重新提交申请' |
|||
} |
|||
default: |
|||
return {} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
overflow: scroll !important; |
|||
} |
|||
.settled-result { |
|||
padding: 20rpx; |
|||
|
|||
.result-box { |
|||
.result-header { |
|||
padding: 0 75rpx 50rpx; |
|||
border-radius: 10rpx; |
|||
|
|||
.btn-copy { |
|||
width: 96rpx; |
|||
height: 42rpx; |
|||
line-height: 42rpx; |
|||
border: $-solid-border; |
|||
} |
|||
} |
|||
|
|||
.back-btn { |
|||
height: 88rpx; |
|||
border: 1px solid #CCC; |
|||
&.primary { |
|||
border-color: $-color-primary; |
|||
color: $-color-primary; |
|||
} |
|||
} |
|||
|
|||
.result-content { |
|||
border-radius: 10rpx; |
|||
|
|||
.apply-form-item { |
|||
padding: 30rpx 0; |
|||
|
|||
&:not(:last-of-type) { |
|||
border-bottom: $-solid-border; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,340 @@ |
|||
<template> |
|||
<view class="goods-search flex-col news-list"> |
|||
<view class="header-wrap"> |
|||
<view class="search"> |
|||
<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch" |
|||
bg-color="#F4F4F4"></u-search> |
|||
</view> |
|||
</view> |
|||
<view v-show="showHistory" class="search-content bg-white"> |
|||
<scroll-view :scroll-y="true" style="height: 100%"> |
|||
<view v-if="hotList.length" class="search-words"> |
|||
<view class="title">热门搜索</view> |
|||
<view class="words flex flex-wrap"> |
|||
<view v-for="(item, index) in hotList" :key="index" |
|||
class="item br60 m-r-20 m-b-20 lighter sm line-1" @tap="onChangeKeyword(item)">{{item}}</view> |
|||
</view> |
|||
</view> |
|||
<view v-if="historyList.length" class="search-words"> |
|||
<view class="title flex row-between"> |
|||
<view>历史搜索</view> |
|||
<view class="xs muted m-r-20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view> |
|||
</view> |
|||
<view class="words flex flex-wrap"> |
|||
<view v-for="(item, index) in historyList" :key="index" |
|||
class="item br60 m-r-20 m-b-20 lighter sm line-1" @tap="onChangeKeyword(item)">{{item}}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="main"> |
|||
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" |
|||
:up="upOption" :down="{auto: true}" :fixed="false"> |
|||
<view class="article-list"> |
|||
<view class="article-item bg-white" v-for="(item, index) in newsList" :key="index" > |
|||
<router-link :to="{path: '/bundle/pages/resource_details/resource_details', query: {id: item.id, type}}"> |
|||
<view class="flex col-top"> |
|||
<view class="info flex-1"> |
|||
<view class="title lg line-2 m-b-20">{{ item.title }}</view> |
|||
<view class="lighter line-2"> |
|||
<view>{{ item.intro }}</view> |
|||
</view> |
|||
<view class="flex row-between price"> |
|||
<view class="xs muted">价格: <text style="color: red;">{{item.price_str}}</text></view> |
|||
</view> |
|||
</view> |
|||
<u-image width="240rpx" height="180rpx" class="img m-l-20" :src="item.image" /> |
|||
</view> |
|||
|
|||
<view class="flex row-between m-t-20"> |
|||
<view class="xs muted">发布时间: {{item.create_time}}</view> |
|||
<view class="flex"> |
|||
<image class="icon-sm" src="/static/images/icon_see.png"></image> |
|||
<view class="m-l-10 xs muted">{{ item.visit }}人浏览</view> |
|||
</view> |
|||
</view> |
|||
</router-link> |
|||
</view> |
|||
</view> |
|||
</mescroll-uni> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getResourceList |
|||
} from '@/api/store'; |
|||
import { |
|||
mapGetters |
|||
} from 'vuex'; |
|||
import { |
|||
loadingType |
|||
} from '@/utils/type'; |
|||
import { |
|||
getRect, |
|||
trottle |
|||
} from '@/utils/tools'; |
|||
|
|||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins"; |
|||
export default { |
|||
mixins: [MescrollMixin], |
|||
data() { |
|||
return { |
|||
upOption: { |
|||
auto: false, |
|||
empty: { |
|||
icon: '/static/images/goods_null.png', |
|||
tip: "暂无资料", |
|||
} |
|||
}, |
|||
keyword: '', |
|||
status: loadingType.LOADING, |
|||
page: 1, |
|||
sortConfig: { |
|||
goodsType: 'one', |
|||
priceSort: '', |
|||
saleSort: '', |
|||
}, |
|||
goodsList: [], |
|||
showHistory: false, |
|||
hotList: [], |
|||
historyList: [], |
|||
newsList:[] |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
// 监听属性 |
|||
keyword(value, old) { |
|||
if (!value && !this.id) { |
|||
this.showHistory = true |
|||
} |
|||
}, |
|||
showHistory(value) { |
|||
if (value) { |
|||
this.getSearchpageFun(); |
|||
} |
|||
}, |
|||
'sortConfig.saleSort'() { |
|||
this.onSearch() |
|||
}, |
|||
'sortConfig.priceSort'() { |
|||
this.onSearch() |
|||
} |
|||
|
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.onSearch = trottle(this.onSearch, 500, this); |
|||
this.init(options); |
|||
|
|||
}, |
|||
|
|||
computed: { |
|||
...mapGetters(['sysInfo']) |
|||
}, |
|||
methods: { |
|||
downCallback() { |
|||
this.onRefresh() |
|||
}, |
|||
upCallback(page) { |
|||
let pageNum = page.num; // 页码, 默认从1开始 |
|||
let pageSize = page.size; // 页长, 默认每页10条 |
|||
let { |
|||
goodsList, |
|||
keyword, |
|||
sortConfig: { |
|||
priceSort, |
|||
saleSort, |
|||
} |
|||
} = this; |
|||
|
|||
const params = { |
|||
page_size: pageSize, |
|||
page_no: pageNum, |
|||
keyword |
|||
} |
|||
getResourceList(params).then(({ |
|||
data |
|||
}) => { |
|||
if(this.keyword != ""){ |
|||
this.historyList.forEach((item, index) => { |
|||
if(item == this.keyword){ |
|||
this.historyList.splice(index, 1) |
|||
} |
|||
}) |
|||
this.historyList.unshift(this.keyword) |
|||
uni.setStorageSync('history', this.historyList) |
|||
console.log("历史列表",this.historyList) |
|||
} |
|||
|
|||
if (page.num == 1) this.newsList = []; |
|||
let curPageData = data.list; |
|||
let curPageLen = curPageData.length; |
|||
let hasNext = !!data.more; |
|||
this.newsList = this.newsList.concat(curPageData); |
|||
this.mescroll.endSuccess(curPageLen, hasNext); |
|||
|
|||
}).catch(() => { |
|||
this.mescroll.endErr() |
|||
}) |
|||
}, |
|||
|
|||
onChange(e) { |
|||
this.keyword = e.value |
|||
}, |
|||
|
|||
|
|||
clearSearchFun() { |
|||
uni.removeStorageSync("history") |
|||
this.historyList = [] |
|||
}, |
|||
|
|||
|
|||
|
|||
init(option) { |
|||
const { |
|||
id, |
|||
name, |
|||
type |
|||
} = this.$Route.query |
|||
this.type = type |
|||
if (id) { |
|||
uni.setNavigationBarTitle({ |
|||
title: name |
|||
}); |
|||
this.id = id; |
|||
this.$nextTick(() => { |
|||
this.onRefresh() |
|||
}) |
|||
} else { |
|||
uni.setNavigationBarTitle({ |
|||
title: '资料搜索' |
|||
}); |
|||
this.showHistory = true |
|||
|
|||
} |
|||
}, |
|||
|
|||
getSearchpageFun() { |
|||
this.historyList = uni.getStorageSync('history') || [] |
|||
}, |
|||
|
|||
onClear() { |
|||
if (this.id) { |
|||
this.onRefresh(); |
|||
} |
|||
}, |
|||
onSearch() { |
|||
this.showHistory = false |
|||
this.$nextTick(() => { |
|||
this.onRefresh() |
|||
}) |
|||
}, |
|||
onRefresh() { |
|||
this.goodsList = [] |
|||
this.mescroll.resetUpScroll(); |
|||
}, |
|||
|
|||
onChangeKeyword(item) { |
|||
this.keyword = item |
|||
this.showHistory = false |
|||
this.onRefresh(); |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.news-list { |
|||
.mainnav { |
|||
padding: 16rpx 150rpx; |
|||
background-color: $-color-white; |
|||
&--item { |
|||
width: 150rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
color: #BBBBBB; |
|||
transition: all .2s linear; |
|||
|
|||
.new { |
|||
width: 10rpx; |
|||
height: 10rpx; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
margin-bottom: 24rpx; |
|||
background-color: $-color-primary; |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
.article-list { |
|||
padding-top: 20rpx; |
|||
|
|||
.article-item { |
|||
padding: 20rpx; |
|||
align-items: flex-start; |
|||
&:not(:last-of-type){ |
|||
border-bottom: $-solid-border; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
page { |
|||
height: 100%; |
|||
padding: 0; |
|||
} |
|||
.goods-search { |
|||
height: 100%; |
|||
position: relative; |
|||
.header-wrap { |
|||
position: relative; |
|||
z-index: 999; |
|||
.search { |
|||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03); |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
.search-content { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 100rpx; |
|||
z-index: 100; |
|||
.search-words { |
|||
padding-left: 24rpx; |
|||
padding-bottom: 20rpx; |
|||
|
|||
.title { |
|||
padding: 26rpx 0; |
|||
} |
|||
|
|||
.words { |
|||
.item { |
|||
line-height: 52rpx; |
|||
height: 52rpx; |
|||
padding: 0 24rpx; |
|||
background-color: #F5F5F5; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
min-height: 0; |
|||
|
|||
.goods-list { |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue