Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use WeChat Mini Programs selector". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use WeChat Mini Programs selector" can help you solve the problem.

Page structure

Please select the fault type

{{item.value}}

Take pictures of the environment around the bike, making it easy for the maintenance master to find the car.

{{actionText}}

Submit

Copy the code

Page data logic

/ / pages/wallet/index.js

Page ({

Data: {

/ / path array of the environment map around the faulty vehicle

PicUrls: []

/ / number and remarks of faulty car

InputValue: {

Num: 0

Desc: ""

}

/ / an array of fault types

CheckboxValue: []

/ / Select the picture prompt

ActionText: "Photo / album"

/ / the background color of the submit button. There is no color when the type is not checked.

BtnBgc: ""

/ / value of the check box, predefined here, and then rendered in a loop to the page

ItemsValue: [

{

Checked: false

Value: "Private lock for private use"

Color: "# b9dd08"

}

{

Checked: false

Value: license plate defect

Color: "# b9dd08"

}

{

Checked: false

Value: "the tire is broken."

Color: "# b9dd08"

}

{

Checked: false

Value: "the lock is broken."

Color: "# b9dd08"

}

{

Checked: false

Value: "illegal parking"

Color: "# b9dd08"

}

{

Checked: false

Value: "the password is incorrect"

Color: "# b9dd08"

}

{

Checked: false

Value: the brakes are broken.

Color: "# b9dd08"

}

{

Checked: false

Value: "other failures"

Color: "# b9dd08"

}

]

}

/ / Page loading

OnLoad:function (options) {

Wx.setNavigationBarTitle ({

Title: 'malfunction repair'

})

}

/ / check the fault type, get the type value and store it in checkboxValue

CheckboxChange: function (e) {

Let _ values = e.detail.value

If (_ values.length = = 0) {

This.setData ({

BtnBgc: ""

})

} else {

This.setData ({

CheckboxValue: _ values

BtnBgc: "# b9dd08"

})

}

}

/ / enter the bike number and deposit it in inputValue

NumberChange: function (e) {

This.setData ({

InputValue: {

Num: e.detail.value

Desc: this.data.inputValue.desc

}

})

}

/ / enter comments and deposit them in inputValue

DescChange: function (e) {

This.setData ({

InputValue: {

Num: this.data.inputValue.num

Desc: e.detail.value

}

})

}

/ / submit to the server

FormSubmit: function (e) {

/ / Picture and fault type are required

If (this.data.picUrls.length > 0 & & this.data.checkboxValue.length > 0) {

Wx.request ({

Url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',

Data: {

/ / if it is a post request, send the data to the server. Here, simulate the get request and pretend to get feedback from the server.

/ / picUrls: this.data.picUrls

/ / inputValue: this.data.inputValue

/ / checkboxValue: this.data.checkboxValue

}

Method: 'get', / /

/ / header: {}, / / set the requested header

Success: function (res) {

Wx.showToast ({

Title: res.data.data.msg

Icon: 'success'

Duration: 2000

})

}

})

} else {

Wx.showModal ({

Title: "Please fill in the feedback"

Content: "what are you looking at? fill in the feedback and cut you."

ConfirmText: "I'll fill it out"

CancelText: "Labor and capital are not filled in"

Success: (res) = > {

If (res.confirm) {

/ / continue to fill in

} else {

Console.log ("back")

Wx.navigateBack ({

Delta: 1 / / delta before fallback (default is 1) page

})

}

}

})

}

}

/ / Select a picture of the environment around the faulty car or select a photo album.

BindCamera: function () {

Wx.chooseImage ({

Count: 4

SizeType: ['original',' compressed']

SourceType: ['album',' camera']

Success: (res) = > {

Let tfps = res.tempFilePaths; / / Local path of the picture

Let _ picUrls = this.data.picUrls

For (let item of tfps) {

_ picUrls.push (item)

This.setData ({

PicUrls: _ picUrls

ActionText: "+"

});

}

}

})

}

/ / Delete the environment map around the selected faulty vehicle

DelPic: function (e) {

Let index = e.target.dataset.index

Let _ picUrls = this.data.picUrls

_ picUrls.splice (index,1)

This.setData ({

PicUrls: _ picUrls

})

}

})

This is the end of the content about "how to use WeChat Mini Programs selector". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.