Mr. King’s appeal

On a winter morning, customer service xiao Wang was the first to arrive at the company. Before he could take off his thick down jacket, the phone rang on his desk. “Hello, this is jingdong customer service, how can I help you?” The other end of the phone was very noisy, the howling of the north wind made the caller’s voice difficult to be heard, and the only thing that could be understood was the caller’s repeated emphasis in the top of his voice Make out an invoice! . I want a check! …”

Invoicing wanted

The skilful wang was not flustered. After waiting at his desk for a few minutes, the phone rang again.After a few minutes of conversation, Xiao Wang understood the purpose of the caller, Mr. Jin. After using JINGdong Huicai APP to buy satisfactory goods, he had a poor experience in billing. Every time he had to ask for help, he felt very troublesome, and hoped to have a self-service billing function online.

After listening to Mr. Jin patiently, Wang immediately launched an investigation. It turned out that JINGdong Huicai APP is a shopping platform specially for big customers, with a long online operation time and good reputation. After a little inquiry, Wang successfully found the developer of Huicai APP.In the research and development of The little Brother, Wang learned that the business side had done a survey before, and the current customers of Huicai APP did not have a good experience when using the invoicing function. Our business side and operation side have a large workload on invoice processing, and the invoicing time cannot be improved, and the labor cost is also very high. It is necessary to develop a self-service billing system quickly.

Wang: “r&d brother, the customer side is pressing, when can we finish developing this function?”Xiao Wang: “little brother, little brother, how long can it be done?”

Little brother: “Very soon.”

Xiao wang: “……”

Project development

develop with NutUI3

NutUIIs a set of JINGdong style mobile component library, support using Vue in H5 and small program side for development. Little brother opened itNutUIThere are major updates every two weeks, and many new components have been added in recent releases: indicators, tables, skeleton screens, cascade selectors…… Not only that, the design style of the component library also keeps up with the trend, which has been in line with the latest JINGdong 10.0 design specifications. The little brother opened the visual draft and saw dozens of designs covering the screen. He regretted saying “very soon” to Wang, the customer service officer. But when he saw the entry page, a light flashed in his eye.The design of the entry file, while seemingly simple, also takes into account the development and adjustment of rounded corners, borders, spacing, fonts, right arrows, etc. NutUI’s Cell component can reduce the overall development time to the extreme. The younger brother thought and typed a few lines of code:

<nut-cell-group>
     <nut-cell title="Application for invoice" is-link></nut-cell>
     <nut-cell title="Enquiry on Invoicing Application form" is-link></nut-cell>
     <nut-cell title="Invoice exchange Enquiry" is-link></nut-cell>
     <nut-cell title="Head office Qualification Management" is-link></nut-cell>
</nut-cell-group>
<nut-cell title="Historical invoice" is-link></nut-cell>
Copy the code

One minute later, the refactoring of the entry page is almost complete.Little brother opened the next page “fill in the billing information page” visual draft, this page is used to collect user information in the billing process, involving more functions, just look at the upper part of the progress bar, amount display and billing mode switch and other functions. Other features aside, a simple interactive implementation of the progress bar takes a bit of time.

However, NutUI provides a Steps component that matches perfectly and can be used by adjusting the colors when introduced. There are only a few lines of code.

<nut-steps :current="curPage">
    <template v-for="(item, i) in data" :key="i">
        <nut-step :title="item.name">{{ i }}</nut-step>
    </template>
</nut-steps>
Copy the code

The younger brother continued to look at NutUI’sThe documentThe Price component and Radio button component are found

<nut-price :price="price" :decimal-digits="2" :need-symbol="true" :thousands="true" />
Copy the code
<nut-radiogroup v-model="radioVal" direction="horizontal">
      <template v-for="(item, i) in radioData" :key="i">
           <nut-radio shape="button" :label="item.name">{{ item.name }}</nut-radio>
      </template>
</nut-radiogroup>
Copy the code

The Thousands property in the Price component controls whether or not the display is displayed as a semicolon, eliminating the need to manually add commas to the Price field. At the same time, you can also customize the decimal number, set whether to display the RMB symbol “￥” and so on.

The Radio Button component is difficult to think of at first time, because the selection Button of billing mode is more likely to remind people of the Button component. However, according to the logic that only one can be selected at a time, the Radio Button component will bring a faster development experience.

Soon, the little brother completed the first phase of demand development.

Keep improving

optimize with NutUI3

On another beautiful morning, Mr. Jin went to Wang and thanked him and his colleagues for their efforts. He said he would love them more if they could improve their user experience.

Wang was very happy to be praised and immediately found his brother.Little brother: “Oh.”

My “very motivated” brother went to the NutUI documentation for help in the morning, but found the InfiniteLoading component without any trouble. “It’s great to get what you want,” he said.

This kind of information list is not very friendly if it is directly taken to all the data and listed. It is a better choice in terms of performance and user experience to let the user load more content after dragging it to the bottom.

So, how do you write drop-down load? The idea is to listen for the user to slide to the bottom and ask the interface again for paging data. Using the NutUI InfiniteLoading component, you can write:

<nut-infiniteloading
    :has-more="hasMore"
    :use-window="false"
    container-id="search-list"
    load-more-txt="No more data."
    @load-more="getMore"
>
     <div>
           <! -- Here is the content to display, here is the list information -->
     </div>
</nut-infiniteloading>
Copy the code

has-moreTo indicate if there is more data to show the bottom of the text,load-moreCallback function to continue loading.The NutUI component library did not provide Form components in the previous development process, so he raised an Issue. I wonder if anyone has replied to him now.

When my brother opened Github, he was surprised to find that the NutUI team had responded with enthusiasm and that the Form component had been released with the latest version. With a try and see the mood, the little brother plans to reconstruct the previous pure handwritten “new general ticket receiver address” page.

<nut-form>
    <nut-form-item label="Name">
        <input class="nut-input-text" placeholder="Please enter your name" type="text" />
    </nut-form-item>
    <nut-form-item label="Telephone">
        <input class="nut-input-text" placeholder="Please enter your age" type="text" />
    </nut-form-item>
    <nut-form-item label="Location">
        <input class="nut-input-text" placeholder="Please enter your contact number" type="text" />
    </nut-form-item>
    <nut-form-item label="Full address">
        <input class="nut-input-text" placeholder="Please enter your address" type="text" />
    </nut-form-item>
</nut-form>
Copy the code

I have to admit that the partners who developed this component are very helpful. After writing down the code according to the documentation, the actual requirements are already very close to completion.

Simple summary

make a summary

  • One morning, the customer, Mr. Jin, asked for help in self-billing.
  • Customer service wang find r & D brother;
  • Due to tight time and heavy task, NutUI component library was used for development.
  • The process went well, the results were good;
  • Another morning, the customer Mr. Jin put forward the optimization demand;
  • Enter the NutUI component library again
  • Customer Mr. Jin is very satisfied, the project is called – Gold ruyi.