刘文博 / gulu-vue

Download as
Browse Code »

Commit c338b4909b35f1ad5bad2844fc5ede34bbd12fa8

Authored by BigBoss
2 parents 912dd06afc ab4209caf5
Exists in master

完善页面跳转逻辑

Showing 9 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @c338b49
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
Diff comments   View file @c338b49
... ... @@ -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>
... ...
... ... @@ -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
Diff comments   View file @c338b49
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
Diff comments   View file @c338b49
... ... @@ -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
Diff comments   View file @c338b49
... ... @@ -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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">左&nbsp;&nbsp;&nbsp;(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">右&nbsp;&nbsp;&nbsp;(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">年&nbsp;&nbsp;&nbsp;(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">月&nbsp;&nbsp;&nbsp;(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">日&nbsp;&nbsp;&nbsp;(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;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  154 + <text>右&nbsp;{{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
Diff comments   View file @c338b49
... ... @@ -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
Diff comments   View file @c338b49
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
Diff comments   View file @c338b49
... ... @@ -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;
... ...