topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化表单、地址选择等多个页面和组件

This commit is contained in:
TOP糯米 2023-02-16 00:08:14 +08:00
parent 06836242f9
commit 4bdd10e784
8 changed files with 262 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/App.vue
View File

@ -1,7 +1,7 @@
<script> <script>
export default { export default {
onLaunch: function () { onLaunch: function () {
this.$store.dispatch('system/initConfig'); this.$store.dispatch("system/initConfig");
}, },
onShow: function () {}, onShow: function () {},
onHide: function () {}, onHide: function () {},
@ -44,4 +44,66 @@ export default {
} }
} }
/* #endif */ /* #endif */
// 通用样式
.search-placeholder {
color: #bebebe;
}
.order-placeholder {
color: #909090;
}
.address-placeholder {
color: #c9c9c9;
}
// 点击表单
.form-widget-group {
width: 100%;
.widget-item:first-child {
margin-top: 0;
}
.widget-item {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin-top: 2rpx;
padding: 0 30rpx;
box-sizing: border-box;
.title {
width: 100%;
line-height: 100%;
font-size: 30rpx;
color: #2d2d2d;
padding: 44rpx 65rpx;
box-sizing: border-box;
}
.picker {
z-index: 10;
width: 100%;
}
.icon {
position: absolute;
top: 44rpx;
left: 30rpx;
color: #8194f2;
}
.more {
position: absolute;
right: 30rpx;
top: 44rpx;
color: #a7a7a7;
font-size: 37rpx;
}
.iconfont.icon-dingwei {
font-size: 44rpx;
top: 38rpx;
}
.iconfont.icon-shijian {
font-size: 40rpx;
top: 38rpx;
}
.iconfont.icon-jinru {
font-size: 37rpx;
}
}
}
</style> </style>

55
src/components/widgets/search.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<view class="input-box">
<view class="icon">
<text class="iconfont icon-sousuo"></text>
</view>
<input
class="input"
type="text"
:model="keywords"
placeholder="搜索您需要的服务"
placeholder-class="search-placeholder"
/>
</view>
</template>
<script>
export default {
name: "widgets-search",
data() {
return {};
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="less" scoped>
.input-box {
width: 670rpx;
height: auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
line-height: 65rpx;
.icon,
.input {
color: #bebebe;
}
.icon {
width: 85rpx;
height: 65rpx;
font-size: 30rpx;
text-align: center;
}
.input {
width: 585rpx;
height: 65rpx;
font-size: 28rpx;
}
}
</style>

19
src/pages/address/address.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<app-layout <app-layout
headerBackgroundColor="#F6F6F6" headerBackgroundColor="#F6F6F6"
title="我的地址" :title="pageTitle"
textColor="dark" textColor="dark"
backgroundColor="#F6F6F6" backgroundColor="#F6F6F6"
> >
@ -16,7 +16,7 @@
@click="selectAddress(item)" @click="selectAddress(item)"
@longpress="deleteAddress(item.id, index)" @longpress="deleteAddress(item.id, index)"
> >
<view class="checkbox"> <view v-if="openType == 'choose'" class="checkbox">
<widget-check-box <widget-check-box
:size="52" :size="52"
:checked="chooseAddressId == item.id" :checked="chooseAddressId == item.id"
@ -64,6 +64,7 @@ export default {
name: "member-address", name: "member-address",
data() { data() {
return { return {
pageTitle: "我的地址",
openType: "list", openType: "list",
chooseAddressId: 0, chooseAddressId: 0,
list: [ list: [
@ -106,6 +107,12 @@ export default {
onLoad(e) { onLoad(e) {
if (e.openType) { if (e.openType) {
this.openType = e.openType; this.openType = e.openType;
if (e.openType == "choose") {
this.pageTitle = "选择地址";
uni.setNavigationBarTitle({
title: this.pageTitle,
});
}
} }
if (e.id) { if (e.id) {
this.chooseAddressId = e.id; this.chooseAddressId = e.id;
@ -137,7 +144,7 @@ export default {
wechatAddress.gender = 1; wechatAddress.gender = 1;
wechatAddress.isDefault = false; wechatAddress.isDefault = false;
console.log(wechatAddress); console.log(wechatAddress);
} },
}); });
// #endif // #endif
}, },
@ -177,7 +184,7 @@ export default {
justify-content: space-between; justify-content: space-between;
background-color: #ffffff; background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
padding: 35rpx 30rpx; padding: 0 30rpx;
margin-bottom: 25rpx; margin-bottom: 25rpx;
} }
.edit { .edit {
@ -194,11 +201,13 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%;
padding: 35rpx 0;
.checkbox { .checkbox {
width: 75rpx; width: 75rpx;
} }
.item-box { .item-box {
width: 530rpx; width: 100%;
.address-text, .address-text,
.address-detail { .address-detail {
font-size: 30rpx; font-size: 30rpx;

14
src/pages/address/edit.vue
View File

@ -33,7 +33,7 @@
class="input" class="input"
v-model="detail" v-model="detail"
placeholder="请输入详细地址，如8栋5单元18a" placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="input-placeholder" placeholder-class="address-placeholder"
/> />
</view> </view>
</view> </view>
@ -46,7 +46,7 @@
class="input" class="input"
v-model="name" v-model="name"
placeholder="请输入姓名" placeholder="请输入姓名"
placeholder-class="input-placeholder" placeholder-class="address-placeholder"
/> />
</view> </view>
</view> </view>
@ -82,7 +82,7 @@
class="input" class="input"
v-model="mobile" v-model="mobile"
placeholder="请输入手机号码" placeholder="请输入手机号码"
placeholder-class="input-placeholder" placeholder-class="address-placeholder"
/> />
</view> </view>
</view> </view>
@ -184,12 +184,10 @@ export default {
.input-box { .input-box {
width: 500rpx; width: 500rpx;
position: relative; position: relative;
padding: 25rpx 0;
.input { .input {
font-size: 28rpx; font-size: 28rpx;
} }
.input-placeholder {
color: #c9c9c9;
}
} }
.default-box { .default-box {
width: 180rpx; width: 180rpx;
@ -200,8 +198,6 @@ export default {
} }
.input-box.map { .input-box.map {
.address-text { .address-text {
z-index: 10;
position: relative;
font-size: 28rpx; font-size: 28rpx;
color: #c9c9c9; color: #c9c9c9;
box-sizing: border-box; box-sizing: border-box;
@ -212,7 +208,7 @@ export default {
} }
.iconfont { .iconfont {
position: absolute; position: absolute;
top: 0; top: 25rpx;
right: 0; right: 0;
font-size: 35rpx; font-size: 35rpx;
color: #8194f2; color: #8194f2;

104
src/pages/index/index.vue
View File

@ -1,18 +1,12 @@
<template> <template>
<app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队"> <app-layout
<view class="search"> headerBackgroundColor="#4B65ED"
<view class="input-box"> textColor="light"
<view class="icon"> btnType="city"
<text class="iconfont icon-sousuo"></text> title="熊熊安装队"
</view> >
<input <view class="search-component">
class="input" <widget-search />
type="text"
:model="keywords"
placeholder="搜索您需要的服务"
placeholder-class="placeholder"
/>
</view>
</view> </view>
<view class="banner"> <view class="banner">
<app-banner :list="bannerList" @onClickItem="clickBanner" /> <app-banner :list="bannerList" @onClickItem="clickBanner" />
@ -31,9 +25,14 @@
interval="3000" interval="3000"
duration="1000" duration="1000"
> >
<swiper-item v-for="(item, index) in notifyList" :key="index"> <swiper-item
v-for="(item, index) in notifyList"
:key="index"
>
<view class="swiper-item notify-item"> <view class="swiper-item notify-item">
<text class="limit-line clamp-1">{{item.title}}</text> <text class="limit-line clamp-1">{{
item.title
}}</text>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -42,26 +41,54 @@
<view class="service-group"> <view class="service-group">
<text class="section-title">建材安装服务</text> <text class="section-title">建材安装服务</text>
<view class="group g1"> <view class="group g1">
<view class="service-item" v-for="(item, index) in installServiceList" :key="index"> <view
<image class="service-icon" :src="item.icon" mode="scaleToFill" /> class="service-item"
<text class="service-name limit-line clamp-1">{{item.title}}</text> v-for="(item, index) in installServiceList"
:key="index"
>
<image
class="service-icon"
:src="item.icon"
mode="scaleToFill"
/>
<text class="service-name limit-line clamp-1">{{
item.title
}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="service-group"> <view class="service-group">
<text class="section-title">维修售后服务</text> <text class="section-title">维修售后服务</text>
<view class="group g2"> <view class="group g2">
<view class="service-item" v-for="(item, index) in aftermarketServiceList" :key="index"> <view
<image class="service-icon" :src="item.icon" mode="scaleToFill" /> class="service-item"
<text class="service-name limit-line clamp-1">{{item.title}}</text> v-for="(item, index) in aftermarketServiceList"
:key="index"
>
<image
class="service-icon"
:src="item.icon"
mode="scaleToFill"
/>
<text class="service-name limit-line clamp-1">{{
item.title
}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="service-group"> <view class="service-group">
<text class="section-title">工程企业服务</text> <text class="section-title">工程企业服务</text>
<view class="group g3"> <view class="group g3">
<view class="service-item" v-for="(item, index) in bussinessServiceList" :key="index"> <view
<image class="service-icon" :src="item.icon" mode="scaleToFill" /> class="service-item"
v-for="(item, index) in bussinessServiceList"
:key="index"
>
<image
class="service-icon"
:src="item.icon"
mode="scaleToFill"
/>
</view> </view>
</view> </view>
</view> </view>
@ -71,6 +98,7 @@
<script> <script>
import AppLayout from "@/components/layout/layout"; import AppLayout from "@/components/layout/layout";
import AppBanner from "@/components/banner/banner"; import AppBanner from "@/components/banner/banner";
import WidgetSearch from "@/components/widgets/search";
export default { export default {
name: "index", name: "index",
data() { data() {
@ -207,6 +235,7 @@ export default {
components: { components: {
AppLayout, AppLayout,
AppBanner, AppBanner,
WidgetSearch,
}, },
onLoad() {}, onLoad() {},
onShow() {}, onShow() {},
@ -222,38 +251,13 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search { .search-component {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background-color: #4b65ed; background-color: #4b65ed;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.input-box {
width: 670rpx;
height: auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
line-height: 65rpx;
.icon,
.input,
.placeholder {
color: #bebebe;
}
.icon {
width: 85rpx;
height: 65rpx;
font-size: 30rpx;
text-align: center;
}
.input {
width: 585rpx;
height: 65rpx;
font-size: 28rpx;
}
}
} }
.banner { .banner {
width: 100%; width: 100%;

128
src/pages/member/member.vue
View File

@ -4,7 +4,6 @@
backgroundColor="#F6F6F6" backgroundColor="#F6F6F6"
textColor="dark" textColor="dark"
title="我的" title="我的"
minHeight="calc(100vh - 100rpx)"
> >
<view class="member-header"> <view class="member-header">
<view class="headimg"> <view class="headimg">
@ -18,61 +17,43 @@
</view> </view>
</view> </view>
<view class="menu-container"> <view class="menu-container">
<view class="menu-group"> <view class="form-widget-group">
<view class="menu-item" @click="addressPage"> <view class="widget-item" @click="addressPage">
<view class="title-icon"> <text class="iconfont icon-dingwei icon"></text>
<text class="iconfont icon-dingwei"></text> <text class="title limit-line clamp-1">我的地址</text>
</view>
<view class="title limit-line clamp-1">我的地址</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text class="iconfont icon-tousu icon"></text>
<text class="iconfont icon-tousu"></text> <text class="title limit-line clamp-1">意见投诉</text>
</view>
<view class="title limit-line clamp-1">意见投诉</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text class="iconfont icon-kefufill icon"></text>
<text class="iconfont icon-kefufill"></text> <text class="title limit-line clamp-1">联系客服</text>
</view>
<view class="title limit-line clamp-1">联系客服</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text
<text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
class=" <text class="title limit-line clamp-1">设置</text>
iconfont
icon-shezhixitongshezhigongnengshezhishuxing
"
></text>
</view>
<view class="title limit-line clamp-1">设置</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
</view> </view>
<view class="menu-group"> <view class="form-widget-group">
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text class="iconfont icon-gongren icon"></text>
<text class="iconfont icon-dingwei"></text> <text class="title limit-line clamp-1">我是师傅</text>
</view>
<view class="title limit-line clamp-1">我是师傅</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text class="iconfont icon-cailiaogongcheng icon"></text>
<text class="iconfont icon-cailiaogongcheng"></text> <text class="title limit-line clamp-1">工程安装</text>
</view>
<view class="title limit-line clamp-1">工程安装</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="menu-item"> <view class="widget-item">
<view class="title-icon"> <text class="iconfont icon-qiye icon"></text>
<text class="iconfont icon-qiye"></text> <text class="title limit-line clamp-1">企业安装合作</text>
</view>
<view class="title limit-line clamp-1">企业安装合作</view>
<text class="iconfont icon-jinru more"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
</view> </view>
@ -165,46 +146,29 @@ export default {
top: -72rpx; top: -72rpx;
width: 670rpx; width: 670rpx;
margin: 0 auto; margin: 0 auto;
.menu-group {
width: 100%;
box-sizing: border-box;
padding: 30rpx 0;
background-color: #ffffff;
margin-bottom: 30rpx;
}
} }
.menu-item { .form-widget-group {
position: relative; margin-bottom: 30rpx;
display: flex; padding: 24rpx 0;
align-items: center; background-color: #FFFFFF;
box-sizing: border-box; .widget-item {
padding: 30rpx; margin-top: 0;
line-height: 40rpx; .title {
.title-icon { padding: 30rpx 60rpx;
width: 40rpx; }
height: 40rpx; .icon,
line-height: 40rpx; .more {
text-align: left; top: 30rpx;
} }
.iconfont { .icon.icon-dingwei {
color: #8c9bec; font-size: 35rpx;
font-size: 38rpx; }
} .icon.icon-cailiaogongcheng {
.title { font-size: 28rpx;
width: 530rpx; }
box-sizing: border-box; .icon.icon-qiye {
font-size: 30rpx; font-size: 28rpx;
color: #000000; }
padding-left: 20rpx;
}
.more {
position: absolute;
right: 30rpx;
top: 30rpx;
}
.iconfont.icon-cailiaogongcheng,
.iconfont.icon-qiye {
font-size: 30rpx;
} }
} }
</style> </style>

75
src/pages/order/create.vue
View File

@ -7,27 +7,27 @@
> >
<widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" /> <widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" />
<view class="form-container"> <view class="form-container">
<view class="select-group"> <view class="form-widget-group">
<view class="select-item address" @click="selectAddress"> <view class="widget-item" @click="selectAddress">
<text class="iconfont icon-dingwei"></text> <text class="iconfont icon-dingwei icon"></text>
<text class="text limit-line clamp-1">{{ <text class="title limit-line clamp-1">
addressText ? addressText : "请选择上门地址" {{ addressText ? addressText : "请选择上门地址" }}
}}</text> </text>
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
<view class="select-item datetime" @click="selectDateTime"> <view class="widget-item">
<text class="iconfont icon-shijian"></text> <text class="iconfont icon-shijian icon"></text>
<picker <picker
mode="date" mode="date"
:value="datetime" :value="datetime"
@change="bindDateChange" @change="bindDateChange"
class="text" class="picker"
> >
<view class="uni-input">{{ <text class="title limit-line clamp-1">
datetime ? datetime : "选择期望上门时间" {{ datetime ? datetime : "选择期望上门时间" }}
}}</view> </text>
</picker> </picker>
<text class="iconfont icon-jinru"></text> <text class="iconfont icon-jinru more"></text>
</view> </view>
</view> </view>
<view class="service-view"> <view class="service-view">
@ -59,7 +59,7 @@
class="text-area" class="text-area"
v-model="message" v-model="message"
placeholder="补充描述您的需求，或其他特殊情况" placeholder="补充描述您的需求，或其他特殊情况"
placeholder-class="textarea-placeholder" placeholder-class="order-placeholder"
/> />
</view> </view>
<view class="agreement-container"> <view class="agreement-container">
@ -178,43 +178,6 @@ export default {
margin-top: 16rpx; margin-top: 16rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
} }
.select-group {
width: 100%;
.select-item {
position: relative;
display: flex;
align-items: center;
background-color: #ffffff;
box-sizing: border-box;
margin-top: 2rpx;
padding: 0 30rpx;
.text {
width: 100%;
height: 116rpx;
line-height: 116rpx;
font-size: 30rpx;
color: #2d2d2d;
padding-left: 26rpx;
}
}
.select-item:first-child {
margin-top: 0;
}
.iconfont.icon-dingwei,
.iconfont.icon-shijian {
color: #8194f2;
}
.iconfont.icon-dingwei {
font-size: 44rpx;
}
.iconfont.icon-shijian {
font-size: 40rpx;
}
.iconfont.icon-jinru {
font-size: 37rpx;
color: #a7a7a7;
}
}
.service-view { .service-view {
margin-top: 16rpx; margin-top: 16rpx;
padding: 24rpx 40rpx; padding: 24rpx 40rpx;
@ -287,9 +250,6 @@ export default {
margin-top: 12rpx; margin-top: 12rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.textarea-placeholder {
color: #909090;
}
} }
.agreement-container { .agreement-container {
width: 100%; width: 100%;
@ -330,4 +290,9 @@ export default {
} }
} }
} }
.form-widget-group {
.widget-item {
background-color: #ffffff;
}
}
</style> </style>

45
src/pages/service/cate.vue
View File

@ -6,19 +6,8 @@
backgroundColor="#F6F6F6" backgroundColor="#F6F6F6"
headerBackgroundColor="#F6F6F6" headerBackgroundColor="#F6F6F6"
> >
<view class="search"> <view class="search-component">
<view class="input-box"> <widget-search />
<view class="icon">
<text class="iconfont icon-sousuo"></text>
</view>
<input
class="input"
type="text"
:model="keywords"
placeholder="搜索您需要的服务"
placeholder-class="placeholder"
/>
</view>
</view> </view>
<view class="cate"> <view class="cate">
<app-cate <app-cate
@ -34,6 +23,7 @@
<script> <script>
import AppLayout from "@/components/layout/layout"; import AppLayout from "@/components/layout/layout";
import AppCate from "@/components/cate/cate"; import AppCate from "@/components/cate/cate";
import WidgetSearch from "@/components/widgets/search";
export default { export default {
name: "service-cate", name: "service-cate",
data() { data() {
@ -95,6 +85,7 @@ export default {
components: { components: {
AppLayout, AppLayout,
AppCate, AppCate,
WidgetSearch,
}, },
onLoad() {}, onLoad() {},
onShow() {}, onShow() {},
@ -112,37 +103,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search { .search-component {
width: 100%; width: 100%;
height: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 30rpx; padding-bottom: 30rpx;
.input-box {
width: 670rpx;
height: auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
line-height: 65rpx;
.icon,
.input,
.placeholder {
color: #bebebe;
}
.icon {
width: 85rpx;
height: 65rpx;
font-size: 30rpx;
text-align: center;
}
.input {
width: 585rpx;
height: 65rpx;
font-size: 28rpx;
}
}
} }
</style> </style>