Skip to content

U
user
Commit bd6f7e59 by weijiguang
Options

优化UI

parent d677557b
Showing with 74 additions and 53 deletions
components/menuAssembly/index.vue
...@@ -366,7 +366,8 @@ export default { ...@@ -366,7 +366,8 @@ export default {
.addbox{ .addbox{
// line-height: 26rpx; // line-height: 26rpx;
// margin-top: 20rpx ; // margin-top: 20rpx ;
.add{ .add {
margin-right: -1rpx;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-top: 1rpx; margin-top: 1rpx;
......
menuSubPackage/pages/areaSelect/areaSelect.vue
...@@ -7,30 +7,26 @@ ...@@ -7,30 +7,26 @@
<text>{{areaName.disName}}</text> <text>{{areaName.disName}}</text>
</view> </view>
<view class="icon"> <view class="icon">
<image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantouhei.png'" /> <image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantouhei2.png'" />
</view> </view>
</view> </view>
<div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item"> <div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item" :class="shopId==item.id?'active':''">
<div class="header"> <div class="header">
<view class="name">{{ item.name }}</view> <view class="name">{{ item.name }}</view>
<view class="adressBox"> <view class="adressBox">
<view class="map"> <view class="map"><u-icon name="map" color="#999999" size="12"></u-icon></view>
<u-icon name="map" color="#999999" size="12"></u-icon>
</view>
<view class="address">{{ item.address }}</view> <view class="address">{{ item.address }}</view>
</view> </view>
<view class="timeBox"> <view class="timeBox">
<view class="clock"> <view class="clock"><u-icon name="clock" color="#999999" size="10"></u-icon></view>
<u-icon name="clock" color="#999999" size="10"></u-icon>
</view>
<view class="time">{{ item.startTime }} - {{ item.endTime }}</view> <view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
</view> </view>
</div> </div>
<view class="line"></view> <view class="line" />
<div class="dec"> <div class="dec">
<view :style="{'height':'34rpx'}" v-show="item.distance && item.distance!=-1"></view> <view :style="{'height':'34rpx'}" class="distance1" v-show="item.distance && item.distance!=-1"></view>
<view class="goshop">去品尝</view> <view class="goshop">去品尝</view>
<view :style="{'height':'30rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离 {{ item.distance }}</view> <view :style="{'height':'34rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离{{ item.distance }}</view>
</div> </div>
</div> </div>
</view> </view>
...@@ -45,10 +41,14 @@ export default { ...@@ -45,10 +41,14 @@ export default {
show: true, show: true,
columns: [], columns: [],
list: [], list: [],
areaName:{} areaName:{},
shopId:0
} }
}, },
onShow() { onShow() {
if(uni.getStorageSync('shopData')) {
this.shopId = uni.getStorageSync('shopData').id;
}
this.list = uni.getStorageSync('shops'); this.list = uni.getStorageSync('shops');
this.areaName = uni.getStorageSync('areaName') this.areaName = uni.getStorageSync('areaName')
}, },
...@@ -84,52 +84,58 @@ export default { ...@@ -84,52 +84,58 @@ export default {
line-height: 36rpx; line-height: 36rpx;
} }
.icon { .icon {
width: 16rpx; width: 14rpx;
margin-left: 16rpx; margin-left: 16rpx;
height: 24rpx; margin-top: 2rpx;
height: 22rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.active {
border: 0.5px solid #003AE9;
}
.shop_item { .shop_item {
width: 90%; width: 686rpx;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #003AE9; padding: 40rpx 30rpx 40rpx 32rpx;
padding: 44rpx 30rpx 44rpx 32rpx;
box-sizing: border-box; box-sizing: border-box;
margin: 30rpx auto; margin: 32rpx 30rpx 32rpx 34rpx;
display: flex; display: flex;
justify-content: flex-start; justify-content: 30rpx 30rpx flex-start;
align-items: center; align-items: center;
.header { .header {
margin-right: 30rpx; margin-right: 32rpx;
// border-right: 2rpx solid red; // border-right: 2rpx solid red;
.name { .name {
font-size: 28rpx; font-size: 28rpx;
height: 42rpx; height: 42rpx;
line-height: 40rpx; line-height: 40rpx;
width: 348rpx; width: 378rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333; color: #333333;
} }
.adressBox { .adressBox {
width: 348rpx; width: 378rpx;
margin-top: 16rpx; margin-top: 16rpx;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.map { .map {
margin-top: 4rpx; // width: 24rpx;
// height: 30rpx;
// background-color: #000000;
margin-top: 6rpx;
} }
.address { .address {
margin-left: 12rpx; // background-color: #000000;
margin-left: 10rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
margin-top: -5rpx; line-height: 36rpx;
} }
} }
.timeBox { .timeBox {
...@@ -138,37 +144,40 @@ export default { ...@@ -138,37 +144,40 @@ export default {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.clock { .clock {
// width: 24rpx;
// height: 27rpx;
// background-color: #000000;
margin-top: -6rpx; margin-top: -6rpx;
} }
.time { .time {
margin-left: 12rpx; padding-left: 4rpx;
// background-color: #000000;
margin-left: 10rpx;
height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
color: #999999; color: #999999;
margin-top: -2rpx; line-height: 28rpx;
} }
} }
} }
.line { .line {
height: 146rpx; height: 172rpx;
width: 2rpx; width: 1px;
border: 0.1px solid #F4F4F4; border-right: 1px solid #F4F4F4;
} }
.dec { .dec {
margin-left: 43rpx; margin-left: 44rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 146rpx; // height: 146rpx;
justify-content: space-around; view {
border-radius: 2px;
view{
vertical-align: baseline; vertical-align: baseline;
} }
.goshop { .goshop {
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
background: #0050F6; background: #0050F6;
border-radius: 2rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -177,14 +186,20 @@ export default { ...@@ -177,14 +186,20 @@ export default {
line-height: 64rpx; line-height: 64rpx;
} }
.distance1,
.distance { .distance {
padding-top: 16rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
text-align: center; text-align: center;
line-height: 56rpx; line-height: 34rpx;
} }
.distance1 {
padding-top: 0rpx;
padding-bottom: 16rpx;
}
} }
} }
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<view class="good-select-price"> <view class="good-select-price">
<div class="price"> <div class="price">
<view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view> <view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view>
<view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">￥{{ Utils.isInteger(priceTotal.price) }}</view> <view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">￥<text class="num">{{ Utils.isInteger(priceTotal.price) }}</text></view>
</div> </div>
<div v-if="!size > 0" style="color: orangered">已售罄</div> <div v-if="!size > 0" style="color: orangered">已售罄</div>
<div v-else class="set_size"> <div v-else class="set_size">
...@@ -583,15 +583,18 @@ button[disabled]:not([type]) { ...@@ -583,15 +583,18 @@ button[disabled]:not([type]) {
line-height: 38rpx; line-height: 38rpx;
.moneyLog { .moneyLog {
font-size: 32rpx; font-size: 32rpx;
font-weight: 900;
} }
} }
.good-select-price-small { .good-select-price-small {
font-size: 20rpx; font-size: 20rpx;
text-decoration: line-through;
font-family: ArialMT; font-family: ArialMT;
line-height: 32rpx; line-height: 32rpx;
color: #999999; color: #999999;
.num {
text-decoration: line-through;
}
} }
} }
} }
......
orderSubPackage/pages/orderInfo/index.vue
...@@ -7,8 +7,9 @@ ...@@ -7,8 +7,9 @@
<div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}"> <div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}">
<view class="status_text">订单状态：{{ orderStatusText }}</view> <view class="status_text">订单状态：{{ orderStatusText }}</view>
<view class="tips"> <view class="tips">
<view v-if="orderInfo.state == 7">为保持口感，请尽快引用哦~</view> <view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦~</view>
<view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐~</view> <view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐~</view>
<view v-if="orderInfo.state == 8 || orderInfo.state == 9 || orderInfo.state == 10 || orderInfo.state == 11">非常抱歉，有疑问请点击下方联系客服～</view>
<view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候，预计<text class="time">{{waitTime}}</text>分钟后可取</view> <view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候，预计<text class="time">{{waitTime}}</text>分钟后可取</view>
</view> </view>
<div class="btns"> <div class="btns">
...@@ -103,7 +104,7 @@ ...@@ -103,7 +104,7 @@
<u-icon name="server-fill" color="#000000" size="16"></u-icon> <u-icon name="server-fill" color="#000000" size="16"></u-icon>
<span :style="{'margin-left':'16rpx'}">联系客服</span> <span :style="{'margin-left':'16rpx'}">联系客服</span>
</view> </view>
<view > <view>
<image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" /> <image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" />
</view> </view>
</button> </button>
...@@ -760,7 +761,8 @@ export default { ...@@ -760,7 +761,8 @@ export default {
color: #333333; color: #333333;
} }
} }
.icno-arrow{ .icno-arrow {
margin-top: 2rpx;
width: 15.27rpx; width: 15.27rpx;
height: 21.68rpx; height: 21.68rpx;
} }
......
pages/menu/menu.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<view> <view>
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> <image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" <button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立刻登录 @getphonenumber="getPhoneNumber">立即登录
</button> </button>
</view> </view>
</view> </view>
...@@ -364,12 +364,12 @@ export default { ...@@ -364,12 +364,12 @@ export default {
display: flex; display: flex;
width: 686rpx; width: 686rpx;
height: 104rpx; height: 104rpx;
padding:16rpx 32rpx 16rpx 34rpx; padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: -2rpx; bottom: -2rpx;
left: 32rpx; left: 33rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
...@@ -423,6 +423,7 @@ export default { ...@@ -423,6 +423,7 @@ export default {
.login-btn { .login-btn {
// width: 114rpx; // width: 114rpx;
margin-right: -5rpx;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
background: #0050F6; background: #0050F6;
...@@ -434,7 +435,6 @@ export default { ...@@ -434,7 +435,6 @@ export default {
color: #FFFFFF; color: #FFFFFF;
line-height: 64rpx; line-height: 64rpx;
} }
} }
} }
......
pages/mine/mine.vue
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
</view> </view>
<view> <view>
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" <button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立刻登录 @getphonenumber="getPhoneNumber">立即登录
</button> </button>
</view> </view>
</view> </view>
</view> </view>
<!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button> --> <!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> -->
<view class="contents" v-if="userms"> <view class="contents" v-if="userms">
<view class="myOrder" @click="goToPage('order')"> <view class="myOrder" @click="goToPage('order')">
<view class="text">我的订单</view> <view class="text">我的订单</view>
......
pages/order/order.vue
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<view class="total"> <view class="total">
共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.amount) }}</text> 共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.amount) }}</text>
</view> </view>
<a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立刻支付</a> <a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立即支付</a>
<a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a> <a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a>
</view> </view>
</view> </view>
......
request/order/index.js
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
console.log('服务器错误'); console.log('服务器错误');
}); });
}, },
// 立刻支付 // 立即支付
payOrder(params) { payOrder(params) {
return uni.$u.http return uni.$u.http
.get('order/payOrder', { .get('order/payOrder', {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment