@ -0,0 +1,90 @@ |
||||
import { |
||||
POST |
||||
} from "./Request.js"; |
||||
let app = getApp(); |
||||
let base = app.globalData.url; |
||||
// let orderbase = app.globalData.orderurl;
|
||||
// let userbase = app.globalData.userurl;
|
||||
// let v1base = app.globalData.v1url;
|
||||
// let brestBase = app.globalData.brestUrl;
|
||||
// let payBase = app.globalData.payurl;
|
||||
|
||||
|
||||
// 查询分类树
|
||||
export const getGoodsTypeTree = params => { |
||||
return POST('GET', `${base}/goods/getGoodsTypeTree`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 查询商品列表
|
||||
export const getListGoodsDetail = params => { |
||||
return POST('GET', `${base}/goods/getListGoodsDetail`, params).then(res => res.data); |
||||
} |
||||
|
||||
//根据商品id查询商品详情
|
||||
export const findGoodsDetailById = params => { |
||||
return POST('GET', `${base}/goods/findGoodsDetailById`, params).then(res => res.data); |
||||
} |
||||
// 查询商品规格
|
||||
export const findGoodsSkuByGoodsId = params => { |
||||
return POST('GET', `${base}/goods/findGoodsSkuByGoodsId`, params).then(res => res.data); |
||||
} |
||||
|
||||
|
||||
// 新增购物车内容
|
||||
export const insertShoppingCart = params => { |
||||
|
||||
return POST('POST', `${base}/shoppingCart/insertShoppingCart`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 增加商品数量
|
||||
export const goodsAddNum = params => { |
||||
return POST('GET', `${base}/shoppingCart/goodsAddNum`, params).then(res => res.data); |
||||
} |
||||
// 删除购物车商品
|
||||
export const deleteShoppingCart = params => { |
||||
return POST('GET', `${base}/shoppingCart/deleteShoppingCart`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 查询购物车列表
|
||||
export const getShoppingCartList = params => { |
||||
return POST('GET', `${base}/shoppingCart/getShoppingCartList`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 查询区域列表
|
||||
export const getRegional = params => { |
||||
return POST('GET', `${base}/common/getRegional`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 新增收获地址
|
||||
export const insertDeliveryAddress = params => { |
||||
return POST('POST', `${base}/deliveryAddress/insertDeliveryAddress`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 更新收货地址
|
||||
export const updateDeliveryAddress = params => { |
||||
return POST('POST', `${base}/deliveryAddress/updateDeliveryAddress`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 查询收货地址列表
|
||||
export const getDeliveryAddressList = params => { |
||||
return POST('GET', `${base}/deliveryAddress/getDeliveryAddressList`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 根据id 查询收货地址详情
|
||||
export const findDeliveryAddressById = params => { |
||||
return POST('GET', `${base}/deliveryAddress/findDeliveryAddressById`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 根据id 删除收货地址
|
||||
export const deleteAddress = params => { |
||||
return POST('GET', `${base}/deliveryAddress/deleteShoppingCart`, params).then(res => res.data); |
||||
} |
||||
|
||||
// 查询物流信息
|
||||
export const getLogisticsMsg = params => { |
||||
return POST('GET', `${base}/goods/getLogisticsMsg`, params).then(res => res.data); |
||||
} |
||||
// 根据区域查询运费和包邮价格
|
||||
export const getRegionFreight = params => { |
||||
return POST('GET', `${base}/common/getRegionFreight`, params).then(res => res.data); |
||||
} |
@ -0,0 +1,162 @@ |
||||
<template> |
||||
<picker mode="multiSelector" |
||||
:value="multiIndex" |
||||
:range="multiArray" |
||||
@change="handleValueChange" |
||||
@columnchange="handleColumnChange"> |
||||
<slot></slot> |
||||
</picker> |
||||
</template> |
||||
|
||||
<script> |
||||
// let CHINA_REGIONS = require('./regions.json') |
||||
import { getRegional } from '@/Utils/physicalObject.js' |
||||
|
||||
// let CHINA_REGIONS = [{childs:[{childs:[]}]}]; |
||||
// getRegional().then(res=>{ |
||||
// CHINA_REGIONS = res.return_data; |
||||
// }) |
||||
|
||||
export default { |
||||
props:{ |
||||
defaultRegions:{ |
||||
type:Array, |
||||
default(){ |
||||
return [] |
||||
} |
||||
}, |
||||
defaultRegionCode:{ |
||||
type:String |
||||
}, |
||||
defaultRegion:[String,Array] |
||||
}, |
||||
data() { |
||||
return { |
||||
CHINA_REGIONS:[{childs:[{childs:[]}]}], |
||||
// cityArr:CHINA_REGIONS[0].childs, |
||||
// districtArr:CHINA_REGIONS[0].childs[0].childs, |
||||
cityArr:[{}], |
||||
districtArr:[{}], |
||||
multiIndex: [0, 0, 0], |
||||
isInitMultiArray:true, |
||||
} |
||||
}, |
||||
created(){ |
||||
getRegional().then(res=>{ |
||||
this.CHINA_REGIONS = res.return_data; |
||||
|
||||
this.CHINA_REGIONS.map(item=>{ |
||||
if(!item.childs){ |
||||
item.childs = []; |
||||
} |
||||
}) |
||||
|
||||
this.cityArr =this.CHINA_REGIONS[0].childs; |
||||
this.districtArr = this.CHINA_REGIONS[0].childs[0].childs; |
||||
// console.log(res.return_data,11) |
||||
}) |
||||
}, |
||||
watch:{ |
||||
defaultRegion:{ |
||||
handler(region,oldRegion){ |
||||
if(Array.isArray(region)){ |
||||
// 避免传的是字面量的时候重复触发 |
||||
oldRegion = oldRegion || [] |
||||
if(region.join('')!==oldRegion.join('')){ |
||||
this.handleDefaultRegion(region) |
||||
} |
||||
}else if(region&®ion.length == 6){ |
||||
this.handleDefaultRegion(region) |
||||
}else{ |
||||
console.warn('defaultRegion非有效格式') |
||||
} |
||||
}, |
||||
immediate:true, |
||||
} |
||||
}, |
||||
computed:{ |
||||
multiArray(){ |
||||
return this.pickedArr.map(arr=>arr.map(item=>item.name)) |
||||
}, |
||||
pickedArr(){ |
||||
// 进行初始化 |
||||
if(this.isInitMultiArray){ |
||||
return [ |
||||
this.CHINA_REGIONS, |
||||
this.CHINA_REGIONS[0].childs, |
||||
this.CHINA_REGIONS[0].childs[0].childs |
||||
] |
||||
} |
||||
return [this.CHINA_REGIONS,this.cityArr,this.districtArr]; |
||||
} |
||||
}, |
||||
methods: { |
||||
handleColumnChange(e){ |
||||
// console.log(e); |
||||
this.isInitMultiArray = false; |
||||
const that = this; |
||||
let col = e.detail.column; |
||||
let row = e.detail.value; |
||||
that.multiIndex[col] = row; |
||||
try{ |
||||
switch(col){ |
||||
case 0: |
||||
if(this.CHINA_REGIONS[that.multiIndex[0]].childs.length==0){ |
||||
that.cityArr = that.districtArr = [this.CHINA_REGIONS[that.multiIndex[0]]] |
||||
break; |
||||
} |
||||
that.cityArr = this.CHINA_REGIONS[that.multiIndex[0]].childs |
||||
that.districtArr = this.CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs |
||||
break; |
||||
case 1: |
||||
that.districtArr = this.CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs |
||||
break; |
||||
case 2: |
||||
break; |
||||
} |
||||
}catch(e){ |
||||
// console.log(e); |
||||
that.districtArr = this.CHINA_REGIONS[that.multiIndex[0]].childs[0].childs |
||||
} |
||||
|
||||
}, |
||||
handleValueChange(e){ |
||||
// 结构赋值 |
||||
let [index0,index1,index2] = e.detail.value; |
||||
let [arr0,arr1,arr2] = this.pickedArr; |
||||
let address = [arr0[index0],arr1[index1],arr2[index2]]; |
||||
// console.log(address); |
||||
this.$emit('getRegion',address) |
||||
}, |
||||
handleDefaultRegion(region){ |
||||
const isCode = !Array.isArray(region) |
||||
this.isInitMultiArray = false; |
||||
let children = this.CHINA_REGIONS |
||||
for(let i=0;i<3;i++){ |
||||
for(let j=0;j<children.length;j++){ |
||||
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]); |
||||
if(condition){ |
||||
// 匹配成功进行赋值 |
||||
// console.log(i,j,children.length-1); |
||||
children = children[j].childs; |
||||
if(i==0){ |
||||
this.cityArr = children |
||||
}else if(i==1){ |
||||
this.districtArr = children |
||||
} |
||||
this.$set(this.multiIndex,i,j) |
||||
// console.log(this.multiIndex); |
||||
break; |
||||
}else{ |
||||
// 首次匹配失败就用默认的初始化 |
||||
// console.log(i,j,children.length-1); |
||||
if(i==0 && j==(children.length-1)){ |
||||
this.isInitMultiArray = true; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
</script> |
@ -1,350 +1,448 @@ |
||||
<template> |
||||
<view class="container"> |
||||
|
||||
<view class='addAddress'> |
||||
<!-- <view class="pad30"> |
||||
<view class='default acea-row row-middle borderRadius15'> |
||||
<input v-model="addressValue" type="text" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" |
||||
placeholder-class='placeholder' style="width:100%;" |
||||
@blur="identify()"> |
||||
<view class="page-bottom-fixed backcor9"> |
||||
<form @submit="form_submit" class="form-container"> |
||||
<view class="pd-main height100"> |
||||
<view class="form-gorup backcolorfff"> |
||||
<view class="form-gorup-item-left"> |
||||
<view class="form-gorup-title marb10">联系人<text class="form-group-tips-must">*</text></view> |
||||
<input type="text" name="name" v-model="userAddress.name" maxlength="5" |
||||
placeholder-class="fcor666" class="fcor666 " placeholder="联系人2~5个字符"> |
||||
</view> |
||||
</view> --> |
||||
<view class="pad30 mt-22"> |
||||
<view class='list borderRadius15'> |
||||
<uni-forms ref="form" label-position="left" :modelValue="userAddress"> |
||||
<uni-forms-item label="姓名" name="real_name" class='item acea-row row-between-wrapper'> |
||||
<view class="form-gorup-item-right"> |
||||
<view class="form-gorup-title marb10">联系电话<text class="form-group-tips-must">*</text></view> |
||||
<input type="text" name="tel" v-model="userAddress.tel" maxlength="11" |
||||
placeholder-class="fcor666" class="fcor666" placeholder="手机号"> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-gorup backcolorfff"> |
||||
|
||||
<input type='text' placeholder='请输入姓名' name='real_name' :value="userAddress.real_name" |
||||
placeholder-class='placeholder' class="width100"></input> |
||||
</uni-forms-item> |
||||
<!-- <view> --> |
||||
<!-- <view class="form-gorup-title">省市区<text class="form-group-tips-must">必选</text></view> --> |
||||
<!-- <view class="dis-flex flex-sp" @click="chooseAddress"> |
||||
<input type='text' placeholder='请选择地址' :disabled="true" name='region' |
||||
:value='userAddress.region' class="fcor666 flex-1"> |
||||
<view class="icon-ymt to-right font14 fcor666"> |
||||
|
||||
<uni-forms-item label="联系电话" name="phone" class='item acea-row row-between-wrapper'> |
||||
</view> |
||||
|
||||
<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone' |
||||
placeholder-class='placeholder' pattern="\d*"></input> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="所在地区" name="region" class='item acea-row row-between-wrapper'> |
||||
|
||||
<view class="address acea-row row-between height100" @click="chooseAddress"> |
||||
<input type='text' placeholder='请选择地址' :disabled="true" name='region' placeholder-class='placeholder' |
||||
v-model='userAddress.region' class="detail"></input> |
||||
</view> --> |
||||
<!-- --> |
||||
<view class=""> |
||||
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion"> |
||||
<view class="dis-flex flex-sp form-gorup-title"> |
||||
<view class=" flex-1">点击选择省市区<text class="form-group-tips-must">必选</text></view> |
||||
<!-- <input type='text' placeholder='请选择地址' :disabled="false" name='region' |
||||
v-model='userAddress.region' class=" flex-1 fcor333" placeholder-class="fcor333" style="font-size: 16px;"> |
||||
--> |
||||
<view class="icon-ymt to-right font14 fcor666"> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</uni-forms-item> |
||||
</pick-regions> |
||||
<view class="font15 fcor666" style="height: 20px;line-height: 20px;">{{userAddress.region || '请选择'}}</view> |
||||
</view> |
||||
|
||||
|
||||
<!-- </view> --> |
||||
|
||||
<uni-forms-item label="详细地址" name="detail" class='item acea-row row-between-wrapper'> |
||||
<view style="clear: both;"> |
||||
<view class="form-gorup-title">详细地址<text class="form-group-tips-must">*</text> |
||||
|
||||
</view> |
||||
<input type="text" name="address" v-model="userAddress.address" maxlength="40" |
||||
placeholder-class="fcor666" :class="'fcor666 bs-bb '" placeholder="详细地址1~40个字符"> |
||||
|
||||
</view> |
||||
|
||||
<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder' |
||||
v-model='userAddress.detail' class="detail"></input> |
||||
</view> |
||||
|
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<view class="default-checkbox " @click="defaultChange"> |
||||
<radio :checked="userAddress.is_default" style="transform:scale(0.7)" color="#FF1A34" /> |
||||
<text class="">设为默认地址</text> |
||||
</view> |
||||
|
||||
<view class="bottom-fixed padding-main"> |
||||
<button class=" " type="default" form-type="submit">保存</button> |
||||
</view> |
||||
<button class='keepBnt bg-color' @click="formSubmit">立即保存</button> |
||||
</view> |
||||
|
||||
|
||||
|
||||
<AddressPicker ref="AddressPicker" @getAddress="getAddress"></AddressPicker> |
||||
</form> |
||||
|
||||
</view> |
||||
</template> |
||||
<script> |
||||
import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue' |
||||
import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue' |
||||
|
||||
import AddressPicker from '@/pages/address/addNewAddress/addressPicker.vue' |
||||
let dataList = require('./address.json') |
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue' |
||||
|
||||
import {insertDeliveryAddress,findDeliveryAddressById,updateDeliveryAddress } from '@/Utils/physicalObject.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
userAddress: { |
||||
real_name:"", |
||||
phone:"", |
||||
region:"", |
||||
detail:"", |
||||
}, //地址详情 |
||||
addressValue:"", |
||||
addressId:null, |
||||
/* rulesObject:{ |
||||
real_name:{ |
||||
rules:[ |
||||
// 校验 name 不能为空 |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写姓名', |
||||
}, |
||||
// 对name字段进行长度验证 |
||||
{ |
||||
minLength: 2, |
||||
maxLength: 5, |
||||
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符', |
||||
} |
||||
], |
||||
}, |
||||
phone:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请输入手机号', |
||||
name: "", |
||||
tel: "", |
||||
region: '', |
||||
address: "", |
||||
is_default: false, |
||||
}, |
||||
{ |
||||
validateFunction: function(rule, value, data, callback) { |
||||
let iphoneReg = /^1[0-9]{10}$/ |
||||
if (!iphoneReg.test(value)) { |
||||
callback('手机号码格式不正确,请重新填写') |
||||
} |
||||
return true |
||||
} |
||||
} |
||||
dataParams: null, |
||||
// |
||||
region: [], |
||||
regionId:'', |
||||
//没用上 |
||||
defaultRegion: ['北京市', '市辖区', '东城区'], |
||||
defaultRegionCode: '120101', |
||||
|
||||
], |
||||
}, |
||||
region:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请选择地址', |
||||
}, |
||||
|
||||
], |
||||
}, |
||||
detail:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写详细地址', |
||||
}; |
||||
}, |
||||
{ |
||||
minLength: 5, |
||||
|
||||
errorMessage: '{label}长度不能少于{minLength}个字符', |
||||
} |
||||
components: { |
||||
pickRegions |
||||
|
||||
], |
||||
}, |
||||
|
||||
} |
||||
*/ |
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
AddressPicker, |
||||
"uni-forms":uniForms, |
||||
"uni-forms-item":uniFormsItem |
||||
// uniForms, |
||||
// uniFormsItem |
||||
onLoad(params) { |
||||
this.dataParams = params |
||||
}, |
||||
onReady() { |
||||
// 需要在onReady中设置规则 |
||||
// this.$refs.form.setRules(this.rulesObject) |
||||
computed: { |
||||
|
||||
// if(this.addressId){ |
||||
// uni.setNavigationBarTitle({ |
||||
// title: '编辑地址' |
||||
// }); |
||||
// regionName() { |
||||
// // 转为字符串 |
||||
// // console.log('==============='+this.region.map(item => item)) |
||||
// // this.userAddress.region = this.region.map(item => item.name).join(',') |
||||
// return this.region.map(item => item.name).join(',') |
||||
// } |
||||
}, |
||||
onLoad(options){ |
||||
|
||||
if(options.id){ |
||||
this.addressId = options.id |
||||
onReady() { |
||||
uni.setNavigationBarTitle({ |
||||
title: '编辑地址' |
||||
title: '地址'+(((this.dataParams.id || null) == null) ? '添加' : '编辑') |
||||
}); |
||||
|
||||
if(this.dataParams.id){ |
||||
this.findAddressById(this.dataParams.id) |
||||
} |
||||
|
||||
}, |
||||
|
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
identify(){ |
||||
const options = { |
||||
type: 0, // 哪种方式解析,0:正则,1:树查找 |
||||
textFilter: [], // 预清洗的字段 |
||||
nameMaxLength: 4, // 查找最大的中文名字长度 |
||||
findAddressById(id){ |
||||
let params = { |
||||
id:id |
||||
} |
||||
findDeliveryAddressById(params).then(res=>{ |
||||
if (res.return_code == '000000') { |
||||
let resData = res.return_data; |
||||
this.userAddress = { |
||||
name: resData.consignee, |
||||
tel: resData.phone, |
||||
region: resData.regionName, |
||||
address: resData.address, |
||||
is_default: resData.whetherDefault, |
||||
} |
||||
console.log(this.defaultRegionCode) |
||||
this.defaultRegionCode = resData.regionId |
||||
console.log(this.defaultRegionCode) |
||||
|
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
// type参数0表示使用正则解析,1表示采用树查找, textFilter地址预清洗过滤字段。 |
||||
// if(!!this.addressValue){ |
||||
// const parseResult = AddressParse(this.addressValue, options) |
||||
// // console.log(parseResult); |
||||
// this.userAddress.real_name = parseResult.name; |
||||
// this.userAddress.phone = parseResult.phone; |
||||
// this.userAddress.detail = parseResult.detail; |
||||
// this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area; |
||||
// } |
||||
}) |
||||
}, |
||||
|
||||
formSubmit(form) { |
||||
// 获取选择的地区 |
||||
handleGetRegion(region) { |
||||
this.region = region; |
||||
this.userAddress.region = this.region.map(item => item.name).join(','); |
||||
this.regionId = this.region[2].code; |
||||
console.log(this.userAddress.region,"获取选择的地区") |
||||
}, |
||||
// 获取数据 |
||||
init() { |
||||
|
||||
// 暂时不起作用 |
||||
}, |
||||
|
||||
// this.$refs.form.validate().then(res => { |
||||
// console.log('success', res); |
||||
// uni.showToast({ |
||||
// title: `校验通过` |
||||
// }) |
||||
// }).catch(err => { |
||||
// console.log('err', err); |
||||
// }) |
||||
|
||||
let _this = this; |
||||
|
||||
this.$refs.form.validate().then(res=>{ |
||||
console.log(_this.userAddress,res) |
||||
}) |
||||
|
||||
// 默认地址设置改变 |
||||
defaultChange(e) { |
||||
this.userAddress.is_default = !this.userAddress.is_default |
||||
}, |
||||
chooseAddress(){ |
||||
this.$refs.AddressPicker.show() |
||||
}, |
||||
getAddress(address){ |
||||
console.log(address,"address") |
||||
this.userAddress.region=address |
||||
} |
||||
|
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
background-color: #f5f5f5; |
||||
height: 100vh; |
||||
box-sizing: border-box; |
||||
padding-top:30rpx; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label .label-text{ |
||||
font-size: 30rpx !important; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item{ |
||||
width: 100% !important; |
||||
} |
||||
|
||||
.pad30 { |
||||
padding: 0 30rpx |
||||
// 数据提交 |
||||
form_submit() { |
||||
// 数据校验 |
||||
var validation = [{ |
||||
fields: "name", |
||||
msg: "请填写联系人" |
||||
}, |
||||
{ |
||||
fields: "tel", |
||||
msg: "请填写联系电话", |
||||
vali:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ |
||||
}, |
||||
{ |
||||
fields: "region", |
||||
msg: "请选择省市区" |
||||
}, |
||||
{ |
||||
fields: "address", |
||||
msg: "请填写详细地址" |
||||
} |
||||
]; |
||||
|
||||
this.fields_check(this.userAddress, validation) |
||||
|
||||
let isVali = this.fields_check(this.userAddress, validation); |
||||
if(isVali){ |
||||
|
||||
.acea-row { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.row-middle { |
||||
align-items: center |
||||
} |
||||
.row-between-wrapper { |
||||
align-items: center; |
||||
justify-content: space-between |
||||
} |
||||
.borderRadius15 { |
||||
border-radius: 15rpx !important; |
||||
if(this.dataParams.id){ |
||||
this.updateAddress(this.dataParams.id) |
||||
}else{ |
||||
this.addAddress() |
||||
} |
||||
|
||||
.addAddress .list { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.addAddress .list .item { |
||||
padding: 30rpx ; |
||||
padding-bottom: 0; |
||||
border-top: 1rpx solid #eee; |
||||
position: relative; |
||||
} |
||||
|
||||
.addAddress .list .item .detail{ |
||||
// width: 368rpx; |
||||
}, |
||||
updateAddress(id){ |
||||
let _this = this; |
||||
let params ={ |
||||
"id": id, |
||||
"address": _this.userAddress.address, |
||||
"consignee": _this.userAddress.name, |
||||
"phone": _this.userAddress.tel, |
||||
"regionId": _this.regionId, |
||||
"regionName":_this.userAddress.region, |
||||
"whetherDefault": _this.userAddress.is_default |
||||
} |
||||
updateDeliveryAddress(params).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
//调用上一个页面中的方法 |
||||
this.backPageRefresh(); |
||||
}) |
||||
}, |
||||
backPageRefresh() { |
||||
let pages = getCurrentPages(); // 当前页面 |
||||
let beforePage = pages[pages.length - 2]; // 上一页 |
||||
uni.navigateBack({ |
||||
success:function(){ |
||||
beforePage.$vm.initData(); |
||||
// console.log("返回成功!"); |
||||
} |
||||
}) |
||||
}, |
||||
addAddress(){ |
||||
let _this = this; |
||||
let params={ |
||||
"address": _this.userAddress.address, |
||||
"consignee": _this.userAddress.name, |
||||
"phone": _this.userAddress.tel, |
||||
"regionId": _this.regionId, |
||||
"regionName":_this.userAddress.region, |
||||
"whetherDefault": _this.userAddress.is_default |
||||
} |
||||
// console.log(params,this.userAddress) |
||||
insertDeliveryAddress(params).then(res=>{ |
||||
let title ; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
}else{ |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
|
||||
.addAddress .list .item .location{ |
||||
position: absolute; |
||||
right: 46rpx; |
||||
top: 50%; |
||||
margin-top: -40rpx!important; |
||||
font-size: 24rpx; |
||||
text-align: center; |
||||
} |
||||
//调用上一个页面中的方法 |
||||
_this.backPageRefresh() |
||||
|
||||
|
||||
}) |
||||
}, |
||||
|
||||
.addAddress .list .item .name { |
||||
width: 195rpx; |
||||
font-size: 30rpx; |
||||
color: #333; |
||||
/** |
||||
* 字段数据校验 |
||||
* data 待校验的数据, 一维json对象 |
||||
* validation 待校验的字段, 格式 [{fields: 'mobile', msg: '请填写手机号码', is_can_zero: 1(是否可以为0)}, ...] |
||||
*/ |
||||
fields_check(data, validation) { |
||||
|
||||
for (var i in validation) { |
||||
var temp_value = data[validation[i]["fields"]]; |
||||
if (!temp_value) { |
||||
uni.showToast({ |
||||
title: validation[i]['msg'], |
||||
duration: 1000, |
||||
icon: 'none' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
.addAddress .list .item .address { |
||||
flex: 1; |
||||
if(validation[i]["vali"]){ |
||||
console.log(validation[i]["vali"].test(this.userAddress.tel),this.userAddress.tel) |
||||
if(!(validation[i]["vali"].test(this.userAddress.tel))){ |
||||
uni.showToast({ |
||||
title: "请输入正确格式的手机号码", |
||||
duration: 1000, |
||||
icon: 'none' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon{ |
||||
width: 360rpx; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon .tip{ |
||||
font-size: 21rpx; |
||||
margin-top: 4rpx; |
||||
} |
||||
|
||||
.addAddress .list .item input { |
||||
// width: 475rpx; |
||||
flex: 1; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
height: 100%; |
||||
return true; |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.padding-main { |
||||
padding: 20rpx; |
||||
} |
||||
|
||||
.placeholder { |
||||
color: #ccc; |
||||
.bottom-fixed { |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
border: none; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.addAddress .list .item .picker { |
||||
width: 430rpx; |
||||
font-size: 30rpx; |
||||
.page-bottom-fixed { |
||||
height: 100vh; |
||||
padding-bottom: 120rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
/*表单*/ |
||||
.form-container { |
||||
height: 100%; |
||||
|
||||
.form-gorup { |
||||
padding: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
border-radius: 20rpx; |
||||
overflow: auto; |
||||
|
||||
.addAddress .default { |
||||
padding: 0 30rpx; |
||||
height: 90rpx; |
||||
background-color: #fff; |
||||
input { |
||||
border-radius: 0; |
||||
box-sizing: border-box; |
||||
font-size: 28rpx; |
||||
height: 70rpx; |
||||
line-height: 70rpx; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .keepBnt { |
||||
width: 690rpx; |
||||
height: 86rpx; |
||||
border-radius: 50rpx; |
||||
text-align: center; |
||||
line-height: 86rpx; |
||||
margin: 50rpx auto; |
||||
font-size: 32rpx; |
||||
color: #fff; |
||||
} |
||||
|
||||
.form-gorup-title { |
||||
padding: 20rpx 0; |
||||
margin-bottom: 5rpx; |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.mt-22{ |
||||
margin-top: 22rpx; |
||||
.form-gorup-item-left { |
||||
float: left; |
||||
padding-right: 20rpx; |
||||
} |
||||
.bg-color { |
||||
background-color: #dd524d; |
||||
|
||||
.form-group-tips-must { |
||||
margin-left: 20rpx; |
||||
font-size: 24rpx; |
||||
color: #f00; |
||||
} |
||||
|
||||
/* |
||||
* 三级联动 |
||||
*/ |
||||
// .select-address { |
||||
// box-sizing: border-box; |
||||
// height: 70rpx; |
||||
// line-height: 70rpx; |
||||
// padding: 0 10rpx; |
||||
// height: auto; |
||||
// overflow: auto; |
||||
// .fl{ |
||||
// float: left; |
||||
// } |
||||
// } |
||||
// .select-address .section { |
||||
// width: 33.33%; |
||||
// box-sizing: border-box; |
||||
|
||||
// } |
||||
// .select-address .section:not(:first-child) { |
||||
// padding: 0 5rpx; |
||||
// } |
||||
|
||||
/** |
||||
* 地址信息 |
||||
*/ |
||||
// .default-checkbox image { |
||||
// width: 35rpx; |
||||
// height: 35rpx !important; |
||||
// } |
||||
// .address-value { |
||||
// padding-right: 110rpx; |
||||
// } |
||||
// .map-icon { |
||||
// bottom: 0; |
||||
// right: 0; |
||||
// width: 90rpx; |
||||
// height: 80rpx; |
||||
// line-height: 80rpx; |
||||
// } |
||||
// .auto-discern { |
||||
// bottom: 20rpx; |
||||
// right: 20rpx; |
||||
// z-index: 2; |
||||
// } |
||||
// .auto-discern button { |
||||
// line-height: inherit; |
||||
// padding: 5rpx 20rpx !important; |
||||
// } |
||||
|
||||
/* |
||||
* 身份信息 |
||||
*/ |
||||
// .idcard-container { |
||||
// background: #e6e6e6; |
||||
// } |
||||
// .idcard-container .form-upload-data .item image { |
||||
// width: 256rpx; |
||||
// height: 170rpx; |
||||
// border: 1px dashed #c2c2c2; |
||||
// } |
||||
</style> |
||||
|
@ -1,171 +0,0 @@ |
||||
<template> |
||||
<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="false"> |
||||
<view class="popup"> |
||||
<view class="top-title dis-flex flex-sp pd-main border-b"> |
||||
<view class="left" @click="close">取消</view> |
||||
<view class="right" @click="confirm">确定</view> |
||||
</view> |
||||
|
||||
<picker-view :indicator-style="bootStyle" :value="selectList" @change="selectData"> |
||||
<picker-view-column> |
||||
<view class="item" v-for="(item,index) in province" :key="item.id">{{item.name}}</view> |
||||
</picker-view-column> |
||||
<!-- v-if="province[selectList[0]]" --> |
||||
<picker-view-column > |
||||
<view class="item" v-for="(item,index) in citylist" :key="index">{{item.name}}</view> |
||||
</picker-view-column> |
||||
<!-- v-if="citylist[selectList[0]]" --> |
||||
<picker-view-column > |
||||
<view class="item" v-for="(item,index) in arealist" :key="index">{{item.name}}</view> |
||||
</picker-view-column> |
||||
</picker-view> |
||||
|
||||
</view> |
||||
</wybPopup> |
||||
</template> |
||||
|
||||
<script> |
||||
import wybPopup from '@/components/wyb-popup/wyb-popup.vue' |
||||
let AllAddress = require('./address.json') |
||||
export default { |
||||
data() { |
||||
return{ |
||||
addInfo:"请选择省市区", //显示用的:广东省 广州市 天河区 |
||||
bootStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`, |
||||
selectList: [0, 0, 0], //第一个元素表示滑动省列表,以此类推 |
||||
oldSelectList:[], |
||||
province: [], // 省列表 |
||||
citylist:[], //市列表 |
||||
arealist:[], //区列表 |
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
wybPopup |
||||
}, |
||||
methods:{ |
||||
show(){ |
||||
this.province=JSON.parse(JSON.stringify(AllAddress)) ; |
||||
this.initData(); |
||||
this.$refs.popup.show() |
||||
}, |
||||
|
||||
|
||||
|
||||
//选择地址确定按钮事件 |
||||
confirm() { |
||||
|
||||
var sheng = ""; //省 |
||||
var city = ""; //市 |
||||
var area = ""; //区 |
||||
if(this.province){ |
||||
sheng = this.province[this.selectList[0]].name; |
||||
} |
||||
if(this.citylist){ |
||||
city = this.citylist[this.selectList[1]].name; |
||||
} |
||||
if(this.arealist){ |
||||
area = this.arealist[this.selectList[2]].name; |
||||
} |
||||
var value = sheng; |
||||
if(city){ |
||||
value += " " + city; |
||||
} |
||||
if(area){ |
||||
value += " " + area; |
||||
} |
||||
this.addInfo = value; |
||||
|
||||
this.$emit("getAddress",this.addInfo) |
||||
this.$refs.popup.close() |
||||
}, |
||||
|
||||
|
||||
|
||||
//关闭地址选择 |
||||
close() { |
||||
this.$refs.popup.close() |
||||
}, |
||||
// picker-view的change事件 |
||||
selectData(e) { |
||||
const val = e.detail.value; |
||||
this.oldSelectList=this.selectList; |
||||
this.selectList=val; |
||||
|
||||
let that = this; |
||||
let arr=[]; |
||||
// console.log(this.selectList,1) |
||||
this.selectList.map((item,index1)=>{ |
||||
that.oldSelectList.map((item2,index2)=>{ |
||||
|
||||
if(index1 == index2 && item != item2 ){ |
||||
if(index1!=2){ |
||||
if(index1 == 0){ |
||||
arr = [item,0,0]; |
||||
} |
||||
if(index1 == 1){ |
||||
arr = [that.selectList[index1-1],item,0]; |
||||
} |
||||
|
||||
that.selectList=arr; |
||||
} |
||||
|
||||
return |
||||
} |
||||
|
||||
}) |
||||
}) |
||||
// console.log(that.selectList,2) |
||||
|
||||
|
||||
this.initData() |
||||
}, |
||||
initData(){ |
||||
|
||||
// console.log(this.selectList[0],this.selectList[1],"aa",this.selectList) |
||||
this.citylist = this.province[this.selectList[0]].children; //放到市数组 |
||||
this.arealist = this.province[this.selectList[0]].children[this.selectList[1]].children; //放到区数组 |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
// .top-title{ |
||||
// height: 40px; |
||||
// line-height: 40px; |
||||
// } |
||||
// .picker-v{ |
||||
// height:calc(100% - 40px); |
||||
// box-sizing: border-box; |
||||
// } |
||||
|
||||
uni-picker-view { |
||||
display: block; |
||||
} |
||||
uni-picker-view .uni-picker-view-wrapper { |
||||
display: flex; |
||||
position: relative; |
||||
overflow: hidden; |
||||
height: 100%; |
||||
background-color: white; |
||||
} |
||||
uni-picker-view[hidden] { |
||||
display: none; |
||||
} |
||||
picker-view { |
||||
width: 100%; |
||||
// height: 600upx; |
||||
height: 400rpx; |
||||
margin-top: 20upx; |
||||
} |
||||
.item { |
||||
line-height: 100upx; |
||||
text-align: center; |
||||
} |
||||
|
||||
</style> |
@ -0,0 +1,350 @@ |
||||
<template> |
||||
<view class="container"> |
||||
|
||||
<view class='addAddress'> |
||||
<!-- <view class="pad30"> |
||||
<view class='default acea-row row-middle borderRadius15'> |
||||
<input v-model="addressValue" type="text" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" |
||||
placeholder-class='placeholder' style="width:100%;" |
||||
@blur="identify()"> |
||||
</view> |
||||
</view> --> |
||||
<view class="pad30 mt-22"> |
||||
<view class='list borderRadius15'> |
||||
<uni-forms ref="form" label-position="left" :modelValue="userAddress"> |
||||
<uni-forms-item label="姓名" name="real_name" class='item acea-row row-between-wrapper'> |
||||
|
||||
<input type='text' placeholder='请输入姓名' name='real_name' :value="userAddress.real_name" |
||||
placeholder-class='placeholder' class="width100"></input> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="联系电话" name="phone" class='item acea-row row-between-wrapper'> |
||||
|
||||
<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone' |
||||
placeholder-class='placeholder' pattern="\d*"></input> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="所在地区" name="region" class='item acea-row row-between-wrapper'> |
||||
|
||||
<view class="address acea-row row-between height100" @click="chooseAddress"> |
||||
<input type='text' placeholder='请选择地址' :disabled="true" name='region' placeholder-class='placeholder' |
||||
v-model='userAddress.region' class="detail"></input> |
||||
<view class="icon-ymt to-right font14 fcor666"> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="详细地址" name="detail" class='item acea-row row-between-wrapper'> |
||||
|
||||
|
||||
<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder' |
||||
v-model='userAddress.detail' class="detail"></input> |
||||
|
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
</view> |
||||
</view> |
||||
<button class='keepBnt bg-color' @click="formSubmit">立即保存</button> |
||||
</view> |
||||
|
||||
|
||||
|
||||
<AddressPicker ref="AddressPicker" @getAddress="getAddress"></AddressPicker> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue' |
||||
import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue' |
||||
|
||||
import AddressPicker from '@/pages/address/addNewAddress/addressPicker.vue' |
||||
let dataList = require('./address.json') |
||||
export default { |
||||
data() { |
||||
return { |
||||
userAddress: { |
||||
real_name:"", |
||||
phone:"", |
||||
region:"", |
||||
detail:"", |
||||
}, //地址详情 |
||||
addressValue:"", |
||||
addressId:null, |
||||
/* rulesObject:{ |
||||
real_name:{ |
||||
rules:[ |
||||
// 校验 name 不能为空 |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写姓名', |
||||
}, |
||||
// 对name字段进行长度验证 |
||||
{ |
||||
minLength: 2, |
||||
maxLength: 5, |
||||
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符', |
||||
} |
||||
], |
||||
}, |
||||
phone:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请输入手机号', |
||||
}, |
||||
{ |
||||
validateFunction: function(rule, value, data, callback) { |
||||
let iphoneReg = /^1[0-9]{10}$/ |
||||
if (!iphoneReg.test(value)) { |
||||
callback('手机号码格式不正确,请重新填写') |
||||
} |
||||
return true |
||||
} |
||||
} |
||||
|
||||
], |
||||
}, |
||||
region:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请选择地址', |
||||
}, |
||||
|
||||
], |
||||
}, |
||||
detail:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写详细地址', |
||||
}, |
||||
{ |
||||
minLength: 5, |
||||
|
||||
errorMessage: '{label}长度不能少于{minLength}个字符', |
||||
} |
||||
|
||||
], |
||||
}, |
||||
|
||||
} |
||||
*/ |
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
AddressPicker, |
||||
"uni-forms":uniForms, |
||||
"uni-forms-item":uniFormsItem |
||||
// uniForms, |
||||
// uniFormsItem |
||||
}, |
||||
onReady() { |
||||
// 需要在onReady中设置规则 |
||||
// this.$refs.form.setRules(this.rulesObject) |
||||
|
||||
// if(this.addressId){ |
||||
// uni.setNavigationBarTitle({ |
||||
// title: '编辑地址' |
||||
// }); |
||||
// } |
||||
}, |
||||
onLoad(options){ |
||||
|
||||
if(options.id){ |
||||
this.addressId = options.id |
||||
uni.setNavigationBarTitle({ |
||||
title: '编辑地址' |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
identify(){ |
||||
const options = { |
||||
type: 0, // 哪种方式解析,0:正则,1:树查找 |
||||
textFilter: [], // 预清洗的字段 |
||||
nameMaxLength: 4, // 查找最大的中文名字长度 |
||||
} |
||||
// type参数0表示使用正则解析,1表示采用树查找, textFilter地址预清洗过滤字段。 |
||||
// if(!!this.addressValue){ |
||||
// const parseResult = AddressParse(this.addressValue, options) |
||||
// // console.log(parseResult); |
||||
// this.userAddress.real_name = parseResult.name; |
||||
// this.userAddress.phone = parseResult.phone; |
||||
// this.userAddress.detail = parseResult.detail; |
||||
// this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area; |
||||
// } |
||||
}, |
||||
|
||||
formSubmit(form) { |
||||
|
||||
// 暂时不起作用 |
||||
|
||||
// this.$refs.form.validate().then(res => { |
||||
// console.log('success', res); |
||||
// uni.showToast({ |
||||
// title: `校验通过` |
||||
// }) |
||||
// }).catch(err => { |
||||
// console.log('err', err); |
||||
// }) |
||||
|
||||
let _this = this; |
||||
|
||||
this.$refs.form.validate().then(res=>{ |
||||
console.log(_this.userAddress,res) |
||||
}) |
||||
|
||||
}, |
||||
chooseAddress(){ |
||||
this.$refs.AddressPicker.show() |
||||
}, |
||||
getAddress(address){ |
||||
console.log(address,"address") |
||||
this.userAddress.region=address |
||||
} |
||||
|
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
background-color: #f5f5f5; |
||||
height: 100vh; |
||||
box-sizing: border-box; |
||||
padding-top:30rpx; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label .label-text{ |
||||
font-size: 30rpx !important; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item{ |
||||
width: 100% !important; |
||||
} |
||||
|
||||
.pad30 { |
||||
padding: 0 30rpx |
||||
} |
||||
|
||||
|
||||
|
||||
.acea-row { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.row-middle { |
||||
align-items: center |
||||
} |
||||
.row-between-wrapper { |
||||
align-items: center; |
||||
justify-content: space-between |
||||
} |
||||
.borderRadius15 { |
||||
border-radius: 15rpx !important; |
||||
} |
||||
|
||||
.addAddress .list { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.addAddress .list .item { |
||||
padding: 30rpx ; |
||||
padding-bottom: 0; |
||||
border-top: 1rpx solid #eee; |
||||
position: relative; |
||||
} |
||||
|
||||
.addAddress .list .item .detail{ |
||||
// width: 368rpx; |
||||
} |
||||
|
||||
.addAddress .list .item .location{ |
||||
position: absolute; |
||||
right: 46rpx; |
||||
top: 50%; |
||||
margin-top: -40rpx!important; |
||||
font-size: 24rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .list .item .name { |
||||
width: 195rpx; |
||||
font-size: 30rpx; |
||||
color: #333; |
||||
} |
||||
|
||||
.addAddress .list .item .address { |
||||
flex: 1; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon{ |
||||
width: 360rpx; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon .tip{ |
||||
font-size: 21rpx; |
||||
margin-top: 4rpx; |
||||
} |
||||
|
||||
.addAddress .list .item input { |
||||
// width: 475rpx; |
||||
flex: 1; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
height: 100%; |
||||
} |
||||
|
||||
.placeholder { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.addAddress .list .item .picker { |
||||
width: 430rpx; |
||||
font-size: 30rpx; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .default { |
||||
padding: 0 30rpx; |
||||
height: 90rpx; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .keepBnt { |
||||
width: 690rpx; |
||||
height: 86rpx; |
||||
border-radius: 50rpx; |
||||
text-align: center; |
||||
line-height: 86rpx; |
||||
margin: 50rpx auto; |
||||
font-size: 32rpx; |
||||
color: #fff; |
||||
} |
||||
|
||||
|
||||
.mt-22{ |
||||
margin-top: 22rpx; |
||||
} |
||||
.bg-color { |
||||
background-color: #dd524d; |
||||
} |
||||
|
||||
|
||||
|
||||
</style> |
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 204 KiB After Width: | Height: | Size: 72 KiB |
Before Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 51 KiB |