958 lines
30 KiB
Vue
958 lines
30 KiB
Vue
<template>
|
||
<view class="feedback-page">
|
||
<!-- 头部区域 -->
|
||
<view class="header-section">
|
||
<view class="header-bg">
|
||
<!-- <image mode="aspectFill" class="bg-image" src="https://eshangtech.com/ShopICO/jianyi_bg.png"></image> -->
|
||
<view class="header-overlay"></view>
|
||
</view>
|
||
<view class="header-content">
|
||
<view class="header-title">高速公路服务区</view>
|
||
<view class="header-subtitle">优质文明服务监督</view>
|
||
<view class="header-subtitle" style="color:#2c3e50;font-size: 20rpx;margin-top: 16rpx;">
|
||
此投诉为优质文明服务监督投诉渠道，非微信官方投诉渠道</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 基本信息卡片 -->
|
||
<view class="form-card">
|
||
<view class="card-header">
|
||
<view class="card-title">基本信息</view>
|
||
<view class="card-icon">📝</view>
|
||
</view>
|
||
|
||
<view @click="handleGoMap">
|
||
<!-- <picker @change="bindServerPickerChange" :value="serverIndex" :range="serverRange" range-key="showName"> -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">📍</text>
|
||
<text class="label-text">服务区</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ currentService.SERVERPART_NAME || '请选择服务区' }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- </picker> -->
|
||
|
||
<view v-if="detailSuggestion.SUGGESTION_ID">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">🏷️</text>
|
||
<text class="label-text">类型</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ pageMsg.typeName }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<picker v-else @change="bindTypePickerChange" :value="typeIndex" :range="typeRange" range-key="name">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">🏷️</text>
|
||
<text class="label-text">类型</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ pageMsg.typeName }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">👤</text>
|
||
<text class="label-text">您的姓名</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<input type="text" class="form-input" maxlength="20" placeholder="请输入您的姓名" @input="bindKeyInput"
|
||
data-field="SuggestionName" :value="saveMsg.SuggestionName"
|
||
:disabled="detailSuggestion.SUGGESTION_ID" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">📱</text>
|
||
<text class="label-text">联系方式</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<input type="number" class="form-input" maxlength="11" placeholder="请输入您的手机号"
|
||
@input="bindKeyInput" data-field="PhoneNumber" :value="saveMsg.PhoneNumber"
|
||
:disabled="detailSuggestion.SUGGESTION_ID" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快速标签卡片 -->
|
||
<view class="form-card" v-if="tagList.length > 0">
|
||
<view class="card-header" style="margin-bottom: 24rpx;">
|
||
<view class="card-title">{{ typeIndex === '1' ? '表扬' : '投诉' }}类型</view>
|
||
<view class="card-icon">🏷️</view>
|
||
</view>
|
||
|
||
<view class="tag-section" v-for="(tags, i) in tagList" :key="i">
|
||
<view class="tag-category">{{ tags.FIELDENUM_NAME }}</view>
|
||
<view class="tag-list">
|
||
<view class="tag-item" v-for="(tag, s) in tags.fieldenumList" :key="s" @tap="selectTag(tag)"
|
||
:class="{ 'tag-active': tag.ischecked }">
|
||
{{ tag.FIELDENUM_NAME }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详细描述卡片 -->
|
||
<view class="form-card">
|
||
<view class="card-header">
|
||
<view class="card-title">详细描述</view>
|
||
<view class="card-icon">✍️</view>
|
||
</view>
|
||
|
||
<view class="textarea-wrapper">
|
||
<textarea class="form-textarea" cols="30" rows="6" cursor-spacing="200"
|
||
placeholder="请详细描述您的问题，我们将及时跟进解决（添加图片将有助于我们解决您的问题）" v-model="saveMsg.Info"
|
||
:class="{ 'textarea-filled': saveMsg.Info }" :disabled="detailSuggestion.SUGGESTION_ID">
|
||
</textarea>
|
||
</view>
|
||
|
||
<!-- 图片上传区域 -->
|
||
<view class="upload-section">
|
||
<view class="upload-title">上传图片 ({{ imgsList.length }}/9)</view>
|
||
<view class="upload-grid">
|
||
<view class="uploaded-image" v-for="(item, i) in imgsList" :key="i">
|
||
<image mode="aspectFill" :src='item' @click="seePhoto(item)"></image>
|
||
<view class="delete-btn" v-if="!detailSuggestion.SUGGESTION_ID" @click="deleteImg(i)">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<view class="upload-btn" @click="choeseImg"
|
||
v-if="imgsList.length < 9 && !detailSuggestion.SUGGESTION_ID">
|
||
<view class="upload-icon">📷</view>
|
||
<text class="upload-text">添加图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-section" v-if="!detailSuggestion.SUGGESTION_ID">
|
||
<view class="submit-btn" :class="{ 'submit-active': noPost }" @click="checkFn">
|
||
<text class="submit-text">提交反馈</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
noPost: true,
|
||
saveMsg: {
|
||
action_type: 'Complaints',
|
||
ProvinceCode: '',
|
||
ServerPartID: '',
|
||
Type: 2000,
|
||
SuggestionName: '',
|
||
Title: '',
|
||
Info: '',
|
||
PhoneNumber: '',
|
||
WechatOpenId: '',
|
||
|
||
imageArr: []
|
||
},
|
||
imgsList: [],
|
||
pageMsg: {
|
||
serverPartName: '',
|
||
typeName: '投诉'
|
||
},
|
||
// msgType: [{ type: 2000, name: '投诉' }, { type: 4000, name: '咨询' }, { type: 1000, name: '建议' }],
|
||
msgType: [{ type: 1000, name: '投诉' }, { type: 1050, name: '表扬' }],
|
||
typeIndex: 0,
|
||
serverIndex: 0,
|
||
tagList: [], // 可选择的建议标签
|
||
selectTags: [], // 已选中的建议标签
|
||
currentService: {}, // 当前服务区信息
|
||
detailSuggestion: {} // 当前投诉建议的详情内容
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({ 'serverList': 'severList', 'user': 'user', 'serverPart': 'serverPart' }),
|
||
typeRange() {
|
||
return this.msgType
|
||
},
|
||
serverRange() {
|
||
return this.serverList
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if ((this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID))) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
} else if (res.cancel) {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
|
||
|
||
console.log('optionoptionoption', option);
|
||
if (option.SUGGESTIONID) {
|
||
this.detailSuggestion.SUGGESTION_ID = option.SUGGESTIONID
|
||
}
|
||
console.log('this.serverList', this.serverList)
|
||
this.loadIndustry()
|
||
this.getTag()
|
||
|
||
},
|
||
onShow() {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
this.currentService = currentService
|
||
this.saveMsg.ServerPartID = currentService.SERVERPART_ID
|
||
|
||
this.pageMsg.serverPartName = currentService.SERVERPART_NAME
|
||
this.saveMsg.ProvinceCode = this.user.PROVINCE_CODE
|
||
|
||
console.log('this.currentServicethis.currentServicethis.currentService', this.currentService);
|
||
|
||
// 设置默认的服务区索引
|
||
const serverIndex = this.serverList.findIndex(item => item.ServerPart_Id === this.serverPart.ServerPart_Id)
|
||
if (serverIndex !== -1) {
|
||
this.serverIndex = serverIndex
|
||
}
|
||
|
||
// if (!(this.tagList && this.tagList.length > 0)) {
|
||
// this.getTag()
|
||
// }
|
||
this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE
|
||
|
||
},
|
||
onUnload() {
|
||
this.saveMsg = {
|
||
action_type: 'Complaints',
|
||
ProvinceCode: '',
|
||
ServerPartID: '',
|
||
Type: 2000,
|
||
SuggestionName: '',
|
||
Title: '',
|
||
Info: '',
|
||
PhoneNumber: '',
|
||
WechatOpenId: '',
|
||
|
||
imageArr: []
|
||
}
|
||
this.noPost = true
|
||
this.imgsList = []
|
||
},
|
||
methods: {
|
||
// 拿到投诉建议的详情
|
||
async handleGetComplaintsDetail() {
|
||
const req = {
|
||
action_type: 'GetSuggestionDetail',
|
||
PROVINCECODE: this.user.PROVINCE_CODE,
|
||
SUGGESTIONID: this.detailSuggestion.SUGGESTION_ID,
|
||
}
|
||
const data = await this.$api.getCoop(req)
|
||
this.detailSuggestion = data.Data
|
||
console.log('this.detailSuggestionthis.detailSuggestion', this.detailSuggestion);
|
||
console.log('this.tagListthis.tagListthis.tagList', this.tagList);
|
||
this.saveMsg = {
|
||
...this.saveMsg,
|
||
Type: this.detailSuggestion.SUGGESTION_TYPE,
|
||
SuggestionName: this.detailSuggestion.SUGGESTION_NAME,
|
||
Info: this.detailSuggestion.SUGGESTION_REASON,
|
||
PhoneNumber: this.detailSuggestion.PHONE_NUMBER,
|
||
}
|
||
this.currentService = {
|
||
SERVERPART_ID: this.detailSuggestion.SERVERPART_ID,
|
||
SERVERPART_NAME: this.detailSuggestion.SERVERPART_NAME,
|
||
}
|
||
this.imgsList = this.detailSuggestion.IMAGE_URL.split(',')
|
||
|
||
let labelList = this.detailSuggestion.ENUM_LABEL.split(',')
|
||
console.log('labelListlabelListlabelList', labelList);
|
||
let list = JSON.parse(JSON.stringify(this.tagList))
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.fieldenumList && item.fieldenumList.length > 0) {
|
||
item.fieldenumList.forEach((subItem) => {
|
||
if (labelList.indexOf(subItem.FIELDENUM_VALUE) !== -1) {
|
||
subItem.ischecked = true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
this.tagList = list
|
||
},
|
||
// 跳转去服务区列表 选择服务区
|
||
handleGoMap() {
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=complaints" });
|
||
},
|
||
bindServerPickerChange(event) {
|
||
let index = event.detail.value
|
||
this.serverIndex = index
|
||
this.saveMsg.ProvinceCode = this.serverList[index].ProvinceCode
|
||
this.saveMsg.ServerPartID = this.serverList[index].ServerPart_Id
|
||
this.pageMsg.serverPartName = this.serverList[index].ServerPart_Name
|
||
},
|
||
bindTypePickerChange(event) {
|
||
let index = event.detail.value
|
||
console.log('indexindex', index);
|
||
|
||
this.typeIndex = index
|
||
this.saveMsg.Type = this.msgType[index].type
|
||
this.pageMsg.typeName = this.msgType[index].name
|
||
},
|
||
choeseImg() {
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
let _this = this
|
||
let num = 9 - _this.imgsList.length
|
||
if (num === 0) {
|
||
uni.showToast({ title: '您最多可以上传9张图', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success(rs) {
|
||
console.log('rs', rs)
|
||
_this.noPost = false
|
||
let tempFilePath = rs.tempFilePaths[0]
|
||
|
||
uni.getImageInfo({
|
||
src: tempFilePath,
|
||
success(imgInfo) {
|
||
let quality = 100
|
||
if (imgInfo.size > 1024 * 200) {
|
||
quality = 1024 * 200 / imgInfo.size * 100
|
||
}
|
||
|
||
if (quality < 100 && tempFilePath.indexOf('.jpg') > -1) {
|
||
uni.compressImage({
|
||
src: tempFilePath,
|
||
quality: quality,
|
||
success(res) {
|
||
uni.showLoading({
|
||
title: '图片上传中...',
|
||
mask: true
|
||
})
|
||
uni.uploadFile({
|
||
url: 'https://mp.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
|
||
filePath: res.tempFilePath,
|
||
name: 'data',
|
||
success(res) {
|
||
let _data = JSON.parse(res.data)
|
||
_this.imgsList.push(tempFilePath)
|
||
_this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
|
||
uni.hideLoading()
|
||
_this.noPost = true
|
||
},
|
||
fail(res) {
|
||
console.log(res)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
},
|
||
fail(error) {
|
||
console.log(error)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
} else {
|
||
uni.showLoading({
|
||
title: '图片上传中...',
|
||
mask: true
|
||
})
|
||
uni.uploadFile({
|
||
url: 'https://mp.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
|
||
filePath: tempFilePath,
|
||
name: 'data',
|
||
success(res) {
|
||
let _data = JSON.parse(res.data)
|
||
_this.imgsList.push(tempFilePath)
|
||
_this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
|
||
uni.hideLoading()
|
||
_this.noPost = true
|
||
},
|
||
fail(res) {
|
||
console.log(res)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
seePhoto(item) {
|
||
let _this = this
|
||
uni.previewImage({
|
||
current: item,
|
||
urls: _this.imgsList
|
||
})
|
||
},
|
||
deleteImg(index) {
|
||
let _this = this
|
||
_this.saveMsg.imageArr.splice(index, 1)
|
||
_this.imgsList.splice(index, 1)
|
||
},
|
||
bindKeyInput(event) {
|
||
const field = event.target.dataset.field
|
||
this.saveMsg[field] = event.detail.value
|
||
},
|
||
checkFn() {
|
||
let _this = this
|
||
let flag = 0
|
||
|
||
for (let element in this.saveMsg) {
|
||
if (_this.saveMsg[element] === '') {
|
||
let msg = ''
|
||
switch (element) {
|
||
case 'SuggestionName':
|
||
msg = '您的姓名'
|
||
break
|
||
case 'PhoneNumber':
|
||
msg = '联系电话'
|
||
break
|
||
case 'Info':
|
||
msg = '反馈内容'
|
||
break
|
||
}
|
||
if (msg !== '') {
|
||
uni.showToast({
|
||
title: '请输入' + msg,
|
||
icon: 'none'
|
||
})
|
||
flag += 1
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(_this.saveMsg.PhoneNumber)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!(this.selectTags && this.selectTags.length > 0)) {
|
||
uni.showToast({
|
||
title: '请选择具体类型',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
|
||
|
||
if (flag === 0) {
|
||
this.postIt()
|
||
}
|
||
},
|
||
postIt() {
|
||
let _this = this
|
||
let data = _this.saveMsg
|
||
|
||
data.imageArr = data.imageArr.toString()
|
||
|
||
data.WechatOpenId = this.user.WECHATAPP_OPENID
|
||
data._enumLabel = this.selectTags.toString()
|
||
delete data.__newReference
|
||
uni.showLoading({
|
||
title: '正在提交...',
|
||
mask: true
|
||
})
|
||
console.log('datadatadatadata', data);
|
||
|
||
const req = {
|
||
action_type: 'Complaints',
|
||
PROVINCECODE: data.ProvinceCode,
|
||
SERVERPARTID: data.ServerPartID,
|
||
TYPE: data.Type,
|
||
SUGGESTIONNAME: data.SuggestionName,
|
||
TITLE: data.Title,
|
||
INFO: data.Info,
|
||
PHONENUMBER: data.PhoneNumber,
|
||
IMAGEARR: data.imageArr,
|
||
_enumLabel: data._enumLabel,
|
||
WECHATOPENID: this.user.WECHATAPP_OPENID,
|
||
}
|
||
|
||
console.log('reqreqreq', req);
|
||
|
||
|
||
this.$api.getCoop(req).then(function (rs) {
|
||
_this.$store.commit('refresh', true)
|
||
uni.hideLoading()
|
||
|
||
// eslint-disable-next-line eqeqeq
|
||
if (rs.ResultCode == '100') {
|
||
uni.showToast({
|
||
title: '反馈成功！'
|
||
})
|
||
const pages = getCurrentPages();
|
||
console.log(pages);
|
||
if (pages && pages.length > 1) {
|
||
setTimeout(() => {
|
||
// _this.noPost = true
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1000)
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '/pages/complaints/index'
|
||
});
|
||
}, 1000)
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: rs.ResultDesc,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
loadIndustry() { // 新增意见时，如果是内部会员则提供默认填写名字和电话
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
// this.saveMsg.SuggestionName = this.user.MEMBERSHIP_NAME
|
||
this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE
|
||
}
|
||
},
|
||
getTag() {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetEnumLable',
|
||
fieldexplainField: 'BUSINESS_TARGET',
|
||
fieldenumIndex: 4000
|
||
}).then(res => {
|
||
_this.tagList = res.Data.List
|
||
|
||
if (_this.detailSuggestion.SUGGESTION_ID) {
|
||
_this.handleGetComplaintsDetail()
|
||
}
|
||
})
|
||
},
|
||
selectTag(tag) {
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
let index = this.selectTags.indexOf(tag.FIELDENUM_VALUE)
|
||
if (index !== -1) {
|
||
this.selectTags.splice(index, 1)
|
||
} else {
|
||
this.selectTags.push(tag.FIELDENUM_VALUE)
|
||
}
|
||
|
||
tag.ischecked = tag.ischecked !== undefined ? !tag.ischecked : true
|
||
|
||
console.log('tagListtagList', this.tagList);
|
||
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.feedback-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
|
||
position: relative;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header-section {
|
||
position: relative;
|
||
height: 320rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
.bg-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.header-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(46, 125, 50, 0.85) 100%);
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
color: white;
|
||
|
||
.header-title {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 12rpx;
|
||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
margin-top: -40rpx;
|
||
padding: 0 24rpx 40rpx;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.form-card {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 2rpx solid #f5f7fa;
|
||
|
||
.card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 36rpx;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 表单项样式 */
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 32rpx;
|
||
border-bottom: 2rpx solid #f8f9fa;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background-color: #f8f9fa;
|
||
}
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 200rpx;
|
||
|
||
.label-icon {
|
||
font-size: 28rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.label-text {
|
||
font-size: 24rpx;
|
||
color: #34495e;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.form-input-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.form-input {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 24rpx;
|
||
color: #2c3e50;
|
||
text-align: right;
|
||
border: none;
|
||
background: transparent;
|
||
|
||
&::placeholder {
|
||
color: #bdc3c7;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.form-value {
|
||
color: #2c3e50;
|
||
font-size: 24rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.arrow-icon {
|
||
color: #bdc3c7;
|
||
font-size: 36rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* 标签区域 */
|
||
.tag-section {
|
||
padding: 0 32rpx 24rpx;
|
||
|
||
&:last-child {
|
||
padding-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
.tag-category {
|
||
font-size: 28rpx;
|
||
color: #5d6d7e;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tag-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tag-item {
|
||
padding: 16rpx 24rpx;
|
||
background: #ecf0f1;
|
||
color: #5d6d7e;
|
||
border-radius: 40rpx;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid transparent;
|
||
|
||
&.tag-active {
|
||
background: linear-gradient(135deg, #52C88A, #3B9F6B);
|
||
color: #ffffff;
|
||
border-color: #52C88A;
|
||
box-shadow: 0 4rpx 12rpx rgba(82, 200, 138, 0.3);
|
||
}
|
||
}
|
||
|
||
/* 文本域样式 */
|
||
.textarea-wrapper {
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
padding: 24rpx;
|
||
border: 2rpx solid #ecf0f1;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #2c3e50;
|
||
line-height: 1.6;
|
||
background: #fafbfc;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
|
||
&:focus {
|
||
border-color: #52C88A;
|
||
background: #ffffff;
|
||
outline: none;
|
||
box-shadow: 0 0 0 6rpx rgba(82, 200, 138, 0.1);
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #bdc3c7;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
&.textarea-filled {
|
||
background: #ffffff;
|
||
border-color: #52C88A;
|
||
}
|
||
}
|
||
|
||
/* 图片上传区域 */
|
||
.upload-section {
|
||
padding: 24rpx 32rpx 32rpx;
|
||
}
|
||
|
||
.upload-title {
|
||
font-size: 26rpx;
|
||
color: #5d6d7e;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.upload-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.uploaded-image {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: #e74c3c;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);
|
||
|
||
.delete-icon {
|
||
color: white;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border: 4rpx dashed #bdc3c7;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fafbfc;
|
||
|
||
&:active {
|
||
background: #ecf0f1;
|
||
border-color: #95a5a6;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 8rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 22rpx;
|
||
color: #7f8c8d;
|
||
}
|
||
}
|
||
|
||
/* 提交按钮区域 */
|
||
.submit-section {
|
||
padding: 40rpx 24rpx 60rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: linear-gradient(135deg, #bdc3c7, #95a5a6);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(149, 165, 166, 0.3);
|
||
|
||
&.submit-active {
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(76, 204, 127, 0.4);
|
||
|
||
&:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 16rpx rgba(76, 204, 127, 0.4);
|
||
}
|
||
}
|
||
|
||
.submit-text {
|
||
color: white;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
|
||
/* 响应式适配 */
|
||
@media (max-width: 320px) {
|
||
.form-card {
|
||
margin: 0 16rpx 24rpx;
|
||
}
|
||
|
||
.submit-section {
|
||
padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
}
|
||
}
|
||
</style>
|