刘文博 / gulu-vue

Download as
Browse Code »

Commit 768c40b1e17cdd06a46bf41b9eb1c25869e5827d

Authored by Adam
2 parents f3a9eefcf7 a4377daecc
Exists in master

Merge branch 'master' into 'master' 

Master

See merge request !5
Showing 21 changed files   Show diff stats
... ... @@ -39,6 +39,18 @@
39 39 "path": "pages/details-3/details-3"
40 40 },
41 41 {
  42 + "path": "pages/refundment/Refundways"
  43 + },
  44 + {
  45 + "path": "pages/refundment/refundment"
  46 + },
  47 + {
  48 + "path": "pages/customerService/customerService"
  49 + },
  50 + {
  51 + "path": "pages/myorder-paying/myorder-paying"
  52 + },
  53 + {
42 54 "path": "pages/detail/detail"
43 55 }
44 56 ],
... ...
src/pages/addArddess/addArddess.vue
Diff comments   View file @768c40b
... ... @@ -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 @768c40b
... ... @@ -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 @768c40b
... ... @@ -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 @768c40b
... ... @@ -22,11 +22,11 @@
22 22 </view>
23 23 </view>
24 24 </view>
25   - <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
  25 + <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26 26 <view class="close">
27 27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28 28 </view>
29   - </Uni-drawer>
  29 + </uni-drawer>
30 30  
31 31  
32 32  
... ... @@ -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 @768c40b
... ... @@ -21,7 +21,7 @@
21 21 </view>
22 22 </template>
23 23 <script>
24   - import OrderCard from './OrderCard.vue'
  24 + import OrderCard from './orderCard.vue'
25 25 export default {
26 26 components:{
27 27 'OrderCard':OrderCard
... ...
src/pages/myorder-paying/myorder-paying.vue
Diff comments   View file @768c40b
... ... @@ -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/pages/refundment/Refundways.vue
Diff comments   View file @768c40b
... ... @@ -0,0 +1,152 @@
  1 +<template>
  2 + <view class="container" v-bind:style="{height: curheight+'px'}">
  3 + <view class="refund" v-for="(items) in refund" :key="items.key">
  4 + <view class="detail">
  5 + <view class="detail_img"><image v-bind:src="items.img"></image></view>
  6 + <view class="detail2">
  7 + <view class="detail_name">{{items.name}}</view>
  8 + <view class="detail_standard">规格：{{items.standard}}</view>
  9 + <view class="detail_price">
  10 + <span>￥{{items.price}}</span>
  11 + <span>X{{items.number}}</span>
  12 + </view>
  13 + </view>
  14 + </view>
  15 + <view class="refund_price">
  16 + <span class="refund_price1">退款金额</span>
  17 + <span class="refund_price2">￥{{items.refundprice}}</span>
  18 + </view>
  19 + <view class="refund_reason">
  20 + <view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
  21 + </view>
  22 + <view class="refund_reason">
  23 + <view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
  24 + </view>
  25 + <view class="refund_reason">
  26 + <view>换货<image src="/static/img/detail/xiala.png"></image></view>
  27 + </view>
  28 + </view>
  29 + </view>
  30 +</template>
  31 +
  32 +<script>
  33 +export default {
  34 + //获取浏览器高度
  35 + beforeMount(height){
  36 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  37 + this.curheight = h-44;
  38 +
  39 + },
  40 + data(){
  41 + return{
  42 + curheight:0, //浏览器高度
  43 + refund:[
  44 + {
  45 + key:0,
  46 + img:'/static/img/detail/d1.png',
  47 + name:'商品名称',
  48 + standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
  49 + price: 180,
  50 + number: 1,
  51 + refundprice: 110,
  52 + refund_img:'/static/img/detail/refund_img.png',
  53 + }
  54 + ],
  55 + }
  56 + }
  57 +}
  58 +</script>
  59 +
  60 +<style lang="scss">
  61 +
  62 +.container{
  63 + background: #F2F2F2;
  64 + padding-top: 10px;
  65 + box-sizing: border-box;
  66 +}
  67 +.refund{
  68 + width: 90%;
  69 + height: 300px;
  70 + margin: 0 auto;
  71 + background: #FFFFFF;
  72 + box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
  73 + border-radius: 8px;
  74 + padding: 14px;
  75 + box-sizing: border-box;
  76 +}
  77 +.detail{
  78 + display: flex;
  79 + justify-content: space-between;
  80 + font-family: PingFangSC-Regular;
  81 + margin-bottom: 20px;
  82 + .detail2{
  83 + width: 64%;
  84 + view{
  85 + margin-bottom: 8px;
  86 + }
  87 + .detail_name{
  88 + font-size: 14px;
  89 + color:#333333;
  90 + }
  91 + .detail_standard{
  92 + font-size: 12px;
  93 + color: #999999;
  94 + }
  95 + .detail_price{
  96 + font-size: 14px;
  97 + color: #999999;
  98 + display: flex;
  99 + justify-content: space-between;
  100 + }
  101 + }
  102 + .detail_img{
  103 + width: 188rpx;
  104 + height: 188rpx;
  105 + border-radius: 40px;
  106 + image{
  107 + width: 100%;
  108 + height: 100%;
  109 + }
  110 + }
  111 +}
  112 +
  113 +.refund_price{
  114 + font-family: PingFangSC-Semibold;
  115 + font-size: 14px;
  116 + color: #333333;
  117 + letter-spacing: -0.26px;
  118 + line-height: 18px;
  119 + margin-bottom: 26px;
  120 + .refund_price1{
  121 + font-weight: bold;
  122 + margin-right: 16px;
  123 + }
  124 + .refund_price2{
  125 + color: #FF6B4A;
  126 + }
  127 +}
  128 +.refund_reason{
  129 + margin-top: 16px;
  130 + margin-bottom: 16px;
  131 + font-family: PingFangSC-Regular;
  132 + font-size: 12px;
  133 + color: #333333;
  134 + letter-spacing: -0.23px;
  135 + line-height: 18px;
  136 + view{
  137 + display: inline-block;
  138 + font-size: 12px;
  139 + color: #333333;
  140 + letter-spacing: -0.23px;
  141 + line-height: 18px;
  142 + width: 90%;
  143 + image{
  144 + width: 30rpx;
  145 + height: 24rpx;
  146 + float: right;
  147 + }
  148 + }
  149 +}
  150 +
  151 +
  152 +</style>
0 153 \ No newline at end of file
... ...
src/pages/refundment/refundment.vue
Diff comments   View file @768c40b
... ... @@ -0,0 +1,220 @@
  1 +<template>
  2 + <view class="container" v-bind:style="{height: curheight+'px'}">
  3 + <view class="refund" v-for="(items) in refund" :key="items.key">
  4 + <view class="detail">
  5 + <view class="detail_img"><image v-bind:src="items.img"></image></view>
  6 + <view class="detail2">
  7 + <view class="detail_name">{{items.name}}</view>
  8 + <view class="detail_standard">规格：{{items.standard}}</view>
  9 + <view class="detail_price">
  10 + <span>￥{{items.price}}</span>
  11 + <span>X{{items.number}}</span>
  12 + </view>
  13 + </view>
  14 + </view>
  15 + <view class="refund_price">
  16 + <span class="refund_price1">退款金额</span>
  17 + <span class="refund_price2">￥{{items.refundprice}}</span>
  18 + </view>
  19 + <view class="refund_reason">
  20 + <span >退款原因</span>
  21 + <!-- 跳转退款原因详细页 -->
  22 + <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image></view>
  23 + </view>
  24 + <view class="refund_explain">
  25 + <span>退款说明</span>
  26 + <input placeholder="选填" value="">
  27 + </view>
  28 + <view class="refund_img">
  29 + <span class="refund_img1">上传图片</span>
  30 + <span class="refund_img2">（最多3张）</span>
  31 + <view><image v-bind:src="items.refund_img"></image></view>
  32 + </view>
  33 + </view>
  34 + <view class="button">
  35 + <span>提交</span>
  36 + </view>
  37 + </view>
  38 +</template>
  39 +
  40 +<script>
  41 +
  42 +export default {
  43 + //获取浏览器高度
  44 + beforeMount(height){
  45 + var h = document.documentElement.clientHeight || document.body.clientHeight;
  46 + this.curheight = h-44;
  47 +
  48 + },
  49 + methods:{
  50 + Jump(){
  51 + this.$router.push({path: "Refundways"})
  52 + },
  53 + },
  54 + data(){
  55 + return{
  56 + curheight:0, //浏览器高度
  57 + refund:[
  58 + {
  59 + key:0,
  60 + img:'/static/img/detail/d1.png',
  61 + name:'商品名称',
  62 + standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
  63 + price: 180,
  64 + number: 1,
  65 + refundprice: 110,
  66 + refund_img:'/static/img/detail/refund_img.png',
  67 + }
  68 + ],
  69 + }
  70 + }
  71 +}
  72 +</script>
  73 +
  74 +<style lang="scss">
  75 +
  76 +.container{
  77 + background: #F2F2F2;
  78 + padding-top: 10px;
  79 + box-sizing: border-box;
  80 +}
  81 +.refund{
  82 + width: 90%;
  83 + height: 353px;
  84 + margin: 0 auto;
  85 + background: #FFFFFF;
  86 + box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
  87 + border-radius: 8px;
  88 + padding: 14px;
  89 + box-sizing: border-box;
  90 +}
  91 +.detail{
  92 + display: flex;
  93 + justify-content: space-between;
  94 + font-family: PingFangSC-Regular;
  95 + margin-bottom: 20px;
  96 + .detail2{
  97 + width: 64%;
  98 + view{
  99 + margin-bottom: 8px;
  100 + }
  101 + .detail_name{
  102 + font-size: 14px;
  103 + color:#333333;
  104 + }
  105 + .detail_standard{
  106 + font-size: 12px;
  107 + color: #999999;
  108 + }
  109 + .detail_price{
  110 + font-size: 14px;
  111 + color: #999999;
  112 + display: flex;
  113 + justify-content: space-between;
  114 + }
  115 + }
  116 + .detail_img{
  117 + width: 188rpx;
  118 + height: 188rpx;
  119 + border-radius: 40px;
  120 + image{
  121 + width: 100%;
  122 + height: 100%;
  123 + }
  124 + }
  125 +}
  126 +.refund_explain,.refund_img,.refund_price,.refund_reason{
  127 + margin-top: 16px;
  128 + margin-bottom: 16px;
  129 +}
  130 +.refund_price{
  131 + font-family: PingFangSC-Semibold;
  132 + font-size: 14px;
  133 + color: #333333;
  134 + letter-spacing: -0.26px;
  135 + line-height: 18px;
  136 + .refund_price1{
  137 + font-weight: bold;
  138 + margin-right: 16px;
  139 + }
  140 + .refund_price2{
  141 + color: #FF6B4A;
  142 + }
  143 +}
  144 +.refund_reason,.refund_explain span,.refund_img1{
  145 + font-family: PingFangSC-Regular;
  146 + font-size: 12px;
  147 + color: #333333;
  148 + letter-spacing: -0.23px;
  149 + line-height: 18px;
  150 +}
  151 +.refund_explain{
  152 + display: flex;
  153 + justify-content: space-between;
  154 + align-items: center;
  155 +}
  156 +.refund_explain input,.refund_img2{
  157 + width: 78%;
  158 + font-family: PingFangSC-Regular;
  159 + font-size: 12px;
  160 + color: #B8B8B8;
  161 + letter-spacing: -0.23px;
  162 +}
  163 +.refund_reason{
  164 + span{
  165 + margin-right: 20px;
  166 + }
  167 + view{
  168 + display: inline-block;
  169 + font-family: PingFangSC-Regular;
  170 + font-size: 12px;
  171 + color: #B8B8B8;
  172 + letter-spacing: -0.23px;
  173 + width: 76%;
  174 + image{
  175 + width: 30rpx;
  176 + height: 26rpx;
  177 + float: right;
  178 + }
  179 + }
  180 +}
  181 +.refund_img{
  182 + .refund_img1{
  183 + margin-right: 10px;
  184 + }
  185 + view{
  186 + margin-top: 20px;
  187 + width: 66rpx;
  188 + height: 60rpx;
  189 + image{
  190 + width: 100%;
  191 + height: 100%;
  192 + }
  193 + }
  194 +}
  195 +a{
  196 + text-decoration: none;
  197 + font-family: PingFangSC-Regular;
  198 + font-size: 12px;
  199 + color: #B8B8B8;
  200 + letter-spacing: -0.23px;
  201 +}
  202 +.button{
  203 + width: 100%;
  204 + height: 112rpx;
  205 + background: #FF6B4A ;
  206 + display: flex;
  207 + justify-content: center;
  208 + align-items: center;
  209 + position: fixed;
  210 + bottom: 0;
  211 + span{
  212 + color:#FFFFFF;
  213 + font-family: PingFangSC-Regular;
  214 + font-size: 16px;
  215 + letter-spacing: -0.3px;
  216 + }
  217 +}
  218 +
  219 +
  220 +</style>
0 221 \ No newline at end of file
... ...
src/static/back.png
Diff comments   View file @768c40b

1.82 KB
src/static/customerService-btn.png
Diff comments   View file @768c40b

1.86 KB
src/static/customerService-horn.png
Diff comments   View file @768c40b

2.14 KB
src/static/customerService-pic.png
Diff comments   View file @768c40b

7.29 KB
src/static/customerService-simle.png
Diff comments   View file @768c40b

1.93 KB
src/static/img/detail/refund_img.png
Diff comments   View file @768c40b

1.17 KB
src/static/img/detail/xiala.png
Diff comments   View file @768c40b

438 Bytes
src/static/img/goods/p11.png
Diff comments   View file @768c40b

121 KB
src/static/img/goods/p12.png
Diff comments   View file @768c40b

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

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

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

64.7 KB