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 | 1 | <template> |
| 2 | - <view class="card" @tap="toGoods(goods.id)"> | |
| 3 | - <image mode="widthFix" :src="goods.imgurl" ></image> | |
| 2 | + <view class="card" @tap="toGoods(goods.goods_id)"> | |
| 3 | + <image mode="widthFix" :src="goods.img" ></image> | |
| 4 | 4 | <view class="name">{{goods.name}}</view> |
| 5 | 5 | <view class="info"> |
| 6 | 6 | <view class="priceBox"> |
| 7 | - <view class="price">{{goods.rsSon.Min_Price}}</view> | |
| 8 | - <view class="originCost"> | |
| 9 | - {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} | |
| 10 | - <!-- {{goods.oldPrice}} --> | |
| 7 | + <view class="price">{{goods.price}}</view> | |
| 8 | + <view class="originCost"> | |
| 9 | + {{goods.originCost}} | |
| 11 | 10 | </view> |
| 12 | 11 | </view> |
| 13 | - <view class="slogan">{{goods.trade_num}}</view> | |
| 12 | + <view class="slogan">{{goods.slogan}}</view> | |
| 14 | 13 | </view> |
| 15 | 14 | </view> |
| 16 | 15 | </template> |
| ... | ... | @@ -22,16 +21,17 @@ |
| 22 | 21 | * 商品数据 |
| 23 | 22 | */ |
| 24 | 23 | goods: { |
| 25 | - id: Number, | |
| 26 | - imgurl: String, | |
| 24 | + goods_id: Number, | |
| 25 | + img: String, | |
| 27 | 26 | name: String, |
| 28 | - oldPrice:String, | |
| 27 | + originCost:String, | |
| 29 | 28 | price: String, |
| 30 | - memo:String | |
| 29 | + slogan:String | |
| 31 | 30 | } |
| 32 | 31 | |
| 33 | 32 | }, |
| 34 | 33 | created() { |
| 34 | + console.log(this.goods) | |
| 35 | 35 | }, |
| 36 | 36 | data() { |
| 37 | 37 | return { |
| ... | ... |
src/components/UniCountdown/UniCountdown.vue
| ... | ... | @@ -0,0 +1,190 @@ |
| 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> | |
| ... | ... |
src/pages.json
| ... | ... | @@ -68,10 +68,22 @@ |
| 68 | 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 | 89 | "path" : "pages/detailStandard/detailStandard_sun", |
| ... | ... | @@ -117,5 +129,15 @@ |
| 117 | 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 | } |
| ... | ... |
src/pages/cart/cart.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="content"> |
| 3 | - <checkbox-group name=""> | |
| 4 | - <label> | |
| 5 | - <view class="card"> | |
| 6 | - <view class="cardHeader"> | |
| 7 | - <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/> | |
| 8 | - <image src="../../static/customerService-btn.png" mode="aspectFill"></image> | |
| 9 | - <text>非常戴镜</text> | |
| 3 | + | |
| 4 | + <view class="card"> | |
| 5 | + <view class="cardHeader"> | |
| 6 | + <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> --> | |
| 7 | + <block v-if="pIsoPen"> | |
| 8 | + <view class="partentChecked" @click="pChange(pIsoPen)"> | |
| 9 | + <span class="status correct"></span> | |
| 10 | 10 | </view> |
| 11 | - <view class="cardBody"> | |
| 12 | - <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" /> | |
| 13 | - <view class="goodInfo"> | |
| 14 | - <view class="imageWrap"> | |
| 15 | - <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | |
| 16 | - </view> | |
| 17 | - <view class="infoRight"> | |
| 18 | - <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | |
| 19 | - <view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text> | |
| 20 | - <!-- <text class="icon">></text> --> | |
| 21 | - </view> | |
| 22 | - <view class="priceBox"> | |
| 23 | - <view class="price">￥198</view> | |
| 24 | - <text>(限购{{maxCount}}副)</text> | |
| 25 | - <view class="counter"> | |
| 26 | - <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | |
| 27 | - <text>{{count}}</text> | |
| 28 | - <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | |
| 29 | - </view> | |
| 30 | - </view> | |
| 11 | + </block> | |
| 12 | + <block v-else> | |
| 13 | + <view class="partentCheck" @click="pChange(pIsoPen)"></view> | |
| 14 | + </block> | |
| 15 | + <image src="../../static/store.png" mode="aspectFill"></image> | |
| 16 | + <text>非常戴镜</text> | |
| 17 | + </view> | |
| 18 | + | |
| 19 | + <view class="cardBody"> | |
| 20 | + <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> | |
| 21 | + <template v-if="childIsOpen.child1"> | |
| 22 | + <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> | |
| 23 | + <span class="status correct"></span> | |
| 24 | + </view> | |
| 25 | + </template> | |
| 26 | + <template v-else> | |
| 27 | + <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> | |
| 28 | + </template> | |
| 29 | + <view class="goodInfo"> | |
| 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 | 45 | </view> |
| 32 | 46 | </view> |
| 33 | 47 | </view> |
| 34 | 48 | </view> |
| 35 | - </label> | |
| 36 | - </checkbox-group> | |
| 37 | - | |
| 49 | + </view> | |
| 50 | + <view class="cardBody"> | |
| 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 | 83 | <view class="footer"> |
| 40 | 84 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 41 | 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 | 89 | </view> |
| 44 | 90 | </view> |
| 91 | + | |
| 45 | 92 | </view> |
| 46 | 93 | </template> |
| 47 | 94 | |
| 48 | 95 | <script> |
| 49 | 96 | export default { |
| 97 | + | |
| 50 | 98 | data() { |
| 51 | 99 | return { |
| 52 | 100 | totalPrice: 360, |
| 53 | 101 | count:1, |
| 54 | 102 | maxCount:20, |
| 103 | + pIsoPen: false, | |
| 104 | + childIsOpen:{ | |
| 105 | + "child1":true, | |
| 106 | + "child2":true | |
| 107 | + }, | |
| 55 | 108 | } |
| 56 | 109 | }, |
| 57 | 110 | onLoad() { |
| 58 | 111 | |
| 59 | - }, | |
| 112 | + } | |
| 113 | + , | |
| 60 | 114 | methods: { |
| 61 | 115 | counter(isadd){ |
| 62 | 116 | if(isadd){ |
| ... | ... | @@ -65,6 +119,21 @@ |
| 65 | 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 | 139 | </script> |
| ... | ... | @@ -72,7 +141,7 @@ |
| 72 | 141 | <style lang="scss"> |
| 73 | 142 | .content { |
| 74 | 143 | min-height: 100vh; |
| 75 | - background-color: #F7F6F6; | |
| 144 | + background-color: #f2f2f2; | |
| 76 | 145 | display: flex; |
| 77 | 146 | flex-direction: column; |
| 78 | 147 | align-items: center; |
| ... | ... | @@ -80,6 +149,40 @@ |
| 80 | 149 | padding: 20rpx 40rpx; |
| 81 | 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 | 186 | .card{ |
| 84 | 187 | background-color: #FFFFFF; |
| 85 | 188 | border-radius: 16rpx; |
| ... | ... | @@ -98,6 +201,14 @@ |
| 98 | 201 | image{ |
| 99 | 202 | height: 32rpx; |
| 100 | 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 | 214 | .cardBody{ |
| ... | ... | @@ -111,11 +222,13 @@ |
| 111 | 222 | display: flex; |
| 112 | 223 | flex-direction: row; |
| 113 | 224 | justify-content: flex-start; |
| 225 | + padding-left: 6px; | |
| 114 | 226 | .imageWrap{ |
| 115 | 227 | height: 188rpx; |
| 116 | 228 | width: 188rpx; |
| 117 | - margin-right: 28rpx; | |
| 229 | + margin-right: 28rpx; | |
| 118 | 230 | image{ |
| 231 | + border-radius: 4px; | |
| 119 | 232 | height: 188rpx; |
| 120 | 233 | width: 188rpx; |
| 121 | 234 | } |
| ... | ... | @@ -125,7 +238,7 @@ |
| 125 | 238 | flex-direction: column; |
| 126 | 239 | align-items: flex-start; |
| 127 | 240 | justify-content: space-between; |
| 128 | - height: 220rpx; | |
| 241 | + height: 240rpx; | |
| 129 | 242 | .goodName{ |
| 130 | 243 | font-size: 28rpx; |
| 131 | 244 | color: #333333; |
| ... | ... | @@ -155,6 +268,7 @@ |
| 155 | 268 | display: flex; |
| 156 | 269 | justify-content: space-between; |
| 157 | 270 | align-items: center; |
| 271 | + // margin-top: 26px; | |
| 158 | 272 | width: 100%; |
| 159 | 273 | font-size: 14px; |
| 160 | 274 | color: #999999; |
| ... | ... | @@ -189,7 +303,7 @@ |
| 189 | 303 | .footer{ |
| 190 | 304 | position: fixed; |
| 191 | 305 | left: 0; |
| 192 | - bottom: 0; | |
| 306 | + bottom: 50px; | |
| 193 | 307 | height: 112rpx; |
| 194 | 308 | width: 100%; |
| 195 | 309 | background-color: #FFFFFF; |
| ... | ... | @@ -229,4 +343,6 @@ |
| 229 | 343 | } |
| 230 | 344 | } |
| 231 | 345 | |
| 346 | + | |
| 347 | + | |
| 232 | 348 | </style> |
| ... | ... |
src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
| ... | ... | @@ -0,0 +1,228 @@ |
| 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> | |
| ... | ... |
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
| ... | ... | @@ -0,0 +1,571 @@ |
| 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> | |
| ... | ... |
src/pages/myOrder/myOrder.vue
| ... | ... | @@ -20,7 +20,8 @@ |
| 20 | 20 | <OrderCard :order = "order" :current="current"></OrderCard> |
| 21 | 21 | </view> |
| 22 | 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 | 25 | </view> |
| 25 | 26 | </template> |
| 26 | 27 | <script> |
| ... | ... |
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | 1 | <template> |
| 2 | - <view class="content"> | |
| 3 | - <view class="header"> | |
| 4 | - <view class="header-name"> | |
| 5 | - <navigator open-type="navigateBack" hover-class="navigator-hover"> | |
| 6 | - <image src="/static/back.png"></image> | |
| 7 | - </navigator> | |
| 8 | - <text>我的订单</text> | |
| 9 | - </view> | |
| 2 | + <view class="content"> | |
| 3 | + <view class="order-hr"></view> | |
| 4 | + <view class="order-time"> | |
| 5 | + <text>请在</text> | |
| 6 | + <!-- <text class="p2"></text> --> | |
| 7 | + <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" | |
| 8 | + :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> | |
| 9 | + <text>内完成付款</text> | |
| 10 | 10 | </view> |
| 11 | - <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }"> | |
| 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> | |
| 11 | + <view class="order"> | |
| 18 | 12 | <view class="order-user"> |
| 19 | 13 | <view class="order-user-head"> |
| 20 | 14 | <text class="p1">钱大大</text> |
| ... | ... | @@ -30,13 +24,16 @@ |
| 30 | 24 | <image src="../../static/myorder-paying-pic.png"></image> |
| 31 | 25 | <view class="order-info-head-r"> |
| 32 | 26 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> |
| 33 | - <text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text> | |
| 34 | - <text class="p3">￥180</text> | |
| 27 | + <view class="p2" style="margin: 0;"> | |
| 28 | + 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 | |
| 29 | + <!-- <view class="arrow"></view> --> | |
| 30 | + </view> | |
| 31 | + <text class="p3"><span>￥180</span><span class="p4">X1</span></text> | |
| 35 | 32 | </view> |
| 36 | 33 | </view> |
| 37 | - <view class="order-info-goodsnum"> | |
| 34 | +<!-- <view class="order-info-goodsnum"> | |
| 38 | 35 | <text>X1</text> |
| 39 | - </view> | |
| 36 | + </view> --> | |
| 40 | 37 | <text class="order-info-freight"> |
| 41 | 38 | <text class="p1">运费</text> |
| 42 | 39 | <text class="p2">0.00</text> |
| ... | ... | @@ -61,7 +58,7 @@ |
| 61 | 58 | <text>联系客服</text> |
| 62 | 59 | </view> |
| 63 | 60 | </view> |
| 64 | - </scroll-view> | |
| 61 | + </view> | |
| 65 | 62 | <view class="order-confim"> |
| 66 | 63 | <button class="b1">取消订单</button> |
| 67 | 64 | <button class="b2">立即支付</button> |
| ... | ... | @@ -70,7 +67,11 @@ |
| 70 | 67 | </template> |
| 71 | 68 | |
| 72 | 69 | <script> |
| 70 | + import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | |
| 73 | 71 | export default { |
| 72 | + components: { | |
| 73 | + UniCountdown | |
| 74 | + }, | |
| 74 | 75 | data() { |
| 75 | 76 | return { |
| 76 | 77 | scrollHeight: false, |
| ... | ... | @@ -88,39 +89,13 @@ |
| 88 | 89 | flex-direction: column; |
| 89 | 90 | justify-content: center; |
| 90 | 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 { | |
| 123 | - // height: 1760rpx; // 测试 | |
| 96 | + .order { | |
| 97 | + min-height: 1196rpx; | |
| 98 | + margin-bottom: 112rpx; | |
| 124 | 99 | background: #F2F2F2; |
| 125 | 100 | } |
| 126 | 101 | .order-hr { |
| ... | ... | @@ -222,8 +197,30 @@ |
| 222 | 197 | text{ |
| 223 | 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 | 222 | .p1 { |
| 226 | - height: 40px; | |
| 223 | + min-height: 40px; | |
| 227 | 224 | // font-family: PingFangSC-Regular; |
| 228 | 225 | font-size: 14px; |
| 229 | 226 | color: #333333; |
| ... | ... | @@ -246,21 +243,27 @@ |
| 246 | 243 | color: #FF6B4A; |
| 247 | 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 { | |
| 253 | - display: flex; | |
| 254 | - align-items: center; | |
| 255 | - justify-content: flex-end; | |
| 256 | - text { | |
| 257 | - margin-right: 44rpx; | |
| 258 | - // ont-family: PingFangSC-Regular; | |
| 259 | - font-size: 12px; | |
| 260 | - color: #999999; | |
| 261 | - letter-spacing: -0.23px; | |
| 262 | - } | |
| 263 | - } | |
| 255 | + // .order-info-goodsnum { | |
| 256 | + // display: flex; | |
| 257 | + // align-items: center; | |
| 258 | + // justify-content: flex-end; | |
| 259 | + // text { | |
| 260 | + // margin-right: 44rpx; | |
| 261 | + // // ont-family: PingFangSC-Regular; | |
| 262 | + // font-size: 12px; | |
| 263 | + // color: #999999; | |
| 264 | + // letter-spacing: -0.23px; | |
| 265 | + // } | |
| 266 | + // } | |
| 264 | 267 | .order-info-freight { |
| 265 | 268 | display: block; |
| 266 | 269 | margin-left: 40rpx; |
| ... | ... |
src/pages/user/user.vue
| ... | ... | @@ -22,19 +22,19 @@ |
| 22 | 22 | </view> |
| 23 | 23 | </view> |
| 24 | 24 | <view class="orderBody"> |
| 25 | - <view class="item,waitPay" @click=toMyOrderPaying> | |
| 26 | - <image src="../../static/waitPay.png" mode="aspectFill"></image> | |
| 25 | + <view class="item waitPay" @click="toMyOrderPaying"> | |
| 26 | + <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | |
| 27 | 27 | <text>待付款</text> |
| 28 | 28 | </view> |
| 29 | - <view class="item,waitDeliver" @click=toPredelivery> | |
| 29 | + <view class="item waitDeliver" @click="toPredelivery" > | |
| 30 | 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 31 | 31 | <text>待发货</text> |
| 32 | 32 | </view> |
| 33 | - <view class="item,waitReceive"> | |
| 33 | + <view class="item waitReceive" @click="torefunProgress"> | |
| 34 | 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
| 35 | 35 | <text>待收货</text> |
| 36 | 36 | </view> |
| 37 | - <view class="item,service"> | |
| 37 | + <view class="item service" @click="torefundment"> | |
| 38 | 38 | <image src="../../static/service.png" mode="aspectFill"></image> |
| 39 | 39 | <text>退换/售后</text> |
| 40 | 40 | </view> |
| ... | ... | @@ -72,7 +72,7 @@ |
| 72 | 72 | |
| 73 | 73 | //商品数据 |
| 74 | 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 | 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 77 | 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 78 | 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| ... | ... | @@ -101,7 +101,7 @@ |
| 101 | 101 | }, |
| 102 | 102 | toPredelivery(){ |
| 103 | 103 | uni.navigateTo({ |
| 104 | - url: '../Predelivery/Predelivery', | |
| 104 | + url: '../predelivery/predelivery', | |
| 105 | 105 | success: res => {}, |
| 106 | 106 | fail: () => {}, |
| 107 | 107 | complete: () => {} |
| ... | ... | @@ -109,11 +109,21 @@ |
| 109 | 109 | }, |
| 110 | 110 | toMyOrderPaying(){ |
| 111 | 111 | uni.navigateTo({ |
| 112 | - url: '../myorder-paying/myorder-paying', | |
| 112 | + url: '../myorderPaying/myorderPaying', | |
| 113 | 113 | success: res => {}, |
| 114 | 114 | fail: () => {}, |
| 115 | 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 | } |
| ... | ... | @@ -240,6 +250,7 @@ |
| 240 | 250 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 241 | 251 | border-radius: 6px; |
| 242 | 252 | border-radius: 6px; |
| 253 | + width: 100%; | |
| 243 | 254 | .title{ |
| 244 | 255 | display: flex; |
| 245 | 256 | flex-direction: row; |
| ... | ... |