Skip to content

U
user
Commit 34c2268d by songbingqi
Options

修改 首页取单码 样式

parent ac6f7b42
Showing with 149 additions and 86 deletions
components/OrderQrCode/index.vue
<template> <template>
<div> <div>
<u-popup :show="show" :round="10" closeable mode="bottom" @close="close"> <u-popup :show="show" :round="10" mode="bottom" @close="close" :safeAreaInsetBottom="false">
<div class="order_flow"> <view class="bigBox" :style="{'height':'1380rpx'}">
<div class="code">取单码 {{ orderInfo.orderNum }}</div> <div class="order_flow" >
<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> --> <div class="code">取单码 {{ orderInfo.orderNum }}</div>
<div class="qr_code"> <!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
<image mode="scaleToFill" :src="qrCode" class="qr"></image> <div class="qr_code_readly" v-if="!showMask">
<view class="status_text">{{ orderStatusText }}</view> <image mode="scaleToFill" :src="qrCode" class="qr"></image>
</div> </div>
<div class="flow_describe"> <div class="qr_code" v-else>
<h3>扫码流程</h3> <image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr"></image>
<image :mode="'aspectFit'" class="flow_img" src="/static/imgs/order_flow.png"></image> <view class="status_text">——制作完成后才能扫哦——</view>
</div> </div>
<div class="flow_describe"> <div class="flow_describe">
<h3>注意事项</h3> <image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png"></image>
<view class="text"> </div>
<view>*热饮温度高，推荐使用纸吸管，纸吸管体验更佳。拿到后请小心饮用，吸入时请注意烫口喔</view>
<view>*冷饮如选择冰块分装，冰块分装后饮品将不满杯，敬请谅解。</view>
<view>*冷饮去冰如选择椰椰雪糕，默认分装椰椰雪糕，敬请谅解</view>
</view>
</div> </div>
</div> <div class="flow_describe_tips">
<view class="title">注意事项</view>
<view class="text">
<view>1.冷饮拍完照记得搅拌哦~搅拌3圈风味更佳</view>
<view>2.吸管请到两边窗口自取</view>
<view>3.热饮小心烫嘴!</view>
<view>4.二维码被抱住的时候不能扫哦</view>
<view>5.有问题或对出品任何不满意请联系客服</view>
</view>
</div>
</view>
</u-popup> </u-popup>
</div> </div>
</template> </template>
...@@ -106,18 +113,15 @@ export default { ...@@ -106,18 +113,15 @@ export default {
} }
.order_status { .order_status {
width: 686rpx;
height: 174rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; margin: 32rpx 32rpx;
margin: 32rpx auto 0; padding: 24rpx 0rpx 30rpx 0rpx;
padding: 14px;
.status_text { .status_text {
font-size: 32rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
text-align: center; text-align: center;
} }
...@@ -144,11 +148,16 @@ export default { ...@@ -144,11 +148,16 @@ export default {
text-align: center; text-align: center;
} }
} }
.bigBox {
background: #F7F7F7;
border-radius: 10px 10px 0px 0px;
overflow: auto;
}
.order_flow { .order_flow {
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; margin: 32rpx;
padding-top: 25rpx; padding-top: 40rpx;
padding-bottom: 25rpx; padding-bottom: 25rpx;
.code { .code {
...@@ -158,25 +167,25 @@ export default { ...@@ -158,25 +167,25 @@ export default {
color: #000000; color: #000000;
text-align: center; text-align: center;
} }
.qr_code_readly{
.qr_code { margin: 20rpx auto;
width: 508rpx; width: 510rpx;
height: 510rpx; height: 510rpx;
}
.qr_code {
height: 314rpx;
display: block; display: block;
margin: 25rpx auto; margin: 70rpx auto;
background-color: #ccc;
position: relative; position: relative;
padding-bottom: 30rpx;
.status_text { .status_text {
font-size: 48rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; margin-top: 39rpx;
font-weight: 600; font-family: PingFangSC-Medium, PingFang SC;
color: #FFFFFF; font-weight: 500;
line-height: 66rpx; color: #333333;
position: absolute; text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.qr { .qr {
...@@ -186,13 +195,9 @@ export default { ...@@ -186,13 +195,9 @@ export default {
} }
.flow_describe { .flow_describe {
width: 590rpx; width: 100%;
background: #FFFFFF; height: 300rpx;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5); padding-top: 48rpx;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 20rpx;
padding: 30rpx;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
...@@ -202,14 +207,35 @@ export default { ...@@ -202,14 +207,35 @@ export default {
} }
.flow_img { .flow_img {
width: 590rpx; width: 100%;
height: 211rpx; height: 100%;
display: block; display: block;
margin: 24rpx auto;
} }
} }
}
}
.flow_describe_tips{
margin-top: 100rpx;
background: #FFFFFF;
margin: 32rpx;
padding: 25rpx 31rpx;
.title{
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
padding-bottom: 24rpx;
border-bottom: 1px solid #ECECEC;
}
.text {
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 48rpx;
}
}
.customer_service { .customer_service {
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
......
mineSubPackage/pages/msg/index.vue
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
</view> </view>
<view class="msg_content">{{ item.message }}</view> <view class="msg_content">{{ item.message }}</view>
</view> </view>
<show-toast ref="toast"/>
</scroll-view> </scroll-view>
<show-toast ref="toast"/>
</template> </template>
<script> <script>
......
orderSubPackage/pages/orderInfo/index.vue
...@@ -13,8 +13,7 @@ ...@@ -13,8 +13,7 @@
<a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a> <a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a>
</div> </div>
</div> </div>
<div class="order_flow"> <div class="order_flow" v-if="qrShow">
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div> <div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
<div class="realQrcodeBox" v-if="qrShow&&isBuild"> <div class="realQrcodeBox" v-if="qrShow&&isBuild">
<image mode="aspectFit" :src="ewmImg" class="qr_real"></image> <image mode="aspectFit" :src="ewmImg" class="qr_real"></image>
...@@ -80,6 +79,34 @@ ...@@ -80,6 +79,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="order_describe">
<view class="title">订单信息</view>
<div class="item">
<span class="label">下单时间：</span>
<span class="value">{{ orderInfo.createdAt }}</span>
</div>
<div class="item">
<span class="label">取单码号：</span>
<span class="value">{{ orderInfo.orderNum }}</span>
</div>
<div class="item">
<span class="label">订单编号：</span>
<span class="value">{{ orderInfo.orderNo }}</span>
</div>
</div>
<div class="customer_service">
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
<view class="serverBox">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<span :style="{'margin-left':'16rpx'}">有疑问，联系客服</span>
</view>
<view class="icno-arrow">
<image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantouhei.png'" />
</view>
</button>
</div>
</div> </div>
</template> </template>
...@@ -95,9 +122,9 @@ export default { ...@@ -95,9 +122,9 @@ export default {
const resData = uni.getStorageSync('orderInfo'); const resData = uni.getStorageSync('orderInfo');
this.orderInfo = resData this.orderInfo = resData
const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0; const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0;
if (!isBuild) { if (isBuild) {
new QRCode('myQrcode', { new QRCode('myQrcode', {
text: 'http://www.baidu.com', text: this.orderInfo.pickCode,
width: 141, //canvas 画布的宽 width: 141, //canvas 画布的宽
height: 141, //canvas 画布的高 height: 141, //canvas 画布的高
padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0 padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
...@@ -451,6 +478,7 @@ export default { ...@@ -451,6 +478,7 @@ export default {
} }
.psce_name { .psce_name {
margin-top: 18rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -459,6 +487,7 @@ export default { ...@@ -459,6 +487,7 @@ export default {
.size { .size {
font-size: 24rpx; font-size: 24rpx;
margin-top: 18rpx;
font-family: ArialMT; font-family: ArialMT;
color: #666666; color: #666666;
} }
...@@ -473,7 +502,7 @@ export default { ...@@ -473,7 +502,7 @@ export default {
.discount { .discount {
margin-top: 24rpx; margin-top: 24rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-bottom: 1rpx solid #EEEEEE; border-bottom: 1rpx solid #ECECEC;
.discount_1 { .discount_1 {
display: flex; display: flex;
...@@ -515,48 +544,47 @@ export default { ...@@ -515,48 +544,47 @@ export default {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 52rpx; margin-top: 30rpx;
border-top: 1rpx solid #EEEEEE; border-top: 1rpx solid #EEEEEE;
padding-bottom: 20rpx; padding-top: 30rpx;
padding-top: 20rpx;
.size { .size {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} }
.paid_in { .paid_in {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600; font-weight: 400;
color: #000000; color: #333333;
} }
.money { .money {
font-weight: 600; vertical-align: top;
font-size: 32rpx;
color: #000000; font-size: 36rpx;
vertical-align: middle; font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
} }
} }
} }
.order_describe { .order_describe {
background: #fff; background: #fff;
border-radius: 10rpx; padding: 26rpx 31rpx;
padding: 0 62rpx 24rpx; margin: 32rpx;
margin-top: 32rpx;
h3 { .title {
padding: 24rpx 0;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
border-bottom: 1rpx solid #EEEEEE; line-height: 40rpx;
} }
.item { .item {
...@@ -566,13 +594,13 @@ export default { ...@@ -566,13 +594,13 @@ export default {
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: #666666; color: #999999;
} }
.value { .value {
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
color: #333333; color: #666666;
} }
} }
} }
...@@ -581,11 +609,10 @@ export default { ...@@ -581,11 +609,10 @@ export default {
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
padding: 0 64rpx; padding: 0rpx 31rpx;
margin: 32rpx 0; margin: 32rpx;
.function_item_text { .function_item_text {
width: 100%; width: 100%;
margin: 0; margin: 0;
...@@ -596,6 +623,16 @@ export default { ...@@ -596,6 +623,16 @@ export default {
border-radius: 0px; border-radius: 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.serverBox{
display: flex;
justify-content: flex-start;
align-items: center;
}
.icno-arrow{
width: 9rpx;
height: 21rpx;
}
} }
.function_item_text::after { .function_item_text::after {
border: unset; border: unset;
......
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