How did I achieve rapid project development using duxapp?
Like the example below, this project has more than 140 pages, but the real development time, with the skillful use of duxapp, will not be more than two weeks, and you can make it compatible with apps, applets, H5
Only a part of the page is shown here, the project mainly contains the following functions
- Shopping Order Process
- Aftermarket Returns
- Article Publishing
- Store Functions
- Delivery Personnel Functions
- Dealer Functions
- code-sweeping lottery
- Other functions
Below I will detail what methods were used to quickly complete the project
Quickly lay out pages using global styles
Using this store management home page as an example, you can see that I didn't import ascssfile, but I use a lot ofclassNameThese are the global styles that are used, which are allThe duxapp module provides the
import { TopView, Header, Card, Divider, ScrollView, Tag, Row, Image, Column, Text, px, nav, ModalForm, DatePicker, dayjs } from '@/duxui'
import { ArecaIcon, CmsIcon, TipNav, useRequest } from '@/arecaShop'
import { useState } from 'react'
export default function StoreManage() {
const [date, setDate] = useState()
const [{ info = {}, sku = {}, distribution = {} }] = useRequest({
url: 'store/index',
toast: true,
data: {
date
}
}, { reloadForShow: true })
return (
<TopView>
<Header title='Store Details' />
<ScrollView>
<Card className='p-2 gap-2' margin disableMarginBottom>
<Row className='gap-2'>
<Image className='r-2'
src={}
style={{ width: px(148) }}
square
/>
<Column justify='between' grow>
<Row justify='between' grow>
<Text bold size={4}>{}</Text>
<ArecaIcon name='shezhi' className='text-c1 text-s7'
onClick={() => nav('arecaShop/storeManage/info')}
/>
</Row>
<Column>
<Text color={2} size={1}>associates：{}</Text>
<Row grow justify='between' items='center'>
<Text color={2} size={1}></Text>
<Tag type='secondary' size='s' radiusType='round' onClick={() => nav(`tel:${info.distributor_tel}`)}>
<ArecaIcon className='text-white text-s2' name='shiwu-shouji' /> One-click ordering
</Tag>
</Row>
</Column>
</Column>
</Row>
<Divider />
<Row>
<Text color={2} size={1} shrink>Store Address：</Text>
<Text bold size={1}>{}{}</Text>
</Row>
</Card>
<TipNav title='Goods statistics' url='arecaShop/storeManage/mallTotal'>
<Row className='items-center' grow>
<ArecaIcon className='text-secondary' name='promot_tips' />
<Text type='secondary' size={2}>{dayjs().format('MM/DD HH:mm')} update</Text>
</Row>
</TipNav>
<Card margin disableMarginBottom className='gap-2'>
<Text color={3} size={2}>Historical purchase quantities（parcel）：{}</Text>
<Row justify='between' className='gap-2'>
<Column grow className='bg-page r-2 p-3 gap-1'>
<Text color={3} size={2}>Historical sales volume（parcel）</Text>
<Text bold size={40}>{}</Text>
</Column>
<Column grow className='bg-page r-2 p-3 gap-1'>
<Text color={3} size={2}>Historical surplus（parcel）</Text>
<Text bold size={40}>{}</Text>
</Column>
</Row>
<Text size={22} type='secondary'>*Sales and remaining for reference only：Record the number of consumers scanning the code，May differ from actual results</Text>
</Card>
<TipNav title='Distribution records'
right={<ModalForm
title='months'
renderForm={<DatePicker
mode='month'
/>}
childPropsValueKey='value'
value={date}
onChange={setDate}
>
<DateChild />
</ModalForm>}
></TipNav>
<Card margin disableMarginBottom className='gap-2'>
<Text color={3} size={2}>Store Delivery（included in）：{distribution.middle_num}</Text>
<Row justify='between' className='gap-2'>
<Column grow className='bg-page r-2 p-3 gap-1'
onClick={() => nav('arecaShop/storeManage/emptyRecovery', { type: 'store' })}
>
<Text color={3} size={2}>Empty bags cleared（parcel）</Text>
<Row items='center' className='gap-1'>
<Text bold size={40}>{distribution.recycle_num}</Text>
<CmsIcon className='text-c3 text-s5' name='direction_right' />
</Row>
</Column>
<Column grow className='bg-page r-2 p-3 gap-1'
onClick={() => nav('arecaShop/storeManage/deliveryList')}
>
<Text color={3} size={2}>Number of stores returned（parcel）</Text>
<Row items='center' className='gap-1'>
<Text bold size={40}>{distribution.refund_num}</Text>
<CmsIcon className='text-c3 text-s5' name='direction_right' />
</Row>
</Column>
</Row>
</Card>
</ScrollView>
</TopView>
)
}
const DateChild = ({ value, onClick }) => {
return <Row items='center' className='r-2 ph-2 bg-white gap-1' onClick={onClick}>
<Text color={value ? 1 : 3}>{value || 'please select'}</Text>
<ArecaIcon name='rili1' className='text-c3' />
</Row>
}
Using the UI Library
In the above example has shown how to use the UI library components, you can see the use of the UI library components, in combination with the global style, you will find that it seems that you do not need to write scss to complete the page layout is very good!
These components areduxui UI libraryoffered
Using the List component to complete the list page
Take the following list page as an example, the List component helps you complete the data request, automatic paging, drop-down refresh, automatic refresh and other functions, you only need to focus on how each item in your list is written
import { TopView, Header, Card, Tab, Row, Image, Column, Text, px, Empty, DatePicker, SelectorPicker, ModalForm, Button } from '@/duxui'
import { ArecaIcon, List, usePageData, nav } from '@/arecaShop'
import { useState } from 'react'
export default function DeliveryList() {
const [users] = usePageData('store/salesman')
const [user, setUser] = useState()
const [type, setType] = useState(0)
return (
<TopView>
<Header title='Distribution records' />
<Tab className='bg-white' value={type} onChange={setType}>
< title='Store Delivery' paneKey={0} />
< title='Store Returns' paneKey={1} />
</Tab>
<Row className='ph-3 mt-3' items='center' justify='between'>
<ModalForm
title='salesman'
renderForm={<SelectorPicker range={users} nameKey='nickname' valueKey='id' />}
childPropsValueKey='value'
value={user}
onChange={setUser}
>
<SelectChild />
</ModalForm>
</Row>
<List
key={type}
renderItem={Item}
renderEmpty={<Empty title='No record' />}
url={type ? 'store/refund' : 'store/distribution'}
data={{
salesman_id: user
}}
/>
</TopView>
)
}
const SelectChild = ({ value, ...props }) => {
return (
<Row items='center' {...props}>
<Text size={2}>{value || '全部salesman'}</Text>
<ArecaIcon name='arrow_down_fill' className='text-s4 text-c2' />
</Row >
)
}
const Item = ({ item }) => {
return <Card margin disableMarginBottom className='gap-3'>
<Row items='center'>
<ArecaIcon className='text-c1 text-s7' name='store' />
<Text size={2} style={{ marginLeft: px(4) }}>{item.store_name}</Text>
<ArecaIcon className='text-c3 text-s5' name='you2' />
</Row>
{
(good => <Row className='gap-3' key={}>
<Image style={{ width: px(160) }} square className='r-2' src={} />
<Column grow justify='between'>
<Text size={2} bold numberOfLines={2}>{}</Text>
<Text size={2} color={3}>norm：{}</Text>
<Text size={2} color={3}>quantities：{}</Text>
</Column>
</Row>)
}
<Column className='r-2 bg-page p-3 gap-2'>
<Row>
<Row grow items='center'>
<ArecaIcon className='text-secondary text-s7' name='man_mine' />
<Text size={2}>{item.salesman_name || '-'}</Text>
</Row>
<Row grow items='center'>
<ArecaIcon className='text-secondary text-s7' name='shiwu-shouji' />
<Text size={2}>{item.salesman_tel || '-'}</Text>
</Row>
</Row>
<Row>
<Row grow items='center'>
<ArecaIcon className='text-secondary text-s7' name='map' />
<Text size={2}>{}</Text>
</Row>
<Row grow items='center'>
<ArecaIcon className='text-secondary text-s7' name='shijian1' />
<Text size={2}>{item.created_at}</Text>
</Row>
</Row>
</Column>
</Card>
}
Using hooks to request data quickly
This refers to the use ofuseRequestsubstitute forrequestQuickly fetch data without writing specific request logic
import { TopView, Header, Card, Text, ScrollView, Space, HtmlView, useRoute } from '@/duxui'
import { useRequest } from '@/arecaShop'
export default function HelpDetail() {
const { params } = useRoute()
const [detail] = useRequest(`tools/magic/help/${}`)
return (
<TopView isSafe>
<Header title='Help Details' />
<ScrollView >
<Card shadow={false} margin>
<Space size={32}>
<Text bold size={42} >{}</Text>
<HtmlView html={} />
</Space>
</Card>
</ScrollView>
</TopView>
)
}
Use of existing modules
In this project, the shopping order process, after-sale returns, article publishing and other functions, in the previous module are already developed functions, and they are all mature and available, we just need to use them directly on the line!
{
"name": "arecaShop",.
"description": "Artisan Betel Nut Mall",
"version": "1.0.0",
"dependencies": [
"duxcmsMall".
"amap"
]
}
In my configuration file for this project module, set theduxcmsMall Add to the dependency, which is the mall module he provides products, orders, after-sales, shopping carts, shipping address and other functions
Because the current project requirements are points to redeem goods, but the default mall does not support the points function, the following introduction is to use the rendering hook to modify the goods for points
Using render hooks to make changes to the mall
Use RenderHook to change the mall shopping process to a points redemption process, this file needs to be imported in the module entry file
import { mallHook, orderHook, Price } from '@/duxcmsMall'
import { Card, contextState, Row, Text } from '@/duxui'
const ListPrice = ({ item, children }) => {
if ( === 'point') {
return <Text bold size={4} type='danger'>{item.sell_point}accumulated points (in sports, at school etc)</Text>
}
return children
}
('', ListPrice)
('', ListPrice)
('', ListPrice)
('', ({ children }) => {
const [data] = ()
if ( !== 'point') {
return children
}
return <Row className='gap-2' items='center'>
<Text size={40} bold color={4}>
{data.sell_point}accumulated points (in sports, at school etc)
</Text>
<Price size={1} delete color={4} className='mt-2'>{data.market_price}</Price>
</Row>
})
('', ({ children, data, item }) => {
if ( !== 'point') {
return children
}
return <Text size={48} bold type='danger'>
{item?.sell_point || data.sell_point}accumulated points (in sports, at school etc)
</Text>
})
('', ({ store }) => {
// const isPoint = (v => === 'point')
return <>
<Row items='center' justify='between'>
<Text bold>Amount of goods</Text>
<Price color={2}>{.order_price}</Price>
</Row>
<Row items='center' justify='between'>
<Text bold>freight fee</Text>
<Price color={2}>{.delivery_price}</Price>
</Row>
{
(item => <Row key={} items='center' justify='between'>
<Text bold>{}</Text>
<Text type='danger'>-¥{}</Text>
</Row>)
}
{/* {+.discount_price > 0 && <Row items='center' justify='between'>
<Text bold>{isPoint ? 'accumulated points (in sports, at school etc)抵扣' : 'favorable'}</Text>
<Price type='danger'>{-.discount_price}</Price>
</Row>} */}
</>
})
('', () => {
const [{ data }] = ()
return <Card margin disableMarginBottom className='gap-3'>
<Row items='center' justify='between'>
<Text color={2}>Total orders</Text>
<Price bold color={1}>{data.order_price}</Price>
</Row>
<Row items='center' justify='between'>
<Text color={2}>freight fee</Text>
<Price bold color={1}>{data.delivery_price}</Price>
</Row>
{
data.discount_data?.map(item => <Row key={} items='center' justify='between'>
<Text color={2}>{}</Text>
<Text bold type='danger'>-¥{}</Text>
</Row>)
}
<Row items='center' justify='between'>
<Text color={2}>disbursement</Text>
<Price bold type='primary'>{data.pay_price}</Price>
</Row>
</Card>
})
summarize
The above mentioned are the main methods used for rapid development, when you master these methods, your development speed will be riding high!
Of course this is not all, you can read the development documentation for more information on how to use it.
Please go to the development documentation for a detailed tutorial
Development Documentation:/
GitHub：/duxapp