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

1 Fourth articles ： Member consumption function development

1.1 Last article review

We introduced the development of member recharge record function in the previous article , Add an array field to the data source to save the recharge record information , It also introduces the array operation method of cloud development .

1.2 This paper introduces

In this article, we continue our development , With the member recharge function , Nature needs to have the function of consumption , You can record the consumption amount of members each time , And modify the balance of the members . The development steps are still carried out in our previous order

Modify the data source

Create a page

Develop page functions

Preview release

1.3 Modify the data source

In order to record our consumption information , We need to add the consumption record field to the original member data source , For the type of field, we choose array .

Click the data source management menu , Find the member registration data source we created , Click the title to go to the specific details page

Click the Edit button in the upper right corner of the details page to enter the data source edit mode

Click the add field button on the edit page , New member's consumption record field , The field type is set to array

After the fields are added, we also need to add a custom method , The name of the method is to reduce the balance

The specific code is as follows

module.exports = async function (params, context) {

const newParams = Object.assign({}, params, {

updatedAt: Date.now(),

});

delete newParams.createdAt;

delete newParams._id;

const _ = context.database.command;

console.log(params.account);

let money=-parseInt(params.account)

const result = await context.collection.doc(params._id).update({

account:_.inc(money),

consume:_.push({

money:params.account,

adddate:Date.now()

})

});

return { updated: result.updated };

}

To reduce the balance, we need to take a negative number for the amount of consumption , This accumulation is the difference , For the amount of consumption, we use the push Method is added to the consumption record

The method must be tested after it is added , Otherwise, the subsequent function development will be affected , Click the method test button

In addition, you need to add two parameters to the method , They are the amount of each consumption and the primary key of the current record

You need to record the primary key when testing , How to find it ？ First, find the cloud product in the navigation bar , Then click cloud development cloudbase

Enter our low code environment

Find our data source

You can see the primary key information

take id Copy it into our method to test whether the method is correct , Observe whether the results of the database are consistent with our expected results

After seeing the success, click the parameter mapping , Map the result to the output parameter

Click the OK button , In this way, our custom method is created .

1.4 Create a page

After the data source is modified, you need to create a page , The greatest charm of software development is reuse , If you have a similar function, you only need to click the mouse to develop a function .

Actually, the consumption function and recharge function are similar , We just need to copy the previous page . Let's clone the list page first .

Let's modify the page information

Then clone the recharge page

Modify the page information

And then we were in iconfont Download an icon , Modify the third module of the home page for member consumption

Then click the cloud icon of the image component to upload the icon resource and select

Modify the content of the text component for member consumption

We add a jump event to the container component , In order to jump to the member consumption list page when clicking

In addition, the click event on the member consumption list page needs to be changed to the member consumption page , We originally implemented it using a low code approach , Let's still use the low code , Create a new method to jump to the details page

The specific code is as follows ：

export default function({event, data}) {

app.navigateTo({

pageId: 'minus', // page Id

params: {memberid: data.target},

});

}

Then change the click event of the list to the new method

After the list page is modified , We need to modify the consumption page , Specifically, modify the title of the page , Method of submission

1.5 Preview release

After the page is modified, we click preview , Live preview , To test whether our function is normal

1.6 The next trailer

In the next article, we will develop the invoice management function , See you next time