parent
92348bed5b
commit
d192cd8edf
@ -1,158 +1,229 @@
|
||||
<template>
|
||||
<view class="cotainer">
|
||||
<view class="list">
|
||||
<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id"
|
||||
@click="clickDel"
|
||||
@close = "closeDel"
|
||||
@open="openDel"
|
||||
@content-click="clickItem"
|
||||
:options="options">
|
||||
<view class="list-item u-border-bottom">
|
||||
<view class="list-item-title">
|
||||
<view class="list-item-name">
|
||||
<text>{{item.contact}}</text>
|
||||
<text>{{item.mobile}}</text>
|
||||
</view>
|
||||
<view class="list-item-address">
|
||||
{{item.area}}{{item.address}}
|
||||
</view>
|
||||
<view class="list-item" v-for="item in list">
|
||||
<view class="list-item-title u-border-bottom">
|
||||
<view class="list-item-name">
|
||||
<text>{{item.contact}}</text>
|
||||
<text>{{item.mobile}}</text>
|
||||
</view>
|
||||
<view class="list-item-address">
|
||||
{{item.area}}{{item.address}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item-btm">
|
||||
<view>
|
||||
<u-checkbox @change="e=>{return checkboxChange(item)}" active-color="#ba8b45"
|
||||
v-model="item.defalut" :name="item.defalutName">
|
||||
{{item.defalutName}}
|
||||
</u-checkbox>
|
||||
</view>
|
||||
<view class="list-item-btm-btn">
|
||||
<text @click="delAddress(item.id)">删除</text>
|
||||
<text @click="toAdd('copy',item)">复制</text>
|
||||
<text @click="toAdd('editor',item)">修改</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
<view class="list-add" @click="toAdd">
|
||||
<u-icon name="plus-circle" color="#ba8b45"></u-icon>
|
||||
新增地址
|
||||
</view>
|
||||
<view class="list-add" @click="toAdd">
|
||||
<view>新增地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {toast} from '@/common/util.js'
|
||||
<script>
|
||||
import {
|
||||
toast
|
||||
} from '@/common/util.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
firstDel:false,
|
||||
options: [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d',
|
||||
width:'200rpx'
|
||||
}
|
||||
}],
|
||||
showinfo:false,
|
||||
form:{
|
||||
name:'',
|
||||
mobile:'',
|
||||
area:'',
|
||||
address:'',
|
||||
|
||||
}
|
||||
|
||||
list: [],
|
||||
form: {
|
||||
name: '',
|
||||
mobile: '',
|
||||
area: '',
|
||||
address: '',
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
this.getAddress()
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
this.getAddress()
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
clickDel(index, optionIndex) {
|
||||
if(!this.firstDel){
|
||||
this.options[optionIndex].text = "删除该地址"
|
||||
this.firstDel = true
|
||||
return
|
||||
}else{
|
||||
let id = this.list[index].id
|
||||
|
||||
this.$u.api.delUserAddress({
|
||||
id:id
|
||||
}).then(res=>{
|
||||
toast('删除成功')
|
||||
this.getAddress()
|
||||
})
|
||||
}
|
||||
async getAddress() {
|
||||
const res = await this.$u.api.getUserAddress()
|
||||
res.address.map(item => {
|
||||
item.defalutName = item.defalut ? '已设为默认地址' : '设为默认地址'
|
||||
})
|
||||
console.log("res.address", res.address)
|
||||
this.list = res.address
|
||||
},
|
||||
delAddress(id) {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '确认',
|
||||
content: '是否删除该地址',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
that.$u.api.delUserAddress({
|
||||
id: id
|
||||
}).then(res => {
|
||||
toast('删除成功')
|
||||
that.getAddress()
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
item.defalut = false
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
openDel(index){
|
||||
this.list.map((item,index1)=>{
|
||||
item.show = false
|
||||
if(index===index1){
|
||||
item.show = true
|
||||
}
|
||||
console.log("item",item.show)
|
||||
})
|
||||
},
|
||||
|
||||
closeDel(index){
|
||||
this.list[index].show = false
|
||||
this.options[0].text = "删除"
|
||||
this.firstDel = false
|
||||
},
|
||||
clickItem(index){
|
||||
if(this.list[index].show){
|
||||
this.list[index].show = false
|
||||
this.options[0].text = "删除"
|
||||
this.firstDel = false
|
||||
}else{
|
||||
this.list.map(item=>{
|
||||
item.show = false
|
||||
})
|
||||
this.options[0].text = "删除"
|
||||
this.firstDel = false
|
||||
uni.setStorageSync("vuex_address",this.list[index])
|
||||
uni.navigateTo({
|
||||
url:"/packages/my/addaddress"
|
||||
})
|
||||
}
|
||||
},
|
||||
async getAddress(){
|
||||
const res = await this.$u.api.getUserAddress()
|
||||
res.address.map(item=>{
|
||||
item.show = false
|
||||
})
|
||||
this.list = res.address
|
||||
},
|
||||
toAdd(){
|
||||
uni.navigateTo({
|
||||
url:'/packages/my/addaddress'
|
||||
})
|
||||
copyAddress(){
|
||||
|
||||
},
|
||||
toAdd(type,item) {
|
||||
var itemtype = type?type:'add'
|
||||
if(type){
|
||||
uni.setStorageSync('vuex_address',item)
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/packages/my/addaddress?type='+itemtype
|
||||
})
|
||||
},
|
||||
checkboxChange(item) {
|
||||
let that = this
|
||||
console.log("e", item.defalut)
|
||||
if (!item.defalut) {
|
||||
uni.showModal({
|
||||
title: '确认',
|
||||
content: '是否将该地址设为默认地址',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
that.changeDefalut(item)
|
||||
} else if (res.cancel) {
|
||||
item.defalut = false
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '确认',
|
||||
content: '是否取消该地址为默认地址',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
that.changeDefalut(item)
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
item.defalut = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
changeDefalut(item) {
|
||||
let that = this
|
||||
item.defalut = item.defalut ? 1 : 0
|
||||
this.$u.api.saveUserAddress(item).then(res => {
|
||||
toast('设置成功', 1000, function() {
|
||||
that.getAddress()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cotainer{
|
||||
::v-deep .u-btn-text{
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.list{
|
||||
padding:30rpx;
|
||||
padding-bottom:80rpx;
|
||||
&-item{
|
||||
padding:20rpx 0;
|
||||
&-name{
|
||||
color:#333;
|
||||
text{
|
||||
margin-right:20rpx
|
||||
}
|
||||
}
|
||||
&-address{
|
||||
color:#ccc;
|
||||
}
|
||||
}
|
||||
&-add{
|
||||
color:#ba8b45;
|
||||
margin: 20rpx 0;
|
||||
font-size: 32rpx;
|
||||
u-icon{
|
||||
margin-right:20rpx
|
||||
<style lang="scss">
|
||||
.cotainer {
|
||||
background-color: #f0efed;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
|
||||
::v-deep .u-btn-text {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 30rpx 50rpx;
|
||||
padding-bottom: 200rpx;
|
||||
&-item {
|
||||
padding: 30rpx 25rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
&-name {
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
text {
|
||||
margin-right: 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&-address {
|
||||
color: #000;
|
||||
font-size: 24rpx;
|
||||
padding-bottom: 20rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&-btm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #adadac;
|
||||
|
||||
.u-checkbox__label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
text {
|
||||
padding: 0rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #adadac;
|
||||
margin-left: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&-add {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 40rpx;
|
||||
z-index: 9;
|
||||
|
||||
>view {
|
||||
background-color: #ba8b45;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 75rpx;
|
||||
text-align: center;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,108 +1,128 @@
|
||||
<template>
|
||||
<view class="changecontainer">
|
||||
<view class="logobox">
|
||||
<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="customerService">
|
||||
<view class="customerTit">
|
||||
<text class="bigtitle">铂金款产品</text>
|
||||
<text>专属管家通道</text>
|
||||
</view>
|
||||
<view class="qrCodebox">
|
||||
<view class="codeimg">
|
||||
<image show-menu-by-longpress src="../../static/ewmimg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textbottom">长按扫码添加企业微信</view>
|
||||
</view>
|
||||
<tabbar :currentPage="1"></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from '@/components/tabbar/tabbar.vue';
|
||||
export default{
|
||||
components:{
|
||||
tabbar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.changecontainer{
|
||||
width: 100%;
|
||||
background-image: url(../../static/bg-change.jpg);
|
||||
background-position: center top;
|
||||
background-size: cover;
|
||||
padding-top: 114rpx;
|
||||
padding-bottom: 300rpx;
|
||||
}
|
||||
.logobox{
|
||||
width: 162rpx;
|
||||
height: 162rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
margin-bottom: 80rpx;
|
||||
box-shadow: 0 22rpx 32rpx rgba(53,53,53,.6);
|
||||
}
|
||||
.logobox image{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.customerService{
|
||||
width: 87.33%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.customerTit{
|
||||
text-align: center;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 62rpx;
|
||||
}
|
||||
.customerTit text{
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
.customerTit text.bigtitle{
|
||||
color:#b98b44;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
.qrCodebox{
|
||||
width: 510rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
padding: 22rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ededed;
|
||||
text-align: center;
|
||||
margin-bottom: 98rpx;
|
||||
}
|
||||
.codeimg{
|
||||
width: 466rpx;
|
||||
height: 466rpx;
|
||||
margin: 0 auto;
|
||||
background: url(../../static/ewmbg.png) center center no-repeat;
|
||||
background-size: cover;
|
||||
padding: 19rpx;
|
||||
}
|
||||
.codeimg image{
|
||||
width: 428rpx;
|
||||
height: auto;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.textbottom{
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
background: #f4f4f4;
|
||||
font-size: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
<template>
|
||||
<view class="changecontainer">
|
||||
<view>
|
||||
<view class="logobox">
|
||||
<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="customerService">
|
||||
<view class="customerTit">
|
||||
<text class="bigtitle">铂金款产品</text>
|
||||
<text>专属管家通道</text>
|
||||
</view>
|
||||
<view class="qrCodebox">
|
||||
<view class="codeimg">
|
||||
<image show-menu-by-longpress src="../../static/ewmimg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textbottom">长按扫码添加企业微信</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tabbar :currentPage="1"></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from '@/components/tabbar/tabbar.vue';
|
||||
export default {
|
||||
components: {
|
||||
tabbar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" scoped>
|
||||
.changecontainer {
|
||||
width: 100%;
|
||||
padding-bottom: 200rpx;
|
||||
padding-top: 60rpx;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url(../../static/bg-change.jpg);
|
||||
background-position: center top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.changecontainer>view {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.logobox {
|
||||
width: 162rpx;
|
||||
height: 162rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
margin-bottom: 60rpx;
|
||||
box-shadow: 0 22rpx 32rpx rgba(53, 53, 53, .6);
|
||||
}
|
||||
|
||||
.logobox image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.customerService {
|
||||
width: 87.33%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.customerTit {
|
||||
text-align: center;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 62rpx;
|
||||
}
|
||||
|
||||
.customerTit text {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.customerTit text.bigtitle {
|
||||
color: #b98b44;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.qrCodebox {
|
||||
width: 510rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
padding: 22rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ededed;
|
||||
text-align: center;
|
||||
margin-bottom: 98rpx;
|
||||
}
|
||||
|
||||
.codeimg {
|
||||
width: 466rpx;
|
||||
height: 466rpx;
|
||||
margin: 0 auto;
|
||||
background: url(../../static/ewmbg.png) center center no-repeat;
|
||||
background-size: cover;
|
||||
padding: 19rpx;
|
||||
}
|
||||
|
||||
.codeimg image {
|
||||
width: 428rpx;
|
||||
height: auto;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.textbottom {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
background: #f4f4f4;
|
||||
font-size: 20rpx;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 225 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 478 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 749 B |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 35 KiB |
Loading…
Reference in new issue