刘文博 / 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
File was created 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>
97
src/components/card.vue
View file @9368935
1 <template> File was deleted
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>
20 1 <template>
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import App from './App.vue' 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
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view class="content">
4 <view class="item,name" > 4 <view class="item,name" >
5 <text class="itemText">姓名</text> 5 <text class="itemText">姓名</text>
6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> 6 <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
7 </view> 7 </view>
8 <view class="item,phone"> 8 <view class="item,phone">
9 <text class="itemText">电话</text> 9 <text class="itemText">电话</text>
10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> 10 <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
11 </view> 11 </view>
12 <view class="item,area" > 12 <view class="item,area" >
13 <text class="itemText">地区</text> 13 <text class="itemText">地区</text>
14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> 14 <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>
15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> 15 <view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
16 <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> 16 <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
17 </view> 17 </view>
18 <view class="item,address" > 18 <view class="item,address" >
19 <text class="itemText">详细地址</text> 19 <text class="itemText">详细地址</text>
20 <input placeholder="街道、小区门牌等详细地址"/> 20 <input placeholder="街道、小区门牌等详细地址"/>
21 </view> 21 </view>
22 <view class="item,check" > 22 <view class="item,check" >
23 <text class="itemText">设为默认地址</text> 23 <text class="itemText">设为默认地址</text>
24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> 24 <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
25 </view> 25 </view>
26 <input /> 26 <input />
27 </view> 27 </view>
28 <view class="button">保存并使用</view> 28 <view class="button">保存并使用</view>
29 </view> 29 </view>
30 </template> 30 </template>
31 31
32 <script> 32 <script>
33 import simpleAddress from '@/components/Simple-address/simple-address.vue'; 33 import simpleAddress from '@/components/Simple-address/Simple-address.vue';
34 export default { 34 export default {
35 data() { 35 data() {
36 return { 36 return {
37 cityPickerValueDefault: [0, 0, 1], 37 cityPickerValueDefault: [0, 0, 1],
38 pickerText: '', 38 pickerText: '',
39 isDefalutAddress:true 39 isDefalutAddress:true
40 40
41 }; 41 };
42 }, 42 },
43 components: { 43 components: {
44 simpleAddress 44 simpleAddress
45 }, 45 },
46 methods: { 46 methods: {
47 openAddres() { 47 openAddres() {
48 this.cityPickerValueDefault = [0,0,1] 48 this.cityPickerValueDefault = [0,0,1]
49 this.$refs.simpleAddress.open(); 49 this.$refs.simpleAddress.open();
50 }, 50 },
51 onConfirm(e) { 51 onConfirm(e) {
52 this.pickerText = e.label; 52 this.pickerText = e.label;
53 }, 53 },
54 changeDefalutAddress(e){ 54 changeDefalutAddress(e){
55 this.isDefalutAddress = e.target.value 55 this.isDefalutAddress = e.target.value
56 } 56 }
57 } 57 }
58 } 58 }
59 </script> 59 </script>
60 60
61 <style lang="scss"> 61 <style lang="scss">
62 .wrap{ 62 .wrap{
63 height: 100vh; 63 height: 100vh;
64 background-color:#F2F2F2 ; 64 background-color:#F2F2F2 ;
65 font-family: PingFangSC-Regular; 65 font-family: PingFangSC-Regular;
66 letter-spacing: -0.23px; 66 letter-spacing: -0.23px;
67 padding-top: 19rpx; 67 padding-top: 19rpx;
68 } 68 }
69 .content{ 69 .content{
70 background-color: #FFFFFF; 70 background-color: #FFFFFF;
71 border-radius: 8px; 71 border-radius: 8px;
72 border-radius: 8px; 72 border-radius: 8px;
73 padding: 40rpx 56rpx; 73 padding: 40rpx 56rpx;
74 margin-left: 40rpx; 74 margin-left: 40rpx;
75 width: 670rpx; 75 width: 670rpx;
76 box-sizing: border-box; 76 box-sizing: border-box;
77 .item{ 77 .item{
78 display: flex; 78 display: flex;
79 justify-content: flex-start; 79 justify-content: flex-start;
80 font-size: 14px; 80 font-size: 14px;
81 align-items: center; 81 align-items: center;
82 height: 112rpx; 82 height: 112rpx;
83 border-bottom: 1rpx solid #E9E9E9; 83 border-bottom: 1rpx solid #E9E9E9;
84 .itemText{ 84 .itemText{
85 width: 162rpx; 85 width: 162rpx;
86 font-family: PingFangSC-Regular; 86 font-family: PingFangSC-Regular;
87 letter-spacing: -0.26px; 87 letter-spacing: -0.26px;
88 } 88 }
89 .btn{ 89 .btn{
90 color: #333333 !important; 90 color: #333333 !important;
91 } 91 }
92 } 92 }
93 .check{ 93 .check{
94 justify-content: space-between; 94 justify-content: space-between;
95 } 95 }
96 } 96 }
97 .button{ 97 .button{
98 position: fixed; 98 position: fixed;
99 bottom: 0; 99 bottom: 0;
100 left: 0; 100 left: 0;
101 height: 112rpx; 101 height: 112rpx;
102 width: 100%; 102 width: 100%;
103 background: #FF6B4A; 103 background: #FF6B4A;
104 display: flex; 104 display: flex;
105 justify-content: center; 105 justify-content: center;
106 align-items: center; 106 align-items: center;
107 font-size: 16px; 107 font-size: 16px;
108 color: #FFFFFF; 108 color: #FFFFFF;
109 letter-spacing: -0.3px; 109 letter-spacing: -0.3px;
110 } 110 }
111 </style> 111 </style>
112 112
src/pages/index/index.vue
Diff comments   View file @fb85b24
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> 7 <input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
8 </view> 8 </view>
9 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <view class="screenBar"> 11 <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> 13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14 {{ item.text }}<icon type="info" size="14"></icon> 14 {{ item.text }}<icon type="info" size="14"></icon>
15 </view> 15 </view>
16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> 16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17 {{ item.text }}<icon type="info" size="14"></icon> 17 {{ item.text }}<icon type="info" size="14"></icon>
18 </view> 18 </view>
19 <view v-if="item.current !== 2&&item.current!==4"> 19 <view v-if="item.current !== 2&&item.current!==4">
20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21 </view> 21 </view>
22 </view> 22 </view>
23 </view> 23 </view>
24 </view> 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 <view class="close"> 26 <view class="close">
27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> 27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28 </view> 28 </view>
29 </Uni-drawer> 29 </Uni-drawer>
30 30
31 31
32 32
33 <!-- 筛选菜单--> 33 <!-- 筛选菜单-->
34 <view class="content-wrap"> 34 <view class="content-wrap">
35 <view> 35 <view>
36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> 36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37 <!-- 商品列表 --> 37 <!-- 商品列表 -->
38 <view class="goods-list"> 38 <view class="goods-list">
39 <view class="product-list"> 39 <view class="product-list">
40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
41 <image mode="widthFix" :src="goods.img" ></image> 41 <Card :goods = "goods"></Card>
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>
50 </view> 42 </view>
51 </view> 43 </view>
52 <view class="loading-text">{{loadingText}}</view> 44 <view class="loading-text">{{loadingText}}</view>
53 </view> 45 </view>
54 46
55 </view> 47 </view>
56 </view> 48 </view>
57 </view> 49 </view>
58 </template> 50 </template>
59 51
60 <script> 52 <script>
61 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; 53 import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
54 import Card from "../../components/Card/Card.vue"
62 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; 55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
63 import data from '@/common/data.js';//筛选菜单数据 56 import data from '@/common/data.js';//筛选菜单数据
64 export default { 57 export default {
65 components: { 58 components: {
66 'UniDrawer':UniDrawer, 59 'UniDrawer':UniDrawer,
67 'HMfilterDropdown':HMfilterDropdown 60 'HMfilterDropdown':HMfilterDropdown,
61 'Card':Card
68 }, 62 },
69 data() { 63 data() {
70 return { 64 return {
71 screenItems: [ 65 screenItems: [
72 {current:0,text:'全部',hasIcon:false}, 66 {current:0,text:'全部',hasIcon:false},
73 {current:1,text:'销量',hasIcon:false}, 67 {current:1,text:'销量',hasIcon:false},
74 {current:2,text:'价格',hasIcon:true}, 68 {current:2,text:'价格',hasIcon:true},
75 {current:3,text:'折扣',hasIcon:false}, 69 {current:3,text:'折扣',hasIcon:false},
76 {current:4,text:'筛选',hasIcon:true}, 70 {current:4,text:'筛选',hasIcon:true},
77 ], 71 ],
78 current: 0, 72 current: 0,
79 showRight: false, 73 showRight: false,
80 indexArr:'', 74 indexArr:'',
81 valueArr:'', 75 valueArr:'',
82 //商品数据 76 //商品数据
83 goodsList:[ 77 goodsList:[
84 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
88 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
89 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
90 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
91 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
92 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
93 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
94 ], 88 ],
95 loadingText:"正在加载...", 89 loadingText:"正在加载...",
96 filterDropdownValue:[], 90 filterDropdownValue:[],
97 filterData:[] 91 filterData:[]
98 } 92 }
99 }, 93 },
100 filters: { 94 filters: {
101 　　outData(value) { 95 　　outData(value) {
102 　　　　return JSON.stringify(value); 96 　　　　return JSON.stringify(value);
103 　　} 97 　　}
104 }, 98 },
105 onLoad: function () { 99 onLoad: function () {
106 //定时器模拟ajax异步请求数据 100 //定时器模拟ajax异步请求数据
107 // setTimeout(()=>{ 101 // setTimeout(()=>{
108 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
109 // this.filterDropdownValue = [ 103 // this.filterDropdownValue = [
110 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
111 // [null,null], //第1个菜单选中 都不选中 105 // [null,null], //第1个菜单选中 都不选中
112 // [1], //第2个菜单选中 一级菜单的第1项 106 // [1], //第2个菜单选中 一级菜单的第1项
113 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
114 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
115 // ]; 109 // ];
116 this.filterData = data; 110 this.filterData = data;
117 // },100); 111 // },100);
118 // 模拟ajax请求子菜单数据。 112 // 模拟ajax请求子菜单数据。
119 // setTimeout(()=>{ 113 // setTimeout(()=>{
120 // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; 114 // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
121 // },5000) 115 // },5000)
122 }, 116 },
123 methods: { 117 methods: {
124 showDrawer(e) { 118 showDrawer(e) {
125 this.$refs[e].open() 119 this.$refs[e].open()
126 }, 120 },
127 closeDrawer(e) { 121 closeDrawer(e) {
128 this.$refs[e].close() 122 this.$refs[e].close()
129 }, 123 },
130 change(e, type) { 124 change(e, type) {
131 this[type] = e 125 this[type] = e
132 }, 126 },
133 onClickItem(e) { 127 onClickItem(e) {
134 if (this.current !== e) { 128 if (this.current !== e) {
135 this.current = e; 129 this.current = e;
136 } 130 }
137 }, 131 },
138 dropDown(){ 132 dropDown(){
139 console.log('下拉') 133 console.log('下拉')
140 }, 134 },
141 //接收菜单结果 135 //接收菜单结果
142 confirm(e){ 136 confirm(e){
143 this.indexArr = e.index; 137 this.indexArr = e.index;
144 this.valueArr = e.value; 138 this.valueArr = e.value;
145 return; 139 return;
146 console.log('修改菜单'); 140 console.log('修改菜单');
147 this.filterData[4].submenu[1] = { 141 this.filterData[4].submenu[1] = {
148 "name": "项目2", 142 "name": "项目2",
149 "submenu": [ 143 "submenu": [
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 onNavigationBarButtonTap(e) { 149 onNavigationBarButtonTap(e) {
165 this.showRight = !this.showRight 150 this.showRight = !this.showRight
166 }, 151 },
167 //上拉加载， 152 //上拉加载，
168 onReachBottom(){ 153 onReachBottom(){
169 console.log('到底加载') 154 console.log('到底加载')
170 let len = this.goodsList.length; 155 let len = this.goodsList.length;
171 if(len>=30){ 156 if(len>=30){
172 this.loadingText="~~到底了~~"; 157 this.loadingText="~~到底了~~";
173 return false; 158 return false;
174 }else{ 159 }else{
175 this.loadingText="正在加载..."; 160 this.loadingText="正在加载...";
176 } 161 }
177 let end_goods_id = this.goodsList[len-1].goods_id; 162 let end_goods_id = this.goodsList[len-1].goods_id;
178 for(let i=1;i<=10;i++){ 163 for(let i=1;i<=10;i++){
179 let goods_id = end_goods_id+i; 164 let goods_id = end_goods_id+i;
180 let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; 165 let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
181 this.goodsList.push(p); 166 this.goodsList.push(p);
182 } 167 }
183 }, 168 },
184 } 169 }
185 </script> 170 </script>
186 171
187 <style lang="scss"> 172 <style lang="scss">
188 .content { 173 .content {
189 display: flex; 174 display: flex;
190 flex-direction: column; 175 flex-direction: column;
191 align-items: center; 176 align-items: center;
192 justify-content: center; 177 justify-content: center;
193 background-color: #F7F6F6; 178 background-color: #F7F6F6;
194 } 179 }
195 .header{ 180 .header{
196 display: flex; 181 display: flex;
197 flex-direction: column; 182 flex-direction: column;
198 align-items: center; 183 align-items: center;
199 justify-content: center; 184 justify-content: center;
200 background-color: #F7F6F6; 185 background-color: #F7F6F6;
201 height:178rpx ; 186 height:178rpx ;
202 width: 100%; 187 width: 100%;
203 z-index: 999; 188 z-index: 999;
204 position: fixed; 189 position: fixed;
205 top: 0; 190 top: 0;
206 left: 0; 191 left: 0;
207 } 192 }
208 .searchBar { 193 .searchBar {
209 width: 670rpx; 194 width: 670rpx;
210 display: flex; 195 display: flex;
211 justify-content: center; 196 justify-content: center;
212 align-items: center; 197 align-items: center;
213 box-sizing: border-box; 198 box-sizing: border-box;
214 padding: 0rpx 16rpx; 199 padding: 0rpx 16rpx;
215 border: 1px solid #FF6B4A; 200 border: 1px solid #FF6B4A;
216 border-radius: 8rpx; 201 border-radius: 8rpx;
217 background-color: #ffffff; 202 background-color: #ffffff;
218 } 203 }
219 204
220 .searchIpt { 205 .searchIpt {
221 height: 68rpx; 206 height: 68rpx;
222 width: 670rpx; 207 width: 670rpx;
223 padding: 16rpx; 208 padding: 16rpx;
224 font-size: 28rpx; 209 font-size: 28rpx;
225 box-sizing: border-box; 210 box-sizing: border-box;
226 } 211 }
227 .screenBar{ 212 .screenBar{
228 width: 670rpx; 213 width: 670rpx;
229 height: 110rpx; 214 height: 110rpx;
230 display: flex; 215 display: flex;
231 flex-direction: row; 216 flex-direction: row;
232 justify-content: space-between; 217 justify-content: space-between;
233 align-items: center; 218 align-items: center;
234 color: #333333; 219 color: #333333;
235 font-size: 32rpx; 220 font-size: 32rpx;
236 } 221 }
237 .active{ 222 .active{
238 color: #FF6B4A; 223 color: #FF6B4A;
239 } 224 }
240 .screenItem{ 225 .screenItem{
241 display: flex; 226 display: flex;
242 justify-content: center; 227 justify-content: center;
243 align-items: center; 228 align-items: center;
244 } 229 }
245 .content-wrap{ 230 .content-wrap{
246 width: 100%; 231 width: 100%;
247 background-color: #FFFFFF; 232 background-color: #FFFFFF;
248 } 233 }
249 234
250 .HMfilterDropdown{ 235 .HMfilterDropdown{
251 top: 178rpx !important; 236 top: 178rpx !important;
252 } 237 }
253 238
254 .goods-list{ 239 .goods-list{
255 padding-top: 286rpx; 240 padding-top: 286rpx;
256 .loading-text{ 241 .loading-text{
257 width: 100%; 242 width: 100%;
258 display: flex; 243 display: flex;
259 justify-content: center; 244 justify-content: center;
260 align-items: center; 245 align-items: center;
261 height: 30px; 246 height: 30px;
262 color: #979797; 247 color: #979797;
263 font-size: 12px; 248 font-size: 12px;
264 } 249 }
265 .product-list{ 250 .product-list{
266 width: 92%; 251 width: 92%;
267 padding: 0 4% 3vw 4%; 252 padding: 0 4% 3vw 4%;
268 display: flex; 253 display: flex;
269 justify-content: space-between; 254 justify-content: space-between;
270 flex-wrap: wrap; 255 flex-wrap: wrap;
271 .product{ 256 .product{
272 width: 48%; 257 width: 48%;
273 border-radius: 10px; 258 margin: 0 0 20rpx 0;
274 background-color: #fff; 259 background: #FFFFFF;
275 margin: 0 0 7px 0; 260 border: 1px solid #F2F2F2;
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 }
321 } 261 }
322 } 262 }
323 } 263 }
324 264
src/pages/user/user.vue
Diff comments   View file @fb85b24
1 <template> 1 <template>
2 <view class="content"> 2 <view class="wrap">
3 <image class="logo" src="/static/logo.png"></image> 3 <view class="content">
4 <view class="text-area"> 4 <view class="userInfo">
5 <text class="title">{{title}}</text> 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 </view> 59 </view>
60
7 </view> 61 </view>
8 </template> 62 </template>
9 63
10 <script> 64 <script>
65 import Card from "../../components/Card/Card.vue"
11 export default { 66 export default {
67 components: {
68 'Card':Card
69 },
12 data() { 70 data() {
13 return { 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 onLoad() { 90 onLoad() {
18 91
19 }, 92 },
20 methods: { 93 methods: {
21 94
22 } 95 }
23 } 96 }
24 </script> 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 .content { 105 .content {
28 display: flex; 106 display: flex;
29 flex-direction: column; 107 flex-direction: column;
30 align-items: center; 108 align-items: center;
31 justify-content: center; 109 justify-content: center;
110 background-color: #F2F2F2;
32 } 111 }
33 112 .userInfo{
34 .logo { 113 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
35 height: 200rpx; 114 width: 100%;
36 width: 200rpx; 115 height: 240rpx;
37 margin-top: 200rpx; 116 color: #FFFFFF;
38 margin-left: auto; 117 padding: 60rpx 82rpx 80rpx 44rpx;
39 margin-right: auto; 118 box-sizing: border-box;
40 margin-bottom: 50rpx; 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 157 .myOrder{
43 .text-area { 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 display: flex; 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 215 .recommend{
48 .title { 216 background: #FFFFFF;
49 font-size: 36rpx; 217 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
50 color: #8f8f94; 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 </style> 266 </style>
53 267
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