“This is the 14th day of my participation in the First Challenge 2022.
preface
Hello everyone, today we continue to realize our kind of gold digging APP project. In the previous sharing, we have realized the display of the current total number of ore, the pop-up display of lottery rules, the display of prizes in the wheel of fortune and style debugging. Then the next step is the exciting raffle. The functions to be implemented in this sharing are as follows:
- Draw a button
- Achieve free smoking, single smoking
Draw a button
In the last share, we just implemented the wheel of Fortune, but in order for the wheel to work, you need something to trigger it, and yes, you need a button to trigger it. As you know, there are three kinds of lucky draw: one free draw, single draw (200 ore consumption) and ten consecutive draw (2000 ore consumption). We also realize two buttons and three kinds of functions.
- The one-swipe button: it is the same button as the one-swipe button, but the text is different. In the GET interface we used last time to share, the return value free_count corresponds to the number of times of one-swipe. If the value is not 0, the text of the button will be displayed as one-swipe
- Single draw: The same button as the free draw button. If free_count is 0, it indicates that the free draw button has participated in the free draw. The text of the button is single draw, with an ore icon and the word 200
- Ten even draw, is a single button click to achieve ten times lucky draw
The code and effects are shown below
<div id="cost-box" class="cost-box">
<div id="turntable-item-0" class="turntable-item lottery">
<div v-if="freeCount > 0" class="lottery-text" @click="draw(0)">Avoid smoking again</div>
<div v-else>
<div class="lottery-text" @click="draw(1)" >Single pump</div>
<div class="icon-num-box">
<! -- SVG image omitted -->
<div class="text">200</div>
</div>
</div>
</div>
<div id="turntable-item-1" class="turntable-item lottery">
<div class="lottery-text" @click="draw(10)">Ten even smoke</div>
<div class="icon-num-box">
<! -- SVG image omitted -->
<div class="text">2000</div>
</div>
</div>
</div>
Copy the code
Implement draw
First draw is divided into three types, and in the draw button above we have been analyzed, when after the success of the sign in page will jump to lottery, at this time have a chance to free lottery, at the same time the first button text display “no smoke once”, when has been involved in lottery free after the first button text into a single pump at the same time the following will have a 200 tons of ore. When the lottery is completed, the lottery results will be presented to us in a popover. Through the network analysis of the browser, we found that the no-draw and single-draw both used the same INTERFACE DRAW of POST request, but the parameters were different. The no-draw only needed to transfer cookie information, while the single-draw needed to transfer a token information at the same time as cookie information, and the parameter name was: _signature. The data returned by this interface contains information about the prize selected, as shown in the figure below
- We first wrapped two apis in our NodeJS server project to call the official draw interface
- Back to the front-end type gold mining project, define draw in the setup method of luck.vue, and receive a type as a parameter: 0 for no-draw interface, 1 for single-draw interface, 10 for ten-draw API
- When the no-draw interface is successfully called, the lottery results need to be displayed to the user in the form of a pop-up window. Meanwhile, the getLuck interface (the corresponding official GET interface) needs to be called again to update the no-draw number data freeCount, and the getPoint interface is called to update the total number of ores
- When the button changes to a single draw, it needs to pass 1 to the type parameter of the draw method and request the single draw API at the same time. After the request is successful, the draw results will also be displayed in the popup window. At the same time, it needs to call the getLuck interface (i.e. the corresponding official GET interface) again to update the data freeCount. Call the getPoint interface to update the total ore count
The core code and effect are as follows:
const showResult = function (name, image) {
Dialog.alert({
title: 'Congratulations on the draw${name}`,
allowHtml,
message: `<div><img src="${image}" alt="image" /></div>; `.theme: "round-button".confirmButtonText: "Take the prize.".messageAlign: "left",
}).then(() = > {
api.getLuck().then((res) = > {
state.lottery = res.data.lottery;
state.freeCount = res.data.free_count;
});
api.getPoint().then((res) = > {
state.currentPoint = res.data;
});
});
};
const draw = function (type) {
console.log(type);
if (type === 0) {
// No need to smoke once
api.drawFree().then((res) = > {
showResult(res.data.lottery_name, res.data.lottery_image);
});
} else if (type === 1) {
// Single pump consumes 200 ore
api.draw1().then((res) = > {
showResult(res.data.lottery_name, res.data.lottery_image);
});
} else if (type === 10) {
/ / ten even smoke}};Copy the code
conclusion
In this sharing, we have realized the drawing function of free drawing once and single drawing (consuming 200 ore), and the drawing result is told to the user in the form of popover. Although the drawing function of free drawing and single drawing has been realized, there is still one of the biggest shortcomings: When the lucky wheel did not turn the effect, pop out the results of the lottery, which is obviously not very good experience. In the next sharing, we will realize the effect of ten consecutive draws and the rotation of the wheel of fortune. This share is here first, welcome friends to like and pay attention to oh!