dev
commit
9188e7411a
@ -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 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> --> |
||||
<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 backcolorfff"> |
||||
|
||||
<!-- <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"> |
||||
|
||||
</view> |
||||
|
||||
<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> --> |
||||
<!-- --> |
||||
<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> |
||||
</view> |
||||
|
||||
</pick-regions> |
||||
<view class="font15 fcor666" style="height: 20px;line-height: 20px;">{{userAddress.region || '请选择'}}</view> |
||||
</view> |
||||
|
||||
<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 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> |
||||
|
||||
</view> |
||||
|
||||
<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> |
||||
</view> |
||||
<button class='keepBnt bg-color' @click="formSubmit">立即保存</button> |
||||
</view> |
||||
|
||||
|
||||
|
||||
</form> |
||||
|
||||
|
||||
<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') |
||||
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: '请输入手机号', |
||||
}, |
||||
{ |
||||
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}个字符', |
||||
} |
||||
|
||||
], |
||||
}, |
||||
|
||||
} |
||||
*/ |
||||
name: "", |
||||
tel: "", |
||||
region: '', |
||||
address: "", |
||||
is_default: false, |
||||
}, |
||||
dataParams: null, |
||||
// |
||||
region: [], |
||||
regionId:'', |
||||
//没用上 |
||||
defaultRegion: ['北京市', '市辖区', '东城区'], |
||||
defaultRegionCode: '120101', |
||||
|
||||
|
||||
} |
||||
}; |
||||
}, |
||||
components:{ |
||||
AddressPicker, |
||||
"uni-forms":uniForms, |
||||
"uni-forms-item":uniFormsItem |
||||
// uniForms, |
||||
// uniFormsItem |
||||
|
||||
components: { |
||||
pickRegions |
||||
|
||||
}, |
||||
onReady() { |
||||
// 需要在onReady中设置规则 |
||||
// this.$refs.form.setRules(this.rulesObject) |
||||
|
||||
onLoad(params) { |
||||
this.dataParams = params |
||||
}, |
||||
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 |
||||
uni.setNavigationBarTitle({ |
||||
title: '编辑地址' |
||||
}); |
||||
|
||||
onReady() { |
||||
uni.setNavigationBarTitle({ |
||||
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 |
||||
} |
||||
// 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; |
||||
// } |
||||
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 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
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); |
||||
// }) |
||||
}, |
||||
|
||||
|
||||
|
||||
|
||||
// 默认地址设置改变 |
||||
defaultChange(e) { |
||||
this.userAddress.is_default = !this.userAddress.is_default |
||||
}, |
||||
|
||||
|
||||
|
||||
// 数据提交 |
||||
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){ |
||||
|
||||
if(this.dataParams.id){ |
||||
this.updateAddress(this.dataParams.id) |
||||
}else{ |
||||
this.addAddress() |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
}, |
||||
updateAddress(id){ |
||||
let _this = this; |
||||
|
||||
this.$refs.form.validate().then(res=>{ |
||||
console.log(_this.userAddress,res) |
||||
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(); |
||||
}) |
||||
|
||||
}, |
||||
chooseAddress(){ |
||||
this.$refs.AddressPicker.show() |
||||
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 |
||||
}) |
||||
|
||||
//调用上一个页面中的方法 |
||||
_this.backPageRefresh() |
||||
|
||||
|
||||
}) |
||||
}, |
||||
getAddress(address){ |
||||
console.log(address,"address") |
||||
this.userAddress.region=address |
||||
} |
||||
|
||||
|
||||
}, |
||||
} |
||||
/** |
||||
* 字段数据校验 |
||||
* 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; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
} |
||||
|
||||
} |
||||
return true; |
||||
}, |
||||
} |
||||
}; |
||||
</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; |
||||
.padding-main { |
||||
padding: 20rpx; |
||||
} |
||||
|
||||
.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; |
||||
|
||||
.bottom-fixed { |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
border: none; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon .tip{ |
||||
font-size: 21rpx; |
||||
margin-top: 4rpx; |
||||
|
||||
.page-bottom-fixed { |
||||
height: 100vh; |
||||
padding-bottom: 120rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.addAddress .list .item input { |
||||
// width: 475rpx; |
||||
flex: 1; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
|
||||
/*表单*/ |
||||
.form-container { |
||||
height: 100%; |
||||
|
||||
.form-gorup { |
||||
padding: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
border-radius: 20rpx; |
||||
overflow: auto; |
||||
|
||||
input { |
||||
border-radius: 0; |
||||
box-sizing: border-box; |
||||
font-size: 28rpx; |
||||
height: 70rpx; |
||||
line-height: 70rpx; |
||||
} |
||||
|
||||
} |
||||
|
||||
.form-gorup-title { |
||||
padding: 20rpx 0; |
||||
margin-bottom: 5rpx; |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.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; |
||||
|
||||
.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> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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> |
||||
@ -1,494 +1,584 @@ |
||||
<template> |
||||
<view class="cart-container backcor9"> |
||||
<scroll-view :scroll-y="true" class="cart-list"> |
||||
|
||||
<uni-swipe-action> |
||||
|
||||
<!-- 从这里开始遍历--> |
||||
<view v-for="(item,index) in cartList" :class="(item.isFailure?' isFailure ':' ')+'marb10 border-8r backcolorfff paading10'" :key="item.id"> |
||||
|
||||
<!-- :disabled="item.isFailure" --> |
||||
<uni-swipe-action-item :auto-close="autoClose" :right-options="swipe_options" @click="swipe_opt_event" @change="swipe_change($event, item.id)"> |
||||
|
||||
<view class="cart-container2"> |
||||
<checkbox-group @change="checkClick(item)"> |
||||
<checkbox class="mycheck" :disabled="!isEdit&&item.isFailure" color="#FFC71E" :value="item.id" :checked="item.checked" /> |
||||
</checkbox-group> |
||||
<view class="cart-detail"> |
||||
<view class="cart-img"> |
||||
<image :src="item.img" class="img border-8r" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="cart-msg"> |
||||
<view class=""> |
||||
<view class="cart-msg-title font16 marb10 mart5">{{item.name}}</view> |
||||
<view class="cart-msg-parm font13 marb10 fcor777">珍珠米5斤</view> |
||||
<view class=""> |
||||
<!-- v-if="cartList.length>0" --> |
||||
|
||||
<view class="cart-container backcor9"> |
||||
<scroll-view :scroll-y="true" class="cart-list"> |
||||
|
||||
<uni-swipe-action> |
||||
|
||||
<!-- 从这里开始遍历--> |
||||
<view v-for="(item,index) in cartList" |
||||
:class="(item.isFailure?' isFailure ':' ')+'marb10 border-8r backcolorfff paading10'" |
||||
:key="item.id"> |
||||
|
||||
<!-- :disabled="item.isFailure" --> |
||||
<uni-swipe-action-item :auto-close="autoClose" :right-options="swipe_options" |
||||
@click="swipe_opt_event($event,item.id)" @change="swipe_change($event, item.id)"> |
||||
|
||||
<view class="cart-container2"> |
||||
<checkbox-group @change="checkClick(item)"> |
||||
<checkbox class="mycheck" :disabled="!isEdit&&item.isFailure" color="#FFC71E" |
||||
:value="item.id" :checked="item.whetherCheck" /> |
||||
</checkbox-group> |
||||
<view class="cart-detail"> |
||||
<view class="cart-img"> |
||||
<image :src="imageUrl+item.img" class="img border-8r" mode="aspectFill"></image> |
||||
</view> |
||||
|
||||
<view class="cart-msg-price"> |
||||
<view class="cart-price font16 fcorred"> |
||||
<!-- ¥ <text class="font20">18 </text>.8 --> |
||||
¥{{item.price}} |
||||
<view class="cart-msg"> |
||||
<view class=""> |
||||
<view class="cart-msg-title font16 marb10 mart5">{{item.title}}</view> |
||||
<view class="cart-msg-parm font13 marb10 fcor777">{{item.skuName|| ''}} |
||||
</view> |
||||
</view> |
||||
<view class="cart-num"> |
||||
<!-- @blur="blur" @focus="focus" --> |
||||
<uni-number-box v-model="item.num" :min="1" @noMoreLess="noMoreLess" @change="changeNumValue" /> |
||||
|
||||
<view class="cart-msg-price"> |
||||
<view class="cart-price font16 fcorred"> |
||||
<!-- ¥ <text class="font20">18 </text>.8 --> |
||||
¥{{item.price}} |
||||
</view> |
||||
<view class="cart-num"> |
||||
|
||||
<uni-number-box v-model="item.num" :min="1" @noMoreLess="noMoreLess(item.id+'')" |
||||
@change="changeNumValue($event,item.id)" /> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</uni-swipe-action-item> |
||||
|
||||
</view> |
||||
|
||||
<noMore></noMore> |
||||
|
||||
</uni-swipe-action> |
||||
|
||||
</scroll-view> |
||||
<view class="cart-tool bg-white"> |
||||
<view class="select-all"> |
||||
<checkbox-group @change="checkAllClick" > |
||||
<label > |
||||
<!-- :disabled="cartList.length == 0" --> |
||||
<checkbox class="mycheck" color="#FFC71E" :value="allCheck.value" :checked="allCheck.checked" /> |
||||
<text class="paddleft5 font16 fcor777">全选</text> |
||||
</label> |
||||
<!-- --> |
||||
</checkbox-group> |
||||
<text v-if="!isEdit" class="paddleft5 fcorred" @click="editDelete" >编辑</text> |
||||
<text v-if="isEdit" class="icon-ymt delete paddleft5 fcorred" @click="deleteCart"></text> |
||||
|
||||
</view> |
||||
<text v-if="isEdit" class="tool-right paddleft5 fcorred" @click="editDelete">退出编辑</text> |
||||
<view v-if="!isEdit" class="tool-right"> |
||||
<view class="tool-jiesuan marRight10 "> |
||||
合计:<text class="fcorred">¥{{priceAll}}</text> |
||||
</uni-swipe-action-item> |
||||
|
||||
</view> |
||||
|
||||
<noMore></noMore> |
||||
|
||||
</uni-swipe-action> |
||||
|
||||
</scroll-view> |
||||
<view class="cart-tool bg-white"> |
||||
<view class="select-all"> |
||||
<checkbox-group @change="checkAllClick"> |
||||
<label> |
||||
<!-- :disabled="cartList.length == 0" --> |
||||
<checkbox class="mycheck" color="#FFC71E" :value="allCheck.value" |
||||
:checked="allCheck.whetherCheck" /> |
||||
<text class="paddleft5 font16 fcor777">全选</text> |
||||
</label> |
||||
<!-- --> |
||||
</checkbox-group> |
||||
<text v-if="!isEdit" class="paddleft5 fcorred font16" @click="editDelete">编辑</text> |
||||
<text v-if="isEdit" class="icon-ymt delete paddleft5 fcorred" @click="deleteCart"></text> |
||||
|
||||
</view> |
||||
<view class="jiesuan-btn fcorfff " @click="settleAccount"> |
||||
结算 |
||||
<text v-if="isEdit" class="tool-right paddleft5 fcorred" @click="editDelete">退出编辑</text> |
||||
<view v-if="!isEdit" class="tool-right"> |
||||
<view class="tool-jiesuan marRight10 "> |
||||
合计:<text class="fcorred">¥{{priceAll}}</text> |
||||
</view> |
||||
<view class="jiesuan-btn fcorfff " @click="settleAccount"> |
||||
结算 |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
<!-- <view v-else class="cart-container backcor9"> |
||||
<view class=""> |
||||
购物车内暂无商品，快去购物吧 |
||||
</view> |
||||
|
||||
</view> --> |
||||
</view> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
// import cartList from '@/pages/classify/cart-list/cart-list.vue' |
||||
import noMore from '@/pages/classify/no-more/no-more.vue' |
||||
import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue' |
||||
import { |
||||
getShoppingCartList, |
||||
goodsAddNum, |
||||
deleteShoppingCart |
||||
} from '@/Utils/physicalObject.js' |
||||
|
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
cartList:[], |
||||
|
||||
|
||||
checkList:[], |
||||
allCheck:{ |
||||
name:'全选', |
||||
checked:false, |
||||
value:'all' |
||||
data() { |
||||
return { |
||||
imageUrl: app.globalData.imgUrl, //图片地址 |
||||
cartList: [], |
||||
|
||||
|
||||
checkList: [], |
||||
allCheck: { |
||||
name: '全选', |
||||
whetherCheck: false, |
||||
value: 'all' |
||||
}, |
||||
|
||||
|
||||
// |
||||
swipe_options:[ |
||||
{ |
||||
isCheck:false, |
||||
text: "收藏", |
||||
icon:' shoucang32 ', |
||||
style: { |
||||
backgroundColor: '#f6c133' |
||||
} |
||||
},{ |
||||
text: '删除', |
||||
icon:' delete ', |
||||
style: { |
||||
backgroundColor: '#E64340' |
||||
} |
||||
} |
||||
], |
||||
swipe_options: [{ |
||||
isCheck: false, |
||||
text: "收藏", |
||||
icon: ' shoucang32 ', |
||||
style: { |
||||
backgroundColor: '#f6c133' |
||||
} |
||||
}, { |
||||
text: '删除', |
||||
icon: ' delete ', |
||||
style: { |
||||
backgroundColor: '#E64340' |
||||
} |
||||
}], |
||||
swipe_item_index: null, |
||||
numberValue:0, |
||||
cartList:[], |
||||
autoClose:false, |
||||
numberValue: 0, |
||||
cartList: [], |
||||
autoClose: false, |
||||
// listSelect:[], |
||||
|
||||
isEdit:false, |
||||
showAction:'none' |
||||
|
||||
|
||||
isEdit: false, |
||||
showAction: 'none' |
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
components: { |
||||
// cartList, |
||||
noMore, |
||||
"uni-number-box":uniNumberBox |
||||
"uni-number-box": uniNumberBox |
||||
}, |
||||
computed:{ |
||||
priceAll(){ |
||||
computed: { |
||||
priceAll() { |
||||
//总计金额 |
||||
var str = 0; |
||||
for (var i = 0; i < this.cartList.length; i++) { |
||||
if (this.cartList[i].checked) { |
||||
if (this.cartList[i].whetherCheck) { |
||||
str += this.cartList[i].num * this.cartList[i].price; |
||||
} |
||||
} |
||||
return str; |
||||
return str; |
||||
} |
||||
}, |
||||
onLoad(){ |
||||
this.cartList=[ |
||||
{id:111,name:"小香风",isFailure:true,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1}, |
||||
{id:222,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1}, |
||||
{id:333,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1}, |
||||
{id:444,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1}, |
||||
] |
||||
this.cartList.map(item=>{ |
||||
this.$set(item, 'checked', false); |
||||
}) |
||||
|
||||
onLoad() { |
||||
// this.cartList=[ |
||||
// {id:111,name:"小香风",isFailure:true,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1}, |
||||
// {id:222,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1}, |
||||
// {id:333,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1}, |
||||
// {id:444,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1}, |
||||
// ] |
||||
// this.cartList.map(item=>{ |
||||
// this.$set(item, 'checked', false); |
||||
// }) |
||||
this.initData(); |
||||
|
||||
}, |
||||
methods:{ |
||||
editDelete(){ |
||||
methods: { |
||||
initData() { |
||||
|
||||
getShoppingCartList().then(res => { |
||||
|
||||
if (res.return_code == '000000') { |
||||
console.log(res.return_data) |
||||
this.cartList = res.return_data; |
||||
this.allCheckInit(); |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
editDelete() { |
||||
this.isEdit = !this.isEdit; |
||||
if(!this.isEdit){//退出编辑 |
||||
this.cartList.map(item=>{ |
||||
if(item.checked&&item.isFailure){ |
||||
item.checked = false; |
||||
} |
||||
}) |
||||
}else{//进入编辑 |
||||
if(this.allCheck.checked){ |
||||
this.cartList.map(item=>{ |
||||
item.checked = true; |
||||
if (!this.isEdit) { //退出编辑 |
||||
this.cartList.map(item => { |
||||
if (item.whetherCheck && item.isFailure) { |
||||
item.whetherCheck = false; |
||||
} |
||||
}) |
||||
} else { //进入编辑 |
||||
if (this.allCheck.whetherCheck) { |
||||
this.cartList.map(item => { |
||||
item.whetherCheck = true; |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
}, |
||||
// 全选的点击事件 |
||||
checkAllClick(e) { |
||||
this.allCheck.checked = !this.allCheck.checked; |
||||
if (this.allCheck.checked) { |
||||
this.cartList.map(item => { |
||||
if(!this.isEdit){//商品的全选事件 |
||||
if(!item.isFailure){ |
||||
item.checked = true |
||||
} |
||||
}else{//编辑的全选事件 |
||||
item.checked = true |
||||
this.allCheck.whetherCheck = !this.allCheck.whetherCheck; |
||||
if (this.allCheck.whetherCheck) { |
||||
this.cartList.map(item => { |
||||
if (!this.isEdit) { //商品的全选事件 |
||||
if (!item.isFailure) { |
||||
item.whetherCheck = true |
||||
} |
||||
|
||||
}) |
||||
} else { |
||||
this.cartList.map(item => { |
||||
item.checked = false |
||||
}) |
||||
} |
||||
} else { //编辑的全选事件 |
||||
item.whetherCheck = true |
||||
} |
||||
|
||||
}) |
||||
} else { |
||||
this.cartList.map(item => { |
||||
item.whetherCheck = false |
||||
}) |
||||
} |
||||
}, |
||||
|
||||
|
||||
// 单个商品的选择 |
||||
checkClick(item) { |
||||
item.checked = !item.checked |
||||
|
||||
if (!item.checked) { |
||||
if(!this.isEdit&&!item.isFailure){//商品 |
||||
this.allCheck.checked = false |
||||
}else if(this.isEdit){ |
||||
this.allCheck.checked = false |
||||
item.whetherCheck = !item.whetherCheck; |
||||
|
||||
if (!item.whetherCheck) { |
||||
if (!this.isEdit && !item.isFailure) { //商品 |
||||
this.allCheck.whetherCheck = false; |
||||
} else if (this.isEdit) { |
||||
this.allCheck.whetherCheck = false; |
||||
} |
||||
|
||||
|
||||
} else { |
||||
// 判断每一个商品是否是被选择的状态 |
||||
const goods = this.cartList.every(item => { |
||||
if(!this.isEdit){//商品 |
||||
if(item.isFailure){ |
||||
return true; |
||||
} |
||||
} |
||||
|
||||
|
||||
return item.checked === true |
||||
}) |
||||
if (goods) { |
||||
this.allCheck.checked = true |
||||
} else { |
||||
this.allCheck.checked = false |
||||
} |
||||
// // 判断每一个商品是否是被选择的状态 |
||||
// const goods = this.cartList.every(item => { |
||||
// if(!this.isEdit){//商品 |
||||
// if(item.isFailure){ |
||||
// return true; |
||||
// } |
||||
// } |
||||
|
||||
|
||||
// return item.whetherCheck === true |
||||
// }) |
||||
// if (goods) { |
||||
// this.allCheck.whetherCheck = true |
||||
// } else { |
||||
// this.allCheck.whetherCheck = false |
||||
// } |
||||
|
||||
this.allCheckInit() |
||||
} |
||||
}, |
||||
|
||||
// 判断购物车内是否有商品 |
||||
isHaveGoods(){ |
||||
allCheckInit() { |
||||
|
||||
if(this.cartList.length == 0){ |
||||
this.allCheck.whetherCheck = false; |
||||
return |
||||
} |
||||
|
||||
// 判断每一个商品是否是被选择的状态 |
||||
const goods = this.cartList.every(item => { |
||||
// if (!this.isEdit) { //商品 |
||||
// if (item.isFailure) { |
||||
// return true; |
||||
// } |
||||
// } |
||||
return item.whetherCheck === true |
||||
}) |
||||
if (goods) { |
||||
this.allCheck.whetherCheck = true |
||||
} else { |
||||
this.allCheck.whetherCheck = false |
||||
} |
||||
// console.log(this.allCheck.whetherCheck,goods) |
||||
}, |
||||
|
||||
// 判断购物车内是否有商品 |
||||
isHaveGoods() { |
||||
if (this.cartList.length == 0) { |
||||
uni.showToast({ |
||||
title: '购物车内暂无商品喔', |
||||
duration: 1000, |
||||
icon:'none' |
||||
icon: 'none' |
||||
}); |
||||
|
||||
|
||||
return false |
||||
} |
||||
return true; |
||||
}, |
||||
|
||||
|
||||
// 购物车删除 |
||||
deleteCart() { |
||||
if(!this.isHaveGoods()) return; |
||||
if (!this.isHaveGoods()) return; |
||||
var select = []; |
||||
for (var i = 0; i < this.cartList.length; i++) { |
||||
if (this.cartList[i].checked) { |
||||
if (this.cartList[i].whetherCheck) { |
||||
select.push(this.cartList[i].id) |
||||
} |
||||
} |
||||
if(select.length == 0){ |
||||
if (select.length == 0) { |
||||
uni.showToast({ |
||||
title: '请勾选要移除购物车的商品', |
||||
duration: 1000, |
||||
icon:'none' |
||||
icon: 'none' |
||||
}); |
||||
return |
||||
}else{ |
||||
|
||||
console.log(select,"要移除的商品id") |
||||
} else { |
||||
// console.log(select.join(), "要移除的商品id") |
||||
let str=select.join(); |
||||
this.noMoreLess(str) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
}, |
||||
// 结算 |
||||
settleAccount(){ |
||||
if(!this.isHaveGoods()) return; |
||||
|
||||
if(this.priceAll > 0){ |
||||
settleAccount() { |
||||
if (!this.isHaveGoods()) return; |
||||
|
||||
if (this.priceAll > 0) { |
||||
uni.navigateTo({ |
||||
url:'/pages/settleAccounts/settleAccounts' |
||||
url: '/pages/settleAccounts/settleAccounts' |
||||
}) |
||||
}else{ |
||||
} else { |
||||
uni.showToast({ |
||||
title: '请勾选要购买的商品', |
||||
duration: 1000, |
||||
icon:'none' |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
|
||||
|
||||
}, |
||||
// 滑动点击 |
||||
swipe_opt_event(e){ |
||||
console.log(e,"dianji") |
||||
|
||||
if(e.index == 0){//收藏 |
||||
|
||||
swipe_opt_event(e,id) { |
||||
console.log(e, "dianji") |
||||
|
||||
if (e.index == 0) { //收藏 |
||||
|
||||
// console.log(e.content.isCheck) |
||||
// e.content.isCheck=!e.content.isCheck |
||||
|
||||
|
||||
// if(e.content.isCheck){ |
||||
// e.content.icon=" shoucang32-select " |
||||
// }else{ |
||||
// e.content.icon=" shoucang32 " |
||||
// } |
||||
this.showAction = 'right' |
||||
|
||||
|
||||
return |
||||
} |
||||
if(e.index == 1){//删除 |
||||
|
||||
this.noMoreLess() |
||||
|
||||
if (e.index == 1) { //删除 |
||||
|
||||
this.noMoreLess(id+"") |
||||
|
||||
|
||||
// this.showAction = 'right'; |
||||
|
||||
|
||||
return |
||||
} |
||||
// var index = e.index || 0; |
||||
// var temp_data_list = this.data_list; |
||||
// if(this.swipe_item_index === null) { |
||||
// app.globalData.showToast("请先滑动要操作的数据"); |
||||
// return false; |
||||
// } |
||||
// if((temp_data_list[this.swipe_item_index] || null) == null) { |
||||
// app.globalData.showToast("数据不存在"); |
||||
// return false; |
||||
// } |
||||
|
||||
// // 根据操作类型处理数据 |
||||
// var id = temp_data_list[this.swipe_item_index]['id']; |
||||
// if (index == 0) { |
||||
// var goods_id = temp_data_list[this.swipe_item_index]['goods_id']; |
||||
// this.goods_favor_delete(id, goods_id, 'favor'); |
||||
// } else { |
||||
// this.cart_delete(id, 'delete'); |
||||
// } |
||||
}, |
||||
// 滑动事件 |
||||
swipe_change(e, id) { |
||||
console.log(e,id) |
||||
// this.swipe_item_index= (e == 'none') ? null : v |
||||
|
||||
console.log(e, id) |
||||
// this.swipe_item_index= (e == 'none') ? null : v |
||||
|
||||
}, |
||||
noMoreLess(){ |
||||
noMoreLess(ids) { |
||||
let _this = this; |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: '确定把该商品移除购物车吗?', |
||||
success: function (res) { |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
console.log('用户点击确定'); |
||||
} else if (res.cancel) { |
||||
|
||||
|
||||
console.log('用户点击确定,要删除的id',ids); |
||||
let params={ids:ids}; |
||||
deleteShoppingCart(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.initData(); |
||||
|
||||
}) |
||||
|
||||
} else if (res.cancel) { |
||||
|
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
}, |
||||
changeNumValue(v){ |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
changeNumValue(v, id) { |
||||
// console.log(v,id) |
||||
// console.log(this.cartList) |
||||
let params = { |
||||
id: id |
||||
} |
||||
goodsAddNum(params).then(res => { |
||||
|
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.bg-white { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.cart-container { |
||||
height: 100vh; |
||||
padding: 10px 20rpx 0px; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
} |
||||
|
||||
.bg-white{ |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.cart-container{ |
||||
height: 100vh; |
||||
padding: 10px 20rpx 0px; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
} |
||||
|
||||
.cart-list{ |
||||
height: calc(100vh - 70px); |
||||
} |
||||
|
||||
// 列表 |
||||
.cart-container2{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.mycheck{ |
||||
// margin:0 20rpx; |
||||
.cart-list { |
||||
height: calc(100vh - 70px); |
||||
} |
||||
.cart-detail{ |
||||
flex: 1; |
||||
|
||||
// 列表 |
||||
.cart-container2 { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 10rpx; |
||||
.cart-img{ |
||||
|
||||
.img{ |
||||
vertical-align: middle; |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
|
||||
} |
||||
|
||||
.mycheck { |
||||
// margin:0 20rpx; |
||||
} |
||||
.cart-msg{ |
||||
|
||||
.cart-detail { |
||||
flex: 1; |
||||
align-self: flex-start; |
||||
padding-left: 20rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.cart-msg-title{ |
||||
|
||||
} |
||||
.cart-msg-parm{ |
||||
|
||||
align-items: center; |
||||
padding: 0 10rpx; |
||||
|
||||
.cart-img { |
||||
|
||||
.img { |
||||
vertical-align: middle; |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
|
||||
} |
||||
} |
||||
.cart-msg-price{ |
||||
|
||||
.cart-msg { |
||||
flex: 1; |
||||
align-self: flex-start; |
||||
padding-left: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.cart-price{ |
||||
|
||||
} |
||||
.cart-num{ |
||||
|
||||
|
||||
.cart-msg-title {} |
||||
|
||||
.cart-msg-parm {} |
||||
|
||||
.cart-msg-price { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.cart-price {} |
||||
|
||||
.cart-num {} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// 失效 |
||||
.isFailure{ |
||||
.cart-img{ |
||||
position: relative; |
||||
:before{ |
||||
content: '商品失效'; |
||||
display: block; |
||||
height: 20rpx; |
||||
width: 120rpx; |
||||
line-height: 20rpx; |
||||
padding: 20rpx; |
||||
border-radius: 20rpx; |
||||
background-color: #E6E6E6; |
||||
position: absolute; |
||||
top: calc(50% - 30rpx); |
||||
left:20rpx; |
||||
z-index: 10; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
// 失效 |
||||
.isFailure { |
||||
.cart-img { |
||||
position: relative; |
||||
|
||||
:before { |
||||
content: '商品失效'; |
||||
display: block; |
||||
height: 20rpx; |
||||
width: 120rpx; |
||||
line-height: 20rpx; |
||||
padding: 20rpx; |
||||
border-radius: 20rpx; |
||||
background-color: #E6E6E6; |
||||
position: absolute; |
||||
top: calc(50% - 30rpx); |
||||
left: 20rpx; |
||||
z-index: 10; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
background-color: #ffffff; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
background-color: #ffffff; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
|
||||
// 底部 |
||||
.cart-tool{ |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 60px; |
||||
// line-height: 60px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.select-all{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.tool-right{ |
||||
flex: 1; |
||||
|
||||
|
||||
// 底部 |
||||
.cart-tool { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
box-sizing: border-box; |
||||
padding: 10px; |
||||
height: 60px; |
||||
// line-height: 60px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.tool-jiesuan{ |
||||
|
||||
|
||||
.select-all { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.jiesuan-btn{ |
||||
width: 200rpx; |
||||
height:40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
border-radius: 20px; |
||||
background: linear-gradient(to right,#FFCC1E,#FF8F19); |
||||
|
||||
.tool-right { |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
|
||||
.tool-jiesuan {} |
||||
|
||||
.jiesuan-btn { |
||||
width: 200rpx; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
border-radius: 20px; |
||||
background: linear-gradient(to right, #FFCC1E, #FF8F19); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
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 |
Loading…
Reference in new issue