刘文博 / gulu-vue

Download as
Browse Code »

Commit 4de4be34430c007481653237984e174c6954d18c

Authored by 喻鹏
1 parent 4506eedf6d
Exists in master

客服在线和我的订单-待付款

Showing 17 changed files with 610 additions and 4 deletions   Show diff stats
... ... @@ -39,6 +39,12 @@
39 39 "path": "pages/details-3/details-3"
40 40 },
41 41 {
  42 + "path": "pages/customerService/customerService"
  43 + },
  44 + {
  45 + "path": "pages/myorder-paying/myorder-paying"
  46 + },
  47 + {
42 48 "path": "pages/detail/detail"
43 49 }
44 50 ],
... ...
src/pages/addArddess/addArddess.vue
Diff comments   View file @4de4be3
... ... @@ -30,7 +30,7 @@
30 30 </template>
31 31  
32 32 <script>
33   - import simpleAddress from '@/components/Simple-address/Simple-address.vue';
  33 + import simpleAddress from '@/components/Simple-address/simple-address.vue';
34 34 export default {
35 35 data() {
36 36 return {
... ...
src/pages/customerService/customerService.vue
Diff comments   View file @4de4be3
... ... @@ -0,0 +1,203 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="header">
  4 + <view class="header-name">
  5 + <navigator open-type="navigateBack" hover-class="navigator-hover">
  6 + <image src="/static/back.png"></image>
  7 + </navigator>
  8 + <text>在线客服</text>
  9 + </view>
  10 + </view>
  11 + <view class="hr"></view>
  12 + <!-- <scroll-view scroll-y class="srcollview"> -->
  13 + <view class="customer">
  14 + <template>
  15 + <view class="talk-time">
  16 + <text>2020-10-22 12:34:58</text>
  17 + </view>
  18 + <view class="servicer"><image src="../../static/customerService-pic.png"></image><text>亲，请问有什么需要？</text></view>
  19 + <view class="user"><image src="../../static/customerService-pic.png"></image><text>我想问下我买的货发了么</text></view>
  20 + <view class="servicer"><image src="../../static/customerService-pic.png"></image><text>请问是昨天晚上下单的吗？</text></view>
  21 + <view class="user"><image src="../../static/customerService-pic.png"></image><text>嗯嗯,对,是的</text></view>
  22 + </template>
  23 +
  24 + </view>
  25 + <!-- </scroll-view> -->
  26 + <view class="bottom-input">
  27 + <image src="../../static/customerService-horn.png" class="img1"></image>
  28 + <input />
  29 + <image src="../../static/customerService-simle.png" class="img2"></image>
  30 + <image src="../../static/customerService-btn.png" class="img3"></image>
  31 + </view>
  32 + </view>
  33 +</template>
  34 +
  35 +<script>
  36 + export default {
  37 + data() {
  38 + return {
  39 +
  40 + }
  41 + },
  42 + methods: {
  43 +
  44 + }
  45 + }
  46 +</script>
  47 +
  48 +<style lang="scss">
  49 + .content {
  50 + display: flex;
  51 + flex-direction: column;
  52 + justify-content: center;
  53 + align-items: center;
  54 +
  55 + }
  56 +
  57 + .header{
  58 + display: flex;
  59 + flex-direction: column;
  60 + align-items: center;
  61 + justify-content: center;
  62 + width: 100%;
  63 + height: 44px;
  64 + position: fixed;
  65 + top: 0;
  66 + z-index: 999;
  67 + background-color: #fff;
  68 + .header-name{
  69 + display: flex;
  70 + align-items: center;
  71 + width: 670rpx;
  72 + image {
  73 + width: 11px;
  74 + height: 18px;
  75 + }
  76 + text {
  77 + // font-family: "PingFangSC-Regular";
  78 + font-size: 36rpx;
  79 + color: #333333;
  80 + letter-spacing: -0.34px;
  81 + margin: 0 0 10rpx 54rpx;
  82 + }
  83 + }
  84 + }
  85 + .hr {
  86 + width: 100%;
  87 + border-bottom: 1px solid #E9E9E9;
  88 + }
  89 + .customer {
  90 + width: 100%;
  91 + min-height: 1335rpx;
  92 + background-color: #f2f2f2;
  93 + box-sizing: border-box;
  94 + padding: 0 40rpx;
  95 + .talk-time{
  96 + display: flex;
  97 + align-items: center;
  98 + justify-content: center;
  99 + margin-top: 54rpx;
  100 + margin-bottom: 2rpx;
  101 + text{
  102 + // font-family: PingFangSC-Regular;
  103 + font-size: 12px;
  104 + color: #999999;
  105 + letter-spacing: -0.23px;
  106 + }
  107 + }
  108 + .user {
  109 + display: flex;
  110 + flex-direction: row-reverse;
  111 + align-items: center;
  112 + margin-top: 48rpx;
  113 + image{
  114 + width: 30px;
  115 + height: 30px;
  116 + margin-top: -14rpx;
  117 + margin-left: 16rpx;
  118 + }
  119 + text{
  120 + min-height: 80rpx;
  121 + max-width: 512rpx;
  122 + box-sizing: border-box;
  123 + padding: 22rpx 36rpx 22rpx 38rpx;
  124 + margin-top: 14rpx;
  125 + // ont-family: PingFangSC-Regular;
  126 + font-size: 12px;
  127 + color: #333333;
  128 + letter-spacing: -0.23px;
  129 + background: #FFFFFF;
  130 + border: 1px solid #E9E9E9;
  131 + border-radius: 16rpx 0 16rpx 16rpx;
  132 + }
  133 + }
  134 + .servicer {
  135 + display: flex;
  136 + flex-direction: row;
  137 + align-items: center;
  138 + margin-top: 42rpx;
  139 + image{
  140 + width: 30px;
  141 + height: 30px;
  142 + margin-top: -14rpx;
  143 + margin-right: 16rpx;
  144 + }
  145 + text{
  146 + min-height: 80rpx;
  147 + max-width: 512rpx;
  148 + box-sizing: border-box;
  149 + padding: 22rpx 36rpx 22rpx 38rpx;
  150 + margin-top: 14rpx;
  151 + // font-family: PingFangSC-Regular;
  152 + font-size: 12px;
  153 + color: #FFFFFF;
  154 + letter-spacing: -0.23px;
  155 + background: #FF6B4A;
  156 + border-radius: 0 16rpx 16rpx 16rpx;
  157 + }
  158 + }
  159 + }
  160 +
  161 + // .srcollview {
  162 + // // min-height: 1335rpx;
  163 + // background-color: #f2f2f2;
  164 + // }
  165 + .bottom-input {
  166 + width: 100%;
  167 + height: 112rpx;
  168 + background: #F7F7F7;
  169 + box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.06);
  170 + position: fixed;
  171 + bottom: 0;
  172 + z-index: 999;
  173 + display: flex;
  174 + align-items: center;
  175 + box-sizing: border-box;
  176 + padding: 19rpx 40rpx 15rpx 40rpx;
  177 + .img1{
  178 + width: 19px;
  179 + height: 28px;
  180 + margin-right: 10px;
  181 + }
  182 + input {
  183 + width: 536rpx;
  184 + min-height: 78rpx;
  185 + background: #FFFFFF;
  186 + border: 1px solid #999999;
  187 + border-radius: 4px;
  188 + box-sizing: border-box;
  189 + padding-right: 30px;
  190 + }
  191 + .img2 {
  192 + width: 21px;
  193 + height: 21px;
  194 + margin-left: -30px;
  195 + margin-right: 19px;
  196 + }
  197 + .img3{
  198 + width: 28px;
  199 + height: 28px;
  200 + }
  201 + }
  202 +
  203 +</style>
... ...
src/pages/details-3/details-3.vue
Diff comments   View file @4de4be3
... ... @@ -231,7 +231,7 @@
231 231 }
232 232 </script>
233 233  
234   -<style lang="scss">
  234 +<style lang="scss" scoped>
235 235 .content {
236 236 display: flex;
237 237 flex-direction: column;
... ...
src/pages/index/index.vue
Diff comments   View file @4de4be3
... ... @@ -50,7 +50,7 @@
50 50 </template>
51 51  
52 52 <script>
53   - import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
  53 + import UniDrawer from "@/components/uni-drawer/uni-drawer.vue";
54 54 import Card from "../../components/Card/Card.vue"
55 55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56 56 import data from '@/common/data.js';//筛选菜单数据
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @4de4be3
... ... @@ -18,7 +18,7 @@
18 18 </template>
19 19  
20 20 <script>
21   - import OrderCard from './OrderCard.vue'
  21 + import OrderCard from './orderCard.vue'
22 22 export default {
23 23 components:{
24 24 'OrderCard':OrderCard
... ...
src/pages/myorder-paying/myorder-paying.vue
Diff comments   View file @4de4be3
... ... @@ -0,0 +1,397 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="header">
  4 + <view class="header-name">
  5 + <navigator open-type="navigateBack" hover-class="navigator-hover">
  6 + <image src="/static/back.png"></image>
  7 + </navigator>
  8 + <text>我的订单</text>
  9 + </view>
  10 + </view>
  11 + <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">
  12 + <view class="order-hr"></view>
  13 + <view class="order-time">
  14 + <text>请在</text>
  15 + <text class="p2">00:59:58 </text>
  16 + <text>内完成付款</text>
  17 + </view>
  18 + <view class="order-user">
  19 + <view class="order-user-head">
  20 + <text class="p1">钱大大</text>
  21 + <text class="p2">18823749843</text>
  22 + </view>
  23 + <view class="order-user-body">
  24 + <image src="../../static/myorder-paying-location.png"></image>
  25 + <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text>
  26 + </view>
  27 + </view>
  28 + <view class="order-info">
  29 + <view class="order-info-head">
  30 + <image src="../../static/myorder-paying-pic.png"></image>
  31 + <view class="order-info-head-r">
  32 + <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
  33 + <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>
  34 + <text class="p3">￥180</text>
  35 + </view>
  36 + </view>
  37 + <view class="order-info-goodsnum">
  38 + <text>X1</text>
  39 + </view>
  40 + <text class="order-info-freight">
  41 + <text class="p1">运费</text>
  42 + <text class="p2">0.00</text>
  43 + </text>
  44 + <text class="order-info-discount">
  45 + <text class="p1">优惠</text>
  46 + <text class="p2">-￥70.00</text>
  47 + </text>
  48 + <text class="order-info-price">
  49 + <text class="p1">实付</text>
  50 + <text class="p2">￥110</text>
  51 + </text>
  52 + <text class="order-info-num">
  53 + <text>订单号：203486795859605849</text>
  54 + </text>
  55 + <text class="order-info-time">
  56 + <text>下单时间：2020-10-22 14:32:42</text>
  57 + </text>
  58 + <view class="order-info-hr"></view>
  59 + <view class="order-info-contact">
  60 + <image src="../../static/myorder-paying-contact.png"></image>
  61 + <text>联系客服</text>
  62 + </view>
  63 + </view>
  64 + </scroll-view>
  65 + <view class="order-confim">
  66 + <button class="b1">取消订单</button>
  67 + <button class="b2">立即支付</button>
  68 + </view>
  69 + </view>
  70 +</template>
  71 +
  72 +<script>
  73 + export default {
  74 + data() {
  75 + return {
  76 + scrollHeight: false,
  77 + }
  78 + },
  79 + methods: {
  80 +
  81 + }
  82 + }
  83 +</script>
  84 +
  85 +<style lang="scss" scoped>
  86 + .content{
  87 + display: flex;
  88 + flex-direction: column;
  89 + justify-content: center;
  90 + align-items: center;
  91 + }
  92 +
  93 + .header{
  94 + display: flex;
  95 + flex-direction: column;
  96 + align-items: center;
  97 + justify-content: center;
  98 + width: 100%;
  99 + height: 44px;
  100 + position: fixed;
  101 + top: 0;
  102 + z-index: 999;
  103 + background-color: #fff;
  104 + .header-name{
  105 + display: flex;
  106 + align-items: center;
  107 + width: 670rpx;
  108 + image {
  109 + width: 11px;
  110 + height: 18px;
  111 + }
  112 + text {
  113 + // font-family: PingFangSC-Regular;
  114 + font-size: 36rpx;
  115 + color: #333333;
  116 + letter-spacing: -0.34px;
  117 + margin: 0 0 10rpx 54rpx;
  118 + }
  119 + }
  120 + }
  121 +
  122 + .scroll-view {
  123 + // height: 1760rpx; // 测试
  124 + background: #F2F2F2;
  125 + }
  126 + .order-hr {
  127 + width: 100%;
  128 + height: 1px;
  129 + background-color: #E9E9E9;
  130 + }
  131 + .order-time {
  132 + width: 100%;
  133 + height: 140rpx;
  134 + background-color: #fff;
  135 + display: flex;
  136 + justify-content: center;
  137 + text {
  138 + // font-family: PingFangSC-Regular;
  139 + margin-top: 48rpx;
  140 + font-size: 14px;
  141 + color: #333333;
  142 + letter-spacing: -0.26px;
  143 + }
  144 + .p2 {
  145 + // font-family: DINAlternate-Bold;
  146 + margin: 42rpx 20rpx 0 20rpx;
  147 + font-size: 18px;
  148 + color: #EC5D3B;
  149 + letter-spacing: -0.34px;
  150 + }
  151 + }
  152 +
  153 + .order-user {
  154 + width: 670rpx;
  155 + height: 228rpx;
  156 + background: #FFFFFF;
  157 + border-radius: 14rpx;
  158 + margin: 0 auto;
  159 + margin-top: 20rpx;
  160 + margin-bottom: 20rpx;
  161 + .order-user-head {
  162 + display: flex;
  163 + height: 108rpx;
  164 + width: 100%;
  165 + align-items: center;
  166 + margin-left: 126rpx;
  167 + .p1 {
  168 + // font-family: PingFangSC-Regular;
  169 + font-size: 14px;
  170 + color: #333333;
  171 + letter-spacing: -0.26px;
  172 + margin-right: 20rpx;
  173 + }
  174 + .p2 {
  175 + // font-family: PingFangSC-Regular;
  176 + font-size: 14px;
  177 + color: #999999;
  178 + letter-spacing: -0.26px;
  179 + }
  180 + }
  181 + .order-user-body {
  182 + display: flex;
  183 + width: 100%;
  184 + image{
  185 + width: 24px;
  186 + height: 26px;
  187 + margin: 12rpx 32rpx 0 40rpx;
  188 + }
  189 + .p3 {
  190 + // font-family: PingFangSC-Semibold;
  191 + font-size: 14px;
  192 + color: #333333;
  193 + letter-spacing: -0.26px;
  194 + }
  195 + }
  196 + }
  197 +
  198 + .order-info {
  199 + width: 670rpx;
  200 + background-color: #fff;
  201 + box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
  202 + border-radius: 16rpx;
  203 + margin: 0 auto;
  204 + view{
  205 + margin-left: 40rpx;
  206 + }
  207 + text{
  208 + font-size: 14px;
  209 + }
  210 + .order-info-head {
  211 + display: flex;
  212 + padding-top: 40rpx;
  213 + image{
  214 + height: 188rpx;
  215 + width: 188rpx;
  216 + }
  217 + .order-info-head-r{
  218 + margin: 0;
  219 + width: 368rpx;
  220 + margin-left: 24rpx;
  221 + // margin-top: 40rpx;
  222 + text{
  223 + display: block;
  224 + }
  225 + .p1 {
  226 + height: 40px;
  227 + // font-family: PingFangSC-Regular;
  228 + font-size: 14px;
  229 + color: #333333;
  230 + letter-spacing: -0.26px;
  231 + line-height: 18px;
  232 + // line-height: 20px;
  233 + }
  234 + .p2 {
  235 + height: 34px;
  236 + padding: 1px 0 3px 0;
  237 + // font-family: PingFangSC-Regular;
  238 + font-size: 12px;
  239 + color: #999999;
  240 + letter-spacing: -0.23px;
  241 + }
  242 + .p3 {
  243 + height: 20px;
  244 + // font-family: PingFangSC-Regular;
  245 + font-size: 14px;
  246 + color: #FF6B4A;
  247 + letter-spacing: -0.26px;
  248 + }
  249 + }
  250 +
  251 + }
  252 + .order-info-goodsnum {
  253 + display: flex;
  254 + align-items: center;
  255 + justify-content: flex-end;
  256 + text {
  257 + margin-right: 44rpx;
  258 + // ont-family: PingFangSC-Regular;
  259 + font-size: 12px;
  260 + color: #999999;
  261 + letter-spacing: -0.23px;
  262 + }
  263 + }
  264 + .order-info-freight {
  265 + display: block;
  266 + margin-left: 40rpx;
  267 + margin-top: 22rpx;
  268 + .p1{
  269 + // font-family: PingFangSC-Regular;
  270 + font-size: 14px;
  271 + color: #333333;
  272 + letter-spacing: -0.26px;
  273 + line-height: 18px;
  274 + margin-right: 24px;
  275 + }
  276 + .p2 {
  277 + // font-family: PingFangSC-Regular;
  278 + font-size: 14px;
  279 + color: #FF6B4A;
  280 + letter-spacing: -0.26px;
  281 + }
  282 + }
  283 + .order-info-discount {
  284 + display: block;
  285 + margin-left: 40rpx;
  286 + margin-top: 24rpx;
  287 + .p1 {
  288 + // font-family: PingFangSC-Regular;
  289 + font-size: 14px;
  290 + color: #333333;
  291 + letter-spacing: -0.26px;
  292 + line-height: 18px;
  293 + margin-right: 24px;
  294 + }
  295 + .p2 {
  296 + // font-family: PingFangSC-Regular;
  297 + font-size: 14px;
  298 + color: #FF6B4A;
  299 + letter-spacing: -0.26px;
  300 + }
  301 + }
  302 + .order-info-price {
  303 + display: block;
  304 + margin-left: 40rpx;
  305 + margin-top: 24rpx;
  306 + .p1 {
  307 + // font-family: PingFangSC-Semibold;
  308 + font-size: 14px;
  309 + color: #333333;
  310 + letter-spacing: -0.26px;
  311 + line-height: 18px;
  312 + margin-right: 24px;
  313 + }
  314 + .p2 {
  315 + // font-family: PingFangSC-Semibold;
  316 + font-size: 14px;
  317 + color: #FF6B4A;
  318 + letter-spacing: -0.26px;
  319 + }
  320 + }
  321 + .order-info-num{
  322 + display: block;
  323 + margin-left: 40rpx;
  324 + margin-top: 44rpx;
  325 + text{
  326 + // font-family: PingFangSC-Regular;
  327 + font-size: 12px;
  328 + color: #999999;
  329 + letter-spacing: -0.23px;
  330 + }
  331 + }
  332 + .order-info-time {
  333 + display: block;
  334 + margin: 8rpx 0 48rpx 40rpx;
  335 + text{
  336 + // font-family: PingFangSC-Regular;
  337 + font-size: 12px;
  338 + color: #999999;
  339 + letter-spacing: -0.23px;
  340 + }
  341 + }
  342 + .order-info-hr{
  343 + width: 520rpx;
  344 + height: 1px;
  345 + background-color: #E9E9E9;
  346 + margin-bottom: 20rpx;
  347 + }
  348 + .order-info-contact {
  349 + display: flex;
  350 + padding-bottom: 28rpx;
  351 + image{
  352 + width: 19px;
  353 + height: 16px;
  354 + }
  355 + text {
  356 + // font-family: PingFangSC-Regular;
  357 + margin-left: 20rpx;
  358 + font-size: 14px;
  359 + color: #333333;
  360 + letter-spacing: -0.26px;
  361 + line-height: 18px;
  362 + }
  363 + }
  364 + }
  365 +
  366 + .order-confim {
  367 + display: flex;
  368 + align-items: center;
  369 + z-index: 999;
  370 + width: 100%;
  371 + height: 112rpx;
  372 + position: fixed;
  373 + bottom: 0;
  374 + background: #FFFFFF;
  375 + button {
  376 + width: 204rpx;
  377 + height: 80rpx;
  378 + border: 1px solid #FF6B4A;
  379 + border-radius: 40rpx;
  380 + font-size: 32rpx;
  381 + letter-spacing: -0.3px;
  382 + margin-right: 0;
  383 + }
  384 + .b1 {
  385 + // font-family: PingFangSC-Regular;
  386 + color: #FF6B4A;
  387 +
  388 + }
  389 + .b2 {
  390 + // font-family: PingFangSC-Regular;
  391 + background-color: #FF6B4A;
  392 + color: #FFFFFF;
  393 + margin: 0 26rpx 0 20rpx;
  394 + }
  395 + }
  396 +
  397 +</style>
... ...
src/static/back.png
Diff comments   View file @4de4be3

1.82 KB
src/static/customerService-btn.png
Diff comments   View file @4de4be3

1.86 KB
src/static/customerService-horn.png
Diff comments   View file @4de4be3

2.14 KB
src/static/customerService-pic.png
Diff comments   View file @4de4be3

7.29 KB
src/static/customerService-simle.png
Diff comments   View file @4de4be3

1.93 KB
src/static/img/goods/p11.png
Diff comments   View file @4de4be3

121 KB
src/static/img/goods/p12.png
Diff comments   View file @4de4be3

115 KB
src/static/myorder-paying-contact.png
Diff comments   View file @4de4be3

2.5 KB
src/static/myorder-paying-location.png
Diff comments   View file @4de4be3

2.07 KB
src/static/myorder-paying-pic.png
Diff comments   View file @4de4be3

64.7 KB