Selection of provinces and cities
Function introduction: you can choose the provinces and cities, can also reverse the selection, at the beginning of all the data taken for processing
<view class="address-selection"> <van-tabs active="{{active}}" animated > <van-tab title="{{addressInfo.province.name}}" class="padding-left content"> <scroll-view scroll-y style="height:{{scrollHeight}}rpx"> <view wx:for="{{provinceList}}" wx:key="index"> <view bind:tap="chooseProvince" data-obj="{{item}}" class="item {{addressInfo.province.code===item.code ? 'select' : ''}}"> {{item.name}}<image src="{{selectAddress}}" wx:if="{{addressInfo.province.code===item.code}}" class="icon"></image> </view> </view> </scroll-view> </van-tab> <van-tab title="{{addressInfo.city.name}}" Disabled = "{{addressInfo. Province. Name = = = 'please select'}}" > < scroll - view scroll - y style = "height: {{scrollHeight}} the RPX" > < the view wx:for="{{cityList}}" wx:key="index"> <view bind:tap="chooseCity" data-obj="{{item}}" class="item {{addressInfo.city.code===item.code ? 'select' : ''}}"> {{item.name}}<image src="{{selectAddress}}" wx:if="{{addressInfo.city.code===item.code}}" class="icon"></image> </view> </view> </scroll-view> </van-tab> <van-tab title="{{addressInfo.district.name}}" Disabled ="{{addressinfo.city. name===' Please select '}}"> < scrollHeight scrolly style="height:{{scrollHeight}} RPX "> <view wx:for="{{areaList}}" wx:key="index"> <view bind:tap="chooseArea" data-obj="{{item}}" class="item {{addressInfo.district.code===item.code ? 'select' : ''}}"> {{item.name}}<image src="{{selectAddress}}" wx:if="{{addressInfo.district.code===item.code}}" class="icon"></image> </view> </view> </scroll-view> </van-tab> <van-tab title="{{addressInfo.street.name}}" Disabled ="{{addressInfo.street.name===' Please select '}}" wx:if="{{isShowStreet}}"> <scroll-view scroll-y style="height:{{scrollHeight}}rpx"> <view wx:for="{{streetList}}" wx:key="index"> <view bind:tap="chooseStreet" data-obj="{{item}}" class="item {{addressInfo.street.code===item.code ? 'select' : ''}}"> {{item.name}}<image src="{{selectAddress}}" wx:if="{{addressInfo.street.code===item.code}}" class="icon"></image> </view> </view> </scroll-view> </van-tab> </van-tabs> </view>Copy the code// js
const util = require('../../utils/util.js')
const api = require('../../config/api.js')
const wxUtil = require('../../utils/wxUtil.js')
Page({
data: {
active: 0, // 选中的tab
addressInfo: {
province: { name: '请选择', code: '' }, // 选中的省
city: { name: '请选择', code: '' }, // 选中的市
district: { name: '请选择', code: '' }, // 选中的区
street: { name: '请选择', code: '' } // 选中的街道
},
provinceList: [], // 省份列表
cityList: [], // 市列表
areaList: [], // 区列表
streetList: [], // 街道列表
isShowStreet: false, // 是否显示街道
options: {},
scrollHeight: 0,
selectAddress: `${api.imgUrl}/login/selectAddress.png`
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({ options })
if (options.type === 'street') {
this.setData({ isShowStreet: true })
if (options.streetCode) {
this.setData({
['addressInfo.street']: { name: options.streetName, code: options.streetCode }
})
this.getStreetList(options)
} else {
this.handleAddress()
}
} else {
let code = options.type === '2' ? wx.getStorageSync('replaceAddressInfo').district.code || '' : wx.getStorageSync('addressInfo').district.code || ''
this.handleAddress(code ? 'areaCode' : '', code)
}
wxUtil.getClientHeight().then((res) => {
this.setData({ scrollHeight: res - 100 })
})
},
/**
* 获取街道数据
*/
getStreetList(options) {
util.request(api.regionList, { parentCode: options.areaCode }).then(res => {
if (res.code === 0) {
this.setData({ streetList: res.data })
this.handleAddress('areaCode', options.areaCode)
}
})
},
/**
* 处理省市区街道数据
*/
handleAddress(type, code) {
let [provinceList, cityList, areaList] = [
[],
[],
[]
]
let addressList = wx.getStorageSync('allAddressList')
for (let item of addressList) {
provinceList.push({ name: item.name, code: item.code })
for (let i of item.children) {
if (type === 'proviceCode' && item.code === code) {
cityList.push({ name: i.name, code: i.code })
}
for (let o of i.children) {
if (type === 'cityCode' && i.code === code) {
areaList.push({ name: o.name, code: o.code })
}
if (type === 'areaCode' && o.code === code) {
for (let p of item.children) {
cityList.push({ name: p.name, code: p.code })
}
for (let a of i.children) {
areaList.push({ name: a.name, code: a.code })
}
this.setData({
cityList,
areaList,
['addressInfo.province']: { name: item.name, code: item.code },
['addressInfo.city']: { name: i.name, code: i.code },
['addressInfo.district']: { name: o.name, code: o.code },
active: this.data.isShowStreet ? 3 : 2
})
}
}
}
}
this.setData({ provinceList })
if (type === 'proviceCode') {
this.setData({ cityList })
} else if (type === 'cityCode') {
this.setData({ areaList })
}
},
/**
* 省份选择
*
*/
chooseProvince(e) {
let obj = e.target.dataset.obj
this.setData({
['addressInfo.province']: { name: obj.name, code: obj.code },
['addressInfo.city']: { name: '请选择', code: '' },
['addressInfo.district']: { name: '请选择', code: '' },
['addressInfo.street']: { name: '请选择', code: '' },
active: 1
})
this.handleAddress('proviceCode', obj.code)
},
/**
* 市选择
*/
chooseCity(e) {
let obj = e.target.dataset.obj
this.setData({ active: 1 })
this.setData({
['addressInfo.city']: { name: obj.name, code: obj.code },
['addressInfo.district']: { name: '请选择', code: '' },
['addressInfo.street']: { name: '请选择', code: '' },
active: 2
})
this.handleAddress('cityCode', obj.code)
},
/**
* 区选择
*/
chooseArea(e) {
let obj = e.target.dataset.obj
if (this.data.isShowStreet) {
obj.areaCode = obj.code
this.setData({ active: 2 })
this.setData({
['addressInfo.district']: { name: obj.name, code: obj.code },
['addressInfo.street']: { name: '请选择', code: '' },
active: 3
})
this.getStreetList(obj)
} else {
this.setData({
['addressInfo.district']: { name: obj.name, code: obj.code }
})
let addressObj = this.data.addressInfo
util.request(api.geoCoder, {
address: addressObj.province.name + addressObj.city.name + addressObj.district.name
}).then(res => {
if (res.code === 0) {
if (this.data.options.type === '2') {
wx.setStorageSync('replaceAddressInfo', addressObj)
wx.setStorageSync('replaceLocation', `${res.data.lat},${res.data.lng}`)
wx.navigateBack({ delta: 1 })
} else {
wx.setStorageSync('isSave', true)
wx.setStorageSync('addressInfo', addressObj)
wx.setStorageSync('replaceAddressInfo', addressObj)
wx.setStorageSync('mapLocation', `${res.data.lat},${res.data.lng}`)
wx.getSetting({
success: (result) => {
if (result.authSetting['scope.userLocation'] === false) {
wx.setStorageSync('location', `${res.data.lat},${res.data.lng}`)
}
wx.navigateBack({ delta: 1 })
}
})
}
}
})
}
},
/**
* 街道选择
*/
chooseStreet(e) {
let obj = e.target.dataset.obj
this.setData({
['addressInfo.street']: { name: obj.name, code: obj.code }
})
let curPages = getCurrentPages()
let prevPage = curPages[curPages.length - 2]
let data = this.data.addressInfo
prevPage.setData({
isShowStreet: false,
['addressInfo.provinceName']: data.province.name,
['addressInfo.cityName']: data.city.name,
['addressInfo.areaName']: data.district.name,
['addressInfo.streetName']: data.street.name,
['addressInfo.provinceCode']: data.province.code,
['addressInfo.cityCode']: data.city.code,
['addressInfo.areaCode']: data.district.code,
['addressInfo.streetCode']: data.street.code,
['addressInfo.address']: data.province.name + data.city.name + data.district.name + data.street.name
})
wx.navigateBack({ delta: 1 })
}
Copy the codeClick to generate the poster and save it to your phone
// generatePosters() {if (wx.getStoragesync ('fromFriendCircle')) {return wx.showtoast ({title: 'Please go to small program to use full service ', icon:' None '})} let STR = json.stringify ({shopNo: this.data.shopNo || '' }) util.request(api.longToShort, { url: str }, 'POST', '', 'application/x-www-form-urlencoded').then(res => { if (res.code === 0) { let self = this let appId = 'wxb0a7f7ab522f1f20' let params = { appId, scene: res.data, page: 'pages/caseDetail/caseDetail', width: 300} wx.showLoading({title: '... ' }) util.request(api.generateMiniCode, params, 'POST').then(res => { if (res.code === 0) { self.setData({ imgData: res.data }) wx.downloadFile({ url: self.data.programDetail.picUrls[0], success(res) { self.drawCanvas(res.tempFilePath) } }) } else { wx.hideLoading() } }).catch(() => wx.hideLoading()) } }) }, DrawCanvas (tempFilePath) {let self = this const CTX = wx.createcanvasContext ('myCanvas'); ctx.setFillStyle('#ffffff') ctx.fillRect(0, 0, 255, 1000) ctx.drawImage(tempFilePath, 28, 13, 200, Ctx.setfontsize (12) ctx.setfillstyle ('#FF3B30') ctx.textalign = 'start' ctx.stroke() // ctx.setfontsize (18) Font = "bold 18px Arial "ctx.setFillstyle ('#FF3B30') ctx.textalign = 'start' ctx.stroke() // SpU name ctx.setFontSize(13) ctx.setFillStyle('#333333') let str = self.data.programDetail.title let lineWidth = 0 let limitWidth = 220 // Calculate the canvas width let initHeight = 255 // Draw the font height from the top of the canvas let lastSubStrIndex = 0 // The index of the string truncate each time self.getWeixinImg().then((result) => { wx.hideLoading() self.setData({ base64Img: result, isShowOverlay: true, isShowSheet: false }) ctx.drawImage(result, 21, 62, Ctx.setfontsize (11) ctx.setfillstyle ('#999999') ctx.textalign = 'start' ctx.filltext (' long press to find the code in the image ', 100, 300) ctx.stroke() self.setData({ canvasHeight: SetTimeout (() => {ctx.draw(false, () => {wx.canvastotempFilepath ({canvasId:) {ctx.draw(false, () => {wx.canvastotempFilepath ({canvasId:); 'myCanvas', success(res) { self.setData({ posterImg: Res.tempfilepath})}, fail(err) {console.log(' image address failed ', err)}}, self)}) wx.hideloading ()}, 500) }).catch(() => wx.hideLoading()) }, /** */ getWeixinImg() {const FSM = wx.getfilesystemManager () return new Promise() reject) => { let number = Math.random() const filePath = wx.env.USER_DATA_PATH + `/pic${number}.png` fsm.writeFile({ filePath: filePath, data: wx.base64ToArrayBuffer(this.data.imgData), encoding: 'binary', success() { resolve(filePath) }, fail(err) { reject(new Error('ERROR_BASE64SRC_WRITE')) } }) }) }, DownPic () {let self = this let fileManager = wx.getfilesystemManager () let number = math.random () fileManager.writeFile({ filePath: wx.env.USER_DATA_PATH + `/pic${number}.png`, data: self.data.imgData, encoding: 'base64', success: response => { wx.getSetting({ success: (result) => {if (result.authSetting[' scope.writephotosalbum '] === false) {wx.showModal({title: 'Authorized to save images ', content: ConfirmText: 'confirmText ', cancelText:' reject ', success(res) {if (res.confirm) {wx.opensetting ({success: Function () {console.log(' open ')}})} if (res.cancel) {util. ShowErrorToast (' failed to save image ')}})} else if (result.authSetting['scope.writePhotosAlbum'] === true) { self.saveImage() } else if (result.authSetting['scope.writePhotosAlbum'] === undefined) { self.saveImage() } } }) } }) }, / save the photo album * * * * / saveImage () {wx. SaveImageToPhotosAlbum ({filePath: This.data.posterimg, success() {util. ShowErrorToast ()}, fail() {util. ShowErrorToast ()}})}Copy the codeApplets request encapsulation
/** */ function request(url, data = {}, method = "GET", Authorization, type) { let token = wx.getStorageSync('token') let Bearer = token ? `Bearer ${token}` : undefined return new Promise(function(resolve, reject) { wx.request({ url: url, data: data, method: method, header: { 'Content-Type': type ? type : 'application/json', 'X-Litemall-Token': token, Authorization: Authorization ? Authorization : Bearer }, success: function(res) { if (res.data.code == 401 || res.data.code == 403) { clearTimeout(timeout) timeout = setTimeout(() => { wx.navigateTo({ url: '/pages/auth/login/login' }) }, 600) return } if (res.data.code ! == 0) { let isSkip = false let pages = getCurrentPages() let view = pages[pages.length - 1] if ((view && view.__route__ === 'pages/indexPage/indexPage' && res.data.code === 10300) || (view && view.__route__ === 'pages/home/goodsDetail/goodsDetail' && res.data.code === 6003) || res.data.code === 30105) isSkip = true if (! isSkip) showErrorToast(res.data.msg || res.data.message) } if (res.statusCode == 200) { resolve(res.data) } else { Reject (res.errmsg)}}, fail: function(err) {showErrorToast(' reject ', reject(err)}})})}Copy the code