|
@@ -0,0 +1,244 @@
|
|
|
|
+import React, { useState } from 'react'
|
|
|
|
+import { Picker, View, Image, Input } from '@tarojs/components'
|
|
|
|
+import Taro from '@tarojs/taro'
|
|
|
|
+import { AtCurtain } from 'taro-ui'
|
|
|
|
+import type { modalProps, formProps } from './data'
|
|
|
|
+import './index.scss'
|
|
|
|
+import { addReport } from '../../api/report'
|
|
|
|
+
|
|
|
|
+const channelList = ['园所', '网店', '柜台', '经销商', '其他']
|
|
|
|
+
|
|
|
|
+// 填写的表单
|
|
|
|
+const ReportPiracyForm: React.FC<formProps> = ({ formData, regionErr, channelErr, phoneErr, changeForm, submit }) => {
|
|
|
|
+
|
|
|
|
+ const [selectorChecked, setSelectorChecked] = useState<string>('')
|
|
|
|
+ const [region, setRegion] = useState<string>('')
|
|
|
|
+
|
|
|
|
+ // 修改渠道
|
|
|
|
+ const changeChannel = (e) => {
|
|
|
|
+ changeForm('channel', channelList[e.detail.value])
|
|
|
|
+ setSelectorChecked(channelList[e.detail.value])
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 修改详细地址
|
|
|
|
+ const changeAddress = (e) => {
|
|
|
|
+ changeForm('address', e.detail.value)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 修改手机号
|
|
|
|
+ const changePhone = (e) => {
|
|
|
|
+ changeForm('phone', e.detail.value)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const onChange = (e) => {
|
|
|
|
+ const { value } = e.detail
|
|
|
|
+ let name = ''
|
|
|
|
+ value.map(i => name += i)
|
|
|
|
+ setRegion(name)
|
|
|
|
+ changeForm('province', value[0])
|
|
|
|
+ changeForm('city', value[1])
|
|
|
|
+ changeForm('region', value[2])
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <View className='ReportPiracyForm'>
|
|
|
|
+ <View className='item'>
|
|
|
|
+ <View className='label'>
|
|
|
|
+ <View className='required'>*</View>
|
|
|
|
+ <View>举报地区</View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='content'>
|
|
|
|
+ <Picker className='picker' mode='region' onChange={onChange} >
|
|
|
|
+ <View className={region ? '' : 'placeholder'}>
|
|
|
|
+ {region ? region : '请填写举报地区'}
|
|
|
|
+ </View>
|
|
|
|
+ </Picker>
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='hint'>{regionErr ? '*请填写举报地区' : ''}</View>
|
|
|
|
+
|
|
|
|
+ <View className='address'>
|
|
|
|
+ <Input value={formData.address} name='address' type='text' placeholder='详细地址(选填)' onInput={changeAddress} />
|
|
|
|
+ </View>
|
|
|
|
+
|
|
|
|
+ <View className='item'>
|
|
|
|
+ <View className='label'>
|
|
|
|
+ <View className='required'>*</View>
|
|
|
|
+ <View>盗版发现渠道</View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='content'>
|
|
|
|
+ <Picker className='picker' mode='selector' range={channelList} onChange={changeChannel}>
|
|
|
|
+ <View className={selectorChecked ? '' : 'placeholder'}>
|
|
|
|
+ {selectorChecked || '请选择'}
|
|
|
|
+ </View>
|
|
|
|
+ </Picker>
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='hint'>{channelErr ? '*请填写盗版发现渠道' : ''}</View>
|
|
|
|
+
|
|
|
|
+ <View className='item'>
|
|
|
|
+ <View className='label'>
|
|
|
|
+ <View className='required'>*</View>
|
|
|
|
+ <View>联系方式</View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='content'>
|
|
|
|
+ <Input type='number' value={formData.phone} placeholder='请填写' maxlength='11' onInput={changePhone} />
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ <View className='hint'>{phoneErr ? '*请填写联系方式' : ''}</View>
|
|
|
|
+
|
|
|
|
+ <View className='submitBtn' onClick={submit}>提交审核</View>
|
|
|
|
+ </View >
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const HotLineList = [{
|
|
|
|
+ id: 'landline',
|
|
|
|
+ phone: '400-680-7300'
|
|
|
|
+}, {
|
|
|
|
+ id: 'phone',
|
|
|
|
+ phone: '18511949815'
|
|
|
|
+}]
|
|
|
|
+
|
|
|
|
+// 热线电话
|
|
|
|
+const HotLine: React.FC = () => {
|
|
|
|
+ return (
|
|
|
|
+ <View className='HotLine'>
|
|
|
|
+ <View className='name'>举报热线:</View>
|
|
|
|
+ <View className='tels'>
|
|
|
|
+ {
|
|
|
|
+ HotLineList.map(item => (
|
|
|
|
+ <View className='tel' key={item.id}>
|
|
|
|
+ <Image src={require(`../../assets/ReportPiracy/${item.id}.png`)} className='imgUrl' mode='aspectFill'></Image>
|
|
|
|
+ <View className='phone'>{item.phone}</View>
|
|
|
|
+ </View>
|
|
|
|
+ ))
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 最下方的提示
|
|
|
|
+const Remark: React.FC = () => {
|
|
|
|
+ return (
|
|
|
|
+ <View className='Remark'>
|
|
|
|
+ <View className='firstLine'>如您发现盗版请立即举报,我们将保护您的个人隐私,</View>
|
|
|
|
+ <View className='secondLine'>为您的善举提供有偿的奖励。</View>
|
|
|
|
+ </View>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 提交成功弹窗
|
|
|
|
+const SubmitModel: React.FC<modalProps> = ({ visable, closeModal }) => {
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <AtCurtain
|
|
|
|
+ className='AtCurtain'
|
|
|
|
+ isOpened={visable}
|
|
|
|
+ onClose={closeModal}
|
|
|
|
+ >
|
|
|
|
+ <View className='model'>
|
|
|
|
+ <Image src={require('../../assets/ReportPiracy/close.png')} className='close' mode='aspectFill' onClick={closeModal}></Image>
|
|
|
|
+ <View className='tip'>提交成功</View>
|
|
|
|
+ <View className='line firstLine'>感谢您的善举,我们将保护您的个人隐私</View>
|
|
|
|
+ <View className='line secondLine'>中德智慧工作人员会及时与您联系</View>
|
|
|
|
+ <View className='ok' onClick={closeModal}>好的</View>
|
|
|
|
+ </View>
|
|
|
|
+ </AtCurtain>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const ReportPiracy: React.FC = () => {
|
|
|
|
+
|
|
|
|
+ const [visable, setVisable] = useState<boolean>(false)
|
|
|
|
+ const [regionErr, setRegionErr] = useState<boolean>(false)
|
|
|
|
+ const [channelErr, setChannelErr] = useState<boolean>(false)
|
|
|
|
+ const [phoneErr, setPhoneErr] = useState<boolean>(false)
|
|
|
|
+ const [formData, setFormData] = useState<Record<string, any>>({
|
|
|
|
+ province: '',
|
|
|
|
+ city: '',
|
|
|
|
+ region: '',
|
|
|
|
+ address: '',
|
|
|
|
+ channel: '',
|
|
|
|
+ phone: ''
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 打开弹窗
|
|
|
|
+ const openModal = () => setVisable(true)
|
|
|
|
+
|
|
|
|
+ // 关闭
|
|
|
|
+ const closeModal = () => {
|
|
|
|
+ setVisable(false)
|
|
|
|
+ Taro.navigateBack({
|
|
|
|
+ delta: 1
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const changeForm = (key, value) => {
|
|
|
|
+
|
|
|
|
+ let newObj = {}
|
|
|
|
+
|
|
|
|
+ newObj[key] = value
|
|
|
|
+
|
|
|
|
+ const data = Object.assign(formData, newObj)
|
|
|
|
+
|
|
|
|
+ setFormData(data)
|
|
|
|
+ console.log(formData, 'formData');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 验证
|
|
|
|
+ const beforeSubmit = () => {
|
|
|
|
+ if (!formData.province) {
|
|
|
|
+ setRegionErr(true)
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ if (!formData.channel) {
|
|
|
|
+ setChannelErr(true)
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ const myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
|
+
|
|
|
|
+ if (!formData.phone || !myreg.test(formData.phone)) {
|
|
|
|
+ setPhoneErr(true)
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 提交
|
|
|
|
+ const submit = () => {
|
|
|
|
+ if (!beforeSubmit()) return
|
|
|
|
+ add()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const add = async () => {
|
|
|
|
+ const { region, city, province, address, channel, phone } = formData
|
|
|
|
+ const params = {
|
|
|
|
+ province: province,
|
|
|
|
+ city: city,
|
|
|
|
+ region: region,
|
|
|
|
+ address: address,
|
|
|
|
+ channel: channel,
|
|
|
|
+ phone: phone
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const data = await addReport(params)
|
|
|
|
+
|
|
|
|
+ console.log(data, 'data');
|
|
|
|
+
|
|
|
|
+ openModal()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <View className='ReportPiracy'>
|
|
|
|
+ <Image src={require('../../assets/ReportPiracy/title.png')} className='title' mode='aspectFill'></Image>
|
|
|
|
+ <ReportPiracyForm formData={formData} regionErr={regionErr} channelErr={channelErr} phoneErr={phoneErr} changeForm={changeForm} submit={submit}></ReportPiracyForm>
|
|
|
|
+ <HotLine />
|
|
|
|
+ <Remark />
|
|
|
|
+ <SubmitModel visable={visable} closeModal={closeModal}></SubmitModel>
|
|
|
|
+ </View>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+export default ReportPiracy
|