刘文博 / gulu-vue

Download as
Browse Code »

Commit fb85b244cfc7368e4d93490b1f6719f1f57af940

Authored by BigBoss
1 parent 9368935522
Exists in master

user页面

Showing 11 changed files with 354 additions and 111 deletions   Show diff stats
src/components/Card/Card.vue
Diff comments   View file @fb85b24
... ... @@ -0,0 +1,96 @@
  1 +<template>
  2 + <view class="card" @tap="toGoods(goods.goods_id)">
  3 + <image mode="widthFix" :src="goods.img" ></image>
  4 + <view class="name">{{goods.name}}</view>
  5 + <view class="info">
  6 + <view class="priceBox">
  7 + <view class="price">{{goods.price}}</view>
  8 + <view class="originCost">{{goods.originCost}}</view>
  9 + </view>
  10 + <view class="slogan">{{goods.slogan}}</view>
  11 + </view>
  12 + </view>
  13 +</template>
  14 +
  15 +<script>
  16 + export default {
  17 + props: {
  18 + /**
  19 + * 商品数据
  20 + */
  21 + goods: {
  22 + goods_id: Number,
  23 + img: String,
  24 + name: String,
  25 + originCost:String,
  26 + price: String,
  27 + slogan:String
  28 + }
  29 +
  30 + },
  31 + created() {
  32 + },
  33 + data() {
  34 + return {
  35 +
  36 + };
  37 + },
  38 + methods:{
  39 + toGoods(id){
  40 + console.log(id)
  41 + uni.navigateTo({
  42 + url: `../detail/detail?oderId=1`,
  43 + success: res => {},
  44 + fail: () => {},
  45 + complete: () => {}
  46 + });
  47 + }
  48 + }
  49 + }
  50 +</script>
  51 +
  52 +<style lang="scss">
  53 + image{
  54 + width: 100%;
  55 + height: 120rpx;
  56 + }
  57 + .name{
  58 + width: 92%;
  59 + padding: 5px 4%;
  60 + display: -webkit-box;
  61 + -webkit-box-orient: vertical;
  62 + -webkit-line-clamp: 2;
  63 + text-align: justify;
  64 + overflow: hidden;
  65 + font-size: 24rpx;
  66 + color: #333333;
  67 + }
  68 + .info{
  69 + display: flex;
  70 + justify-content: space-between;
  71 + align-items: center;
  72 + width: 92%;
  73 + padding: 5px 4% 5px 4%;
  74 + .priceBox{
  75 + display: flex;
  76 + justify-content: space-between;
  77 + align-items: center;
  78 + .price{
  79 + color: #EB5D3B;
  80 + font-size: 28rpx;
  81 + font-weight: 600;
  82 + margin-right: 10rpx;
  83 + }
  84 + .originCost{
  85 + text-decoration:line-through;
  86 + color: #999999;
  87 + font-size: 20rpx;
  88 + }
  89 +
  90 + }
  91 + .slogan{
  92 + color: #999999;
  93 + font-size: 20rpx;
  94 + }
  95 + }
  96 +</style>
... ...
src/components/card.vue
View file @9368935
... ... @@ -1,19 +0,0 @@
1   -<template>
2   - <view>
3   -
4   - </view>
5   -</template>
6   -
7   -<script>
8   - export default {
9   - data() {
10   - return {
11   -
12   - };
13   - }
14   - }
15   -</script>
16   -
17   -<style lang="scss">
18   -
19   -</style>
1 1 import Vue from 'vue'
2 2 import App from './App.vue'
3 3  
4   -Vue.config.productionTip = false
5 4  
6   -new App().$mount()
  5 +Vue.config.productionTip = false
  6 +Vue.prototype.sendRequest = function(param:any){
  7 + let _self = this,
  8 + url = param.url,
  9 + data = param.data,
  10 + header = param.header,
  11 + token = '';
  12 + //拼接完整请求url
  13 + let requestUrl = this.baseUrl + url;
  14 +
  15 +
  16 +
  17 +}
  18 +new App().$mount()
... ...
src/pages/addArddess/addArddess.vue
Diff comments   View file @fb85b24
... ... @@ -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/index/index.vue
Diff comments   View file @fb85b24
... ... @@ -37,16 +37,8 @@
37 37 <!-- 商品列表 -->
38 38 <view class="goods-list">
39 39 <view class="product-list">
40   - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
41   - <image mode="widthFix" :src="goods.img" ></image>
42   - <view class="name">{{goods.name}}</view>
43   - <view class="info">
44   - <view class="priceBox">
45   - <view class="price">{{goods.price}}</view>
46   - <view class="originCost">{{goods.originCost}}</view>
47   - </view>
48   - <view class="slogan">{{goods.slogan}}</view>
49   - </view>
  40 + <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
  41 + <Card :goods = "goods"></Card>
50 42 </view>
51 43 </view>
52 44 <view class="loading-text">{{loadingText}}</view>
... ... @@ -59,12 +51,14 @@
59 51  
60 52 <script>
61 53 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
  54 + import Card from "../../components/Card/Card.vue"
62 55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
63 56 import data from '@/common/data.js';//筛选菜单数据
64 57 export default {
65 58 components: {
66 59 'UniDrawer':UniDrawer,
67   - 'HMfilterDropdown':HMfilterDropdown
  60 + 'HMfilterDropdown':HMfilterDropdown,
  61 + 'Card':Card
68 62 },
69 63 data() {
70 64 return {
... ... @@ -150,15 +144,6 @@
150 144  
151 145 ]
152 146 }
153   - },
154   - toGoods(id){
155   - console.log(id)
156   - uni.navigateTo({
157   - url: `../detail/detail?oderId=1`,
158   - success: res => {},
159   - fail: () => {},
160   - complete: () => {}
161   - });
162 147 }
163 148 },
164 149 onNavigationBarButtonTap(e) {
... ... @@ -270,54 +255,9 @@
270 255 flex-wrap: wrap;
271 256 .product{
272 257 width: 48%;
273   - border-radius: 10px;
274   - background-color: #fff;
275   - margin: 0 0 7px 0;
276   - box-shadow: 0 3px 12px rgba(0,0,0,0.1);
277   - image{
278   - width: 100%;
279   - border-radius: 10px 10px 0 0;
280   - height: 184rpx;
281   - }
282   - .name{
283   - width: 92%;
284   - padding: 5px 4%;
285   - display: -webkit-box;
286   - -webkit-box-orient: vertical;
287   - -webkit-line-clamp: 2;
288   - text-align: justify;
289   - overflow: hidden;
290   - font-size: 24rpx;
291   - color: #333333;
292   - }
293   - .info{
294   - display: flex;
295   - justify-content: space-between;
296   - align-items: center;
297   - width: 92%;
298   - padding: 5px 4% 5px 4%;
299   - .priceBox{
300   - display: flex;
301   - justify-content: space-between;
302   - align-items: center;
303   - .price{
304   - color: #EB5D3B;
305   - font-size: 28rpx;
306   - font-weight: 600;
307   - margin-right: 10rpx;
308   - }
309   - .originCost{
310   - text-decoration:line-through;
311   - color: #999999;
312   - font-size: 20rpx;
313   - }
314   -
315   - }
316   - .slogan{
317   - color: #999999;
318   - font-size: 20rpx;
319   - }
320   - }
  258 + margin: 0 0 20rpx 0;
  259 + background: #FFFFFF;
  260 + border: 1px solid #F2F2F2;
321 261 }
322 262 }
323 263 }
... ...
src/pages/user/user.vue
Diff comments   View file @fb85b24
1 1 <template>
2   - <view class="content">
3   - <image class="logo" src="/static/logo.png"></image>
4   - <view class="text-area">
5   - <text class="title">{{title}}</text>
  2 + <view class="wrap">
  3 + <view class="content">
  4 + <view class="userInfo">
  5 + <view class="info">
  6 + <image src="../../static/img/detail/d10.png" mode="aspectFill"></image>
  7 + <view class="infoText">
  8 + <text class="userName">{{userName}}</text>
  9 + <text class="nickName">用户名：骆驼不死的祥子</text>
  10 + </view>
  11 + </view>
  12 + <view class="service">
  13 + <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
  14 + </view>
  15 + </view>
  16 + <view class="myOrder">
  17 + <view class="orderHeader">
  18 + <text>全部订单</text>
  19 + <view class="btn">
  20 + 全部
  21 + <image src="../../static/right.png" mode="aspectFill"></image>
  22 + </view>
  23 + </view>
  24 + <view class="orderBody">
  25 + <view class="item,waitPay">
  26 + <image src="../../static/waitPay.png" mode="aspectFill"></image>
  27 + <text>待付款</text>
  28 + </view>
  29 + <view class="item,waitDeliver">
  30 + <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
  31 + <text>待发货</text>
  32 + </view>
  33 + <view class="item,waitReceive">
  34 + <image src="../../static/waitReceive.png" mode="aspectFill"></image>
  35 + <text>待收货</text>
  36 + </view>
  37 + <view class="item,service">
  38 + <image src="../../static/service.png" mode="aspectFill"></image>
  39 + <text>退换/售后</text>
  40 + </view>
  41 + </view>
  42 + </view>
  43 + <view class="recommend">
  44 + <view class="title">
  45 + <view class="line"></view>
  46 + <view class="text">精选推荐</view>
  47 + <view class="line"></view>
  48 + </view>
  49 + <!-- 商品列表 -->
  50 + <view class="goods-list">
  51 + <view class="product-list">
  52 + <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
  53 + <Card :goods = "goods"></Card>
  54 + </view>
  55 + </view>
  56 + <view class="loading-text">{{loadingText}}</view>
  57 + </view>
  58 + </view>
6 59 </view>
  60 +
7 61 </view>
8 62 </template>
9 63  
10 64 <script>
  65 + import Card from "../../components/Card/Card.vue"
11 66 export default {
  67 + components: {
  68 + 'Card':Card
  69 + },
12 70 data() {
13 71 return {
14   - title: 'Hello'
  72 +
  73 + //商品数据
  74 + goodsList:[
  75 + { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  76 + { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  77 + { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  78 + { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  79 + { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  80 + { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  81 + { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  82 + { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  83 + { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  84 + { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
  85 + ],
  86 + headerphoto:'',
  87 + userName:'Adam'
15 88 }
16 89 },
17 90 onLoad() {
... ... @@ -23,30 +96,171 @@
23 96 }
24 97 </script>
25 98  
26   -<style>
  99 +<style lang="scss">
  100 + .warp{
  101 + font-size: 24rpx;
  102 + background-color: #f2f2f2;
  103 + height: 100vh;
  104 + }
27 105 .content {
28 106 display: flex;
29 107 flex-direction: column;
30 108 align-items: center;
31 109 justify-content: center;
  110 + background-color: #F2F2F2;
32 111 }
33   -
34   - .logo {
35   - height: 200rpx;
36   - width: 200rpx;
37   - margin-top: 200rpx;
38   - margin-left: auto;
39   - margin-right: auto;
40   - margin-bottom: 50rpx;
  112 + .userInfo{
  113 + background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
  114 + width: 100%;
  115 + height: 240rpx;
  116 + color: #FFFFFF;
  117 + padding: 60rpx 82rpx 80rpx 44rpx;
  118 + box-sizing: border-box;
  119 + display: flex;
  120 + flex-direction: row;
  121 + justify-content: space-between;
  122 + align-items: flex-start;
  123 + .info{
  124 + display: flex;
  125 + flex-direction: row;
  126 + justify-content: space-between;
  127 + align-items: center;
  128 + image{
  129 + border-radius: 50rpx;
  130 + height: 100rpx ;
  131 + width: 100rpx;
  132 + margin-right: 40rpx;
  133 + }
  134 + .infoText{
  135 + display: flex;
  136 + flex-direction: column;
  137 + justify-content: space-between;
  138 + align-items: flex-scetart;
  139 + .userName{
  140 + font-size: 18px;
  141 + color: #FFFFFF;
  142 + margin-bottom: 8rpx;
  143 + }
  144 + .nickName{
  145 + font-size: 12px;
  146 + color: #FFFFFF;
  147 + }
  148 + }
  149 + }
  150 + .service{
  151 + image{
  152 + height: 36rpx;
  153 + width: 36rpx;
  154 + }
  155 + }
41 156 }
42   -
43   - .text-area {
  157 + .myOrder{
  158 + width: 100%;
  159 + height: 296rpx;
  160 + margin-top: 20rpx;
  161 + margin-bottom: 20rpx;
  162 + padding: 0 40rpx;
  163 + box-sizing: border-box;
  164 + background: #FFFFFF;
  165 + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  166 + border-radius: 6px;
  167 + border-radius: 6px;
44 168 display: flex;
45   - justify-content: center;
  169 + flex-direction: column;
  170 + justify-content: space-around;
  171 + align-items: center;
  172 + .orderHeader{
  173 + width: 100%;
  174 + height: 100rpx;
  175 + display: flex;
  176 + flex-direction: row;
  177 + justify-content: space-between;
  178 + align-items: center;
  179 + border-bottom: 1px solid #E9E9E9;;
  180 + font-weight: bold;
  181 + font-size: 18px;
  182 + color: #333333;
  183 + .btn{
  184 + font-size: 12px;
  185 + color: #999999;
  186 + image{
  187 + margin-left: 20rpx;
  188 + height: 16rpx;
  189 + width: 8rpx;
  190 + }
  191 + }
  192 + }
  193 + .orderBody{
  194 + width: 100%;
  195 + display: flex;
  196 + flex-direction: row;
  197 + justify-content: space-between;
  198 + align-items: center;
  199 + .item{
  200 + display: flex;
  201 + flex-direction: column;
  202 + align-items: center;
  203 + image{
  204 + width: 46rpx;
  205 + height: 46rpx;
  206 + }
  207 + text{
  208 + margin-top: 24rpx;
  209 + font-size: 12px;
  210 + color: #333333;
  211 + }
  212 + }
  213 + }
46 214 }
47   -
48   - .title {
49   - font-size: 36rpx;
50   - color: #8f8f94;
  215 + .recommend{
  216 + background: #FFFFFF;
  217 + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  218 + border-radius: 6px;
  219 + border-radius: 6px;
  220 + .title{
  221 + display: flex;
  222 + flex-direction: row;
  223 + align-items: center;
  224 + justify-content: space-between;
  225 + padding: 20rpx 40rpx;
  226 + .line{
  227 + width: 264rpx;
  228 + height: 1rpx;
  229 + border-bottom: 1px solid #EAEAEA;
  230 + }
  231 + .text{
  232 + font-family: PingFangSC-Medium;
  233 + font-size: 14px;
  234 + color: #333333;
  235 + letter-spacing: -0.26px;
  236 + text-align: justify;
  237 + line-height: 24px;
  238 + }
  239 + }
  240 + .goods-list{
  241 + .loading-text{
  242 + width: 100%;
  243 + display: flex;
  244 + justify-content: center;
  245 + align-items: center;
  246 + height: 30px;
  247 + color: #979797;
  248 + font-size: 12px;
  249 + }
  250 + .product-list{
  251 + width: 92%;
  252 + padding: 0 4% 3vw 4%;
  253 + display: flex;
  254 + justify-content: space-between;
  255 + flex-wrap: wrap;
  256 + .product{
  257 + width: 48%;
  258 + margin: 0 0 20rpx 0;
  259 + background: #FFFFFF;
  260 + border: 1px solid #F2F2F2;
  261 + }
  262 + }
  263 + }
51 264 }
  265 +
52 266 </style>
... ...
src/static/service.png
Diff comments   View file @fb85b24

1.21 KB
src/static/serviceLogo.png
Diff comments   View file @fb85b24

617 Bytes
src/static/waitDeliver.png
Diff comments   View file @fb85b24

314 Bytes
src/static/waitPay.png
Diff comments   View file @fb85b24

646 Bytes
src/static/waitReceive.png
Diff comments   View file @fb85b24

789 Bytes