吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 10 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.goods_id)"> 2 <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)">
3 <image mode="widthFix" :src="goods.img" ></image> 3 <image mode="widthFix" :src="goods.img" ></image>
4 <view class="name">{{goods.name}}</view> 4 <view class="name">{{goods.name}}</view>
5 <view class="info"> 5 <view class="info">
6 <view class="priceBox"> 6 <view class="priceBox">
7 <view class="price">{{goods.price}}</view> 7 <view class="price">{{goods.price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.originCost}} 9 {{goods.originCost}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="slogan">{{goods.slogan}}</view> 12 <view class="slogan">{{goods.slogan}}</view>
13 </view> 13 </view>
14 </view> 14 </view>
15 </template> 15 </template>
16 16
17 <script> 17 <script>
18 export default { 18 export default {
19 props: { 19 props: {
20 /** 20 /**
21 * 商品数据 21 * 商品数据
22 */ 22 */
23 goods: { 23 goods: {
24 goods_id: Number, 24 goods_id: Number,
25 img: String, 25 img: String,
26 name: String, 26 name: String,
27 originCost:String, 27 originCost:String,
28 price: String, 28 price: String,
29 slogan:String 29 slogan:String,
30 } 30 goodType:String,
31 31 }
32 }, 32
33 created() { 33 },
34 console.log(this.goods) 34 created() {
35 }, 35 console.log(this.goods)
36 data() { 36 },
37 return { 37 data() {
38 38 return {
39 }; 39
40 }, 40 };
41 methods:{ 41 },
42 toGoods(id){ 42 methods:{
43 console.log('toGoods =====> id======>', id) 43 toGoods(id,type){
44 uni.navigateTo({ 44 // console.log('toGoods =====> id======>', id)
45 url: `../detail/detail?oderId=1`, 45 // console.log(type)
46 success: res => {}, 46 switch(type){
47 fail: () => {}, 47 case 1:
48 complete: () => {} 48 uni.navigateTo({
49 }); 49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
50 } 50 success: res => {},
51 } 51 fail: () => {},
52 } 52 complete: () => {}
53 </script> 53 });
54 54 break;
55 <style lang="scss"> 55 case 2:
56 image{ 56 uni.navigateTo({
57 width: 100%; 57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
58 height: 120rpx; 58 success: res => {},
59 } 59 fail: () => {},
60 .name{ 60 complete: () => {}
61 width: 92%; 61 });
62 height: 54rpx; 62 break;
63 padding: 5px 4%; 63 case 3:
64 display: -webkit-box; 64 uni.navigateTo({
65 -webkit-box-orient: vertical; 65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
66 -webkit-line-clamp: 2; 66 success: res => {},
67 text-align: justify; 67 fail: () => {},
68 overflow: hidden; 68 complete: () => {}
69 font-size: 24rpx; 69 });
70 color: #333333; 70 break;
71 } 71 case 4:
72 .info{ 72 uni.navigateTo({
73 display: flex; 73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
74 justify-content: space-between; 74 success: res => {},
75 align-items: center; 75 fail: () => {},
76 width: 92%; 76 complete: () => {}
77 padding: 5px 4% 5px 4%; 77 });
78 .priceBox{ 78 break;
79 display: flex; 79 default :
80 justify-content: space-between; 80 break
81 align-items: center; 81 }
82 .price{ 82 }
83 color: #EB5D3B; 83 }
84 font-size: 28rpx; 84 }
85 font-weight: 600; 85 </script>
86 margin-right: 10rpx; 86
87 } 87 <style lang="scss">
88 .originCost{ 88 image{
89 text-decoration:line-through; 89 width: 100%;
90 color: #999999; 90 height: 120rpx;
91 font-size: 20rpx; 91 }
92 } 92 .name{
93 93 width: 92%;
94 } 94 height: 54rpx;
95 .slogan{ 95 padding: 5px 4%;
96 color: #999999; 96 display: -webkit-box;
97 font-size: 20rpx; 97 -webkit-box-orient: vertical;
98 } 98 -webkit-line-clamp: 2;
99 } 99 text-align: justify;
100 </style> 100 overflow: hidden;
101 101 font-size: 24rpx;
102 102 color: #333333;
103 103 }
104 104 .info{
105 105 display: flex;
106 106 justify-content: space-between;
107 107 align-items: center;
108 108 width: 92%;
109 109 padding: 5px 4% 5px 4%;
110 110 .priceBox{
111 111 display: flex;
112 112 justify-content: space-between;
113 113 align-items: center;
114 114 .price{
115 115 color: #EB5D3B;
116 116 font-size: 28rpx;
117 117 font-weight: 600;
118 118 margin-right: 10rpx;
119 119 }
120 120 .originCost{
121 121 text-decoration:line-through;
122 122 color: #999999;
123 123 font-size: 20rpx;
124 124 }
125 125
126 126 }
127 127 .slogan{
128 128 color: #999999;
129 129 font-size: 20rpx;
130 130 }
131 131 }
132 132 </style>
1 {
2 "pages" : [
3 {
4 "path" : "pages/myOrder/myOrder",
5 "style" : {
6 "navigationBarTitleText" : "我的订单"
7 }
8 },
9 {
10 "path" : "pages/cart/cart",
11 "style" : {
12 "navigationBarTitleText" : "购物车"
13 }
14 },
15 {
16 "path" : "pages/index/index",
17 "style" : {
18 "navigationBarTitleText" : "商城一览"
19 }
20 },
21 {
22 "path" : "pages/frameDetail/frameDetail",
23 "style" : {
24 "navigationBarTitleText" : "产品详情"
25 }
26 },
27 {
28 "path" : "pages/lensDetails/lensDetails",
29 "style" : {
30 "navigationBarTitleText" : "产品详情"
31 }
32 },
33 {
34 "path" : "pages/purchaseLenses/purchaseLenses",
35 "style" : {
36 "navigationBarTitleText" : "产品选购"
37 }
38 },
39 {
40 "path" : "pages/refundProgress/refundProgress",
41 "style" : {
42 "navigationBarTitleText" : "申请退款"
43 }
44 },
45 {
46 "path" : "pages/addAddress/addAddress",
47 "style" : {
48 "navigationBarTitleText" : "新增地址"
49 }
50 },
51 {
52 "path" : "pages/confirmOrder/confirmOrder",
53 "style" : {
54 "navigationBarTitleText" : "确认订单"
55 }
56 },
57 {
58 "path" : "pages/user/user",
59 "style" : {
60 "navigationBarTitleText" : "我的"
61 }
62 },
63 {
64 "path" : "pages/refundment/refundWays"
65 },
66 {
67 "path" : "pages/refundment/refundment"
68 },
69 {
70 "path" : "pages/predelivery/predelivery"
71 },
72 {
73 "path" : "pages/customerService/customerService",
74 "style" : {
75 "navigationBarTitleText" : "在线客服"
76 }
77 },
78 {
79 "path" : "pages/myOrderPaying/myOrderPaying",
80 "style" : {
81 "navigationBarTitleText" : "我的订单"
82 }
83 },
84 {
85 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
86 "style" : {
87 "navigationBarTitleText" : "镜片名称名称"
88 }
89 },
90 {
91 "path" : "pages/detailStandard/detailStandard_sun",
92 "style" : {
93 "navigationBarTitleText" : "太阳镜选购页"
94 }
95 },
96 {
97 "path" : "pages/detailStandard/detailStandard_k",
98 "style" : {
99 "navigationBarTitleText" : "镜框选购页"
100 }
101 },
102 {
103 "path" : "pages/detailsChoiceArgs/compoents/MyCollapse",
104 "style" : {}
105 }
106 ],
107 "globalStyle" : {
108 "navigationBarTextStyle" : "black",
109 "navigationBarTitleText" : "uni-app",
110 "navigationBarBackgroundColor" : "#F8F8F8",
111 "backgroundColor" : "#F8F8F8"
112 },
113 "tabBar" : {
114 "color" : "#C0C4CC",
115 "selectedColor" : "#fa436a",
116 "borderStyle" : "black",
117 "backgroundColor" : "#ffffff",
118 "list" : [
119 {
120 "pagePath" : "pages/index/index",
121 "iconPath" : "static/tab-home.png",
122 "selectedIconPath" : "static/tab-home-current.png",
123 "text" : "首页"
124 },
125 {
126 "pagePath" : "pages/cart/cart",
127 "iconPath" : "static/tab-cart.png",
128 "selectedIconPath" : "static/tab-cart-current.png",
129 "text" : "购物车"
130 },
131 {
132 "pagePath" : "pages/user/user",
133 "iconPath" : "static/tab-my.png",
134 "selectedIconPath" : "static/tab-my-current.png",
135 "text" : "我的"
136 }
137 ]
138 },
139 "condition" : {
140 //模式配置，仅开发期间生效
141 "current" : 0, //当前激活的模式(list 的索引项)
142 "list" : [
143 {
144 "name" : "", //模式名称
145 "path" : "", //启动页面，必选 1 {
2 "pages" : [
3 {
4 "path" : "pages/myOrder/myOrder",
5 "style" : {
6 "navigationBarTitleText" : "我的订单"
7 }
src/pages/cart/cart.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 3
4 <view class="card"> 4 <view class="card">
5 <view class="cardHeader"> 5 <view class="cardHeader">
6 <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7 <block v-if="pIsoPen"> 6 <block v-if="pIsoPen">
8 <view class="partentChecked" @click="pChange(pIsoPen)"> 7 <view class="partentChecked" @click="pChange(pIsoPen)">
9 <span class="status correct"></span> 8 <span class="status correct"></span>
10 </view> 9 </view>
11 </block> 10 </block>
12 <block v-else> 11 <block v-else>
13 <view class="partentCheck" @click="pChange(pIsoPen)"></view> 12 <view class="partentCheck" @click="pChange(pIsoPen)"></view>
14 </block> 13 </block>
15 <image src="../../static/store.png" mode="aspectFill"></image> 14 <image src="../../static/store.png" mode="aspectFill"></image>
16 <text>非常戴镜</text> 15 <text>非常戴镜</text>
17 </view> 16 </view>
18 17
19 <view class="cardBody"> 18 <view class="cardBody">
20 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21 <template v-if="childIsOpen.child1"> 19 <template v-if="childIsOpen.child1">
22 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> 20 <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23 <span class="status correct"></span> 21 <span class="status correct"></span>
24 </view> 22 </view>
25 </template> 23 </template>
26 <template v-else> 24 <template v-else>
27 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> 25 <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28 </template> 26 </template>
29 <view class="goodInfo"> 27 <view class="goodInfo">
30 <view class="imageWrap"> 28 <view class="imageWrap">
31 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 29 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
32 </view> 30 </view>
33 <view class="infoRight"> 31 <view class="infoRight">
34 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 32 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
35 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 33 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
36 <!-- <text class="icon">></text> --> 34 <view class="icon"></view>
37 </view> 35 </view>
38 <view class="priceBox"> 36 <view class="priceBox">
39 <view class="price">￥{{198}}</view> 37 <view class="price">￥{{198}}</view>
40 <text>(限购{{maxCount}}副)</text> 38 <text>(限购{{maxCount}}副)</text>
41 <view class="counter"> 39 <view class="counter">
42 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 40 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
43 <text>{{count}}</text> 41 <text>{{count}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 42 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
45 </view> 43 </view>
46 </view> 44 </view>
47 </view> 45 </view>
48 </view> 46 </view>
49 </view> 47 </view>
50 <view class="cardBody"> 48 <view class="cardBody">
51 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> 49 <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
52 <template v-if="childIsOpen.child2"> 50 <template v-if="childIsOpen.child2">
53 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> 51 <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
54 <span class="status correct"></span> 52 <span class="status correct"></span>
55 </view> 53 </view>
56 </template> 54 </template>
57 <template v-else> 55 <template v-else>
58 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> 56 <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
59 </template> 57 </template>
60 <view class="goodInfo"> 58 <view class="goodInfo">
61 <view class="imageWrap"> 59 <view class="imageWrap">
62 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 60 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
63 </view> 61 </view>
64 <view class="infoRight"> 62 <view class="infoRight">
65 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> 63 <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
66 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> 64 <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
67 <!-- <text class="icon">></text> --> 65 <view class="icon"></view>
68 </view> 66 </view>
69 <view class="priceBox"> 67 <view class="priceBox">
70 <view class="price">￥198</view> 68 <view class="price">￥198</view>
71 <text>(限购{{maxCount}}副)</text> 69 <text>(限购{{maxCount}}副)</text>
72 <view class="counter"> 70 <view class="counter">
73 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 71 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
74 <text>{{count}}</text> 72 <text>{{count}}</text>
75 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 73 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
76 </view> 74 </view>
77 </view> 75 </view>
78 </view> 76 </view>
79 </view> 77 </view>
80 </view> 78 </view>
81 </view> 79 </view>
82 80
83 <view class="footer"> 81 <view class="footer">
84 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 82 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
85 <view class="footerRight"> 83 <view class="footerRight">
86 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> 84 <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
87 <view class="paybtn">立即支付</view> 85 <view class="paybtn">立即支付</view>
88 </navigator> 86 </navigator>
89 </view> 87 </view>
90 </view> 88 </view>
91 89
92 </view> 90 </view>
93 </template> 91 </template>
94 92
95 <script> 93 <script>
94 import store from '@/store';
95
96 export default { 96 export default {
97 97
98 data() { 98 data() {
99 return { 99 return {
100 totalPrice: 360, 100 totalPrice: 360,
101 count:1, 101 count:1,
102 maxCount:20, 102 maxCount:20,
103 pIsoPen: false, 103 pIsoPen: false,
104 childIsOpen:{ 104 childIsOpen:{
105 "child1":true, 105 "child1":true,
106 "child2":true 106 "child2":true
107 }, 107 },
108 } 108 }
109 }, 109 },
110 onLoad() { 110 computed:{
111 111 cartList() {
112 } 112 // 也可以从 getters 获取
113 , 113 console.log('cart-list', this.$store.state.cart.cartList);
114 return this.$store.state.cart.cartList;
115 }
116 },
117 onLoad: function() {
118 store.dispatch('cart/getCartList',{
119 uid: 1, //用户id
120 });
121 },
114 methods: { 122 methods: {
115 counter(isadd){ 123 counter(isadd){
116 if(isadd){ 124 if(isadd){
117 this.count >= this.maxCount? this.addDisabled = true:this.count++; 125 this.count >= this.maxCount? this.addDisabled = true:this.count++;
118 }else{ 126 }else{
119 this.count <= 1? this.desDisabled = true:this.count--; 127 this.count <= 1? this.desDisabled = true:this.count--;
120 } 128 }
121 }, 129 },
122 pChange(isopen){ 130 pChange(isopen){
123 // console.log(isopen) 131 // console.log(isopen)
124 this.pIsoPen=!isopen 132 this.pIsoPen=!isopen
125 this.childIsOpen.child1=!isopen 133 this.childIsOpen.child1=!isopen
126 this.childIsOpen.child2=!isopen 134 this.childIsOpen.child2=!isopen
127 }, 135 },
128 cChange(isopen,child){ 136 cChange(isopen,child){
129 // console.log(child) 137 // console.log(child)
130 if(child==='child1'){ 138 if(child==='child1'){
131 this.childIsOpen.child1=!isopen 139 this.childIsOpen.child1=!isopen
132 } 140 }
133 if(child==='child2'){ 141 if(child==='child2'){
134 this.childIsOpen.child2=!isopen 142 this.childIsOpen.child2=!isopen
135 } 143 }
136 } 144 }
137 } 145 }
138 } 146 }
139 </script> 147 </script>
140 148
141 <style lang="scss"> 149 <style lang="scss">
142 .content { 150 .content {
143 min-height: 100vh; 151 min-height: 100vh;
144 background-color: #f2f2f2; 152 background-color: #f2f2f2;
145 display: flex; 153 display: flex;
146 flex-direction: column; 154 flex-direction: column;
147 align-items: center; 155 align-items: center;
148 justify-content: space-between; 156 justify-content: space-between;
149 padding: 20rpx 40rpx; 157 padding: 20rpx 40rpx;
150 box-sizing: border-box; 158 box-sizing: border-box;
151 159
152 .partentCheck{ 160 .partentCheck{
153 width: 16px; 161 width: 16px;
154 height: 16px; 162 height: 16px;
155 border-radius: 18px; 163 border-radius: 18px;
156 border: 1px solid #CFCFCF; 164 border: 1px solid #CFCFCF;
157 background-color: #FFFFFF; 165 background-color: #FFFFFF;
158 } 166 }
159 .partentChecked{ 167 .partentChecked{
160 width: 18px; 168 width: 18px;
161 height: 18px; 169 height: 18px;
162 border-radius: 18px; 170 border-radius: 18px;
163 background-color: #FF6B4A; 171 background-color: #FF6B4A;
164 .correct { 172 .correct {
165 display: inline-block; 173 display: inline-block;
166 width: 5px; 174 width: 5px;
167 height: 1px; 175 height: 1px;
168 background: #FFFFFF; 176 background: #FFFFFF;
169 line-height: 0; 177 line-height: 0;
170 font-size: 0; 178 font-size: 0;
171 position: relative; 179 position: relative;
172 top: -6px; 180 top: -6px;
173 left: 4px; 181 left: 4px;
174 -webkit-transform: rotate(45deg); 182 -webkit-transform: rotate(45deg);
175 } 183 }
176 .correct:after { 184 .correct:after {
177 content: '/'; 185 content: '/';
178 display: block; 186 display: block;
179 width: 8px; 187 width: 8px;
180 height: 1px; 188 height: 1px;
181 background: #FFFFFF; 189 background: #FFFFFF;
182 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 190 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
183 } 191 }
184 } 192 }
185 193
186 .card{ 194 .card{
187 background-color: #FFFFFF; 195 background-color: #FFFFFF;
188 border-radius: 16rpx; 196 border-radius: 16rpx;
189 box-sizing: border-box; 197 box-sizing: border-box;
190 padding: 36rpx 36rpx 36rpx 18rpx; 198 padding: 36rpx 36rpx 36rpx 18rpx;
191 display: flex; 199 display: flex;
192 flex-direction: column; 200 flex-direction: column;
193 align-items: center; 201 align-items: center;
194 justify-content: space-between; 202 justify-content: space-between;
195 .cardHeader{ 203 .cardHeader{
196 width: 100%; 204 width: 100%;
197 height: 36rpx; 205 height: 36rpx;
198 display: flex; 206 display: flex;
199 align-items: center; 207 align-items: center;
200 justify-content: flex-start; 208 justify-content: flex-start;
201 image{ 209 image{
202 height: 32rpx; 210 height: 32rpx;
203 width: 32rpx; 211 width: 32rpx;
204 padding-left: 6px; 212 padding-left: 6px;
205 padding-right: 10px; 213 padding-right: 10px;
206 } 214 }
207 text{ 215 text{
208 // font-family: PingFangSC-Regular; 216 // font-family: PingFangSC-Regular;
209 font-size: 14px; 217 font-size: 14px;
210 color: #333333; 218 color: #333333;
211 letter-spacing: -0.26px; 219 letter-spacing: -0.26px;
212 } 220 }
213 } 221 }
214 .cardBody{ 222 .cardBody{
215 width: 100%; 223 width: 100%;
216 height: 300rpx; 224 height: 300rpx;
217 display: flex; 225 display: flex;
218 align-items: center; 226 align-items: center;
219 justify-content: space-between; 227 justify-content: space-between;
220 .goodInfo{ 228 .goodInfo{
221 width: 95%; 229 width: 95%;
222 display: flex; 230 display: flex;
223 flex-direction: row; 231 flex-direction: row;
224 justify-content: flex-start; 232 justify-content: flex-start;
225 padding-left: 6px; 233 padding-left: 6px;
226 .imageWrap{ 234 .imageWrap{
227 height: 188rpx; 235 height: 188rpx;
228 width: 188rpx; 236 width: 188rpx;
229 margin-right: 28rpx; 237 margin-right: 28rpx;
230 image{ 238 image{
231 border-radius: 4px; 239 border-radius: 4px;
232 height: 188rpx; 240 height: 188rpx;
233 width: 188rpx; 241 width: 188rpx;
234 } 242 }
235 } 243 }
236 .infoRight{ 244 .infoRight{
237 display: flex; 245 display: flex;
238 flex-direction: column; 246 flex-direction: column;
239 align-items: flex-start; 247 align-items: flex-start;
240 justify-content: space-between; 248 justify-content: space-between;
241 height: 240rpx; 249 height: 240rpx;
242 .goodName{ 250 .goodName{
243 font-size: 28rpx; 251 font-size: 28rpx;
244 color: #333333; 252 color: #333333;
245 } 253 }
246 .describ{ 254 .describ{
247 width: 100%; 255 width: 100%;
248 height: 80rpx; 256 height: 80rpx;
249 box-sizing: border-box; 257 box-sizing: border-box;
250 padding: 10rpx; 258 padding: 10rpx;
251 font-size: 20rpx; 259 font-size: 20rpx;
252 color: #999999; 260 color: #999999;
253 background: #F2F2F2; 261 background: #F2F2F2;
262 display: flex;
263 justify-content: center;
264 align-items: center;
254 text{ 265 text{
255 text-overflow: -o-ellipsis-lastline; 266 text-overflow: -o-ellipsis-lastline;
256 overflow: hidden; 267 overflow: hidden;
257 text-overflow: ellipsis; 268 text-overflow: ellipsis;
258 display: -webkit-box; 269 display: -webkit-box;
259 -webkit-line-clamp: 2; 270 -webkit-line-clamp: 2;
260 line-clamp: 2; 271 line-clamp: 2;
261 -webkit-box-orient: vertical; 272 -webkit-box-orient: vertical;
262 } 273 }
263 // .icon{ 274 // .icon{
264 // transform: rotate(90deg); 275 // transform: rotate(90deg);
276 // height: 13px;
277 // width: 20px;
278
265 // } 279 // }
280 .icon{
281 width: 0;
282 height: 0;
283 border-left: 5px transparent;
284 border-right: 5px transparent;
285 border-top: 5px #979797;
286 border-bottom: 0 transparent;
287 border-style: solid;
288 position: relative;
289 margin-left: 10px;
290 // transform: scaleY(-1);
291 }
292 .icon::after{
293 content: '';
294 position: absolute;
295 top: -6.5px;
296 left: -5px;
297 border-left: 5px transparent;
298 border-right: 5px transparent;
299 border-top: 5px #FFFFFF;
300 border-bottom: 0 transparent;
301 border-style: solid;
302 }
266 } 303 }
267 .priceBox{ 304 .priceBox{
268 display: flex; 305 display: flex;
269 justify-content: space-between; 306 justify-content: space-between;
270 align-items: center; 307 align-items: center;
271 // margin-top: 26px; 308 // margin-top: 26px;
272 width: 100%; 309 width: 100%;
273 font-size: 14px; 310 font-size: 14px;
274 color: #999999; 311 color: #999999;
275 .price{ 312 .price{
276 color: #FF6B4A; 313 color: #FF6B4A;
277 font-size: 28rpx; 314 font-size: 28rpx;
278 } 315 }
279 .counter{ 316 .counter{
280 display: flex; 317 display: flex;
281 flex-direction: row; 318 flex-direction: row;
282 justify-content: space-between; 319 justify-content: space-between;
283 align-items: center; 320 align-items: center;
284 font-size: 28rpx; 321 font-size: 28rpx;
285 color: #333333; 322 color: #333333;
286 width: 122rpx; 323 width: 122rpx;
287 .btn{ 324 .btn{
288 display: flex; 325 display: flex;
289 justify-content: center; 326 justify-content: center;
290 line-height: 32rpx; 327 line-height: 32rpx;
291 height: 32rpx; 328 height: 32rpx;
292 width: 32rpx; 329 width: 32rpx;
293 background-color: #F2F2F2; 330 background-color: #F2F2F2;
294 color: #CFCFCF; 331 color: #CFCFCF;
295 } 332 }
296 } 333 }
297 } 334 }
298 } 335 }
299 } 336 }
300 } 337 }
301 } 338 }
302 339
303 .footer{ 340 .footer{
304 position: fixed; 341 position: fixed;
305 left: 0; 342 left: 0;
306 bottom: 0px; 343 bottom: 0px;
307 height: 112rpx; 344 height: 112rpx;
308 width: 100%; 345 width: 100%;
309 background-color: #FFFFFF; 346 background-color: #FFFFFF;
310 font-size: 16px; 347 font-size: 16px;
311 display: flex; 348 display: flex;
312 justify-content: space-between; 349 justify-content: space-between;
313 align-items: center; 350 align-items: center;
314 .footerLeft{ 351 .footerLeft{
315 display: flex; 352 display: flex;
316 justify-content: center; 353 justify-content: center;
317 align-items: center; 354 align-items: center;
318 width: 50%; 355 width: 50%;
319 color: #333333; 356 color: #333333;
320 text{ 357 text{
321 color: #FF6B4A; 358 color: #FF6B4A;
322 } 359 }
323 } 360 }
324 .footerRight{ 361 .footerRight{
325 display: flex; 362 display: flex;
326 justify-content: flex-end; 363 justify-content: flex-end;
327 align-items: center; 364 align-items: center;
328 width: 50%; 365 width: 50%;
329 margin-right: 26rpx; 366 margin-right: 26rpx;
330 .paybtn{ 367 .paybtn{
331 display: flex; 368 display: flex;
332 justify-content: center; 369 justify-content: center;
333 align-items: center; 370 align-items: center;
334 background: #FF6B4A; 371 background: #FF6B4A;
335 border-radius: 20px; 372 border-radius: 20px;
336 border-radius: 20px; 373 border-radius: 20px;
337 color: #FFFFFF; 374 color: #FFFFFF;
338 width: 204rpx; 375 width: 204rpx;
339 height: 80rpx; 376 height: 80rpx;
340 } 377 }
341 } 378 }
342 379
343 } 380 }
344 } 381 }
345 382
346 383
347 384
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <!-- 折叠框 --> 2 <!-- 折叠框 -->
3 <view class="myCollapse"> 3 <view class="myCollapse">
4 <view class="head"> 4 <view class="head">
5 <view>{{title}}</view> 5 <view>{{title}}</view>
6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view> 6 <view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view> 7 <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 8 <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
9 </view> 9 </view>
10 <view class="body"> 10 <view class="body">
11 11
12 <block v-if="isOpen"> 12 <block v-if="isOpen">
13 13
14 <view style="background-color: #FFFFFF;" class="funBox"> 14 <view style="background-color: #FFFFFF;" class="funBox">
15 <block v-if="title==='镜片种类'"> 15 <block v-if="title==='镜片种类'">
16 <view class="noRange"> 16 <view class="noRange">
17 <block v-for="(item) in funList" :key="item.key"> 17 <block v-for="(item) in funList" :key="item.key">
18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 18 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 19 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
20 </block> 20 </block>
21 </view> 21 </view>
22 <view class="noRange"> 22 <view class="noRange">
23 <block v-for="(item,index) in funList2" :key="item.key"> 23 <block v-for="(item,index) in funList2" :key="item.key">
24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" 24 <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
25 :style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view> 25 :style="colorList[index]" @click="choice2(index,item.isChioce)"></view>
26 </block> 26 </block>
27 </view> 27 </view>
28 </block> 28 </block>
29 <block v-else> 29 <block v-else>
30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view> 30 <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
31 <view class="noRange"> 31 <view class="noRange">
32 <block v-for="(item) in funList" :key="item.key"> 32 <block v-for="(item) in funList" :key="item.key">
33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 33 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> 34 @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
35 </block> 35 </block>
36 </view> 36 </view>
37 37
38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> 38 <view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
39 <view class="noRange" style="max-width: 624rpx"> 39 <view class="noRange" style="max-width: 624rpx">
40 <block v-for="(item,index) in funList2" :key="item.key"> 40 <block v-for="(item,index) in funList2" :key="item.key">
41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" 41 <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
42 @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view> 42 @click="choice2(index,item.isChioce)">{{item.name}}</view>
43 </block> 43 </block>
44 </view> 44 </view>
45 </block> 45 </block>
46 </view> 46 </view>
47 </block> 47 </block>
48 48
49 <block v-else> 49 <block v-else>
50 *<block v-for="(item,index) in funContent" :key="index"> 50 *<block v-for="(item,index) in funContent" :key="index">
51 <text v-if="item!==null">{{item}}</text> 51 <text v-if="item!==null">{{item}}</text>
52 </block> 52 </block>
53 </block> 53 </block>
54 </view> 54 </view>
55 </view> 55 </view>
56 56
57 </template> 57 </template>
58 58
59 <script> 59 <script>
60 export default { 60 export default {
61 props:{ 61 props:{
62 isOpenProps:{ 62 isOpenProps:{
63 // 是否展开，默认 true 63 // 是否展开，默认 true
64 type: Boolean, 64 type: Boolean,
65 default: true 65 default: true
66 }, 66 },
67 funListProp:{ 67 funListProp:{
68 "name":String, 68 "name":String,
69 "isChioce": Number, 69 "isChioce": Number,
70 "key":Number 70 "key":Number
71 }, 71 },
72 funList2Prop:{ 72 funList2Prop:{
73 type:Array, 73 type:Array,
74 } 74 }
75 , 75 ,
76 funContentProp: { 76 funContentProp: {
77 type: Array 77 type: Array
78 }, 78 },
79 title:{ 79 title:{
80 type: String, 80 type: String,
81 default: '' 81 default: ''
82 } 82 }
83 }, 83 },
84 data() { 84 data() {
85 return { 85 return {
86 isOpen:this.isOpenProps, 86 isOpen:this.isOpenProps,
87 // 颜色数组要与传入的值手动相同 87 // 颜色数组要与传入的值手动相同
88 colorList:[ 88 colorList:[
89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", 89 "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", 90 "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", 91 "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", 92 "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" 93 "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
94 ], 94 ],
95 funList: this.funListProp, 95 funList: this.funListProp,
96 funList2: this.funList2Prop, 96 funList2: this.funList2Prop,
97 funContent: this.funContentProp 97 funContent: this.funContentProp
98 }; 98 };
99 }, 99 },
100 100
101 methods:{ 101 methods:{
102 myCollapseChange(isopen){ 102 myCollapseChange(isopen){
103 this.isOpen = !isopen 103 this.isOpen = !isopen
104 }, 104 },
105 choice(index,isChoice){ 105 choice(index,isChoice){
106 this.funList[index].isChioce = !isChoice 106 if(this.funList[index].type==="fun"){
107 if(!isChoice){ 107 this.funList[index].isChioce = !isChoice
108 this.funContent[index] = this.funList[index].name 108 if(!isChoice){
109 this.funContent[index] = this.funList[index].name
110 }
111 else{
112 this.funContent[index] = ''
113 }
109 } 114 }
110 else{ 115 else if(this.funList[index].type==="kind"){
111 this.funContent[index] = '' 116 for(let i=0;i<this.funList.length;i++){
117 this.funList[i].isChioce = false
118 }
119 this.funList[index].isChioce = !isChoice
120 this.funContent[0]=this.funList[index].name
121 }else {
122 for(let i=0;i<this.funList.length;i++){
123 this.funList[i].isChioce = false
124 }
125 for(let i=0;i<this.funList2.length;i++){
126 this.funList2[i].isChioce = false
127 }
128 this.funList[index].isChioce = !isChoice
129 this.funContent[0]=this.funList[index].name
112 } 130 }
113 }, 131 },
114 choice2(index,conIndex,isChoice){ 132 choice2(index,isChoice){
115 this.funList2[index].isChioce = !isChoice 133 if(this.funList2[index].type==="kind"){
116 if(!isChoice){ 134 for(let i=0;i<this.funList2.length;i++){
117 this.funContent[conIndex] = this.funList2[index].name 135 this.funList2[i].isChioce = false
136 }
137 this.funList2[index].isChioce = !isChoice
138 this.funContent[1] = this.funList2[index].name
118 } 139 }
119 else{ 140 else{
120 this.funContent[conIndex] = '' 141 for(let i=0;i<this.funList.length;i++){
142 this.funList[i].isChioce = false
143 }
144 for(let i=0;i<this.funList2.length;i++){
145 this.funList2[i].isChioce = false
146 }
147 this.funList2[index].isChioce = !isChoice
148 this.funContent[0]=this.funList2[index].name
121 } 149 }
122 } 150 }
123 } 151 }
124 } 152 }
125 </script> 153 </script>
126 154
127 <style lang="scss"> 155 <style lang="scss">
128 .myCollapse{ 156 .myCollapse{
129 width: 100%; 157 width: 100%;
130 padding-bottom: 28rpx; 158 padding-bottom: 28rpx;
131 margin-top: 7px; 159 margin-top: 7px;
132 border-bottom: 1px solid #E9E9E9; 160 border-bottom: 1px solid #E9E9E9;
133 .head{ 161 .head{
134 display: flex; 162 display: flex;
135 justify-content: space-between; 163 justify-content: space-between;
136 height: 24px; 164 height: 24px;
137 // font-family: PingFangSC-Medium; 165 // font-family: PingFangSC-Medium;
138 font-size: 16px; 166 font-size: 16px;
139 color: #333333; 167 color: #333333;
140 letter-spacing: -0.3px; 168 letter-spacing: -0.3px;
141 text-align: justify; 169 text-align: justify;
142 line-height: 24px; 170 line-height: 24px;
143 margin-bottom: 18rpx; 171 margin-bottom: 18rpx;
144 .headRighted{ 172 .headRighted{
145 width: 0; 173 width: 0;
146 height: 0; 174 height: 0;
147 border-left: 4px solid transparent; 175 border-left: 4px solid transparent;
148 border-right: 4px solid transparent; 176 border-right: 4px solid transparent;
149 border-bottom: 4px solid #CFCFCF; 177 border-bottom: 4px solid #CFCFCF;
150 transform: scaleY(-1); 178 transform: scaleY(-1);
151 margin-top: 10px; 179 margin-top: 10px;
152 } 180 }
153 .headMid{ 181 .headMid{
154 // font-family: PingFangSC-Regular; 182 // font-family: PingFangSC-Regular;
155 font-size: 10px; 183 font-size: 10px;
156 color: #999999; 184 color: #999999;
157 letter-spacing: -0.19px; 185 letter-spacing: -0.19px;
158 margin-left: -120rpx; 186 margin-left: -120rpx;
159 } 187 }
160 .headRight{ 188 .headRight{
161 width: 0; 189 width: 0;
162 height: 0; 190 height: 0;
163 border-left: 4px solid transparent; 191 border-left: 4px solid transparent;
164 border-right: 4px solid transparent; 192 border-right: 4px solid transparent;
165 border-bottom: 4px solid #CFCFCF; 193 border-bottom: 4px solid #CFCFCF;
166 margin-top: 10px; 194 margin-top: 10px;
167 } 195 }
168 } 196 }
169 .body{ 197 .body{
170 // font-family: PingFangSC-Regular; 198 // font-family: PingFangSC-Regular;
171 font-size: 12px; 199 font-size: 12px;
172 color: #666666; 200 color: #666666;
173 letter-spacing: 0; 201 letter-spacing: 0;
174 display: flex; 202 display: flex;
175 flex-wrap: wrap; 203 flex-wrap: wrap;
176 text{ 204 text{
177 padding-left: 4px; 205 padding-left: 4px;
178 } 206 }
179 } 207 }
180 } 208 }
181 .funBox { 209 .funBox {
182 // display: flex; 210 // display: flex;
183 width: 100%; 211 width: 100%;
184 // flex-wrap: wrap; 212 // flex-wrap: wrap;
185 // max-width: 624rpx; 213 // max-width: 624rpx;
186 .range{ 214 .range{
187 // font-family: PingFangSC-Regular; 215 // font-family: PingFangSC-Regular;
188 font-size: 10px; 216 font-size: 10px;
189 color: #999999; 217 color: #999999;
190 letter-spacing: -0.19px; 218 letter-spacing: -0.19px;
191 margin-bottom: 5px; 219 margin-bottom: 5px;
192 } 220 }
193 .noRange{ 221 .noRange{
194 display: flex; 222 display: flex;
195 flex-wrap: wrap; 223 flex-wrap: wrap;
196 // max-width: 624rpx; 224 // max-width: 624rpx;
197 // margin-bottom: 28rpx; 225 // margin-bottom: 28rpx;
198 .boxChoiced,.boxChoice{ 226 .boxChoiced,.boxChoice{
199 height: 60rpx; 227 height: 60rpx;
200 border-radius: 4rpx; 228 border-radius: 4rpx;
201 // font-family: PingFangSC-Regular; 229 // font-family: PingFangSC-Regular;
202 font-size: 12px; 230 font-size: 12px;
203 letter-spacing: 0; 231 letter-spacing: 0;
204 line-height: 60rpx; 232 line-height: 60rpx;
205 box-sizing: border-box; 233 box-sizing: border-box;
206 padding: 0 20rpx; 234 padding: 0 20rpx;
207 margin-right: 20rpx; 235 margin-right: 20rpx;
208 margin-bottom: 13rpx; 236 margin-bottom: 13rpx;
209 } 237 }
210 .boxChoiced{ 238 .boxChoiced{
211 background: rgba(255,107,74,0.15); 239 background: rgba(255,107,74,0.15);
212 color: #FF6B4A; 240 color: #FF6B4A;
213 } 241 }
214 .boxChoice{ 242 .boxChoice{
215 background: #F2F2F2; 243 background: #F2F2F2;
216 color: #666666; 244 color: #666666;
217 } 245 }
218 .boxChoiced-C,.boxChoice-C{ 246 .boxChoiced-C,.boxChoice-C{
219 width: 64rpx; 247 width: 64rpx;
220 height: 64rpx; 248 height: 64rpx;
221 border-radius: 32rpx; 249 border-radius: 32rpx;
222 margin-right: 8px; 250 margin-right: 8px;
223 } 251 }
224 .boxChoiced-C{ 252 .boxChoiced-C{
225 opacity: 0.7; 253 opacity: 0.7;
226 border: 1px solid #FF6B4A; 254 border: 1px solid #FF6B4A;
227 } 255 }
228 .boxChoice-C{ 256 .boxChoice-C{
229 opacity: 0.7; 257 opacity: 0.7;
230 border: 1px solid #FFFFFF; 258 border: 1px solid #FFFFFF;
231 } 259 }
232 } 260 }
233 261
234 } 262 }
235 </style> 263 </style>
236 264
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goods-info"> 3 <view class="goods-info">
4 <image src="../../static/myorder-paying-pic.png"></image> 4 <image src="../../static/myorder-paying-pic.png"></image>
5 <view class="box-right"> 5 <view class="box-right">
6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> 6 <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7 <text class="p2">支持7天无理由退货 顺丰发货</text> 7 <text class="p2">支持7天无理由退货 顺丰发货</text>
8 <view class="priceBox"> 8 <view class="priceBox">
9 <view class="price">￥{{price*count}}</view> 9 <view class="price">￥{{price*count}}</view>
10 <view class="counter"> 10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 13 <view class="btn" @click="counter(true)">+</view>
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="goods-data"> 18 <view class="goods-data">
19 <!-- 实用功能折叠框 --> 19 <!-- 实用功能折叠框 -->
20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> 20 <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> 21 <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> 22 <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> 23 <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24 24
25 <view class="opCollapse"> 25 <view class="opCollapse">
26 <view class="head"> 26 <view class="head">
27 <view v-if="!opIsOpen">填写验光数据</view> 27 <view v-if="!opIsOpen">填写验光数据</view>
28 <view v-else></view> 28 <view v-else></view>
29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> 29 <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 30 <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31 </view> 31 </view>
32 <view class="body"> 32 <view class="body">
33 <template v-if="opIsOpen"> 33 <template v-if="opIsOpen">
34 34
35 <view class="goods-form"> 35 <view class="goods-form">
36 <text class="p1">填写验光数据</text> 36 <text class="p1">填写验光数据</text>
37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 37 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38 <view class="picker" > 38 <view class="picker" >
39 <view class="picker-choice"> 39 <view class="picker-choice">
40 <view class="choice-left"> 40 <view class="choice-left">
41 <text class="p11">{{pickerInfoList[0].nameC}}</text> 41 <text class="p11">{{pickerInfoList[0].nameC}}</text>
42 <text class="p12">{{pickerInfoList[0].nameE}}</text> 42 <text class="p12">{{pickerInfoList[0].nameE}}</text>
43 </view> 43 </view>
44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 44 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 45 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 46 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47 <image src="../../static/detail-tabicon.png" ></image> 47 <image src="../../static/detail-tabicon.png" ></image>
48 </picker> 48 </picker>
49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 49 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 50 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 51 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52 <image src="../../static/detail-tabicon.png" ></image> 52 <image src="../../static/detail-tabicon.png" ></image>
53 </picker> 53 </picker>
54 </view> 54 </view>
55 </view> 55 </view>
56 <view class="picker" > 56 <view class="picker" >
57 <view class="picker-choice"> 57 <view class="picker-choice">
58 <view class="choice-left"> 58 <view class="choice-left">
59 <text class="p11">{{pickerInfoList[1].nameC}}</text> 59 <text class="p11">{{pickerInfoList[1].nameC}}</text>
60 <text class="p12">{{pickerInfoList[1].nameE}}</text> 60 <text class="p12">{{pickerInfoList[1].nameE}}</text>
61 </view> 61 </view>
62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 62 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 63 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 64 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65 <image src="../../static/detail-tabicon.png" ></image> 65 <image src="../../static/detail-tabicon.png" ></image>
66 </picker> 66 </picker>
67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 67 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 68 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 69 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70 <image src="../../static/detail-tabicon.png" ></image> 70 <image src="../../static/detail-tabicon.png" ></image>
71 </picker> 71 </picker>
72 </view> 72 </view>
73 </view> 73 </view>
74 <view class="picker" > 74 <view class="picker" >
75 <view class="picker-choice"> 75 <view class="picker-choice">
76 <view class="choice-left"> 76 <view class="choice-left">
77 <text class="p11">{{pickerInfoList[2].nameC}}</text> 77 <text class="p11">{{pickerInfoList[2].nameC}}</text>
78 <text class="p12">{{pickerInfoList[2].nameE}}</text> 78 <text class="p12">{{pickerInfoList[2].nameE}}</text>
79 </view> 79 </view>
80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 80 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 81 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 82 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83 <image src="../../static/detail-tabicon.png" ></image> 83 <image src="../../static/detail-tabicon.png" ></image>
84 </picker> 84 </picker>
85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 86 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88 <image src="../../static/detail-tabicon.png" ></image> 88 <image src="../../static/detail-tabicon.png" ></image>
89 </picker> 89 </picker>
90 </view> 90 </view>
91 </view> 91 </view>
92 <view class="picker" > 92 <view class="picker" >
93 <view class="picker-choice"> 93 <view class="picker-choice">
94 <view class="choice-left"> 94 <view class="choice-left">
95 <text class="p11">{{pickerInfoList[3].nameC}}</text> 95 <text class="p11">{{pickerInfoList[3].nameC}}</text>
96 <text class="p12">{{pickerInfoList[3].nameE}}</text> 96 <text class="p12">{{pickerInfoList[3].nameE}}</text>
97 </view> 97 </view>
98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 98 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 99 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 100 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker> 102 </picker>
103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 103 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 104 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 105 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 106 <image src="../../static/detail-tabicon.png" ></image>
107 </picker> 107 </picker>
108 </view> 108 </view>
109 </view> 109 </view>
110 <view class="picker" > 110 <view class="picker" >
111 <view class="picker-choice"> 111 <view class="picker-choice">
112 <view class="choice-left"> 112 <view class="choice-left">
113 <text class="p11">{{pickerInfoList[4].nameC}}</text> 113 <text class="p11">{{pickerInfoList[4].nameC}}</text>
114 </view> 114 </view>
115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 115 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 116 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 117 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118 <image src="../../static/detail-tabicon.png" ></image> 118 <image src="../../static/detail-tabicon.png" ></image>
119 </picker> 119 </picker>
120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 120 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 121 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 122 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123 <image src="../../static/detail-tabicon.png" ></image> 123 <image src="../../static/detail-tabicon.png" ></image>
124 </picker> 124 </picker>
125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 125 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 126 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 127 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128 <image src="../../static/detail-tabicon.png" ></image> 128 <image src="../../static/detail-tabicon.png" ></image>
129 </picker> 129 </picker>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view class="confirm"> 132 <view class="confirm">
133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 133 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134 <text>确认以上输入信息来源于我的验光数据!</text> 134 <text>确认以上输入信息来源于我的验光数据!</text>
135 </view> 135 </view>
136 </view> 136 </view>
137 137
138 </template> 138 </template>
139 <template v-else> 139 <template v-else>
140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 140 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141 <template v-if="item.nameC==='验光日期'"> 141 <template v-if="item.nameC==='验光日期'">
142 <text class="names">{{item.nameC}}</text> 142 <text class="names">{{item.nameC}}</text>
143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 143 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 144 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 145 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
146 </template> 146 </template>
147 <template v-else> 147 <template v-else>
148 <template v-if="item.nameC==='度数'"> 148 <template v-if="item.nameC==='度数'">
149 <text style="display: inline;">*</text> 149 <text style="display: inline;">*</text>
150 </template> 150 </template>
151 151
152 <text class="names">{{item.nameC}}</text> 152 <text class="names">{{item.nameC}}</text>
153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 153 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 154 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
155 </template> 155 </template>
156 </view> 156 </view>
157 </template> 157 </template>
158 </view> 158 </view>
159 </view> 159 </view>
160 160
161 </view> 161 </view>
162 <view class="submit">立即结算</view> 162 <view class="submit">立即结算</view>
163 </view> 163 </view>
164 </template> 164 </template>
165 165
166 <script> 166 <script>
167 import MyCollapse from './compoents/MyCollapse.vue' 167 import MyCollapse from './compoents/MyCollapse.vue'
168 export default { 168 export default {
169 components: { 169 components: {
170 MyCollapse 170 MyCollapse
171 }, 171 },
172 data() { 172 data() {
173 return { 173 return {
174 count:1, 174 count:1,
175 disabled:false, 175 disabled:false,
176 price:180, 176 price:180,
177 // 实用功能参数 177 // 实用功能参数
178 funIsOpen:true, // 默认myCollapse开启 178 funIsOpen:true, // 默认myCollapse开启
179 funList: [ 179 funList: [
180 {"name":"防紫外线","isChioce": false,"key":1}, 180 {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
181 {"name":"防蓝光","isChioce": false,"key":2}, 181 {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
182 {"name":"智能变色","isChioce": false,"key":3}, 182 {"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
183 {"name":"易清洁","isChioce": false,"key":4}, 183 {"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
184 {"name":"防辐射","isChioce": false,"key":5}, 184 {"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
185 {"name":"抗疲劳","isChioce": false,"key":6}, 185 {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
186 ], 186 ],
187 funContent:[], 187 funContent:[],
188 188
189 // 镜片种类参数 189 // 镜片种类参数
190 kindIsOpen:true, 190 kindIsOpen:true,
191 kindList1: [ 191 kindList1: [
192 {"name":"染色","isChioce":false,key:1}, 192 {"name":"染色","isChioce":false,key:1,"type": "kind"},
193 {"name":"渐变","isChioce":false,key:2}, 193 {"name":"渐变","isChioce":false,key:2,"type": "kind"},
194 ], 194 ],
195 kindList2: [ 195 kindList2: [
196 {"name":"JB234759","isChioce":false,key:3}, 196 {"name":"JB234759","isChioce":false,key:3,"type": "kind"},
197 {"name":"JB234759","isChioce":false,key:4}, 197 {"name":"JB234759","isChioce":false,key:4,"type": "kind"},
198 {"name":"JB234759","isChioce":false,key:5}, 198 {"name":"JB234759","isChioce":false,key:5,"type": "kind"},
199 {"name":"JB234759","isChioce":false,key:6}, 199 {"name":"JB234759","isChioce":false,key:6,"type": "kind"},
200 {"name":"JB234759","isChioce":false,key:7}, 200 {"name":"JB234759","isChioce":false,key:7,"type": "kind"},
201 ], 201 ],
202 kindContent:[], 202 kindContent:[],
203 // 材质选择 203 // 材质选择
204 maIsOpen:true, 204 maIsOpen:true,
205 maList1: [ 205 maList1: [
206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, 206 {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207 {"name":"特殊镜片","isChioce":false,key:2}, 207 {"name":"特殊镜片","isChioce":false,key:2},
208 ], 208 ],
209 maList2: [ 209 maList2: [
210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 210 {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211 {"name":"玻璃镜片","isChioce":false,key:4}, 211 {"name":"玻璃镜片","isChioce":false,key:4},
212 ], 212 ],
213 maContent:[], 213 maContent:[],
214 // 折射率参数 214 // 折射率参数
215 reIsOpen:true, 215 reIsOpen:true,
216 reList1: [ 216 reList1: [
217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, 217 {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218 {"name":"1.60","isChioce":false,key:2}, 218 {"name":"1.60","isChioce":false,key:2},
219 ], 219 ],
220 reList2: [ 220 reList2: [
221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, 221 {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222 {"name":"1.67","isChioce":false,key:4}, 222 {"name":"1.67","isChioce":false,key:4},
223 {"name":"1.71","isChioce":false,key:5}, 223 {"name":"1.71","isChioce":false,key:5},
224 {"name":"1.74","isChioce":false,key:6}, 224 {"name":"1.74","isChioce":false,key:6},
225 ], 225 ],
226 reContent:[], 226 reContent:[],
227 // 验光参数 227 // 验光参数
228 opIsOpen:true, 228 opIsOpen:true,
229 tablist: { 229 tablist: {
230 // read: true, 230 // read: true,
231 // seeLong: false, 231 // seeLong: false,
232 confirm: false 232 confirm: false
233 }, 233 },
234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 234 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235 // 度数相关数据 235 // 度数相关数据
236 pickerInfoList:[ 236 pickerInfoList:[
237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 237 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 238 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 239 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 240 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 241 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
242 ], 242 ],
243 243
244 } 244 }
245 }, 245 },
246 methods: { 246 methods: {
247 counter(isadd){ 247 counter(isadd){
248 if(isadd){ 248 if(isadd){
249 this.count++ 249 this.count++
250 }else{ 250 }else{
251 this.count <= 1? this.disabled = true:this.count-- 251 this.count <= 1? this.disabled = true:this.count--
252 } 252 }
253 }, 253 },
254 myCollapseChange(isopen){ 254 myCollapseChange(isopen){
255 // console.log(isopen) 255 // console.log(isopen)
256 this.opIsOpen = !isopen 256 this.opIsOpen = !isopen
257 }, 257 },
258 changeConfirm() { 258 changeConfirm() {
259 this.tablist.confirm = !this.tablist.confirm 259 this.tablist.confirm = !this.tablist.confirm
260 }, 260 },
261 261
262 bindPickerChange01: function(e) { 262 bindPickerChange01: function(e) {
263 this.pickerInfoList[0].nameIndex1 = e.target.value 263 this.pickerInfoList[0].nameIndex1 = e.target.value
264 }, 264 },
265 bindPickerChange02: function(e) { 265 bindPickerChange02: function(e) {
266 this.pickerInfoList[0].nameIndex2 = e.target.value 266 this.pickerInfoList[0].nameIndex2 = e.target.value
267 }, 267 },
268 268
269 bindPickerChange11: function(e) { 269 bindPickerChange11: function(e) {
270 this.pickerInfoList[1].nameIndex1 = e.target.value 270 this.pickerInfoList[1].nameIndex1 = e.target.value
271 }, 271 },
272 bindPickerChange12: function(e) { 272 bindPickerChange12: function(e) {
273 this.pickerInfoList[1].nameIndex2 = e.target.value 273 this.pickerInfoList[1].nameIndex2 = e.target.value
274 }, 274 },
275 275
276 bindPickerChange21: function(e) { 276 bindPickerChange21: function(e) {
277 this.pickerInfoList[2].nameIndex1 = e.target.value 277 this.pickerInfoList[2].nameIndex1 = e.target.value
278 }, 278 },
279 bindPickerChange22: function(e) { 279 bindPickerChange22: function(e) {
280 this.pickerInfoList[2].nameIndex2 = e.target.value 280 this.pickerInfoList[2].nameIndex2 = e.target.value
281 }, 281 },
282 282
283 bindPickerChange31: function(e) { 283 bindPickerChange31: function(e) {
284 this.pickerInfoList[3].nameIndex1 = e.target.value 284 this.pickerInfoList[3].nameIndex1 = e.target.value
285 }, 285 },
286 bindPickerChange32: function(e) { 286 bindPickerChange32: function(e) {
287 this.pickerInfoList[3].nameIndex2 = e.target.value 287 this.pickerInfoList[3].nameIndex2 = e.target.value
288 }, 288 },
289 289
290 bindPickerChange41: function(e) { 290 bindPickerChange41: function(e) {
291 this.pickerInfoList[4].nameIndex1 = e.target.value 291 this.pickerInfoList[4].nameIndex1 = e.target.value
292 }, 292 },
293 bindPickerChange42: function(e) { 293 bindPickerChange42: function(e) {
294 this.pickerInfoList[4].nameIndex2 = e.target.value 294 this.pickerInfoList[4].nameIndex2 = e.target.value
295 }, 295 },
296 bindPickerChange43: function(e) { 296 bindPickerChange43: function(e) {
297 this.pickerInfoList[4].nameIndex3 = e.target.value 297 this.pickerInfoList[4].nameIndex3 = e.target.value
298 }, 298 },
299 } 299 }
300 } 300 }
301 </script> 301 </script>
302 302
303 <style lang="scss" scoped> 303 <style lang="scss" scoped>
304 .content{ 304 .content{
305 width: 100%; 305 width: 100%;
306 background-color: #F2F2F2; 306 background-color: #F2F2F2;
307 display: flex; 307 display: flex;
308 flex-direction: column; 308 flex-direction: column;
309 align-items: center; 309 align-items: center;
310 } 310 }
311 311
312 .goods-info{ 312 .goods-info{
313 width: 100%; 313 width: 100%;
314 height: 272rpx; 314 height: 272rpx;
315 box-sizing: border-box; 315 box-sizing: border-box;
316 padding: 40rpx 40rpx 36rpx 36rpx; 316 padding: 40rpx 40rpx 36rpx 36rpx;
317 margin: 36rpx 0 18rpx 0; 317 margin: 36rpx 0 18rpx 0;
318 // margin-bottom: -18rpx; 318 // margin-bottom: -18rpx;
319 // margin-top: -36rpx; 319 // margin-top: -36rpx;
320 background: #FFFFFF; 320 background: #FFFFFF;
321 border-radius: 16rpx; 321 border-radius: 16rpx;
322 display: flex; 322 display: flex;
323 image{ 323 image{
324 width: 94px; 324 width: 94px;
325 height: 94px; 325 height: 94px;
326 margin-right: 28rpx; 326 margin-right: 28rpx;
327 } 327 }
328 .box-right{ 328 .box-right{
329 width: 458rpx; 329 width: 458rpx;
330 display: flex; 330 display: flex;
331 flex-direction: column; 331 flex-direction: column;
332 align-items: flex-start; 332 align-items: flex-start;
333 justify-content: space-between; 333 justify-content: space-between;
334 .p1 { 334 .p1 {
335 // font-family: PingFangSC-Regular; 335 // font-family: PingFangSC-Regular;
336 font-size: 14px; 336 font-size: 14px;
337 color: #333333; 337 color: #333333;
338 letter-spacing: -0.26px; 338 letter-spacing: -0.26px;
339 text-align: justify; 339 text-align: justify;
340 line-height: 18px; 340 line-height: 18px;
341 } 341 }
342 .p2 { 342 .p2 {
343 // font-family: PingFangSC-Regular; 343 // font-family: PingFangSC-Regular;
344 font-size: 10px; 344 font-size: 10px;
345 color: #999999; 345 color: #999999;
346 letter-spacing: -0.19px; 346 letter-spacing: -0.19px;
347 margin-top: -20rpx; 347 margin-top: -20rpx;
348 } 348 }
349 .priceBox{ 349 .priceBox{
350 display: flex; 350 display: flex;
351 flex-direction: row; 351 flex-direction: row;
352 justify-content: space-between; 352 justify-content: space-between;
353 width: 100%; 353 width: 100%;
354 .price{ 354 .price{
355 color: #FF6B4A; 355 color: #FF6B4A;
356 font-size: 28rpx; 356 font-size: 28rpx;
357 } 357 }
358 .counter{ 358 .counter{
359 display: flex; 359 display: flex;
360 flex-direction: row; 360 flex-direction: row;
361 justify-content: space-between; 361 justify-content: space-between;
362 font-size: 28rpx; 362 font-size: 28rpx;
363 color: #333333; 363 color: #333333;
364 width: 122rpx; 364 width: 122rpx;
365 .btn{ 365 .btn{
366 display: flex; 366 display: flex;
367 justify-content: center; 367 justify-content: center;
368 line-height: 32rpx; 368 line-height: 32rpx;
369 height: 32rpx; 369 height: 32rpx;
370 width: 32rpx; 370 width: 32rpx;
371 background-color: #F2F2F2; 371 background-color: #F2F2F2;
372 color: #CFCFCF; 372 color: #CFCFCF;
373 } 373 }
374 } 374 }
375 } 375 }
376 } 376 }
377 } 377 }
378 378
379 .goods-data{ 379 .goods-data{
380 width: 100%; 380 width: 100%;
381 box-sizing: border-box; 381 box-sizing: border-box;
382 padding: 37rpx 40rpx 0 40rpx; 382 padding: 37rpx 40rpx 0 40rpx;
383 background: #FFFFFF; 383 background: #FFFFFF;
384 border-radius: 12rpx; 384 border-radius: 12rpx;
385 margin-bottom: 92px; 385 margin-bottom: 92px;
386 .opCollapse{ 386 .opCollapse{
387 width: 100%; 387 width: 100%;
388 padding-bottom: 28rpx; 388 padding-bottom: 28rpx;
389 margin-top: 7px; 389 margin-top: 7px;
390 border-bottom: 1px solid #E9E9E9; 390 border-bottom: 1px solid #E9E9E9;
391 .head{ 391 .head{
392 display: flex; 392 display: flex;
393 justify-content: space-between; 393 justify-content: space-between;
394 height: 24px; 394 height: 24px;
395 // font-family: PingFangSC-Medium; 395 // font-family: PingFangSC-Medium;
396 font-size: 16px; 396 font-size: 16px;
397 color: #333333; 397 color: #333333;
398 letter-spacing: -0.3px; 398 letter-spacing: -0.3px;
399 text-align: justify; 399 text-align: justify;
400 line-height: 24px; 400 line-height: 24px;
401 margin-bottom: 18rpx; 401 margin-bottom: 18rpx;
402 .headRighted{ 402 .headRighted{
403 width: 0; 403 width: 0;
404 height: 0; 404 height: 0;
405 border-left: 4px solid transparent; 405 border-left: 4px solid transparent;
406 border-right: 4px solid transparent; 406 border-right: 4px solid transparent;
407 border-bottom: 4px solid #CFCFCF; 407 border-bottom: 4px solid #CFCFCF;
408 transform: scaleY(-1); 408 transform: scaleY(-1);
409 margin-top: 10px; 409 margin-top: 10px;
410 } 410 }
411 .headMid{ 411 .headMid{
412 // font-family: PingFangSC-Regular; 412 // font-family: PingFangSC-Regular;
413 font-size: 10px; 413 font-size: 10px;
414 color: #999999; 414 color: #999999;
415 letter-spacing: -0.19px; 415 letter-spacing: -0.19px;
416 margin-left: -120rpx; 416 margin-left: -120rpx;
417 } 417 }
418 .headRight{ 418 .headRight{
419 width: 0; 419 width: 0;
420 height: 0; 420 height: 0;
421 border-left: 4px solid transparent; 421 border-left: 4px solid transparent;
422 border-right: 4px solid transparent; 422 border-right: 4px solid transparent;
423 border-bottom: 4px solid #CFCFCF; 423 border-bottom: 4px solid #CFCFCF;
424 margin-top: 10px; 424 margin-top: 10px;
425 } 425 }
426 } 426 }
427 .body{ 427 .body{
428 // font-family: PingFangSC-Regular; 428 // font-family: PingFangSC-Regular;
429 font-size: 12px; 429 font-size: 12px;
430 color: #666666; 430 color: #666666;
431 letter-spacing: 0; 431 letter-spacing: 0;
432 .bodyBox{ 432 .bodyBox{
433 margin-top: 15px; 433 margin-top: 15px;
434 .names{ 434 .names{
435 // font-family: PingFangSC-Regular; 435 // font-family: PingFangSC-Regular;
436 font-size: 12px; 436 font-size: 12px;
437 color: #151515; 437 color: #151515;
438 letter-spacing: 0; 438 letter-spacing: 0;
439 text-align: justify; 439 text-align: justify;
440 line-height: 17px; 440 line-height: 17px;
441 margin-left: 5px; 441 margin-left: 5px;
442 margin-right: 10px; 442 margin-right: 10px;
443 } 443 }
444 text{ 444 text{
445 // font-family: PingFangSC-Regular; 445 // font-family: PingFangSC-Regular;
446 font-size: 12px; 446 font-size: 12px;
447 color: #666666; 447 color: #666666;
448 letter-spacing: 0; 448 letter-spacing: 0;
449 text-align: justify; 449 text-align: justify;
450 } 450 }
451 } 451 }
452 452
453 } 453 }
454 } 454 }
455 455
456 } 456 }
457 457
458 .goods-form { 458 .goods-form {
459 display: flex; 459 display: flex;
460 flex-direction: column; 460 flex-direction: column;
461 align-items: center; 461 align-items: center;
462 justify-content: center; 462 justify-content: center;
463 background-color: #fff; 463 background-color: #fff;
464 width: 100%; 464 width: 100%;
465 465
466 .p1 { 466 .p1 {
467 font-size: 16px; 467 font-size: 16px;
468 color: #333333; 468 color: #333333;
469 letter-spacing: -0.3px; 469 letter-spacing: -0.3px;
470 text-align: justify; 470 text-align: justify;
471 line-height: 24px; 471 line-height: 24px;
472 margin: 4px 0; 472 margin: 4px 0;
473 473
474 } 474 }
475 .p2 { 475 .p2 {
476 font-size: 12px; 476 font-size: 12px;
477 color: #999999; 477 color: #999999;
478 letter-spacing: -0.23px; 478 letter-spacing: -0.23px;
479 margin-bottom: 18rpx; 479 margin-bottom: 18rpx;
480 } 480 }
481 image{ 481 image{
482 width: 28rpx; 482 width: 28rpx;
483 height: 26rpx; 483 height: 26rpx;
484 } 484 }
485 .confirm { 485 .confirm {
486 display: flex; 486 display: flex;
487 align-items: center; 487 align-items: center;
488 font-size: 12px; 488 font-size: 12px;
489 color: #666666; 489 color: #666666;
490 letter-spacing: -0.23px; 490 letter-spacing: -0.23px;
491 width: 684rpx; 491 width: 684rpx;
492 image{ 492 image{
493 margin-right:25rpx; 493 margin-right:25rpx;
494 } 494 }
495 } 495 }
496 .picker{ 496 .picker{
497 display: flex; 497 display: flex;
498 flex-direction: column; 498 flex-direction: column;
499 justify-content: center; 499 justify-content: center;
500 align-items: center; 500 align-items: center;
501 width: 100%; 501 width: 100%;
502 image{ 502 image{
503 width: 10px; 503 width: 10px;
504 height: 10px; 504 height: 10px;
505 margin-right: 5px; 505 margin-right: 5px;
506 } 506 }
507 .picker-choice{ 507 .picker-choice{
508 display: flex; 508 display: flex;
509 width: 684rpx; 509 width: 684rpx;
510 align-items: center; 510 align-items: center;
511 margin-bottom: 40rpx; 511 margin-bottom: 40rpx;
512 .choice-left{ 512 .choice-left{
513 width: 210rpx; 513 width: 210rpx;
514 .p11 { 514 .p11 {
515 font-size: 14px; 515 font-size: 14px;
516 color: #333333; 516 color: #333333;
517 letter-spacing: -0.26px; 517 letter-spacing: -0.26px;
518 text-align: justify; 518 text-align: justify;
519 line-height: 24px; 519 line-height: 24px;
520 // margin-right: 10px; 520 // margin-right: 10px;
521 } 521 }
522 .p12 { 522 .p12 {
523 font-size: 10px; 523 font-size: 10px;
524 color: #3F3F3F; 524 color: #3F3F3F;
525 letter-spacing: -0.19px; 525 letter-spacing: -0.19px;
526 text-align: justify; 526 text-align: justify;
527 line-height: 24px; 527 line-height: 24px;
528 } 528 }
529 529
530 530
531 } 531 }
532 .p13 { 532 .p13 {
533 font-size: 10px; 533 font-size: 10px;
534 color: #999999; 534 color: #999999;
535 letter-spacing: -0.19px; 535 letter-spacing: -0.19px;
536 margin-right: 10px; 536 margin-right: 10px;
537 } 537 }
538 .p13-date { 538 .p13-date {
539 font-size: 10px; 539 font-size: 10px;
540 color: #999999; 540 color: #999999;
541 letter-spacing: -0.19px; 541 letter-spacing: -0.19px;
542 margin-right: 5px; 542 margin-right: 5px;
543 } 543 }
544 .p14 { 544 .p14 {
545 font-size: 14px; 545 font-size: 14px;
546 color: #666666; 546 color: #666666;
547 letter-spacing: -0.26px; 547 letter-spacing: -0.26px;
548 text-align: center; 548 text-align: center;
549 width: 124rpx; 549 width: 124rpx;
550 border-bottom: 1px solid #CFCFCF; 550 border-bottom: 1px solid #CFCFCF;
551 } 551 }
552 552
553 } 553 }
554 } 554 }
555 } 555 }
556 556
557 .submit{ 557 .submit{
558 width: 100%; 558 width: 100%;
559 height: 112rpx; 559 height: 112rpx;
560 background: #FF6B4A; 560 background: #FF6B4A;
561 position: fixed; 561 position: fixed;
562 bottom: 0; 562 bottom: 0;
563 text-align: center; 563 text-align: center;
564 line-height: 112rpx; 564 line-height: 112rpx;
565 // font-family: PingFangSC-Regular; 565 // font-family: PingFangSC-Regular;
566 font-size: 16px; 566 font-size: 16px;
567 color: #FFFFFF; 567 color: #FFFFFF;
568 letter-spacing: -0.3px; 568 letter-spacing: -0.3px;
569 } 569 }
570 570
571 </style> 571 </style>
572 572
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <view class="content"> 2
3 <view class="order-hr"></view> 3 <view class="content">
4 <view class="order-time"> 4 <view class="order-hr"></view>
5 <text>请在</text> 5 <view class="order-time">
6 <!-- <text class="p2"></text> --> 6 <text>请在</text>
7 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 7 <!-- <text class="p2"></text> -->
8 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9 <text>内完成付款</text> 9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10 </view> 10 <text>内完成付款</text>
11 <view class="order"> 11 </view>
12 <view class="order-user"> 12 <view class="order">
13 <view class="order-user-head"> 13 <view class="order-user">
14 <text class="p1">钱大大</text> 14 <view class="order-user-head">
15 <text class="p2">18823749843</text> 15 <text class="p1">钱大大</text>
16 </view> 16 <text class="p2">18823749843</text>
17 <view class="order-user-body"> 17 </view>
18 <image src="../../static/myorder-paying-location.png"></image> 18 <view class="order-user-body">
19 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> 19 <image src="../../static/myorder-paying-location.png"></image>
20 </view> 20 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
21 </view> 21 </view>
22 <view class="order-info"> 22 </view>
23 <view class="order-info-head"> 23 <view class="order-info">
24 <image src="../../static/myorder-paying-pic.png"></image> 24 <view class="order-info-head">
25 <view class="order-info-head-r"> 25 <image src="../../static/myorder-paying-pic.png"></image>
26 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 26 <view class="order-info-head-r">
27 <view class="p2" style="margin: 0;"> 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
28 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 28 <view class="p2" style="margin: 0;">
29 <!-- <view class="arrow"></view> --> 29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 </view> 30 <!-- <view class="arrow"></view> -->
31 <text class="p3"><span>￥180</span><span class="p4">X1</span></text> 31 </view>
32 </view> 32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
33 </view> 33 </view>
34 <!-- <view class="order-info-goodsnum"> 34 </view>
35 <text>X1</text> 35 <!-- <view class="order-info-goodsnum">
36 </view> --> 36 <text>X1</text>
37 <text class="order-info-freight"> 37 </view> -->
38 <text class="p1">运费</text> 38 <text class="order-info-freight">
39 <text class="p2">0.00</text> 39 <text class="p1">运费</text>
40 </text> 40 <text class="p2">0.00</text>
41 <text class="order-info-discount"> 41 </text>
42 <text class="p1">优惠</text> 42 <text class="order-info-discount">
43 <text class="p2">-￥70.00</text> 43 <text class="p1">优惠</text>
44 </text> 44 <text class="p2">-￥70.00</text>
45 <text class="order-info-price"> 45 </text>
46 <text class="p1">实付</text> 46 <text class="order-info-price">
47 <text class="p2">￥110</text> 47 <text class="p1">实付</text>
48 </text> 48 <text class="p2">￥110</text>
49 <text class="order-info-num"> 49 </text>
50 <text>订单号：203486795859605849</text> 50 <text class="order-info-num">
51 </text> 51 <text>订单号：203486795859605849</text>
52 <text class="order-info-time"> 52 </text>
53 <text>下单时间：2020-10-22 14:32:42</text> 53 <text class="order-info-time">
54 </text> 54 <text>下单时间：2020-10-22 14:32:42</text>
55 <view class="order-info-hr"></view> 55 </text>
56 <view class="order-info-contact"> 56 <view class="order-info-hr"></view>
57 <image src="../../static/myorder-paying-contact.png"></image> 57 <view class="order-info-contact">
58 <text>联系客服</text> 58 <image src="../../static/myorder-paying-contact.png"></image>
59 </view> 59 <text>联系客服</text>
60 </view> 60 </view>
61 </view> 61 </view>
62 <view class="order-confim"> 62 </view>
63 <button class="b1">取消订单</button> 63 <view class="order-confim">
64 <button class="b2">立即支付</button> 64 <button class="b1">取消订单</button>
65 </view> 65 <button class="b2">立即支付</button>
66 </view> 66 </view>
67 </template> 67 </view>
68 68 </template>
69 <script> 69
70 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 70 <script>
71 export default { 71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 components: { 72 export default {
73 UniCountdown 73 components: {
74 }, 74 UniCountdown
75 data() { 75 },
76 return { 76 data() {
77 scrollHeight: false, 77 return {
78 } 78 scrollHeight: false,
79 }, 79 }
80 methods: { 80 },
81 81 methods: {
82 } 82
83 } 83 }
84 </script> 84 }
85 85 </script>
86 <style lang="scss" scoped> 86
87 .content{ 87 <style lang="scss" scoped>
88 display: flex; 88 .content{
89 flex-direction: column; 89 display: flex;
90 justify-content: center; 90 flex-direction: column;
91 align-items: center; 91 justify-content: center;
92 background-color: #f2f2f2; 92 align-items: center;
93 } 93 background-color: #f2f2f2;
94 94 }
95 95
96 .order { 96
97 min-height: 1196rpx; 97 .order {
98 margin-bottom: 112rpx; 98 min-height: 1196rpx;
99 background: #F2F2F2; 99 margin-bottom: 112rpx;
100 } 100 background: #F2F2F2;
101 .order-hr { 101 }
102 width: 100%; 102 .order-hr {
103 height: 1px; 103 width: 100%;
104 background-color: #E9E9E9; 104 height: 1px;
105 } 105 background-color: #E9E9E9;
106 .order-time { 106 }
107 width: 100%; 107 .order-time {
108 height: 140rpx; 108 width: 100%;
109 background-color: #fff; 109 height: 140rpx;
110 display: flex; 110 background-color: #fff;
111 justify-content: center; 111 display: flex;
112 text { 112 justify-content: center;
113 // font-family: PingFangSC-Regular; 113 text {
114 margin-top: 48rpx; 114 // font-family: PingFangSC-Regular;
115 font-size: 14px; 115 margin-top: 48rpx;
116 color: #333333; 116 font-size: 14px;
117 letter-spacing: -0.26px; 117 color: #333333;
118 } 118 letter-spacing: -0.26px;
119 .p2 { 119 }
120 // font-family: DINAlternate-Bold; 120 .p2 {
121 margin: 42rpx 20rpx 0 20rpx; 121 // font-family: DINAlternate-Bold;
122 font-size: 18px; 122 margin: 42rpx 20rpx 0 20rpx;
123 color: #EC5D3B; 123 font-size: 18px;
124 letter-spacing: -0.34px; 124 color: #EC5D3B;
125 } 125 letter-spacing: -0.34px;
126 } 126 }
127 127 }
128 .order-user { 128
129 width: 670rpx; 129 .order-user {
130 height: 228rpx; 130 width: 670rpx;
131 background: #FFFFFF; 131 height: 228rpx;
132 border-radius: 14rpx; 132 background: #FFFFFF;
133 margin: 0 auto; 133 border-radius: 14rpx;
134 margin-top: 20rpx; 134 margin: 0 auto;
135 margin-bottom: 20rpx; 135 margin-top: 20rpx;
136 .order-user-head { 136 margin-bottom: 20rpx;
137 display: flex; 137 .order-user-head {
138 height: 108rpx; 138 display: flex;
139 width: 100%; 139 height: 108rpx;
140 align-items: center; 140 width: 100%;
141 margin-left: 126rpx; 141 align-items: center;
142 .p1 { 142 margin-left: 126rpx;
143 // font-family: PingFangSC-Regular; 143 .p1 {
144 font-size: 14px; 144 // font-family: PingFangSC-Regular;
145 color: #333333; 145 font-size: 14px;
146 letter-spacing: -0.26px; 146 color: #333333;
147 margin-right: 20rpx; 147 letter-spacing: -0.26px;
148 } 148 margin-right: 20rpx;
149 .p2 { 149 }
150 // font-family: PingFangSC-Regular; 150 .p2 {
151 font-size: 14px; 151 // font-family: PingFangSC-Regular;
152 color: #999999; 152 font-size: 14px;
153 letter-spacing: -0.26px; 153 color: #999999;
154 } 154 letter-spacing: -0.26px;
155 } 155 }
156 .order-user-body { 156 }
157 display: flex; 157 .order-user-body {
158 width: 100%; 158 display: flex;
159 image{ 159 width: 100%;
160 width: 24px; 160 image{
161 height: 26px; 161 width: 24px;
162 margin: 12rpx 32rpx 0 40rpx; 162 height: 26px;
163 } 163 margin: 12rpx 32rpx 0 40rpx;
164 .p3 { 164 }
165 // font-family: PingFangSC-Semibold; 165 .p3 {
166 font-size: 14px; 166 // font-family: PingFangSC-Semibold;
167 color: #333333; 167 font-size: 14px;
168 letter-spacing: -0.26px; 168 color: #333333;
169 } 169 letter-spacing: -0.26px;
170 } 170 }
171 } 171 }
172 172 }
173 .order-info { 173
174 width: 670rpx; 174 .order-info {
175 background-color: #fff; 175 width: 670rpx;
176 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); 176 background-color: #fff;
177 border-radius: 16rpx; 177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 margin: 0 auto; 178 border-radius: 16rpx;
179 view{ 179 margin: 0 auto;
180 margin-left: 40rpx; 180 view{
181 } 181 margin-left: 40rpx;
182 text{ 182 }
183 font-size: 14px; 183 text{
184 } 184 font-size: 14px;
185 .order-info-head { 185 }
186 display: flex; 186 .order-info-head {
187 padding-top: 40rpx; 187 display: flex;
188 image{ 188 padding-top: 40rpx;
189 height: 188rpx; 189 image{
190 width: 188rpx; 190 height: 188rpx;
191 } 191 width: 188rpx;
192 .order-info-head-r{ 192 }
193 margin: 0; 193 .order-info-head-r{
194 width: 368rpx; 194 margin: 0;
195 margin-left: 24rpx; 195 width: 368rpx;
196 // margin-top: 40rpx; 196 margin-left: 24rpx;
197 text{ 197 // margin-top: 40rpx;
198 display: block; 198 text{
199 } 199 display: block;
200 // .arrow{ 200 }
201 // width: 0; 201 // .arrow{
202 // height: 0; 202 // width: 0;
203 // border-left: 5px transparent; 203 // height: 0;
204 // border-right: 5px transparent; 204 // border-left: 5px transparent;
205 // border-top: 5px #979797; 205 // border-right: 5px transparent;
206 // border-bottom: 0 transparent; 206 // border-top: 5px #979797;
207 // border-style: solid; 207 // border-bottom: 0 transparent;
208 // position: relative; 208 // border-style: solid;
209 // // transform: scaleY(-1); 209 // position: relative;
210 // } 210 // // transform: scaleY(-1);
211 // .arrow::after{ 211 // }
212 // content: ''; 212 // .arrow::after{
213 // position: absolute; 213 // content: '';
214 // top: -6.5px; 214 // position: absolute;
215 // left: -5px; 215 // top: -6.5px;
216 // border-left: 5px transparent; 216 // left: -5px;
217 // border-right: 5px transparent; 217 // border-left: 5px transparent;
218 // border-top: 5px #FFFFFF; 218 // border-right: 5px transparent;
219 // border-bottom: 0 transparent; 219 // border-top: 5px #FFFFFF;
220 // border-style: solid; 220 // border-bottom: 0 transparent;
221 // } 221 // border-style: solid;
222 .p1 { 222 // }
223 min-height: 40px; 223 .p1 {
224 // font-family: PingFangSC-Regular; 224 min-height: 40px;
225 font-size: 14px; 225 // font-family: PingFangSC-Regular;
226 color: #333333; 226 font-size: 14px;
227 letter-spacing: -0.26px; 227 color: #333333;
228 line-height: 18px; 228 letter-spacing: -0.26px;
229 // line-height: 20px; 229 line-height: 18px;
230 } 230 // line-height: 20px;
231 .p2 { 231 }
232 height: 34px; 232 .p2 {
233 padding: 1px 0 3px 0; 233 height: 34px;
234 // font-family: PingFangSC-Regular; 234 padding: 1px 0 3px 0;
235 font-size: 12px; 235 // font-family: PingFangSC-Regular;
236 color: #999999; 236 font-size: 12px;
237 letter-spacing: -0.23px; 237 color: #999999;
238 } 238 letter-spacing: -0.23px;
239 .p3 { 239 }
240 height: 20px; 240 .p3 {
241 // font-family: PingFangSC-Regular; 241 height: 20px;
242 font-size: 14px; 242 // font-family: PingFangSC-Regular;
243 color: #FF6B4A; 243 font-size: 14px;
244 letter-spacing: -0.26px; 244 color: #FF6B4A;
245 } 245 letter-spacing: -0.26px;
246 .p4{ 246 }
247 font-size: 12px; 247 .p4{
248 color: #999999; 248 font-size: 12px;
249 letter-spacing: -0.23px; 249 color: #999999;
250 margin-left: 10px; 250 letter-spacing: -0.23px;
251 } 251 margin-left: 10px;
252 } 252 }
253 253 }
254 } 254
255 // .order-info-goodsnum { 255 }
256 // display: flex; 256 // .order-info-goodsnum {
257 // align-items: center; 257 // display: flex;
258 // justify-content: flex-end; 258 // align-items: center;
259 // text { 259 // justify-content: flex-end;
260 // margin-right: 44rpx; 260 // text {
261 // // ont-family: PingFangSC-Regular; 261 // margin-right: 44rpx;
262 // font-size: 12px; 262 // // ont-family: PingFangSC-Regular;
263 // color: #999999; 263 // font-size: 12px;
264 // letter-spacing: -0.23px; 264 // color: #999999;
265 // } 265 // letter-spacing: -0.23px;
266 // } 266 // }
267 .order-info-freight { 267 // }
268 display: block; 268 .order-info-freight {
269 margin-left: 40rpx; 269 display: block;
270 margin-top: 22rpx; 270 margin-left: 40rpx;
271 .p1{ 271 margin-top: 22rpx;
272 // font-family: PingFangSC-Regular; 272 .p1{
273 font-size: 14px; 273 // font-family: PingFangSC-Regular;
274 color: #333333; 274 font-size: 14px;
275 letter-spacing: -0.26px; 275 color: #333333;
276 line-height: 18px; 276 letter-spacing: -0.26px;
277 margin-right: 24px; 277 line-height: 18px;
278 } 278 margin-right: 24px;
279 .p2 { 279 }
280 // font-family: PingFangSC-Regular; 280 .p2 {
281 font-size: 14px; 281 // font-family: PingFangSC-Regular;
282 color: #FF6B4A; 282 font-size: 14px;
283 letter-spacing: -0.26px; 283 color: #FF6B4A;
284 } 284 letter-spacing: -0.26px;
285 } 285 }
286 .order-info-discount { 286 }
287 display: block; 287 .order-info-discount {
288 margin-left: 40rpx; 288 display: block;
289 margin-top: 24rpx; 289 margin-left: 40rpx;
290 .p1 { 290 margin-top: 24rpx;
291 // font-family: PingFangSC-Regular; 291 .p1 {
292 font-size: 14px; 292 // font-family: PingFangSC-Regular;
293 color: #333333; 293 font-size: 14px;
294 letter-spacing: -0.26px; 294 color: #333333;
295 line-height: 18px; 295 letter-spacing: -0.26px;
296 margin-right: 24px; 296 line-height: 18px;
297 } 297 margin-right: 24px;
298 .p2 { 298 }
299 // font-family: PingFangSC-Regular; 299 .p2 {
300 font-size: 14px; 300 // font-family: PingFangSC-Regular;
301 color: #FF6B4A; 301 font-size: 14px;
302 letter-spacing: -0.26px; 302 color: #FF6B4A;
303 } 303 letter-spacing: -0.26px;
304 } 304 }
305 .order-info-price { 305 }
306 display: block; 306 .order-info-price {
307 margin-left: 40rpx; 307 display: block;
308 margin-top: 24rpx; 308 margin-left: 40rpx;
309 .p1 { 309 margin-top: 24rpx;
310 // font-family: PingFangSC-Semibold; 310 .p1 {
311 font-size: 14px; 311 // font-family: PingFangSC-Semibold;
312 color: #333333; 312 font-size: 14px;
313 letter-spacing: -0.26px; 313 color: #333333;
314 line-height: 18px; 314 letter-spacing: -0.26px;
315 margin-right: 24px; 315 line-height: 18px;
316 } 316 margin-right: 24px;
317 .p2 { 317 }
318 // font-family: PingFangSC-Semibold; 318 .p2 {
319 font-size: 14px; 319 // font-family: PingFangSC-Semibold;
320 color: #FF6B4A; 320 font-size: 14px;
321 letter-spacing: -0.26px; 321 color: #FF6B4A;
322 } 322 letter-spacing: -0.26px;
323 } 323 }
324 .order-info-num{ 324 }
325 display: block; 325 .order-info-num{
326 margin-left: 40rpx; 326 display: block;
327 margin-top: 44rpx; 327 margin-left: 40rpx;
328 text{ 328 margin-top: 44rpx;
329 // font-family: PingFangSC-Regular; 329 text{
330 font-size: 12px; 330 // font-family: PingFangSC-Regular;
331 color: #999999; 331 font-size: 12px;
332 letter-spacing: -0.23px; 332 color: #999999;
333 } 333 letter-spacing: -0.23px;
334 } 334 }
335 .order-info-time { 335 }
336 display: block; 336 .order-info-time {
337 margin: 8rpx 0 48rpx 40rpx; 337 display: block;
338 text{ 338 margin: 8rpx 0 48rpx 40rpx;
339 // font-family: PingFangSC-Regular; 339 text{
340 font-size: 12px; 340 // font-family: PingFangSC-Regular;
341 color: #999999; 341 font-size: 12px;
342 letter-spacing: -0.23px; 342 color: #999999;
343 } 343 letter-spacing: -0.23px;
344 } 344 }
345 .order-info-hr{ 345 }
346 width: 520rpx; 346 .order-info-hr{
347 height: 1px; 347 width: 520rpx;
348 background-color: #E9E9E9; 348 height: 1px;
349 margin-bottom: 20rpx; 349 background-color: #E9E9E9;
350 } 350 margin-bottom: 20rpx;
351 .order-info-contact { 351 }
352 display: flex; 352 .order-info-contact {
353 padding-bottom: 28rpx; 353 display: flex;
354 image{ 354 padding-bottom: 28rpx;
355 width: 19px; 355 image{
356 height: 16px; 356 width: 19px;
357 } 357 height: 16px;
358 text { 358 }
359 // font-family: PingFangSC-Regular; 359 text {
360 margin-left: 20rpx; 360 // font-family: PingFangSC-Regular;
361 font-size: 14px; 361 margin-left: 20rpx;
362 color: #333333; 362 font-size: 14px;
363 letter-spacing: -0.26px; 363 color: #333333;
364 line-height: 18px; 364 letter-spacing: -0.26px;
365 } 365 line-height: 18px;
366 } 366 }
367 } 367 }
368 368 }
369 .order-confim { 369
370 display: flex; 370 .order-confim {
371 align-items: center; 371 display: flex;
372 z-index: 999; 372 align-items: center;
373 width: 100%; 373 z-index: 999;
374 height: 112rpx; 374 width: 100%;
375 position: fixed; 375 height: 112rpx;
376 bottom: 0; 376 position: fixed;
377 background: #FFFFFF; 377 bottom: 0;
378 button { 378 background: #FFFFFF;
379 width: 204rpx; 379 button {
380 height: 80rpx; 380 width: 204rpx;
381 border: 1px solid #FF6B4A; 381 height: 80rpx;
382 border-radius: 40rpx; 382 border: 1px solid #FF6B4A;
383 font-size: 32rpx; 383 border-radius: 40rpx;
384 letter-spacing: -0.3px; 384 font-size: 32rpx;
385 margin-right: 0; 385 letter-spacing: -0.3px;
386 } 386 margin-right: 0;
387 .b1 { 387 }
388 // font-family: PingFangSC-Regular; 388 .b1 {
389 color: #FF6B4A; 389 // font-family: PingFangSC-Regular;
390 390 color: #FF6B4A;
391 } 391
392 .b2 { 392 }
393 // font-family: PingFangSC-Regular; 393 .b2 {
394 background-color: #FF6B4A; 394 // font-family: PingFangSC-Regular;
395 color: #FFFFFF; 395 background-color: #FF6B4A;
396 margin: 0 26rpx 0 20rpx; 396 color: #FFFFFF;
397 } 397 margin: 0 26rpx 0 20rpx;
398 } 398 }
399 399 }
400 </style> 400
401 401 </style>
402
src/pages/user/user.vue
Diff comments   View file @7d2bdf2
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="content"> 3 <view class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> 6 <image src="../../static/img/detail/d10.png" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{userName}}</text> 8 <text class="userName">{{userName}}</text>
9 <text class="nickName">用户名：骆驼不死的祥子</text> 9 <text class="nickName">用户名：骆驼不死的祥子</text>
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="service"> 12 <view class="service">
13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 13 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
14 </view> 14 </view>
15 </view> 15 </view>
16 <view class="myOrder"> 16 <view class="myOrder">
17 <view class="orderHeader"> 17 <view class="orderHeader">
18 <text>全部订单</text> 18 <text>全部订单</text>
19 <view class="btn" @click="toMyOrder"> 19 <view class="btn" @click="toMyOrder">
20 全部 20 全部
21 <image src="../../static/right.png" mode="aspectFill"></image> 21 <image src="../../static/right.png" mode="aspectFill"></image>
22 </view> 22 </view>
23 </view> 23 </view>
24 <view class="orderBody"> 24 <view class="orderBody">
25 <view class="item waitPay" @click="toMyOrderPaying"> 25 <view class="item waitPay" @click="toMyOrderPaying">
26 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 26 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
27 <text>待付款</text> 27 <text>待付款</text>
28 </view> 28 </view>
29 <view class="item waitDeliver" @click="toPredelivery" > 29 <view class="item waitDeliver" @click="toPredelivery" >
30 <image src="../../static/waitPay.png" mode="aspectFill"></image> 30 <image src="../../static/waitPay.png" mode="aspectFill"></image>
31 <text>待发货</text> 31 <text>待发货</text>
32 </view> 32 </view>
33 <view class="item waitReceive" @click="torefunProgress"> 33 <view class="item waitReceive" @click="torefunProgress">
34 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 34 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
35 <text>待收货</text> 35 <text>待收货</text>
36 </view> 36 </view>
37 <view class="item service" @click="torefundment"> 37 <view class="item service" @click="torefundment">
38 <image src="../../static/service.png" mode="aspectFill"></image> 38 <image src="../../static/service.png" mode="aspectFill"></image>
39 <text>退换/售后</text> 39 <text>退换/售后</text>
40 </view> 40 </view>
41 </view> 41 </view>
42 </view> 42 </view>
43 <view class="recommend"> 43 <view class="recommend">
44 <view class="title"> 44 <view class="title">
45 <view class="line"></view> 45 <view class="line"></view>
46 <view class="text">精选推荐</view> 46 <view class="text">精选推荐</view>
47 <view class="line"></view> 47 <view class="line"></view>
48 </view> 48 </view>
49 <!-- 商品列表 --> 49 <!-- 商品列表 -->
50 <view class="goods-list"> 50 <view class="goods-list">
51 <view class="product-list"> 51 <view class="product-list">
52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 52 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
53 <Card :goods = "goods"></Card> 53 <Card :goods = "goods"></Card>
54 </view> 54 </view>
55 </view> 55 </view>
56 <view class="loading-text">{{loadingText}}</view> 56 <view class="loading-text">{{loadingText}}</view>
57 </view> 57 </view>
58 </view> 58 </view>
59 </view> 59 </view>
60 60
61 </view> 61 </view>
62 </template> 62 </template>
63 63
64 <script> 64 <script>
65 import Card from "@/components/CommodityCard/CommodityCard.vue"; 65 import Card from "@/components/CommodityCard/CommodityCard.vue";
66 import store from '@/store';
66 import store from '@/store'; 67 export default {
67 export default { 68 components: {
68 components: { 69 'Card':Card
69 'Card':Card 70 },
70 }, 71 data() {
71 data() { 72 return {
72 return { 73
73 74 //商品数据
74 //商品数据 75 goodsList:[
75 goodsList:[ 76 { goods_id: 0, img: "/static/img/goods/p2.jpg", name: '1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
76 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 77 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
77 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 78 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
78 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 79 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
79 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 80 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
80 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 81 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
81 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 82 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
82 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 83 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
83 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 84 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
84 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
85 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 86 ],
86 ], 87 headerphoto:'',
87 headerphoto:'', 88 userName:'Adam'
88 userName:'Adam' 89 }
89 } 90 },
90 }, 91 onLoad: function() {
91 onLoad: function() { 92 store.dispatch('userRecommand/getRecommandList', {
93 uid: 2,
94 });
95 },
96 computed: {
97 userRecommandList() {
98 console.log('recommandList', this.$store.state.userRecommand.recommandList);
99 return this.$store.state.userRecommand.recommandList;
100 }
92 store.dispatch('userRecommand/getRecommandList', { 101 },
93 uid: 2, 102 methods: {
94 }); 103 toMyOrder(){
95 }, 104 uni.navigateTo({
96 computed: { 105 url: '../myOrder/myOrder?current=0',
97 userRecommandList() { 106 success: res => {},
98 console.log('recommandList', this.$store.state.userRecommand.recommandList); 107 fail: () => {},
99 return this.$store.state.userRecommand.recommandList; 108 complete: () => {}
100 } 109 });
101 }, 110 },
102 methods: { 111 toPredelivery(){
103 toMyOrder(){ 112 uni.navigateTo({
104 uni.navigateTo({ 113 url: '../myOrder/myOrder?current=2',
105 url: '../myOrder/myOrder', 114 success: res => {},
106 success: res => {}, 115 fail: () => {},
107 fail: () => {}, 116 complete: () => {}
108 complete: () => {} 117 });
109 }); 118 },
110 }, 119 toMyOrderPaying(){
111 toPredelivery(){ 120 uni.navigateTo({
112 uni.navigateTo({ 121 url: '../myOrder/myOrder?current=1',
113 url: '../predelivery/predelivery', 122 success: res => {},
114 success: res => {}, 123 fail: () => {},
115 fail: () => {}, 124 complete: () => {}
116 complete: () => {} 125 });
117 }); 126 },
118 }, 127 torefundment(){
119 toMyOrderPaying(){ 128 uni.navigateTo({
120 uni.navigateTo({ 129 url:'../refundment/refundment',
121 url: '../myorderPaying/myorderPaying', 130 })
122 success: res => {}, 131 },
123 fail: () => {}, 132 torefunProgress(){
124 complete: () => {} 133 uni.navigateTo({
125 }); 134 url:'../refundProgress/refundProgress'
126 }, 135 })
127 torefundment(){ 136 }
128 uni.navigateTo({ 137 }
129 url:'../refundment/refundment', 138 }
130 }) 139 </script>
131 }, 140
132 torefunProgress(){ 141 <style lang="scss">
133 uni.navigateTo({ 142 .warp{
134 url:'../refundProgress/refundProgress' 143 font-size: 24rpx;
135 }) 144 background-color: #f2f2f2;
136 } 145 height: 100vh;
137 } 146 }
138 } 147 .content {
139 </script> 148 display: flex;
140 149 flex-direction: column;
141 <style lang="scss"> 150 align-items: center;
142 .warp{ 151 justify-content: center;
143 font-size: 24rpx; 152 background-color: #F2F2F2;
144 background-color: #f2f2f2; 153 }
145 height: 100vh; 154 .userInfo{
146 } 155 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
147 .content { 156 width: 100%;
148 display: flex; 157 height: 240rpx;
149 flex-direction: column; 158 color: #FFFFFF;
150 align-items: center; 159 padding: 60rpx 82rpx 80rpx 44rpx;
151 justify-content: center; 160 box-sizing: border-box;
152 background-color: #F2F2F2; 161 display: flex;
153 } 162 flex-direction: row;
154 .userInfo{ 163 justify-content: space-between;
155 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 164 align-items: flex-start;
156 width: 100%; 165 .info{
157 height: 240rpx; 166 display: flex;
158 color: #FFFFFF; 167 flex-direction: row;
159 padding: 60rpx 82rpx 80rpx 44rpx; 168 justify-content: space-between;
160 box-sizing: border-box; 169 align-items: center;
161 display: flex; 170 image{
162 flex-direction: row; 171 border-radius: 50rpx;
163 justify-content: space-between; 172 height: 100rpx ;
164 align-items: flex-start; 173 width: 100rpx;
165 .info{ 174 margin-right: 40rpx;
166 display: flex; 175 }
167 flex-direction: row; 176 .infoText{
168 justify-content: space-between; 177 display: flex;
169 align-items: center; 178 flex-direction: column;
170 image{ 179 justify-content: space-between;
171 border-radius: 50rpx; 180 align-items: flex-scetart;
172 height: 100rpx ; 181 .userName{
173 width: 100rpx; 182 font-size: 18px;
174 margin-right: 40rpx; 183 color: #FFFFFF;
175 } 184 margin-bottom: 8rpx;
176 .infoText{ 185 }
177 display: flex; 186 .nickName{
178 flex-direction: column; 187 font-size: 12px;
179 justify-content: space-between; 188 color: #FFFFFF;
180 align-items: flex-scetart; 189 }
181 .userName{ 190 }
182 font-size: 18px; 191 }
183 color: #FFFFFF; 192 .service{
184 margin-bottom: 8rpx; 193 image{
185 } 194 height: 36rpx;
186 .nickName{ 195 width: 36rpx;
187 font-size: 12px; 196 }
188 color: #FFFFFF; 197 }
189 } 198 }
190 } 199 .myOrder{
191 } 200 width: 100%;
192 .service{ 201 height: 296rpx;
193 image{ 202 margin-top: 20rpx;
194 height: 36rpx; 203 margin-bottom: 20rpx;
195 width: 36rpx; 204 padding: 0 40rpx;
196 } 205 box-sizing: border-box;
197 } 206 background: #FFFFFF;
198 } 207 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
199 .myOrder{ 208 border-radius: 6px;
200 width: 100%; 209 border-radius: 6px;
201 height: 296rpx; 210 display: flex;
202 margin-top: 20rpx; 211 flex-direction: column;
203 margin-bottom: 20rpx; 212 justify-content: space-around;
204 padding: 0 40rpx; 213 align-items: center;
205 box-sizing: border-box; 214 .orderHeader{
206 background: #FFFFFF; 215 width: 100%;
207 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 216 height: 100rpx;
208 border-radius: 6px; 217 display: flex;
209 border-radius: 6px; 218 flex-direction: row;
210 display: flex; 219 justify-content: space-between;
211 flex-direction: column; 220 align-items: center;
212 justify-content: space-around; 221 border-bottom: 1px solid #E9E9E9;;
213 align-items: center; 222 font-weight: bold;
214 .orderHeader{ 223 font-size: 18px;
215 width: 100%; 224 color: #333333;
216 height: 100rpx; 225 .btn{
217 display: flex; 226 font-size: 12px;
218 flex-direction: row; 227 color: #999999;
219 justify-content: space-between; 228 image{
220 align-items: center; 229 margin-left: 20rpx;
221 border-bottom: 1px solid #E9E9E9;; 230 height: 16rpx;
222 font-weight: bold; 231 width: 8rpx;
223 font-size: 18px; 232 }
224 color: #333333; 233 }
225 .btn{ 234 }
226 font-size: 12px; 235 .orderBody{
227 color: #999999; 236 width: 100%;
228 image{ 237 display: flex;
229 margin-left: 20rpx; 238 flex-direction: row;
230 height: 16rpx; 239 justify-content: space-between;
231 width: 8rpx; 240 align-items: center;
232 } 241 .item{
233 } 242 display: flex;
234 } 243 flex-direction: column;
235 .orderBody{ 244 align-items: center;
236 width: 100%; 245 image{
237 display: flex; 246 width: 46rpx;
238 flex-direction: row; 247 height: 46rpx;
239 justify-content: space-between; 248 }
240 align-items: center; 249 text{
241 .item{ 250 margin-top: 24rpx;
242 display: flex; 251 font-size: 12px;
243 flex-direction: column; 252 color: #333333;
244 align-items: center; 253 }
245 image{ 254 }
246 width: 46rpx; 255 }
247 height: 46rpx; 256 }
248 } 257 .recommend{
249 text{ 258 background: #FFFFFF;
250 margin-top: 24rpx; 259 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
251 font-size: 12px; 260 border-radius: 6px;
252 color: #333333; 261 border-radius: 6px;
253 } 262 width: 100%;
254 } 263 .title{
255 } 264 display: flex;
256 } 265 flex-direction: row;
257 .recommend{ 266 align-items: center;
258 background: #FFFFFF; 267 justify-content: space-between;
259 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 268 padding: 20rpx 40rpx;
260 border-radius: 6px; 269 .line{
261 border-radius: 6px; 270 width: 264rpx;
262 width: 100%; 271 height: 1rpx;
263 .title{ 272 border-bottom: 1px solid #EAEAEA;
264 display: flex; 273 }
265 flex-direction: row; 274 .text{
266 align-items: center; 275 font-family: PingFangSC-Medium;
267 justify-content: space-between; 276 font-size: 14px;
268 padding: 20rpx 40rpx; 277 color: #333333;
269 .line{ 278 letter-spacing: -0.26px;
270 width: 264rpx; 279 text-align: justify;
271 height: 1rpx; 280 line-height: 24px;
272 border-bottom: 1px solid #EAEAEA; 281 }
273 } 282 }
274 .text{ 283 .goods-list{
275 font-family: PingFangSC-Medium; 284 .loading-text{
276 font-size: 14px; 285 width: 100%;
277 color: #333333; 286 display: flex;
278 letter-spacing: -0.26px; 287 justify-content: center;
279 text-align: justify; 288 align-items: center;
280 line-height: 24px; 289 height: 30px;
281 } 290 color: #979797;
282 } 291 font-size: 12px;
283 .goods-list{ 292 }
284 .loading-text{ 293 .product-list{
285 width: 100%; 294 width: 92%;
286 display: flex; 295 padding: 0 4% 3vw 4%;
287 justify-content: center; 296 display: flex;
288 align-items: center; 297 justify-content: space-between;
289 height: 30px; 298 flex-wrap: wrap;
290 color: #979797; 299 .product{
291 font-size: 12px; 300 width: 48%;
292 } 301 margin: 0 0 20rpx 0;
293 .product-list{ 302 background: #FFFFFF;
294 width: 92%; 303 border: 1px solid #F2F2F2;
295 padding: 0 4% 3vw 4%; 304 }
296 display: flex; 305 }
297 justify-content: space-between; 306 }
298 flex-wrap: wrap; 307 }
299 .product{ 308
300 width: 48%; 309 </style>
301 margin: 0 0 20rpx 0; 310
src/store/modules/cart.js
Diff comments   View file @7d2bdf2
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const { cartList } = urlAlias;
5
6 const state = {
7 cartList: [],
8 };
9
10 const mutations = {
11 INIT: (state, cartList) => {
12 state.cartList = cartList;
13 },
14 };
15
16
17
18 const actions = {
19
20 getCartList({ commit }, param) {
21 request({
22 url: cartList,
23 success: (res) => {
24
25 commit('INIT', res.data.data)
26 },
27 fail: (res) => {
28 console.log("fail status === > ", res);
29 },
30 complete: (res) => {
31 console.log("complete status === > ", res);
32 },
33 })
34 }
35
36 }
37
38 export default {
39 namespaced: true,
40 state,
41 mutations,
42 actions,
43 };
src/store/modules/userRecommand.js
Diff comments   View file @7d2bdf2
File was created 1 import urlAlias from '../url';
2 import request from '../request';
3
4 const {
5 recommandList
6 } = urlAlias;
7
8 const state = {
9 recommandList: [],
10 };
11
12 const mutations = {
13 INIT: (state, list) => {
14 state.recommandList = list;
15 },
16 };
17
18 const actions = {
19 getRecommandList({ commit }, param) {
20 request({
21 url: recommandList,
22 success: (res) => {
23 console.log(res.data)
24 commit('INIT', res.data.data)
25 },
26 fail: (res) => {
27 console.log("fail status === > ", res);
28 },
29 complete: (res) => {
30 console.log("complete status === > ", res);
31 },
32 })
33 },
34 };
35
36 export default {
37 namespaced: true,
38 state,
39 mutations,
40 actions,
41 };
1 const urlAlias = { 1 const urlAlias = {
2 // <<<<<<< HEAD
3 // 首页
4 shopList: '/app/prod/list', // 获取首页商品列表
5
6
7
8 // 我的订单
9 orderList: '/app/order/list', // 获取订单列表
10
11
12 // 购物车
13 cartList: '/app/cart/list', // 获取购物车列表
14
15 // 我的
16 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
17 // =======
18 // 获取首页商品列表
19 shopList: '/app/prod/list',
20
2 // 首页 21 // 获取首页商品列表
3 shopList: '/app/prod/list', // 获取首页商品列表
4
5
6 22 category: '/app/prod/category',
23 // >>>>>>> 09a4a9a0aa68e86f0c0a8b5b85adc0cca5b04c66
7 // 我的订单 24 }