@ -1,77 +0,0 @@ | |||
<template> | |||
<view class="change-language"> | |||
<uv-picker ref="picker" | |||
:columns="languageList" | |||
keyName="name" | |||
:itemHeight="70" | |||
@confirm="confirm"></uv-picker> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
props : { | |||
url : { | |||
default : '/pages/index/index', | |||
type : String, | |||
} | |||
}, | |||
data(){ | |||
return { | |||
languageList: [ | |||
[ | |||
{ | |||
name:'简体中文', | |||
key : "zh-Hans" | |||
}, | |||
{ | |||
name:'English', | |||
key : "en" | |||
}, | |||
] | |||
], | |||
} | |||
}, | |||
methods : { | |||
open() { | |||
this.$refs.picker.open(); | |||
}, | |||
confirm(e) { | |||
this.changeLanguage(e.value.pop()) | |||
}, | |||
//修改当前语言 | |||
changeLanguage(res){ | |||
//#ifdef H5 | |||
this.$router.go(0); //刷新页面,不然validate.js不好国际化 | |||
//#endif | |||
//#ifdef APP-PLUS | |||
uni.navigateTo({ | |||
url: this.url // 要刷新的页面路径 | |||
}); | |||
//#endif | |||
if(!res.key){ | |||
return | |||
} | |||
uni.setStorage({ | |||
key: 'language', | |||
data: res.key | |||
}) | |||
this.$i18n.locale = res.key | |||
uni.setLocale(res.key) //切换语言环境必须在this.$i18n.locale之后,否则app端会有意想不到的bug | |||
uni.$responseMessage = this.$t('responseMessage') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.change-language{ | |||
} | |||
</style> |
@ -1,71 +0,0 @@ | |||
<template> | |||
<view> | |||
<view> | |||
<uni-drawer ref="mode1" mode="left" :width="200"> | |||
<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" | |||
v-for="ele in drawerData1" @click="oncuechange1(ele)">{{ ele.name }}</view> | |||
</uni-drawer> | |||
<uni-drawer ref="mode2" mode="left" :width="200"> | |||
<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" | |||
v-for="ele in drawerData2" @click="oncuechange2(ele)">{{ ele.name }}</view> | |||
</uni-drawer> | |||
<uni-drawer ref="mode3" mode="left" :width="200"> | |||
<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" | |||
v-for="ele in drawerData3" @click="oncuechange3(ele)">{{ ele.name }}</view> | |||
</uni-drawer> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
drawerData1: [], | |||
drawerData2: [], | |||
drawerData3: [], | |||
value: [] | |||
} | |||
}, | |||
methods: { | |||
open(categorys){ | |||
this.value = [] | |||
this.drawerData1 = categorys | |||
this.$refs.mode1.open() | |||
}, | |||
oncuechange1(ele){ | |||
this.value.push(ele.name) | |||
if (ele.node){ | |||
this.drawerData2 = ele.node | |||
this.$refs.mode2.open() | |||
} else { | |||
this.clearAndEmit() | |||
} | |||
}, | |||
oncuechange2(ele){ | |||
this.value.push(ele.name) | |||
if (ele.node){ | |||
this.drawerData3 = ele.node | |||
this.$refs.mode3.open() | |||
} else { | |||
this.clearAndEmit() | |||
} | |||
}, | |||
oncuechange3(ele){ | |||
this.value.push(ele.name) | |||
this.clearAndEmit() | |||
}, | |||
clearAndEmit(ele){ | |||
console.log("end", this.value.join(" ")); | |||
this.$emit('changSuccess', this.value.join(" ")) | |||
this.$refs.mode3.close() | |||
this.$refs.mode2.close() | |||
this.$refs.mode1.close() | |||
}, | |||
} | |||
} | |||
</script> | |||
@ -0,0 +1,111 @@ | |||
<template> | |||
<view class="list"> | |||
<view class="item" | |||
v-for="(item, index) in 10" | |||
:key="index"> | |||
<image | |||
class="image" | |||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image> | |||
<view class="info"> | |||
<view class="title"> | |||
桌布租赁 | |||
</view> | |||
<view class="price"> | |||
<text>¥58</text>元/起 | |||
</view> | |||
<view class="favorable"> | |||
<view class="t"> | |||
限时优惠 | |||
</view> | |||
<view class="p"> | |||
¥48 | |||
</view> | |||
</view> | |||
<view class="num"> | |||
已售卖5000+件 | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
<uv-icon name="shopping-cart" | |||
color="#fff"></uv-icon> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name:"productList", | |||
data() { | |||
return { | |||
}; | |||
}, | |||
methods : { | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.list{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
.item{ | |||
position: relative; | |||
width: 300rpx; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 20rpx; | |||
&:nth-child(odd){ | |||
margin-right: 20rpx; | |||
} | |||
.image{ | |||
width: 300rpx; | |||
height: 250rpx; | |||
border-radius: 20rpx; | |||
} | |||
.info{ | |||
font-size: 26rpx; | |||
.title{ | |||
font-size: 30rpx; | |||
} | |||
.price{ | |||
color: #D03F25; | |||
margin-top: 6rpx; | |||
text{ | |||
font-size: 34rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
.favorable{ | |||
display: flex; | |||
background-image: url(/static/image/product/favorable.png); | |||
background-size: 100% 100%; | |||
width: fit-content; | |||
padding: 5rpx 10rpx; | |||
font-size: 18rpx; | |||
margin-top: 6rpx; | |||
.p{ | |||
color: #fff; | |||
margin-left: 10rpx; | |||
} | |||
} | |||
.num{ | |||
margin-top: 6rpx; | |||
font-size: 22rpx; | |||
color: #888; | |||
} | |||
} | |||
.btn{ | |||
position: absolute; | |||
right: 20rpx; | |||
bottom: 20rpx; | |||
padding: 10rpx; | |||
border-radius: 50%; | |||
background-color: $uni-color; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,23 +0,0 @@ | |||
{ | |||
"tabbar.title.1" : "消息", | |||
"tabbar.title.2" : "通讯录", | |||
"tabbar.title.3" : "发现", | |||
"tabbar.title.4" : "我", | |||
"navbar.relation.newFriend" : "新的朋友", | |||
"navbar.mine.service" : "服务", | |||
"navbar.relation.searchFriend" : "添加朋友", | |||
"pages" : { | |||
"index" : { | |||
"index" : { | |||
"agreement" : "Agreement content" | |||
} | |||
} | |||
}, | |||
"components" : { | |||
"config" : { | |||
"configPopup" : { | |||
} | |||
} | |||
} | |||
} |
@ -1,25 +0,0 @@ | |||
import Vue from 'vue' | |||
import VueI18n from 'vue-i18n' | |||
import zhHans from './zh-Hans.json' // 中文简体 | |||
Vue.use(VueI18n) | |||
// 所需要用的语言包 | |||
let messages = { | |||
'zh-Hans' : zhHans | |||
} | |||
if(!uni.getStorageSync('language') || !messages[uni.getStorageSync('language')]){ | |||
uni.setStorageSync('language', 'zh-Hans') | |||
} | |||
const lang = uni.getStorageSync('language');//获取缓存中的语言 | |||
// const lang = 'en'; | |||
// VueI18n构造函数所需要的配置 | |||
const i18nConfig = { | |||
locale: lang,//当前语言 | |||
messages | |||
} | |||
const i18n = new VueI18n(i18nConfig) | |||
export default i18n |
@ -1,26 +0,0 @@ | |||
{ | |||
"tabbar.title.1" : "消息", | |||
"tabbar.title.2" : "通讯录", | |||
"tabbar.title.3" : "发现", | |||
"tabbar.title.4" : "我", | |||
"navbar.relation.newFriend" : "新的朋友", | |||
"navbar.mine.service" : "服务", | |||
"navbar.relation.searchFriend" : "添加朋友", | |||
"responseMessage" : { | |||
}, | |||
"pages" : { | |||
"index" : { | |||
"index" : { | |||
"agreement" : "协议内容" | |||
} | |||
} | |||
}, | |||
"components" : { | |||
"config" : { | |||
"configPopup" : { | |||
"noData" : "内容未找到:404" | |||
} | |||
} | |||
} | |||
} |
@ -1,27 +1,207 @@ | |||
<template> | |||
<view class="page"> | |||
<tabber select="3"/> | |||
<navbar/> | |||
<view class="user"> | |||
<uv-swipe-action> | |||
<view | |||
v-for="(item, index) in 3" | |||
:key="index"> | |||
<view style="margin-top: 20rpx;"></view> | |||
<uv-swipe-action-item | |||
:options="options"> | |||
<view class="item"> | |||
<image | |||
class="image" | |||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" | |||
mode=""></image> | |||
<view class="info"> | |||
<view class="title"> | |||
<view class=""> | |||
桌布租赁 | |||
</view> | |||
<view class=""> | |||
<uv-number-box v-model="value" @change="valChange"></uv-number-box> | |||
</view> | |||
</view> | |||
<view class="unit"> | |||
规格:120*40*75【桌子尺寸】 | |||
<uv-icon name="arrow-down"></uv-icon> | |||
</view> | |||
<view class="price"> | |||
¥<text>299</text>元 | |||
</view> | |||
</view> | |||
</view> | |||
</uv-swipe-action-item> | |||
</view> | |||
</uv-swipe-action> | |||
<view class="action"> | |||
<view class="icon"> | |||
<image src="/static/image/cart/1.png" mode=""></image> | |||
<view class="num"> | |||
4 | |||
</view> | |||
</view> | |||
<view class="price"> | |||
<view class="count"> | |||
合计 | |||
<view class=""> | |||
¥<text>218.00</text> | |||
</view> | |||
</view> | |||
<view class="text"> | |||
共4件,已享受更低优惠 | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
去结算 | |||
</view> | |||
</view> | |||
</view> | |||
<tabber select="3" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
export default { | |||
components : { | |||
components: { | |||
tabber, | |||
}, | |||
data() { | |||
return { | |||
value : 0, | |||
options: [ | |||
{ | |||
text: '删除', | |||
style: { | |||
backgroundColor: '#f56c6c' | |||
} | |||
}, | |||
], | |||
} | |||
}, | |||
computed : { | |||
}, | |||
computed: {}, | |||
methods: { | |||
valChange(){ | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
</style> | |||
.page { | |||
padding-bottom: 200rpx; | |||
} | |||
.user { | |||
.item{ | |||
background-color: #fff; | |||
display: flex; | |||
padding: 30rpx; | |||
.image{ | |||
width: 200rpx; | |||
height: 200rpx; | |||
border-radius: 20rpx; | |||
} | |||
.info{ | |||
flex: 1; | |||
.title{ | |||
display: flex; | |||
padding: 10rpx 20rpx; | |||
justify-content: space-between; | |||
} | |||
.unit{ | |||
font-size: 24rpx; | |||
padding: 10rpx 20rpx; | |||
color: #717171; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.price{ | |||
color: $uni-color; | |||
font-size: 28rpx; | |||
padding: 10rpx 20rpx; | |||
text{ | |||
font-size: 36rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
} | |||
} | |||
.action{ | |||
width: 700rpx; | |||
position: fixed; | |||
bottom: 220rpx; | |||
left: 25rpx; | |||
background-color: #fff; | |||
height: 100rpx; | |||
border-radius: 50rpx; | |||
box-shadow: 0 0 6rpx 6rpx #00000010; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
overflow: hidden; | |||
.icon{ | |||
position: relative; | |||
width: 80rpx; | |||
height: 80rpx; | |||
margin: 0 20rpx; | |||
image{ | |||
width: 80rpx; | |||
height: 80rpx; | |||
} | |||
.num{ | |||
position: absolute; | |||
right: 10rpx; | |||
top: 0rpx; | |||
background-color: $uni-color; | |||
color: #fff; | |||
font-size: 18rpx; | |||
border-radius: 50%; | |||
height: 30rpx; | |||
width: 30rpx; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
.price{ | |||
.count{ | |||
display: flex; | |||
font-size: 26rpx; | |||
align-items: center; | |||
view{ | |||
color: $uni-color; | |||
margin-left: 10rpx; | |||
text{ | |||
font-size: 32rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
} | |||
.text{ | |||
font-size: 20rpx; | |||
color: #717171; | |||
} | |||
} | |||
.btn{ | |||
margin-left: auto; | |||
background-color: $uni-color; | |||
height: 100%; | |||
padding: 0 50rpx; | |||
color: #fff; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,27 +1,408 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar/> | |||
<view class="search"> | |||
<view @click="showSelectArea" class="left-area"> | |||
<image src="@/static/image/home/address-icon.png"></image> | |||
<view class="area">{{ area }}</view> | |||
<image src="@/static/image/home/arrow-icon.png" mode="aspectFit"></image> | |||
<view class="parting-line">|</view> | |||
</view> | |||
<view class="center-area"> | |||
<image | |||
style="margin-right: 20rpx;" | |||
src="@/static/image/home/search-icon.png"></image> | |||
<input v-model="queryParams.title" | |||
placeholder="桌布租赁" /> | |||
</view> | |||
<!-- <view class="right-area"> | |||
<view @click="searchAddress" class="search-button"> | |||
搜索 | |||
</view> | |||
</view> --> | |||
</view> | |||
<view class="swipe"> | |||
<uv-swiper | |||
:list="bannerList" | |||
indicator | |||
height="320rpx" | |||
keyName="url"></uv-swiper> | |||
</view> | |||
<!-- 水洗店 --> | |||
<view class="userShop" | |||
v-if="userShop"> | |||
<view class="list"> | |||
<view class="item" | |||
v-for="(item, index) in 4" | |||
:key="index"> | |||
<view class=""> | |||
<view class=""> | |||
我的客户 | |||
</view> | |||
<view class="num"> | |||
{{ 30 }} | |||
</view> | |||
</view> | |||
<view class=""> | |||
<image :src="`/static/image/home/${index}.png`" mode=""></image> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 酒店 --> | |||
<view class="user" | |||
v-else> | |||
<uv-notice-bar | |||
fontSize="28rpx" | |||
:text="text"></uv-notice-bar> | |||
<view class="shop"> | |||
<image | |||
class="image" | |||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" | |||
mode=""></image> | |||
<view class="shopInfo"> | |||
<view class="title"> | |||
HOUS水洗店 | |||
</view> | |||
<view class="tags"> | |||
<view class="tag"> | |||
桌布水洗 | |||
</view> | |||
<view class="tag"> | |||
桌布租赁 | |||
</view> | |||
</view> | |||
<view class="time"> | |||
9:00-18:00 | |||
</view> | |||
<view class="address"> | |||
长沙市天心区桂花坪街道231号 | |||
</view> | |||
</view> | |||
<view class="btns"> | |||
<view class="btn"> | |||
我要水洗 | |||
</view> | |||
</view> | |||
<view class="tips"> | |||
关联门店:主信门店 | |||
</view> | |||
</view> | |||
<view class="productList"> | |||
<productList/> | |||
</view> | |||
</view> | |||
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> --> | |||
<tabber select="0"/> | |||
</view> | |||
</template> | |||
<script> | |||
import Position from '@/utils/position.js' | |||
import tabber from '@/components/base/tabbar.vue' | |||
import productList from '@/components/user/productList.vue' | |||
import { mapGetters } from 'vuex' | |||
// import selectArea from '../../components/selectArea.vue'; | |||
export default { | |||
components : { | |||
tabber, | |||
productList, | |||
}, | |||
data() { | |||
return { | |||
area: '长沙', | |||
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....', | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
title: '' | |||
}, | |||
bannerList: [ | |||
{ | |||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', | |||
}, | |||
{ | |||
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', | |||
}, | |||
{ | |||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', | |||
}, | |||
], | |||
productList: [], | |||
} | |||
}, | |||
computed : { | |||
...mapGetters(['userShop']), | |||
}, | |||
methods: { | |||
//显示选择地区 | |||
showSelectArea() { | |||
// this.$refs.selectArea.open() | |||
}, | |||
//搜索地址 | |||
searchAddress() { | |||
Position.getLocation(res => { | |||
Position.selectAddress(res.longitude, res.latitude, success => { | |||
let address = this.extractProvinceAndCity(success) | |||
this.queryParams.title = address.city | |||
}) | |||
}) | |||
}, | |||
//提取用户选择的地址信息(省市县信息) | |||
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市) | |||
if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
return { | |||
province: '', | |||
city: res.name | |||
}; | |||
} | |||
if (res.address) { //用户选择了详细地址,要从详细地址中提取出省市县信息 | |||
// 使用正则表达式匹配省市县 | |||
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/; | |||
const match = res.address.match(regex); | |||
if (match) { // 如果匹配成功,则返回省和市的信息 | |||
return { | |||
province: match.groups.province, | |||
city: match.groups.city | |||
}; | |||
} | |||
} | |||
return { //用户没选择地址就点了确定按钮 | |||
province: '', | |||
city: '' | |||
} | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.search { | |||
height: 82rpx; | |||
width: 710rpx; | |||
background: #FFFFFF; | |||
margin: 20rpx auto; | |||
border-radius: 41rpx; | |||
box-sizing: border-box; | |||
padding: 0 15rpx; | |||
display: flex; | |||
align-items: center; | |||
// justify-content: space-between; | |||
.left-area, | |||
.center-area { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.left-area { | |||
max-width: 160rpx; | |||
image { | |||
flex-shrink: 0; | |||
width: 26rpx; | |||
height: 26rpx; | |||
} | |||
.area { | |||
font-size: 24rpx; | |||
display: -webkit-box; | |||
-webkit-line-clamp: 2; | |||
/* 限制显示两行 */ | |||
-webkit-box-orient: vertical; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
color: #292929; | |||
} | |||
.parting-line { | |||
flex-shrink: 0; | |||
font-size: 26rpx; | |||
color: #ccc; | |||
margin: 0rpx 5rpx; | |||
} | |||
} | |||
.center-area { | |||
display: flex; | |||
flex-wrap: nowrap; | |||
align-items: center; | |||
width: calc(100% - 290rpx); | |||
margin-left: 30rpx; | |||
image { | |||
width: 26rpx; | |||
height: 26rpx; | |||
} | |||
.van-field { | |||
background-color: transparent; | |||
box-sizing: border-box; | |||
height: 82rpx; | |||
line-height: 82rpx; | |||
width: calc(100% - 30rpx); | |||
padding: 0rpx 10rpx 0rpx 0rpx; | |||
input { | |||
height: 82rpx; | |||
font-size: 60rpx; | |||
} | |||
} | |||
} | |||
.right-area { | |||
.search-button { | |||
background: #60BDA2; | |||
height: 60rpx; | |||
width: 130rpx; | |||
font-size: 26rpx; | |||
border-radius: 35rpx; | |||
color: white; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
} | |||
} | |||
.swipe{ | |||
overflow: hidden; | |||
border-radius: 20rpx; | |||
margin: 20rpx; | |||
} | |||
.page{ | |||
padding-bottom: 200rpx; | |||
& /deep/ .uv-icon__icon{ | |||
font-size: 30rpx !important; | |||
} | |||
// 水洗店 | |||
.userShop{ | |||
.list{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
.item{ | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: 330rpx; | |||
margin: 20rpx; | |||
padding: 30rpx 0; | |||
color: #FFFFFF; | |||
line-height: 50rpx; | |||
border-radius: 20rpx; | |||
font-size: 28rpx; | |||
.num{ | |||
font-size: 38rpx; | |||
font-weight: 900; | |||
} | |||
image{ | |||
width: 110rpx; | |||
height: 110rpx; | |||
margin-left: 20rpx; | |||
} | |||
&:nth-child(1){ | |||
background: #F07A77; | |||
} | |||
&:nth-child(2){ | |||
background: #F48B4E; | |||
} | |||
&:nth-child(3){ | |||
background: #6487E1; | |||
} | |||
&:nth-child(4){ | |||
background: #61B7E6; | |||
} | |||
} | |||
} | |||
} | |||
// 酒店 | |||
.user{ | |||
padding: 20rpx; | |||
.shop{ | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background-color: #fff; | |||
margin-top: 20rpx; | |||
border-radius: 20rpx; | |||
padding: 20rpx; | |||
overflow: hidden; | |||
.image{ | |||
width: 180rpx; | |||
height: 180rpx; | |||
margin-right: 20rpx; | |||
border-radius: 20rpx; | |||
} | |||
.shopInfo{ | |||
font-size: 22rpx; | |||
.title{ | |||
font-size: 30rpx; | |||
} | |||
.tags{ | |||
display: flex; | |||
.tag{ | |||
padding: 4rpx 6rpx; | |||
border: 1rpx solid #FFAC6E; | |||
color: #FFAC6E; | |||
margin-right: 10rpx; | |||
margin-top: 10rpx; | |||
font-size: 18rpx; | |||
} | |||
} | |||
.time{ | |||
margin-top: 10rpx; | |||
display: flex; | |||
} | |||
.address{ | |||
margin-top: 10rpx; | |||
display: flex; | |||
} | |||
} | |||
.btns{ | |||
margin-left: auto; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
.btn{ | |||
background-color: $uni-color; | |||
color: #fff; | |||
box-shadow: 0 0 5rpx 5rpx #FFAC6E; | |||
padding: 10rpx 20rpx; | |||
flex-shrink: 0; | |||
border-radius: 35rpx; | |||
} | |||
} | |||
.tips{ | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
font-size: 24rpx; | |||
color: #FFAC6E; | |||
background-color: #FEF5EE; | |||
padding: 10rpx 20rpx; | |||
border-radius: 10rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,206 @@ | |||
<template> | |||
<view class="redact-address"> | |||
<view class="redact-address-title">{{title}}</view> | |||
<uv-form label-width="210rpx" | |||
:model="addressDetail" | |||
ref="form" :rules="rules"> | |||
<!-- <uv-field v-model="addressDetail.name" name="联系人" label="联系人" placeholder="请输入联系人姓名" | |||
:rules="[{ required: true, message: '请填写联系人' }]" /> | |||
<uv-field v-model="addressDetail.phone" name="手机号" label="手机号" placeholder="请输入手机号" | |||
:rules="[{ required: true, message: '请填写手机号' }]" /> | |||
<uv-field @click="$emit('clickAddressIcon')" v-model="addressDetail.address" name="所在地区" label="所在地区" placeholder="选择省市区街道" | |||
:rules="[{ required: true, message: '请选择省市区街道' }]"> | |||
<template #right-icon> | |||
<image @click.stop="$emit('clickAddressIcon')" src="../static/address/selectIcon.png" mode="aspectFit"></image>定位 | |||
</template> | |||
</uv-field> | |||
<uv-field v-model="addressDetail.addressDetail" name="详细地址" label="详细地址" placeholder="小区楼栋、门牌号、村等" | |||
:rules="[{ required: true, message: '请填写详细地址' }]" /> --> | |||
<uv-form-item label="联系人" | |||
prop="name" | |||
> | |||
<uv-input v-model="addressDetail.name" | |||
placeholder="请输入联系人姓名" | |||
border="none"> | |||
</uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="手机号" | |||
prop="phone" | |||
> | |||
<uv-input v-model="addressDetail.phone" | |||
placeholder="请输入手机号" | |||
border="none"> | |||
</uv-input> | |||
</uv-form-item> | |||
<uv-form-item label="所在地区" | |||
prop="address" | |||
> | |||
<uv-input | |||
v-model="addressDetail.address" | |||
placeholder="请选择所在地区" | |||
border="none"> | |||
</uv-input> | |||
<template #right> | |||
<view style="padding-right: 40rpx;color: #FBAB32;" | |||
@click.stop="$emit('clickAddressIcon')"> | |||
<image | |||
src="../../static/address/selectIcon.png" | |||
mode="aspectFit"></image>定位 | |||
</view> | |||
</template> | |||
</uv-form-item> | |||
<uv-form-item label="详细地址" | |||
prop="addressDetail" | |||
> | |||
<uv-input v-model="addressDetail.addressDetail" | |||
placeholder="请输入详细地址" | |||
border="none"> | |||
</uv-input> | |||
</uv-form-item> | |||
</uv-form> | |||
<view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址'}}</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
rules: { | |||
'name': { | |||
type: 'string', | |||
required: true, | |||
message: '请填写姓名', | |||
trigger: ['blur', 'change'] | |||
}, | |||
'addressDetail': { | |||
type: 'string', | |||
max: 50, | |||
required: true, | |||
message: '请输入详细地址', | |||
trigger: ['blur', 'change'] | |||
}, | |||
}, | |||
} | |||
}, | |||
props : { | |||
addressDetail : { | |||
type : Object, | |||
default : function(){ return {} } | |||
}, | |||
title : { | |||
type : String, | |||
default : '新增地址' | |||
} | |||
}, | |||
methods: { | |||
//新增和修改地址 | |||
onSubmit() { | |||
this.$refs.form.validate().then(res => { | |||
console.log(res); | |||
uni.showToast({ | |||
icon: 'success', | |||
title: '校验通过' | |||
}) | |||
}).catch(errors => { | |||
uni.showToast({ | |||
icon: 'error', | |||
title: '校验失败' | |||
}) | |||
}) | |||
// this.$emit('saveOrUpdate', this.addressDetail) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.redact-address { | |||
box-sizing: border-box; | |||
.redact-address-title { | |||
height: 80rpx; | |||
line-height: 80rpx; | |||
font-size: 30rpx; | |||
color: #333333; | |||
font-weight: 600; | |||
} | |||
.save { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 90%; | |||
height: 80rpx; | |||
border-radius: 40rpx; | |||
color: white; | |||
font-size: 28rpx; | |||
margin: 0rpx auto; | |||
background: $uni-color; | |||
margin-top: 150rpx; | |||
} | |||
image { | |||
width: 25rpx; | |||
height: 25rpx; | |||
} | |||
//修改组件默认样式 | |||
.uv-form { | |||
padding: 30rpx 0rpx; | |||
} | |||
&::v-deep .uv-cell { | |||
padding: 0rpx 0rpx; | |||
font-size: 26rpx; | |||
&::after { | |||
border: none !important; | |||
} | |||
.uv-field__label { | |||
display: flex; | |||
align-items: center; | |||
height: 80rpx; | |||
} | |||
.uv-field__control, | |||
.uv-field__right-icon { | |||
height: 80rpx; | |||
font-size: 26rpx; | |||
border-bottom: 2rpx solid #cbc8c8; | |||
} | |||
.uv-field__right-icon { | |||
display: flex; | |||
align-items: center; | |||
height: 78rpx; | |||
color: #5FCC9F; | |||
} | |||
.uv-cell__value { | |||
height: 120rpx; | |||
} | |||
} | |||
&::v-deep .uv-field__error-message { | |||
color: #5AC796; | |||
font-size: 20rpx; | |||
margin-top: 10rpx; | |||
} | |||
} | |||
</style> |
@ -0,0 +1,501 @@ | |||
<template> | |||
<view class="address"> | |||
<navbar title="地址管理" leftClick @leftClick="leftClick" /> | |||
<view v-if="addressList.length > 0" class="address-list"> | |||
<uv-radio-group v-model="selectAddress"> | |||
<view v-for="item in addressList" :key="item.id" class="address-item"> | |||
<view class="address-item-top"> | |||
<view class="img-box"> | |||
<image src="../static/address/icon.png" mode="aspectFill"></image> | |||
</view> | |||
<view class="address-info"> | |||
<view class="user-info"> | |||
<text class="user-name">{{ item.name }}</text> | |||
<text class="user-phone">{{ item.phone }}</text> | |||
<text v-if="item.defaultId == '1'" class="is-default">默认</text> | |||
</view> | |||
<view class="address-detail"> | |||
{{ item.address + " " + item.addressDetail }} | |||
</view> | |||
</view> | |||
</view> | |||
<view class="controls"> | |||
<view class="default-checkbox"> | |||
<uv-radio @click="addDefault(item)" | |||
:name="item.id" | |||
label-disabled | |||
size="30rpx" | |||
icon-size="30rpx"> | |||
默认地址 | |||
</uv-radio> | |||
</view> | |||
<view class="edit-btn"> | |||
<uv-icon name="edit-pen"></uv-icon> | |||
<!-- <image src="@/static/address/edit-icon.png" mode="aspectFill"></image> --> | |||
<text @click="getAddressDetail(item.id)" class="control-title">编辑</text> | |||
</view> | |||
<view class="del-btn"> | |||
<uv-icon name="trash"></uv-icon> | |||
<!-- <image src="@/static/address/delete-icon.png" mode="aspectFill"></image> --> | |||
<text class="control-title" @click="deleteAddress(item.id)">删除</text> | |||
</view> | |||
</view> | |||
</view> | |||
</uv-radio-group> | |||
</view> | |||
<view | |||
style="padding: 100rpx 0;" | |||
v-else> | |||
<uv-empty | |||
mode="history" | |||
textSize="28rpx" | |||
iconSize="100rpx"/> | |||
</view> | |||
<uv-popup | |||
round="40rpx" | |||
ref="addressPopup" | |||
:customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}"> | |||
<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title" | |||
@clickAddressIcon="selectAddr"></redactAddress> | |||
</uv-popup> | |||
<view class="add-btn"> | |||
<view @click="addBtn" class="btn"> | |||
新增地址 | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import redactAddress from '../components/address/redactAddress.vue' | |||
import Position from '@/utils/position.js' | |||
export default { | |||
components: { | |||
redactAddress | |||
}, | |||
data() { | |||
return { | |||
selectAddress: 0, //单选框选中的地址 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10 | |||
}, | |||
addressList: [ | |||
{ | |||
id : 1, | |||
name : 'xx', | |||
phone : '1305xxxx802', | |||
address : '广东省广州市越秀区', | |||
addressDetail : '城南故事C3栋2802', | |||
}, | |||
{ | |||
id : 2, | |||
name : 'xx', | |||
phone : '1305xxxx802', | |||
address : '广东省广州市越秀区', | |||
addressDetail : '城南故事C3栋2802', | |||
}, | |||
{ | |||
id : 3, | |||
name : 'xx', | |||
phone : '1305xxxx802', | |||
address : '广东省广州市越秀区', | |||
addressDetail : '城南故事C3栋2802', | |||
}, | |||
], | |||
addressDetail: {}, | |||
title: '新增地址' | |||
} | |||
}, | |||
onShow() { | |||
// if (this.$route.query.current == 'payOrder') { | |||
// this.$refs.addressPopup.open('bottom') | |||
// } | |||
// this.getAddressList() | |||
}, | |||
methods: { | |||
//list列表滑动到底部自动新增数据列表 | |||
onLoad() { | |||
this.queryParams.pageSize += 10 | |||
this.getAddressList() | |||
}, | |||
//获取地址列表 | |||
getAddressList() { | |||
this.$api('getAddressList', this.queryParams, res => { | |||
if (res.code == 200) { | |||
this.addressList = res.result.records || []; | |||
this.addressList.forEach(n => { //筛选默认地址 | |||
if (n.defaultId == '1') { | |||
this.selectAddress = n.id | |||
} | |||
}) | |||
if (this.queryParams.pageSize > res.result.total) { | |||
this.finished = true | |||
} | |||
} | |||
this.loading = false | |||
}) | |||
}, | |||
//获取地址详情 | |||
getAddressDetail(id) { | |||
this.title = '修改地址' | |||
this.$api('getAddressDetail', { | |||
id | |||
}, res => { | |||
if (res.code == 200) { | |||
this.addressDetail = res.result; | |||
this.$refs.addressPopup.open('bottom') | |||
} | |||
}) | |||
}, | |||
//返回个人中心 | |||
leftClick() { | |||
uni.navigateBack(-1) | |||
}, | |||
//添加和修改地址 | |||
saveOrUpdate() { | |||
let isOk = this.parameterVerification() | |||
if (isOk && !isOk.auth) { | |||
return showNotify({ | |||
type: 'warning', | |||
message: isOk.title, | |||
'z-index': 10000 | |||
}); | |||
} | |||
let data = { | |||
name: this.addressDetail.name, | |||
phone: this.addressDetail.phone, | |||
address: this.addressDetail.address, | |||
addressDetail: this.addressDetail.addressDetail, | |||
defaultId: this.addressDetail.defaultId || '0', | |||
latitude: this.addressDetail.latitude, | |||
longitude: this.addressDetail.longitude | |||
} | |||
if (this.addressDetail.id) { | |||
data.id = this.addressDetail.id | |||
} | |||
this.$api('addOrUpdateAddress', data, res => { | |||
if (res.code == 200) { | |||
this.$refs.addressPopup.close() | |||
this.getAddressList() | |||
uni.showToast({ | |||
title: '操作成功', | |||
icon: 'none' | |||
}) | |||
if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去 | |||
uni.navigateTo({ | |||
url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}` | |||
}) | |||
} | |||
} | |||
}) | |||
}, | |||
//新增默认地址 | |||
addDefault(item) { | |||
this.selectAddress = item.id | |||
this.$api('addOrUpdateAddress', { | |||
id: item.id, | |||
defaultId: '1', | |||
}, res => { | |||
if (res.code == 200) { | |||
this.$refs.addressPopup.close() | |||
uni.showToast({ | |||
title: '操作成功', | |||
icon: 'none' | |||
}) | |||
this.getAddressList() | |||
} | |||
}) | |||
}, | |||
//删除地址 | |||
deleteAddress(id) { | |||
let self = this | |||
uni.showModal({ | |||
title: '删除地址', | |||
content: '确认删除此地址?删除后数据不可恢复', | |||
success(e) { | |||
if(e.confirm){ | |||
self.$api('deleteAddress', { | |||
id | |||
}, res => { | |||
if (res.code == 200) { | |||
uni.showToast({ | |||
title: '删除成功', | |||
icon: 'none' | |||
}) | |||
self.getAddressList() | |||
} | |||
}) | |||
} | |||
} | |||
}) | |||
}, | |||
//点击新增按钮 | |||
addBtn() { | |||
this.title = '新增地址' | |||
this.addressDetail = { //初始化数据 | |||
name: '', | |||
phone: '', | |||
address: '', | |||
addressDetail: '', | |||
defaultId: '', | |||
latitude: '', | |||
longitude: '' | |||
} | |||
this.$refs.addressPopup.open('bottom') | |||
}, | |||
//验证用户参数合法性 | |||
parameterVerification() { | |||
let { | |||
name, | |||
phone, | |||
address, | |||
addressDetail | |||
} = this.addressDetail | |||
if (name.trim() == '') { | |||
return { | |||
title: '请填写联系人', | |||
auth: false | |||
} | |||
} else if (phone.trim() == '') { | |||
return { | |||
title: '请填写手机号', | |||
auth: false | |||
} | |||
} else if (address.trim() == '') { | |||
return { | |||
title: '请填写所在地区', | |||
auth: false | |||
} | |||
} else if (addressDetail.trim() == '') { | |||
return { | |||
title: '请填写详细地址', | |||
auth: false | |||
} | |||
} else if (phone.trim() != '') { | |||
if (!this.$utils.verificationPhone(phone)) { | |||
return { | |||
title: '手机号格式不合法', | |||
auth: false | |||
} | |||
} | |||
} | |||
return { | |||
title: '验证通过', | |||
auth: true | |||
} | |||
}, | |||
//地图上选择地址 | |||
selectAddr() { | |||
Position.getLocation(res => { | |||
Position.selectAddress(res.longitude, res.latitude, success => { | |||
this.setAddress(success) | |||
}) | |||
}) | |||
}, | |||
//提取用户选择的地址信息复制给表单数据 | |||
setAddress(res) { | |||
//经纬度信息 | |||
this.addressDetail.latitude = res.latitude | |||
this.addressDetail.longitude = res.longitude | |||
if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
return this.addressDetail.address = res.name | |||
} | |||
if (res.address || res.name) { | |||
return this.addressDetail.address = res.address + res.name | |||
} | |||
this.addressDetail.address = '' //用户啥都没选就点击勾选 | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.address { | |||
width: 750rpx; | |||
margin: 0rpx auto; | |||
background: #F5F5F5; | |||
box-sizing: border-box; | |||
min-height: 100vh; | |||
.address-list { | |||
padding: 40rpx 20rpx 120rpx 20rpx; | |||
.address-item { | |||
background: white; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
margin-bottom: 20rpx; | |||
padding: 15rpx 15rpx 0rpx 15rpx; | |||
width: 680rpx; | |||
.address-item-top { | |||
border-bottom: 1px dashed #D3D1D1; | |||
display: flex; | |||
align-items: center; | |||
padding: 0rpx 0rpx 15rpx 0rpx; | |||
.img-box { | |||
width: 120rpx; | |||
height: 120rpx; | |||
image { | |||
width: 75%; | |||
height: 75%; | |||
display: block; | |||
margin: 12.5% auto; | |||
} | |||
} | |||
.address-info { | |||
width: calc(100% - 120rpx); | |||
height: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
.user-info { | |||
display: flex; | |||
align-items: center; | |||
text { | |||
display: block; | |||
line-height: 40rpx; | |||
margin-right: 20rpx; | |||
} | |||
.user-name, | |||
.user-phone { | |||
font-size: 30rpx; | |||
} | |||
.is-default { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: #FEB773; | |||
color: white; | |||
width: 80rpx; | |||
height: 35rpx; | |||
border-radius: 20rpx; | |||
font-size: 22rpx; | |||
} | |||
} | |||
.address-detail { | |||
color: #4a4a4a; | |||
font-size: 26rpx; | |||
overflow: hidden; | |||
display: -webkit-box; | |||
-webkit-box-orient: vertical; | |||
-webkit-line-clamp: 2; | |||
text-overflow: ellipsis; | |||
} | |||
} | |||
} | |||
.controls { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 26rpx; | |||
padding: 15rpx 15rpx 25rpx 15rpx; | |||
.default-checkbox { | |||
display: flex; | |||
text { | |||
margin-left: 8rpx; | |||
} | |||
} | |||
.control-title { | |||
height: 30rpx; | |||
line-height: 30rpx; | |||
color: #666666; | |||
} | |||
view { | |||
display: flex; | |||
align-items: center; | |||
} | |||
image { | |||
width: 23rpx; | |||
height: 23rpx; | |||
vertical-align: middle; | |||
margin-right: 8rpx; | |||
} | |||
} | |||
} | |||
} | |||
.add-btn { | |||
position: fixed; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
left: 0; | |||
bottom: 0; | |||
width: 750rpx; | |||
height: 100rpx; | |||
background: white; | |||
.btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 85%; | |||
height: 80rpx; | |||
border-radius: 40rpx; | |||
color: white; | |||
text-align: center; | |||
font-size: 28rpx; | |||
background: $uni-color; | |||
} | |||
} | |||
} | |||
@media all and (min-width: 961px) { | |||
.add-btn { | |||
left: 50% !important; | |||
transform: translateX(-50%); | |||
} | |||
} | |||
//选择位置地图样式 | |||
:deep(.uni-system-choose-location) { | |||
z-index: 99999 !important; | |||
} | |||
</style> |
@ -0,0 +1,109 @@ | |||
<template> | |||
<view class="purse"> | |||
<navbar title="立即提现" leftClick @leftClick="$utils.navigateBack" /> | |||
<!-- 水洗店 --> | |||
<view class="userShop"> | |||
<userShopCommission purse /> | |||
</view> | |||
<view class="from-body"> | |||
<view>我要提现</view> | |||
<view class="from-line"> | |||
<input placeholder="请输入提现金额" /> | |||
</view> | |||
<view class="from-line"> | |||
<input placeholder="请输入姓名" /> | |||
</view> | |||
<view class="from-line"> | |||
<input placeholder="请输入开户行" /> | |||
</view> | |||
<view class="from-line"> | |||
<input placeholder="请输入银行卡卡号" /> | |||
</view> | |||
<view class="mt56">提现说明</view> | |||
<view style="line-height: 45rpx; font-size: 24rpx;color: #666666;" v-html="notice"> | |||
</view> | |||
<!-- <p>1、本次提现必须通过银行卡提现,暂不支持其他途径。</p> | |||
<p>2、如若遇到24小时提现未到账,请联系客服。</p> --> | |||
</view> | |||
<view class="b-fiexd"> | |||
<view class="button-submit">提交</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import userShopCommission from '@/components/userShop/userShopCommission.vue' | |||
export default { | |||
components: { | |||
userShopCommission, | |||
}, | |||
data() { | |||
return { | |||
notice : '' | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.purse{ | |||
min-height: 100vh; | |||
background-color: #ffffff; | |||
.from-body { | |||
padding: 40rpx 20rpx; | |||
font-size: 28rpx; | |||
font-family: PingFang SC, PingFang SC-Bold; | |||
font-weight: 700; | |||
text-align: left; | |||
color: #333333; | |||
line-height: 40px; | |||
padding-bottom: 160rpx; | |||
.from-line { | |||
margin-top: 40rpx; | |||
} | |||
input { | |||
width: 612rpx; | |||
height: 90rpx; | |||
line-height: 90rpx; | |||
background: #F5F5F5; | |||
border-radius: 46rpx; | |||
padding: 0 50rpx; | |||
font-size: 28rpx; | |||
font-family: PingFang SC, PingFang SC-Regular; | |||
font-weight: 400; | |||
text-align: left; | |||
color: #333; | |||
} | |||
} | |||
.button-submit { | |||
width: 596rpx; | |||
height: 90rpx; | |||
line-height: 90rpx; | |||
background: $uni-color; | |||
border-radius: 46rpx; | |||
margin: 20rpx auto; | |||
font-size: 28rpx; | |||
font-family: PingFang SC, PingFang SC-Regular; | |||
font-weight: 400; | |||
text-align: center; | |||
color: #ffffff; | |||
} | |||
} | |||
</style> |
@ -0,0 +1,88 @@ | |||
<template> | |||
<view class="running-water"> | |||
<navbar :title="title[status]" leftClick @leftClick="leftClick" /> | |||
<view class="tab-box"> | |||
<view class="tab-box1" v-if="agentFlow && agentFlow.total"> | |||
<uv-cell center border :title="item.title" | |||
v-for="(item, index) in agentFlow.records" | |||
:value="x[item.type] + item.money" :label="item.createTime" /> | |||
</view> | |||
<view | |||
style="padding: 100rpx 0;" | |||
v-else> | |||
<uv-empty | |||
mode="history" | |||
textSize="28rpx" | |||
iconSize="100rpx"/> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
title : ['余额记录','提现记录','佣金记录'], | |||
agentFlow : { | |||
total : 0, | |||
records : [ | |||
{ | |||
type : 0, | |||
money : 100, | |||
createTime : '2024-04-02 20:00', | |||
title : "佣金提现", | |||
}, | |||
{ | |||
type : 0, | |||
money : 100, | |||
createTime : '2024-04-02 20:00', | |||
title : "佣金提现", | |||
}, | |||
{ | |||
type : 0, | |||
money : 100, | |||
createTime : '2024-04-02 20:00', | |||
title : "佣金提现", | |||
}, | |||
] | |||
}, | |||
x : ['+', '-' , '-' , '+'], | |||
status : 0, | |||
} | |||
}, | |||
onLoad(e) { | |||
this.status = e.status | |||
}, | |||
methods: { | |||
leftClick() { //返回钱包 | |||
uni.navigateBack(-1) | |||
}, | |||
getAgentFlow(){ //获取流水记录 | |||
let type = this.status; | |||
this.$api('getAgentFlow', { type }, res => { | |||
if(res.code == 200){ | |||
this.agentFlow = res.result | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.running-water{ | |||
width: 750rpx; | |||
background: #F5F5F5; | |||
margin: 0 auto; | |||
min-height: 100vh; | |||
.tab-box{ | |||
margin: 20rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
} | |||
} | |||
</style> |