Commit daf137d6fdb9a5992261ea0bf7a5ac6a3259250c
Exists in
master
合并冲突
Showing
10 changed files
Show diff stats
src/pages/addOpticsData/addOpticsData.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <!-- 弹窗 --> | 3 | <!-- 弹窗 --> |
| 4 | <uni-popup ref="popup" type="center"> | 4 | <uni-popup ref="popup" type="center"> |
| 5 | <!-- 给一个左边弹窗的样式 --> | 5 | <!-- 给一个左边弹窗的样式 --> |
| 6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> | 6 | <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> |
| 7 | <!-- 关闭弹窗按钮 --> | 7 | <!-- 关闭弹窗按钮 --> |
| 8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> | 8 | <view class="closeBtn" @click="this.$refs.popup.close()"></view> |
| 9 | <!-- 左 --> | 9 | <!-- 左 --> |
| 10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> | 10 | <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> |
| 11 | <!-- 右 --> | 11 | <!-- 右 --> |
| 12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> | 12 | <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> |
| 13 | </view> | 13 | </view> |
| 14 | </uni-popup> | 14 | </uni-popup> |
| 15 | <!-- 点击弹窗部分 --> | 15 | <!-- 点击弹窗部分 --> |
| 16 | <view class="header"> | 16 | <view class="header"> |
| 17 | <view class="headerLeft" @click=changeTap(0)> | 17 | <view class="headerLeft" @click=changeTap(0)> |
| 18 | <text>如何查看验光单?</text> | 18 | <text>如何查看验光单?</text> |
| 19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> | 19 | <image src="../../static/dataLook.png" mode="aspectFit"></image> |
| 20 | </view> | 20 | </view> |
| 21 | <view class="headerRight" @click=changeTap(1)> | 21 | <view class="headerRight" @click=changeTap(1)> |
| 22 | <text>如何查看眼镜框架?</text> | 22 | <text>如何查看眼镜框架?</text> |
| 23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> | 23 | <image src="../../static/glassLook.png" mode="aspectFit"></image> |
| 24 | </view> | 24 | </view> |
| 25 | </view> | 25 | </view> |
| 26 | <!-- 数据展示部分 --> | 26 | <!-- 数据展示部分 --> |
| 27 | <view class="dataMenu"> | 27 | <view class="dataMenu"> |
| 28 | <uni-collapse accordion="true"> | 28 | <uni-collapse accordion="true"> |
| 29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index"> | 29 | <view class="item" v-for="(loveItem,index) in loveList" :key="index" > |
| 30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> | 30 | <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> |
| 31 | <view class="loveDataInfo"> | 31 | <view class="loveDataInfo" @click="toNewData(2,index)"> |
| 32 | <view class="dataInfoItem"> | 32 | <view class="dataInfoItem"> |
| 33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> | 33 | <text>度数(SPH):</text><text>左:{{loveItem.leftSph}}</text><text>右:{{loveItem.rightSph}}</text> |
| 34 | </view> | 34 | </view> |
| 35 | <view class="dataInfoItem"> | 35 | <view class="dataInfoItem"> |
| 36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> | 36 | <text>散光(CYL):</text><text>左:{{loveItem.leftCyl}}</text><text>右:{{loveItem.rightCyl}}</text> |
| 37 | </view> | 37 | </view> |
| 38 | <view class="dataInfoItem"> | 38 | <view class="dataInfoItem"> |
| 39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> | 39 | <text>轴位(AXI):</text><text>左:{{loveItem.leftAxi}}</text><text>右:{{loveItem.rightAxi}}</text> |
| 40 | </view> | 40 | </view> |
| 41 | <view class="dataInfoItem"> | 41 | <view class="dataInfoItem"> |
| 42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> | 42 | <text>瞳距(PD):</text><text>{{loveItem.pd}}</text> |
| 43 | </view> | 43 | </view> |
| 44 | </view> | 44 | </view> |
| 45 | </uni-collapse-item> | 45 | </uni-collapse-item> |
| 46 | </view> | 46 | </view> |
| 47 | </uni-collapse> | 47 | </uni-collapse> |
| 48 | </view> | 48 | </view> |
| 49 | <view class="footer"> | 49 | <view class="footer"> |
| 50 | <button class="btn" type="default" @click="toNewData">新建验光单</button> | 50 | <button class="btn" type="default" @click="toNewData(1)">新建验光单</button> |
| 51 | </view> | 51 | </view> |
| 52 | </view> | 52 | </view> |
| 53 | </template> | 53 | </template> |
| 54 | 54 | ||
| 55 | <script> | 55 | <script> |
| 56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 56 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 57 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | 58 | import UniPopup from '@/components/UniPopup/uni-popup.vue' |
| 59 | import store from '@/store'; | 59 | import store from '@/store'; |
| 60 | export default { | 60 | export default { |
| 61 | components: {UniCollapse,UniCollapseItem,UniPopup}, | 61 | components: {UniCollapse,UniCollapseItem,UniPopup}, |
| 62 | data() { | 62 | data() { |
| 63 | return { | 63 | return { |
| 64 | whichTap:0 | 64 | whichTap:0 |
| 65 | }; | 65 | }; |
| 66 | }, | 66 | }, |
| 67 | onLoad: function(option) { | 67 | onLoad: function(option) { |
| 68 | //获取关心的人列表 | 68 | //获取关心的人列表 |
| 69 | store.dispatch('myLoveList/getLoveList', { | 69 | store.dispatch('myLoveList/getLoveList', { |
| 70 | uid: "1", | 70 | uid: this.$store.state.user.userInfo.uid, |
| 71 | }); | 71 | }); |
| 72 | }, | 72 | }, |
| 73 | computed:{ | 73 | computed:{ |
| 74 | loveList() { | 74 | loveList() { |
| 75 | console.log(this.$store.state.myLoveList.loveList) | 75 | console.log(this.$store.state.myLoveList.loveList) |
| 76 | return this.$store.state.myLoveList.loveList || [] | 76 | return this.$store.state.myLoveList.loveList || [] |
| 77 | }, | 77 | }, |
| 78 | }, | 78 | }, |
| 79 | methods:{ | 79 | methods:{ |
| 80 | changeTap(item){ | 80 | changeTap(item){ |
| 81 | this.whichTap = item | 81 | this.whichTap = item |
| 82 | this.$refs.popup.open() | 82 | this.$refs.popup.open() |
| 83 | }, | 83 | }, |
| 84 | //给时间搞一个nice的格式 | 84 | //给时间搞一个nice的格式 |
| 85 | getRightTime(time){ | 85 | getRightTime(time){ |
| 86 | //如果小于10 则返回'0'+m | 86 | //如果小于10 则返回'0'+m |
| 87 | // function add(m){return m<10?'0'+m:m} | 87 | // function add(m){return m<10?'0'+m:m} |
| 88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 | 88 | //传给我的带有时分秒,想去除一下,但是完事IOS显示NaN,暂时不用吧 |
| 89 | // const oldTime = (new Date(time)).getTime() | 89 | // const oldTime = (new Date(time)).getTime() |
| 90 | // const year = new Date(oldTime).getFullYear() | 90 | // const year = new Date(oldTime).getFullYear() |
| 91 | // const month = new Date(oldTime).getMonth()+1 | 91 | // const month = new Date(oldTime).getMonth()+1 |
| 92 | // const day = new Date(oldTime).getDate() | 92 | // const day = new Date(oldTime).getDate() |
| 93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) | 93 | // const newTime = add(year)+'-'+add(month)+'-'+add(day) |
| 94 | 94 | ||
| 95 | // console.log(newTime) | 95 | // console.log(newTime) |
| 96 | // return newTime.replace(/-/g, '/') | 96 | // return newTime.replace(/-/g, '/') |
| 97 | return time | 97 | return time |
| 98 | }, | 98 | }, |
| 99 | getFirstName(name){ | 99 | getFirstName(name){ |
| 100 | return name.substring(0,1) | 100 | return name.substring(0,1) |
| 101 | }, | 101 | }, |
| 102 | toNewData(){ | 102 | toNewData(item,index){ |
| 103 | // const args={ | ||
| 104 | // name:loveItem.name, | ||
| 105 | // pd:loveItem.pd, | ||
| 106 | // leftSph:loveItem.leftSph, | ||
| 107 | // rightSph:loveItem.rightSph, | ||
| 108 | // leftCyl:loveItem.leftCyl, | ||
| 109 | // rightCyl:loveItem.rightCyl, | ||
| 110 | // leftAxi:loveItem.leftAxi, | ||
| 111 | // rightAxi:loveItem.rightAxi | ||
| 112 | // } | ||
| 103 | uni.navigateTo({ | 113 | uni.navigateTo({ |
| 104 | url:'../newOpticsData/newOpticsData' | 114 | // kinds 参数为 1 表示添加新的验光单, 2 表示更新验光单 |
| 115 | // name 表示修改的人名儿,pd瞳距 | ||
| 116 | url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index | ||
| 105 | }) | 117 | }) |
| 106 | } | 118 | } |
| 107 | } | 119 | } |
| 108 | } | 120 | } |
| 109 | </script> | 121 | </script> |
| 110 | 122 | ||
| 111 | <style lang="scss"> | 123 | <style lang="scss"> |
| 112 | .wrap{ | 124 | .wrap{ |
| 113 | min-height: 100vh; | 125 | min-height: 100vh; |
| 114 | width: 100%; | 126 | width: 100%; |
| 115 | background-color: #F2F2F2; | 127 | background-color: #F2F2F2; |
| 116 | .header{ | 128 | .header{ |
| 117 | height: 304rpx; | 129 | height: 304rpx; |
| 118 | width: 100%; | 130 | width: 100%; |
| 119 | background-color: #FFFFFF; | 131 | background-color: #FFFFFF; |
| 120 | display: flex; | 132 | display: flex; |
| 121 | justify-content: space-around; | 133 | justify-content: space-around; |
| 122 | align-items: center; | 134 | align-items: center; |
| 123 | view{ | 135 | view{ |
| 124 | height: 210rpx; | 136 | height: 210rpx; |
| 125 | width: 304rpx; | 137 | width: 304rpx; |
| 126 | background: #FDF7F5; | 138 | background: #FDF7F5; |
| 127 | border-radius: 4px; | 139 | border-radius: 4px; |
| 128 | border-radius: 4px; | 140 | border-radius: 4px; |
| 129 | display: flex; | 141 | display: flex; |
| 130 | flex-direction: column; | 142 | flex-direction: column; |
| 131 | align-items: center; | 143 | align-items: center; |
| 132 | justify-content: center; | 144 | justify-content: center; |
| 133 | text{ | 145 | text{ |
| 134 | font-size: 12px; | 146 | font-size: 12px; |
| 135 | color: #333333; | 147 | color: #333333; |
| 136 | } | 148 | } |
| 137 | image{ | 149 | image{ |
| 138 | height: 144rpx; | 150 | height: 144rpx; |
| 139 | width: 144rpx; | 151 | width: 144rpx; |
| 140 | } | 152 | } |
| 141 | } | 153 | } |
| 142 | } | 154 | } |
| 143 | .dataMenu{ | 155 | .dataMenu{ |
| 144 | margin-top: 20rpx; | 156 | margin-top: 20rpx; |
| 145 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 157 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 146 | width: 100%; | 158 | width: 100%; |
| 147 | background-color: #FFFFFF; | 159 | background-color: #FFFFFF; |
| 160 | margin-bottom: 120rpx; | ||
| 148 | .item{ | 161 | .item{ |
| 149 | padding: 0 40rpx; | 162 | padding: 0 40rpx; |
| 150 | .loveDataInfo{ | 163 | .loveDataInfo{ |
| 151 | padding: 0 44rpx 0 70rpx; | 164 | padding: 0 44rpx 0 70rpx; |
| 152 | display: flex; | 165 | display: flex; |
| 153 | justify-content: space-around; | 166 | justify-content: space-around; |
| 154 | flex-direction: column; | 167 | flex-direction: column; |
| 155 | align-items: flex-start; | 168 | align-items: flex-start; |
| 156 | .dataInfoItem{ | 169 | .dataInfoItem{ |
| 157 | font-size: 12px; | 170 | font-size: 12px; |
| 158 | color: #333333; | 171 | color: #333333; |
| 159 | margin-bottom: 34rpx; | 172 | margin-bottom: 34rpx; |
| 160 | text{ | 173 | text{ |
| 161 | font-size: 12px; | 174 | font-size: 12px; |
| 162 | color: #2A2A2A; | 175 | color: #2A2A2A; |
| 163 | margin-right: 20rpx; | 176 | margin-right: 20rpx; |
| 164 | } | 177 | } |
| 165 | } | 178 | } |
| 166 | } | 179 | } |
| 167 | } | 180 | } |
| 168 | } | 181 | } |
| 169 | .footer{ | 182 | .footer{ |
| 170 | width: 100%; | 183 | width: 100%; |
| 171 | position: fixed; | 184 | position: fixed; |
| 172 | bottom: 0; | 185 | bottom: 0; |
| 173 | left: 0; | 186 | left: 0; |
| 174 | .btn{ | 187 | .btn{ |
| 175 | width: 100%; | 188 | width: 100%; |
| 176 | height: 112rpx; | 189 | height: 112rpx; |
| 177 | line-height: 112rpx; | 190 | line-height: 112rpx; |
| 178 | background: #FF6B4A; | 191 | background: #FF6B4A; |
| 179 | font-size: 16px; | 192 | font-size: 16px; |
| 180 | color: #FFFFFF; | 193 | color: #FFFFFF; |
| 181 | } | 194 | } |
| 182 | } | 195 | } |
| 183 | } | 196 | } |
| 184 | .popUpWrap{ | 197 | .popUpWrap{ |
| 185 | height: 850rpx; | 198 | height: 850rpx; |
| 186 | width: 542rpx; | 199 | width: 542rpx; |
| 187 | background-color: #FFFFFF; | 200 | background-color: #FFFFFF; |
| 188 | border-radius: 4px; | 201 | border-radius: 4px; |
| 189 | border: 1px solid #979797; | 202 | border: 1px solid #979797; |
| 190 | .closeBtn{ | 203 | .closeBtn{ |
| 191 | height: 28rpx; | 204 | height: 28rpx; |
| 192 | width: 28rpx; | 205 | width: 28rpx; |
| 193 | // border: 1px solid red; | 206 | // border: 1px solid red; |
| 194 | position: absolute; | 207 | position: absolute; |
| 195 | top: 20rpx; | 208 | top: 20rpx; |
| 196 | right: 20rpx; | 209 | right: 20rpx; |
| 197 | } | 210 | } |
| 198 | .glassInfo{ | 211 | .glassInfo{ |
| 199 | height: 474rpx; | 212 | height: 474rpx; |
| 200 | width: 528rpx; | 213 | width: 528rpx; |
| 201 | } | 214 | } |
| 202 | .dataInfo{ | 215 | .dataInfo{ |
| 203 | height: 850rpx; | 216 | height: 850rpx; |
| 204 | width: 542rpx; | 217 | width: 542rpx; |
| 205 | } | 218 | } |
| 206 | } | 219 | } |
| 207 | .popUpWrap1{ | 220 | .popUpWrap1{ |
| 208 | height: 474rpx; | 221 | height: 474rpx; |
| 209 | width: 528rpx; | 222 | width: 528rpx; |
| 210 | border-radius: 4px; | 223 | border-radius: 4px; |
| 211 | border: 1px solid #979797; | 224 | border: 1px solid #979797; |
| 212 | } | 225 | } |
| 213 | 226 | ||
| 214 | </style> | 227 | </style> |
| 215 | 228 |
src/pages/detailStandard/detailStandard_k.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view class="detail"> | 3 | <view class="detail"> |
| 4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | 4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> |
| 5 | <view class="detail2"> | 5 | <view class="detail2"> |
| 6 | <view class="detail2_name">{{details.data.p_name}}</view> | 6 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | 7 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> |
| 8 | <view class="detail2_price"> | 8 | <view class="detail2_price"> |
| 9 | <span>¥{{details.data.p_sale_price*count}}</span> | 9 | <span>¥{{details.data.p_sale_price*count}}</span> |
| 10 | <view class="counter"> | 10 | <view class="counter"> |
| 11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
| 12 | <text>{{count}}</text> | 12 | <text>{{count}}</text> |
| 13 | <view class="btn" @click="counter(true)">+</view> | 13 | <view class="btn" @click="counter(true)">+</view> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | </view> | 16 | </view> |
| 17 | </view> | 17 | </view> |
| 18 | <view class="choose"> | 18 | <view class="choose"> |
| 19 | <view class="colour"> | 19 | <view class="colour"> |
| 20 | <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> | 20 | <view class="colour1" @click="xialachange(0)"> |
| 21 | <view class="colour_exp">*{{colour}}</view> | 21 | <text>框架颜色</text> |
| 22 | <image v-bind:src="isNone[0].img"></image> | ||
| 23 | </view> | ||
| 24 | <view class="colour_exp">*{{navData.colour}}</view> | ||
| 22 | <view> | 25 | <view> |
| 23 | <view class="colour2"> | 26 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
| 24 | <view | 27 | <view |
| 25 | v-for="(items,index) in details.data.skuList" | 28 | v-for="(items,index) in details.data.skuList" |
| 26 | :key="index" | 29 | :key="index" |
| 27 | @click="viewChoose(index)" | 30 | @click="viewChoose(index)" |
| 28 | class="colour2_view" | 31 | class="colour2_view" |
| 29 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 32 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
| 30 | > | 33 | > |
| 31 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | 34 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> |
| 32 | </view> | 35 | </view> |
| 33 | </view> | 36 | </view> |
| 34 | </view> | 37 | </view> |
| 35 | <hr/> | 38 | <hr/> |
| 36 | </view> | 39 | </view> |
| 37 | <view class="size"> | 40 | <view class="size"> |
| 38 | <view class="size1"> | 41 | <view class="size1" @click="xialachange(1)"> |
| 39 | <view class="size1_1">框架尺寸</view> | 42 | <view class="size1_1">框架尺寸</view> |
| 40 | <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> | 43 | <view><image v-bind:src="isNone[1].img"></image></view> |
| 41 | </view> | 44 | </view> |
| 42 | <view class="colour"> | 45 | <view class="colour"> |
| 43 | <view class="colour_exp">*{{colour}}</view> | 46 | <view class="colour_exp">*{{navData.colour}}</view> |
| 44 | </view> | 47 | </view> |
| 45 | <view class="D3_list"> | 48 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> |
| 46 | <view> | 49 | <view> |
| 47 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | 50 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> |
| 48 | <view class="D3_list_jDu"> | 51 | <view class="D3_list_jDu"> |
| 49 | <view class="D3_list1"> | 52 | <view class="D3_list1"> |
| 50 | <c-progress class="c-progress" :inner_widthProp="300"/> | 53 | <c-progress class="c-progress" :inner_widthProp="300"/> |
| 51 | <text>{{details.data.frame_width}}mm</text> | 54 | <text>{{details.data.frame_width}}mm</text> |
| 52 | </view> | 55 | </view> |
| 53 | <view>{{parameter[0].standard}}</view> | 56 | <view>{{parameter[0].standard}}</view> |
| 54 | </view> | 57 | </view> |
| 55 | </view> | 58 | </view> |
| 56 | <view> | 59 | <view> |
| 57 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | 60 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> |
| 58 | <view class="D3_list_jDu"> | 61 | <view class="D3_list_jDu"> |
| 59 | <view class="D3_list1"> | 62 | <view class="D3_list1"> |
| 60 | <c-progress class="c-progress" :inner_widthProp="190"/> | 63 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 61 | <view>{{details.data.glass_width}}mm</view> | 64 | <view>{{details.data.glass_width}}mm</view> |
| 62 | </view> | 65 | </view> |
| 63 | <view>{{parameter[1].standard}}</view> | 66 | <view>{{parameter[1].standard}}</view> |
| 64 | </view> | 67 | </view> |
| 65 | </view> | 68 | </view> |
| 66 | <view> | 69 | <view> |
| 67 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | 70 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> |
| 68 | <view class="D3_list_jDu"> | 71 | <view class="D3_list_jDu"> |
| 69 | <view class="D3_list1"> | 72 | <view class="D3_list1"> |
| 70 | <c-progress class="c-progress" :inner_widthProp="210"/> | 73 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 71 | <view>{{details.data.glass_height}}mm</view> | 74 | <view>{{details.data.glass_height}}mm</view> |
| 72 | </view> | 75 | </view> |
| 73 | <view>{{parameter[2].standard}}</view> | 76 | <view>{{parameter[2].standard}}</view> |
| 74 | </view> | 77 | </view> |
| 75 | </view> | 78 | </view> |
| 76 | <view> | 79 | <view> |
| 77 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | 80 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> |
| 78 | <view class="D3_list_jDu"> | 81 | <view class="D3_list_jDu"> |
| 79 | 82 | ||
| 80 | <view class="D3_list1"> | 83 | <view class="D3_list1"> |
| 81 | <c-progress class="c-progress" :inner_widthProp="160"/> | 84 | <c-progress class="c-progress" :inner_widthProp="160"/> |
| 82 | <view>{{details.data.nose_width}}mm</view> | 85 | <view>{{details.data.nose_width}}mm</view> |
| 83 | </view> | 86 | </view> |
| 84 | <view>{{parameter[3].standard}}</view> | 87 | <view>{{parameter[3].standard}}</view> |
| 85 | </view> | 88 | </view> |
| 86 | </view> | 89 | </view> |
| 87 | <view> | 90 | <view> |
| 88 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | 91 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> |
| 89 | <view class="D3_list_jDu"> | 92 | <view class="D3_list_jDu"> |
| 90 | <view class="D3_list1"> | 93 | <view class="D3_list1"> |
| 91 | <c-progress class="c-progress" :inner_widthProp="260"/> | 94 | <c-progress class="c-progress" :inner_widthProp="260"/> |
| 92 | <view>{{details.data.leg_long}}mm</view> | 95 | <view>{{details.data.leg_long}}mm</view> |
| 93 | </view> | 96 | </view> |
| 94 | <view>{{parameter[4].standard}}</view> | 97 | <view>{{parameter[4].standard}}</view> |
| 95 | </view> | 98 | </view> |
| 96 | </view> | 99 | </view> |
| 97 | <hr/> | 100 | <hr/> |
| 98 | </view> | 101 | </view> |
| 99 | </view> | 102 | </view> |
| 100 | <view class="part"> | 103 | <view class="part"> |
| 101 | <view class="size1"> | 104 | <view class="size1" @click="xialachange(2)"> |
| 102 | <view class="size1_1">配件</view> | 105 | <view class="size1_1" >配件</view> |
| 103 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | 106 | <view> |
| 107 | <span>+¥0.00</span> | ||
| 108 | <image v-bind:src="isNone[2].img"></image> | ||
| 109 | </view> | ||
| 104 | </view> | 110 | </view> |
| 105 | <view class="colour_exp">*0290</view> | 111 | <view class="colour_exp">*0290</view> |
| 106 | <view class="part_som"> | 112 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
| 107 | <view | 113 | <view |
| 108 | v-for="(part) in part" | 114 | v-for="(part) in part" |
| 109 | :key="part.key" | 115 | :key="part.key" |
| 110 | v-bind:class="{'size_viewed': part.is_actived}" | 116 | v-bind:class="{'size_viewed': part.is_actived}" |
| 111 | > | 117 | > |
| 112 | <image v-bind:src="part.img"></image> | 118 | <image v-bind:src="part.img"></image> |
| 113 | </view> | 119 | </view> |
| 114 | </view> | 120 | </view> |
| 115 | </view> | 121 | </view> |
| 116 | </view> | 122 | </view> |
| 117 | <view class="buy"> | 123 | <view class="buy"> |
| 118 | <view class="buy1">选了镜框,想选镜片?</view> | 124 | <view class="buy1">选了镜框,想选镜片?</view> |
| 119 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | 125 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
| 120 | <view class="buy3"> | 126 | <view class="buy3"> |
| 121 | <view class="buy3_1">暂时不选</view> | 127 | <view class="buy3_1">暂时不选</view> |
| 122 | <view class="buy3_2" @click="popArgs">立即去选</view> | 128 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 123 | </view> | 129 | </view> |
| 124 | </view> | 130 | </view> |
| 125 | <view class="zhanwei"></view> | 131 | <view class="zhanwei"></view> |
| 126 | <view class="button"><view>立即结算</view></view> | 132 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
| 127 | </view> | 133 | </view> |
| 128 | </template> | 134 | </template> |
| 129 | <script> | 135 | <script> |
| 130 | import CProgress from '../../components/UniSliper/UniSliper' | 136 | import CProgress from '../../components/UniSliper/UniSliper' |
| 131 | import store from '@/store' | 137 | import store from '@/store' |
| 132 | 138 | ||
| 133 | export default { | 139 | export default { |
| 134 | components: { | 140 | components: { |
| 135 | CProgress | 141 | CProgress |
| 136 | }, | 142 | }, |
| 137 | data(){ | 143 | data(){ |
| 138 | return{ | 144 | return{ |
| 139 | count: 1, | 145 | count: 1, |
| 140 | colour: '1.56非球面防蓝光_亚黑色', | 146 | // colour: '1.56非球面防蓝光_亚黑色', |
| 141 | chooseNum : '', | 147 | chooseNum : '', |
| 148 | isNone:[ | ||
| 149 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 150 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 151 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 152 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 153 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 154 | ], | ||
| 155 | //传参 | ||
| 156 | navData:{ | ||
| 157 | pid: "26", | ||
| 158 | p_root_index: "2", | ||
| 159 | name:'', | ||
| 160 | price:'', | ||
| 161 | colour: '1.56非球面防蓝光_亚黑色', | ||
| 162 | }, | ||
| 163 | |||
| 164 | //尺寸 | ||
| 142 | parameter:[ | 165 | parameter:[ |
| 143 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 166 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
| 144 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 167 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
| 145 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 168 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
| 146 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | 169 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
| 147 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | 170 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
| 148 | ], | 171 | ], |
| 149 | //配饰 | 172 | //配饰 |
| 150 | part:[ | 173 | part:[ |
| 151 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | 174 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
| 152 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 175 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 153 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 176 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 154 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 177 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 155 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 178 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 156 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 179 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 157 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 180 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 158 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 181 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 159 | ], | 182 | ], |
| 160 | } | 183 | } |
| 161 | }, | 184 | }, |
| 162 | 185 | ||
| 163 | computed: { | 186 | computed: { |
| 164 | details(){ | 187 | details(){ |
| 165 | return this.$store.state.detailStandard_k.list | 188 | return this.$store.state.detailStandard_k.list |
| 166 | }, | 189 | }, |
| 167 | }, | 190 | }, |
| 168 | onLoad:function(){ | 191 | onLoad:function(){ |
| 169 | store.dispatch('detailStandard_k/fetch', { | 192 | store.dispatch('detailStandard_k/fetch', { |
| 170 | uid: "1", | 193 | uid: "1", |
| 171 | pid: "26", | 194 | pid: "26", |
| 195 | p_root_index: "2" | ||
| 172 | }); | 196 | }); |
| 173 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); | 197 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); |
| 174 | }, | 198 | }, |
| 175 | methods: { | 199 | methods: { |
| 176 | counter(isadd){ | 200 | counter(isadd){ |
| 177 | if(isadd){ | 201 | if(isadd){ |
| 178 | this.count++ | 202 | this.count++ |
| 179 | }else{ | 203 | }else{ |
| 180 | this.count <= 1? this.disabled = true:this.count-- | 204 | this.count <= 1? this.disabled = true:this.count-- |
| 181 | } | 205 | } |
| 182 | }, | 206 | }, |
| 207 | xialachange(index){ | ||
| 208 | this.isNone[index].state = !this.isNone[index].state; | ||
| 209 | if(this.isNone[index].state){ | ||
| 210 | this.isNone[index].img = '/static/img/detail/right.png' | ||
| 211 | }else{ | ||
| 212 | this.isNone[index].img = '/static/img/detail/xiala.png' | ||
| 213 | } | ||
| 214 | }, | ||
| 183 | colourChange(index,e){ | 215 | colourChange(index,e){ |
| 184 | this.colour = e ; //颜色选择 | 216 | this.navData.colour = e ; //颜色选择 |
| 185 | // console.log(index,e); | 217 | console.log(index,this.navData.colour); |
| 186 | 218 | ||
| 187 | }, | 219 | }, |
| 188 | viewChoose(index){ | 220 | viewChoose(index,e){ |
| 189 | this.chooseNum = index | 221 | this.chooseNum = index |
| 190 | }, | 222 | }, |
| 191 | popArgs(){ | 223 | popArgs(){ |
| 192 | uni.navigateTo({ | 224 | uni.navigateTo({ |
| 193 | url: '../detailsChoiceArgs/detailsChoiceArgs', | 225 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
| 194 | success: res => {}, | 226 | success: res => {}, |
| 195 | fail: () => {}, | 227 | fail: () => {}, |
| 196 | complete: () => {} | 228 | complete: () => {} |
| 197 | }); | 229 | }); |
| 198 | } | 230 | }, |
| 231 | //跳转确认订单页及传参 | ||
| 232 | popSure(name,price){ | ||
| 233 | this.navData.name = name; | ||
| 234 | this.navData.price = price; | ||
| 235 | var navData = JSON.stringify(this.navData); | ||
| 236 | uni.navigateTo({ | ||
| 237 | url: '../confirmOrder/confirmOrder?index='+navData, | ||
| 238 | }); | ||
| 239 | console.log(this.navData) | ||
| 240 | }, | ||
| 199 | } | 241 | } |
| 200 | 242 | ||
| 201 | } | 243 | } |
| 202 | </script> | 244 | </script> |
| 203 | 245 | ||
| 204 | <style lang="scss"> | 246 | <style lang="scss"> |
| 205 | .container{ | 247 | .container{ |
| 206 | min-height: 100vh; | 248 | min-height: 100vh; |
| 207 | background: #F2F2F2; | 249 | background: #F2F2F2; |
| 208 | padding-top: 10px; | 250 | padding-top: 10px; |
| 209 | box-sizing: border-box; | 251 | box-sizing: border-box; |
| 210 | } | 252 | } |
| 211 | hr{ | 253 | hr{ |
| 212 | border: none; | 254 | border: none; |
| 213 | height: 1px; | 255 | height: 1px; |
| 214 | background: #F2F2F2; | 256 | background: #F2F2F2; |
| 215 | margin-top: 18px; | 257 | margin-top: 18px; |
| 216 | } | 258 | } |
| 217 | .detail{ | 259 | .detail{ |
| 218 | height: 272rpx; | 260 | height: 272rpx; |
| 219 | background: #FFFFFF; | 261 | background: #FFFFFF; |
| 220 | border-radius: 8px; | 262 | border-radius: 8px; |
| 221 | padding: 16px; | 263 | padding: 16px; |
| 222 | box-sizing: border-box; | 264 | box-sizing: border-box; |
| 223 | display: flex; | 265 | display: flex; |
| 224 | justify-content: space-between; | 266 | justify-content: space-between; |
| 225 | align-items: center; | 267 | align-items: center; |
| 226 | } | 268 | } |
| 227 | .detail1{ | 269 | .detail1{ |
| 228 | height: 178rpx; | 270 | height: 178rpx; |
| 229 | width: 188rpx; | 271 | width: 188rpx; |
| 230 | image{ | 272 | image{ |
| 231 | width: 100%; | 273 | width: 100%; |
| 232 | height: 100%; | 274 | height: 100%; |
| 233 | border-radius: 8px; | 275 | border-radius: 8px; |
| 234 | } | 276 | } |
| 235 | } | 277 | } |
| 236 | .detail2{ | 278 | .detail2{ |
| 237 | width: 68%; | 279 | width: 68%; |
| 238 | view{ | 280 | view{ |
| 239 | margin-bottom: 6px; | 281 | margin-bottom: 6px; |
| 240 | font-family: PingFangSC-Regular; | 282 | font-family: PingFangSC-Regular; |
| 241 | } | 283 | } |
| 242 | .detail2_name{ | 284 | .detail2_name{ |
| 243 | font-size: 14px; | 285 | font-size: 14px; |
| 244 | color: #333333; | 286 | color: #333333; |
| 245 | letter-spacing: -0.26px; | 287 | letter-spacing: -0.26px; |
| 246 | line-height: 18px; | 288 | line-height: 18px; |
| 247 | overflow:hidden; | 289 | overflow:hidden; |
| 248 | text-overflow:ellipsis; | 290 | text-overflow:ellipsis; |
| 249 | display:-webkit-box; | 291 | display:-webkit-box; |
| 250 | -webkit-box-orient:vertical; | 292 | -webkit-box-orient:vertical; |
| 251 | -webkit-line-clamp:2; | 293 | -webkit-line-clamp:2; |
| 252 | } | 294 | } |
| 253 | .detail2_tui{ | 295 | .detail2_tui{ |
| 254 | font-size: 10px; | 296 | font-size: 10px; |
| 255 | color: #999999; | 297 | color: #999999; |
| 256 | letter-spacing: -0.19px; | 298 | letter-spacing: -0.19px; |
| 257 | span{ | 299 | span{ |
| 258 | margin-right: 10px; | 300 | margin-right: 10px; |
| 259 | } | 301 | } |
| 260 | } | 302 | } |
| 261 | .detail2_price{ | 303 | .detail2_price{ |
| 262 | font-size: 14px; | 304 | font-size: 14px; |
| 263 | color: #FF6B4A; | 305 | color: #FF6B4A; |
| 264 | letter-spacing: -0.26px; | 306 | letter-spacing: -0.26px; |
| 265 | } | 307 | } |
| 266 | } | 308 | } |
| 267 | .counter{ | 309 | .counter{ |
| 268 | display: flex; | 310 | display: flex; |
| 269 | flex-direction: row; | 311 | flex-direction: row; |
| 270 | justify-content: space-between; | 312 | justify-content: space-between; |
| 271 | font-size: 28rpx; | 313 | font-size: 28rpx; |
| 272 | color: #333333; | 314 | color: #333333; |
| 273 | width: 122rpx; | 315 | width: 122rpx; |
| 274 | float: right; | 316 | float: right; |
| 275 | .btn{ | 317 | .btn{ |
| 276 | display: flex; | 318 | display: flex; |
| 277 | justify-content: center; | 319 | justify-content: center; |
| 278 | line-height: 32rpx; | 320 | line-height: 32rpx; |
| 279 | height: 32rpx; | 321 | height: 32rpx; |
| 280 | width: 32rpx; | 322 | width: 32rpx; |
| 281 | background-color: #F2F2F2; | 323 | background-color: #F2F2F2; |
| 282 | color: #CFCFCF; | 324 | color: #CFCFCF; |
| 283 | } | 325 | } |
| 284 | } | 326 | } |
| 285 | .choose{ | 327 | .choose{ |
| 286 | background: #FFFFFF; | 328 | background: #FFFFFF; |
| 287 | padding: 16px; | 329 | padding: 16px; |
| 288 | box-sizing: border-box; | 330 | box-sizing: border-box; |
| 289 | margin-top: 10px; | 331 | margin-top: 10px; |
| 290 | border-radius: 8px; | 332 | border-radius: 8px; |
| 291 | .colour1{ | 333 | .colour1{ |
| 292 | span{ | 334 | span{ |
| 293 | font-family: PingFangSC-Medium; | 335 | font-family: PingFangSC-Medium; |
| 294 | font-size: 16px; | 336 | font-size: 16px; |
| 295 | color: #333333; | 337 | color: #333333; |
| 296 | letter-spacing: -0.3px; | 338 | letter-spacing: -0.3px; |
| 297 | text-align: justify; | 339 | text-align: justify; |
| 298 | line-height: 24px; | 340 | line-height: 24px; |
| 299 | font-weight: bold; | 341 | font-weight: bold; |
| 300 | } | 342 | } |
| 301 | image{ | 343 | image{ |
| 302 | float: right; | 344 | float: right; |
| 303 | width: 40rpx; | 345 | width: 40rpx; |
| 304 | height: 36rpx; | 346 | height: 36rpx; |
| 305 | } | 347 | } |
| 306 | } | 348 | } |
| 307 | .colour_exp{ | 349 | .colour_exp{ |
| 308 | font-family: PingFangSC-Regular; | 350 | font-family: PingFangSC-Regular; |
| 309 | font-size: 12px; | 351 | font-size: 12px; |
| 310 | color: #666666; | 352 | color: #666666; |
| 311 | letter-spacing: 0; | 353 | letter-spacing: 0; |
| 312 | margin-top: 10px; | 354 | margin-top: 10px; |
| 313 | margin-bottom: 10px; | 355 | margin-bottom: 10px; |
| 314 | } | 356 | } |
| 315 | .colour2{ | 357 | .colour2{ |
| 316 | display: grid; | 358 | display: grid; |
| 317 | grid-template-columns: repeat(5, 17%); | 359 | grid-template-columns: repeat(5, 17%); |
| 318 | justify-content: space-between ; | 360 | justify-content: space-between ; |
| 319 | grid-row-gap: 10px; | 361 | grid-row-gap: 10px; |
| 320 | margin-bottom: 14px; | 362 | margin-bottom: 14px; |
| 321 | .colour2_view{ | 363 | .colour2_view{ |
| 322 | border: 1px solid #F2F2F2; | 364 | border: 1px solid #F2F2F2; |
| 323 | image{ | 365 | image{ |
| 324 | width: 100rpx; | 366 | width: 100rpx; |
| 325 | height: 60rpx; | 367 | height: 60rpx; |
| 326 | } | 368 | } |
| 327 | } | 369 | } |
| 328 | .colour2_viewed{ | 370 | .colour2_viewed{ |
| 329 | border: 1px solid #FF6B4A; | 371 | border: 1px solid #FF6B4A; |
| 330 | image{ | 372 | image{ |
| 331 | width: 100rpx; | 373 | width: 100rpx; |
| 332 | height: 60rpx; | 374 | height: 60rpx; |
| 333 | } | 375 | } |
| 334 | } | 376 | } |
| 335 | } | 377 | } |
| 378 | .colour2_none{ | ||
| 379 | display: none; | ||
| 380 | } | ||
| 336 | } | 381 | } |
| 337 | .size,.part{ | 382 | .size,.part{ |
| 338 | margin-top:14px; | 383 | margin-top:14px; |
| 339 | .size1{ | 384 | .size1{ |
| 340 | display: flex; | 385 | display: flex; |
| 341 | justify-content: space-between; | 386 | justify-content: space-between; |
| 342 | margin-bottom: 10px; | 387 | margin-bottom: 10px; |
| 343 | .size1_1{ | 388 | .size1_1{ |
| 344 | font-weight: bold; | 389 | font-weight: bold; |
| 345 | font-family: PingFangSC-Medium; | 390 | font-family: PingFangSC-Medium; |
| 346 | font-size: 16px; | 391 | font-size: 16px; |
| 347 | color: #333333; | 392 | color: #333333; |
| 348 | letter-spacing: -0.3px; | 393 | letter-spacing: -0.3px; |
| 349 | line-height: 24px; | 394 | line-height: 24px; |
| 350 | } | 395 | } |
| 351 | view{ | 396 | view{ |
| 352 | span{ | 397 | span{ |
| 353 | font-family: PingFangSC-Regular; | 398 | font-family: PingFangSC-Regular; |
| 354 | font-size: 14px; | 399 | font-size: 14px; |
| 355 | color: #FF6B4A; | 400 | color: #FF6B4A; |
| 356 | letter-spacing: -0.26px; | 401 | letter-spacing: -0.26px; |
| 357 | margin-right: 12px; | 402 | margin-right: 12px; |
| 358 | } | 403 | } |
| 359 | image{ | 404 | image{ |
| 360 | width: 40rpx; | 405 | width: 40rpx; |
| 361 | height: 36rpx; | 406 | height: 36rpx; |
| 362 | } | 407 | } |
| 363 | } | 408 | } |
| 364 | } | 409 | } |
| 365 | .size2{ | 410 | .size2{ |
| 366 | view{ | 411 | view{ |
| 367 | display: inline-flex; | 412 | display: inline-flex; |
| 368 | align-items: center; | 413 | align-items: center; |
| 369 | justify-content: center; //字体居中 | 414 | justify-content: center; //字体居中 |
| 370 | margin-right: 12px; | 415 | margin-right: 12px; |
| 371 | margin-bottom: 20px; | 416 | margin-bottom: 20px; |
| 372 | width: 136rpx; | 417 | width: 136rpx; |
| 373 | height: 60rpx; | 418 | height: 60rpx; |
| 374 | background: #F2F2F2; | 419 | background: #F2F2F2; |
| 375 | border-radius: 2px; | 420 | border-radius: 2px; |
| 376 | font-family: PingFangSC-Regular; | 421 | font-family: PingFangSC-Regular; |
| 377 | font-size: 12px; | 422 | font-size: 12px; |
| 378 | color: #666666; | 423 | color: #666666; |
| 379 | } | 424 | } |
| 380 | view:hover{ | 425 | view:hover{ |
| 381 | color: #FF6B4A; | 426 | color: #FF6B4A; |
| 382 | background: rgba(255,107,74,0.15); | 427 | background: rgba(255,107,74,0.15); |
| 383 | } | 428 | } |
| 384 | } | 429 | } |
| 385 | .D3_list{ | 430 | .D3_list{ |
| 386 | margin-bottom: 4px; | 431 | margin-bottom: 4px; |
| 387 | } | 432 | } |
| 388 | .D3_list>view{ | 433 | .D3_list>view{ |
| 389 | display: flex; | 434 | display: flex; |
| 390 | align-content: center; | 435 | align-content: center; |
| 391 | margin-bottom: 10px; | 436 | margin-bottom: 10px; |
| 392 | view{ | 437 | view{ |
| 393 | margin-right: 10px; | 438 | margin-right: 10px; |
| 394 | } | 439 | } |
| 395 | } | 440 | } |
| 396 | .D3_list image{ | 441 | .D3_list image{ |
| 397 | width: 50px; | 442 | width: 50px; |
| 398 | height: 25px; | 443 | height: 25px; |
| 399 | margin-right: 6px; | 444 | margin-right: 6px; |
| 400 | } | 445 | } |
| 401 | .D3_list span{ | 446 | .D3_list span{ |
| 402 | margin-left: 6px; | 447 | margin-left: 6px; |
| 403 | margin-right: 5px; | 448 | margin-right: 5px; |
| 404 | font-family: 'PingFangSC-Regular'; | 449 | font-family: 'PingFangSC-Regular'; |
| 405 | } | 450 | } |
| 406 | .D3_list_jDu{ | 451 | .D3_list_jDu{ |
| 407 | view{ | 452 | view{ |
| 408 | font-family: PingFangSC-Regular; | 453 | font-family: PingFangSC-Regular; |
| 409 | font-size: 10px; | 454 | font-size: 10px; |
| 410 | color: #999999; | 455 | color: #999999; |
| 411 | letter-spacing: -0.19px; | 456 | letter-spacing: -0.19px; |
| 412 | } | 457 | } |
| 413 | .D3_list1{ | 458 | .D3_list1{ |
| 414 | display: flex; | 459 | display: flex; |
| 415 | } | 460 | } |
| 416 | } | 461 | } |
| 417 | } | 462 | } |
| 418 | .part{ | 463 | .part{ |
| 419 | .part_som{ | 464 | .part_som{ |
| 420 | display: grid; | 465 | display: grid; |
| 421 | justify-content: space-between; | 466 | justify-content: space-between; |
| 422 | grid-template-columns: repeat(4, 22%); | 467 | grid-template-columns: repeat(4, 22%); |
| 423 | grid-row-gap: 12px; | 468 | grid-row-gap: 12px; |
| 424 | margin-bottom: 14px; | 469 | margin-bottom: 14px; |
| 425 | view{ | 470 | view{ |
| 426 | border: 1px solid #F2F2F2; | 471 | border: 1px solid #F2F2F2; |
| 427 | height: 72rpx; | 472 | height: 72rpx; |
| 428 | image{ | 473 | image{ |
| 429 | width: 100%; | 474 | width: 100%; |
| 430 | height: 100%; | 475 | height: 100%; |
| 431 | } | 476 | } |
| 432 | } | 477 | } |
| 433 | .size_viewed{ | 478 | .size_viewed{ |
| 434 | border: 1px solid #FF6B4A; | 479 | border: 1px solid #FF6B4A; |
| 435 | height: 72rpx; | 480 | height: 72rpx; |
| 436 | image{ | 481 | image{ |
| 437 | width: 100%; | 482 | width: 100%; |
| 438 | height: 100%; | 483 | height: 100%; |
| 439 | } | 484 | } |
| 440 | } | 485 | } |
| 441 | } | 486 | } |
| 487 | .colour2_none{ | ||
| 488 | display: none; | ||
| 489 | } | ||
| 442 | } | 490 | } |
| 443 | 491 | ||
| 444 | .buy{ | 492 | .buy{ |
| 445 | height: 300rpx; | 493 | height: 300rpx; |
| 446 | background: #FFFFFF ; | 494 | background: #FFFFFF ; |
| 447 | margin-top: 10px; | 495 | margin-top: 10px; |
| 448 | border-radius: 8px; | 496 | border-radius: 8px; |
| 449 | padding-top: 20px; | 497 | padding-top: 20px; |
| 450 | box-sizing: border-box; | 498 | box-sizing: border-box; |
| 451 | margin-bottom: 20px; | 499 | margin-bottom: 20px; |
| 452 | } | 500 | } |
| 453 | .buy1{ | 501 | .buy1{ |
| 454 | font-family: PingFangSC-Medium; | 502 | font-family: PingFangSC-Medium; |
| 455 | font-size: 16px; | 503 | font-size: 16px; |
| 456 | font-weight: bold; | 504 | font-weight: bold; |
| 457 | color: #333333; | 505 | color: #333333; |
| 458 | text-align: center; | 506 | text-align: center; |
| 459 | } | 507 | } |
| 460 | .buy2{ | 508 | .buy2{ |
| 461 | font-family: PingFangSC-Regular; | 509 | font-family: PingFangSC-Regular; |
| 462 | font-size: 12px; | 510 | font-size: 12px; |
| 463 | color: #999999; | 511 | color: #999999; |
| 464 | text-align: center; | 512 | text-align: center; |
| 465 | margin: 10px; | 513 | margin: 10px; |
| 466 | } | 514 | } |
| 467 | .buy3{ | 515 | .buy3{ |
| 468 | font-family: PingFangSC-Regular; | 516 | font-family: PingFangSC-Regular; |
| 469 | font-size: 16px; | 517 | font-size: 16px; |
| 470 | display: flex; | 518 | display: flex; |
| 471 | justify-content: center; | 519 | justify-content: center; |
| 472 | margin-top: 14px; | 520 | margin-top: 14px; |
| 473 | view{ | 521 | view{ |
| 474 | border-radius: 20px; | 522 | border-radius: 20px; |
| 475 | width: 240rpx; | 523 | width: 240rpx; |
| 476 | height: 80rpx; | 524 | height: 80rpx; |
| 477 | display: flex; | 525 | display: flex; |
| 478 | justify-content: center; | 526 | justify-content: center; |
| 479 | align-items: center; | 527 | align-items: center; |
| 480 | } | 528 | } |
| 481 | .buy3_1{ | 529 | .buy3_1{ |
| 482 | margin-right: 20px; | 530 | margin-right: 20px; |
| 483 | background: rgba(255,107,74,0.15); | 531 | background: rgba(255,107,74,0.15); |
| 484 | color: #FF6B4A ; | 532 | color: #FF6B4A ; |
| 485 | } | 533 | } |
| 486 | .buy3_2{ | 534 | .buy3_2{ |
| 487 | background: #FF6B4A; | 535 | background: #FF6B4A; |
| 488 | color: #FFFFFF ; | 536 | color: #FFFFFF ; |
| 489 | } | 537 | } |
| 490 | } | 538 | } |
| 491 | .zhanwei{ | 539 | .zhanwei{ |
| 492 | background: #F2F2F2; | 540 | background: #F2F2F2; |
| 493 | height: 120rpx; | 541 | height: 120rpx; |
| 494 | } | 542 | } |
| 495 | .button{ | 543 | .button{ |
| 496 | position: fixed; | 544 | position: fixed; |
| 497 | bottom: 0; | 545 | bottom: 0; |
| 498 | width:100%; | 546 | width:100%; |
| 499 | height: 112rpx; | 547 | height: 112rpx; |
| 500 | background: #FF6B4A 100%; | 548 | background: #FF6B4A 100%; |
| 501 | view{ | 549 | view{ |
| 502 | color: #FFFFFF; | 550 | color: #FFFFFF; |
| 503 | height: 100%; | 551 | height: 100%; |
| 504 | display: flex; | 552 | display: flex; |
| 505 | justify-content: center; | 553 | justify-content: center; |
| 506 | align-items: center; | 554 | align-items: center; |
| 507 | font-family: PingFangSC-Regular; | 555 | font-family: PingFangSC-Regular; |
| 508 | font-size: 16px; | 556 | font-size: 16px; |
| 509 | } | 557 | } |
| 510 | } | 558 | } |
| 511 | </style> | 559 | </style> |
src/pages/detailStandard/detailStandard_sun.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view> |
| 3 | <view class="container" v-if="type===2"> | ||
| 3 | <view class="detail"> | 4 | <view class="detail"> |
| 4 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | 5 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> |
| 5 | <view class="detail2"> | 6 | <view class="detail2"> |
| 6 | <view class="detail2_name">{{details.data.p_name}}</view> | 7 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 7 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> | 8 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> |
| 8 | <view class="detail2_price"> | 9 | <view class="detail2_price"> |
| 9 | <text>¥{{details.data.p_sale_price*count}}</text> | 10 | <text>¥{{details.data.p_sale_price*count}}</text> |
| 10 | <view class="counter"> | 11 | <view class="counter"> |
| 11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 12 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
| 12 | <text>{{count}}</text> | 13 | <text>{{count}}</text> |
| 13 | <view class="btn" @click="counter(true)">+</view> | 14 | <view class="btn" @click="counter(true)">+</view> |
| 14 | </view> | 15 | </view> |
| 15 | </view> | 16 | </view> |
| 16 | </view> | 17 | </view> |
| 17 | </view> | 18 | </view> |
| 18 | <view class="choose"> | 19 | <view class="choose"> |
| 19 | <view class="colour"> | 20 | <view class="colour"> |
| 20 | <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view> | 21 | <view class="colour1" @click="xialachange(0)"> |
| 21 | <view class="colour_exp">*{{colour}}</view> | 22 | <text>框架颜色</text> |
| 23 | <image v-bind:src="isNone[0].img"></image> | ||
| 24 | </view> | ||
| 25 | <view class="colour_exp">*{{navData.colour}}</view> | ||
| 22 | <view> | 26 | <view> |
| 23 | <view class="colour2"> | 27 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
| 24 | <view | 28 | <view |
| 25 | v-for="(items,index) in details.data.skuList" | 29 | v-for="(items,index) in details.data.skuList" |
| 26 | :key="index" | 30 | :key="index" |
| 27 | @click="viewChoose(index)" | 31 | @click="viewChoose(index)" |
| 28 | class="colour2_view" | 32 | class="colour2_view" |
| 29 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 33 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
| 30 | > | 34 | > |
| 31 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | 35 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> |
| 32 | </view> | 36 | </view> |
| 33 | </view> | 37 | </view> |
| 34 | </view> | 38 | </view> |
| 35 | <hr/> | 39 | <hr/> |
| 36 | </view> | 40 | </view> |
| 37 | <view class="colour"> | 41 | <view class="colour"> |
| 38 | <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view> | 42 | <view class="colour1" @click="xialachange(1)"> |
| 43 | <text>镜片颜色</text> | ||
| 44 | <image v-bind:src="isNone[1].img"></image> | ||
| 45 | </view> | ||
| 39 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | 46 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
| 40 | <view> | 47 | <view v-bind:class="{'colour2_none' : isNone[1].state}"> |
| 41 | <view class="jp_colour2"> | 48 | <view class="jp_colour2"> |
| 42 | <view | 49 | <view |
| 43 | v-for="(items,index) in jp_colour" | 50 | v-for="(items,index) in jp_colour" |
| 44 | :key="index" | 51 | :key="index" |
| 45 | class="jp_colour2_view" | 52 | class="jp_colour2_view" |
| 46 | > | 53 | > |
| 47 | <image v-bind:src="items.img"></image> | 54 | <image v-bind:src="items.img"></image> |
| 48 | </view> | 55 | </view> |
| 49 | </view> | 56 | </view> |
| 50 | </view> | 57 | </view> |
| 51 | <hr/> | 58 | <hr/> |
| 52 | </view> | 59 | </view> |
| 53 | <view class="colour"> | 60 | <view class="colour"> |
| 54 | <view class="colour1"> | 61 | <view class="colour1" @click="xialachange(2)"> |
| 55 | <text>{{details.data.attrList[0].meta_name}}</text> | 62 | <text>{{details.data.attrList[0].meta_name}}</text> |
| 56 | <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> | 63 | <text class="colour_exp colour1_span2">注:折射率越高,镜片越薄</text> |
| 57 | <image src="/static/img/detail/xiala.png"></image> | 64 | <image v-bind:src="isNone[2].img"></image> |
| 58 | </view> | 65 | </view> |
| 59 | <view> | 66 | <view> |
| 60 | <view class="split"> | 67 | <view class="colour_exp">*{{navData.split}}</view> |
| 68 | <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> | ||
| 61 | <view | 69 | <view |
| 62 | v-for="(items,index) in details.data.attrList[0].attr" | 70 | v-for="(items,index) in details.data.attrList[0].attr" |
| 63 | :key="index" | 71 | :key="index" |
| 64 | > | 72 | > |
| 65 | <view | 73 | <view |
| 66 | class="split_colour2" | 74 | class="split_colour2" |
| 67 | @click="splitChoose(index)" | 75 | @click="splitChoose(index,items.name)" |
| 68 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" | 76 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" |
| 69 | >{{items.name}}</view> | 77 | >{{items.name}}</view> |
| 70 | </view> | 78 | </view> |
| 71 | </view> | 79 | </view> |
| 72 | </view> | 80 | </view> |
| 73 | <hr/> | 81 | <hr/> |
| 74 | </view> | 82 | </view> |
| 75 | <view class="size"> | 83 | <view class="size"> |
| 76 | <view class="size1"> | 84 | <view class="size1" @click="xialachange(3)"> |
| 77 | <view class="size1_1">框架尺寸</view> | 85 | <view class="size1_1">框架尺寸</view> |
| 78 | <view><span>+¥20</span><image src="/static/img/detail/xiala.png"></image></view> | 86 | <view><image v-bind:src="isNone[3].img"></image></view> |
| 79 | </view> | 87 | </view> |
| 80 | <view class="colour"> | 88 | <view class="colour"> |
| 81 | <view class="colour_exp">*{{colour}}</view> | 89 | <view class="colour_exp">*{{navData.colour}}</view> |
| 82 | </view> | 90 | </view> |
| 83 | <view class="D3_list"> | 91 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> |
| 84 | <view> | 92 | <view> |
| 85 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | 93 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> |
| 86 | <view class="D3_list_jDu"> | 94 | <view class="D3_list_jDu"> |
| 87 | <view class="D3_list1"> | 95 | <view class="D3_list1"> |
| 88 | <c-progress class="c-progress" :inner_widthProp="300"/> | 96 | <c-progress class="c-progress" :inner_widthProp="300"/> |
| 89 | <text>{{details.data.frame_width}}mm</text> | 97 | <text>{{details.data.frame_width}}mm</text> |
| 90 | </view> | 98 | </view> |
| 91 | <view>{{parameter[0].standard}}</view> | 99 | <view>{{parameter[0].standard}}</view> |
| 92 | </view> | 100 | </view> |
| 93 | </view> | 101 | </view> |
| 94 | <view> | 102 | <view> |
| 95 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | 103 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> |
| 96 | <view class="D3_list_jDu"> | 104 | <view class="D3_list_jDu"> |
| 97 | <view class="D3_list1"> | 105 | <view class="D3_list1"> |
| 98 | <c-progress class="c-progress" :inner_widthProp="190"/> | 106 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 99 | <view>{{details.data.glass_width}}mm</view> | 107 | <view>{{details.data.glass_width}}mm</view> |
| 100 | </view> | 108 | </view> |
| 101 | <view>{{parameter[1].standard}}</view> | 109 | <view>{{parameter[1].standard}}</view> |
| 102 | </view> | 110 | </view> |
| 103 | </view> | 111 | </view> |
| 104 | <view> | 112 | <view> |
| 105 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | 113 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> |
| 106 | <view class="D3_list_jDu"> | 114 | <view class="D3_list_jDu"> |
| 107 | <view class="D3_list1"> | 115 | <view class="D3_list1"> |
| 108 | <c-progress class="c-progress" :inner_widthProp="210"/> | 116 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 109 | <view>{{details.data.glass_height}}mm</view> | 117 | <view>{{details.data.glass_height}}mm</view> |
| 110 | </view> | 118 | </view> |
| 111 | <view>{{parameter[2].standard}}</view> | 119 | <view>{{parameter[2].standard}}</view> |
| 112 | </view> | 120 | </view> |
| 113 | </view> | 121 | </view> |
| 114 | <view> | 122 | <view> |
| 115 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | 123 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> |
| 116 | <view class="D3_list_jDu"> | 124 | <view class="D3_list_jDu"> |
| 117 | 125 | ||
| 118 | <view class="D3_list1"> | 126 | <view class="D3_list1"> |
| 119 | <c-progress class="c-progress" :inner_widthProp="160"/> | 127 | <c-progress class="c-progress" :inner_widthProp="160"/> |
| 120 | <view>{{details.data.nose_width}}mm</view> | 128 | <view>{{details.data.nose_width}}mm</view> |
| 121 | </view> | 129 | </view> |
| 122 | <view>{{parameter[3].standard}}</view> | 130 | <view>{{parameter[3].standard}}</view> |
| 123 | </view> | 131 | </view> |
| 124 | </view> | 132 | </view> |
| 125 | <view> | 133 | <view> |
| 126 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | 134 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> |
| 127 | <view class="D3_list_jDu"> | 135 | <view class="D3_list_jDu"> |
| 128 | <view class="D3_list1"> | 136 | <view class="D3_list1"> |
| 129 | <c-progress class="c-progress" :inner_widthProp="260"/> | 137 | <c-progress class="c-progress" :inner_widthProp="260"/> |
| 130 | <view>{{details.data.leg_long}}mm</view> | 138 | <view>{{details.data.leg_long}}mm</view> |
| 131 | </view> | 139 | </view> |
| 132 | <view>{{parameter[4].standard}}</view> | 140 | <view>{{parameter[4].standard}}</view> |
| 133 | </view> | 141 | </view> |
| 134 | </view> | 142 | </view> |
| 135 | <hr/> | ||
| 136 | </view> | 143 | </view> |
| 144 | <hr/> | ||
| 137 | </view> | 145 | </view> |
| 138 | <view class="part"> | 146 | <view class="part"> |
| 139 | <view class="size1"> | 147 | <view class="size1" @click="xialachange(4)"> |
| 140 | <view class="size1_1">配件</view> | 148 | <view class="size1_1">配件</view> |
| 141 | <view><span>+¥0.00</span><image src="/static/img/detail/xiala.png"></image></view> | 149 | <view><span>+¥0.00</span><image v-bind:src="isNone[4].img"></image></view> |
| 150 | </view> | ||
| 151 | <view class="colour_exp">*0290</view> | ||
| 152 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> | ||
| 153 | <view | ||
| 154 | v-for="(part) in part" | ||
| 155 | :key="part.key" | ||
| 156 | v-bind:class="{'size_viewed': part.is_actived}" | ||
| 157 | > | ||
| 158 | <image v-bind:src="part.img"></image> | ||
| 159 | </view> | ||
| 160 | </view> | ||
| 161 | </view> | ||
| 162 | </view> | ||
| 163 | <view class="buy"> | ||
| 164 | <view class="buy1">选了镜框,想选镜片?</view> | ||
| 165 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | ||
| 166 | <view class="buy3"> | ||
| 167 | <view class="buy3_1">暂时不选</view> | ||
| 168 | <view class="buy3_2" @click="popArgs">立即去选</view> | ||
| 169 | </view> | ||
| 170 | </view> | ||
| 171 | <template > | ||
| 172 | <view class="goods-form"> | ||
| 173 | <text class="p1">填写验光数据</text> | ||
| 174 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | ||
| 175 | <view class="picker" > | ||
| 176 | <view class="picker-choice"> | ||
| 177 | <view class="choice-left"> | ||
| 178 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | ||
| 179 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | ||
| 180 | </view> | ||
| 181 | <text class="p13">左 (OD)</text> | ||
| 182 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | ||
| 183 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | ||
| 184 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 185 | </picker> | ||
| 186 | <text class="p13">右 (OS)</text> | ||
| 187 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | ||
| 188 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | ||
| 189 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 190 | </picker> | ||
| 191 | </view> | ||
| 192 | </view> | ||
| 193 | <view class="picker" > | ||
| 194 | <view class="picker-choice"> | ||
| 195 | <view class="choice-left"> | ||
| 196 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | ||
| 197 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | ||
| 198 | </view> | ||
| 199 | <text class="p13">左 (OD)</text> | ||
| 200 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | ||
| 201 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | ||
| 202 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 203 | </picker> | ||
| 204 | <text class="p13">右 (OS)</text> | ||
| 205 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | ||
| 206 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | ||
| 207 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 208 | </picker> | ||
| 209 | </view> | ||
| 210 | </view> | ||
| 211 | <view class="picker" > | ||
| 212 | <view class="picker-choice"> | ||
| 213 | <view class="choice-left"> | ||
| 214 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | ||
| 215 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | ||
| 216 | </view> | ||
| 217 | <text class="p13">左 (OD)</text> | ||
| 218 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | ||
| 219 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | ||
| 220 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 221 | </picker> | ||
| 222 | <text class="p13">右 (OS)</text> | ||
| 223 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | ||
| 224 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | ||
| 225 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 226 | </picker> | ||
| 227 | </view> | ||
| 228 | </view> | ||
| 229 | <view class="picker" > | ||
| 230 | <view class="picker-choice"> | ||
| 231 | <view class="choice-left"> | ||
| 232 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | ||
| 233 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | ||
| 234 | </view> | ||
| 235 | <text class="p13">左 (OD)</text> | ||
| 236 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | ||
| 237 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | ||
| 238 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 239 | </picker> | ||
| 240 | <text class="p13">右 (OS)</text> | ||
| 241 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | ||
| 242 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | ||
| 243 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 244 | </picker> | ||
| 245 | </view> | ||
| 246 | </view> | ||
| 247 | <view class="picker" > | ||
| 248 | <view class="picker-choice"> | ||
| 249 | <view class="choice-left"> | ||
| 250 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | ||
| 251 | </view> | ||
| 252 | <text class="p13-date">年 (Y)</text> | ||
| 253 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | ||
| 254 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | ||
| 255 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 256 | </picker> | ||
| 257 | <text class="p13-date">月 (M)</text> | ||
| 258 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | ||
| 259 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | ||
| 260 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 261 | </picker> | ||
| 262 | <text class="p13-date">日 (D)</text> | ||
| 263 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | ||
| 264 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | ||
| 265 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 266 | </picker> | ||
| 267 | </view> | ||
| 268 | </view> | ||
| 269 | <view class="confirm"> | ||
| 270 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | ||
| 271 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
| 272 | </view> | ||
| 273 | </view> | ||
| 274 | |||
| 275 | </template> | ||
| 276 | <view class="zhanwei"></view> | ||
| 277 | <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> | ||
| 278 | </view> | ||
| 279 | <view class="container" v-if="type===4"> | ||
| 280 | <view class="detail"> | ||
| 281 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | ||
| 282 | <view class="detail2"> | ||
| 283 | <view class="detail2_name">{{details.data.p_name}}</view> | ||
| 284 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | ||
| 285 | <view class="detail2_price"> | ||
| 286 | <span>¥{{details.data.p_sale_price*count}}</span> | ||
| 287 | <view class="counter"> | ||
| 288 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | ||
| 289 | <text>{{count}}</text> | ||
| 290 | <view class="btn" @click="counter(true)">+</view> | ||
| 291 | </view> | ||
| 292 | </view> | ||
| 293 | </view> | ||
| 294 | </view> | ||
| 295 | <view class="choose"> | ||
| 296 | <view class="colour"> | ||
| 297 | <view class="colour1" @click="xialachange(0)"> | ||
| 298 | <text>框架颜色</text> | ||
| 299 | <image v-bind:src="isNone[0].img"></image> | ||
| 300 | </view> | ||
| 301 | <view class="colour_exp">*{{navData.colour}}</view> | ||
| 302 | <view> | ||
| 303 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> | ||
| 304 | <view | ||
| 305 | v-for="(items,index) in details.data.skuList" | ||
| 306 | :key="index" | ||
| 307 | @click="viewChoose(index)" | ||
| 308 | class="colour2_view" | ||
| 309 | v-bind:class="{'colour2_viewed': chooseNum == index}" | ||
| 310 | > | ||
| 311 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | ||
| 312 | </view> | ||
| 313 | </view> | ||
| 314 | </view> | ||
| 315 | <hr/> | ||
| 316 | </view> | ||
| 317 | <view class="size"> | ||
| 318 | <view class="size1" @click="xialachange(1)"> | ||
| 319 | <view class="size1_1">框架尺寸</view> | ||
| 320 | <view><image v-bind:src="isNone[1].img"></image></view> | ||
| 321 | </view> | ||
| 322 | <view class="colour"> | ||
| 323 | <view class="colour_exp">*{{navData.colour}}</view> | ||
| 324 | </view> | ||
| 325 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> | ||
| 326 | <view> | ||
| 327 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | ||
| 328 | <view class="D3_list_jDu"> | ||
| 329 | <view class="D3_list1"> | ||
| 330 | <c-progress class="c-progress" :inner_widthProp="300"/> | ||
| 331 | <text>{{details.data.frame_width}}mm</text> | ||
| 332 | </view> | ||
| 333 | <view>{{parameter[0].standard}}</view> | ||
| 334 | </view> | ||
| 335 | </view> | ||
| 336 | <view> | ||
| 337 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | ||
| 338 | <view class="D3_list_jDu"> | ||
| 339 | <view class="D3_list1"> | ||
| 340 | <c-progress class="c-progress" :inner_widthProp="190"/> | ||
| 341 | <view>{{details.data.glass_width}}mm</view> | ||
| 342 | </view> | ||
| 343 | <view>{{parameter[1].standard}}</view> | ||
| 344 | </view> | ||
| 345 | </view> | ||
| 346 | <view> | ||
| 347 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | ||
| 348 | <view class="D3_list_jDu"> | ||
| 349 | <view class="D3_list1"> | ||
| 350 | <c-progress class="c-progress" :inner_widthProp="210"/> | ||
| 351 | <view>{{details.data.glass_height}}mm</view> | ||
| 352 | </view> | ||
| 353 | <view>{{parameter[2].standard}}</view> | ||
| 354 | </view> | ||
| 355 | </view> | ||
| 356 | <view> | ||
| 357 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | ||
| 358 | <view class="D3_list_jDu"> | ||
| 359 | |||
| 360 | <view class="D3_list1"> | ||
| 361 | <c-progress class="c-progress" :inner_widthProp="160"/> | ||
| 362 | <view>{{details.data.nose_width}}mm</view> | ||
| 363 | </view> | ||
| 364 | <view>{{parameter[3].standard}}</view> | ||
| 365 | </view> | ||
| 366 | </view> | ||
| 367 | <view> | ||
| 368 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | ||
| 369 | <view class="D3_list_jDu"> | ||
| 370 | <view class="D3_list1"> | ||
| 371 | <c-progress class="c-progress" :inner_widthProp="260"/> | ||
| 372 | <view>{{details.data.leg_long}}mm</view> | ||
| 373 | </view> | ||
| 374 | <view>{{parameter[4].standard}}</view> | ||
| 375 | </view> | ||
| 376 | </view> | ||
| 377 | <hr/> | ||
| 378 | </view> | ||
| 379 | </view> | ||
| 380 | <view class="part"> | ||
| 381 | <view class="size1" @click="xialachange(2)"> | ||
| 382 | <view class="size1_1" >配件</view> | ||
| 383 | <view> | ||
| 384 | <span>+¥0.00</span> | ||
| 385 | <image v-bind:src="isNone[2].img"></image> | ||
| 386 | </view> | ||
| 142 | </view> | 387 | </view> |
| 143 | <view class="colour_exp">*0290</view> | 388 | <view class="colour_exp">*0290</view> |
| 144 | <view class="part_som"> | 389 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
| 145 | <view | 390 | <view |
| 146 | v-for="(part) in part" | 391 | v-for="(part) in part" |
| 147 | :key="part.key" | 392 | :key="part.key" |
| 148 | v-bind:class="{'size_viewed': part.is_actived}" | 393 | v-bind:class="{'size_viewed': part.is_actived}" |
| 149 | > | 394 | > |
| 150 | <image v-bind:src="part.img"></image> | 395 | <image v-bind:src="part.img"></image> |
| 151 | </view> | 396 | </view> |
| 152 | </view> | 397 | </view> |
| 153 | </view> | 398 | </view> |
| 154 | </view> | 399 | </view> |
| 155 | <view class="buy"> | 400 | <view class="buy"> |
| 156 | <view class="buy1">选了镜框,想选镜片?</view> | 401 | <view class="buy1">选了镜框,想选镜片?</view> |
| 157 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> | 402 | <view class="buy2">系统已为你保存好已选镜框,放心去选镜片吧!</view> |
| 158 | <view class="buy3"> | 403 | <view class="buy3"> |
| 159 | <view class="buy3_1">暂时不选</view> | 404 | <view class="buy3_1">暂时不选</view> |
| 160 | <view class="buy3_2" @click="popArgs">立即去选</view> | 405 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 161 | </view> | 406 | </view> |
| 162 | </view> | 407 | </view> |
| 163 | <view class="zhanwei"></view> | 408 | <view class="zhanwei"></view> |
| 164 | <view class="button"><view>立即结算</view></view> | 409 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
| 165 | </view> | 410 | </view> |
| 411 | </view> | ||
| 166 | </template> | 412 | </template> |
| 167 | <script> | 413 | <script> |
| 168 | import CProgress from '../../components/UniSliper/UniSliper' | 414 | import CProgress from '../../components/UniSliper/UniSliper' |
| 169 | import store from '@/store' | 415 | import store from '@/store' |
| 170 | 416 | ||
| 171 | export default { | 417 | export default { |
| 172 | components: { | 418 | components: { |
| 173 | CProgress | 419 | CProgress |
| 174 | }, | 420 | }, |
| 175 | data(){ | 421 | data(){ |
| 176 | return{ | 422 | return{ |
| 423 | type: 2, | ||
| 177 | count: 1, | 424 | count: 1, |
| 178 | colour: '1.56非球面防蓝光_亚黑色', | ||
| 179 | chooseNum : '', | 425 | chooseNum : '', |
| 180 | isSplit: '' , | 426 | isSplit: '' , |
| 427 | isNone:[ | ||
| 428 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 429 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 430 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 431 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 432 | {state: false ,img: '/static/img/detail/xiala.png'}, | ||
| 433 | ], | ||
| 434 | |||
| 435 | //传参 | ||
| 436 | navData:{ | ||
| 437 | pid: "26", | ||
| 438 | p_root_index: "4", | ||
| 439 | name:'', | ||
| 440 | price:'', | ||
| 441 | type:'', | ||
| 442 | split: '1.56非球面防蓝光', | ||
| 443 | colour: '1.56非球面防蓝光_亚黑色', | ||
| 444 | }, | ||
| 445 | |||
| 446 | //尺寸 | ||
| 181 | parameter:[ | 447 | parameter:[ |
| 182 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 448 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, |
| 183 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 449 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, |
| 184 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 450 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, |
| 185 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | 451 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, |
| 186 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | 452 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, |
| 187 | ], | 453 | ], |
| 188 | //镜片颜色 | 454 | //镜片颜色 |
| 189 | jp_colour:[ | 455 | jp_colour:[ |
| 190 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 456 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 191 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 457 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 192 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 458 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 193 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 459 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 194 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | 460 | {img:'/static/img/detail/Kuang/sun_jp.png'}, |
| 195 | {img:'/static/img/detail/Kuang/sun_jp.png'} | 461 | {img:'/static/img/detail/Kuang/sun_jp.png'} |
| 196 | ], | 462 | ], |
| 197 | //配饰 | 463 | //配饰 |
| 198 | part:[ | 464 | part:[ |
| 199 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | 465 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, |
| 200 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 466 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 201 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 467 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 202 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 468 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 203 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | 469 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, |
| 204 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 470 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 205 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | 471 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, |
| 206 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | 472 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, |
| 207 | ], | 473 | ], |
| 208 | //折射率 | 474 | opIsOpen:true, |
| 209 | split:[ | 475 | tablist: { |
| 210 | {number: 1.56}, | 476 | // read: true, |
| 211 | {number: 1.60}, | 477 | // seeLong: false, |
| 212 | {number: 1.67}, | 478 | confirm: false |
| 213 | {number: 1.71}, | 479 | }, |
| 214 | {number: 1.74} | 480 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], |
| 215 | 481 | // 度数相关数据 | |
| 216 | ] | 482 | pickerInfoList:[ |
| 483 | {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}, | ||
| 484 | {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}, | ||
| 485 | {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}, | ||
| 486 | {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}, | ||
| 487 | {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} | ||
| 488 | ], | ||
| 217 | } | 489 | } |
| 218 | }, | 490 | }, |
| 219 | 491 | ||
| 220 | computed: { | 492 | computed: { |
| 221 | details(){ | 493 | details(){ |
| 222 | return this.$store.state.detailStandard_k.list | 494 | return this.$store.state.detailStandard_k.list |
| 223 | }, | 495 | }, |
| 224 | }, | 496 | }, |
| 225 | onLoad:function(){ | 497 | onLoad:function(){ |
| 226 | store.dispatch('detailStandard_k/fetch', { | 498 | store.dispatch('detailStandard_k/fetch', { |
| 227 | uid: "1", | 499 | uid: "1", |
| 228 | pid: "26", | 500 | pid: "26", |
| 229 | }); | 501 | p_root_index: "4" |
| 230 | console.log(this.$store.state.detailStandard_k.list.data+'ssswwwwwwwws'); | 502 | }); |
| 231 | console.log("ssssssssssssssssssssssssssss") | ||
| 232 | }, | 503 | }, |
| 233 | methods: { | 504 | methods: { |
| 234 | counter(isadd){ | 505 | counter(isadd){ |
| 235 | if(isadd){ | 506 | if(isadd){ |
| 236 | this.count++ | 507 | this.count++ |
| 237 | }else{ | 508 | }else{ |
| 238 | this.count <= 1? this.disabled = true:this.count-- | 509 | this.count <= 1? this.disabled = true:this.count-- |
| 239 | } | 510 | } |
| 240 | }, | 511 | }, |
| 512 | xialachange(index){ | ||
| 513 | this.isNone[index].state = !this.isNone[index].state; | ||
| 514 | if(this.isNone[index].state){ | ||
| 515 | this.isNone[index].img = '/static/img/detail/right.png' | ||
| 516 | }else{ | ||
| 517 | this.isNone[index].img = '/static/img/detail/xiala.png' | ||
| 518 | } | ||
| 519 | }, | ||
| 241 | colourChange(index,e){ | 520 | colourChange(index,e){ |
| 242 | this.colour = e ; //颜色选择 | 521 | this.navData.colour = e ; //颜色选择 |
| 243 | // console.log(index,e); | ||
| 244 | 522 | ||
| 245 | }, | 523 | }, |
| 246 | viewChoose(index){ | 524 | viewChoose(index){ |
| 247 | this.chooseNum = index | 525 | this.chooseNum = index |
| 248 | }, | 526 | }, |
| 249 | splitChoose(index){ | 527 | //折射率选择 |
| 528 | splitChoose(index,e){ | ||
| 250 | this.isSplit = index | 529 | this.isSplit = index |
| 530 | this.navData.split = e | ||
| 251 | }, | 531 | }, |
| 532 | //跳转镜片选购页 | ||
| 252 | popArgs(){ | 533 | popArgs(){ |
| 253 | uni.navigateTo({ | 534 | uni.navigateTo({ |
| 254 | url: '../detailsChoiceArgs/detailsChoiceArgs', | 535 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
| 255 | success: res => {}, | 536 | success: res => {}, |
| 256 | fail: () => {}, | 537 | fail: () => {}, |
| 257 | complete: () => {} | 538 | complete: () => {} |
| 258 | }); | 539 | }); |
| 259 | } | 540 | }, |
| 541 | //跳转确认订单页及传参 | ||
| 542 | popSure(name,price){ | ||
| 543 | this.navData.name = name; | ||
| 544 | this.navData.price = price; | ||
| 545 | this.navData.type = this.type; | ||
| 546 | var navData = JSON.stringify(this.navData); | ||
| 547 | uni.navigateTo({ | ||
| 548 | url: '../confirmOrder/confirmOrder?index='+navData, | ||
| 549 | }); | ||
| 550 | console.log(this.navData) | ||
| 551 | }, | ||
| 552 | //验光表 | ||
| 553 | changeConfirm() { | ||
| 554 | this.tablist.confirm = !this.tablist.confirm | ||
| 555 | }, | ||
| 556 | bindPickerChange01: function(e) { | ||
| 557 | this.pickerInfoList[0].nameIndex1 = e.target.value | ||
| 558 | }, | ||
| 559 | bindPickerChange02: function(e) { | ||
| 560 | this.pickerInfoList[0].nameIndex2 = e.target.value | ||
| 561 | }, | ||
| 562 | |||
| 563 | bindPickerChange11: function(e) { | ||
| 564 | this.pickerInfoList[1].nameIndex1 = e.target.value | ||
| 565 | }, | ||
| 566 | bindPickerChange12: function(e) { | ||
| 567 | this.pickerInfoList[1].nameIndex2 = e.target.value | ||
| 568 | }, | ||
| 569 | |||
| 570 | bindPickerChange21: function(e) { | ||
| 571 | this.pickerInfoList[2].nameIndex1 = e.target.value | ||
| 572 | }, | ||
| 573 | bindPickerChange22: function(e) { | ||
| 574 | this.pickerInfoList[2].nameIndex2 = e.target.value | ||
| 575 | }, | ||
| 576 | |||
| 577 | bindPickerChange31: function(e) { | ||
| 578 | this.pickerInfoList[3].nameIndex1 = e.target.value | ||
| 579 | }, | ||
| 580 | bindPickerChange32: function(e) { | ||
| 581 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
| 582 | }, | ||
| 583 | |||
| 584 | bindPickerChange41: function(e) { | ||
| 585 | this.pickerInfoList[4].nameIndex1 = e.target.value | ||
| 586 | }, | ||
| 587 | bindPickerChange42: function(e) { | ||
| 588 | this.pickerInfoList[4].nameIndex2 = e.target.value | ||
| 589 | }, | ||
| 590 | bindPickerChange43: function(e) { | ||
| 591 | this.pickerInfoList[4].nameIndex3 = e.target.value | ||
| 592 | }, | ||
| 260 | } | 593 | } |
| 261 | 594 | ||
| 262 | } | 595 | } |
| 263 | </script> | 596 | </script> |
| 264 | 597 | ||
| 265 | <style lang="scss"> | 598 | <style lang="scss"> |
| 266 | .container{ | 599 | .container{ |
| 267 | min-height: 100vh; | 600 | min-height: 100vh; |
| 268 | background: #F2F2F2; | 601 | background: #F2F2F2; |
| 269 | padding-top: 10px; | 602 | padding-top: 10px; |
| 270 | box-sizing: border-box; | 603 | box-sizing: border-box; |
| 271 | } | 604 | } |
| 272 | hr{ | 605 | hr{ |
| 273 | border: none; | 606 | border: none; |
| 274 | height: 1px; | 607 | height: 1px; |
| 275 | background: #F2F2F2; | 608 | background: #F2F2F2; |
| 276 | margin-top: 18px; | 609 | margin-top: 18px; |
| 277 | margin-bottom: 10px; | 610 | margin-bottom: 10px; |
| 278 | } | 611 | } |
| 279 | .detail{ | 612 | .detail{ |
| 280 | height: 272rpx; | 613 | height: 272rpx; |
| 281 | background: #FFFFFF; | 614 | background: #FFFFFF; |
| 282 | border-radius: 8px; | 615 | border-radius: 8px; |
| 283 | padding: 16px; | 616 | padding: 16px; |
| 284 | box-sizing: border-box; | 617 | box-sizing: border-box; |
| 285 | display: flex; | 618 | display: flex; |
| 286 | justify-content: space-between; | 619 | justify-content: space-between; |
| 287 | align-items: center; | 620 | align-items: center; |
| 288 | } | 621 | } |
| 289 | .detail1{ | 622 | .detail1{ |
| 290 | height: 178rpx; | 623 | height: 178rpx; |
| 291 | width: 188rpx; | 624 | width: 188rpx; |
| 292 | image{ | 625 | image{ |
| 293 | width: 100%; | 626 | width: 100%; |
| 294 | height: 100%; | 627 | height: 100%; |
| 295 | border-radius: 8px; | 628 | border-radius: 8px; |
| 296 | } | 629 | } |
| 297 | } | 630 | } |
| 298 | .detail2{ | 631 | .detail2{ |
| 299 | width: 68%; | 632 | width: 68%; |
| 300 | view{ | 633 | view{ |
| 301 | margin-bottom: 6px; | 634 | margin-bottom: 6px; |
| 302 | font-family: PingFangSC-Regular; | 635 | font-family: PingFangSC-Regular; |
| 303 | } | 636 | } |
| 304 | .detail2_name{ | 637 | .detail2_name{ |
| 305 | font-size: 14px; | 638 | font-size: 14px; |
| 306 | color: #333333; | 639 | color: #333333; |
| 307 | letter-spacing: -0.26px; | 640 | letter-spacing: -0.26px; |
| 308 | line-height: 18px; | 641 | line-height: 18px; |
| 309 | overflow:hidden; | 642 | overflow:hidden; |
| 310 | text-overflow:ellipsis; | 643 | text-overflow:ellipsis; |
| 311 | display:-webkit-box; | 644 | display:-webkit-box; |
| 312 | -webkit-box-orient:vertical; | 645 | -webkit-box-orient:vertical; |
| 313 | -webkit-line-clamp:2; | 646 | -webkit-line-clamp:2; |
| 314 | } | 647 | } |
| 315 | .detail2_tui{ | 648 | .detail2_tui{ |
| 316 | font-size: 10px; | 649 | font-size: 10px; |
| 317 | color: #999999; | 650 | color: #999999; |
| 318 | letter-spacing: -0.19px; | 651 | letter-spacing: -0.19px; |
| 319 | span{ | 652 | span{ |
| 320 | margin-right: 10px; | 653 | margin-right: 10px; |
| 321 | } | 654 | } |
| 322 | } | 655 | } |
| 323 | .detail2_price{ | 656 | .detail2_price{ |
| 324 | font-size: 14px; | 657 | font-size: 14px; |
| 325 | color: #FF6B4A; | 658 | color: #FF6B4A; |
| 326 | letter-spacing: -0.26px; | 659 | letter-spacing: -0.26px; |
| 327 | } | 660 | } |
| 328 | } | 661 | } |
| 329 | .counter{ | 662 | .counter{ |
| 330 | display: flex; | 663 | display: flex; |
| 331 | flex-direction: row; | 664 | flex-direction: row; |
| 332 | justify-content: space-between; | 665 | justify-content: space-between; |
| 333 | font-size: 28rpx; | 666 | font-size: 28rpx; |
| 334 | color: #333333; | 667 | color: #333333; |
| 335 | width: 122rpx; | 668 | width: 122rpx; |
| 336 | float: right; | 669 | float: right; |
| 337 | .btn{ | 670 | .btn{ |
| 338 | display: flex; | 671 | display: flex; |
| 339 | justify-content: center; | 672 | justify-content: center; |
| 340 | line-height: 32rpx; | 673 | line-height: 32rpx; |
| 341 | height: 32rpx; | 674 | height: 32rpx; |
| 342 | width: 32rpx; | 675 | width: 32rpx; |
| 343 | background-color: #F2F2F2; | 676 | background-color: #F2F2F2; |
| 344 | color: #CFCFCF; | 677 | color: #CFCFCF; |
| 345 | } | 678 | } |
| 346 | } | 679 | } |
| 347 | .choose{ | 680 | .choose{ |
| 348 | background: #FFFFFF; | 681 | background: #FFFFFF; |
| 349 | padding: 16px; | 682 | padding: 16px; |
| 350 | box-sizing: border-box; | 683 | box-sizing: border-box; |
| 351 | margin-top: 10px; | 684 | margin-top: 10px; |
| 352 | border-radius: 8px; | 685 | border-radius: 8px; |
| 353 | .colour1{ | 686 | .colour1{ |
| 354 | span{ | 687 | span{ |
| 355 | font-family: PingFangSC-Medium; | 688 | font-family: PingFangSC-Medium; |
| 356 | font-size: 16px; | 689 | font-size: 16px; |
| 357 | color: #333333; | 690 | color: #333333; |
| 358 | letter-spacing: -0.3px; | 691 | letter-spacing: -0.3px; |
| 359 | text-align: justify; | 692 | text-align: justify; |
| 360 | line-height: 24px; | 693 | line-height: 24px; |
| 361 | font-weight: bold; | 694 | font-weight: bold; |
| 362 | } | 695 | } |
| 363 | image{ | 696 | image{ |
| 364 | float: right; | 697 | float: right; |
| 365 | width: 40rpx; | 698 | width: 40rpx; |
| 366 | height: 36rpx; | 699 | height: 36rpx; |
| 367 | } | 700 | } |
| 368 | .colour1_span2{ | 701 | .colour1_span2{ |
| 369 | font-family: PingFangSC-Regular; | 702 | font-family: PingFangSC-Regular; |
| 370 | font-size: 12px; | 703 | font-size: 12px; |
| 371 | color: #666666; | 704 | color: #666666; |
| 372 | margin-left: 10px; | 705 | margin-left: 10px; |
| 373 | font-weight: normal | 706 | font-weight: normal |
| 374 | } | 707 | } |
| 375 | } | 708 | } |
| 376 | .colour_exp{ | 709 | .colour_exp{ |
| 377 | font-family: PingFangSC-Regular; | 710 | font-family: PingFangSC-Regular; |
| 378 | font-size: 12px; | 711 | font-size: 12px; |
| 379 | color: #666666; | 712 | color: #666666; |
| 380 | letter-spacing: 0; | 713 | letter-spacing: 0; |
| 381 | margin-top: 10px; | 714 | margin-top: 10px; |
| 382 | margin-bottom: 10px; | 715 | margin-bottom: 10px; |
| 383 | } | 716 | } |
| 384 | .colour2{ | 717 | .colour2{ |
| 385 | display: grid; | 718 | display: grid; |
| 386 | grid-template-columns: repeat(5, 17%); | 719 | grid-template-columns: repeat(5, 17%); |
| 387 | justify-content: space-between ; | 720 | justify-content: space-between ; |
| 388 | grid-row-gap: 10px; | 721 | grid-row-gap: 10px; |
| 389 | margin-bottom: 14px; | 722 | margin-bottom: 14px; |
| 390 | .colour2_view{ | 723 | .colour2_view{ |
| 391 | border: 1px solid #F2F2F2; | 724 | border: 1px solid #F2F2F2; |
| 392 | image{ | 725 | image{ |
| 393 | width: 100rpx; | 726 | width: 100rpx; |
| 394 | height: 60rpx; | 727 | height: 60rpx; |
| 395 | } | 728 | } |
| 396 | } | 729 | } |
| 397 | .colour2_viewed{ | 730 | .colour2_viewed{ |
| 398 | border: 1px solid #FF6B4A; | 731 | border: 1px solid #FF6B4A; |
| 399 | image{ | 732 | image{ |
| 400 | width: 100rpx; | 733 | width: 100rpx; |
| 401 | height: 60rpx; | 734 | height: 60rpx; |
| 402 | } | 735 | } |
| 403 | } | 736 | } |
| 404 | } | 737 | } |
| 738 | .colour2_none{ | ||
| 739 | display: none; | ||
| 740 | } | ||
| 405 | } | 741 | } |
| 406 | .jp_colour2{ | 742 | .jp_colour2{ |
| 407 | display: grid; | 743 | display: grid; |
| 408 | grid-template-columns: repeat(5, 13%); | 744 | grid-template-columns: repeat(5, 13%); |
| 409 | justify-content: start ; | 745 | justify-content: start ; |
| 410 | grid-column-gap: 10px; | 746 | grid-column-gap: 10px; |
| 411 | grid-row-gap: 10px; | 747 | grid-row-gap: 10px; |
| 412 | margin-bottom: 14px; | 748 | margin-bottom: 14px; |
| 413 | .jp_colour2_view{ | 749 | .jp_colour2_view{ |
| 414 | border: 1px solid #F2F2F2; | 750 | border: 1px solid #F2F2F2; |
| 415 | image{ | 751 | image{ |
| 416 | width: 80rpx; | 752 | width: 80rpx; |
| 417 | height: 80rpx; | 753 | height: 80rpx; |
| 418 | } | 754 | } |
| 419 | } | 755 | } |
| 420 | } | 756 | } |
| 421 | .split{ | 757 | .split{ |
| 422 | display: grid; | 758 | display: grid; |
| 423 | grid-template-columns: repeat(2, 45%); | 759 | grid-template-columns: repeat(2, 45%); |
| 424 | grid-column-gap: 10px; | 760 | grid-column-gap: 10px; |
| 425 | grid-row-gap: 10px; | 761 | grid-row-gap: 10px; |
| 426 | margin-top: 10px ; | 762 | margin-top: 10px ; |
| 427 | .split_colour2{ | 763 | .split_colour2{ |
| 428 | display: flex; | 764 | display: flex; |
| 429 | justify-content: center; | 765 | justify-content: center; |
| 430 | align-items: center; | 766 | align-items: center; |
| 431 | width: 300rpx; | 767 | width: 300rpx; |
| 432 | height: 60rpx; | 768 | height: 60rpx; |
| 433 | background: #F2F2F2; | 769 | background: #F2F2F2; |
| 434 | border-radius: 2px; | 770 | border-radius: 2px; |
| 435 | font-family: PingFangSC-Regular; | 771 | font-family: PingFangSC-Regular; |
| 436 | font-size: 12px; | 772 | font-size: 12px; |
| 437 | color: #666666; | 773 | color: #666666; |
| 438 | letter-spacing: 0; | 774 | letter-spacing: 0; |
| 439 | text-align: center; | 775 | text-align: center; |
| 440 | } | 776 | } |
| 441 | .split_colour2_actived{ | 777 | .split_colour2_actived{ |
| 442 | background: rgba(255,107,74,0.15); | 778 | background: rgba(255,107,74,0.15); |
| 443 | color: #FF6B4A; | 779 | color: #FF6B4A; |
| 444 | } | 780 | } |
| 445 | } | 781 | } |
| 446 | .size,.part{ | 782 | .size,.part{ |
| 447 | margin-top:14px; | 783 | margin-top:14px; |
| 448 | .size1{ | 784 | .size1{ |
| 449 | display: flex; | 785 | display: flex; |
| 450 | justify-content: space-between; | 786 | justify-content: space-between; |
| 451 | margin-bottom: 10px; | 787 | margin-bottom: 10px; |
| 452 | .size1_1{ | 788 | .size1_1{ |
| 453 | font-weight: bold; | 789 | font-weight: bold; |
| 454 | font-family: PingFangSC-Medium; | 790 | font-family: PingFangSC-Medium; |
| 455 | font-size: 16px; | 791 | font-size: 16px; |
| 456 | color: #333333; | 792 | color: #333333; |
| 457 | letter-spacing: -0.3px; | 793 | letter-spacing: -0.3px; |
| 458 | line-height: 24px; | 794 | line-height: 24px; |
| 459 | } | 795 | } |
| 460 | view{ | 796 | view{ |
| 461 | span{ | 797 | span{ |
| 462 | font-family: PingFangSC-Regular; | 798 | font-family: PingFangSC-Regular; |
| 463 | font-size: 14px; | 799 | font-size: 14px; |
| 464 | color: #FF6B4A; | 800 | color: #FF6B4A; |
| 465 | letter-spacing: -0.26px; | 801 | letter-spacing: -0.26px; |
| 466 | margin-right: 12px; | 802 | margin-right: 12px; |
| 467 | } | 803 | } |
| 468 | image{ | 804 | image{ |
| 469 | width: 40rpx; | 805 | width: 40rpx; |
| 470 | height: 36rpx; | 806 | height: 36rpx; |
| 471 | } | 807 | } |
| 472 | } | 808 | } |
| 473 | } | 809 | } |
| 474 | .size2{ | 810 | .size2{ |
| 475 | view{ | 811 | view{ |
| 476 | display: inline-flex; | 812 | display: inline-flex; |
| 477 | align-items: center; | 813 | align-items: center; |
| 478 | justify-content: center; //字体居中 | 814 | justify-content: center; //字体居中 |
| 479 | margin-right: 12px; | 815 | margin-right: 12px; |
| 480 | margin-bottom: 20px; | 816 | margin-bottom: 20px; |
| 481 | width: 136rpx; | 817 | width: 136rpx; |
| 482 | height: 60rpx; | 818 | height: 60rpx; |
| 483 | background: #F2F2F2; | 819 | background: #F2F2F2; |
| 484 | border-radius: 2px; | 820 | border-radius: 2px; |
| 485 | font-family: PingFangSC-Regular; | 821 | font-family: PingFangSC-Regular; |
| 486 | font-size: 12px; | 822 | font-size: 12px; |
| 487 | color: #666666; | 823 | color: #666666; |
| 488 | } | 824 | } |
| 489 | view:hover{ | 825 | view:hover{ |
| 490 | color: #FF6B4A; | 826 | color: #FF6B4A; |
| 491 | background: rgba(255,107,74,0.15); | 827 | background: rgba(255,107,74,0.15); |
| 492 | } | 828 | } |
| 493 | } | 829 | } |
| 494 | .D3_list{ | 830 | .D3_list{ |
| 495 | margin-bottom: 4px; | 831 | margin-bottom: 4px; |
| 496 | } | 832 | } |
| 497 | .D3_list>view{ | 833 | .D3_list>view{ |
| 498 | display: flex; | 834 | display: flex; |
| 499 | align-content: center; | 835 | align-content: center; |
| 500 | margin-bottom: 10px; | 836 | margin-bottom: 10px; |
| 501 | view{ | 837 | view{ |
| 502 | margin-right: 10px; | 838 | margin-right: 10px; |
| 503 | } | 839 | } |
| 504 | } | 840 | } |
| 505 | .D3_list image{ | 841 | .D3_list image{ |
| 506 | width: 50px; | 842 | width: 50px; |
| 507 | height: 25px; | 843 | height: 25px; |
| 508 | margin-right: 6px; | 844 | margin-right: 6px; |
| 509 | } | 845 | } |
| 510 | .D3_list span{ | 846 | .D3_list span{ |
| 511 | margin-left: 6px; | 847 | margin-left: 6px; |
| 512 | margin-right: 5px; | 848 | margin-right: 5px; |
| 513 | font-family: 'PingFangSC-Regular'; | 849 | font-family: 'PingFangSC-Regular'; |
| 514 | } | 850 | } |
| 515 | .D3_list_jDu{ | 851 | .D3_list_jDu{ |
| 516 | view{ | 852 | view{ |
| 517 | font-family: PingFangSC-Regular; | 853 | font-family: PingFangSC-Regular; |
| 518 | font-size: 10px; | 854 | font-size: 10px; |
| 519 | color: #999999; | 855 | color: #999999; |
| 520 | letter-spacing: -0.19px; | 856 | letter-spacing: -0.19px; |
| 521 | } | 857 | } |
| 522 | .D3_list1{ | 858 | .D3_list1{ |
| 523 | display: flex; | 859 | display: flex; |
| 524 | } | 860 | } |
| 525 | } | 861 | } |
| 526 | } | 862 | } |
| 527 | .part{ | 863 | .part{ |
| 528 | .part_som{ | 864 | .part_som{ |
| 529 | display: grid; | 865 | display: grid; |
| 530 | justify-content: space-between; | 866 | justify-content: space-between; |
| 531 | grid-template-columns: repeat(4, 22%); | 867 | grid-template-columns: repeat(4, 22%); |
| 532 | grid-row-gap: 12px; | 868 | grid-row-gap: 12px; |
| 533 | margin-bottom: 14px; | 869 | margin-bottom: 14px; |
| 534 | view{ | 870 | view{ |
| 535 | border: 1px solid #F2F2F2; | 871 | border: 1px solid #F2F2F2; |
| 536 | height: 72rpx; | 872 | height: 72rpx; |
| 537 | image{ | 873 | image{ |
| 538 | width: 100%; | 874 | width: 100%; |
| 539 | height: 100%; | 875 | height: 100%; |
| 540 | } | 876 | } |
| 541 | } | 877 | } |
| 542 | .size_viewed{ | 878 | .size_viewed{ |
| 543 | border: 1px solid #FF6B4A; | 879 | border: 1px solid #FF6B4A; |
| 544 | height: 72rpx; | 880 | height: 72rpx; |
| 545 | image{ | 881 | image{ |
| 546 | width: 100%; | 882 | width: 100%; |
| 547 | height: 100%; | 883 | height: 100%; |
| 548 | } | 884 | } |
| 549 | } | 885 | } |
| 550 | } | 886 | } |
| 887 | .colour2_none{ | ||
| 888 | display: none; | ||
| 889 | } | ||
| 551 | } | 890 | } |
| 552 | 891 | ||
| 553 | .buy{ | 892 | .buy{ |
| 554 | height: 300rpx; | 893 | height: 300rpx; |
| 555 | background: #FFFFFF ; | 894 | background: #FFFFFF ; |
| 556 | margin-top: 10px; | 895 | margin-top: 10px; |
| 557 | border-radius: 8px; | 896 | border-radius: 8px; |
| 558 | padding-top: 20px; | 897 | padding-top: 20px; |
| 559 | box-sizing: border-box; | 898 | box-sizing: border-box; |
| 560 | margin-bottom: 20px; | 899 | margin-bottom: 10px; |
| 561 | } | 900 | } |
| 562 | .buy1{ | 901 | .buy1{ |
| 563 | font-family: PingFangSC-Medium; | 902 | font-family: PingFangSC-Medium; |
| 564 | font-size: 16px; | 903 | font-size: 16px; |
| 565 | font-weight: bold; | 904 | font-weight: bold; |
| 566 | color: #333333; | 905 | color: #333333; |
| 567 | text-align: center; | 906 | text-align: center; |
| 568 | } | 907 | } |
| 569 | .buy2{ | 908 | .buy2{ |
| 570 | font-family: PingFangSC-Regular; | 909 | font-family: PingFangSC-Regular; |
| 571 | font-size: 12px; | 910 | font-size: 12px; |
| 572 | color: #999999; | 911 | color: #999999; |
| 573 | text-align: center; | 912 | text-align: center; |
| 574 | margin: 10px; | 913 | margin: 10px; |
| 575 | } | 914 | } |
| 576 | .buy3{ | 915 | .buy3{ |
| 577 | font-family: PingFangSC-Regular; | 916 | font-family: PingFangSC-Regular; |
| 578 | font-size: 16px; | 917 | font-size: 16px; |
| 579 | display: flex; | 918 | display: flex; |
| 580 | justify-content: center; | 919 | justify-content: center; |
| 581 | margin-top: 14px; | 920 | margin-top: 14px; |
| 582 | view{ | 921 | view{ |
| 583 | border-radius: 20px; | 922 | border-radius: 20px; |
| 584 | width: 240rpx; | 923 | width: 240rpx; |
| 585 | height: 80rpx; | 924 | height: 80rpx; |
| 586 | display: flex; | 925 | display: flex; |
| 587 | justify-content: center; | 926 | justify-content: center; |
| 588 | align-items: center; | 927 | align-items: center; |
| 589 | } | 928 | } |
| 590 | .buy3_1{ | 929 | .buy3_1{ |
| 591 | margin-right: 20px; | 930 | margin-right: 20px; |
| 592 | background: rgba(255,107,74,0.15); | 931 | background: rgba(255,107,74,0.15); |
| 593 | color: #FF6B4A ; | 932 | color: #FF6B4A ; |
| 594 | } | 933 | } |
| 595 | .buy3_2{ | 934 | .buy3_2{ |
| 596 | background: #FF6B4A; | 935 | background: #FF6B4A; |
| 597 | color: #FFFFFF ; | 936 | color: #FFFFFF ; |
| 598 | } | 937 | } |
| 599 | } | 938 | } |
| 600 | .zhanwei{ | 939 | .zhanwei{ |
| 601 | background: #F2F2F2; | 940 | background: #F2F2F2; |
| 602 | height: 120rpx; | 941 | height: 200rpx; |
| 942 | } | ||
| 943 | .goods-form { | ||
| 944 | display: flex; | ||
| 945 | flex-direction: column; | ||
| 946 | align-items: center; | ||
| 947 | justify-content: center; | ||
| 948 | background-color: #fff; | ||
| 949 | width: 100%; | ||
| 950 | padding-top:20px; | ||
| 951 | padding-bottom:20px; | ||
| 952 | box-sizing: border-box; | ||
| 953 | |||
| 954 | .p1 { | ||
| 955 | font-size: 16px; | ||
| 956 | color: #333333; | ||
| 957 | letter-spacing: -0.3px; | ||
| 958 | text-align: justify; | ||
| 959 | line-height: 24px; | ||
| 960 | margin: 4px 0; | ||
| 961 | } | ||
| 962 | .p2 { | ||
| 963 | font-size: 12px; | ||
| 964 | color: #999999; | ||
| 965 | letter-spacing: -0.23px; | ||
| 966 | margin-bottom: 18rpx; | ||
| 967 | } | ||
| 968 | image{ | ||
| 969 | width: 28rpx; | ||
| 970 | height: 26rpx; | ||
| 971 | } | ||
| 972 | .confirm { | ||
| 973 | display: flex; | ||
| 974 | align-items: center; | ||
| 975 | font-size: 12px; | ||
| 976 | color: #666666; | ||
| 977 | letter-spacing: -0.23px; | ||
| 978 | width: 684rpx; | ||
| 979 | image{ | ||
| 980 | margin-right:25rpx; | ||
| 981 | } | ||
| 982 | } | ||
| 983 | .picker{ | ||
| 984 | display: flex; | ||
| 985 | flex-direction: column; | ||
| 986 | justify-content: center; | ||
| 987 | align-items: center; | ||
| 988 | width: 100%; | ||
| 989 | image{ | ||
| 990 | width: 10px; | ||
| 991 | height: 10px; | ||
| 992 | margin-right: 5px; | ||
| 993 | } | ||
| 994 | .picker-choice{ | ||
| 995 | display: flex; | ||
| 996 | width: 684rpx; | ||
| 997 | align-items: center; | ||
| 998 | margin-bottom: 40rpx; | ||
| 999 | .choice-left{ | ||
| 1000 | width: 210rpx; | ||
| 1001 | .p11 { | ||
| 1002 | font-size: 14px; | ||
| 1003 | color: #333333; | ||
| 1004 | letter-spacing: -0.26px; | ||
| 1005 | text-align: justify; | ||
| 1006 | line-height: 24px; | ||
| 1007 | // margin-right: 10px; | ||
| 1008 | } | ||
| 1009 | .p12 { | ||
| 1010 | font-size: 10px; | ||
| 1011 | color: #3F3F3F; | ||
| 1012 | letter-spacing: -0.19px; | ||
| 1013 | text-align: justify; | ||
| 1014 | line-height: 24px; | ||
| 1015 | } | ||
| 1016 | |||
| 1017 | |||
| 1018 | } | ||
| 1019 | .p13 { | ||
| 1020 | font-size: 10px; | ||
| 1021 | color: #999999; | ||
| 1022 | letter-spacing: -0.19px; | ||
| 1023 | margin-right: 10px; | ||
| 1024 | } | ||
| 1025 | .p13-date { | ||
| 1026 | font-size: 10px; | ||
| 1027 | color: #999999; | ||
| 1028 | letter-spacing: -0.19px; | ||
| 1029 | margin-right: 5px; | ||
| 1030 | } | ||
| 1031 | .p14 { | ||
| 1032 | font-size: 14px; | ||
| 1033 | color: #666666; | ||
| 1034 | letter-spacing: -0.26px; | ||
| 1035 | text-align: center; | ||
| 1036 | width: 124rpx; | ||
| 1037 | border-bottom: 1px solid #CFCFCF; | ||
| 1038 | } | ||
| 1039 | |||
| 1040 | } | ||
| 1041 | } | ||
| 603 | } | 1042 | } |
| 604 | .button{ | 1043 | .button{ |
| 605 | position: fixed; | 1044 | position: fixed; |
| 606 | bottom: 0; | 1045 | bottom: 0; |
| 607 | width:100%; | 1046 | width:100%; |
| 608 | height: 112rpx; | 1047 | height: 112rpx; |
| 609 | background: #FF6B4A 100%; | 1048 | background: #FF6B4A 100%; |
| 610 | view{ | 1049 | view{ |
| 611 | color: #FFFFFF; | 1050 | color: #FFFFFF; |
| 612 | height: 100%; | 1051 | height: 100%; |
| 613 | display: flex; | 1052 | display: flex; |
| 614 | justify-content: center; | 1053 | justify-content: center; |
| 615 | align-items: center; | 1054 | align-items: center; |
| 616 | font-family: PingFangSC-Regular; | 1055 | font-family: PingFangSC-Regular; |
src/pages/newOpticsData/newOpticsData.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="body"> | 3 | <view class="body"> |
| 4 | <template > | 4 | <template > |
| 5 | <view class="goods-form"> | 5 | <view class="goods-form"> |
| 6 | <view class="p1"> | 6 | <view class="p1"> |
| 7 | <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> | 7 | <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> |
| 8 | 填写验光数据 | 8 | 填写验光数据 |
| 9 | </view> | 9 | </view> |
| 10 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | 10 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> |
| 11 | <view class="use_name"> | ||
| 12 | <text>验光单取名:</text> | ||
| 13 | <input type="text" @change="handleInput" | ||
| 14 | placeholder="请输入名称" maxlength="30" :value="name" /> | ||
| 15 | </view> | ||
| 16 | <view class="use_pd"> | ||
| 17 | <text>瞳距:</text> | ||
| 18 | <input type="number" @change="handleInputPd" | ||
| 19 | placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> | ||
| 20 | </view> | ||
| 11 | <view class="picker" > | 21 | <view class="picker" > |
| 12 | <view class="picker-choice"> | 22 | <view class="picker-choice"> |
| 13 | <view class="choice-left"> | 23 | <view class="choice-left"> |
| 14 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 24 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 15 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 25 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 16 | </view> | 26 | </view> |
| 17 | <text class="p13">左 (OD)</text> | 27 | <text class="p13">左 (OD)</text> |
| 18 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 28 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
| 19 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | 29 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> |
| 20 | <image src="../../static/detail-tabicon.png" ></image> | 30 | <image src="../../static/detail-tabicon.png" ></image> |
| 21 | </picker> | 31 | </picker> |
| 22 | <text class="p13">右 (OS)</text> | 32 | <text class="p13">右 (OS)</text> |
| 23 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 33 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
| 24 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | 34 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> |
| 25 | <image src="../../static/detail-tabicon.png" ></image> | 35 | <image src="../../static/detail-tabicon.png" ></image> |
| 26 | </picker> | 36 | </picker> |
| 27 | </view> | 37 | </view> |
| 28 | </view> | 38 | </view> |
| 29 | <view class="picker" > | 39 | <view class="picker" > |
| 30 | <view class="picker-choice"> | 40 | <view class="picker-choice"> |
| 31 | <view class="choice-left"> | 41 | <view class="choice-left"> |
| 32 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 42 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 33 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 43 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 34 | </view> | 44 | </view> |
| 35 | <text class="p13">左 (OD)</text> | 45 | <text class="p13">左 (OD)</text> |
| 36 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 46 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
| 37 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | 47 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> |
| 38 | <image src="../../static/detail-tabicon.png" ></image> | 48 | <image src="../../static/detail-tabicon.png" ></image> |
| 39 | </picker> | 49 | </picker> |
| 40 | <text class="p13">右 (OS)</text> | 50 | <text class="p13">右 (OS)</text> |
| 41 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 51 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
| 42 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | 52 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> |
| 43 | <image src="../../static/detail-tabicon.png" ></image> | 53 | <image src="../../static/detail-tabicon.png" ></image> |
| 44 | </picker> | 54 | </picker> |
| 45 | </view> | 55 | </view> |
| 46 | </view> | 56 | </view> |
| 47 | <view class="picker" > | 57 | <view class="picker" > |
| 48 | <view class="picker-choice"> | 58 | <view class="picker-choice"> |
| 49 | <view class="choice-left"> | 59 | <view class="choice-left"> |
| 50 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 60 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 51 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 61 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 52 | </view> | 62 | </view> |
| 53 | <text class="p13">左 (OD)</text> | 63 | <text class="p13">左 (OD)</text> |
| 54 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 64 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
| 55 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | 65 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> |
| 56 | <image src="../../static/detail-tabicon.png" ></image> | 66 | <image src="../../static/detail-tabicon.png" ></image> |
| 57 | </picker> | 67 | </picker> |
| 58 | <text class="p13">右 (OS)</text> | 68 | <text class="p13">右 (OS)</text> |
| 59 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 69 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
| 60 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | 70 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> |
| 61 | <image src="../../static/detail-tabicon.png" ></image> | 71 | <image src="../../static/detail-tabicon.png" ></image> |
| 62 | </picker> | 72 | </picker> |
| 63 | </view> | 73 | </view> |
| 64 | </view> | 74 | </view> |
| 65 | <view class="picker" > | 75 | <!-- <view class="picker" > |
| 66 | <view class="picker-choice"> | 76 | <view class="picker-choice"> |
| 67 | <view class="choice-left"> | 77 | <view class="choice-left"> |
| 68 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 78 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 69 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 79 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
| 70 | </view> | 80 | </view> |
| 71 | <text class="p13">左 (OD)</text> | 81 | <text class="p13">左 (OD)</text> |
| 72 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 82 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
| 73 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | 83 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
| 74 | <image src="../../static/detail-tabicon.png" ></image> | 84 | <image src="../../static/detail-tabicon.png" ></image> |
| 75 | </picker> | 85 | </picker> |
| 76 | <text class="p13">右 (OS)</text> | 86 | <text class="p13">右 (OS)</text> |
| 77 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 87 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
| 78 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | 88 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
| 79 | <image src="../../static/detail-tabicon.png" ></image> | 89 | <image src="../../static/detail-tabicon.png" ></image> |
| 80 | </picker> | 90 | </picker> |
| 81 | </view> | 91 | </view> |
| 82 | </view> | 92 | </view> --> |
| 83 | <view class="picker" > | 93 | <view class="picker" > |
| 84 | <view class="picker-choice"> | 94 | <view class="picker-choice"> |
| 85 | <view class="choice-left"> | 95 | <view class="choice-left"> |
| 86 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 96 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 87 | </view> | 97 | </view> |
| 88 | <text class="p13-date">年 (Y)</text> | 98 | <text class="p13-date">年 (Y)</text> |
| 89 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | 99 | <text class="p14" style="width: 34px;">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
| 90 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | 100 | <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
| 91 | <image src="../../static/detail-tabicon.png" ></image> | 101 | <image src="../../static/detail-tabicon.png" ></image> |
| 92 | </picker> | 102 | </picker> |
| 93 | <text class="p13-date">月 (M)</text> | 103 | <text class="p13-date">月 (M)</text> |
| 94 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | 104 | <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
| 95 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | 105 | <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
| 96 | <image src="../../static/detail-tabicon.png" ></image> | 106 | <image src="../../static/detail-tabicon.png" ></image> |
| 97 | </picker> | 107 | </picker> |
| 98 | <text class="p13-date">日 (D)</text> | 108 | <text class="p13-date">日 (D)</text> |
| 99 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | 109 | <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}</text> |
| 100 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | 110 | <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> |
| 101 | <image src="../../static/detail-tabicon.png" ></image> | 111 | <image src="../../static/detail-tabicon.png" ></image> |
| 102 | </picker> | 112 | </picker> |
| 103 | </view> | 113 | </view> |
| 104 | </view> | 114 | </view> |
| 105 | <view class="confirm"> | 115 | <view class="confirm"> |
| 106 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | 116 | <image :src="confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> |
| 107 | <text>确认以上输入信息来源于我的验光数据!</text> | 117 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 108 | </view> | 118 | </view> |
| 109 | </view> | 119 | </view> |
| 110 | 120 | ||
| 111 | </template> | 121 | </template> |
| 112 | </view> | 122 | </view> |
| 113 | 123 | ||
| 114 | 124 | ||
| 115 | <view class="footer"> | 125 | <view class="footer" @click="handleSubmit"> |
| 116 | <button class="btn" type="default">提 交</button> | 126 | <button class="btn" type="default">提 交</button> |
| 117 | </view> | 127 | </view> |
| 118 | </view> | 128 | </view> |
| 119 | </template> | 129 | </template> |
| 120 | 130 | ||
| 121 | <script> | 131 | <script> |
| 132 | import store from '@/store'; | ||
| 133 | |||
| 122 | export default { | 134 | export default { |
| 123 | data() { | 135 | data() { |
| 124 | return { | 136 | return { |
| 125 | pickerInfoList:[ | 137 | pickerInfoList:[ |
| 126 | {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}, | 138 | {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, |
| 127 | {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}, | 139 | {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, |
| 128 | {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}, | 140 | {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, |
| 129 | {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}, | 141 | {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} |
| 130 | {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} | ||
| 131 | ], | 142 | ], |
| 132 | tablist: { | 143 | confirm: false, // 用户是否确认 |
| 133 | // read: true, | 144 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], |
| 134 | // seeLong: false, | 145 | name: '夏小花', |
| 135 | confirm: false | 146 | pickerInfoChioce:{ |
| 147 | "leftSph": 0, | ||
| 148 | "rightSph": 0, | ||
| 149 | "leftCyl": 0, | ||
| 150 | "rightCyl": 0, | ||
| 151 | "leftAxi": 0, | ||
| 152 | "rightAxi": 0, | ||
| 153 | "time":{ | ||
| 154 | "year":0, | ||
| 155 | "month": 0, | ||
| 156 | "day":0 , | ||
| 157 | } | ||
| 136 | }, | 158 | }, |
| 137 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | 159 | pd: '',// 瞳距 |
| 160 | kinds:Number, // kinds=1,提交为新增验光,2为修改 | ||
| 161 | mp_id: Number | ||
| 138 | }; | 162 | }; |
| 139 | }, | 163 | }, |
| 164 | onLoad: function (option) { | ||
| 165 | //option为object类型,会序列化上个页面传递的参数 | ||
| 166 | // 初始化SPL、CYL、AXI的值 | ||
| 167 | for (let j = 0; j < 3; j++) { | ||
| 168 | for(let i=-12;i<6;i++){ | ||
| 169 | this.pickerInfoList[j].nameArray1.push(i) | ||
| 170 | this.pickerInfoList[j].nameArray1.push(i+0.5) | ||
| 171 | this.pickerInfoList[j].nameArray2.push(i) | ||
| 172 | this.pickerInfoList[j].nameArray2.push(i+0.5) | ||
| 173 | if(i>=-6){ | ||
| 174 | this.pickerInfoList[j].nameArray1.push(i+0.25) | ||
| 175 | this.pickerInfoList[j].nameArray1.push(i+0.75) | ||
| 176 | this.pickerInfoList[j].nameArray2.push(i+0.25) | ||
| 177 | this.pickerInfoList[j].nameArray2.push(i+0.75) | ||
| 178 | } | ||
| 179 | if(i==5){ | ||
| 180 | this.pickerInfoList[j].nameArray1.push(i+1) | ||
| 181 | this.pickerInfoList[j].nameArray2.push(i+1) | ||
| 182 | } | ||
| 183 | } | ||
| 184 | } | ||
| 185 | // 初始化日期值 | ||
| 186 | for (let i = 1; i < 32; i++){ | ||
| 187 | this.pickerInfoList[3].nameArray3.push(i) | ||
| 188 | } | ||
| 189 | // 初始化年份前后五年 | ||
| 190 | let myDate = new Date(); | ||
| 191 | let nowYear = myDate.getFullYear(); | ||
| 192 | for(let i=0;i<5;i++){ | ||
| 193 | this.pickerInfoList[3].nameArray1.push(nowYear-i) | ||
| 194 | } | ||
| 195 | |||
| 196 | this.kinds=option.kinds | ||
| 197 | if(option.kinds==1){ | ||
| 198 | this.name= ''; | ||
| 199 | this.pd= ''; | ||
| 200 | } else{ | ||
| 201 | console.log('args===>',option.index) | ||
| 202 | const loveList=Object.assign({},this.$store.state.myLoveList.loveList) | ||
| 203 | console.log('args===>',loveList[option.index].in_time) | ||
| 204 | console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) | ||
| 205 | console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) | ||
| 206 | console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) | ||
| 207 | this.name=loveList[option.index].name | ||
| 208 | this.pd=loveList[option.index].pd | ||
| 209 | this.mp_id=loveList[option.index].mp_id | ||
| 210 | // 将kinds =2时的值传到该页面 | ||
| 211 | this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) | ||
| 212 | this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) | ||
| 213 | this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) | ||
| 214 | this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) | ||
| 215 | this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) | ||
| 216 | this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) | ||
| 217 | |||
| 218 | this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) | ||
| 219 | if(loveList[option.index].in_time.toString().slice(5,6)==0){ | ||
| 220 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) | ||
| 221 | } else{ | ||
| 222 | this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) | ||
| 223 | } | ||
| 224 | if(loveList[option.index].in_time.toString().slice(8,9)==0){ | ||
| 225 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) | ||
| 226 | } else{ | ||
| 227 | this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) | ||
| 228 | } | ||
| 229 | } | ||
| 230 | }, | ||
| 140 | methods:{ | 231 | methods:{ |
| 232 | handleInput(e){ | ||
| 233 | this.name=e.target.value | ||
| 234 | }, | ||
| 235 | handleInputPd(e){ | ||
| 236 | // 只能输入正浮点数或正数 | ||
| 237 | if(/^\d+(\.\d+)?$/.test(e.target.value)){ | ||
| 238 | this.pd=e.target.value | ||
| 239 | } else { | ||
| 240 | uni.showToast({ | ||
| 241 | title:"请输入有效数据;示例:89", | ||
| 242 | icon: "none", | ||
| 243 | duration: 3000, | ||
| 244 | }) | ||
| 245 | this.pd = '' | ||
| 246 | } | ||
| 247 | |||
| 248 | }, | ||
| 249 | // 用户提交 | ||
| 250 | handleSubmit(){ | ||
| 251 | if(this.name==''){ | ||
| 252 | uni.showToast({ | ||
| 253 | title:"请输入验光单取名", | ||
| 254 | icon: "none", | ||
| 255 | duration: 3000, | ||
| 256 | }) | ||
| 257 | } | ||
| 258 | if(this.pd==''){ | ||
| 259 | uni.showToast({ | ||
| 260 | title:"请输入瞳距", | ||
| 261 | icon: "none", | ||
| 262 | duration: 3000, | ||
| 263 | }) | ||
| 264 | } | ||
| 265 | if(this.confirm){ | ||
| 266 | if(this.kinds==1){ | ||
| 267 | // 添加用户验光单 | ||
| 268 | console.log('kinds====>',this.kinds) | ||
| 269 | store.dispatch('myLoveList/addMylove', { | ||
| 270 | |||
| 271 | uid: this.$store.state.user.userInfo.uid, | ||
| 272 | openid: this.$store.state.user.userInfo.openid, | ||
| 273 | // mp_name: this.$store.state.user.userInfo.mp_name, | ||
| 274 | leftSph: this.pickerInfoChioce.leftSph, | ||
| 275 | rightSph: this.pickerInfoChioce.rightSph, | ||
| 276 | leftCyl: this.pickerInfoChioce.leftCyl, | ||
| 277 | rightCyl: this.pickerInfoChioce.rightCyl, | ||
| 278 | leftAxi: this.pickerInfoChioce.leftAxi, | ||
| 279 | rightAxi: this.pickerInfoChioce.rightAxi, | ||
| 280 | pd: this.pd,// 瞳距 | ||
| 281 | mp_name:this.name, | ||
| 282 | // time: this.pickerInfoChioce.time, | ||
| 283 | // img_url2: "http://localhost:8087/images/shop_1/1/", | ||
| 284 | }); | ||
| 285 | store.dispatch('myLoveList/getLoveList', { | ||
| 286 | uid: this.$store.state.user.userInfo.uid, | ||
| 287 | }); | ||
| 288 | uni.navigateBack({ | ||
| 289 | delta:1, | ||
| 290 | animationDuration:2000 | ||
| 291 | }) | ||
| 292 | } | ||
| 293 | if(this.kinds==2){ | ||
| 294 | // console.log('kinds====>',this.kinds) | ||
| 295 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) | ||
| 296 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) | ||
| 297 | const leftList = ["leftSph","leftCyl","leftAxi"]; | ||
| 298 | const rightList = ["rightSph", "rightCyl", "rigthAxi"]; | ||
| 299 | for (let j=0; j<3; j++) { | ||
| 300 | if(this.pickerInfoList[j].nameIndex1!=0){ | ||
| 301 | |||
| 302 | store.dispatch('myLoveList/updateMylove', { | ||
| 303 | uid: this.$store.state.user.userInfo.uid, | ||
| 304 | openid: this.$store.state.user.userInfo.openid, | ||
| 305 | mp_id: this.mp_id, | ||
| 306 | keyname: leftList[j], | ||
| 307 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | ||
| 308 | }); | ||
| 309 | } | ||
| 310 | if(this.pickerInfoList[j].nameIndex2 !=0) { | ||
| 311 | store.dispatch('myLoveList/updateMylove', { | ||
| 312 | uid: this.$store.state.user.userInfo.uid, | ||
| 313 | openid: this.$store.state.user.userInfo.openid, | ||
| 314 | mp_id: this.mp_id, | ||
| 315 | keyname: rightList[j], | ||
| 316 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] | ||
| 317 | }); | ||
| 318 | } | ||
| 319 | } | ||
| 320 | store.dispatch('myLoveList/getLoveList', { | ||
| 321 | uid: this.$store.state.user.userInfo.uid, | ||
| 322 | }); | ||
| 323 | uni.navigateBack({ | ||
| 324 | delta:1, | ||
| 325 | animationDuration:2000 | ||
| 326 | }) | ||
| 327 | |||
| 328 | } | ||
| 329 | |||
| 330 | } else{ | ||
| 331 | uni.showToast({ | ||
| 332 | title:"请确认你的验光数据", | ||
| 333 | icon: "none", | ||
| 334 | duration: 3000, | ||
| 335 | }) | ||
| 336 | } | ||
| 337 | }, | ||
| 141 | changeConfirm() { | 338 | changeConfirm() { |
| 142 | this.tablist.confirm = !this.tablist.confirm | 339 | this.confirm = !this.confirm |
| 143 | }, | 340 | }, |
| 144 | 341 | ||
| 145 | bindPickerChange01: function(e) { | 342 | bindPickerChange01: function(e) { |
| 146 | this.pickerInfoList[0].nameIndex1 = e.target.value | 343 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 344 | this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] | ||
| 147 | }, | 345 | }, |
| 148 | bindPickerChange02: function(e) { | 346 | bindPickerChange02: function(e) { |
| 149 | this.pickerInfoList[0].nameIndex2 = e.target.value | 347 | this.pickerInfoList[0].nameIndex2 = e.target.value |
| 348 | this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] | ||
| 150 | }, | 349 | }, |
| 151 | 350 | ||
| 152 | bindPickerChange11: function(e) { | 351 | bindPickerChange11: function(e) { |
| 153 | this.pickerInfoList[1].nameIndex1 = e.target.value | 352 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 353 | this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] | ||
| 154 | }, | 354 | }, |
| 155 | bindPickerChange12: function(e) { | 355 | bindPickerChange12: function(e) { |
| 156 | this.pickerInfoList[1].nameIndex2 = e.target.value | 356 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 357 | this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] | ||
| 157 | }, | 358 | }, |
| 158 | 359 | ||
| 159 | bindPickerChange21: function(e) { | 360 | bindPickerChange21: function(e) { |
| 160 | this.pickerInfoList[2].nameIndex1 = e.target.value | 361 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 362 | this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] | ||
| 161 | }, | 363 | }, |
| 162 | bindPickerChange22: function(e) { | 364 | bindPickerChange22: function(e) { |
| 163 | this.pickerInfoList[2].nameIndex2 = e.target.value | 365 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 366 | this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] | ||
| 164 | }, | 367 | }, |
| 165 | 368 | ||
| 166 | bindPickerChange31: function(e) { | ||
| 167 | this.pickerInfoList[3].nameIndex1 = e.target.value | ||
| 168 | }, | ||
| 169 | bindPickerChange32: function(e) { | ||
| 170 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
| 171 | }, | ||
| 172 | |||
| 173 | bindPickerChange41: function(e) { | 369 | bindPickerChange41: function(e) { |
| 174 | this.pickerInfoList[4].nameIndex1 = e.target.value | 370 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 371 | this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] | ||
| 175 | }, | 372 | }, |
| 176 | bindPickerChange42: function(e) { | 373 | bindPickerChange42: function(e) { |
| 177 | this.pickerInfoList[4].nameIndex2 = e.target.value | 374 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 375 | this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] | ||
| 178 | }, | 376 | }, |
| 179 | bindPickerChange43: function(e) { | 377 | bindPickerChange43: function(e) { |
| 180 | this.pickerInfoList[4].nameIndex3 = e.target.value | 378 | this.pickerInfoList[3].nameIndex3 = e.target.value |
| 379 | this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] | ||
| 181 | }, | 380 | }, |
| 182 | } | 381 | } |
| 183 | } | 382 | } |
| 184 | </script> | 383 | </script> |
| 185 | 384 | ||
| 186 | <style lang="scss"> | 385 | <style lang="scss"> |
| 187 | .wrap{ | 386 | .wrap{ |
| 188 | min-height: 100vh; | 387 | min-height: 100vh; |
| 189 | background-color: #F2F2F2; | 388 | background-color: #F2F2F2; |
| 190 | .body{ | 389 | .body{ |
| 191 | // font-family: PingFangSC-Regular; | 390 | // font-family: PingFangSC-Regular; |
| 192 | font-size: 12px; | 391 | font-size: 12px; |
| 193 | color: #666666; | 392 | color: #666666; |
| 194 | letter-spacing: 0; | 393 | letter-spacing: 0; |
| 195 | .bodyBox{ | 394 | .bodyBox{ |
| 196 | margin-top: 15px; | 395 | margin-top: 15px; |
| 197 | .names{ | 396 | .names{ |
| 198 | // font-family: PingFangSC-Regular; | 397 | // font-family: PingFangSC-Regular; |
| 199 | font-size: 12px; | 398 | font-size: 12px; |
| 200 | color: #151515; | 399 | color: #151515; |
| 201 | letter-spacing: 0; | 400 | letter-spacing: 0; |
| 202 | text-align: justify; | 401 | text-align: justify; |
| 203 | line-height: 17px; | 402 | line-height: 17px; |
| 204 | margin-left: 5px; | 403 | margin-left: 5px; |
| 205 | margin-right: 10px; | 404 | margin-right: 10px; |
| 206 | } | 405 | } |
| 207 | text{ | 406 | text{ |
| 208 | // font-family: PingFangSC-Regular; | 407 | // font-family: PingFangSC-Regular; |
| 209 | font-size: 12px; | 408 | font-size: 12px; |
| 210 | color: #666666; | 409 | color: #666666; |
| 211 | letter-spacing: 0; | 410 | letter-spacing: 0; |
| 212 | text-align: justify; | 411 | text-align: justify; |
| 213 | } | 412 | } |
| 214 | } | 413 | } |
| 215 | 414 | ||
| 216 | } | 415 | } |
| 217 | .goods-form { | 416 | .goods-form { |
| 218 | display: flex; | 417 | display: flex; |
| 219 | flex-direction: column; | 418 | flex-direction: column; |
| 220 | align-items: center; | 419 | align-items: center; |
| 221 | justify-content: center; | 420 | justify-content: center; |
| 222 | background-color: #fff; | 421 | background-color: #fff; |
| 223 | width: 100%; | 422 | width: 100%; |
| 224 | padding: 40rpx 0; | 423 | padding: 40rpx 0; |
| 225 | .p1 { | 424 | .p1 { |
| 226 | font-size: 16px; | 425 | font-size: 16px; |
| 227 | color: #333333; | 426 | color: #333333; |
| 228 | letter-spacing: -0.3px; | 427 | letter-spacing: -0.3px; |
| 229 | text-align: justify; | 428 | text-align: justify; |
| 230 | line-height: 24px; | 429 | line-height: 24px; |
| 231 | margin: 4px 0; | 430 | margin: 4px 0; |
| 232 | 431 | ||
| 233 | } | 432 | } |
| 234 | .p2 { | 433 | .p2 { |
| 235 | font-size: 12px; | 434 | font-size: 12px; |
| 236 | color: #999999; | 435 | color: #999999; |
| 237 | letter-spacing: -0.23px; | 436 | letter-spacing: -0.23px; |
| 238 | margin-bottom: 18rpx; | 437 | margin-bottom: 18rpx; |
| 239 | } | 438 | } |
| 439 | .use_pd{ | ||
| 440 | display: flex; | ||
| 441 | height: 48rpx; | ||
| 442 | line-height: 48rpx; | ||
| 443 | margin-left: -298rpx; | ||
| 444 | margin-top: 30rpx; | ||
| 445 | margin-bottom: 40rpx; | ||
| 446 | align-items: center; | ||
| 447 | justify-content: center; | ||
| 448 | text{ | ||
| 449 | font-size: 14px; | ||
| 450 | color: #333333; | ||
| 451 | margin-right: 44rpx; | ||
| 452 | } | ||
| 453 | } | ||
| 454 | .use_name{ | ||
| 455 | display: flex; | ||
| 456 | height: 48rpx; | ||
| 457 | line-height: 48rpx; | ||
| 458 | margin-left: -220rpx; | ||
| 459 | margin-top: 20rpx; | ||
| 460 | align-items: center; | ||
| 461 | justify-content: center; | ||
| 462 | // text-align: center; | ||
| 463 | text{ | ||
| 464 | font-size: 14px; | ||
| 465 | color: #333333; | ||
| 466 | margin-right: 44rpx; | ||
| 467 | } | ||
| 468 | } | ||
| 240 | image{ | 469 | image{ |
| 241 | width: 28rpx; | 470 | width: 28rpx; |
| 242 | height: 26rpx; | 471 | height: 26rpx; |
| 243 | } | 472 | } |
| 244 | .confirm { | 473 | .confirm { |
| 245 | display: flex; | 474 | display: flex; |
| 246 | align-items: center; | 475 | align-items: center; |
| 247 | font-size: 12px; | 476 | font-size: 12px; |
| 248 | color: #666666; | 477 | color: #666666; |
| 249 | letter-spacing: -0.23px; | 478 | letter-spacing: -0.23px; |
| 250 | width: 684rpx; | 479 | width: 684rpx; |
| 251 | image{ | 480 | image{ |
| 252 | margin-right:25rpx; | 481 | margin-right:25rpx; |
| 253 | } | 482 | } |
| 254 | } | 483 | } |
| 255 | .picker{ | 484 | .picker{ |
| 256 | display: flex; | 485 | display: flex; |
| 257 | flex-direction: column; | 486 | flex-direction: column; |
| 258 | justify-content: center; | 487 | justify-content: center; |
| 259 | align-items: center; | 488 | align-items: center; |
| 260 | width: 100%; | 489 | width: 100%; |
| 261 | image{ | 490 | image{ |
| 262 | width: 10px; | 491 | width: 10px; |
| 263 | height: 10px; | 492 | height: 10px; |
| 264 | margin-right: 5px; | 493 | margin-right: 5px; |
| 265 | } | 494 | } |
| 266 | .picker-choice{ | 495 | .picker-choice{ |
| 267 | display: flex; | 496 | display: flex; |
| 268 | width: 684rpx; | 497 | width: 684rpx; |
| 269 | align-items: center; | 498 | align-items: center; |
| 270 | margin-bottom: 40rpx; | 499 | margin-bottom: 40rpx; |
| 271 | .choice-left{ | 500 | .choice-left{ |
| 272 | width: 210rpx; | 501 | width: 210rpx; |
| 273 | .p11 { | 502 | .p11 { |
| 274 | font-size: 14px; | 503 | font-size: 14px; |
| 275 | color: #333333; | 504 | color: #333333; |
| 276 | letter-spacing: -0.26px; | 505 | letter-spacing: -0.26px; |
| 277 | text-align: justify; | 506 | text-align: justify; |
| 278 | line-height: 24px; | 507 | line-height: 24px; |
| 279 | // margin-right: 10px; | 508 | // margin-right: 10px; |
| 280 | } | 509 | } |
| 281 | .p12 { | 510 | .p12 { |
| 282 | font-size: 10px; | 511 | font-size: 10px; |
| 283 | color: #3F3F3F; | 512 | color: #3F3F3F; |
| 284 | letter-spacing: -0.19px; | 513 | letter-spacing: -0.19px; |
| 285 | text-align: justify; | 514 | text-align: justify; |
| 286 | line-height: 24px; | 515 | line-height: 24px; |
| 287 | } | 516 | } |
| 288 | 517 | ||
| 289 | 518 | ||
| 290 | } | 519 | } |
| 291 | .p13 { | 520 | .p13 { |
| 292 | font-size: 10px; | 521 | font-size: 10px; |
| 293 | color: #999999; | 522 | color: #999999; |
| 294 | letter-spacing: -0.19px; | 523 | letter-spacing: -0.19px; |
| 295 | margin-right: 10px; | 524 | margin-right: 10px; |
| 296 | } | 525 | } |
| 297 | .p13-date { | 526 | .p13-date { |
| 298 | font-size: 10px; | 527 | font-size: 10px; |
| 299 | color: #999999; | 528 | color: #999999; |
| 300 | letter-spacing: -0.19px; | 529 | letter-spacing: -0.19px; |
| 301 | margin-right: 5px; | 530 | margin-right: 5px; |
| 302 | } | 531 | } |
| 303 | .p14 { | 532 | .p14 { |
| 304 | font-size: 14px; | 533 | font-size: 14px; |
| 305 | color: #666666; | 534 | color: #666666; |
| 306 | letter-spacing: -0.26px; | 535 | letter-spacing: -0.26px; |
| 307 | text-align: center; | 536 | text-align: center; |
| 308 | width: 124rpx; | 537 | width: 124rpx; |
| 309 | border-bottom: 1px solid #CFCFCF; | 538 | border-bottom: 1px solid #CFCFCF; |
| 539 | height: 40rpx; | ||
| 540 | |||
| 310 | } | 541 | } |
| 311 | 542 | ||
| 312 | } | 543 | } |
| 313 | } | 544 | } |
| 314 | } | 545 | } |
| 315 | 546 | ||
| 316 | .footer{ | 547 | .footer{ |
| 317 | width: 100%; | 548 | width: 100%; |
| 318 | position: fixed; | 549 | position: fixed; |
| 319 | bottom: 0; | 550 | bottom: 0; |
| 320 | left: 0; | 551 | left: 0; |
| 321 | .btn{ | 552 | .btn{ |
| 322 | width: 100%; | 553 | width: 100%; |
| 323 | height: 112rpx; | 554 | height: 112rpx; |
| 324 | line-height: 112rpx; | 555 | line-height: 112rpx; |
src/pages/purchaseLenses/purchaseLenses.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="goodInfo"> | 3 | <view class="goodInfo"> |
| 4 | <view class="imageWrap"> | 4 | <view class="imageWrap"> |
| 5 | <image | 5 | <image |
| 6 | src="../../static/img/detail/d1.png" | 6 | src="../../static/img/detail/d1.png" |
| 7 | mode="aspectFill" | 7 | mode="aspectFill" |
| 8 | style="width: 188rpx;height: 168rpx;" | 8 | style="width: 188rpx;height: 168rpx;" |
| 9 | ></image> | 9 | ></image> |
| 10 | </view> | 10 | </view> |
| 11 | <view class="infoRight"> | 11 | <view class="infoRight"> |
| 12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | 12 | <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> |
| 13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 13 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 14 | <view class="priceBox"> | 14 | <view class="priceBox"> |
| 15 | <view class="price">¥198</view> | 15 | <view class="price">¥198</view> |
| 16 | <text>(限购{{maxCount}}副)</text> | 16 | <text>(限购{{maxCount}}副)</text> |
| 17 | <view class="counter"> | 17 | <view class="counter"> |
| 18 | <view | 18 | <view |
| 19 | class="btn" | 19 | class="btn" |
| 20 | disabled="this.addDisabled" | 20 | disabled="this.addDisabled" |
| 21 | type="default" | 21 | type="default" |
| 22 | @click="counter(false)" | 22 | @click="counter(false)" |
| 23 | >-</view> | 23 | >-</view> |
| 24 | <text>{{count}}</text> | 24 | <text>{{count}}</text> |
| 25 | <view | 25 | <view |
| 26 | class="btn" | 26 | class="btn" |
| 27 | disabled="this.desDisabled" | 27 | disabled="this.desDisabled" |
| 28 | type="default" | 28 | type="default" |
| 29 | @click="counter(true)" | 29 | @click="counter(true)" |
| 30 | >+</view> | 30 | >+</view> |
| 31 | </view> | 31 | </view> |
| 32 | </view> | 32 | </view> |
| 33 | </view> | 33 | </view> |
| 34 | </view> | 34 | </view> |
| 35 | <view class="goods-data"> | 35 | <view class="goods-data"> |
| 36 | <view class="opCollapse"> | 36 | <view class="opCollapse"> |
| 37 | <view class="body"> | 37 | <view class="body"> |
| 38 | <template v-if="opIsOpen"> | 38 | <template v-if="opIsOpen"> |
| 39 | <view class="goods-form"> | 39 | <view class="goods-form"> |
| 40 | <view class="data-title"> | 40 | <view class="data-title"> |
| 41 | <image src="../../static/icon-data.png"></image> | 41 | <image src="../../static/icon-data.png"></image> |
| 42 | <text class="p1">填写验光数据</text> | 42 | <text class="p1">填写验光数据</text> |
| 43 | </view> | 43 | </view> |
| 44 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> | 44 | <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text> |
| 45 | <view class="picker"> | 45 | <view class="picker"> |
| 46 | <view class="picker-choice"> | 46 | <view class="picker-choice"> |
| 47 | <view class="choice-left"> | 47 | <view class="choice-left"> |
| 48 | <text class="p11">验光单取名:</text> | 48 | <text class="p11">验光单取名:</text> |
| 49 | </view> | 49 | </view> |
| 50 | <input | 50 | <input |
| 51 | class="choice-name uni-input" | 51 | class="choice-name uni-input" |
| 52 | placeholder="下系" | 52 | placeholder="下系" |
| 53 | /> | 53 | /> |
| 54 | </view> | 54 | </view> |
| 55 | </view> | 55 | </view> |
| 56 | <view class="picker"> | 56 | <view class="picker"> |
| 57 | <view class="picker-choice"> | 57 | <view class="picker-choice"> |
| 58 | <view class="choice-left"> | 58 | <view class="choice-left"> |
| 59 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 59 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 60 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 60 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 61 | </view> | 61 | </view> |
| 62 | <text class="p13">左 (OD)</text> | 62 | <text class="p13">左 (OD)</text> |
| 63 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 63 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
| 64 | <picker | 64 | <picker |
| 65 | @change="bindPickerChange01" | 65 | @change="bindPickerChange01" |
| 66 | :value="pickerInfoList[0].nameIndex1" | 66 | :value="pickerInfoList[0].nameIndex1" |
| 67 | :range="pickerInfoList[0].nameArray1" | 67 | :range="pickerInfoList[0].nameArray1" |
| 68 | > | 68 | > |
| 69 | <image src="../../static/detail-tabicon.png"></image> | 69 | <image src="../../static/detail-tabicon.png"></image> |
| 70 | </picker> | 70 | </picker> |
| 71 | <text class="p13">右 (OS)</text> | 71 | <text class="p13">右 (OS)</text> |
| 72 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 72 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
| 73 | <picker | 73 | <picker |
| 74 | @change="bindPickerChange02" | 74 | @change="bindPickerChange02" |
| 75 | :value="pickerInfoList[0].nameIndex2" | 75 | :value="pickerInfoList[0].nameIndex2" |
| 76 | :range="pickerInfoList[0].nameArray2" | 76 | :range="pickerInfoList[0].nameArray2" |
| 77 | > | 77 | > |
| 78 | <image src="../../static/detail-tabicon.png"></image> | 78 | <image src="../../static/detail-tabicon.png"></image> |
| 79 | </picker> | 79 | </picker> |
| 80 | </view> | 80 | </view> |
| 81 | </view> | 81 | </view> |
| 82 | <view class="picker"> | 82 | <view class="picker"> |
| 83 | <view class="picker-choice"> | 83 | <view class="picker-choice"> |
| 84 | <view class="choice-left"> | 84 | <view class="choice-left"> |
| 85 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 85 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 86 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 86 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 87 | </view> | 87 | </view> |
| 88 | <text class="p13">左 (OD)</text> | 88 | <text class="p13">左 (OD)</text> |
| 89 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 89 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
| 90 | <picker | 90 | <picker |
| 91 | @change="bindPickerChange11" | 91 | @change="bindPickerChange11" |
| 92 | :value="pickerInfoList[1].nameIndex1" | 92 | :value="pickerInfoList[1].nameIndex1" |
| 93 | :range="pickerInfoList[1].nameArray1" | 93 | :range="pickerInfoList[1].nameArray1" |
| 94 | > | 94 | > |
| 95 | <image src="../../static/detail-tabicon.png"></image> | 95 | <image src="../../static/detail-tabicon.png"></image> |
| 96 | </picker> | 96 | </picker> |
| 97 | <text class="p13">右 (OS)</text> | 97 | <text class="p13">右 (OS)</text> |
| 98 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 98 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
| 99 | <picker | 99 | <picker |
| 100 | @change="bindPickerChange12" | 100 | @change="bindPickerChange12" |
| 101 | :value="pickerInfoList[1].nameIndex2" | 101 | :value="pickerInfoList[1].nameIndex2" |
| 102 | :range="pickerInfoList[1].nameArray2" | 102 | :range="pickerInfoList[1].nameArray2" |
| 103 | > | 103 | > |
| 104 | <image src="../../static/detail-tabicon.png"></image> | 104 | <image src="../../static/detail-tabicon.png"></image> |
| 105 | </picker> | 105 | </picker> |
| 106 | </view> | 106 | </view> |
| 107 | </view> | 107 | </view> |
| 108 | <view class="picker"> | 108 | <view class="picker"> |
| 109 | <view class="picker-choice"> | 109 | <view class="picker-choice"> |
| 110 | <view class="choice-left"> | 110 | <view class="choice-left"> |
| 111 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 111 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 112 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 112 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 113 | </view> | 113 | </view> |
| 114 | <text class="p13">左 (OD)</text> | 114 | <text class="p13">左 (OD)</text> |
| 115 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 115 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
| 116 | <picker | 116 | <picker |
| 117 | @change="bindPickerChange21" | 117 | @change="bindPickerChange21" |
| 118 | :value="pickerInfoList[2].nameIndex1" | 118 | :value="pickerInfoList[2].nameIndex1" |
| 119 | :range="pickerInfoList[2].nameArray1" | 119 | :range="pickerInfoList[2].nameArray1" |
| 120 | > | 120 | > |
| 121 | <image src="../../static/detail-tabicon.png"></image> | 121 | <image src="../../static/detail-tabicon.png"></image> |
| 122 | </picker> | 122 | </picker> |
| 123 | <text class="p13">右 (OS)</text> | 123 | <text class="p13">右 (OS)</text> |
| 124 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 124 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
| 125 | <picker | 125 | <picker |
| 126 | @change="bindPickerChange22" | 126 | @change="bindPickerChange22" |
| 127 | :value="pickerInfoList[2].nameIndex2" | 127 | :value="pickerInfoList[2].nameIndex2" |
| 128 | :range="pickerInfoList[2].nameArray2" | 128 | :range="pickerInfoList[2].nameArray2" |
| 129 | > | 129 | > |
| 130 | <image src="../../static/detail-tabicon.png"></image> | 130 | <image src="../../static/detail-tabicon.png"></image> |
| 131 | </picker> | 131 | </picker> |
| 132 | </view> | 132 | </view> |
| 133 | </view> | 133 | </view> |
| 134 | <view class="picker"> | 134 | <view class="picker"> |
| 135 | <view class="picker-choice"> | 135 | <view class="picker-choice"> |
| 136 | <view class="choice-left"> | 136 | <view class="choice-left"> |
| 137 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 137 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 138 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 138 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
| 139 | </view> | 139 | </view> |
| 140 | <text class="p13">左 (OD)</text> | 140 | <text class="p13">左 (OD)</text> |
| 141 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 141 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
| 142 | <picker | 142 | <picker |
| 143 | @change="bindPickerChange31" | 143 | @change="bindPickerChange31" |
| 144 | :value="pickerInfoList[3].nameIndex1" | 144 | :value="pickerInfoList[3].nameIndex1" |
| 145 | :range="pickerInfoList[3].nameArray1" | 145 | :range="pickerInfoList[3].nameArray1" |
| 146 | > | 146 | > |
| 147 | <image src="../../static/detail-tabicon.png"></image> | 147 | <image src="../../static/detail-tabicon.png"></image> |
| 148 | </picker> | 148 | </picker> |
| 149 | <text class="p13">右 (OS)</text> | 149 | <text class="p13">右 (OS)</text> |
| 150 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 150 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
| 151 | <picker | 151 | <picker |
| 152 | @change="bindPickerChange32" | 152 | @change="bindPickerChange32" |
| 153 | :value="pickerInfoList[3].nameIndex2" | 153 | :value="pickerInfoList[3].nameIndex2" |
| 154 | :range="pickerInfoList[3].nameArray2" | 154 | :range="pickerInfoList[3].nameArray2" |
| 155 | > | 155 | > |
| 156 | <image src="../../static/detail-tabicon.png"></image> | 156 | <image src="../../static/detail-tabicon.png"></image> |
| 157 | </picker> | 157 | </picker> |
| 158 | </view> | 158 | </view> |
| 159 | </view> | 159 | </view> |
| 160 | <view class="picker"> | 160 | <view class="picker"> |
| 161 | <view class="picker-choice"> | 161 | <view class="picker-choice"> |
| 162 | <view class="choice-left"> | 162 | <view class="choice-left"> |
| 163 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 163 | <text class="p11">{{pickerInfoList[4].nameC}}</text> |
| 164 | </view> | 164 | </view> |
| 165 | <text class="p13-date">年 (Y)</text> | 165 | <text class="p13-date">年 (Y)</text> |
| 166 | <text | 166 | <text |
| 167 | class="p14" | 167 | class="p14" |
| 168 | style="width: 34px;" | 168 | style="width: 34px;" |
| 169 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | 169 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> |
| 170 | <picker | 170 | <picker |
| 171 | @change="bindPickerChange41" | 171 | @change="bindPickerChange41" |
| 172 | :value="pickerInfoList[4].nameIndex1" | 172 | :value="pickerInfoList[4].nameIndex1" |
| 173 | :range="pickerInfoList[4].nameArray1" | 173 | :range="pickerInfoList[4].nameArray1" |
| 174 | > | 174 | > |
| 175 | <image src="../../static/detail-tabicon.png"></image> | 175 | <image src="../../static/detail-tabicon.png"></image> |
| 176 | </picker> | 176 | </picker> |
| 177 | <text class="p13-date">月 (M)</text> | 177 | <text class="p13-date">月 (M)</text> |
| 178 | <text | 178 | <text |
| 179 | class="p14" | 179 | class="p14" |
| 180 | style="width: 30px;" | 180 | style="width: 30px;" |
| 181 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | 181 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> |
| 182 | <picker | 182 | <picker |
| 183 | @change="bindPickerChange42" | 183 | @change="bindPickerChange42" |
| 184 | :value="pickerInfoList[4].nameIndex2" | 184 | :value="pickerInfoList[4].nameIndex2" |
| 185 | :range="pickerInfoList[4].nameArray2" | 185 | :range="pickerInfoList[4].nameArray2" |
| 186 | > | 186 | > |
| 187 | <image src="../../static/detail-tabicon.png"></image> | 187 | <image src="../../static/detail-tabicon.png"></image> |
| 188 | </picker> | 188 | </picker> |
| 189 | <text class="p13-date">日 (D)</text> | 189 | <text class="p13-date">日 (D)</text> |
| 190 | <text | 190 | <text |
| 191 | class="p14" | 191 | class="p14" |
| 192 | style="width: 30px;" | 192 | style="width: 30px;" |
| 193 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | 193 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> |
| 194 | <picker | 194 | <picker |
| 195 | @change="bindPickerChange43" | 195 | @change="bindPickerChange43" |
| 196 | :value="pickerInfoList[4].nameIndex3" | 196 | :value="pickerInfoList[4].nameIndex3" |
| 197 | :range="pickerInfoList[4].nameArray3" | 197 | :range="pickerInfoList[4].nameArray3" |
| 198 | > | 198 | > |
| 199 | <image src="../../static/detail-tabicon.png"></image> | 199 | <image src="../../static/detail-tabicon.png"></image> |
| 200 | </picker> | 200 | </picker> |
| 201 | </view> | 201 | </view> |
| 202 | </view> | 202 | </view> |
| 203 | <view class="confirm"> | 203 | <view class="confirm"> |
| 204 | <image | 204 | <image |
| 205 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" | 205 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" |
| 206 | @click="changeConfirm" | 206 | @click="changeConfirm" |
| 207 | ></image> | 207 | ></image> |
| 208 | <text>确认以上输入信息来源于我的验光数据!</text> | 208 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 209 | </view> | 209 | </view> |
| 210 | </view> | 210 | </view> |
| 211 | 211 | ||
| 212 | </template> | 212 | </template> |
| 213 | <template v-else> | 213 | <template v-else> |
| 214 | <view | 214 | <view |
| 215 | v-for="item in pickerInfoList" | 215 | v-for="item in pickerInfoList" |
| 216 | :key="item.key" | 216 | :key="item.key" |
| 217 | class="bodyBox" | 217 | class="bodyBox" |
| 218 | > | 218 | > |
| 219 | <template v-if="item.nameC==='验光日期'"> | 219 | <template v-if="item.nameC==='验光日期'"> |
| 220 | <text class="names">{{item.nameC}}</text> | 220 | <text class="names">{{item.nameC}}</text> |
| 221 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 221 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 222 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 222 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 223 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 223 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 224 | </template> | 224 | </template> |
| 225 | <template v-else> | 225 | <template v-else> |
| 226 | <template v-if="item.nameC==='度数'"> | 226 | <template v-if="item.nameC==='度数'"> |
| 227 | <text style="display: inline;">*</text> | 227 | <text style="display: inline;">*</text> |
| 228 | </template> | 228 | </template> |
| 229 | 229 | ||
| 230 | <text class="names">{{item.nameC}}</text> | 230 | <text class="names">{{item.nameC}}</text> |
| 231 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 231 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 232 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 232 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 233 | </template> | 233 | </template> |
| 234 | </view> | 234 | </view> |
| 235 | </template> | 235 | </template> |
| 236 | </view> | 236 | </view> |
| 237 | </view> | 237 | </view> |
| 238 | </view> | 238 | </view> |
| 239 | <view class="choose"> | 239 | <view class="choose"> |
| 240 | <view | 240 | <view |
| 241 | class="chooseItem_1_content" | 241 | class="chooseItem_1_content" |
| 242 | v-for="(item,index) in attrList" | 242 | v-for="(item,index) in attrList" |
| 243 | :key="index" | 243 | :key="index" |
| 244 | > | 244 | > |
| 245 | <UniCollapse @change="change(index)"> | 245 | <UniCollapse @change="change(index)"> |
| 246 | <UniCollapseItem | 246 | <UniCollapseItem |
| 247 | :open="show[index]" | 247 | :open="show[index]" |
| 248 | :title="item.meta_name" | 248 | :title="item.meta_name" |
| 249 | showAnimation=false | 249 | showAnimation=false |
| 250 | > | 250 | > |
| 251 | <view class="chooseItem_1_content"> | 251 | <view class="chooseItem_1_content"> |
| 252 | <view class="itemsWrap"> | 252 | <view class="itemsWrap"> |
| 253 | <view | 253 | <view |
| 254 | class="item2" | 254 | class="item2" |
| 255 | v-for="(one,i) in item.attr" | 255 | v-for="(one,i) in item.attr" |
| 256 | :key="i" | 256 | :key="i" |
| 257 | :class="{ active2: current[index] === i }" | 257 | :class="{ active2: current[index] === i }" |
| 258 | @click="onClickItem(index, i)" | 258 | @click="onClickItem(index, i)" |
| 259 | >{{one.name}}</view> | 259 | >{{one.name}}</view> |
| 260 | </view> | 260 | </view> |
| 261 | </view> | 261 | </view> |
| 262 | </UniCollapseItem> | 262 | </UniCollapseItem> |
| 263 | </UniCollapse> | 263 | </UniCollapse> |
| 264 | <view | 264 | <view |
| 265 | class="chooseRes" | 265 | class="chooseRes" |
| 266 | v-show="!show[index]" | 266 | v-show="!show[index]" |
| 267 | >* {{attrList[index].attr[current[index]].name}}</view> | 267 | >* {{attrList[index].attr[current[index]].name}}</view> |
| 268 | </view> | 268 | </view> |
| 269 | <!-- <view class="chooseItem_1 chooseItem"> | 269 | <!-- <view class="chooseItem_1 chooseItem"> |
| 270 | <UniCollapse @change="change(1)"> | 270 | <UniCollapse @change="change(1)"> |
| 271 | <UniCollapseItem | 271 | <UniCollapseItem |
| 272 | open=true | 272 | open=true |
| 273 | title="款式挑选" | 273 | title="款式挑选" |
| 274 | showAnimation=false | 274 | showAnimation=false |
| 275 | > | 275 | > |
| 276 | <view | 276 | <view |
| 277 | class="chooseRes" | 277 | class="chooseRes" |
| 278 | v-show="show[1]" | 278 | v-show="show[1]" |
| 279 | >* {{chooseRes1}}</view> | 279 | >* {{chooseRes1}}</view> |
| 280 | <view class="chooseItem_1_content"> | 280 | <view class="chooseItem_1_content"> |
| 281 | <view class="itemsWrap"> | 281 | <view class="itemsWrap"> |
| 282 | <view | 282 | <view |
| 283 | class="item1" | 283 | class="item1" |
| 284 | v-for="(item,index) in chooseItem1" | 284 | v-for="(item,index) in chooseItem1" |
| 285 | :key="index" | 285 | :key="index" |
| 286 | :style="item.style" | 286 | :style="item.style" |
| 287 | :class="{ active1: current1 === index }" | 287 | :class="{ active1: current1 === index }" |
| 288 | @click="onClickItem1(index)" | 288 | @click="onClickItem1(index)" |
| 289 | ></view> | 289 | ></view> |
| 290 | </view> | 290 | </view> |
| 291 | </view> | 291 | </view> |
| 292 | </UniCollapseItem> | 292 | </UniCollapseItem> |
| 293 | </UniCollapse> | 293 | </UniCollapse> |
| 294 | <view | 294 | <view |
| 295 | class="chooseRes" | 295 | class="chooseRes" |
| 296 | v-show="show[1]" | 296 | v-show="show[1]" |
| 297 | >* {{chooseRes1}}</view> | 297 | >* {{chooseRes1}}</view> |
| 298 | </view> | 298 | </view> |
| 299 | <view class="chooseItem_2 chooseItem "> | 299 | <view class="chooseItem_2 chooseItem "> |
| 300 | <UniCollapse @change="change(2)"> | 300 | <UniCollapse @change="change(2)"> |
| 301 | <UniCollapseItem | 301 | <UniCollapseItem |
| 302 | open=true | 302 | open=true |
| 303 | title="直径" | 303 | title="直径" |
| 304 | showAnimation=false | 304 | showAnimation=false |
| 305 | > | 305 | > |
| 306 | <view class="chooseItem_1_content"> | 306 | <view class="chooseItem_1_content"> |
| 307 | <view class="itemsWrap"> | 307 | <view class="itemsWrap"> |
| 308 | <view | 308 | <view |
| 309 | class="item2" | 309 | class="item2" |
| 310 | v-for="(item,index) in chooseItem2" | 310 | v-for="(item,index) in chooseItem2" |
| 311 | :key="index" | 311 | :key="index" |
| 312 | :class="{ active2: current2 === index }" | 312 | :class="{ active2: current2 === index }" |
| 313 | @click="onClickItem2(index)" | 313 | @click="onClickItem2(index)" |
| 314 | >{{item.num}}</view> | 314 | >{{item.num}}</view> |
| 315 | </view> | 315 | </view> |
| 316 | </view> | 316 | </view> |
| 317 | </UniCollapseItem> | 317 | </UniCollapseItem> |
| 318 | </UniCollapse> | 318 | </UniCollapse> |
| 319 | <view | 319 | <view |
| 320 | class="chooseRes" | 320 | class="chooseRes" |
| 321 | v-show="show[2]" | 321 | v-show="show[2]" |
| 322 | >* {{chooseRes2}}</view> | 322 | >* {{chooseRes2}}</view> |
| 323 | </view> | 323 | </view> |
| 324 | <view class="chooseItem_3 chooseItem"> | 324 | <view class="chooseItem_3 chooseItem"> |
| 325 | <UniCollapse @change="change(3)"> | 325 | <UniCollapse @change="change(3)"> |
| 326 | <UniCollapseItem | 326 | <UniCollapseItem |
| 327 | open=true | 327 | open=true |
| 328 | title="度数" | 328 | title="度数" |
| 329 | showAnimation=false | 329 | showAnimation=false |
| 330 | > | 330 | > |
| 331 | <view class="chooseItem_1_content"> | 331 | <view class="chooseItem_1_content"> |
| 332 | <view class="itemsWrap"> | 332 | <view class="itemsWrap"> |
| 333 | <view | 333 | <view |
| 334 | class="item2" | 334 | class="item2" |
| 335 | v-for="(item,index) in chooseItem3" | 335 | v-for="(item,index) in chooseItem3" |
| 336 | :key="index" | 336 | :key="index" |
| 337 | :class="{ active2: current3 === index }" | 337 | :class="{ active2: current3 === index }" |
| 338 | @click="onClickItem3(index)" | 338 | @click="onClickItem3(index)" |
| 339 | >{{item}}</view> | 339 | >{{item}}</view> |
| 340 | </view> | 340 | </view> |
| 341 | </view> | 341 | </view> |
| 342 | </UniCollapseItem> | 342 | </UniCollapseItem> |
| 343 | </UniCollapse> | 343 | </UniCollapse> |
| 344 | <view | 344 | <view |
| 345 | class="chooseRes" | 345 | class="chooseRes" |
| 346 | v-show="show[3]" | 346 | v-show="show[3]" |
| 347 | >* {{chooseRes3}}</view> | 347 | >* {{chooseRes3}}</view> |
| 348 | </view> --> | 348 | </view> --> |
| 349 | </view> | 349 | </view> |
| 350 | <view | 350 | <view |
| 351 | class="button" | 351 | class="button" |
| 352 | @click="toComfirmOrder" | 352 | @click="toComfirmOrder" |
| 353 | > | 353 | > |
| 354 | 立即结算 | 354 | 立即结算 |
| 355 | </view> | 355 | </view> |
| 356 | </view> | 356 | </view> |
| 357 | </template> | 357 | </template> |
| 358 | 358 | ||
| 359 | <script> | 359 | <script> |
| 360 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 360 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 361 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 361 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 362 | import store from '@/store' | 362 | import store from '@/store' |
| 363 | 363 | ||
| 364 | export default { | 364 | export default { |
| 365 | components: { | 365 | components: { |
| 366 | UniCollapse, | 366 | UniCollapse, |
| 367 | UniCollapseItem | 367 | UniCollapseItem |
| 368 | }, | 368 | }, |
| 369 | data() { | 369 | data() { |
| 370 | return { | 370 | return { |
| 371 | count: 1, | 371 | count: 1, |
| 372 | pid: 0, | 372 | pid: 0, |
| 373 | maxCount: 20, | 373 | maxCount: 20, |
| 374 | isShow: true, | 374 | isShow: true, |
| 375 | opIsOpen: true, | 375 | opIsOpen: true, |
| 376 | addDisabled: false, | 376 | addDisabled: false, |
| 377 | desDisabled: false, | 377 | desDisabled: false, |
| 378 | current1: 0, | 378 | current1: 0, |
| 379 | current2: 0, | 379 | current2: 0, |
| 380 | current3: 0, | 380 | current3: 0, |
| 381 | current: [], | 381 | current: [], |
| 382 | show: [], | 382 | show: [], |
| 383 | chooseRes1: { | 383 | chooseRes1: { |
| 384 | sku_name: 'Miss 黑二代【减龄自然】', | 384 | sku_name: 'Miss 黑二代【减龄自然】', |
| 385 | sk_id: '128' | 385 | sk_id: '128' |
| 386 | }, | 386 | }, |
| 387 | chooseRes2: '14.0', | 387 | chooseRes2: '14.0', |
| 388 | chooseRes3: 0, | 388 | chooseRes3: 0, |
| 389 | chooseItem1: [ | 389 | chooseItem1: [ |
| 390 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, | 390 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, |
| 391 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, | 391 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, |
| 392 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, | 392 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, |
| 393 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 393 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 394 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 394 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 395 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 395 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 396 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 396 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 397 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 397 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 398 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 398 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 399 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 399 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 400 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 400 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 401 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 401 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 402 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 402 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 403 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 403 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 404 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } | 404 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' } |
| 405 | ], | 405 | ], |
| 406 | chooseItem2: [ | 406 | chooseItem2: [ |
| 407 | { num: '14.0' }, | 407 | { num: '14.0' }, |
| 408 | { num: '14.2' }, | 408 | { num: '14.2' }, |
| 409 | { num: '14.4' }, | 409 | { num: '14.4' }, |
| 410 | { num: '14.5' } | 410 | { num: '14.5' } |
| 411 | ], | 411 | ], |
| 412 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], | 412 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], |
| 413 | // 度数相关数据 | 413 | // 度数相关数据 |
| 414 | pickerInfoList: [ | 414 | pickerInfoList: [ |
| 415 | { 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 }, | 415 | { 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 }, |
| 416 | { 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 }, | 416 | { 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 }, |
| 417 | { 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 }, | 417 | { 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 }, |
| 418 | { 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 }, | 418 | { 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 }, |
| 419 | { 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 } | 419 | { 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 } |
| 420 | ] | 420 | ] |
| 421 | } | 421 | } |
| 422 | }, | 422 | }, |
| 423 | computed: { | 423 | computed: { |
| 424 | attrList() { | 424 | attrList() { |
| 425 | return this.$store.state.read.goodInfo.attrList | 425 | return this.$store.state.read.goodInfo.attrList |
| 426 | }, | 426 | }, |
| 427 | skuList() { | 427 | skuList() { |
| 428 | return this.$store.state.read.goodInfo.skuList | 428 | return this.$store.state.read.goodInfo.skuList |
| 429 | } | 429 | } |
| 430 | }, | 430 | }, |
| 431 | onLoad({ pid }) { | 431 | onLoad({ pid }) { |
| 432 | this.pid = pid | 432 | this.pid = pid |
| 433 | store.dispatch('read/fetch', { | 433 | store.dispatch('read/fetch', { |
| 434 | pid | 434 | pid |
| 435 | }).then(() => { | 435 | }).then(() => { |
| 436 | const current = [] | 436 | const current = [] |
| 437 | const show = [] | 437 | const show = [] |
| 438 | for (let index = 0; index < this.attrList.length; index++) { | 438 | for (let index = 0; index < this.attrList.length; index++) { |
| 439 | current.push(0) | 439 | current.push(0) |
| 440 | show.push(true) | 440 | show.push(true) |
| 441 | } | 441 | } |
| 442 | this.current = current | 442 | this.current = current |
| 443 | this.show = show | 443 | this.show = show |
| 444 | }) | 444 | }) |
| 445 | }, | 445 | }, |
| 446 | methods: { | 446 | methods: { |
| 447 | change(num) { | 447 | change(num) { |
| 448 | this.show[num] = !this.show[num] | 448 | this.show[num] = !this.show[num] |
| 449 | this.$forceUpdate() | 449 | this.$forceUpdate() |
| 450 | }, | 450 | }, |
| 451 | onClickItem(index, i) { | 451 | onClickItem(index, i) { |
| 452 | if (this.current[index] !== i) { | 452 | if (this.current[index] !== i) { |
| 453 | this.current[index] = i | 453 | this.current[index] = i |
| 454 | } | 454 | } |
| 455 | this.$forceUpdate() | 455 | this.$forceUpdate() |
| 456 | }, | 456 | }, |
| 457 | onClickItem1(index) { | 457 | onClickItem1(index) { |
| 458 | if (this.current1 !== index) { | 458 | if (this.current1 !== index) { |
| 459 | this.current1 = index | 459 | this.current1 = index |
| 460 | this.chooseRes1 = this.chooseItem1[index].describ | 460 | this.chooseRes1 = this.chooseItem1[index].describ |
| 461 | } | 461 | } |
| 462 | }, | 462 | }, |
| 463 | onClickItem2(index) { | 463 | onClickItem2(index) { |
| 464 | if (this.current2 !== index) { | 464 | if (this.current2 !== index) { |
| 465 | this.current2 = index | 465 | this.current2 = index |
| 466 | this.chooseRes2 = this.chooseItem2[index].num | 466 | this.chooseRes2 = this.chooseItem2[index].num |
| 467 | } | 467 | } |
| 468 | }, | 468 | }, |
| 469 | onClickItem3(index) { | 469 | onClickItem3(index) { |
| 470 | if (this.current3 !== index) { | 470 | if (this.current3 !== index) { |
| 471 | this.current3 = index | 471 | this.current3 = index |
| 472 | this.chooseRes3 = this.chooseItem3[index] | 472 | this.chooseRes3 = this.chooseItem3[index] |
| 473 | } | 473 | } |
| 474 | }, | 474 | }, |
| 475 | counter(isadd) { | 475 | counter(isadd) { |
| 476 | if (isadd) { | 476 | if (isadd) { |
| 477 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 477 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
| 478 | } else { | 478 | } else { |
| 479 | this.count <= 1 ? this.desDisabled = true : this.count-- | 479 | this.count <= 1 ? this.desDisabled = true : this.count-- |
| 480 | } | 480 | } |
| 481 | }, | 481 | }, |
| 482 | toComfirmOrder() { | 482 | toComfirmOrder() { |
| 483 | store.dispatch('order/saveParams', { | 483 | store.dispatch('order/saveParams', { |
| 484 | current: this.current | 484 | current: this.current |
| 485 | }) | 485 | }) |
| 486 | uni.navigateTo({ | 486 | uni.navigateTo({ |
| 487 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` | 487 | url: `../confirmOrder/confirmOrder?pid=${this.pid}` |
| 488 | }) | 488 | }) |
| 489 | } | 489 | } |
| 490 | } | 490 | } |
| 491 | } | 491 | } |
| 492 | </script> | 492 | </script> |
| 493 | 493 | ||
| 494 | <style lang="scss"> | 494 | <style lang="scss"> |
| 495 | .content { | 495 | .content { |
| 496 | min-height: 100vh; | 496 | min-height: 100vh; |
| 497 | background-color: #f2f2f2; | 497 | background-color: #f2f2f2; |
| 498 | // padding-top: 20rpx; | 498 | // padding-top: 20rpx; |
| 499 | .goodInfo { | 499 | .goodInfo { |
| 500 | width: 100%; | 500 | width: 100%; |
| 501 | height: 272rpx; | 501 | height: 272rpx; |
| 502 | border-radius: 16rpx; | 502 | border-radius: 16rpx; |
| 503 | background-color: #ffffff; | 503 | background-color: #ffffff; |
| 504 | box-sizing: border-box; | 504 | box-sizing: border-box; |
| 505 | padding: 36rpx; | 505 | padding: 36rpx; |
| 506 | display: flex; | 506 | display: flex; |
| 507 | flex-direction: row; | 507 | flex-direction: row; |
| 508 | justify-content: flex-start; | 508 | justify-content: flex-start; |
| 509 | .imageWrap { | 509 | .imageWrap { |
| 510 | height: 188rpx; | 510 | height: 188rpx; |
| 511 | width: 188rpx; | 511 | width: 188rpx; |
| 512 | margin-right: 28rpx; | 512 | margin-right: 28rpx; |
| 513 | image { | 513 | image { |
| 514 | height: 188rpx; | 514 | height: 188rpx; |
| 515 | width: 188rpx; | 515 | width: 188rpx; |
| 516 | } | 516 | } |
| 517 | } | 517 | } |
| 518 | .infoRight { | 518 | .infoRight { |
| 519 | display: flex; | 519 | display: flex; |
| 520 | flex-direction: column; | 520 | flex-direction: column; |
| 521 | align-items: flex-start; | 521 | align-items: flex-start; |
| 522 | justify-content: space-between; | 522 | justify-content: space-between; |
| 523 | .goodName { | 523 | .goodName { |
| 524 | font-size: 28rpx; | 524 | font-size: 28rpx; |
| 525 | color: #333333; | 525 | color: #333333; |
| 526 | } | 526 | } |
| 527 | .remarks { | 527 | .remarks { |
| 528 | font-size: 20rpx; | 528 | font-size: 20rpx; |
| 529 | color: #999999; | 529 | color: #999999; |
| 530 | } | 530 | } |
| 531 | .priceBox { | 531 | .priceBox { |
| 532 | display: flex; | 532 | display: flex; |
| 533 | justify-content: space-between; | 533 | justify-content: space-between; |
| 534 | align-items: center; | 534 | align-items: center; |
| 535 | width: 100%; | 535 | width: 100%; |
| 536 | font-size: 14px; | 536 | font-size: 14px; |
| 537 | color: #999999; | 537 | color: #999999; |
| 538 | .price { | 538 | .price { |
| 539 | color: #ff6b4a; | 539 | color: #ff6b4a; |
| 540 | font-size: 28rpx; | 540 | font-size: 28rpx; |
| 541 | } | 541 | } |
| 542 | .counter { | 542 | .counter { |
| 543 | display: flex; | 543 | display: flex; |
| 544 | flex-direction: row; | 544 | flex-direction: row; |
| 545 | justify-content: space-between; | 545 | justify-content: space-between; |
| 546 | align-items: center; | 546 | align-items: center; |
| 547 | font-size: 28rpx; | 547 | font-size: 28rpx; |
| 548 | color: #333333; | 548 | color: #333333; |
| 549 | width: 122rpx; | 549 | width: 122rpx; |
| 550 | .btn { | 550 | .btn { |
| 551 | display: flex; | 551 | display: flex; |
| 552 | justify-content: center; | 552 | justify-content: center; |
| 553 | line-height: 32rpx; | 553 | line-height: 32rpx; |
| 554 | height: 32rpx; | 554 | height: 32rpx; |
| 555 | width: 32rpx; | 555 | width: 32rpx; |
| 556 | background-color: #f2f2f2; | 556 | background-color: #f2f2f2; |
| 557 | color: #cfcfcf; | 557 | color: #cfcfcf; |
| 558 | } | 558 | } |
| 559 | } | 559 | } |
| 560 | } | 560 | } |
| 561 | } | 561 | } |
| 562 | } | 562 | } |
| 563 | .goods-data { | 563 | .goods-data { |
| 564 | width: 100%; | 564 | width: 100%; |
| 565 | box-sizing: border-box; | 565 | box-sizing: border-box; |
| 566 | padding: 37rpx 40rpx 0 40rpx; | 566 | padding: 37rpx 40rpx 0 40rpx; |
| 567 | background: #ffffff; | 567 | background: #ffffff; |
| 568 | border-radius: 12rpx; | 568 | border-radius: 12rpx; |
| 569 | .opCollapse { | 569 | .opCollapse { |
| 570 | width: 100%; | 570 | width: 100%; |
| 571 | padding-bottom: 28rpx; | 571 | padding-bottom: 28rpx; |
| 572 | margin-top: 7px; | 572 | margin-top: 7px; |
| 573 | border-bottom: 1px solid #e9e9e9; | 573 | border-bottom: 1px solid #e9e9e9; |
| 574 | .head { | 574 | .head { |
| 575 | display: flex; | 575 | display: flex; |
| 576 | justify-content: space-between; | 576 | justify-content: space-between; |
| 577 | height: 24px; | 577 | height: 24px; |
| 578 | // font-family: PingFangSC-Medium; | 578 | // font-family: PingFangSC-Medium; |
| 579 | font-size: 16px; | 579 | font-size: 16px; |
| 580 | color: #333333; | 580 | color: #333333; |
| 581 | letter-spacing: -0.3px; | 581 | letter-spacing: -0.3px; |
| 582 | text-align: justify; | 582 | text-align: justify; |
| 583 | line-height: 24px; | 583 | line-height: 24px; |
| 584 | margin-bottom: 18rpx; | 584 | margin-bottom: 18rpx; |
| 585 | .headRighted { | 585 | .headRighted { |
| 586 | width: 0; | 586 | width: 0; |
| 587 | height: 0; | 587 | height: 0; |
| 588 | border-left: 4px solid transparent; | 588 | border-left: 4px solid transparent; |
| 589 | border-right: 4px solid transparent; | 589 | border-right: 4px solid transparent; |
| 590 | border-bottom: 4px solid #cfcfcf; | 590 | border-bottom: 4px solid #cfcfcf; |
| 591 | transform: scaleY(-1); | 591 | transform: scaleY(-1); |
| 592 | margin-top: 10px; | 592 | margin-top: 10px; |
| 593 | } | 593 | } |
| 594 | .headMid { | 594 | .headMid { |
| 595 | // font-family: PingFangSC-Regular; | 595 | // font-family: PingFangSC-Regular; |
| 596 | font-size: 10px; | 596 | font-size: 10px; |
| 597 | color: #999999; | 597 | color: #999999; |
| 598 | letter-spacing: -0.19px; | 598 | letter-spacing: -0.19px; |
| 599 | margin-left: -120rpx; | 599 | margin-left: -120rpx; |
| 600 | } | 600 | } |
| 601 | .headRight { | 601 | .headRight { |
| 602 | width: 0; | 602 | width: 0; |
| 603 | height: 0; | 603 | height: 0; |
| 604 | border-left: 4px solid transparent; | 604 | border-left: 4px solid transparent; |
| 605 | border-right: 4px solid transparent; | 605 | border-right: 4px solid transparent; |
| 606 | border-bottom: 4px solid #cfcfcf; | 606 | border-bottom: 4px solid #cfcfcf; |
| 607 | margin-top: 10px; | 607 | margin-top: 10px; |
| 608 | } | 608 | } |
| 609 | } | 609 | } |
| 610 | .body { | 610 | .body { |
| 611 | // font-family: PingFangSC-Regular; | 611 | // font-family: PingFangSC-Regular; |
| 612 | font-size: 12px; | 612 | font-size: 12px; |
| 613 | color: #666666; | 613 | color: #666666; |
| 614 | letter-spacing: 0; | 614 | letter-spacing: 0; |
| 615 | .bodyBox { | 615 | .bodyBox { |
| 616 | margin-top: 15px; | 616 | margin-top: 15px; |
| 617 | .names { | 617 | .names { |
| 618 | // font-family: PingFangSC-Regular; | 618 | // font-family: PingFangSC-Regular; |
| 619 | font-size: 12px; | 619 | font-size: 12px; |
| 620 | color: #151515; | 620 | color: #151515; |
| 621 | letter-spacing: 0; | 621 | letter-spacing: 0; |
| 622 | text-align: justify; | 622 | text-align: justify; |
| 623 | line-height: 17px; | 623 | line-height: 17px; |
| 624 | margin-left: 5px; | 624 | margin-left: 5px; |
| 625 | margin-right: 10px; | 625 | margin-right: 10px; |
| 626 | } | 626 | } |
| 627 | text { | 627 | text { |
| 628 | // font-family: PingFangSC-Regular; | 628 | // font-family: PingFangSC-Regular; |
| 629 | font-size: 12px; | 629 | font-size: 12px; |
| 630 | color: #666666; | 630 | color: #666666; |
| 631 | letter-spacing: 0; | 631 | letter-spacing: 0; |
| 632 | text-align: justify; | 632 | text-align: justify; |
| 633 | } | 633 | } |
| 634 | } | 634 | } |
| 635 | } | 635 | } |
| 636 | .goods-form { | 636 | .goods-form { |
| 637 | display: flex; | 637 | display: flex; |
| 638 | flex-direction: column; | 638 | flex-direction: column; |
| 639 | align-items: center; | 639 | align-items: center; |
| 640 | justify-content: center; | 640 | justify-content: center; |
| 641 | background-color: #fff; | 641 | background-color: #fff; |
| 642 | width: 100%; | 642 | width: 100%; |
| 643 | .p1 { | 643 | .p1 { |
| 644 | font-size: 16px; | 644 | font-size: 16px; |
| 645 | color: #333333; | 645 | color: #333333; |
| 646 | letter-spacing: -0.3px; | 646 | letter-spacing: -0.3px; |
| 647 | text-align: justify; | 647 | text-align: justify; |
| 648 | line-height: 24px; | 648 | line-height: 24px; |
| 649 | margin: 4px 0; | 649 | margin: 4px 0; |
| 650 | } | 650 | } |
| 651 | .p2 { | 651 | .p2 { |
| 652 | font-size: 12px; | 652 | font-size: 12px; |
| 653 | color: #999999; | 653 | color: #999999; |
| 654 | letter-spacing: -0.23px; | 654 | letter-spacing: -0.23px; |
| 655 | margin-bottom: 18rpx; | 655 | margin-bottom: 18rpx; |
| 656 | } | 656 | } |
| 657 | image { | 657 | image { |
| 658 | width: 28rpx; | 658 | width: 28rpx; |
| 659 | height: 26rpx; | 659 | height: 26rpx; |
| 660 | } | 660 | } |
| 661 | .confirm { | 661 | .confirm { |
| 662 | display: flex; | 662 | display: flex; |
| 663 | align-items: center; | 663 | align-items: center; |
| 664 | font-size: 12px; | 664 | font-size: 12px; |
| 665 | color: #666666; | 665 | color: #666666; |
| 666 | letter-spacing: -0.23px; | 666 | letter-spacing: -0.23px; |
| 667 | width: 684rpx; | 667 | width: 684rpx; |
| 668 | image { | 668 | image { |
| 669 | margin-right: 25rpx; | 669 | margin-right: 25rpx; |
| 670 | } | 670 | } |
| 671 | } | 671 | } |
| 672 | .picker { | 672 | .picker { |
| 673 | display: flex; | 673 | display: flex; |
| 674 | flex-direction: column; | 674 | flex-direction: column; |
| 675 | justify-content: center; | 675 | justify-content: center; |
| 676 | align-items: center; | 676 | align-items: center; |
| 677 | width: 100%; | 677 | width: 100%; |
| 678 | image { | 678 | image { |
| 679 | width: 10px; | 679 | width: 10px; |
| 680 | height: 10px; | 680 | height: 10px; |
| 681 | margin-right: 5px; | 681 | margin-right: 5px; |
| 682 | } | 682 | } |
| 683 | .picker-choice { | 683 | .picker-choice { |
| 684 | display: flex; | 684 | display: flex; |
| 685 | width: 684rpx; | 685 | width: 684rpx; |
| 686 | align-items: center; | 686 | align-items: center; |
| 687 | margin-bottom: 40rpx; | 687 | margin-bottom: 40rpx; |
| 688 | .choice-left { | 688 | .choice-left { |
| 689 | width: 210rpx; | 689 | width: 210rpx; |
| 690 | .p11 { | 690 | .p11 { |
| 691 | font-size: 14px; | 691 | font-size: 14px; |
| 692 | color: #333333; | 692 | color: #333333; |
| 693 | letter-spacing: -0.26px; | 693 | letter-spacing: -0.26px; |
| 694 | text-align: justify; | 694 | text-align: justify; |
| 695 | line-height: 24px; | 695 | line-height: 24px; |
| 696 | } | 696 | } |
| 697 | .p12 { | 697 | .p12 { |
| 698 | font-size: 10px; | 698 | font-size: 10px; |
| 699 | color: #3f3f3f; | 699 | color: #3f3f3f; |
| 700 | letter-spacing: -0.19px; | 700 | letter-spacing: -0.19px; |
| 701 | text-align: justify; | 701 | text-align: justify; |
| 702 | line-height: 24px; | 702 | line-height: 24px; |
| 703 | } | 703 | } |
| 704 | } | 704 | } |
| 705 | .p13 { | 705 | .p13 { |
| 706 | font-size: 10px; | 706 | font-size: 10px; |
| 707 | color: #999999; | 707 | color: #999999; |
| 708 | letter-spacing: -0.19px; | 708 | letter-spacing: -0.19px; |
| 709 | margin-right: 10px; | 709 | margin-right: 10px; |
| 710 | } | 710 | } |
| 711 | .p13-date { | 711 | .p13-date { |
| 712 | font-size: 10px; | 712 | font-size: 10px; |
| 713 | color: #999999; | 713 | color: #999999; |
| 714 | letter-spacing: -0.19px; | 714 | letter-spacing: -0.19px; |
| 715 | margin-right: 5px; | 715 | margin-right: 5px; |
| 716 | } | 716 | } |
| 717 | .p14 { | 717 | .p14 { |
| 718 | font-size: 14px; | 718 | font-size: 14px; |
| 719 | color: #666666; | 719 | color: #666666; |
| 720 | letter-spacing: -0.26px; | 720 | letter-spacing: -0.26px; |
| 721 | text-align: center; | 721 | text-align: center; |
| 722 | width: 124rpx; | 722 | width: 124rpx; |
| 723 | border-bottom: 1px solid #cfcfcf; | 723 | border-bottom: 1px solid #cfcfcf; |
| 724 | } | 724 | } |
| 725 | } | 725 | } |
| 726 | } | 726 | } |
| 727 | } | 727 | } |
| 728 | } | 728 | } |
| 729 | } | 729 | } |
| 730 | .choose { | 730 | .choose { |
| 731 | width: 100%; | 731 | width: 100%; |
| 732 | background: #ffffff; | 732 | background: #ffffff; |
| 733 | border-radius: 12rpx; | 733 | border-radius: 12rpx; |
| 734 | margin-top: 20rpx; | 734 | margin-top: 20rpx; |
| 735 | padding: 40rpx 40rpx 112rpx 40rpx; | 735 | padding: 40rpx 40rpx 112rpx 40rpx; |
| 736 | box-sizing: border-box; | 736 | box-sizing: border-box; |
| 737 | .chooseItem { | 737 | .chooseItem { |
| 738 | width: 100%; | 738 | width: 100%; |
| 739 | padding-bottom: 32rpx; | 739 | padding-bottom: 32rpx; |
| 740 | border-bottom: 1px solid #e9e9e9; | 740 | border-bottom: 1px solid #e9e9e9; |
| 741 | margin-bottom: 28rpx; | 741 | margin-bottom: 28rpx; |
| 742 | } | 742 | } |
| 743 | .chooseRes { | 743 | .chooseRes { |
| 744 | font-size: 12px; | 744 | font-size: 12px; |
| 745 | color: #666666; | 745 | color: #666666; |
| 746 | } | 746 | } |
| 747 | .itemsWrap { | 747 | .itemsWrap { |
| 748 | display: flex; | 748 | display: flex; |
| 749 | flex-direction: row; | 749 | flex-direction: row; |
| 750 | flex-wrap: wrap; | 750 | flex-wrap: wrap; |
| 751 | justify-content: flex-start; | 751 | justify-content: flex-start; |
| 752 | align-items: center; | 752 | align-items: center; |
| 753 | padding-top: 24rpx; | 753 | padding-top: 24rpx; |
| 754 | .item1 { | 754 | .item1 { |
| 755 | width: 64rpx; | 755 | width: 64rpx; |
| 756 | height: 64rpx; | 756 | height: 64rpx; |
| 757 | border-radius: 32rpx; | 757 | border-radius: 32rpx; |
| 758 | margin: 0 36rpx 24rpx 0; | 758 | margin: 0 36rpx 24rpx 0; |
| 759 | transition: all 0.3s; | 759 | transition: all 0.3s; |
| 760 | border: 1px solid #ffffff; | 760 | border: 1px solid #ffffff; |
| 761 | } | 761 | } |
| 762 | .item2 { | 762 | .item2 { |
| 763 | // width: 100rpx; | 763 | // width: 100rpx; |
| 764 | padding: 0 30rpx; | 764 | padding: 0 30rpx; |
| 765 | height: 60rpx; | 765 | height: 60rpx; |
| 766 | margin: 0 20rpx 20rpx 0; | 766 | margin: 0 20rpx 20rpx 0; |
| 767 | transition: all 0.3s; | 767 | transition: all 0.3s; |
| 768 | background: #f2f2f2; | 768 | background: #f2f2f2; |
| 769 | border-radius: 2px; | 769 | border-radius: 2px; |
| 770 | border-radius: 2px; | 770 | border-radius: 2px; |
| 771 | line-height: 60rpx; | 771 | line-height: 60rpx; |
| 772 | text-align: center; | 772 | text-align: center; |
| 773 | color: #666666; | 773 | color: #666666; |
| 774 | font-size: 12px; | 774 | font-size: 12px; |
| 775 | } | 775 | } |
| 776 | .active1 { | 776 | .active1 { |
| 777 | opacity: 0.7; | 777 | opacity: 0.7; |
| 778 | border: 1px solid #ff6b4a; | 778 | border: 1px solid #ff6b4a; |
| 779 | } | 779 | } |
| 780 | .active2 { | 780 | .active2 { |
| 781 | background: rgba(255, 107, 74, 0.15); | 781 | background: rgba(255, 107, 74, 0.15); |
| 782 | color: #ff6b4a; | 782 | color: #ff6b4a; |
| 783 | } | 783 | } |
| 784 | } | 784 | } |
| 785 | } | 785 | } |
| 786 | .button { | 786 | .button { |
| 787 | width: 100%; | 787 | width: 100%; |
| 788 | height: 112rpx; | 788 | height: 112rpx; |
| 789 | background-color: #ff6b4a; | 789 | background-color: #ff6b4a; |
| 790 | font-size: 16px; | 790 | font-size: 16px; |
| 791 | color: #ffffff; | 791 | color: #ffffff; |
| 792 | line-height: 112rpx; | 792 | line-height: 112rpx; |
| 793 | text-align: center; | 793 | text-align: center; |
| 794 | position: fixed; | 794 | position: fixed; |
| 795 | bottom: 0; | 795 | bottom: 0; |
| 796 | left: 0; | 796 | left: 0; |
| 797 | } | 797 | } |
| 798 | } | 798 | } |
| 799 | </style> | 799 | </style> |
| 800 | 800 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <!-- 弹窗 --> | ||
| 4 | <uni-popup | ||
| 5 | ref="popup" | ||
| 6 | type="center" | ||
| 7 | > | ||
| 8 | <!-- 给一个左边弹窗的样式 --> | ||
| 9 | <!-- 关闭弹窗按钮 --> | ||
| 10 | <view | ||
| 11 | class="closeBtn" | ||
| 12 | @tap="this.$refs.popup.close()" | ||
| 13 | >x</view> | ||
| 14 | <view | ||
| 15 | class="popUpWrap" | ||
| 16 | v-if="whichTap==0" | ||
| 17 | > | ||
| 18 | <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> | ||
| 19 | |||
| 20 | <!-- 左 --> | ||
| 21 | <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> | ||
| 22 | <!-- 右 --> | ||
| 23 | <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> | ||
| 3 | <view | 24 | </view> |
| 4 | v-if="isAuth" | 25 | <view |
| 5 | class="content" | 26 | class="popUpWrap" |
| 6 | > | 27 | v-if="whichTap==1" |
| 7 | <view class="userInfo"> | 28 | > |
| 8 | <view class="info"> | 29 | <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> |
| 9 | <image | 30 | </view> |
| 10 | :src="headerphoto" | 31 | <view |
| 11 | mode="aspectFill" | 32 | class="popUpWrap" |
| 12 | ></image> | 33 | v-if="whichTap==2" |
| 13 | <view class="infoText"> | 34 | > |
| 14 | <text class="userName">{{nickName}}</text> | 35 | <button @tap="chatOur(1)">客服1</button> |
| 15 | </view> | 36 | <button @tap="chatOur(2)">客服2</button> |
| 16 | </view> | 37 | </view> |
| 17 | <!-- <view class="service"> | 38 | </uni-popup> |
| 18 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 39 | <view |
| 19 | </view> --> | 40 | v-if="isAuth" |
| 20 | </view> | 41 | class="content" |
| 21 | <view | 42 | > |
| 22 | class="myOpticsData" | 43 | <view class="userInfo"> |
| 23 | @click="toOpticsData" | 44 | <view class="info"> |
| 24 | > | 45 | <image |
| 25 | <view class="left"> | 46 | :src="headerphoto" |
| 26 | <image | 47 | mode="aspectFill" |
| 27 | src="../../static/img/user/dataWrite.png" | 48 | ></image> |
| 28 | mode="aspectFit" | 49 | <view class="infoText"> |
| 29 | ></image> | 50 | <text class="userName">{{nickName}}</text> |
| 30 | <text>验光数据</text> | 51 | </view> |
| 31 | </view> | 52 | </view> |
| 32 | <image | 53 | <!-- <view class="service"> |
| 33 | src="../../static/right.png" | 54 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 34 | mode="aspectFit" | 55 | </view> --> |
| 35 | ></image> | 56 | </view> |
| 36 | </view> | 57 | <view |
| 37 | <view class="myOrder"> | 58 | class="myOpticsData" |
| 38 | <view class="orderHeader"> | 59 | @tap="toOpticsData" |
| 39 | <text>全部订单</text> | 60 | > |
| 40 | <view | 61 | <view class="left"> |
| 41 | class="btn" | 62 | <image |
| 42 | @click="toMyOrder('10')" | 63 | src="../../static/img/user/dataWrite.png" |
| 43 | > | 64 | mode="aspectFit" |
| 44 | 全部 | 65 | ></image> |
| 45 | <image | 66 | <text>验光数据</text> |
| 46 | src="../../static/right.png" | 67 | </view> |
| 47 | mode="aspectFit" | 68 | <image |
| 48 | ></image> | 69 | src="../../static/right.png" |
| 49 | </view> | 70 | mode="aspectFit" |
| 50 | </view> | 71 | ></image> |
| 51 | <view class="orderBody"> | 72 | </view> |
| 52 | <view | 73 | <view class="myOrder"> |
| 53 | class="item waitPay" | 74 | <view class="orderHeader"> |
| 54 | @click="toMyOrder('0')" | 75 | <text>全部订单</text> |
| 55 | > | 76 | <view |
| 56 | <image | 77 | class="btn" |
| 57 | src="../../static/img/user/waitDeliver.png" | 78 | @click="toMyOrder('10')" |
| 58 | mode="aspectFit" | 79 | > |
| 59 | ></image> | 80 | 全部 |
| 60 | <text>待付款</text> | 81 | <image |
| 61 | </view> | 82 | src="../../static/right.png" |
| 62 | <view | 83 | mode="aspectFit" |
| 63 | class="item waitDeliver" | 84 | ></image> |
| 64 | @click="toMyOrder('1')" | 85 | </view> |
| 65 | > | 86 | </view> |
| 66 | <image | 87 | <view class="orderBody"> |
| 67 | src="../../static/img/user/waitPay.png" | 88 | <view |
| 68 | mode="aspectFit" | 89 | class="item waitPay" |
| 69 | ></image> | 90 | @click="toMyOrder('0')" |
| 70 | <text>待收货</text> | 91 | > |
| 71 | </view> | 92 | <image |
| 72 | <view | 93 | src="../../static/img/user/waitDeliver.png" |
| 73 | class="item waitReceive" | 94 | mode="aspectFit" |
| 74 | @click="toMyOrder('2')" | 95 | ></image> |
| 75 | > | 96 | <text>待付款</text> |
| 76 | <image | 97 | </view> |
| 77 | src="../../static/img/user/waitReceive.png" | 98 | <view |
| 78 | mode="aspectFit" | 99 | class="item waitDeliver" |
| 79 | ></image> | 100 | @click="toMyOrder('1')" |
| 80 | <text>已完成</text> | 101 | > |
| 81 | </view> | 102 | <image |
| 82 | <!-- <view class="item service" @click="toMyOrder('3')"> | 103 | src="../../static/img/user/waitPay.png" |
| 83 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> | 104 | mode="aspectFit" |
| 84 | <text>已评价</text> | 105 | ></image> |
| 85 | </view> --> | 106 | <text>待收货</text> |
| 86 | </view> | 107 | </view> |
| 87 | </view> | 108 | <view |
| 88 | <view class="someItem"> | 109 | class="item waitReceive" |
| 89 | <!-- <view class="item"> | 110 | @click="toMyOrder('2')" |
| 90 | <view class="left"> | 111 | > |
| 91 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> | 112 | <image |
| 92 | <text>推广记录与收益</text> | 113 | src="../../static/img/user/waitReceive.png" |
| 93 | </view> | 114 | mode="aspectFit" |
| 94 | <image src="../../static/right.png" mode="aspectFit"></image> | 115 | ></image> |
| 95 | </view> --> | 116 | <text>已完成</text> |
| 96 | <view class="item"> | 117 | </view> |
| 97 | <view class="left"> | 118 | <!-- <view class="item service" @click="toMyOrder('3')"> |
| 98 | <image | 119 | <image src="../../static/img/user/refound.png" mode="aspectFit"></image> |
| 99 | src="../../static/address-icon.png" | 120 | <text>已评价</text> |
| 100 | mode="aspectFit" | 121 | </view> --> |
| 101 | ></image> | 122 | </view> |
| 102 | <text @tap="toAddress">地址管理</text> | 123 | </view> |
| 103 | </view> | 124 | <view class="someItem"> |
| 104 | <image | 125 | <!-- <view class="item"> |
| 105 | src="../../static/right.png" | 126 | <view class="left"> |
| 106 | mode="aspectFit" | 127 | <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> |
| 107 | ></image> | 128 | <text>推广记录与收益</text> |
| 108 | </view> | 129 | </view> |
| 109 | <view class="item"> | 130 | <image src="../../static/right.png" mode="aspectFit"></image> |
| 110 | <view class="left"> | 131 | </view> --> |
| 111 | <image | 132 | <view class="item"> |
| 112 | src="../../static/img/user/introduce.png" | 133 | <view class="left"> |
| 113 | mode="aspectFit" | 134 | <image |
| 114 | ></image> | 135 | src="../../static/address-icon.png" |
| 136 | mode="aspectFit" | ||
| 115 | <text @tap="introduce">系统介绍</text> | 137 | ></image> |
| 116 | </view> | 138 | <text @tap="toAddress">地址管理</text> |
| 117 | <image | 139 | </view> |
| 118 | src="../../static/right.png" | 140 | <image |
| 141 | src="../../static/right.png" | ||
| 119 | mode="aspectFit" | 142 | mode="aspectFit" |
| 120 | ></image> | 143 | ></image> |
| 121 | </view> | 144 | </view> |
| 122 | <view class="item"> | 145 | <view class="item"> |
| 123 | <view class="left"> | 146 | <view class="left"> |
| 147 | <image | ||
| 124 | <image | 148 | src="../../static/img/user/introduce.png" |
| 125 | src="../../static/img/user/joinUs.png" | 149 | mode="aspectFit" |
| 126 | mode="aspectFit" | 150 | ></image> |
| 127 | ></image> | 151 | <text @tap="introduce">系统介绍</text> |
| 128 | <text @tap="joinUs">加入我们</text> | 152 | </view> |
| 129 | </view> | 153 | <image |
| 130 | <image | 154 | src="../../static/right.png" |
| 131 | src="../../static/right.png" | 155 | mode="aspectFit" |
| 132 | mode="aspectFit" | 156 | ></image> |
| 133 | ></image> | 157 | </view> |
| 134 | </view> | 158 | <view class="item"> |
| 135 | <view class="item"> | 159 | <view class="left"> |
| 136 | <view class="left"> | 160 | <image |
| 137 | <image | 161 | src="../../static/img/user/joinUs.png" |
| 138 | src="../../static/img/user/service.png" | 162 | mode="aspectFit" |
| 139 | mode="aspectFit" | 163 | ></image> |
| 140 | ></image> | 164 | <text @tap="joinUs">加入我们</text> |
| 141 | <text>联系客服</text> | 165 | </view> |
| 142 | </view> | 166 | <image |
| 143 | <image | 167 | src="../../static/right.png" |
| 144 | src="../../static/right.png" | 168 | mode="aspectFit" |
| 145 | mode="aspectFit" | 169 | ></image> |
| 146 | ></image> | 170 | </view> |
| 147 | </view> | 171 | <view class="item"> |
| 148 | </view> | 172 | <view class="left"> |
| 149 | <view class="recommend"> | 173 | <image |
| 150 | <view class="title"> | 174 | src="../../static/img/user/service.png" |
| 151 | <view class="line"></view> | 175 | mode="aspectFit" |
| 152 | <view class="text">精选推荐</view> | 176 | ></image> |
| 153 | <view class="line"></view> | 177 | <text>联系客服</text> |
| 154 | </view> | 178 | </view> |
| 155 | <!-- 商品列表 --> | 179 | <image |
| 156 | <view class="goods-list"> | 180 | src="../../static/right.png" |
| 157 | <scroll-view | 181 | mode="aspectFit" |
| 158 | enable-flex | 182 | ></image> |
| 159 | @scrolltolower="handleScrolltolower" | 183 | </view> |
| 160 | scroll-y | 184 | </view> |
| 161 | class="product-list" | 185 | <view class="recommend"> |
| 162 | > | 186 | <view class="title"> |
| 163 | <view | 187 | <view class="line"></view> |
| 164 | class="product" | 188 | <view class="text">精选推荐</view> |
| 165 | v-for="(item, index) in userRecommandList" | 189 | <view class="line"></view> |
| 190 | </view> | ||
| 191 | <!-- 商品列表 --> | ||
| 192 | <view class="goods-list"> | ||
| 193 | <scroll-view | ||
| 194 | enable-flex | ||
| 195 | @scrolltolower="handleScrolltolower" | ||
| 196 | scroll-y | ||
| 197 | class="product-list" | ||
| 198 | > | ||
| 199 | <view | ||
| 200 | class="product" | ||
| 201 | v-for="(item, index) in userRecommandList" | ||
| 202 | :key="index" | ||
| 203 | > | ||
| 204 | <Card :goods="item"></Card> | ||
| 205 | </view> | ||
| 166 | :key="index" | 206 | </scroll-view> |
| 167 | > | 207 | <view class="loading-text">{{loadingText}}</view> |
| 168 | <Card :goods="item"></Card> | 208 | </view> |
| 169 | </view> | 209 | </view> |
| 170 | </scroll-view> | 210 | </view> |
| 171 | <view class="loading-text">{{loadingText}}</view> | 211 | <view |
| 172 | </view> | 212 | v-else |
| 173 | </view> | 213 | class="auth" |
| 174 | </view> | 214 | > |
| 175 | <view | 215 | <view class="icon"></view> |
| 176 | v-else | 216 | <view class="divider"></view> |
| 177 | class="auth" | 217 | <view class="title">申请获取以下权限</view> |
| 178 | > | 218 | <view class="text">获得您的公开信息(昵称、头像等)</view> |
| 179 | <view class="icon"></view> | 219 | <button |
| 180 | <view class="divider"></view> | 220 | type="primary" |
| 181 | <view class="title">申请获取以下权限</view> | 221 | open-type="getUserInfo" |
| 182 | <view class="text">获得您的公开信息(昵称、头像等)</view> | 222 | @getuserinfo="onGotUserInfo" |
| 183 | <button | 223 | >授权登陆</button> |
| 184 | type="primary" | 224 | </view> |
| 185 | open-type="getUserInfo" | 225 | </view> |
| 186 | @getuserinfo="onGotUserInfo" | 226 | </template> |
| 187 | >授权登陆</button> | 227 | |
| 188 | </view> | 228 | <script> |
| 189 | </view> | 229 | import Card from '@/components/CommodityCard/CommodityCard.vue' |
| 190 | </template> | 230 | import store from '@/store' |
| 191 | 231 | import UniPopup from '@/components/UniPopup/uni-popup.vue' | |
| 192 | <script> | 232 | |
| 193 | import Card from '@/components/CommodityCard/CommodityCard.vue' | 233 | export default { |
| 194 | import store from '@/store' | 234 | components: { |
| 195 | 235 | Card, | |
| 196 | export default { | 236 | UniPopup |
| 197 | components: { | 237 | }, |
| 198 | Card: Card | 238 | data() { |
| 199 | }, | 239 | return { |
| 200 | data() { | 240 | isAuth: true, // 是否显示授权页面, |
| 201 | return { | 241 | pagesnum: 1, // 分页请求初始值 |
| 202 | isAuth: true, // 是否显示授权页面, | 242 | whichTap: 0 // 弹窗渲染选择条件 |
| 203 | pagesnum: 1 // 分页请求初始值 | 243 | } |
| 204 | } | 244 | }, |
| 205 | }, | 245 | onLoad() { |
| 206 | onLoad() { | 246 | // 判断是否授权 |
| 207 | // 判断是否授权 | 247 | uni.getSetting({ |
| 208 | uni.getSetting({ | 248 | success(res) { |
| 209 | success(res) { | 249 | console.log('authSetting', res.authSetting) |
| 210 | console.log('authSetting', res.authSetting) | 250 | if (res.authSetting['scope.userInfo'] === true) { |
| 211 | if (res.authSetting['scope.userInfo'] === true) { | 251 | this.isAuth = true |
| 212 | this.isAuth = true | 252 | } else { |
| 213 | } else { | 253 | this.isAuth = false |
| 214 | this.isAuth = false | 254 | } |
| 215 | } | 255 | } |
| 216 | } | 256 | }) |
| 217 | }) | 257 | store.dispatch('userRecommand/getRecommandList', { |
| 218 | store.dispatch('userRecommand/getRecommandList', { | 258 | uid: this.$store.state.user.userInfo.uid, |
| 219 | uid: this.$store.state.user.userInfo.uid, | 259 | openid: this.$store.state.user.userInfo.openid, |
| 220 | openid: this.$store.state.user.userInfo.openid, | 260 | page: this.pagesnum |
| 221 | page: this.pagesnum | 261 | }) |
| 222 | }) | 262 | }, |
| 223 | }, | 263 | computed: { |
| 224 | computed: { | 264 | nickName() { |
| 225 | nickName() { | 265 | return this.$store.state.user.userInfo.nickName |
| 226 | return this.$store.state.user.userInfo.nickName | 266 | }, |
| 227 | }, | 267 | headerphoto() { |
| 228 | headerphoto() { | 268 | return this.$store.state.user.userInfo.headerphoto |
| 229 | return this.$store.state.user.userInfo.headerphoto | 269 | }, |
| 230 | }, | 270 | userRecommandList() { |
| 231 | userRecommandList() { | 271 | return this.$store.state.userRecommand.recommandList |
| 232 | return this.$store.state.userRecommand.recommandList | 272 | } |
| 233 | } | 273 | }, |
| 234 | }, | 274 | methods: { |
| 235 | methods: { | 275 | // 弹窗 |
| 236 | // 授权 | 276 | changeTap(item) { |
| 237 | onGotUserInfo(e) { | 277 | this.whichTap = item |
| 238 | if (e.detail.errMsg === 'getUserInfo:ok') { | 278 | this.$refs.popup.open() |
| 239 | const { fromInfo } = this.$store.state.user | 279 | }, |
| 240 | // 用户授权成功 | 280 | chatOur(item) { |
| 241 | store.dispatch('user/getUserInfo', fromInfo) | 281 | if (item === 1) { |
| 242 | this.isAuth = true | 282 | uni.makePhoneCall({ |
| 243 | } | 283 | phoneNumber: 13376189297 // 客服1 电话 |
| 244 | }, | 284 | }) |
| 245 | toAddress() { | 285 | } else { |
| 246 | uni.navigateTo({ | 286 | uni.makePhoneCall({ |
| 247 | url: '../address/addressList', | 287 | phoneNumber: 18014995101 // 客服2 电话 |
| 248 | success: res => {}, | 288 | }) |
| 249 | fail: () => {}, | 289 | } |
| 250 | complete: () => {} | 290 | }, |
| 251 | }) | 291 | // 授权 |
| 252 | }, | 292 | onGotUserInfo(e) { |
| 253 | introduce() { | 293 | if (e.detail.errMsg === 'getUserInfo:ok') { |
| 254 | uni.showModal({ | 294 | const { fromInfo } = this.$store.state.user |
| 255 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', | 295 | // 用户授权成功 |
| 256 | showCancel: false | 296 | store.dispatch('user/getUserInfo', fromInfo) |
| 257 | }) | 297 | this.isAuth = true |
| 258 | }, | 298 | } |
| 259 | joinUs() { | 299 | }, |
| 260 | uni.showModal({ | 300 | toAddress() { |
| 261 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', | 301 | uni.navigateTo({ |
| 262 | showCancel: false | 302 | url: '../address/addressList', |
| 263 | }) | 303 | success: res => {}, |
| 264 | }, | 304 | fail: () => {}, |
| 265 | toMyOrder(status) { | 305 | complete: () => {} |
| 266 | uni.navigateTo({ | 306 | }) |
| 267 | url: `../myOrder/myOrder?status=${status}`, | 307 | }, |
| 268 | success: res => {}, | 308 | introduce() { |
| 269 | fail: () => {}, | 309 | uni.showModal({ |
| 270 | complete: () => {} | 310 | content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', |
| 271 | }) | 311 | showCancel: false |
| 272 | }, | 312 | }) |
| 273 | toOpticsData() { | 313 | }, |
| 274 | uni.navigateTo({ | 314 | joinUs() { |
| 275 | url: '../addOpticsData/addOpticsData' | 315 | uni.showModal({ |
| 276 | }) | 316 | content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', |
| 277 | }, | 317 | showCancel: false |
| 278 | handleScrolltolower() { | 318 | }) |
| 279 | // console.log('usr-my',this.$store.state.user.userInfo) | 319 | }, |
| 280 | this.pagesnum++ | 320 | toMyOrder(status) { |
| 281 | store.dispatch('userRecommand/getRecommandList', { | 321 | uni.navigateTo({ |
| 282 | uid: this.$store.state.user.userInfo.uid, | 322 | url: `../myOrder/myOrder?status=${status}`, |
| 283 | openid: this.$store.state.user.userInfo.openid, | 323 | success: res => {}, |
| 284 | page: this.pagesnum | 324 | fail: () => {}, |
| 285 | }) | 325 | complete: () => {} |
| 286 | } | 326 | }) |
| 287 | } | 327 | }, |
| 288 | } | 328 | toOpticsData() { |
| 289 | </script> | 329 | uni.navigateTo({ |
| 290 | 330 | url: '../addOpticsData/addOpticsData' | |
| 291 | <style lang="scss"> | 331 | }) |
| 292 | .warp { | 332 | }, |
| 293 | font-size: 24rpx; | 333 | handleScrolltolower() { |
| 294 | background-color: #f2f2f2; | 334 | // console.log('usr-my',this.$store.state.user.userInfo) |
| 295 | height: 100vh; | 335 | this.pagesnum++ |
| 296 | } | 336 | store.dispatch('userRecommand/getRecommandList', { |
| 297 | .content { | 337 | uid: this.$store.state.user.userInfo.uid, |
| 298 | display: flex; | 338 | openid: this.$store.state.user.userInfo.openid, |
| 299 | flex-direction: column; | 339 | page: this.pagesnum |
| 300 | align-items: center; | 340 | }) |
| 301 | justify-content: center; | 341 | } |
| 302 | background-color: #f2f2f2; | 342 | } |
| 303 | } | 343 | } |
| 304 | .userInfo { | 344 | </script> |
| 305 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); | 345 | |
| 306 | width: 100%; | 346 | <style lang="scss"> |
| 307 | height: 240rpx; | 347 | .warp { |
| 308 | color: #ffffff; | 348 | font-size: 24rpx; |
| 309 | padding: 60rpx 82rpx 80rpx 44rpx; | 349 | background-color: #f2f2f2; |
| 310 | box-sizing: border-box; | 350 | height: 100vh; |
| 311 | display: flex; | 351 | } |
| 312 | flex-direction: row; | 352 | .content { |
| 313 | justify-content: space-between; | 353 | display: flex; |
| 314 | align-items: flex-start; | 354 | flex-direction: column; |
| 315 | .info { | 355 | align-items: center; |
| 316 | display: flex; | 356 | justify-content: center; |
| 317 | flex-direction: row; | 357 | background-color: #f2f2f2; |
| 318 | justify-content: space-between; | 358 | } |
| 319 | align-items: center; | 359 | .userInfo { |
| 320 | image { | 360 | background-image: linear-gradient(270deg, #ffa481 0%, #ff6b4a 66%); |
| 321 | border-radius: 50rpx; | 361 | width: 100%; |
| 322 | height: 100rpx; | 362 | height: 240rpx; |
| 323 | width: 100rpx; | 363 | color: #ffffff; |
| 324 | margin-right: 40rpx; | 364 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 325 | } | 365 | box-sizing: border-box; |
| 326 | .infoText { | 366 | display: flex; |
| 327 | display: flex; | 367 | flex-direction: row; |
| 328 | flex-direction: column; | 368 | justify-content: space-between; |
| 329 | justify-content: space-between; | 369 | align-items: flex-start; |
| 330 | align-items: flex-scetart; | 370 | .info { |
| 331 | .userName { | 371 | display: flex; |
| 332 | font-size: 18px; | 372 | flex-direction: row; |
| 333 | color: #ffffff; | 373 | justify-content: space-between; |
| 334 | margin-bottom: 8rpx; | 374 | align-items: center; |
| 335 | } | 375 | image { |
| 336 | .nickName { | 376 | border-radius: 50rpx; |
| 337 | font-size: 12px; | 377 | height: 100rpx; |
| 338 | color: #ffffff; | 378 | width: 100rpx; |
| 339 | } | 379 | margin-right: 40rpx; |
| 340 | } | 380 | } |
| 341 | } | 381 | .infoText { |
| 342 | // .service { | 382 | display: flex; |
| 343 | // margin-top: 20rpx; | 383 | flex-direction: column; |
| 344 | // image { | 384 | justify-content: space-between; |
| 345 | // height: 36rpx; | 385 | align-items: flex-scetart; |
| 346 | // width: 36rpx; | 386 | .userName { |
| 347 | // } | 387 | font-size: 18px; |
| 348 | // } | 388 | color: #ffffff; |
| 349 | } | 389 | margin-bottom: 8rpx; |
| 350 | .myOpticsData { | 390 | } |
| 351 | width: 670rpx; | 391 | .nickName { |
| 352 | height: 120rpx; | 392 | font-size: 12px; |
| 353 | background-color: #ffffff; | 393 | color: #ffffff; |
| 354 | border-radius: 6px; | 394 | } |
| 355 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); | 395 | } |
| 356 | position: relative; | 396 | } |
| 357 | bottom: 44rpx; | 397 | // .service { |
| 358 | padding: 40rpx; | 398 | // margin-top: 20rpx; |
| 359 | box-sizing: border-box; | 399 | // image { |
| 360 | display: flex; | 400 | // height: 36rpx; |
| 361 | justify-content: space-between; | 401 | // width: 36rpx; |
| 362 | align-items: center; | 402 | // } |
| 363 | .left { | 403 | // } |
| 364 | font-size: 14px; | 404 | } |
| 365 | color: #333333; | 405 | .myOpticsData { |
| 366 | display: flex; | 406 | width: 670rpx; |
| 367 | align-items: center; | 407 | height: 120rpx; |
| 368 | image { | 408 | background-color: #ffffff; |
| 369 | margin-right: 32rpx; | 409 | border-radius: 6px; |
| 370 | width: 30rpx; | 410 | box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); |
| 371 | height: 34rpx; | 411 | position: relative; |
| 372 | } | 412 | bottom: 44rpx; |
| 373 | } | 413 | padding: 40rpx; |
| 374 | image { | 414 | box-sizing: border-box; |
| 375 | height: 16px; | 415 | display: flex; |
| 376 | width: 8px; | 416 | justify-content: space-between; |
| 377 | } | 417 | align-items: center; |
| 378 | } | 418 | .left { |
| 379 | .myOrder { | 419 | font-size: 14px; |
| 380 | width: 100%; | 420 | color: #333333; |
| 381 | height: 296rpx; | 421 | display: flex; |
| 382 | // margin-top: 116rpx; | 422 | align-items: center; |
| 383 | margin-bottom: 20rpx; | 423 | image { |
| 384 | padding: 0 40rpx; | 424 | margin-right: 32rpx; |
| 385 | box-sizing: border-box; | 425 | width: 30rpx; |
| 386 | background: #ffffff; | 426 | height: 34rpx; |
| 387 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 427 | } |
| 388 | border-radius: 6px; | 428 | } |
| 389 | border-radius: 6px; | 429 | image { |
| 390 | display: flex; | 430 | height: 16px; |
| 391 | flex-direction: column; | 431 | width: 8px; |
| 392 | justify-content: space-around; | 432 | } |
| 393 | align-items: center; | 433 | } |
| 394 | .orderHeader { | 434 | .myOrder { |
| 395 | width: 100%; | 435 | width: 100%; |
| 396 | height: 100rpx; | 436 | height: 296rpx; |
| 397 | display: flex; | 437 | // margin-top: 116rpx; |
| 398 | flex-direction: row; | 438 | margin-bottom: 20rpx; |
| 399 | justify-content: space-between; | 439 | padding: 0 40rpx; |
| 400 | align-items: center; | 440 | box-sizing: border-box; |
| 401 | border-bottom: 1px solid #e9e9e9; | 441 | background: #ffffff; |
| 402 | font-weight: bold; | 442 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 403 | font-size: 18px; | 443 | border-radius: 6px; |
| 404 | color: #333333; | 444 | border-radius: 6px; |
| 405 | .btn { | 445 | display: flex; |
| 406 | font-size: 12px; | 446 | flex-direction: column; |
| 407 | color: #999999; | 447 | justify-content: space-around; |
| 408 | display: flex; | 448 | align-items: center; |
| 409 | align-items: center; | 449 | .orderHeader { |
| 410 | image { | 450 | width: 100%; |
| 411 | margin-left: 20rpx; | 451 | height: 100rpx; |
| 412 | height: 32rpx; | 452 | display: flex; |
| 413 | width: 16rpx; | 453 | flex-direction: row; |
| 414 | } | 454 | justify-content: space-between; |
| 415 | } | 455 | align-items: center; |
| 416 | } | 456 | border-bottom: 1px solid #e9e9e9; |
| 417 | .orderBody { | 457 | font-weight: bold; |
| 418 | width: 100%; | 458 | font-size: 18px; |
| 419 | display: flex; | 459 | color: #333333; |
| 420 | flex-direction: row; | 460 | .btn { |
| 421 | justify-content: space-around; | 461 | font-size: 12px; |
| 422 | align-items: center; | 462 | color: #999999; |
| 423 | .item { | 463 | display: flex; |
| 424 | display: flex; | 464 | align-items: center; |
| 425 | flex-direction: column; | 465 | image { |
| 426 | align-items: center; | 466 | margin-left: 20rpx; |
| 427 | image { | 467 | height: 32rpx; |
| 428 | width: 62rpx; | 468 | width: 16rpx; |
| 429 | height: 46rpx; | 469 | } |
| 430 | } | 470 | } |
| 431 | text { | 471 | } |
| 432 | margin-top: 24rpx; | 472 | .orderBody { |
| 433 | font-size: 12px; | 473 | width: 100%; |
| 434 | color: #333333; | 474 | display: flex; |
| 435 | } | 475 | flex-direction: row; |
| 436 | } | 476 | justify-content: space-around; |
| 437 | } | 477 | align-items: center; |
| 438 | } | 478 | .item { |
| 439 | .someItem { | 479 | display: flex; |
| 440 | width: 100%; | 480 | flex-direction: column; |
| 441 | height: 336rpx; | 481 | align-items: center; |
| 442 | background: #ffffff; | 482 | image { |
| 443 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 483 | width: 62rpx; |
| 444 | border-radius: 6px; | 484 | height: 46rpx; |
| 445 | border-radius: 6px; | 485 | } |
| 446 | margin-bottom: 18rpx; | 486 | text { |
| 447 | box-sizing: border-box; | 487 | margin-top: 24rpx; |
| 448 | padding: 21rpx 48rpx 21rpx 42rpx; | 488 | font-size: 12px; |
| 449 | box-sizing: border-box; | 489 | color: #333333; |
| 450 | display: flex; | 490 | } |
| 451 | flex-direction: column; | 491 | } |
| 452 | justify-content: space-between; | 492 | } |
| 453 | align-items: center; | 493 | } |
| 454 | .item { | 494 | .someItem { |
| 455 | display: flex; | 495 | width: 100%; |
| 456 | justify-content: space-between; | 496 | height: 336rpx; |
| 457 | border-bottom: 1px solid #f2f2f2; | 497 | background: #ffffff; |
| 458 | align-items: center; | 498 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); |
| 459 | height: 72rpx; | 499 | border-radius: 6px; |
| 460 | width: 100%; | 500 | border-radius: 6px; |
| 461 | .left { | 501 | margin-bottom: 18rpx; |
| 462 | font-size: 14px; | 502 | box-sizing: border-box; |
| 463 | color: #333333; | 503 | padding: 21rpx 48rpx 21rpx 42rpx; |
| 464 | display: flex; | 504 | box-sizing: border-box; |
| 465 | align-items: center; | 505 | display: flex; |
| 466 | image { | 506 | flex-direction: column; |
| 467 | margin-right: 32rpx; | 507 | justify-content: space-between; |
| 468 | width: 30rpx; | 508 | align-items: center; |
| 469 | height: 34rpx; | 509 | .item { |
| 470 | } | 510 | display: flex; |
| 471 | } | 511 | justify-content: space-between; |
| 472 | image { | 512 | border-bottom: 1px solid #f2f2f2; |
| 473 | height: 16px; | 513 | align-items: center; |
| 474 | width: 8px; | 514 | height: 72rpx; |
| 475 | } | 515 | width: 100%; |
| 476 | } | 516 | .left { |
| 477 | } | 517 | font-size: 14px; |
| 478 | .recommend { | 518 | color: #333333; |
| 479 | background: #ffffff; | 519 | display: flex; |
| 520 | align-items: center; | ||
| 521 | image { | ||
| 522 | margin-right: 32rpx; | ||
| 523 | width: 30rpx; | ||
| 524 | height: 34rpx; | ||
| 525 | } | ||
| 526 | } | ||
| 527 | image { | ||
| 528 | height: 16px; | ||
| 529 | width: 8px; | ||
| 530 | } | ||
| 531 | } | ||
| 532 | } | ||
| 533 | .recommend { | ||
| 534 | background: #ffffff; | ||
| 535 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | ||
| 536 | border-radius: 6px; | ||
| 537 | border-radius: 6px; | ||
| 538 | width: 100%; | ||
| 539 | .title { | ||
| 540 | display: flex; | ||
| 541 | flex-direction: row; | ||
| 542 | align-items: center; | ||
| 543 | justify-content: space-between; | ||
| 544 | padding: 20rpx 40rpx; | ||
| 545 | .line { | ||
| 546 | width: 264rpx; | ||
| 547 | height: 1rpx; | ||
| 548 | border-bottom: 1px solid #eaeaea; | ||
| 549 | } | ||
| 550 | .text { | ||
| 551 | font-family: PingFangSC-Medium; | ||
| 552 | font-size: 14px; | ||
| 553 | color: #333333; | ||
| 554 | letter-spacing: -0.26px; | ||
| 480 | box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); | 555 | text-align: justify; |
| 481 | border-radius: 6px; | 556 | line-height: 24px; |
| 482 | border-radius: 6px; | 557 | } |
| 483 | width: 100%; | 558 | } |
| 484 | .title { | 559 | .goods-list { |
| 485 | display: flex; | 560 | .loading-text { |
| 486 | flex-direction: row; | 561 | width: 100%; |
| 487 | align-items: center; | 562 | display: flex; |
| 488 | justify-content: space-between; | 563 | justify-content: center; |
| 489 | padding: 20rpx 40rpx; | 564 | align-items: center; |
| 490 | .line { | 565 | height: 30px; |
| 491 | width: 264rpx; | 566 | color: #979797; |
| 492 | height: 1rpx; | 567 | font-size: 12px; |
| 493 | border-bottom: 1px solid #eaeaea; | 568 | } |
| 494 | } | 569 | .product-list { |
| 495 | .text { | 570 | width: 92%; |
| 496 | font-family: PingFangSC-Medium; | 571 | padding: 0 4% 3vw 4%; |
| 497 | font-size: 14px; | 572 | display: flex; |
| 498 | color: #333333; | 573 | justify-content: space-between; |
| 499 | letter-spacing: -0.26px; | 574 | flex-wrap: wrap; |
| 500 | text-align: justify; | 575 | .product { |
| 501 | line-height: 24px; | 576 | width: 48%; |
| 502 | } | 577 | margin: 0 0 20rpx 0; |
| 503 | } | 578 | background: #ffffff; |
| 504 | .goods-list { | 579 | border: 1px solid #f2f2f2; |
| 505 | .loading-text { | 580 | } |
| 506 | width: 100%; | 581 | } |
| 507 | display: flex; | 582 | } |
| 508 | justify-content: center; | 583 | } |
| 509 | align-items: center; | 584 | .auth { |
| 510 | height: 30px; | 585 | height: 100vh; |
| 511 | color: #979797; | 586 | display: flex; |
| 512 | font-size: 12px; | 587 | flex-direction: column; |
| 513 | } | 588 | align-items: center; |
| 514 | .product-list { | 589 | .icon { |
| 515 | width: 92%; | 590 | width: 140rpx; |
| 516 | padding: 0 4% 3vw 4%; | 591 | height: 140rpx; |
| 517 | display: flex; | 592 | border-radius: 50%; |
| 518 | justify-content: space-between; | 593 | margin-top: 100rpx; |
| 519 | flex-wrap: wrap; | 594 | background-color: grey; |
| 520 | .product { | 595 | } |
| 521 | width: 48%; | 596 | .divider { |
| 522 | margin: 0 0 20rpx 0; | 597 | height: 1rpx; |
| 523 | background: #ffffff; | 598 | width: 600rpx; |
| 524 | border: 1px solid #f2f2f2; | 599 | margin-top: 80rpx; |
| 525 | } | 600 | background-color: #e6e3e3; |
| 526 | } | 601 | } |
| 527 | } | 602 | .title { |
| 528 | } | 603 | width: 600rpx; |
| 529 | .auth { | 604 | margin-top: 50rpx; |
| 530 | height: 100vh; | 605 | text-align: left; |
| 531 | display: flex; | 606 | } |
| 532 | flex-direction: column; | 607 | .text { |
| 533 | align-items: center; | 608 | width: 600rpx; |
| 534 | .icon { | 609 | margin-top: 30rpx; |
| 535 | width: 140rpx; | 610 | text-align: left; |
| 536 | height: 140rpx; | 611 | color: #e6e3e3; |
| 537 | border-radius: 50%; | 612 | } |
| 538 | margin-top: 100rpx; | 613 | button { |
| 539 | background-color: grey; | 614 | width: 450rpx; |
| 540 | } | 615 | height: 80rpx; |
| 541 | .divider { | 616 | line-height: 80rpx; |
| 542 | height: 1rpx; | 617 | margin-top: 80rpx; |
| 543 | width: 600rpx; | 618 | border-radius: 30rpx; |
| 544 | margin-top: 80rpx; | 619 | } |
| 545 | background-color: #e6e3e3; | 620 | } |
| 546 | } | 621 | .closeBtn { |
| 547 | .title { | 622 | height: 28rpx; |
| 548 | width: 600rpx; | 623 | width: 28rpx; |
| 549 | margin-top: 50rpx; | 624 | // border: 1px solid red; |
| 550 | text-align: left; | 625 | position: absolute; |
| 551 | } | 626 | top: 20rpx; |
| 552 | .text { | 627 | right: 10rpx; |
| 553 | width: 600rpx; | 628 | } |
| 554 | margin-top: 30rpx; | 629 | </style> |
| 555 | text-align: left; | 630 |
src/static/img/detail/right.png
475 Bytes
src/static/img/detail/xiala.png
src/store/modules/myLoveList.js
| 1 | import urlAlias from '../url'; | 1 | import urlAlias from '../url'; |
| 2 | import request from '../request'; | 2 | import request from '../request'; |
| 3 | 3 | ||
| 4 | const { | 4 | const { |
| 5 | mylovelist | 5 | mylovelist, |
| 6 | myloveadd, | ||
| 7 | myloveupdate | ||
| 6 | } = urlAlias; | 8 | } = urlAlias; |
| 7 | 9 | ||
| 8 | const state = { | 10 | const state = { |
| 9 | loveList: [], | 11 | loveList: [], |
| 10 | }; | 12 | }; |
| 11 | 13 | ||
| 12 | const mutations = { | 14 | const mutations = { |
| 13 | INIT: (state, data) => { | 15 | INIT: (state, data) => { |
| 14 | state.loveList = data; | 16 | state.loveList = data; |
| 15 | }, | 17 | }, |
| 18 | // 更新关心人验光单 | ||
| 19 | UPDATE:(state, data) => { | ||
| 20 | // state.loveList.push(data) | ||
| 21 | // console.log('UPDATA=====>',data) | ||
| 22 | } | ||
| 16 | }; | 23 | }; |
| 17 | 24 | ||
| 18 | const actions = { | 25 | const actions = { |
| 19 | getLoveList({ commit }, param) { | 26 | getLoveList({ commit }, param) { |
| 20 | request({ | 27 | request({ |
| 21 | url: mylovelist, | 28 | url: mylovelist, |
| 22 | data: param, | 29 | data: param, |
| 23 | success: (res) => { | 30 | success: (res) => { |
| 24 | // console.log(res.data); | 31 | // console.log(res.data); |
| 25 | commit("INIT", res.data.data); | 32 | commit("INIT", res.data.data); |
| 26 | }, | 33 | }, |
| 27 | }) | 34 | }) |
| 28 | } | 35 | }, |
| 36 | addMylove({ commit }, param) { | ||
| 37 | |||
| 38 | console.log('myloveupdate-parm====>',param) | ||
| 39 | request({ | ||
| 40 | url: myloveadd, | ||
| 41 | data: param, | ||
| 42 | success: (res) => { | ||
| 43 | console.log('addMylove-parm====>',param) | ||
| 44 | console.log(res.data); | ||
| 45 | // commit("ADD", args); | ||
| 46 | }, | ||
| 47 | }) | ||
| 48 | }, | ||
| 49 | updateMylove({ commit }, param) { | ||
| 50 | request({ | ||
| 51 | url: myloveupdate, | ||
| 52 | data: param, | ||
| 53 | success: (res) => { | ||
| 54 | console.log('myloveupdate-parm====>',param) | ||
| 55 | console.log(res); | ||
| 56 | // commit("UPDATE", param); | ||
| 57 | }, | ||
| 58 | }) | ||
| 59 | }, | ||
| 60 | |||
| 29 | } | 61 | } |
| 30 | 62 | ||
| 31 | export default { | 63 | export default { |
| 32 | namespaced: true, | 64 | namespaced: true, |
| 33 | state, | 65 | state, |
| 34 | mutations, | 66 | mutations, |
| 35 | actions, | 67 | actions, |
| 36 | } | 68 | } |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 详情 | 2 | // 详情 |
| 3 | read: '/app/prod/read', // 获取商品信息 | 3 | read: '/app/prod/read', // 获取商品信息 |
| 4 | 4 | ||
| 5 | // 首页 | 5 | // 首页 |
| 6 | shopList: '/app/prod/list', // 获取首页商品列表 | 6 | shopList: '/app/prod/list', // 获取首页商品列表 |
| 7 | category: '/app/prod/category2', // 获取首页商品分类 | 7 | category: '/app/prod/category2', // 获取首页商品分类 |
| 8 | search: '/app/prod/search', // 首页搜索商品 | 8 | search: '/app/prod/search', // 首页搜索商品 |
| 9 | 9 | ||
| 10 | // 登陆 | 10 | // 登陆 |
| 11 | login: '/app/glass/getOpenId', // 登陆 | 11 | login: '/app/glass/getOpenId', // 登陆 |
| 12 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 | 12 | getUserInfo: '/app/glass/userinfo', // 获取用户信息 |
| 13 | 13 | ||
| 14 | // 我的订单 | 14 | // 我的订单 |
| 15 | orderList: '/app/order/list', // 获取订单列表 | 15 | orderList: '/app/order/list', // 获取订单列表 |
| 16 | myOrderList: '/app/order/list3', // 获取订单列表 | 16 | myOrderList: '/app/order/list3', // 获取订单列表 |
| 17 | orderRead: '/app/order/read', // 获取订单详情 | 17 | orderRead: '/app/order/read', // 获取订单详情 |
| 18 | cancelOrder: '/app/order/wait/del', // 取消订单 | 18 | cancelOrder: '/app/order/wait/del', // 取消订单 |
| 19 | statusConfirm: '/app/order/statusConfirm', // 订单操作 | 19 | statusConfirm: '/app/order/statusConfirm', // 订单操作 |
| 20 | payLog: '/app/pay/log', // 调起支付 | 20 | payLog: '/app/pay/log', // 调起支付 |
| 21 | orderBuild: '/app/order/build', // 生成订单 | 21 | orderBuild: '/app/order/build', // 生成订单 |
| 22 | 22 | ||
| 23 | // 购物车 | 23 | // 购物车 |
| 24 | cartList: '/app/cart/list', // 获取购物车列表 | 24 | cartList: '/app/cart/list', // 获取购物车列表 |
| 25 | cartModi: '/app/cart/modi', // 修改购物车 | 25 | cartModi: '/app/cart/modi', // 修改购物车 |
| 26 | cartDel: '/app/cart/del', // 删除购物车 | 26 | cartDel: '/app/cart/del', // 删除购物车 |
| 27 | cartAdd: '/app/cart/add', // 添加购物车 | 27 | cartAdd: '/app/cart/add', // 添加购物车 |
| 28 | 28 | ||
| 29 | // 我的 | 29 | // 我的 |
| 30 | recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 | 30 | recommandList: '/app/prod/recommand', // 获取用户个性化推荐商品 |
| 31 | 31 | ||
| 32 | // 镜框选购页 | 32 | // 镜框选购页 |
| 33 | detailStandardList: '/app/prod/read', // 获取商品的详细信息 | 33 | detailStandardList: '/app/prod/read', // 获取商品的详细信息 |
| 34 | // 选购页 | 34 | // 选购页 |
| 35 | detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 | 35 | detailStandardUrl: '/app/prod/read', // 获取商品的详细信息 |
| 36 | 36 | ||
| 37 | // 地址管理 | 37 | // 地址管理 |
| 38 | editAddress: '/app/address/edit_address', // 编辑地址 | 38 | editAddress: '/app/address/edit_address', // 编辑地址 |
| 39 | addressList: '/app/address/get_address_list', // 获取用户地址列表 | 39 | addressList: '/app/address/get_address_list', // 获取用户地址列表 |
| 40 | getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 | 40 | getAddress: '/app/address/get_address_by_id', // 获取用户某一地址信息 |
| 41 | getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 | 41 | getDefaultAddress: '/app/address/get_default_address', // 获取用户默认地址信息 |
| 42 | 42 | ||
| 43 | // 用户数据 | 43 | // 用户数据 |
| 44 | mylovelist: '/app/user/mylovelist', // 关心的人的数据 | ||
| 44 | mylovelist: '/app/user/mylovelist', // 关心的人的数据 | 45 | myloveadd: '/app/user/myloveadd', // 添加关心的人 |
| 45 | myloveadd: '/app/user/myloveadd' // 添加关心的人 | 46 | myloveupdate: '/app/user/myloveupdate' // 更新关心人的数据 |
| 46 | } | 47 | } |
| 47 | 48 | ||
| 48 | export default urlAlias | 49 | export default urlAlias |
| 49 | 50 |