0 foundation a literature club low code development member management applet (II)

1 Second articles ： Member recharge function development

1.1 Last review

In the previous article, we implemented the development of the member registration function , Visit the applet to see the shortcut icon for member registration , Click the icon to enter the registration page , Enter the basic information of the member and click submit to save the basic information of the member .

1.2 This paper introduces

In this article, we continue to build our system , With the basic member information , We can carry out specific businesses . The first thing we need to do is recharge the members , Search for member information through mobile phone number , Can recharge members , After successful recharging, add the recharging amount to the balance .

Our specific development steps are ：

1、 Modify the data source

2、 New recharge page

3、 Develop recharge function

4、 Release preview

1.3 Modify the data source

We have created the basic information of members in the previous section , But a balance field is missing , We find the added data source and add the balance field .

Click the Edit button to enter the modification mode

You can add our balance field on the edit page , Here, we select the type of numbers to facilitate addition and subtraction

After the fields are added , We need to add a custom method , Call to increase balance

Our business logic is to update the member's balance information according to the passed in member's primary key , How should I write the specific method ？ At this time, you need to refer to the specific syntax of applet cloud development , Applet cloud development API

In fact, we need to see how the official updates , Refer to the official update method for details

1.4 Create a page

After the method is defined , We need to create a recharge page , Add a new page in page management

First, add a navigation component to the page , You can return to the home page

The recharge page first needs to list all the member information in the form of a list , So we need to add the list container component first

In order to show the meeting information circularly , We need to define a variable first

Click next to the status variable on the conference recharge page + Number , Add a variable

Add a list element component to the list container component

Loop through the list elements for Property to bind the variable just created

The next step is to bind specific information

After data binding, we need to define click events , Jump to the next recharge page , We first need to define a low code method to jump , Receive the primary key information of a member

How to write the jump method ？ We need to refer to the official api Routing jump API

export default function({event, data}) {

app.navigateTo({

pageId: 'addaccount', // page Id

params: {memberid: data.target},

});

}

After the low code method is set , We can set the event to low code and pass in the primary key

Then create a recharge page

First you need to create a parameter variable

Then create a state variable , Get information according to the passed in primary key

After the variables are defined, we need to display the basic information of the members , We show names 、 Phone number and balance are enough

1.5 Release preview

After the page is developed, click the preview to test