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