Adam / gulu-vue

Download as
Browse Code »

Commit f72f302c7a1e081041fbebcbfc6184624089581e

Authored by 范牧
2 parents 55ddb3f8a6 7d2bdf29ee
Exists in master

合并冲突

Showing 10 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @f72f302
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> 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 goodType:String, 30 goodType:String,
31 } 31 }
32 32
33 }, 33 },
34 created() { 34 created() {
35 console.log(this.goods) 35 console.log(this.goods)
36 }, 36 },
37 data() { 37 data() {
38 return { 38 return {
39 39
40 }; 40 };
41 }, 41 },
42 methods:{ 42 methods:{
43 toGoods(id,type){ 43 toGoods(id,type){
44 // console.log('toGoods =====> id======>', id) 44 // console.log('toGoods =====> id======>', id)
45 // console.log(type) 45 // console.log(type)
46 switch(type){ 46 switch(type){
47 case 1: 47 case 1:
48 uni.navigateTo({ 48 uni.navigateTo({
49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
50 success: res => {}, 50 success: res => {},
51 fail: () => {}, 51 fail: () => {},
52 complete: () => {} 52 complete: () => {}
53 }); 53 });
54 break; 54 break;
55 case 2: 55 case 2:
56 uni.navigateTo({ 56 uni.navigateTo({
57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
58 success: res => {}, 58 success: res => {},
59 fail: () => {}, 59 fail: () => {},
60 complete: () => {} 60 complete: () => {}
61 }); 61 });
62 break; 62 break;
63 case 3: 63 case 3:
64 uni.navigateTo({ 64 uni.navigateTo({
65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
66 success: res => {}, 66 success: res => {},
67 fail: () => {}, 67 fail: () => {},
68 complete: () => {} 68 complete: () => {}
69 }); 69 });
70 break; 70 break;
71 case 4: 71 case 4:
72 uni.navigateTo({ 72 uni.navigateTo({
73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
74 success: res => {}, 74 success: res => {},
75 fail: () => {}, 75 fail: () => {},
76 complete: () => {} 76 complete: () => {}
77 }); 77 });
78 break; 78 break;
79 default : 79 default :
80 break 80 break
81 } 81 }
82 } 82 }
83 } 83 }
84 } 84 }
85 </script> 85 </script>
86 86
87 <style lang="scss"> 87 <style lang="scss">
88 image{ 88 image{
89 width: 100%; 89 width: 100%;
90 height: 120rpx; 90 height: 120rpx;
91 } 91 }
92 .name{ 92 .name{
93 width: 92%; 93 width: 92%;
94 height: 54rpx; 94 height: 54rpx;
95 padding: 5px 4%; 95 padding: 5px 4%;
96 display: -webkit-box; 96 display: -webkit-box;
97 -webkit-box-orient: vertical; 97 -webkit-box-orient: vertical;
98 -webkit-line-clamp: 2; 98 -webkit-line-clamp: 2;
99 text-align: justify; 99 text-align: justify;
100 overflow: hidden; 100 overflow: hidden;
101 font-size: 24rpx; 101 font-size: 24rpx;
102 color: #333333; 102 color: #333333;
103 } 103 }
104 .info{ 104 .info{
105 display: flex; 105 display: flex;
106 justify-content: space-between; 106 justify-content: space-between;
107 align-items: center; 107 align-items: center;
108 width: 92%; 108 width: 92%;
109 padding: 5px 4% 5px 4%; 109 padding: 5px 4% 5px 4%;
110 .priceBox{ 110 .priceBox{
111 display: flex; 111 display: flex;
112 justify-content: space-between; 112 justify-content: space-between;
113 align-items: center; 113 align-items: center;
114 .price{ 114 .price{
115 color: #EB5D3B; 115 color: #EB5D3B;
116 font-size: 28rpx; 116 font-size: 28rpx;
117 font-weight: 600; 117 font-weight: 600;
118 margin-right: 10rpx; 118 margin-right: 10rpx;
119 } 119 }
120 .originCost{ 120 .originCost{
121 text-decoration:line-through; 121 text-decoration:line-through;
122 color: #999999; 122 color: #999999;
123 font-size: 20rpx; 123 font-size: 20rpx;
124 } 124 }
125 125
126 } 126 }
127 .slogan{ 127 .slogan{
128 color: #999999; 128 color: #999999;
129 font-size: 20rpx; 129 font-size: 20rpx;
130 } 130 }
131 } 131 }
132 </style> 132 </style>
133
1 {
2 "pages": [
3 {
4 "path": "pages/index/index",
5 "style": {
6 "navigationBarTitleText": "商城一览"
7 }
8 },
9 {
10 "path" : "pages/myOrder/myOrder",
11 "style" : {
12 "navigationBarTitleText": "我的订单"}
13 },
14 {
15 "path": "pages/frameDetail/frameDetail",
16 "style": {
17 "navigationBarTitleText": "产品详情"
18 }
19 },
20 {
21 "path": "pages/lensDetails/lensDetails",
22 "style": {
23 "navigationBarTitleText": "产品详情"
24 }
25 },
26 {
27 "path": "pages/cart/cart",
28 "style": {
29 "navigationBarTitleText": "购物车"
30 }
31 },
32 {
33 "path" : "pages/purchaseLenses/purchaseLenses",
34 "style" : {
35 "navigationBarTitleText": "产品选购"
36 }
37 },
38 {
39 "path" : "pages/refundProgress/refundProgress",
40 "style": {
41 "navigationBarTitleText": "申请退款"
42 }
43 },
44 {
45 "path": "pages/addAddress/addAddress",
46 "style": {
47 "navigationBarTitleText": "新增地址"
48 }
49 },
50 {
51 "path" : "pages/confirmOrder/confirmOrder",
52 "style" : {
53 "navigationBarTitleText": "确认订单"
54 }
55 },
56 {
57 "path": "pages/user/user",
58 "style": {
59 "navigationBarTitleText": "我的"
60 }
61 },
62 {
63 "path": "pages/refundment/refundWays"
64 },
65 {
66 "path": "pages/refundment/refundment"
67 },
68 {
69 "path": "pages/predelivery/predelivery"
70 },
71 {
72 "path": "pages/customerService/customerService",
73 "style":{
74 "navigationBarTitleText" : "在线客服"
75 }
76 },
77 {
78 "path": "pages/myOrderPaying/myOrderPaying",
79 "style":{
80 "navigationBarTitleText" : "我的订单"
81 }
82 },
83 {
84 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
85 "style":{
86 "navigationBarTitleText" : "镜片名称名称"
87 }
88 },
89 {
90 "path" : "pages/detailStandard/detailStandard_sun",
91 "style": {
92 "navigationBarTitleText": "太阳镜选购页"
93 }
94 },
95 {
96 "path" : "pages/detailStandard/detailStandard_k",
97 "style": {
98 "navigationBarTitleText": "镜框选购页"
99 }
100 }
101
102 ],
103 "globalStyle": {
104 "navigationBarTextStyle": "black",
105 "navigationBarTitleText": "uni-app",
106 "navigationBarBackgroundColor": "#F8F8F8",
107 "backgroundColor": "#F8F8F8"
108 },
109 "tabBar": {
110 "color": "#C0C4CC",
111 "selectedColor": "#fa436a",
112 "borderStyle": "black",
113 "backgroundColor": "#ffffff",
114 "list": [{
115 "pagePath": "pages/index/index",
116 "iconPath": "static/tab-home.png",
117 "selectedIconPath": "static/tab-home-current.png",
118 "text": "首页"
119 },
120 {
121 "pagePath": "pages/cart/cart",
122 "iconPath": "static/tab-cart.png",
123 "selectedIconPath": "static/tab-cart-current.png",
124 "text": "购物车"
125 },
126 {
127 "pagePath": "pages/user/user",
128 "iconPath": "static/tab-my.png",
129 "selectedIconPath": "static/tab-my-current.png",
130 "text": "我的"
131 }
132 ]
133 },
134 "condition" : { //模式配置，仅开发期间生效
135 "current": 0, //当前激活的模式(list 的索引项)
136 "list": [
137 {
138 "name": "", //模式名称
139 "path": "", //启动页面，必选
140 "query": "" //启动参数，在页面的onLoad函数里面得到
141 }
142 ]
143 }
144 }
1 {
2 "pages" : [
3 {
src/pages/cart/cart.vue
Diff comments   View file @f72f302
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 @f72f302
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 @f72f302
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 @f72f302
1 <template> 1 <template>
2 2
3 <view class="content"> 3 <view class="content">
4 <view class="order-hr"></view> 4 <view class="order-hr"></view>
5 <view class="order-time"> 5 <view class="order-time">
6 <text>请在</text> 6 <text>请在</text>
7 <!-- <text class="p2"></text> --> 7 <!-- <text class="p2"></text> -->
8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 8 <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 9 :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
10 <text>内完成付款</text> 10 <text>内完成付款</text>
11 </view> 11 </view>
12 <view class="order"> 12 <view class="order">
13 <view class="order-user"> 13 <view class="order-user">
14 <view class="order-user-head"> 14 <view class="order-user-head">
15 <text class="p1">钱大大</text> 15 <text class="p1">钱大大</text>
16 <text class="p2">18823749843</text> 16 <text class="p2">18823749843</text>
17 </view> 17 </view>
18 <view class="order-user-body"> 18 <view class="order-user-body">
19 <image src="../../static/myorder-paying-location.png"></image> 19 <image src="../../static/myorder-paying-location.png"></image>
20 <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> 20 <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="order-info"> 23 <view class="order-info">
24 <view class="order-info-head"> 24 <view class="order-info-head">
25 <image src="../../static/myorder-paying-pic.png"></image> 25 <image src="../../static/myorder-paying-pic.png"></image>
26 <view class="order-info-head-r"> 26 <view class="order-info-head-r">
27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> 27 <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
28 <view class="p2" style="margin: 0;"> 28 <view class="p2" style="margin: 0;">
29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 29 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
30 <!-- <view class="arrow"></view> --> 30 <!-- <view class="arrow"></view> -->
31 </view> 31 </view>
32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text> 32 <text class="p3"><span>￥180</span><span class="p4">X1</span></text>
33 </view> 33 </view>
34 </view> 34 </view>
35 <!-- <view class="order-info-goodsnum"> 35 <!-- <view class="order-info-goodsnum">
36 <text>X1</text> 36 <text>X1</text>
37 </view> --> 37 </view> -->
38 <text class="order-info-freight"> 38 <text class="order-info-freight">
39 <text class="p1">运费</text> 39 <text class="p1">运费</text>
40 <text class="p2">0.00</text> 40 <text class="p2">0.00</text>
41 </text> 41 </text>
42 <text class="order-info-discount"> 42 <text class="order-info-discount">
43 <text class="p1">优惠</text> 43 <text class="p1">优惠</text>
44 <text class="p2">-￥70.00</text> 44 <text class="p2">-￥70.00</text>
45 </text> 45 </text>
46 <text class="order-info-price"> 46 <text class="order-info-price">
47 <text class="p1">实付</text> 47 <text class="p1">实付</text>
48 <text class="p2">￥110</text> 48 <text class="p2">￥110</text>
49 </text> 49 </text>
50 <text class="order-info-num"> 50 <text class="order-info-num">
51 <text>订单号：203486795859605849</text> 51 <text>订单号：203486795859605849</text>
52 </text> 52 </text>
53 <text class="order-info-time"> 53 <text class="order-info-time">
54 <text>下单时间：2020-10-22 14:32:42</text> 54 <text>下单时间：2020-10-22 14:32:42</text>
55 </text> 55 </text>
56 <view class="order-info-hr"></view> 56 <view class="order-info-hr"></view>
57 <view class="order-info-contact"> 57 <view class="order-info-contact">
58 <image src="../../static/myorder-paying-contact.png"></image> 58 <image src="../../static/myorder-paying-contact.png"></image>
59 <text>联系客服</text> 59 <text>联系客服</text>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view class="order-confim"> 63 <view class="order-confim">
64 <button class="b1">取消订单</button> 64 <button class="b1">取消订单</button>
65 <button class="b2">立即支付</button> 65 <button class="b2">立即支付</button>
66 </view> 66 </view>
67 </view> 67 </view>
68 </template> 68 </template>
69 69
70 <script> 70 <script>
71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 71 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
72 export default { 72 export default {
73 components: { 73 components: {
74 UniCountdown 74 UniCountdown
75 }, 75 },
76 data() { 76 data() {
77 return { 77 return {
78 scrollHeight: false, 78 scrollHeight: false,
79 } 79 }
80 }, 80 },
81 methods: { 81 methods: {
82 82
83 } 83 }
84 } 84 }
85 </script> 85 </script>
86 86
87 <style lang="scss" scoped> 87 <style lang="scss" scoped>
88 .content{ 88 .content{
89 display: flex; 89 display: flex;
90 flex-direction: column; 90 flex-direction: column;
91 justify-content: center; 91 justify-content: center;
92 align-items: center; 92 align-items: center;
93 background-color: #f2f2f2; 93 background-color: #f2f2f2;
94 } 94 }
95 95
96 96
97 .order { 97 .order {
98 min-height: 1196rpx; 98 min-height: 1196rpx;
99 margin-bottom: 112rpx; 99 margin-bottom: 112rpx;
100 background: #F2F2F2; 100 background: #F2F2F2;
101 } 101 }
102 .order-hr { 102 .order-hr {
103 width: 100%; 103 width: 100%;
104 height: 1px; 104 height: 1px;
105 background-color: #E9E9E9; 105 background-color: #E9E9E9;
106 } 106 }
107 .order-time { 107 .order-time {
108 width: 100%; 108 width: 100%;
109 height: 140rpx; 109 height: 140rpx;
110 background-color: #fff; 110 background-color: #fff;
111 display: flex; 111 display: flex;
112 justify-content: center; 112 justify-content: center;
113 text { 113 text {
114 // font-family: PingFangSC-Regular; 114 // font-family: PingFangSC-Regular;
115 margin-top: 48rpx; 115 margin-top: 48rpx;
116 font-size: 14px; 116 font-size: 14px;
117 color: #333333; 117 color: #333333;
118 letter-spacing: -0.26px; 118 letter-spacing: -0.26px;
119 } 119 }
120 .p2 { 120 .p2 {
121 // font-family: DINAlternate-Bold; 121 // font-family: DINAlternate-Bold;
122 margin: 42rpx 20rpx 0 20rpx; 122 margin: 42rpx 20rpx 0 20rpx;
123 font-size: 18px; 123 font-size: 18px;
124 color: #EC5D3B; 124 color: #EC5D3B;
125 letter-spacing: -0.34px; 125 letter-spacing: -0.34px;
126 } 126 }
127 } 127 }
128 128
129 .order-user { 129 .order-user {
130 width: 670rpx; 130 width: 670rpx;
131 height: 228rpx; 131 height: 228rpx;
132 background: #FFFFFF; 132 background: #FFFFFF;
133 border-radius: 14rpx; 133 border-radius: 14rpx;
134 margin: 0 auto; 134 margin: 0 auto;
135 margin-top: 20rpx; 135 margin-top: 20rpx;
136 margin-bottom: 20rpx; 136 margin-bottom: 20rpx;
137 .order-user-head { 137 .order-user-head {
138 display: flex; 138 display: flex;
139 height: 108rpx; 139 height: 108rpx;
140 width: 100%; 140 width: 100%;
141 align-items: center; 141 align-items: center;
142 margin-left: 126rpx; 142 margin-left: 126rpx;
143 .p1 { 143 .p1 {
144 // font-family: PingFangSC-Regular; 144 // font-family: PingFangSC-Regular;
145 font-size: 14px; 145 font-size: 14px;
146 color: #333333; 146 color: #333333;
147 letter-spacing: -0.26px; 147 letter-spacing: -0.26px;
148 margin-right: 20rpx; 148 margin-right: 20rpx;
149 } 149 }
150 .p2 { 150 .p2 {
151 // font-family: PingFangSC-Regular; 151 // font-family: PingFangSC-Regular;
152 font-size: 14px; 152 font-size: 14px;
153 color: #999999; 153 color: #999999;
154 letter-spacing: -0.26px; 154 letter-spacing: -0.26px;
155 } 155 }
156 } 156 }
157 .order-user-body { 157 .order-user-body {
158 display: flex; 158 display: flex;
159 width: 100%; 159 width: 100%;
160 image{ 160 image{
161 width: 24px; 161 width: 24px;
162 height: 26px; 162 height: 26px;
163 margin: 12rpx 32rpx 0 40rpx; 163 margin: 12rpx 32rpx 0 40rpx;
164 } 164 }
165 .p3 { 165 .p3 {
166 // font-family: PingFangSC-Semibold; 166 // font-family: PingFangSC-Semibold;
167 font-size: 14px; 167 font-size: 14px;
168 color: #333333; 168 color: #333333;
169 letter-spacing: -0.26px; 169 letter-spacing: -0.26px;
170 } 170 }
171 } 171 }
172 } 172 }
173 173
174 .order-info { 174 .order-info {
175 width: 670rpx; 175 width: 670rpx;
176 background-color: #fff; 176 background-color: #fff;
177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); 177 box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
178 border-radius: 16rpx; 178 border-radius: 16rpx;
179 margin: 0 auto; 179 margin: 0 auto;
180 view{ 180 view{
181 margin-left: 40rpx; 181 margin-left: 40rpx;
182 } 182 }
183 text{ 183 text{
184 font-size: 14px; 184 font-size: 14px;
185 } 185 }
186 .order-info-head { 186 .order-info-head {
187 display: flex; 187 display: flex;
188 padding-top: 40rpx; 188 padding-top: 40rpx;
189 image{ 189 image{
190 height: 188rpx; 190 height: 188rpx;
191 width: 188rpx; 191 width: 188rpx;
192 } 192 }
193 .order-info-head-r{ 193 .order-info-head-r{
194 margin: 0; 194 margin: 0;
195 width: 368rpx; 195 width: 368rpx;
196 margin-left: 24rpx; 196 margin-left: 24rpx;
197 // margin-top: 40rpx; 197 // margin-top: 40rpx;
198 text{ 198 text{
199 display: block; 199 display: block;
200 } 200 }
201 // .arrow{ 201 // .arrow{
202 // width: 0; 202 // width: 0;
203 // height: 0; 203 // height: 0;
204 // border-left: 5px transparent; 204 // border-left: 5px transparent;
205 // border-right: 5px transparent; 205 // border-right: 5px transparent;
206 // border-top: 5px #979797; 206 // border-top: 5px #979797;
207 // border-bottom: 0 transparent; 207 // border-bottom: 0 transparent;
208 // border-style: solid; 208 // border-style: solid;
209 // position: relative; 209 // position: relative;
210 // // transform: scaleY(-1); 210 // // transform: scaleY(-1);
211 // } 211 // }
212 // .arrow::after{ 212 // .arrow::after{
213 // content: ''; 213 // content: '';
214 // position: absolute; 214 // position: absolute;
215 // top: -6.5px; 215 // top: -6.5px;
216 // left: -5px; 216 // left: -5px;
217 // border-left: 5px transparent; 217 // border-left: 5px transparent;
218 // border-right: 5px transparent; 218 // border-right: 5px transparent;
219 // border-top: 5px #FFFFFF; 219 // border-top: 5px #FFFFFF;
220 // border-bottom: 0 transparent; 220 // border-bottom: 0 transparent;
221 // border-style: solid; 221 // border-style: solid;
222 // } 222 // }
223 .p1 { 223 .p1 {
224 min-height: 40px; 224 min-height: 40px;
225 // font-family: PingFangSC-Regular; 225 // font-family: PingFangSC-Regular;
226 font-size: 14px; 226 font-size: 14px;
227 color: #333333; 227 color: #333333;
228 letter-spacing: -0.26px; 228 letter-spacing: -0.26px;
229 line-height: 18px; 229 line-height: 18px;
230 // line-height: 20px; 230 // line-height: 20px;
231 } 231 }
232 .p2 { 232 .p2 {
233 height: 34px; 233 height: 34px;
234 padding: 1px 0 3px 0; 234 padding: 1px 0 3px 0;
235 // font-family: PingFangSC-Regular; 235 // font-family: PingFangSC-Regular;
236 font-size: 12px; 236 font-size: 12px;
237 color: #999999; 237 color: #999999;
238 letter-spacing: -0.23px; 238 letter-spacing: -0.23px;
239 } 239 }
240 .p3 { 240 .p3 {
241 height: 20px; 241 height: 20px;
242 // font-family: PingFangSC-Regular; 242 // font-family: PingFangSC-Regular;
243 font-size: 14px; 243 font-size: 14px;
244 color: #FF6B4A; 244 color: #FF6B4A;
245 letter-spacing: -0.26px; 245 letter-spacing: -0.26px;
246 } 246 }
247 .p4{ 247 .p4{
248 font-size: 12px; 248 font-size: 12px;
249 color: #999999; 249 color: #999999;
250 letter-spacing: -0.23px; 250 letter-spacing: -0.23px;
251 margin-left: 10px; 251 margin-left: 10px;
252 } 252 }
253 } 253 }
254 254
255 } 255 }
256 // .order-info-goodsnum { 256 // .order-info-goodsnum {
257 // display: flex; 257 // display: flex;
258 // align-items: center; 258 // align-items: center;
259 // justify-content: flex-end; 259 // justify-content: flex-end;
260 // text { 260 // text {
261 // margin-right: 44rpx; 261 // margin-right: 44rpx;
262 // // ont-family: PingFangSC-Regular; 262 // // ont-family: PingFangSC-Regular;
263 // font-size: 12px; 263 // font-size: 12px;
264 // color: #999999; 264 // color: #999999;
265 // letter-spacing: -0.23px; 265 // letter-spacing: -0.23px;
266 // } 266 // }
267 // } 267 // }
268 .order-info-freight { 268 .order-info-freight {
269 display: block; 269 display: block;
270 margin-left: 40rpx; 270 margin-left: 40rpx;
271 margin-top: 22rpx; 271 margin-top: 22rpx;
272 .p1{ 272 .p1{
273 // font-family: PingFangSC-Regular; 273 // font-family: PingFangSC-Regular;
274 font-size: 14px; 274 font-size: 14px;
275 color: #333333; 275 color: #333333;
276 letter-spacing: -0.26px; 276 letter-spacing: -0.26px;
277 line-height: 18px; 277 line-height: 18px;
278 margin-right: 24px; 278 margin-right: 24px;
279 } 279 }
280 .p2 { 280 .p2 {
281 // font-family: PingFangSC-Regular; 281 // font-family: PingFangSC-Regular;
282 font-size: 14px; 282 font-size: 14px;
283 color: #FF6B4A; 283 color: #FF6B4A;
284 letter-spacing: -0.26px; 284 letter-spacing: -0.26px;
285 } 285 }
286 } 286 }
287 .order-info-discount { 287 .order-info-discount {
288 display: block; 288 display: block;
289 margin-left: 40rpx; 289 margin-left: 40rpx;
290 margin-top: 24rpx; 290 margin-top: 24rpx;
291 .p1 { 291 .p1 {
292 // font-family: PingFangSC-Regular; 292 // font-family: PingFangSC-Regular;
293 font-size: 14px; 293 font-size: 14px;
294 color: #333333; 294 color: #333333;
295 letter-spacing: -0.26px; 295 letter-spacing: -0.26px;
296 line-height: 18px; 296 line-height: 18px;
297 margin-right: 24px; 297 margin-right: 24px;
298 } 298 }
299 .p2 { 299 .p2 {
300 // font-family: PingFangSC-Regular; 300 // font-family: PingFangSC-Regular;
301 font-size: 14px; 301 font-size: 14px;
302 color: #FF6B4A; 302 color: #FF6B4A;
303 letter-spacing: -0.26px; 303 letter-spacing: -0.26px;
304 } 304 }
305 } 305 }
306 .order-info-price { 306 .order-info-price {
307 display: block; 307 display: block;
308 margin-left: 40rpx; 308 margin-left: 40rpx;
309 margin-top: 24rpx; 309 margin-top: 24rpx;
310 .p1 { 310 .p1 {
311 // font-family: PingFangSC-Semibold; 311 // font-family: PingFangSC-Semibold;
312 font-size: 14px; 312 font-size: 14px;
313 color: #333333; 313 color: #333333;
314 letter-spacing: -0.26px; 314 letter-spacing: -0.26px;
315 line-height: 18px; 315 line-height: 18px;
316 margin-right: 24px; 316 margin-right: 24px;
317 } 317 }
318 .p2 { 318 .p2 {
319 // font-family: PingFangSC-Semibold; 319 // font-family: PingFangSC-Semibold;
320 font-size: 14px; 320 font-size: 14px;
321 color: #FF6B4A; 321 color: #FF6B4A;
322 letter-spacing: -0.26px; 322 letter-spacing: -0.26px;
323 } 323 }
324 } 324 }
325 .order-info-num{ 325 .order-info-num{
326 display: block; 326 display: block;
327 margin-left: 40rpx; 327 margin-left: 40rpx;
328 margin-top: 44rpx; 328 margin-top: 44rpx;
329 text{ 329 text{
330 // font-family: PingFangSC-Regular; 330 // font-family: PingFangSC-Regular;
331 font-size: 12px; 331 font-size: 12px;
332 color: #999999; 332 color: #999999;
333 letter-spacing: -0.23px; 333 letter-spacing: -0.23px;
334 } 334 }
335 } 335 }
336 .order-info-time { 336 .order-info-time {
337 display: block; 337 display: block;
338 margin: 8rpx 0 48rpx 40rpx; 338 margin: 8rpx 0 48rpx 40rpx;
339 text{ 339 text{
340 // font-family: PingFangSC-Regular; 340 // font-family: PingFangSC-Regular;
341 font-size: 12px; 341 font-size: 12px;
342 color: #999999; 342 color: #999999;
343 letter-spacing: -0.23px; 343 letter-spacing: -0.23px;
344 } 344 }
345 } 345 }
346 .order-info-hr{ 346 .order-info-hr{
347 width: 520rpx; 347 width: 520rpx;
348 height: 1px; 348 height: 1px;
349 background-color: #E9E9E9; 349 background-color: #E9E9E9;
350 margin-bottom: 20rpx; 350 margin-bottom: 20rpx;
351 } 351 }
352 .order-info-contact { 352 .order-info-contact {
353 display: flex; 353 display: flex;
354 padding-bottom: 28rpx; 354 padding-bottom: 28rpx;
355 image{ 355 image{
356 width: 19px; 356 width: 19px;
357 height: 16px; 357 height: 16px;
358 } 358 }
359 text { 359 text {
360 // font-family: PingFangSC-Regular; 360 // font-family: PingFangSC-Regular;
361 margin-left: 20rpx; 361 margin-left: 20rpx;
362 font-size: 14px; 362 font-size: 14px;
363 color: #333333; 363 color: #333333;
364 letter-spacing: -0.26px; 364 letter-spacing: -0.26px;
365 line-height: 18px; 365 line-height: 18px;
366 } 366 }
367 } 367 }
368 } 368 }
369 369
370 .order-confim { 370 .order-confim {
371 display: flex; 371 display: flex;
372 align-items: center; 372 align-items: center;
373 z-index: 999; 373 z-index: 999;
374 width: 100%; 374 width: 100%;
375 height: 112rpx; 375 height: 112rpx;
376 position: fixed; 376 position: fixed;
377 bottom: 0; 377 bottom: 0;
378 background: #FFFFFF; 378 background: #FFFFFF;
379 button { 379 button {
380 width: 204rpx; 380 width: 204rpx;
381 height: 80rpx; 381 height: 80rpx;
382 border: 1px solid #FF6B4A; 382 border: 1px solid #FF6B4A;
383 border-radius: 40rpx; 383 border-radius: 40rpx;
384 font-size: 32rpx; 384 font-size: 32rpx;
385 letter-spacing: -0.3px; 385 letter-spacing: -0.3px;
386 margin-right: 0; 386 margin-right: 0;
387 } 387 }
388 .b1 { 388 .b1 {
389 // font-family: PingFangSC-Regular; 389 // font-family: PingFangSC-Regular;
390 color: #FF6B4A; 390 color: #FF6B4A;
391 391
392 } 392 }
393 .b2 { 393 .b2 {
394 // font-family: PingFangSC-Regular; 394 // font-family: PingFangSC-Regular;
395 background-color: #FF6B4A; 395 background-color: #FF6B4A;
396 color: #FFFFFF; 396 color: #FFFFFF;
397 margin: 0 26rpx 0 20rpx; 397 margin: 0 26rpx 0 20rpx;
398 } 398 }
399 } 399 }
400 400
401 </style> 401 </style>
402 402
src/pages/user/user.vue
Diff comments   View file @f72f302
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view v-if="isAuth" class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image :src="headerphoto" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{nickName}}</text> 8 <text class="userName">{{nickName}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <view class="service"> 11 <view class="service">
12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 </view> 13 </view>
14 </view> 14 </view>
15 <view class="myOrder"> 15 <view class="myOrder">
16 <view class="orderHeader"> 16 <view class="orderHeader">
17 <text>全部订单</text> 17 <text>全部订单</text>
18 <view class="btn" @click="toMyOrder"> 18 <view class="btn" @click="toMyOrder">
19 全部 19 全部
20 <image src="../../static/right.png" mode="aspectFill"></image> 20 <image src="../../static/right.png" mode="aspectFill"></image>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="orderBody"> 23 <view class="orderBody">
24 <view class="item waitPay" @click="toMyOrderPaying"> 24 <view class="item waitPay" @click="toMyOrderPaying">
25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 25 <image src="../../static/waitDeliver.png" mode="aspectFill"></image>
26 <text>待付款</text> 26 <text>待付款</text>
27 </view> 27 </view>
28 <view class="item waitDeliver" @click="toPredelivery" > 28 <view class="item waitDeliver" @click="toPredelivery" >
29 <image src="../../static/waitDeliver.png" mode="aspectFill"></image> 29 <image src="../../static/waitPay.png" mode="aspectFill"></image>
30 <text>待发货</text> 30 <text>待发货</text>
31 </view> 31 </view>
32 <view class="item waitReceive" @click="torefunProgress"> 32 <view class="item waitReceive" @click="torefunProgress">
33 <image src="../../static/waitReceive.png" mode="aspectFill"></image> 33 <image src="../../static/waitReceive.png" mode="aspectFill"></image>
34 <text>待收货</text> 34 <text>待收货</text>
35 </view> 35 </view>
36 <view class="item service" @click="torefundment"> 36 <view class="item service" @click="torefundment">
37 <image src="../../static/service.png" mode="aspectFill"></image> 37 <image src="../../static/service.png" mode="aspectFill"></image>
38 <text>退换/售后</text> 38 <text>退换/售后</text>
39 </view> 39 </view>
40 </view> 40 </view>
41 </view> 41 </view>
42 <view class="recommend"> 42 <view class="recommend">
43 <view class="title"> 43 <view class="title">
44 <view class="line"></view> 44 <view class="line"></view>
45 <view class="text">精选推荐</view> 45 <view class="text">精选推荐</view>
46 <view class="line"></view> 46 <view class="line"></view>
47 </view> 47 </view>
48 <!-- 商品列表 --> 48 <!-- 商品列表 -->
49 <view class="goods-list"> 49 <view class="goods-list">
50 <view class="product-list"> 50 <view class="product-list">
51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> 51 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
52 <Card :goods = "goods"></Card> 52 <Card :goods = "goods"></Card>
53 </view> 53 </view>
54 </view> 54 </view>
55 <view class="loading-text">{{loadingText}}</view> 55 <view class="loading-text">{{loadingText}}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> 58 </view>
59 <view v-else class="auth"> 59 <view v-else class="auth">
60 <view class="icon"></view> 60 <view class="icon"></view>
61 <view class="divider"></view> 61 <view class="divider"></view>
62 <view class="title">申请获取以下权限</view> 62 <view class="title">申请获取以下权限</view>
63 <view class="text">获得您的公开信息(昵称、头像等)</view> 63 <view class="text">获得您的公开信息(昵称、头像等)</view>
64 <button 64 <button
65 type="primary" 65 type="primary"
66 open-type="getUserInfo"
66 open-type="getUserInfo" 67 @getuserinfo="onGotUserInfo"
67 @getuserinfo="onGotUserInfo" 68 >授权登陆</button>
68 >授权登陆</button> 69 </view>
69 </view> 70 </view>
70 </view> 71 </template>
71 </template> 72
72 73 <script>
73 <script> 74 import Card from "@/components/CommodityCard/CommodityCard.vue";
74 import Card from "@/components/CommodityCard/CommodityCard.vue"; 75 import store from '@/store';
75 import store from '@/store'; 76
76 77 export default {
77 export default { 78 components: {
78 components: { 79 'Card':Card
79 'Card':Card 80 },
80 }, 81 data() {
81 data() { 82 return {
82 return { 83 //商品数据
83 //商品数据 84 goodsList:[
84 goodsList:[ 85 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 87 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 88 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
88 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 89 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
89 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 90 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
90 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 91 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
91 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 92 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
93 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
94 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
95 ],
96 isAuth: true, // 是否显示授权页面
97 }
98 },
99 onLoad() {
100 // 判断是否授权
92 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 101 uni.getSetting({
93 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 102 success(res) {
94 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 103 console.log('authSetting',res.authSetting)
95 ], 104 if(res.authSetting['scope.userInfo'] === true) {
96 isAuth: true, // 是否显示授权页面 105 this.isAuth = true
97 } 106 } else {
98 }, 107 this.isAuth = false
99 onLoad() { 108 }
100 // 判断是否授权 109 }
101 uni.getSetting({ 110 })
102 success(res) { 111 },
103 console.log('authSetting',res.authSetting) 112 computed: {
104 if(res.authSetting['scope.userInfo'] === true) { 113 nickName() {
105 this.isAuth = true 114 console.log('nickName', this.$store.state.user.userInfo)
106 } else { 115 return this.$store.state.user.userInfo.nickName;
107 this.isAuth = false 116 },
108 } 117 headerphoto() {
109 } 118 return this.$store.state.user.userInfo.headerphoto;
110 }) 119 },
111 }, 120 userRecommandList() {
112 computed: { 121 console.log('recommandList', this.$store.state.userRecommand.recommandList);
113 nickName() { 122 return this.$store.state.userRecommand.recommandList;
114 console.log('nickName', this.$store.state.user.userInfo) 123 }
115 return this.$store.state.user.userInfo.nickName; 124 },
116 }, 125 onLoad: function() {
117 headerphoto() { 126 store.dispatch('userRecommand/getRecommandList', {
118 return this.$store.state.user.userInfo.headerphoto; 127 uid: 2,
119 } 128 });
120 }, 129 },
121 methods: { 130 methods: {
122 // 授权 131 // 授权
123 onGotUserInfo(e) { 132 onGotUserInfo(e) {
124 console.log('anthInfo', e); 133 console.log('anthInfo', e);
125 if(e.detail.errMsg == 'getUserInfo:ok') { 134 if(e.detail.errMsg == 'getUserInfo:ok') {
126 const { fromInfo } = this.$store.state.user; 135 const { fromInfo } = this.$store.state.user;
127 console.log('=====la', fromInfo) 136 console.log('=====la', fromInfo)
128 // 用户授权成功 137 // 用户授权成功
129 store.dispatch('user/getUserInfo', fromInfo); 138 store.dispatch('user/getUserInfo', fromInfo);
130 this.isAuth = true 139 this.isAuth = true
131 } 140 }
132 }, 141 },
133 toMyOrder(){ 142 toMyOrder(){
134 uni.navigateTo({ 143 uni.navigateTo({
135 url: '../myOrder/myOrder?current=0', 144 url: '../myOrder/myOrder?current=0',
136 success: res => {}, 145 success: res => {},
137 fail: () => {}, 146 fail: () => {},
138 complete: () => {} 147 complete: () => {}
139 }); 148 });
140 }, 149 },
141 toPredelivery(){ 150 toPredelivery(){
142 uni.navigateTo({ 151 uni.navigateTo({
143 url: '../myOrder/myOrder?current=2', 152 url: '../myOrder/myOrder?current=2',
144 success: res => {}, 153 success: res => {},
145 fail: () => {}, 154 fail: () => {},
146 complete: () => {} 155 complete: () => {}
147 }); 156 });
148 }, 157 },
149 toMyOrderPaying(){ 158 toMyOrderPaying(){
150 uni.navigateTo({ 159 uni.navigateTo({
151 url: '../myOrder/myOrder?current=1', 160 url: '../myOrder/myOrder?current=1',
152 success: res => {}, 161 success: res => {},
153 fail: () => {}, 162 fail: () => {},
154 complete: () => {} 163 complete: () => {}
155 }); 164 });
156 }, 165 },
157 torefundment(){ 166 torefundment(){
158 uni.navigateTo({ 167 uni.navigateTo({
159 url:'../refundment/refundment', 168 url:'../refundment/refundment',
160 }) 169 })
161 }, 170 },
162 torefunProgress(){ 171 torefunProgress(){
163 uni.navigateTo({ 172 uni.navigateTo({
164 url:'../refundProgress/refundProgress' 173 url:'../refundProgress/refundProgress'
165 }) 174 })
166 } 175 }
167 } 176 }
168 } 177 }
169 </script> 178 </script>
170 179
171 <style lang="scss"> 180 <style lang="scss">
172 .warp{ 181 .warp{
173 font-size: 24rpx; 182 font-size: 24rpx;
174 background-color: #f2f2f2; 183 background-color: #f2f2f2;
175 height: 100vh; 184 height: 100vh;
176 } 185 }
177 .content { 186 .content {
178 display: flex; 187 display: flex;
179 flex-direction: column; 188 flex-direction: column;
180 align-items: center; 189 align-items: center;
181 justify-content: center; 190 justify-content: center;
182 background-color: #F2F2F2; 191 background-color: #F2F2F2;
183 } 192 }
184 .userInfo{ 193 .userInfo{
185 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 194 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
186 width: 100%; 195 width: 100%;
187 height: 240rpx; 196 height: 240rpx;
188 color: #FFFFFF; 197 color: #FFFFFF;
189 padding: 60rpx 82rpx 80rpx 44rpx; 198 padding: 60rpx 82rpx 80rpx 44rpx;
190 box-sizing: border-box; 199 box-sizing: border-box;
191 display: flex; 200 display: flex;
192 flex-direction: row; 201 flex-direction: row;
193 justify-content: space-between; 202 justify-content: space-between;
194 align-items: flex-start; 203 align-items: flex-start;
195 .info{ 204 .info{
196 display: flex; 205 display: flex;
197 flex-direction: row; 206 flex-direction: row;
198 justify-content: space-between; 207 justify-content: space-between;
199 align-items: center; 208 align-items: center;
200 image{ 209 image{
201 border-radius: 50rpx; 210 border-radius: 50rpx;
202 height: 100rpx ; 211 height: 100rpx ;
203 width: 100rpx; 212 width: 100rpx;
204 margin-right: 40rpx; 213 margin-right: 40rpx;
205 } 214 }
206 .infoText{ 215 .infoText{
207 display: flex; 216 display: flex;
208 flex-direction: column; 217 flex-direction: column;
209 justify-content: space-between; 218 justify-content: space-between;
210 align-items: flex-scetart; 219 align-items: flex-scetart;
211 .userName{ 220 .userName{
212 font-size: 18px; 221 font-size: 18px;
213 color: #FFFFFF; 222 color: #FFFFFF;
214 margin-bottom: 8rpx; 223 margin-bottom: 8rpx;
215 } 224 }
216 .nickName{ 225 .nickName{
217 font-size: 12px; 226 font-size: 12px;
218 color: #FFFFFF; 227 color: #FFFFFF;
219 } 228 }
220 } 229 }
221 } 230 }
222 .service{ 231 .service{
223 margin-top: 20rpx; 232 margin-top: 20rpx;
224 image{ 233 image{
225 height: 36rpx; 234 height: 36rpx;
226 width: 36rpx; 235 width: 36rpx;
227 } 236 }
228 } 237 }
229 } 238 }
230 .myOrder{ 239 .myOrder{
231 width: 100%; 240 width: 100%;
232 height: 296rpx; 241 height: 296rpx;
233 margin-top: 20rpx; 242 margin-top: 20rpx;
234 margin-bottom: 20rpx; 243 margin-bottom: 20rpx;
235 padding: 0 40rpx; 244 padding: 0 40rpx;
236 box-sizing: border-box; 245 box-sizing: border-box;
237 background: #FFFFFF; 246 background: #FFFFFF;
238 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 247 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
239 border-radius: 6px; 248 border-radius: 6px;
240 border-radius: 6px; 249 border-radius: 6px;
241 display: flex; 250 display: flex;
242 flex-direction: column; 251 flex-direction: column;
243 justify-content: space-around; 252 justify-content: space-around;
244 align-items: center; 253 align-items: center;
245 .orderHeader{ 254 .orderHeader{
246 width: 100%; 255 width: 100%;
247 height: 100rpx; 256 height: 100rpx;
248 display: flex; 257 display: flex;
249 flex-direction: row; 258 flex-direction: row;
250 justify-content: space-between; 259 justify-content: space-between;
251 align-items: center; 260 align-items: center;
252 border-bottom: 1px solid #E9E9E9;; 261 border-bottom: 1px solid #E9E9E9;;
253 font-weight: bold; 262 font-weight: bold;
254 font-size: 18px; 263 font-size: 18px;
255 color: #333333; 264 color: #333333;
256 .btn{ 265 .btn{
257 font-size: 12px; 266 font-size: 12px;
258 color: #999999; 267 color: #999999;
259 image{ 268 image{
260 margin-left: 20rpx; 269 margin-left: 20rpx;
261 height: 16rpx; 270 height: 16rpx;
262 width: 8rpx; 271 width: 8rpx;
263 } 272 }
264 } 273 }
265 } 274 }
266 .orderBody{ 275 .orderBody{
267 width: 100%; 276 width: 100%;
268 display: flex; 277 display: flex;
269 flex-direction: row; 278 flex-direction: row;
270 justify-content: space-between; 279 justify-content: space-between;
271 align-items: center; 280 align-items: center;
272 .item{ 281 .item{
273 display: flex; 282 display: flex;
274 flex-direction: column; 283 flex-direction: column;
275 align-items: center; 284 align-items: center;
276 image{ 285 image{
277 width: 46rpx; 286 width: 46rpx;
278 height: 46rpx; 287 height: 46rpx;
279 } 288 }
280 text{ 289 text{
281 margin-top: 24rpx; 290 margin-top: 24rpx;
282 font-size: 12px; 291 font-size: 12px;
283 color: #333333; 292 color: #333333;
284 } 293 }
285 } 294 }
286 } 295 }
287 } 296 }
288 .recommend{ 297 .recommend{
289 background: #FFFFFF; 298 background: #FFFFFF;
290 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
291 border-radius: 6px; 300 border-radius: 6px;
292 border-radius: 6px; 301 border-radius: 6px;
293 width: 100%; 302 width: 100%;
294 .title{ 303 .title{
295 display: flex; 304 display: flex;
296 flex-direction: row; 305 flex-direction: row;
297 align-items: center; 306 align-items: center;
298 justify-content: space-between; 307 justify-content: space-between;
299 padding: 20rpx 40rpx; 308 padding: 20rpx 40rpx;
300 .line{ 309 .line{
301 width: 264rpx; 310 width: 264rpx;
302 height: 1rpx; 311 height: 1rpx;
303 border-bottom: 1px solid #EAEAEA; 312 border-bottom: 1px solid #EAEAEA;
304 } 313 }
305 .text{ 314 .text{
306 font-family: PingFangSC-Medium; 315 font-family: PingFangSC-Medium;
307 font-size: 14px; 316 font-size: 14px;
308 color: #333333; 317 color: #333333;
309 letter-spacing: -0.26px; 318 letter-spacing: -0.26px;
310 text-align: justify; 319 text-align: justify;
311 line-height: 24px; 320 line-height: 24px;
312 } 321 }
313 } 322 }
314 .goods-list{ 323 .goods-list{
315 .loading-text{ 324 .loading-text{
316 width: 100%; 325 width: 100%;
317 display: flex; 326 display: flex;
318 justify-content: center; 327 justify-content: center;
319 align-items: center; 328 align-items: center;
320 height: 30px; 329 height: 30px;
321 color: #979797; 330 color: #979797;
322 font-size: 12px; 331 font-size: 12px;
323 } 332 }
324 .product-list{ 333 .product-list{
325 width: 92%; 334 width: 92%;
326 padding: 0 4% 3vw 4%; 335 padding: 0 4% 3vw 4%;
327 display: flex; 336 display: flex;
328 justify-content: space-between; 337 justify-content: space-between;
329 flex-wrap: wrap; 338 flex-wrap: wrap;
330 .product{ 339 .product{
331 width: 48%; 340 width: 48%;
332 margin: 0 0 20rpx 0; 341 margin: 0 0 20rpx 0;
333 background: #FFFFFF; 342 background: #FFFFFF;
334 border: 1px solid #F2F2F2; 343 border: 1px solid #F2F2F2;
335 } 344 }
336 } 345 }
337 } 346 }
338 } 347 }
339 .auth { 348 .auth {
340 height: 100vh; 349 height: 100vh;
341 display: flex; 350 display: flex;
342 flex-direction: column; 351 flex-direction: column;
343 align-items: center; 352 align-items: center;
344 .icon { 353 .icon {
345 width: 140rpx; 354 width: 140rpx;
346 height: 140rpx; 355 height: 140rpx;
347 border-radius: 50%; 356 border-radius: 50%;
348 margin-top: 100rpx; 357 margin-top: 100rpx;
349 background-color: grey; 358 background-color: grey;
350 } 359 }
351 .divider { 360 .divider {
352 height: 1rpx; 361 height: 1rpx;
353 width: 600rpx; 362 width: 600rpx;
354 margin-top: 80rpx; 363 margin-top: 80rpx;
355 background-color: #E6E3E3; 364 background-color: #E6E3E3;
356 } 365 }
357 .title { 366 .title {
358 width: 600rpx; 367 width: 600rpx;
359 margin-top: 50rpx; 368 margin-top: 50rpx;
360 text-align: left; 369 text-align: left;
361 } 370 }
362 .text { 371 .text {
363 width: 600rpx; 372 width: 600rpx;
364 margin-top: 30rpx; 373 margin-top: 30rpx;
365 text-align: left; 374 text-align: left;
366 color: #E6E3E3; 375 color: #E6E3E3;
367 } 376 }
368 button { 377 button {
369 width: 450rpx; 378 width: 450rpx;
370 height: 80rpx; 379 height: 80rpx;
371 line-height: 80rpx; 380 line-height: 80rpx;
372 margin-top: 80rpx; 381 margin-top: 80rpx;
373 border-radius: 30rpx; 382 border-radius: 30rpx;
374 } 383 }
375 } 384 }
376 385
377 </style> 386 </style>
378 387
src/store/modules/cart.js
Diff comments   View file @f72f302
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 @f72f302
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
3 // 首页
4 shopList: '/app/prod/list', // 获取首页商品列表
5 category: '/app/prod/category', // 获取首页商品分类
6
7 // 登陆
8 login: '/app/glass/getOpenId', // 登陆
9 getUserInfo: '/app/glass/userinfo', // 获取用户信息
10
11 // 我的订单
12 orderList: '/app/order/list', // 获取订单列表
13
14 // 购物车
15 cartList: '/app/cart/list', // 获取购物车列表
16
17 // 我的
18 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
19 }
20
2 // 获取首页商品列表 21 export default urlAlias;
3 shopList: '/app/prod/list',