创意需求发布
This commit is contained in:
”chenxuelian“
120
components/cityPicker/cityPicker.vue
Normal file
120
components/cityPicker/cityPicker.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
|
||||
@cancel="cancel"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cityData } from '@/utills/city.js'
|
||||
export default {
|
||||
name: "cityPicker",
|
||||
props: {
|
||||
showPicker: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityData,
|
||||
//显示选择器
|
||||
show: false,
|
||||
// 打开选择器显示默认城市
|
||||
cityList: [],
|
||||
cityLevel1: [],
|
||||
cityLevel2: [],
|
||||
cityLevel3: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showPicker: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
this.show = this.showPicker
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
show: {
|
||||
handler(val) {
|
||||
if(val) {
|
||||
this.cityList = [],
|
||||
this.cityLevel1 = [],
|
||||
this.cityLevel2 = [],
|
||||
this.cityLevel3 = []
|
||||
this.initCityData();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 城市选择器初始化
|
||||
this.initCityData();
|
||||
},
|
||||
methods: {
|
||||
initCityData() {
|
||||
// 遍历城市js
|
||||
this.cityData.forEach((item1, index1) => {
|
||||
let temp2 = [];
|
||||
this.cityLevel1.push(item1.provinceName);
|
||||
|
||||
let temp4 = [];
|
||||
let temp3 = [];
|
||||
// 遍历市
|
||||
item1.cities.forEach((item2, index2) => {
|
||||
temp2.push(item2.cityName);
|
||||
// 遍历区
|
||||
item2.counties.forEach((item3, index3) => {
|
||||
temp3.push(item3.countyName);
|
||||
})
|
||||
temp4[index2] = temp3;
|
||||
temp3 = [];
|
||||
})
|
||||
this.cityLevel3[index1] = temp4;
|
||||
|
||||
this.cityLevel2[index1] = temp2;
|
||||
})
|
||||
// 选择器默认城市
|
||||
this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
|
||||
},
|
||||
// 选中时执行
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
index,
|
||||
indexs,
|
||||
value,
|
||||
values,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker
|
||||
} = e;
|
||||
if (columnIndex === 0) { // 选择第一列数据时
|
||||
// 设置第二列关联数据
|
||||
picker.setColumnValues(1, this.cityLevel2[index]);
|
||||
// 设置第三列关联数据
|
||||
picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
|
||||
} else if (columnIndex === 1) { // 选择第二列数据时
|
||||
// 设置第三列关联数据
|
||||
picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
|
||||
}
|
||||
},
|
||||
// 单击确认按钮时执行
|
||||
confirm(e) {
|
||||
// 输出数组 [省, 市, 区]
|
||||
console.log(e.value);
|
||||
this.$emit('confirm', e.value)
|
||||
// 隐藏城市选择器
|
||||
this.show = false;
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,100 @@
|
||||
<template>
|
||||
<view>
|
||||
创意需求
|
||||
<view class="content">
|
||||
<view class="top-tab">
|
||||
<u-tabs :list="tabsList" :scrollable="false" lineWidth="25" lineColor="#0A994A" color="#969696"
|
||||
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'20rpx'}"
|
||||
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
|
||||
</view>
|
||||
<u--form :model="needsPublishForm" ref="uNeedsForm" :labelStyle="formLabelStyle">
|
||||
<view style="margin-bottom: 20rpx;">
|
||||
<u-form-item label="姓名" borderBottom>
|
||||
<u-input v-model="needsPublishForm.name" :border="false" placeholder="请输入您的名称"
|
||||
placeholder-style="color:#CCCCCC" />
|
||||
</u-form-item>
|
||||
<u-form-item label="城市">
|
||||
<u-input v-model="needsPublishForm.city" :border="false" placeholder="请选择所在城市"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showCityPicker = true" @tap="showCityPicker = true" />
|
||||
<cityPicker :show-picker="showCityPicker" @cancel="showCityPicker = false" @confirm="getCityValue">
|
||||
</cityPicker>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view style="margin-bottom: 20rpx;">
|
||||
<view v-if="tabCurrent === 1">
|
||||
<u-form-item label="品名" borderBottom>
|
||||
<u-input v-model="needsPublishForm.productName" :border="false" placeholder="请输入您的产品名称"
|
||||
placeholder-style="color:#CCCCCC" />
|
||||
</u-form-item>
|
||||
<u-form-item label="分类" borderBottom>
|
||||
<u-input v-model="needsPublishForm.productCategory" :border="false" placeholder="请选择分类"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showCategoryPicker = true" @click="showCategoryPicker = true" />
|
||||
<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
|
||||
<u-picker :show="showCategoryPicker" :columns="categoryPickerList"
|
||||
@cancel="showCategoryPicker = false" @confirm="getCategoryValue"></u-picker>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-form-item label="产品" borderBottom>
|
||||
<u-input v-model="needsPublishForm.product" :border="false" placeholder="请选择产品类型"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showProductPicker = true" @click="showProductPicker = true" />
|
||||
<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
|
||||
<u-picker :show="showProductPicker" :columns="productPickerList" @cancel="showProductPicker = false"
|
||||
@confirm="getProductValue"></u-picker>
|
||||
</u-form-item>
|
||||
<u-form-item label="定位" borderBottom>
|
||||
<u-input v-model="needsPublishForm.position" :border="false" placeholder="请选择产品定位"
|
||||
placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
|
||||
@focus="showPositionPicker = true" @click="showPositionPicker = true" />
|
||||
<u-picker :show=showPositionPicker :columns="positionPickerList"
|
||||
@cancel="showPositionPicker = false" @confirm="getPositionValue"></u-picker>
|
||||
</u-form-item>
|
||||
<view style="padding: 20rpx 15rpx;background-color: #fff;">
|
||||
<u-textarea v-model="needsPublishForm.describle" border="surround" placeholder="请输入具体描述(限120字)"
|
||||
:maxlength="120" placeholder-style="color:#CCCCCC"></u-textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="tabCurrent === 1" style="margin-bottom: 20rpx;">
|
||||
<u-form-item label="上传图片" labelPosition="top">
|
||||
<view style="padding-left: 20rpx;margin-top: 20rpx;">
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
></u-upload>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view style="background-color: #fff;">
|
||||
<u-form-item label="手机" borderBottom>
|
||||
<u--input placeholder="请输入手机号" :border="false" v-model="needsPublishForm.phone"
|
||||
placeholder-style="color:#CCCCCC"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="验证" borderBottom>
|
||||
<view style="display: flex;padding-right: 20rpx;align-items: center;">
|
||||
<u--input placeholder="请输入验证码" :border="false" v-model="needsPublishForm.invalidCode"
|
||||
placeholder-style="color:#CCCCCC"></u--input>
|
||||
<u-code ref="uCode" @change="codeChange" keep-running change-text="倒计时XS"
|
||||
@start="disabled = true" @end="disabled = false"></u-code>
|
||||
<u-button size="small" type="primary" @tap="getCode" :text="tips" color="#EEEEEE"
|
||||
:disabled="disabled" customStyle="color:#666666; width:160rpx;"></u-button>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<view style="padding: 30rpx;background-color: #fff;">
|
||||
<u-button color="#0EBB5B" text="确定发布"></u-button>
|
||||
</view>
|
||||
<view style="padding: 20rpx;text-align: center;background-color: #fff;">
|
||||
<text
|
||||
style="font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #C8C8C8;line-height: 28rpx;">承诺声明预留文字位置承诺声明预留文字位置</text>
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -8,15 +102,154 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
tabsList: [{
|
||||
name: '需求发布'
|
||||
}, {
|
||||
name: '创意发布'
|
||||
}],
|
||||
tabCurrent: 0,
|
||||
needsPublishForm: {
|
||||
city: null,
|
||||
position: null
|
||||
},
|
||||
formLabelStyle: {
|
||||
'font-size': '32rpx !important'
|
||||
},
|
||||
showCityPicker: false,
|
||||
showProductPicker: false,
|
||||
showPositionPicker: false,
|
||||
showCategoryPicker: false,
|
||||
seconds: 10,
|
||||
disabled: false,
|
||||
tips: '获取验证码',
|
||||
productPickerList: [
|
||||
['烘焙', '零食', '饮料']
|
||||
// {name: '烘焙', val: 'hongbei'}
|
||||
// {name: '零食', val: 'ls'}
|
||||
// {name: '饮料', val: 'yl'}
|
||||
],
|
||||
positionPickerList: [
|
||||
['无添加剂', '无添加剂', '无添加剂']
|
||||
],
|
||||
categoryPickerList: [
|
||||
['类别1', '类别', '类别']
|
||||
],
|
||||
fileList1: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
tabChange(data) {
|
||||
this.tabCurrent = data.index
|
||||
this.needsPublishForm = {}
|
||||
},
|
||||
changeCity(data) {
|
||||
this.needsPublishForm.city = data.data.join('')
|
||||
console.log('showCityPicker = true')
|
||||
},
|
||||
getCityValue(data) {
|
||||
this.showCityPicker = false
|
||||
this.needsPublishForm.city = data.join('/')
|
||||
},
|
||||
getProductValue(data) {
|
||||
this.showProductPicker = false
|
||||
this.needsPublishForm.product = data.value[0]
|
||||
},
|
||||
getPositionValue(data) {
|
||||
this.showPositionPicker = false
|
||||
this.needsPublishForm.position = data.value[0]
|
||||
},
|
||||
getCategoryValue(data) {
|
||||
this.showCategoryPicker = false
|
||||
this.needsPublishForm.productCategory = data.value[0]
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let a = uni.uploadFile({
|
||||
// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||||
// filePath: url,
|
||||
// name: 'file',
|
||||
// formData: {
|
||||
// user: 'test'
|
||||
// },
|
||||
// success: (res) => {
|
||||
// setTimeout(() => {
|
||||
// resolve(res.data.data)
|
||||
// }, 1000)
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.top-tab {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/deep/.u-form-item__body__left__content__label {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
/deep/.u-form-item__body {
|
||||
padding: 13rpx 0 !important;
|
||||
}
|
||||
|
||||
/deep/.u-textarea {
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
18464
utills/city.js
Normal file
18464
utills/city.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user