Init project
This commit is contained in:
lifizer
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="page-v4">
|
||||
<image class="header-img img" :src="investmentTopImage" mode="widthFix"></image>
|
||||
|
||||
<view class="body flex flex-col flex-wrap jc-center ai-center">
|
||||
<view class="h1">{{ investmentTitle }}</view>
|
||||
<view class="red-box flex jc-center ai-center">
|
||||
<image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
|
||||
<view>目前已有
|
||||
<text>{{ total }}</text>
|
||||
人参加活动
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-box">
|
||||
<view class="title tc">申请资料填写</view>
|
||||
<text class="label">选择省市区</text>
|
||||
<view class="custom-input">
|
||||
<CitySelect ref="cityselect" :defaultValue="addressText" @callback="result" :items="district"/>
|
||||
</view>
|
||||
<text class="label">姓名</text>
|
||||
<input class="custom-input" type="text" :value="businessApply.realName" @input="inputKey($event,'realName')"/>
|
||||
<text class="label">电话</text>
|
||||
<input class="custom-input" type="number" :value="businessApply.phone" @input="inputKey($event,'phone')"/>
|
||||
<!-- <text class="label">身份证号码</text>-->
|
||||
<!-- <input class="custom-input" type="idcard" :value="businessApply.idcard" @input="inputKey($event,'idcard')"/>-->
|
||||
<button class="submit-btn" type="default" @click="sumbit">提交申请</button>
|
||||
|
||||
<image class="footer-img img" style="margin-top:30rpx" :src="investmentMainImage" mode="widthFix"
|
||||
@click="goList"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="people-box" v-if="businessApplyList.length">
|
||||
<view class="title tc">最新参与客户</view>
|
||||
<view class="list">
|
||||
<view class="item flex ai-center" :class="{'selected':index==1}" v-for="(item,index) in businessApplyList" :key="item" v-show="index<3">
|
||||
<view class="grid-1 flex ai-center">
|
||||
<image class="icon-horn" :src="webUrl+'/20220218225707839596.png'" mode="scaleToFill"></image>
|
||||
<text>{{ item.realName }}</text>
|
||||
</view>
|
||||
<view class="grid-2">{{ item.phone }}</view>
|
||||
<view>{{ item.disTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="footer-img img" :src="investmentBottomImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CitySelect from "@/components/CitySelect";
|
||||
import {getCity} from "@/api/user";
|
||||
import {getAttract, investment, saveAttract} from "@/api/shop.js";
|
||||
// import {
|
||||
// queryByType
|
||||
// } from "@/api/public";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CitySelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
district: [],
|
||||
address: {},
|
||||
addressText: "",
|
||||
total: 0,
|
||||
businessApply: {
|
||||
realName: "",
|
||||
phone: "",
|
||||
idcard: ""
|
||||
},
|
||||
businessApplyList: [],
|
||||
headerImg: null,
|
||||
footerImg: null,
|
||||
investmentTopImage: null,
|
||||
investmentMainImage: null,
|
||||
investmentBottomImage: null,
|
||||
investmentTitle: ""
|
||||
}
|
||||
},
|
||||
onLoad: function () {
|
||||
this.init()
|
||||
this.getCityList()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// queryByType("business_info").then(({data}) => {
|
||||
// data.map(item => {
|
||||
// switch (item.label) {
|
||||
// case "招商banner图上":
|
||||
// this.headerImg = item.value;
|
||||
// break;
|
||||
// case "招商banner图下":
|
||||
// this.footerImg = item.value;
|
||||
// break;
|
||||
// case "招商标题":
|
||||
// this.title = item.value;
|
||||
// break;
|
||||
// }
|
||||
// })
|
||||
// });
|
||||
|
||||
investment().then(({data}) => {
|
||||
this.investmentTitle = data.investmentTitle;
|
||||
this.investmentTopImage = data.investmentTopImage;
|
||||
this.investmentMainImage = data.investmentMainImage;
|
||||
this.investmentBottomImage = data.investmentBottomImage;
|
||||
});
|
||||
|
||||
getAttract().then(({data}) => {
|
||||
this.total = data.total
|
||||
this.businessApplyList = data.businessApplyList
|
||||
if (data.businessApply) {
|
||||
this.businessApply = data.businessApply
|
||||
this.address = {
|
||||
province: data.businessApply.provinceName || "",
|
||||
city: data.businessApply.cityName || "",
|
||||
district: data.businessApply.areaName || "",
|
||||
provinceId: data.businessApply.provinceId,
|
||||
cityId: data.businessApply.cityId,
|
||||
areaId: data.businessApply.areaId
|
||||
};
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
inputKey(e, key) {
|
||||
this.businessApply[key] = e.detail.value
|
||||
},
|
||||
|
||||
sumbit() {
|
||||
if (this.address.areaId) {
|
||||
this.businessApply.provinceId = this.address.provinceId
|
||||
this.businessApply.cityId = this.address.cityId
|
||||
this.businessApply.areaId = this.address.areaId
|
||||
this.businessApply.uid = uni.getStorageSync("uid")
|
||||
} else {
|
||||
this.$dialog.error("请选择你的地址")
|
||||
return
|
||||
}
|
||||
// || this.businessApply.idcard.length == 0
|
||||
if (this.businessApply.realName.length == 0 || this.businessApply.phone.length == 0) {
|
||||
this.$dialog.error("请完整填写后再提交申请")
|
||||
return
|
||||
}
|
||||
|
||||
saveAttract(this.businessApply).then(res => {
|
||||
this.$dialog.error(res.msg)
|
||||
}).catch(err => this.$dialog.error(err.msg))
|
||||
},
|
||||
|
||||
result(values) {
|
||||
this.address = {
|
||||
province: values.province.name || "",
|
||||
city: values.city.name || "",
|
||||
district: values.district.name || "",
|
||||
provinceId: values.province.id,
|
||||
cityId: values.city.id,
|
||||
areaId: values.district.id
|
||||
};
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
||||
},
|
||||
|
||||
getCityList: function () {
|
||||
let that = this;
|
||||
getCity()
|
||||
.then(res => {
|
||||
that.district = res.data;
|
||||
that.ready = true;
|
||||
|
||||
if (this.id) {
|
||||
//设置city_id
|
||||
var pIdx = that.getIndex(that.address.province, that.district);
|
||||
if (pIdx > -1) {
|
||||
var citys = that.district[pIdx].c;
|
||||
var cIdx = that.getIndex(that.address.city, citys);
|
||||
if (cIdx > -1) {
|
||||
var city = citys[cIdx];
|
||||
that.address.city_id = city.v;
|
||||
console.log('city_id:' + city.v);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
that.$dialog.error(err.msg);
|
||||
});
|
||||
},
|
||||
|
||||
goList() {
|
||||
uni.navigateTo({
|
||||
url: './projectList'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-v4 {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
.h1 {
|
||||
margin-top: 40rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
width: 480rpx;
|
||||
height: 60rpx;
|
||||
margin: 20rpx 0 28rpx;
|
||||
background: rgba(253, 104, 93, .15);
|
||||
border-radius: 32px;
|
||||
font-size: 24rpx;
|
||||
color: #FD685D;
|
||||
|
||||
text {
|
||||
margin: 0 4rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FF005E;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
opacity: 1;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: 620rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 28rpx 0 64rpx;
|
||||
padding: 36rpx 39rpx;
|
||||
border: 2rpx solid #D6808D;
|
||||
box-shadow: 3px 3px 0 #D6808D;
|
||||
opacity: 1;
|
||||
border-radius: 40rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid #E2E2E2;
|
||||
border-radius: 12rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 40rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FF005E;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
// .address {
|
||||
// text {
|
||||
// width: 100%;
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.people-box {
|
||||
width: 628rpx;
|
||||
height: 300rpx;
|
||||
background: rgba(253, 104, 93, 0.05);
|
||||
border-radius: 32rpx;
|
||||
margin-bottom: 58rpx;
|
||||
|
||||
.icon-horn {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 18rpx 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
color: #FF005E;
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
margin: 0 44rpx 4rpx;
|
||||
padding: 14rpx 30rpx;
|
||||
color: #FD685D;
|
||||
font-size: 24rpx;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: rgba(253, 104, 93, 0.2);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
width: 182rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="v4-project">
|
||||
<view class="top-box">
|
||||
<image :src="info.topImage"/>
|
||||
<view class="title tc bold">{{ info.name }}</view>
|
||||
</view>
|
||||
<view class="space"></view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="title">目录</view>
|
||||
<view class="item flex jc-between ai-center" v-for="(item,index) in info.contents" :key="index"
|
||||
@click="viewFile(item)">
|
||||
<view class="flex ai-center">
|
||||
<text class="index">{{ index + 1 }}</text>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
|
||||
<image class="icon" :src="webUrl+'/20220903145836941399.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {investmentInfo} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
name: "project",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
id: null,
|
||||
info: null
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
investmentInfo(this.id).then(({data}) => this.info = data);
|
||||
},
|
||||
|
||||
viewFile(item) {
|
||||
if (item.suffix === "pdf") {
|
||||
uni.downloadFile({
|
||||
url: item.attachment,
|
||||
success: res => {
|
||||
let filePath = res.tempFilePath;
|
||||
uni.openDocument({
|
||||
filePath
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.previewImage({
|
||||
urls: item.attachmentFiles
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.v4-project {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
|
||||
.top-box {
|
||||
color: #333;
|
||||
font-size: 36rpx;
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
height: 416rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 20rpx;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding: 30rpx 32rpx;
|
||||
|
||||
.title {
|
||||
width: 68rpx;
|
||||
height: 48rpx;
|
||||
padding-bottom: 8rpx;
|
||||
border-bottom: 6rpx solid #FD574B;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #FD574B;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 40rpx 0;
|
||||
border-bottom: 2rpx solid #CDCDCD;;
|
||||
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: 68rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="v4-project-list">
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="请输入项目名称"/>
|
||||
<view class="btn flex jc-center ai-center" @click="search">
|
||||
<image :src="webUrl+'/20221019150834639123.png'"/>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item flex jc-between ai-center" v-for="(item,index) in list" :key="index" @click="getDetail(item.id)">
|
||||
<view class="flex ai-center">
|
||||
<image class="cover" :src="item.coverImage"/>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
|
||||
<image class="icon" :src="webUrl+'/20220903145836941399.png'"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {investmentInfo, investmentList} from "@/api/shop";
|
||||
|
||||
export default {
|
||||
name: "projectList",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1, // 当前页
|
||||
keyword: "", // 搜索词
|
||||
pages: 0, // 总页数
|
||||
list: [],
|
||||
os: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOS();
|
||||
this.getData();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.pages >= this.page) this.getData();
|
||||
},
|
||||
methods: {
|
||||
getOS() {
|
||||
uni.getSystemInfo({
|
||||
success: result => this.os = result.osName
|
||||
})
|
||||
},
|
||||
|
||||
search() {
|
||||
this.list = [];
|
||||
this.page = 1;
|
||||
this.getData();
|
||||
},
|
||||
|
||||
getData() {
|
||||
investmentList(this.page, this.keyword).then(({data}) => {
|
||||
this.pages = data.pages;
|
||||
this.page++;
|
||||
if (data.records.length > 0) {
|
||||
data.records.map(item => {
|
||||
this.list.push(item);
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getDetail(id) {
|
||||
investmentInfo(id).then(({data}) => {
|
||||
const file = data.contents[0];
|
||||
if (file.suffix === "pdf" && this.os === "android") {
|
||||
this.viewPdf(file.attachmentFiles[0])
|
||||
} else {
|
||||
let path = file.attachmentFiles[0];
|
||||
uni.navigateTo({
|
||||
url: "/pkg_common/views/pdf?path=" + encodeURI(path)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
viewPdf(url) {
|
||||
uni.downloadFile({
|
||||
url,//可以是后台传过来的路径
|
||||
success: res => {
|
||||
const filePath = res.tempFilePath
|
||||
uni.openDocument({
|
||||
filePath,
|
||||
fileType: "pdf",
|
||||
success: result => {
|
||||
//成功
|
||||
},
|
||||
fail: err => {
|
||||
uni.showModal({
|
||||
title: "openDocument fail",
|
||||
content: JSON.stringify(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.showModal({
|
||||
title: "downloadFile fail",
|
||||
content: JSON.stringify(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.v4-project-list {
|
||||
.search-box {
|
||||
height: 80rpx;
|
||||
margin: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16rpx 0 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 128rpx;
|
||||
height: 54rpx;
|
||||
background: #FD574B;
|
||||
border-radius: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 160rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 40rpx 32rpx;
|
||||
padding: 0 16rpx 0 28rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 8rpx;
|
||||
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 88rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user