xt / xcx-book · Commits

Go to a project

Commit 06274e025e9685fee46cb74dd63c6b0d774e4851

Authored by vking
1 parent b6761fc6
build: skipped

blue ui other

Inline Side-by-side
Showing 8 changed files with 155 additions and 141 deletions
... ... @@ -13,7 +13,7 @@ page {
/* Color 可以自定义相关配色 */
/* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
/* 标准色 */
--red: #e54d42;
--red: #FA5151;
--orange: #FF7A00;
--yellow: #FFC9AA;
--olive: #8dc63f;
... ... @@ -152,8 +152,8 @@ radio {
position: relative;
}
switch::after,
switch::before {
.switch::after,
.switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
... ... @@ -173,24 +173,24 @@ switch::before {
margin: auto;
}
switch::before {
.switch::before {
content: "\e646";
right: 0;
transform: scale(1, 1);
left: auto;
}
switch[checked]::after,
switch.checked::after {
.switch[checked]::after,
.switch.checked::after {
transform: scale(1, 1);
}
switch[checked]::before,
switch.checked::before {
.switch[checked]::before,
.switch.checked::before {
transform: scale(0, 0);
}
switch[checked]::before {
.switch[checked]::before {
transform: scale(0, 0);
}
... ... @@ -222,7 +222,7 @@ checkbox.round .wx-checkbox-input {
border-radius: 100rpx;
}
switch .wx-switch-input {
.switch .wx-switch-input {
border: none;
padding: 0 24px;
width: 48px;
... ... @@ -231,11 +231,11 @@ switch .wx-switch-input {
border-radius: 100rpx;
}
switch .wx-switch-input:not([class*="bg-"]) {
.switch .wx-switch-input:not([class*="bg-"]) {
background: var(--grey) !important;
}
switch .wx-switch-input::after {
.switch .wx-switch-input::after {
margin: auto;
width: 26px;
height: 26px;
... ... @@ -248,7 +248,7 @@ switch .wx-switch-input::after {
transition: all 0.1s ease-in-out 0s;
}
switch .wx-switch-input.wx-switch-input-checked::after {
.switch .wx-switch-input.wx-switch-input-checked::after {
margin: auto;
left: 22px;
box-shadow: none;
... ... @@ -261,13 +261,13 @@ radio-group {
switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before {
.switch.radius .wx-switch-input::after,
.switch.radius .wx-switch-input,
.switch.radius .wx-switch-input::before {
border-radius: 10rpx;
}
switch .wx-switch-input::before,
.switch .wx-switch-input::before,
radio.radio::before,
checkbox .wx-checkbox-input::before,
radio .wx-radio-input::before,
... ... @@ -328,127 +328,127 @@ radio.radio[checked]::after {
border-color: var(--blue) !important;
}
switch.red[checked] .wx-switch-input,
.switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input {
border-color: var(--red) !important;
}
switch.orange[checked] .wx-switch-input,
.switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
border-color: var(--orange) !important;
}
switch.yellow[checked] .wx-switch-input,
.switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
border-color: var(--yellow) !important;
}
switch.olive[checked] .wx-switch-input,
.switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input {
border-color: var(--olive) !important;
}
switch.green[checked] .wx-switch-input,
.switch.green[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input {
border-color: var(--green) !important;
}
switch.cyan[checked] .wx-switch-input,
.switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input {
border-color: var(--cyan) !important;
}
switch.blue[checked] .wx-switch-input,
.switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input {
border-color: var(--blue) !important;
}
switch.purple[checked] .wx-switch-input,
.switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
border-color: var(--purple) !important;
}
switch.mauve[checked] .wx-switch-input,
.switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input {
border-color: var(--mauve) !important;
}
switch.pink[checked] .wx-switch-input,
.switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input {
border-color: var(--pink) !important;
}
switch.brown[checked] .wx-switch-input,
.switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input {
border-color: var(--brown) !important;
}
switch.grey[checked] .wx-switch-input,
.switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input {
border-color: var(--grey) !important;
}
switch.gray[checked] .wx-switch-input,
.switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input {
border-color: var(--grey) !important;
}
switch.black[checked] .wx-switch-input,
.switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input {
border-color: var(--black) !important;
}
switch.white[checked] .wx-switch-input,
.switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input {
border-color: var(--white) !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
.switch.red[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.red[checked] .wx-checkbox-input,
radio.red[checked] .wx-radio-input {
background-color: var(--red) !important;
color: var(--white) !important;
}
switch.orange[checked] .wx-switch-input,
.switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
background-color: var(--orange) !important;
color: var(--white) !important;
}
switch.yellow[checked] .wx-switch-input,
.switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
background-color: var(--yellow) !important;
color: var(--black) !important;
}
switch.olive[checked] .wx-switch-input,
.switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input,
radio.olive[checked] .wx-radio-input {
background-color: var(--olive) !important;
color: var(--white) !important;
}
switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input,
.switch.green[checked] .wx-switch-input,
.switch[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input,
... ... @@ -457,70 +457,70 @@ radio[checked] .wx-radio-input {
color: var(--white) !important;
}
switch.cyan[checked] .wx-switch-input,
.switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input,
radio.cyan[checked] .wx-radio-input {
background-color: var(--cyan) !important;
color: var(--white) !important;
}
switch.blue[checked] .wx-switch-input,
.switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input,
radio.blue[checked] .wx-radio-input {
background-color: var(--blue) !important;
color: var(--white) !important;
}
switch.purple[checked] .wx-switch-input,
.switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
background-color: var(--purple) !important;
color: var(--white) !important;
}
switch.mauve[checked] .wx-switch-input,
.switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input,
radio.mauve[checked] .wx-radio-input {
background-color: var(--mauve) !important;
color: var(--white) !important;
}
switch.pink[checked] .wx-switch-input,
.switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input,
radio.pink[checked] .wx-radio-input {
background-color: var(--pink) !important;
color: var(--white) !important;
}
switch.brown[checked] .wx-switch-input,
.switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input,
radio.brown[checked] .wx-radio-input {
background-color: var(--brown) !important;
color: var(--white) !important;
}
switch.grey[checked] .wx-switch-input,
.switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input,
radio.grey[checked] .wx-radio-input {
background-color: var(--grey) !important;
color: var(--white) !important;
}
switch.gray[checked] .wx-switch-input,
.switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input {
background-color: #f0f0f0 !important;
color: var(--black) !important;
}
switch.black[checked] .wx-switch-input,
.switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input,
radio.black[checked] .wx-radio-input {
background-color: var(--black) !important;
color: var(--white) !important;
}
switch.white[checked] .wx-switch-input,
.switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input,
radio.white[checked] .wx-radio-input {
background-color: var(--white) !important;
... ...
<!--components/showModal/showModal.wxml-->
<view class="cu-modal bottom-modal {{hasShow?'show':''}}" bindtap="hide">
<view class="cu-modal bottom-modal {{cla}} {{hasShow?'show':''}}" bindtap="hide">
<view class="cu-dialog confirm bg-white" catchtap="catchtap">
<view class="view padding-lg">
<view class="view padding-lg confirm-header">
{{opt.header}}
</view>
<view class="view margin-bottom-xl">
<view class="view margin-bottom-xl confirm-body">
{{opt.body}}
</view>
<view class="flex justify-center margin-bottom-lg margin-top">
... ...
... ... @@ -5,4 +5,13 @@
}
.bg-ghostWhite{
background-color: var(--ghostWhite);
}
.deletuser .cu-btn{
width: 300rpx!important;
height: 80rpx!important;
font-size: 36rpx;
}
.deletuser .confirm-body{
font-size: 36rpx;
}
\ No newline at end of file
... ...
... ... @@ -116,11 +116,16 @@ Page({
user: this.user
})
},
deletuser(){
App.Customer.DelCustomerInfo({phone:this.user.phone}).then((json)=>{
App.Customer.GetCustomerInfo({},'clear')
wx.navigateBack()
console.log(json)
})
}
deletuser(e){
if(e.detail.type=='confirm'){
App.Customer.DelCustomerInfo({phone:this.user.phone}).then((json)=>{
App.Customer.GetCustomerInfo({},'clear')
wx.navigateBack()
console.log(json)
})
}
},
confirm(){
this.selectComponent('#confirm').show();
},
})
\ No newline at end of file
... ...
... ... @@ -5,6 +5,7 @@
"usingComponents": {
"nav":"/components/nav/nav",
"formids":"/components/formids/formids",
"phone":"/components/userinfo/getphone"
"phone":"/components/userinfo/getphone",
"confirm":"/components/2.0/dialog/confirm"
}
}
\ No newline at end of file
... ...
<!--pages/me/setting.wxml-->
<nav hasHome>{{user.id ? '编辑联系人' : '新建联系人'}}</nav>
<view class="page">
<!-- <view class="tip">在这里维护你的常用预订信息</view> -->
<view class="card">
<view class="item flex-lr">
<view class="Medium flex-ll">
<view class="item-label">姓名</view>
<input class="name input" placeholder="请填写用餐人姓名"
bindinput="changeInput"
data-key="name"
value="{{user.name}}"
placeholder-class="input-pl" maxlength="10"/>
</view>
<view class="flex-rr switch">
<view
bindtap="changeInput"
data-key="sex"
data-val="1"
class="switch-item {{user.sex==1?'checked':''}}">先生</view>
<view
bindtap="changeInput"
data-key="sex"
data-val="2"
class="switch-item {{user.sex==2?'checked':''}}">女士</view>
<view
bindtap="changeInput"
data-key="sex"
data-val="3"
class="switch-item {{user.sex==3?'checked':''}}">公司</view>
<view class="page padding-top">
<view class="padding-lr-lg">
<view class="view flex align-center justify-between " style="height: 100rpx;">
<image src="http://nosqn.colorcun.com/detail/x%20%2816%29.png" style="width: 40rpx;height: 40rpx;"></image>
<view class="view flex-treble flex align-center margin-left-sm solid-bottom" style="height: 100rpx;">
<input class="name flex-treble" placeholder="请填写预订人姓名"
bindinput="changeInput"
data-key="name"
value="{{user.name}}"
bindkeyboardheightchange="keyboardheightchange"
adjust-position="{{false}}"
placeholder-class="input-pl" maxlength="10"/>
<view class="flex text-30 sex">
<view bindtap="changeInput"
data-key="sex"
data-val="1"
class="switch-item text-bold {{user.sex==1?'checked':''}}">先生</view>
<view bindtap="changeInput"
data-key="sex"
data-val="2"
class="text-bold margin-left-sm {{user.sex==2?'checked':''}}">女士</view>
<view bindtap="changeInput"
data-key="sex"
data-val="3"
class="text-bold margin-left-sm {{user.sex==3?'checked':''}}">公司</view>
</view>
</view>
</view>
<view class="item flex-lr">
<view class="Medium flex-ll">
<view class="item-label">手机</view>
<input class="phone input" placeholder="请填写联系方式"
cursor-spacing="180"
bindinput="changeInput"
data-key="phone"
type="number"
value="{{user.phone}}"
placeholder-class="input-pl" maxlength="11"/>
</view>
<view class="flex-rr">
<!-- 一键获取 -->
</view>
<view class="view flex align-center justify-between " style="height: 100rpx;">
<image src="http://nosqn.colorcun.com/detail/x%20%2817%29.png" style="width: 40rpx;height: 40rpx;"></image>
<view class="view flex-treble flex align-center margin-left-sm solid-bottom" style="height: 100rpx;">
<input class="phone flex-treble" placeholder="请填写联系方式"
bindinput="changeInput"
data-key="phone"
type="number"
value="{{user.phone}}"
adjust-position="{{false}}"
placeholder-class="input-pl" maxlength="11"/>
<phone bindgetphone="getphone">
<view class="smooth white-font get-phone flex-vc" style="font-size:28rpx;">一键获取</view>
<view class="txt-28-h text-blue">一键录入</view>
</phone>
</view>
</view>
<view class="flex-vl userinfo-setting">
<view class="flex-lr" style="margin-bottom:30rpx;">
<view class="font30r font-bold">设置默认联系人</view>
<switch color="#C0A369" checked="{{user.is_default==1 ? true : false}}"
data-key="is_default" data-val="{{user.is_default==1 ? 0 : 1}}" bindchange="changeInput"/>
</view>
<view class="gray-font font28r" style="line-height:1.5;">提醒：每次下单时商家会记录默认联系人作为订单联系 人，在预订过程中，如有需要，商家将联系订单联系人</view>
</view>
<block wx:if="{{user.id}}">
<view class="item flex-lr">
<view class="font30r font-bold">删除联系人</view>
<switch color="#C0A369" bindchange="deletuser"/>
</view>
</block>
<!-- <view class="item flex-lr">
<view class="item-label">备注信息</view>
<view class="Medium">
<input class="cusdem input" placeholder="请填写预订需求"
bindinput="changeInput"
data-key="remark"
value="{{user.remark}}"
placeholder-class="input-pl" maxlength="20"/>
</view>
</view> -->
</view>
<view class="save-button">
<formids bindclick="saved">
<view class="share-but">保存</view>
</formids>
<view class="flex align-center justify-between" style="height: 108rpx;">
<view class="txt-34-h text-bold">设置默认联系人</view>
<switch color="#42A5FF"
checked="{{user.is_default==1 ? true : false}}"
data-key="is_default"
data-val="{{user.is_default==1 ? 0 : 1}}"
bindchange="changeInput"/>
</view>
<view class="gray-font font28r margin-bottom" style="line-height:40rpx;">提醒：每次预订时，自动将默认联系人作为预订联系人，如有需要，商家将联系预订联系人</view>
<view class="txt-30-h text-red padding-top"
wx:if="{{user.id}}" bindtap="confirm">删除联系人</view>
</view>
<view class="save-button round bg-blue-blue" bindtap="saved">
<view class="share-but text-bold">保存</view>
</view>
</view>
<confirm id="confirm" cancelText="取消" cancelColor="#42A5FF"
confirmText="删除" confirmColor="#FFFFFF"
body="确定要删除该常用预订信息吗？" header=""
cla="deletuser"
bindevent="deletuser"></confirm>
... ...
/* pages/me/setting.wxss */
@import "../../colorui/main.wxss";
.sex .checked{
position: relative;
color:var(--blue);
}
.sex .checked:after{
width: 24rpx;
height: 14rpx;
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/detail/x%20%281%29.png");
position: absolute;
content: "";
bottom:-18rpx;
left:calc(50% - 12rpx);
}
.page{
width: 100%;
color:#353535;
... ... @@ -56,20 +72,19 @@ input.input{
color: #FEFEFE;
}
.save-button{
width:680rpx;
height:80rpx;
width:calc(100% - 80rpx);
height:84rpx;
position: fixed;
left:0;
right:0;
bottom:80rpx;
bottom:40rpx;
margin:0 auto;
}
.share-but{
color:#FEFEFE;
background: #262628;
width: 680rpx;
line-height: 80rpx;
font-size: 34rpx;
width: 100%;
line-height: 84rpx;
font-size: 36rpx;
text-align: center;
}
.get-phone{
... ...
... ... @@ -173,11 +173,10 @@
}
},
{
"id": -1,
"name": "我的 常用信息 pages/me/setting",
"pathName": "pages/me/setting",
"query": "",
"scene": "1044",
"query": "id=330&openid=oB-xJ5BjnTvdgQGLHsjioNHH0eE8&name=杜&sex=1&phone=15339180360&remark=&is_default=0&status=1&cdate=1587349236",
"scene": 1044,
"shareInfo": {
"groupName": "测试模拟群1",
"shareName": "8DEbIRpK4pa9mH_QY2vU4ZUKYPuI97WoQ4BQoFej-Q8@cr4dev",
... ...