Commit f112b6434a9937ddcf7637e337a98326270767db
1 parent
c516ea0510
Exists in
master
全面屏适配
Showing
9 changed files
with
1337 additions
and
1142 deletions
Show diff stats
src/pages/address/addAddress.vue
| 1 | <template> | 1 | <template> |
| 2 | <form | 2 | <form |
| 3 | class="wrap" | 3 | class="wrap" |
| 4 | @submit="formSubmit" | 4 | @submit="formSubmit" |
| 5 | @reset="formReset" | 5 | @reset="formReset" |
| 6 | > | 6 | > |
| 7 | <view class="content"> | 7 | <view class="content"> |
| 8 | <view class="item,name"> | 8 | <view class="item,name"> |
| 9 | <text class="itemText">姓名</text> | 9 | <text class="itemText">姓名</text> |
| 10 | <input | 10 | <input |
| 11 | placeholder="收货人姓名(真实姓名)" | 11 | placeholder="收货人姓名(真实姓名)" |
| 12 | placeholder-style="color:#B8B8B8" | 12 | placeholder-style="color:#B8B8B8" |
| 13 | name="name" | 13 | name="name" |
| 14 | :value="name" | 14 | :value="name" |
| 15 | /> | 15 | /> |
| 16 | </view> | 16 | </view> |
| 17 | <view class="item,phone"> | 17 | <view class="item,phone"> |
| 18 | <text class="itemText">电话</text> | 18 | <text class="itemText">电话</text> |
| 19 | <input | 19 | <input |
| 20 | placeholder="手机号" | 20 | placeholder="手机号" |
| 21 | type="digit" | 21 | type="digit" |
| 22 | placeholder-style="color:#B8B8B8" | 22 | placeholder-style="color:#B8B8B8" |
| 23 | name="mobile" | 23 | name="mobile" |
| 24 | v-model="mobile" | 24 | v-model="mobile" |
| 25 | /> | 25 | /> |
| 26 | </view> | 26 | </view> |
| 27 | <view class="item,phone"> | 27 | <view class="item,phone"> |
| 28 | <text class="itemText">性别</text> | 28 | <text class="itemText">性别</text> |
| 29 | <picker | 29 | <picker |
| 30 | @change="bindPickerChange" | 30 | @change="bindPickerChange" |
| 31 | :value="index" | 31 | :value="index" |
| 32 | :range="sexArray" | 32 | :range="sexArray" |
| 33 | name="sex" | 33 | name="sex" |
| 34 | > | 34 | > |
| 35 | <view class="uni-input">{{sexArray[sexIndex]}}</view> | 35 | <view class="uni-input">{{sexArray[sexIndex]}}</view> |
| 36 | </picker> | 36 | </picker> |
| 37 | </view> | 37 | </view> |
| 38 | <view class="item,area"> | 38 | <view class="item,area"> |
| 39 | <text class="itemText">地区</text> | 39 | <text class="itemText">地区</text> |
| 40 | <view | 40 | <view |
| 41 | class="btn" | 41 | class="btn" |
| 42 | v-if="pickerText===''" | 42 | v-if="pickerText===''" |
| 43 | @tap="openAddres" | 43 | @tap="openAddres" |
| 44 | >选择省/市/区</view> | 44 | >选择省/市/区</view> |
| 45 | <view | 45 | <view |
| 46 | class="btn" | 46 | class="btn" |
| 47 | v-else | 47 | v-else |
| 48 | @tap="openAddres" | 48 | @tap="openAddres" |
| 49 | >{{pickerText}}</view> | 49 | >{{pickerText}}</view> |
| 50 | <simple-address | 50 | <simple-address |
| 51 | ref="SimpleAddress" | 51 | ref="SimpleAddress" |
| 52 | :pickerValueDefault="cityPickerValueDefault" | 52 | :pickerValueDefault="cityPickerValueDefault" |
| 53 | @onConfirm="onConfirm" | 53 | @onConfirm="onConfirm" |
| 54 | themeColor="#007AFF" | 54 | themeColor="#007AFF" |
| 55 | name="address" | 55 | name="address" |
| 56 | ></simple-address> | 56 | ></simple-address> |
| 57 | </view> | 57 | </view> |
| 58 | <view class="item,address"> | 58 | <view class="item,address"> |
| 59 | <text class="itemText">详细地址</text> | 59 | <text class="itemText">详细地址</text> |
| 60 | <input | 60 | <input |
| 61 | placeholder="街道、小区门牌等详细地址" | 61 | placeholder="街道、小区门牌等详细地址" |
| 62 | name="addDetail" | 62 | name="addDetail" |
| 63 | :value="addDetial" | 63 | :value="addDetial" |
| 64 | /> | 64 | /> |
| 65 | </view> | 65 | </view> |
| 66 | <view class="item,check"> | 66 | <view class="item,check"> |
| 67 | <text class="itemText">设为默认地址</text> | 67 | <text class="itemText">设为默认地址</text> |
| 68 | <switch | 68 | <switch |
| 69 | :checked="isDefalutAddress" | 69 | :checked="isDefalutAddress" |
| 70 | color="#FF6B4A" | 70 | color="#FF6B4A" |
| 71 | style="transform:scale(0.6)" | 71 | style="transform:scale(0.6)" |
| 72 | @change="changeDefalutAddress" | 72 | @change="changeDefalutAddress" |
| 73 | name="isDefault" | 73 | name="isDefault" |
| 74 | /> | 74 | /> |
| 75 | </view> | 75 | </view> |
| 76 | <input /> | 76 | <input /> |
| 77 | </view> | 77 | </view> |
| 78 | <button | 78 | <button |
| 79 | form-type="submit" | 79 | form-type="submit" |
| 80 | class="button" v-if="addId">编辑</button> | 80 | class="button" |
| 81 | v-if="addId" | ||
| 82 | >编辑</button> | ||
| 81 | <button | 83 | <button |
| 82 | form-type="submit" | 84 | form-type="submit" |
| 83 | class="button" | 85 | class="button" |
| 84 | v-else | 86 | v-else |
| 85 | >保存并使用</button> | 87 | >保存并使用</button> |
| 86 | </form> | 88 | </form> |
| 87 | </template> | 89 | </template> |
| 88 | 90 | ||
| 89 | <script> | 91 | <script> |
| 90 | import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' | 92 | import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' |
| 91 | import store from '@/store' | 93 | import store from '@/store' |
| 92 | 94 | ||
| 93 | export default { | 95 | export default { |
| 94 | data () { | 96 | data () { |
| 95 | return { | 97 | return { |
| 96 | cityPickerValueDefault: [0, 0, 1], | 98 | cityPickerValueDefault: [0, 0, 1], |
| 97 | pickerText: '', | 99 | pickerText: '', |
| 98 | isDefalutAddress: true, | 100 | isDefalutAddress: true, |
| 99 | sexArray: ['男', '女'], | 101 | sexArray: ['男', '女'], |
| 100 | sexIndex: 0, | 102 | sexIndex: 0, |
| 101 | flag: 0, | 103 | flag: 0, |
| 102 | addId: undefined, | 104 | addId: undefined, |
| 103 | name: '', | 105 | name: '', |
| 104 | mobile: '', | 106 | mobile: '', |
| 105 | addDetial: '', | 107 | addDetial: '', |
| 106 | isDefault: 0 | 108 | isDefault: 0, |
| 107 | } | 109 | } |
| 108 | }, | 110 | }, |
| 109 | onLoad (option) { | 111 | onLoad (option) { |
| 110 | const { addId } = option | 112 | const { addId } = option |
| 111 | if (addId) { | 113 | if (addId) { |
| 112 | this.addId = addId | 114 | this.addId = addId |
| 113 | store.dispatch('address/details', { | 115 | store.dispatch('address/details', { |
| 114 | add_id: addId | 116 | add_id: addId, |
| 115 | }).then(() => { | 117 | }).then(() => { |
| 116 | uni.setNavigationBarTitle({ | 118 | uni.setNavigationBarTitle({ |
| 117 | title: '编辑地址' | 119 | title: '编辑地址', |
| 118 | }) | 120 | }) |
| 119 | const { name, mobile, sex, add_detail: addDetial, default: isDefault,address } = this.$store.state.address.details | 121 | const { name, mobile, sex, add_detail: addDetial, default: isDefault, address } = this.$store.state.address.details |
| 120 | console.log('---', this.$store.state.address.details) | 122 | console.log('---', this.$store.state.address.details) |
| 121 | const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') | 123 | const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') |
| 122 | console.log(index) | 124 | console.log(index) |
| 123 | this.cityPickerValueDefault = index.index | 125 | this.cityPickerValueDefault = index.index |
| 124 | this.name = name | 126 | this.name = name |
| 125 | this.mobile = Number(mobile) | 127 | this.mobile = Number(mobile) |
| 126 | this.sexIndex = sex | 128 | this.sexIndex = sex |
| 127 | this.addDetial = addDetial | 129 | this.addDetial = addDetial |
| 128 | this.isDefalutAddress = !!Number(isDefault) | 130 | this.isDefalutAddress = !!Number(isDefault) |
| 129 | this.pickerText = address | 131 | this.pickerText = address |
| 130 | }) | 132 | }) |
| 131 | } | 133 | } |
| 132 | }, | 134 | }, |
| 133 | components: { | 135 | components: { |
| 134 | SimpleAddress | 136 | SimpleAddress, |
| 135 | }, | 137 | }, |
| 136 | methods: { | 138 | methods: { |
| 137 | openAddres () { | 139 | openAddres () { |
| 138 | this.cityPickerValueDefault = [0, 0, 1] | 140 | this.cityPickerValueDefault = [0, 0, 1] |
| 139 | this.$refs.SimpleAddress.open() | 141 | this.$refs.SimpleAddress.open() |
| 140 | }, | 142 | }, |
| 141 | onConfirm (e) { | 143 | onConfirm (e) { |
| 142 | this.pickerText = e.label | 144 | this.pickerText = e.label |
| 143 | console.log('lll', e, this.pickerText) | 145 | console.log('lll', e, this.pickerText) |
| 144 | }, | 146 | }, |
| 145 | changeDefalutAddress (e) { | 147 | changeDefalutAddress (e) { |
| 146 | this.isDefalutAddress = e.target.value | 148 | this.isDefalutAddress = e.target.value |
| 147 | }, | 149 | }, |
| 148 | bindPickerChange (e) { | 150 | bindPickerChange (e) { |
| 149 | console.log('picker发送选择改变，携带值为', e.target.value) | 151 | console.log('picker发送选择改变，携带值为', e.target.value) |
| 150 | this.sexIndex = e.target.value | 152 | this.sexIndex = e.target.value |
| 151 | }, | 153 | }, |
| 152 | formValidation (formdata) { | 154 | formValidation (formdata) { |
| 153 | const { name, mobile, addDetail } = formdata | 155 | const { name, mobile, addDetail } = formdata |
| 154 | this.flag = false | 156 | this.flag = false |
| 155 | if (name === '') { | 157 | if (name === '') { |
| 156 | uni.showModal({ | 158 | uni.showModal({ |
| 157 | content: '请输入姓名', | 159 | content: '请输入姓名', |
| 158 | showCancel: false | 160 | showCancel: false, |
| 159 | }) | 161 | }) |
| 160 | return 0 | 162 | return 0 |
| 161 | } | 163 | } |
| 162 | if (!(/^1[3456789]\d{9}$/.test(mobile))) { | 164 | if (!(/^1[3456789]\d{9}$/.test(mobile))) { |
| 163 | uni.showModal({ | 165 | uni.showModal({ |
| 164 | content: '请输入正确的手机号', | 166 | content: '请输入正确的手机号', |
| 165 | showCancel: false | 167 | showCancel: false, |
| 166 | }) | 168 | }) |
| 167 | return 0 | 169 | return 0 |
| 168 | } | 170 | } |
| 169 | if (this.pickerText === '') { | 171 | if (this.pickerText === '') { |
| 170 | uni.showModal({ | 172 | uni.showModal({ |
| 171 | content: '请选择收货地区', | 173 | content: '请选择收货地区', |
| 172 | showCancel: false | 174 | showCancel: false, |
| 173 | }) | 175 | }) |
| 174 | return 0 | 176 | return 0 |
| 175 | } | 177 | } |
| 176 | if (addDetail === '') { | 178 | if (addDetail === '') { |
| 177 | uni.showModal({ | 179 | uni.showModal({ |
| 178 | content: '请输入收货详细地址', | 180 | content: '请输入收货详细地址', |
| 179 | showCancel: false | 181 | showCancel: false, |
| 180 | }) | 182 | }) |
| 181 | return 0 | 183 | return 0 |
| 182 | } | 184 | } |
| 183 | this.flag = true | 185 | this.flag = true |
| 184 | }, | 186 | }, |
| 185 | formSubmit (e) { | 187 | formSubmit (e) { |
| 186 | const formdata = e.detail.value | 188 | const formdata = e.detail.value |
| 187 | this.formValidation(formdata) | 189 | this.formValidation(formdata) |
| 188 | 190 | ||
| 189 | const { name, mobile, addDetail, isDefault } = formdata | 191 | const { name, mobile, addDetail, isDefault } = formdata |
| 190 | if (this.flag === true) { | 192 | if (this.flag === true) { |
| 191 | const params = { | 193 | const params = { |
| 192 | sex: this.sexIndex, | 194 | sex: this.sexIndex, |
| 193 | name, | 195 | name, |
| 194 | address: this.pickerText, | 196 | address: this.pickerText, |
| 195 | mobile, | 197 | mobile, |
| 196 | default: isDefault ? 1 : 0, | 198 | default: isDefault ? 1 : 0, |
| 197 | add_detail: addDetail, | 199 | add_detail: addDetail, |
| 198 | longitude: 1, | 200 | longitude: 1, |
| 199 | latitude: 1 | 201 | latitude: 1, |
| 200 | } | 202 | } |
| 201 | if (this.addId) { | 203 | if (this.addId) { |
| 202 | params.add_id = this.addId | 204 | params.add_id = this.addId |
| 203 | } | 205 | } |
| 204 | store.dispatch('address/edit', params).then(() => { | 206 | store.dispatch('address/edit', params).then(() => { |
| 205 | console.log('fanhui') | 207 | console.log('fanhui') |
| 206 | uni.navigateBack({ | 208 | uni.navigateBack({ |
| 207 | delta: 1 | 209 | delta: 1, |
| 208 | }) | 210 | }) |
| 209 | }) | 211 | }) |
| 210 | } | 212 | } |
| 211 | } | 213 | }, |
| 212 | } | 214 | }, |
| 213 | } | 215 | } |
| 214 | </script> | 216 | </script> |
| 215 | 217 | ||
| 216 | <style lang="scss"> | 218 | <style lang="scss"> |
| 217 | .wrap { | 219 | .wrap { |
| 218 | height: 100vh; | 220 | height: 100vh; |
| 219 | background-color: #f2f2f2; | 221 | background-color: #f2f2f2; |
| 220 | font-family: PingFangSC-Regular; | 222 | font-family: PingFangSC-Regular; |
| 221 | letter-spacing: -0.23px; | 223 | letter-spacing: -0.23px; |
| 222 | padding-top: 19rpx; | 224 | padding-top: 19rpx; |
| 223 | } | 225 | } |
| 224 | .content { | 226 | .content { |
| 225 | background-color: #ffffff; | 227 | background-color: #ffffff; |
| 226 | border-radius: 8px; | 228 | border-radius: 8px; |
| 227 | border-radius: 8px; | 229 | border-radius: 8px; |
| 228 | padding: 40rpx 56rpx; | 230 | padding: 40rpx 56rpx; |
| 229 | margin-left: 40rpx; | 231 | margin-left: 40rpx; |
| 230 | width: 670rpx; | 232 | width: 670rpx; |
| 231 | box-sizing: border-box; | 233 | box-sizing: border-box; |
| 232 | .item { | 234 | .item { |
| 233 | display: flex; | 235 | display: flex; |
| 234 | justify-content: flex-start; | 236 | justify-content: flex-start; |
| 235 | font-size: 14px; | 237 | font-size: 14px; |
| 236 | align-items: center; | 238 | align-items: center; |
| 237 | height: 112rpx; | 239 | height: 112rpx; |
| 238 | border-bottom: 1rpx solid #e9e9e9; | 240 | border-bottom: 1rpx solid #e9e9e9; |
| 239 | .itemText { | 241 | .itemText { |
| 240 | width: 162rpx; | 242 | width: 162rpx; |
| 241 | font-family: PingFangSC-Regular; | 243 | font-family: PingFangSC-Regular; |
| 242 | letter-spacing: -0.26px; | 244 | letter-spacing: -0.26px; |
| 243 | } | 245 | } |
| 244 | .btn { | 246 | .btn { |
| 245 | color: #333333 !important; | 247 | color: #333333 !important; |
| 246 | } | 248 | } |
| 247 | } | 249 | } |
| 248 | .check { | 250 | .check { |
| 249 | justify-content: space-between; | 251 | justify-content: space-between; |
| 250 | } | 252 | } |
| 251 | } | 253 | } |
| 252 | .button { | 254 | .button { |
| 253 | position: fixed; | 255 | position: fixed; |
| 254 | bottom: 0; | 256 | bottom: 0; |
| 255 | left: 0; | 257 | left: 0; |
| 256 | height: 112rpx; | 258 | height: 120rpx; |
| 257 | width: 100%; | 259 | width: 100%; |
| 258 | background: #ff6b4a; | 260 | background: #ff6b4a; |
| 259 | display: flex; | 261 | display: flex; |
| 260 | justify-content: center; | 262 | justify-content: center; |
| 261 | align-items: center; | 263 | align-items: center; |
| 262 | font-size: 16px; | 264 | font-size: 16px; |
| 263 | color: #ffffff; | 265 | color: #ffffff; |
| 264 | letter-spacing: -0.3px; | 266 | letter-spacing: -0.3px; |
| 267 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 268 | /* #ifndef APP-NVUE */ | ||
| 269 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 270 | padding-bottom: env(safe-area-inset-bottom); | ||
| 271 | /* #endif */ | ||
| 265 | } | 272 | } |
| 266 | </style> | 273 | </style> |
| 267 | 274 |
src/pages/address/addressList.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view | 3 | <view |
| 4 | v-if="addressList.length !== 0" | 4 | v-if="addressList.length !== 0" |
| 5 | class="list" | 5 | class="list" |
| 6 | > | 6 | > |
| 7 | <view | 7 | <view |
| 8 | v-for="(item, index) in addressList" | 8 | v-for="(item, index) in addressList" |
| 9 | :key="index" | 9 | :key="index" |
| 10 | class="order-user" | 10 | class="order-user" |
| 11 | @tap="toOrder(item.add_id)" | 11 | @tap="toOrder(item.add_id)" |
| 12 | @longpress="delAddress(item.add_id)" | 12 | @longpress="delAddress(item.add_id)" |
| 13 | > | 13 | > |
| 14 | <view class="order-user-head"> | 14 | <view class="order-user-head"> |
| 15 | <view class="name"> | 15 | <view class="name"> |
| 16 | <view | 16 | <view |
| 17 | v-if="item.default === '1'" | 17 | v-if="item.default === '1'" |
| 18 | class="default" | 18 | class="default" |
| 19 | ><text>默认</text></view>{{item.name}} | 19 | ><text>默认</text></view>{{item.name}} |
| 20 | </view> | 20 | </view> |
| 21 | <text class="mobile">{{item.mobile}}</text> | 21 | <text class="mobile">{{item.mobile}}</text> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="order-user-body"> | 23 | <view class="order-user-body"> |
| 24 | <image src="../../static/myorder-paying-location.png"></image> | 24 | <image src="../../static/myorder-paying-location.png"></image> |
| 25 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> | 25 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> |
| 26 | </view> | 26 | </view> |
| 27 | <image | 27 | <image |
| 28 | @click.stop="toEditAddress(item.add_id)" | 28 | @click.stop="toEditAddress(item.add_id)" |
| 29 | v-if="item.default === '1'" | 29 | v-if="item.default === '1'" |
| 30 | class="arrow" | 30 | class="arrow" |
| 31 | src="../../static/right.png" | 31 | src="../../static/right.png" |
| 32 | ></image> | 32 | ></image> |
| 33 | <image | 33 | <image |
| 34 | @click.stop="toEditAddress(item.add_id)" | 34 | @click.stop="toEditAddress(item.add_id)" |
| 35 | v-else | 35 | v-else |
| 36 | class="arrow pen" | 36 | class="arrow pen" |
| 37 | src="../../static/icon-pen.png" | 37 | src="../../static/icon-pen.png" |
| 38 | ></image> | 38 | ></image> |
| 39 | </view> | 39 | </view> |
| 40 | </view> | 40 | </view> |
| 41 | <view | 41 | <view |
| 42 | v-else | 42 | v-else |
| 43 | class="empty" | 43 | class="empty" |
| 44 | > | 44 | > |
| 45 | 暂无收货地址 | 45 | 暂无收货地址 |
| 46 | </view> | 46 | </view> |
| 47 | <button | 47 | <button |
| 48 | @tap="toAddAddress" | 48 | @tap="toAddAddress" |
| 49 | class="add" | 49 | class="add" |
| 50 | >新建收货地址</button> | 50 | >新建收货地址</button> |
| 51 | </view> | 51 | </view> |
| 52 | </template> | 52 | </template> |
| 53 | 53 | ||
| 54 | <script> | 54 | <script> |
| 55 | import store from '@/store' | 55 | import store from '@/store' |
| 56 | export default { | 56 | export default { |
| 57 | data () { | 57 | data () { |
| 58 | return {} | 58 | return {} |
| 59 | }, | 59 | }, |
| 60 | computed: { | 60 | computed: { |
| 61 | addressList () { | 61 | addressList () { |
| 62 | return this.$store.state.address.list | 62 | return this.$store.state.address.list |
| 63 | }, | 63 | }, |
| 64 | }, | 64 | }, |
| 65 | onLoad ({ edit }) { | 65 | onLoad ({ edit }) { |
| 66 | if (edit) { | 66 | if (edit) { |
| 67 | this.edit = true | 67 | this.edit = true |
| 68 | } | 68 | } |
| 69 | // store.dispatch('address/list') | 69 | // store.dispatch('address/list') |
| 70 | }, | 70 | }, |
| 71 | onShow() { | 71 | onShow() { |
| 72 | store.dispatch('address/list') | 72 | store.dispatch('address/list') |
| 73 | }, | 73 | }, |
| 74 | methods: { | 74 | methods: { |
| 75 | toAddAddress() { | 75 | toAddAddress() { |
| 76 | console.log('aaaaa-a') | 76 | console.log('aaaaa-a') |
| 77 | uni.navigateTo({ | 77 | uni.navigateTo({ |
| 78 | url: 'addAddress', | 78 | url: 'addAddress', |
| 79 | fail: (error) => { | 79 | fail: (error) => { |
| 80 | console.error('跳转出现错误', error) | 80 | console.error('跳转出现错误', error) |
| 81 | }, | 81 | }, |
| 82 | }) | 82 | }) |
| 83 | }, | 83 | }, |
| 84 | toEditAddress(addId) { | 84 | toEditAddress(addId) { |
| 85 | console.log('addId', addId) | 85 | console.log('addId', addId) |
| 86 | uni.navigateTo({ | 86 | uni.navigateTo({ |
| 87 | url: `addAddress?addId=${addId}`, | 87 | url: `addAddress?addId=${addId}`, |
| 88 | fail: (error) => { | 88 | fail: (error) => { |
| 89 | console.error('跳转出现错误', error) | 89 | console.error('跳转出现错误', error) |
| 90 | }, | 90 | }, |
| 91 | }) | 91 | }) |
| 92 | }, | 92 | }, |
| 93 | toOrder(addId) { | 93 | toOrder(addId) { |
| 94 | if (this.edit) { | 94 | if (this.edit) { |
| 95 | const pages = getCurrentPages() | 95 | const pages = getCurrentPages() |
| 96 | const prevPage = pages[pages.length - 2] // 上一个页面 | 96 | const prevPage = pages[pages.length - 2] // 上一个页面 |
| 97 | const addressId = addId | 97 | const addressId = addId |
| 98 | // console.log(addressId) | 98 | // console.log(addressId) |
| 99 | prevPage.onShow(addressId) | 99 | prevPage.onShow(addressId) |
| 100 | uni.navigateBack() | 100 | uni.navigateBack() |
| 101 | // uni.navigateTo({ | 101 | // uni.navigateTo({ |
| 102 | // url: `../confirmOrder/confirmOrder?addressId=${addId}`, | 102 | // url: `../confirmOrder/confirmOrder?addressId=${addId}`, |
| 103 | // fail: (error) => { | 103 | // fail: (error) => { |
| 104 | // console.error('跳转出现错误', error) | 104 | // console.error('跳转出现错误', error) |
| 105 | // } | 105 | // } |
| 106 | // }) | 106 | // }) |
| 107 | } | 107 | } |
| 108 | }, | 108 | }, |
| 109 | delAddress(addId) { | 109 | delAddress(addId) { |
| 110 | const that = this | 110 | const that = this |
| 111 | uni.showModal({ | 111 | uni.showModal({ |
| 112 | title: '提示', | 112 | title: '提示', |
| 113 | content: '是否删除该条地址', | 113 | content: '是否删除该条地址', |
| 114 | success: function (res) { | 114 | success: function (res) { |
| 115 | if (res.confirm) { | 115 | if (res.confirm) { |
| 116 | if (that.addressList.length > 1) { | 116 | if (that.addressList.length > 1) { |
| 117 | store.dispatch('address/delete', { | 117 | store.dispatch('address/delete', { |
| 118 | add_id: addId, | 118 | add_id: addId, |
| 119 | }).then(() => { | 119 | }).then(() => { |
| 120 | store.dispatch('address/list') | 120 | store.dispatch('address/list') |
| 121 | uni.showToast({ | 121 | uni.showToast({ |
| 122 | title: '删除成功', | 122 | title: '删除成功', |
| 123 | duration: 1000, | 123 | duration: 1000, |
| 124 | }) | 124 | }) |
| 125 | }) | 125 | }) |
| 126 | } else { | 126 | } else { |
| 127 | uni.showToast({ | 127 | uni.showToast({ |
| 128 | title: '请保留至少一条地址信息', | 128 | title: '请保留至少一条地址信息', |
| 129 | icon: 'none', | 129 | icon: 'none', |
| 130 | duration: 1000, | 130 | duration: 1000, |
| 131 | }) | 131 | }) |
| 132 | } | 132 | } |
| 133 | } | 133 | } |
| 134 | }, | 134 | }, |
| 135 | }) | 135 | }) |
| 136 | }, | 136 | }, |
| 137 | }, | 137 | }, |
| 138 | } | 138 | } |
| 139 | </script> | 139 | </script> |
| 140 | 140 | ||
| 141 | <style lang="scss"> | 141 | <style lang="scss"> |
| 142 | .content { | 142 | .content { |
| 143 | min-height: 100vh; | 143 | min-height: 100vh; |
| 144 | background-color: #f2f2f2; | 144 | background-color: #f2f2f2; |
| 145 | padding-top: 20rpx; | 145 | padding-top: 20rpx; |
| 146 | padding-bottom: 112rpx; | 146 | padding-bottom: 112rpx; |
| 147 | .order-user { | 147 | .order-user { |
| 148 | width: 670rpx; | 148 | width: 670rpx; |
| 149 | height: 228rpx; | 149 | height: 228rpx; |
| 150 | background: #ffffff; | 150 | background: #ffffff; |
| 151 | border-radius: 14rpx; | 151 | border-radius: 14rpx; |
| 152 | margin: 0 auto; | 152 | margin: 0 auto; |
| 153 | margin-bottom: 20rpx; | 153 | margin-bottom: 20rpx; |
| 154 | position: relative; | 154 | position: relative; |
| 155 | .order-user-head { | 155 | .order-user-head { |
| 156 | display: flex; | 156 | display: flex; |
| 157 | height: 108rpx; | 157 | height: 108rpx; |
| 158 | width: 100%; | 158 | width: 100%; |
| 159 | align-items: center; | 159 | align-items: center; |
| 160 | padding-left: 126rpx; | 160 | padding-left: 126rpx; |
| 161 | box-sizing: border-box; | 161 | box-sizing: border-box; |
| 162 | .name { | 162 | .name { |
| 163 | display: flex; | 163 | display: flex; |
| 164 | justify-content: space-between; | 164 | justify-content: space-between; |
| 165 | font-size: 14px; | 165 | font-size: 14px; |
| 166 | color: #333333; | 166 | color: #333333; |
| 167 | letter-spacing: -0.26px; | 167 | letter-spacing: -0.26px; |
| 168 | margin-right: 20rpx; | 168 | margin-right: 20rpx; |
| 169 | .default { | 169 | .default { |
| 170 | height: 40rpx; | 170 | height: 40rpx; |
| 171 | width: 80rpx; | 171 | width: 80rpx; |
| 172 | background-color: #4a90e2; | 172 | background-color: #4a90e2; |
| 173 | border-radius: 13px; | 173 | border-radius: 13px; |
| 174 | border-radius: 13px; | 174 | border-radius: 13px; |
| 175 | text-align: center; | 175 | text-align: center; |
| 176 | margin-right: 20rpx; | 176 | margin-right: 20rpx; |
| 177 | text { | 177 | text { |
| 178 | display: flex; | 178 | display: flex; |
| 179 | justify-content: center; | 179 | justify-content: center; |
| 180 | align-items: center; | 180 | align-items: center; |
| 181 | font-size: 12px; | 181 | font-size: 12px; |
| 182 | color: #ffffff; | 182 | color: #ffffff; |
| 183 | letter-spacing: -0.23px; | 183 | letter-spacing: -0.23px; |
| 184 | line-height: 40rpx; | 184 | line-height: 40rpx; |
| 185 | } | 185 | } |
| 186 | } | 186 | } |
| 187 | } | 187 | } |
| 188 | .mobile { | 188 | .mobile { |
| 189 | font-size: 14px; | 189 | font-size: 14px; |
| 190 | color: #999999; | 190 | color: #999999; |
| 191 | letter-spacing: -0.26px; | 191 | letter-spacing: -0.26px; |
| 192 | } | 192 | } |
| 193 | } | 193 | } |
| 194 | .order-user-body { | 194 | .order-user-body { |
| 195 | display: flex; | 195 | display: flex; |
| 196 | width: 100%; | 196 | width: 100%; |
| 197 | image { | 197 | image { |
| 198 | width: 24px; | 198 | width: 24px; |
| 199 | height: 26px; | 199 | height: 26px; |
| 200 | margin: 12rpx 32rpx 0 40rpx; | 200 | margin: 12rpx 32rpx 0 40rpx; |
| 201 | } | 201 | } |
| 202 | .address { | 202 | .address { |
| 203 | font-weight: bold; | 203 | font-weight: bold; |
| 204 | font-size: 14px; | 204 | font-size: 14px; |
| 205 | color: #333333; | 205 | color: #333333; |
| 206 | letter-spacing: -0.26px; | 206 | letter-spacing: -0.26px; |
| 207 | } | 207 | } |
| 208 | } | 208 | } |
| 209 | .arrow { | 209 | .arrow { |
| 210 | width: 12px; | 210 | width: 12px; |
| 211 | height: 12px; | 211 | height: 12px; |
| 212 | position: absolute; | 212 | position: absolute; |
| 213 | right: 40rpx; | 213 | right: 40rpx; |
| 214 | bottom: 104rpx; | 214 | bottom: 104rpx; |
| 215 | } | 215 | } |
| 216 | } | 216 | } |
| 217 | .empty { | 217 | .empty { |
| 218 | color: #666; | 218 | color: #666; |
| 219 | font-size: 16px; | 219 | font-size: 16px; |
| 220 | text-align: center; | 220 | text-align: center; |
| 221 | padding-top: 30vh; | 221 | padding-top: 30vh; |
| 222 | } | 222 | } |
| 223 | .add { | 223 | .add { |
| 224 | position: fixed; | 224 | position: fixed; |
| 225 | bottom: 0; | 225 | bottom: 0; |
| 226 | left: 0; | 226 | left: 0; |
| 227 | height: 112rpx; | 227 | height: 120rpx; |
| 228 | width: 100%; | 228 | width: 100%; |
| 229 | background-color: #ff6b4a; | 229 | background-color: #ff6b4a; |
| 230 | display: flex; | 230 | display: flex; |
| 231 | justify-content: center; | 231 | justify-content: center; |
| 232 | align-items: center; | 232 | align-items: center; |
| 233 | font-size: 16px; | 233 | font-size: 16px; |
| 234 | color: #ffffff; | 234 | color: #ffffff; |
| 235 | letter-spacing: -0.3px; | 235 | letter-spacing: -0.3px; |
| 236 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 237 | /* #ifndef APP-NVUE */ | ||
| 238 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 239 | padding-bottom: env(safe-area-inset-bottom); | ||
| 240 | /* #endif */ | ||
| 236 | } | 241 | } |
| 237 | } | 242 | } |
| 238 | </style> | 243 | </style> |
| 239 | 244 |
src/pages/confirmOrder/confirmOrder.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view></view> | 3 | <view></view> |
| 4 | <view | 4 | <view |
| 5 | class="addAddress" | 5 | class="addAddress" |
| 6 | @tap="toaddAddress" | 6 | @tap="toaddAddress" |
| 7 | v-if="this.showAddress" | 7 | v-if="this.showAddress" |
| 8 | > | 8 | > |
| 9 | <view class="addIcon"> | 9 | <view class="addIcon"> |
| 10 | <image | 10 | <image |
| 11 | src="../../static/add.png" | 11 | src="../../static/add.png" |
| 12 | mode="aspectFill" | 12 | mode="aspectFill" |
| 13 | ></image> | 13 | ></image> |
| 14 | </view> | 14 | </view> |
| 15 | <view class="addressText">{{addAddress}}</view> | 15 | <view class="addressText">{{addAddress}}</view> |
| 16 | <image | 16 | <image |
| 17 | src="../../static/right.png" | 17 | src="../../static/right.png" |
| 18 | mode="aspectFill" | 18 | mode="aspectFill" |
| 19 | ></image> | 19 | ></image> |
| 20 | </view> | 20 | </view> |
| 21 | <view | 21 | <view |
| 22 | v-else | 22 | v-else |
| 23 | @tap="toaddAddress" | 23 | @tap="toaddAddress" |
| 24 | :class="addressInfo !== false ? 'list order-user' : 'list order-user user_address'" | 24 | :class="addressInfo !== false ? 'list order-user' : 'list order-user user_address'" |
| 25 | > | 25 | > |
| 26 | <view | 26 | <view |
| 27 | class="order-user-head" | 27 | class="order-user-head" |
| 28 | v-if="addressInfo != false" | 28 | v-if="addressInfo != false" |
| 29 | > | 29 | > |
| 30 | <view class="name"> | 30 | <view class="name"> |
| 31 | <view | 31 | <view |
| 32 | v-if="addressInfo.default === '1'" | 32 | v-if="addressInfo.default === '1'" |
| 33 | class="default" | 33 | class="default" |
| 34 | > | 34 | > |
| 35 | <text>默认</text> | 35 | <text>默认</text> |
| 36 | </view> | 36 | </view> |
| 37 | {{addressInfo.name}} | 37 | {{addressInfo.name}} |
| 38 | </view> | 38 | </view> |
| 39 | <text class="mobile">{{addressInfo.mobile}}</text> | 39 | <text class="mobile">{{addressInfo.mobile}}</text> |
| 40 | </view> | 40 | </view> |
| 41 | <view | 41 | <view |
| 42 | class="order-user-body" | 42 | class="order-user-body" |
| 43 | v-if="addressInfo !== false" | 43 | v-if="addressInfo !== false" |
| 44 | > | 44 | > |
| 45 | <image src="../../static/myorder-paying-location.png"></image> | 45 | <image src="../../static/myorder-paying-location.png"></image> |
| 46 | <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> | 46 | <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> |
| 47 | </view> | 47 | </view> |
| 48 | <view | 48 | <view |
| 49 | class="order_user_body_add" | 49 | class="order_user_body_add" |
| 50 | v-if="addressInfo == false" | 50 | v-if="addressInfo == false" |
| 51 | > | 51 | > |
| 52 | <image | 52 | <image |
| 53 | src="../../static/add_address.png" | 53 | src="../../static/add_address.png" |
| 54 | mode="aspectFill" | 54 | mode="aspectFill" |
| 55 | ></image> | 55 | ></image> |
| 56 | <text class="address_add">点击添加地址</text> | 56 | <text class="address_add">点击添加地址</text> |
| 57 | </view> | 57 | </view> |
| 58 | <image | 58 | <image |
| 59 | class="arrow" | 59 | class="arrow" |
| 60 | src="../../static/right.png" | 60 | src="../../static/right.png" |
| 61 | mode="aspectFill" | 61 | mode="aspectFill" |
| 62 | ></image> | 62 | ></image> |
| 63 | </view> | 63 | </view> |
| 64 | <view class="content"> | 64 | <view class="content"> |
| 65 | <view class="orderInfo"> | 65 | <view class="orderInfo"> |
| 66 | <view class="title"> | 66 | <view class="title"> |
| 67 | <image | 67 | <image |
| 68 | src="../../static/store.png" | 68 | src="../../static/store.png" |
| 69 | mode="aspectFill" | 69 | mode="aspectFill" |
| 70 | style="width: 40rpx;height: 40rpx;" | 70 | style="width: 40rpx;height: 40rpx;" |
| 71 | ></image> | 71 | ></image> |
| 72 | <text>非常戴镜</text> | 72 | <text>非常戴镜</text> |
| 73 | </view> | 73 | </view> |
| 74 | <template v-if="isCart === 'true'"> | 74 | <template v-if="isCart === 'true'"> |
| 75 | <view | 75 | <view |
| 76 | class="infoBox" | 76 | class="infoBox" |
| 77 | v-for="(item, index) in checkedCartLst" | 77 | v-for="(item, index) in checkedCartLst" |
| 78 | :key="index" | 78 | :key="index" |
| 79 | > | 79 | > |
| 80 | <view class="infoTop"> | 80 | <view class="infoTop"> |
| 81 | <image | 81 | <image |
| 82 | :src="item.img_index_url" | 82 | :src="item.img_index_url" |
| 83 | mode="aspectFill" | 83 | mode="aspectFill" |
| 84 | ></image> | 84 | ></image> |
| 85 | <view class="infoRight"> | 85 | <view class="infoRight"> |
| 86 | <text class="goodName">{{item.p_name}}</text> | 86 | <text class="goodName">{{item.p_name}}</text> |
| 87 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 87 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 88 | <view class="priceBox"> | 88 | <view class="priceBox"> |
| 89 | <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost"> | 89 | <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost"> |
| 90 | ¥{{item.oldPrice}} | 90 | ¥{{item.oldPrice}} |
| 91 | </text></view> | 91 | </text></view> |
| 92 | <view class="counter"> | 92 | <view class="counter"> |
| 93 | <view | 93 | <view |
| 94 | class="btn" | 94 | class="btn" |
| 95 | disabled="this.disabled" | 95 | disabled="this.disabled" |
| 96 | type="default" | 96 | type="default" |
| 97 | @click="counter(false,index)" | 97 | @click="counter(false,index)" |
| 98 | >-</view> | 98 | >-</view> |
| 99 | <text>{{checkedCartLst[index].num}}</text> | 99 | <text>{{checkedCartLst[index].num}}</text> |
| 100 | <view | 100 | <view |
| 101 | class="btn" | 101 | class="btn" |
| 102 | type="default" | 102 | type="default" |
| 103 | @click="counter(true,index)" | 103 | @click="counter(true,index)" |
| 104 | >+</view> | 104 | >+</view> |
| 105 | </view> | 105 | </view> |
| 106 | </view> | 106 | </view> |
| 107 | </view> | 107 | </view> |
| 108 | </view> | 108 | </view> |
| 109 | <view class="infoBottom"> | 109 | <view class="infoBottom"> |
| 110 | <view class="norm">规格 <text> | 110 | <view class="norm">规格 <text> |
| 111 | <!-- 长度超出变省略号未做 --> | 111 | <!-- 长度超出变省略号未做 --> |
| 112 | <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> | 112 | <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> |
| 113 | </block> | 113 | </block> |
| 114 | </text></view> | 114 | </text></view> |
| 115 | <view class="shippingMethod">使用人 <text> | 115 | <view class="shippingMethod">使用人 <text> |
| 116 | {{item.peopleName}} | 116 | {{item.peopleName}} |
| 117 | </text></view> | 117 | </text></view> |
| 118 | <view class="shippingMethod">配送方式 <text>快递</text></view> | 118 | <view class="shippingMethod">配送方式 <text>快递</text></view> |
| 119 | <view class="message">买家留言 | 119 | <view class="message">买家留言 |
| 120 | <input | 120 | <input |
| 121 | type="text" | 121 | type="text" |
| 122 | :value="note" | 122 | :value="note" |
| 123 | placeholder="建议提前协商(50字以内)" | 123 | placeholder="建议提前协商(50字以内)" |
| 124 | /> | 124 | /> |
| 125 | </view> | 125 | </view> |
| 126 | </view> | 126 | </view> |
| 127 | </view> | 127 | </view> |
| 128 | </template> | 128 | </template> |
| 129 | <template v-else> | 129 | <template v-else> |
| 130 | <view class="infoBox"> | 130 | <view class="infoBox"> |
| 131 | <view class="infoTop"> | 131 | <view class="infoTop"> |
| 132 | <image | 132 | <image |
| 133 | :src="buyItem.pic" | 133 | :src="buyItem.pic" |
| 134 | mode="aspectFill" | 134 | mode="aspectFill" |
| 135 | ></image> | 135 | ></image> |
| 136 | <view class="infoRight"> | 136 | <view class="infoRight"> |
| 137 | <text class="goodName">{{goodInfo.p_name}}</text> | 137 | <text class="goodName">{{goodInfo.p_name}}</text> |
| 138 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 138 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 139 | <view class="priceBox"> | 139 | <view class="priceBox"> |
| 140 | <view class="price">¥{{buyItem.real_price}}<text class="originCost"> | 140 | <view class="price">¥{{buyItem.real_price}}<text class="originCost"> |
| 141 | ¥{{buyItem.out_price}} | 141 | ¥{{buyItem.out_price}} |
| 142 | </text></view> | 142 | </text></view> |
| 143 | <view class="counter"> | 143 | <view class="counter"> |
| 144 | <view | 144 | <view |
| 145 | class="btn" | 145 | class="btn" |
| 146 | disabled="this.disabled" | 146 | disabled="this.disabled" |
| 147 | type="default" | 147 | type="default" |
| 148 | @click="counter(false)" | 148 | @click="counter(false)" |
| 149 | >-</view> | 149 | >-</view> |
| 150 | <text>{{count}}</text> | 150 | <text>{{count}}</text> |
| 151 | <view | 151 | <view |
| 152 | class="btn" | 152 | class="btn" |
| 153 | type="default" | 153 | type="default" |
| 154 | @click="counter(true)" | 154 | @click="counter(true)" |
| 155 | >+</view> | 155 | >+</view> |
| 156 | </view> | 156 | </view> |
| 157 | </view> | 157 | </view> |
| 158 | </view> | 158 | </view> |
| 159 | </view> | 159 | </view> |
| 160 | <view class="infoBottom"> | 160 | <view class="infoBottom"> |
| 161 | <view class="norm">规格 <text> | 161 | <view class="norm">规格 <text> |
| 162 | <!-- 长度超出变省略号未做 --> | 162 | <!-- 长度超出变省略号未做 --> |
| 163 | <block | 163 | <block |
| 164 | v-for="(item, index) in current" | 164 | v-for="(item, index) in current" |
| 165 | :key="index" | 165 | :key="index" |
| 166 | >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> | 166 | >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> |
| 167 | </block> | 167 | </block> |
| 168 | </text></view> | 168 | </text></view> |
| 169 | <view class="shippingMethod">使用人 <text> | 169 | <view class="shippingMethod">使用人 <text> |
| 170 | {{name}} | 170 | {{name}} |
| 171 | </text></view> | 171 | </text></view> |
| 172 | <view class="shippingMethod">配送方式 <text>快递</text></view> | 172 | <view class="shippingMethod">配送方式 <text>快递</text></view> |
| 173 | <view class="message">买家留言 | 173 | <view class="message">买家留言 |
| 174 | <input | 174 | <input |
| 175 | type="text" | 175 | type="text" |
| 176 | :value="note" | 176 | :value="note" |
| 177 | placeholder="建议提前协商(50字以内)" | 177 | placeholder="建议提前协商(50字以内)" |
| 178 | /> | 178 | /> |
| 179 | </view> | 179 | </view> |
| 180 | </view> | 180 | </view> |
| 181 | </view> | 181 | </view> |
| 182 | </template> | 182 | </template> |
| 183 | 183 | ||
| 184 | </view> | 184 | </view> |
| 185 | <view class="payWay"> | 185 | <view class="payWay"> |
| 186 | <view class="item"> | 186 | <view class="item"> |
| 187 | <text>支付方式</text> | 187 | <text>支付方式</text> |
| 188 | <view class="itemRight"> | 188 | <view class="itemRight"> |
| 189 | <view class="rightText"> | 189 | <view class="rightText"> |
| 190 | <view class="choosePayWay"> | 190 | <view class="choosePayWay"> |
| 191 | <image | 191 | <image |
| 192 | src="../../static/chat_logo.png" | 192 | src="../../static/chat_logo.png" |
| 193 | mode="aspectFill" | 193 | mode="aspectFill" |
| 194 | ></image> | 194 | ></image> |
| 195 | <text>微信支付</text> | 195 | <text>微信支付</text> |
| 196 | </view> | 196 | </view> |
| 197 | <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> | 197 | <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> |
| 198 | </view> | 198 | </view> |
| 199 | <!-- <image | 199 | <!-- <image |
| 200 | src="../../static/right.png" | 200 | src="../../static/right.png" |
| 201 | mode="aspectFill" | 201 | mode="aspectFill" |
| 202 | ></image> --> | 202 | ></image> --> |
| 203 | </view> | 203 | </view> |
| 204 | </view> | 204 | </view> |
| 205 | <!-- <view class="item"> | 205 | <!-- <view class="item"> |
| 206 | <text>优惠券</text> | 206 | <text>优惠券</text> |
| 207 | <view class="itemRight"> | 207 | <view class="itemRight"> |
| 208 | <view class="rightText"> | 208 | <view class="rightText"> |
| 209 | <view class="chooseOffers"> | 209 | <view class="chooseOffers"> |
| 210 | <text>-￥70.00</text> | 210 | <text>-￥70.00</text> |
| 211 | </view> | 211 | </view> |
| 212 | <view class="preferentialWay">最大优惠</view> | 212 | <view class="preferentialWay">最大优惠</view> |
| 213 | </view> | 213 | </view> |
| 214 | <image | 214 | <image |
| 215 | src="../../static/right.png" | 215 | src="../../static/right.png" |
| 216 | mode="aspectFill" | 216 | mode="aspectFill" |
| 217 | ></image> | 217 | ></image> |
| 218 | </view> | 218 | </view> |
| 219 | </view> --> | 219 | </view> --> |
| 220 | <view class="item"> | 220 | <view class="item"> |
| 221 | <text>运费</text> | 221 | <text>运费</text> |
| 222 | <view class="itemRight"> | 222 | <view class="itemRight"> |
| 223 | <view class="freight">免运费</view> | 223 | <view class="freight">免运费</view> |
| 224 | </view> | 224 | </view> |
| 225 | </view> | 225 | </view> |
| 226 | <view class="item"> | 226 | <view class="item"> |
| 227 | <text>合计</text> | 227 | <text>合计</text> |
| 228 | <view class="itemRight"> | 228 | <view class="itemRight"> |
| 229 | <view class="total">¥{{totalPrice}}</view> | 229 | <view class="total">¥{{totalPrice}}</view> |
| 230 | <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> | 230 | <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> |
| 231 | </view> | 231 | </view> |
| 232 | </view> | 232 | </view> |
| 233 | </view> | 233 | </view> |
| 234 | <!-- | 234 | <!-- |
| 235 | <view class="checkBox"> | 235 | <view class="checkBox"> |
| 236 | <checkbox-group> | 236 | <checkbox-group> |
| 237 | <label> | 237 | <label> |
| 238 | <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 | 238 | <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 |
| 239 | </label> | 239 | </label> |
| 240 | </checkbox-group> | 240 | </checkbox-group> |
| 241 | </view> --> | 241 | </view> --> |
| 242 | </view> | 242 | </view> |
| 243 | <view class="last_zhanwei"></view> | 243 | <view class="last_zhanwei"></view> |
| 244 | <view class="footer"> | 244 | <view class="footer"> |
| 245 | <view class="footerLeft">实付金额: | 245 | <view class="footerLeft">实付金额: |
| 246 | <text>¥{{totalPrice}}</text> | 246 | <text>¥{{totalPrice}}</text> |
| 247 | <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> | 247 | <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> |
| 248 | </view> | 248 | </view> |
| 249 | <view class="footerRight"> | 249 | <view class="footerRight"> |
| 250 | <view | 250 | <view |
| 251 | class="paybtn" | 251 | class="paybtn" |
| 252 | @tap="orderBuild" | 252 | @tap="orderBuild" |
| 253 | >立即支付</view> | 253 | >立即支付</view> |
| 254 | </view> | 254 | </view> |
| 255 | </view> | 255 | </view> |
| 256 | </view> | 256 | </view> |
| 257 | </template> | 257 | </template> |
| 258 | 258 | ||
| 259 | <script> | 259 | <script> |
| 260 | import store from '@/store' | 260 | import store from '@/store' |
| 261 | import MD5Util from '../../utils/md5' | 261 | import MD5Util from '../../utils/md5' |
| 262 | 262 | ||
| 263 | export default { | 263 | export default { |
| 264 | data() { | 264 | data() { |
| 265 | return { | 265 | return { |
| 266 | name: String, | 266 | name: String, |
| 267 | addAddress: '添加收货地址', | 267 | addAddress: '添加收货地址', |
| 268 | count: 1, | 268 | count: 1, |
| 269 | pid: 0, | 269 | pid: 0, |
| 270 | disabled: false, | 270 | disabled: false, |
| 271 | freight: 0.0, | 271 | freight: 0.0, |
| 272 | showAddress: false, | 272 | showAddress: false, |
| 273 | note: '', | 273 | note: '', |
| 274 | addressInfo: { | 274 | addressInfo: { |
| 275 | address: '', | 275 | address: '', |
| 276 | }, | 276 | }, |
| 277 | isCart: Boolean, | 277 | isCart: Boolean, |
| 278 | // isAnonymous: | 278 | // isAnonymous: |
| 279 | checkedCartLst: [], | 279 | checkedCartLst: [], |
| 280 | } | 280 | } |
| 281 | }, | 281 | }, |
| 282 | onShow(addressId) { | 282 | onShow(addressId) { |
| 283 | // console.log('+-+-*-*-+-+',addressId) | 283 | // console.log('+-+-*-*-+-+',addressId) |
| 284 | if (addressId) { | 284 | if (addressId) { |
| 285 | store | 285 | store |
| 286 | .dispatch('address/details', { | 286 | .dispatch('address/details', { |
| 287 | add_id: addressId, | 287 | add_id: addressId, |
| 288 | }) | 288 | }) |
| 289 | .then(({ code, data }) => { | 289 | .then(({ code, data }) => { |
| 290 | if (code === 1) { | 290 | if (code === 1) { |
| 291 | // console.log('code', code, data) | 291 | // console.log('code', code, data) |
| 292 | this.showAddress = true | 292 | this.showAddress = true |
| 293 | this.addressInfo = data | 293 | this.addressInfo = data |
| 294 | } | 294 | } |
| 295 | }) | 295 | }) |
| 296 | } | 296 | } |
| 297 | }, | 297 | }, |
| 298 | onLoad({ pid, addressId, isCart, count, name }) { | 298 | onLoad({ pid, addressId, isCart, count, name }) { |
| 299 | if (isCart === 'false') { | 299 | if (isCart === 'false') { |
| 300 | this.pid = pid | 300 | this.pid = pid |
| 301 | // store.dispatch('read/fetch', { | 301 | // store.dispatch('read/fetch', { |
| 302 | // pid, | 302 | // pid, |
| 303 | // }) | 303 | // }) |
| 304 | } | 304 | } |
| 305 | this.count = count | 305 | this.count = count |
| 306 | this.name = name | 306 | this.name = name |
| 307 | this.isCart = isCart | 307 | this.isCart = isCart |
| 308 | 308 | ||
| 309 | console.log('++++++++++++' + pid, addressId, isCart) | 309 | console.log('++++++++++++' + pid, addressId, isCart) |
| 310 | this.checkedCartLst = this.$store.state.cart.checkedCartLst | 310 | this.checkedCartLst = this.$store.state.cart.checkedCartLst |
| 311 | // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) | 311 | // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) |
| 312 | // 若已经选择地址 | 312 | // 若已经选择地址 |
| 313 | if (addressId) { | 313 | if (addressId) { |
| 314 | store | 314 | store |
| 315 | .dispatch('address/details', { | 315 | .dispatch('address/details', { |
| 316 | add_id: addressId, | 316 | add_id: addressId, |
| 317 | }) | 317 | }) |
| 318 | .then(({ code, data }) => { | 318 | .then(({ code, data }) => { |
| 319 | if (code === 1) { | 319 | if (code === 1) { |
| 320 | // console.log('code', code, data) | 320 | // console.log('code', code, data) |
| 321 | this.showAddress = true | 321 | this.showAddress = true |
| 322 | this.addressInfo = data | 322 | this.addressInfo = data |
| 323 | } | 323 | } |
| 324 | }) | 324 | }) |
| 325 | } else { | 325 | } else { |
| 326 | store.dispatch('address/default').then(({ code, data }) => { | 326 | store.dispatch('address/default').then(({ code, data }) => { |
| 327 | this.showAddress = true | 327 | this.showAddress = true |
| 328 | this.addressInfo = data | 328 | this.addressInfo = data |
| 329 | console.log('this.addressInfo', this.addressInfo) | 329 | console.log('this.addressInfo', this.addressInfo) |
| 330 | }) | 330 | }) |
| 331 | } | 331 | } |
| 332 | }, | 332 | }, |
| 333 | computed: { | 333 | computed: { |
| 334 | totalPrice() { | 334 | totalPrice() { |
| 335 | if (this.isCart == 'true') { | 335 | if (this.isCart == 'true') { |
| 336 | let total = 0 | 336 | let total = 0 |
| 337 | this.$store.state.cart.checkedCartLst.map(item => { | 337 | this.$store.state.cart.checkedCartLst.map(item => { |
| 338 | total += item.nowPrice * item.num | 338 | total += item.nowPrice * item.num |
| 339 | }) | 339 | }) |
| 340 | return total | 340 | return total |
| 341 | } else { | 341 | } else { |
| 342 | return this.buyItem.real_price * this.count | 342 | return this.buyItem.real_price * this.count |
| 343 | } | 343 | } |
| 344 | }, | 344 | }, |
| 345 | buyItem() { | 345 | buyItem() { |
| 346 | return this.$store.state.cart.buyItem | 346 | return this.$store.state.cart.buyItem |
| 347 | }, | 347 | }, |
| 348 | // checkedCartLst(){ | 348 | // checkedCartLst(){ |
| 349 | // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) | 349 | // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) |
| 350 | // return this.$store.state.cart.checkedCartLst | 350 | // return this.$store.state.cart.checkedCartLst |
| 351 | // }, | 351 | // }, |
| 352 | goodInfo() { | 352 | goodInfo() { |
| 353 | // console.log('state', this.$store.state.read.goodInfo) | 353 | // console.log('state', this.$store.state.read.goodInfo) |
| 354 | return this.$store.state.read.goodInfo | 354 | return this.$store.state.read.goodInfo |
| 355 | }, | 355 | }, |
| 356 | skuInfo() { | 356 | skuInfo() { |
| 357 | return this.$store.state.order.param.sk_id_arr | 357 | return this.$store.state.order.param.sk_id_arr |
| 358 | }, | 358 | }, |
| 359 | attrList() { | 359 | attrList() { |
| 360 | return this.$store.state.order.param.attrList | 360 | return this.$store.state.order.param.attrList |
| 361 | }, | 361 | }, |
| 362 | current() { | 362 | current() { |
| 363 | return this.$store.state.order.param.current | 363 | return this.$store.state.order.param.current |
| 364 | }, | 364 | }, |
| 365 | }, | 365 | }, |
| 366 | methods: { | 366 | methods: { |
| 367 | counter(isadd, index) { | 367 | counter(isadd, index) { |
| 368 | if (isadd) { | 368 | if (isadd) { |
| 369 | if (this.isCart == 'true') { | 369 | if (this.isCart == 'true') { |
| 370 | this.checkedCartLst[index].num++ | 370 | this.checkedCartLst[index].num++ |
| 371 | } else { | 371 | } else { |
| 372 | this.count++ | 372 | this.count++ |
| 373 | } | 373 | } |
| 374 | } else { | 374 | } else { |
| 375 | if (this.isCart == 'true') { | 375 | if (this.isCart == 'true') { |
| 376 | this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- | 376 | this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- |
| 377 | } else { | 377 | } else { |
| 378 | this.count <= 1 ? (this.disabled = true) : this.count-- | 378 | this.count <= 1 ? (this.disabled = true) : this.count-- |
| 379 | } | 379 | } |
| 380 | } | 380 | } |
| 381 | }, | 381 | }, |
| 382 | // 跳转添加地址页面 | 382 | // 跳转添加地址页面 |
| 383 | toaddAddress() { | 383 | toaddAddress() { |
| 384 | uni.navigateTo({ | 384 | uni.navigateTo({ |
| 385 | url: `../address/addressList?edit=${1}`, | 385 | url: `../address/addressList?edit=${1}`, |
| 386 | success: res => {}, | 386 | success: res => {}, |
| 387 | fail: error => { | 387 | fail: error => { |
| 388 | console.log('跳转到地址列表页面失败====>', error) | 388 | console.log('跳转到地址列表页面失败====>', error) |
| 389 | }, | 389 | }, |
| 390 | complete: () => {}, | 390 | complete: () => {}, |
| 391 | }) | 391 | }) |
| 392 | }, | 392 | }, |
| 393 | // 下单 | 393 | // 下单 |
| 394 | orderBuild() { | 394 | orderBuild() { |
| 395 | if (!this.addressInfo) { | 395 | if (!this.addressInfo) { |
| 396 | uni.showToast({ | 396 | uni.showToast({ |
| 397 | title: '请先添加地址', | 397 | title: '请先添加地址', |
| 398 | icon: 'none', | 398 | icon: 'none', |
| 399 | }) | 399 | }) |
| 400 | return | 400 | return |
| 401 | } | 401 | } |
| 402 | uni.showLoading({ | 402 | uni.showLoading({ |
| 403 | title: '支付中', | 403 | title: '支付中', |
| 404 | }) | 404 | }) |
| 405 | if (this.isCart === 'true') { | 405 | if (this.isCart === 'true') { |
| 406 | const checkedGoods = [] | 406 | const checkedGoods = [] |
| 407 | const sk_id_arr = [] | 407 | const sk_id_arr = [] |
| 408 | this.checkedCartLst.map(item => { | 408 | this.checkedCartLst.map(item => { |
| 409 | checkedGoods.push(item.cart_id) | 409 | checkedGoods.push(item.cart_id) |
| 410 | sk_id_arr.push(item.sk_id) | 410 | sk_id_arr.push(item.sk_id) |
| 411 | }) | 411 | }) |
| 412 | store.dispatch('order/build', { | 412 | store.dispatch('order/build', { |
| 413 | uid: this.$store.state.user.userInfo.uid, | 413 | uid: this.$store.state.user.userInfo.uid, |
| 414 | address: JSON.stringify(this.addressInfo), | 414 | address: JSON.stringify(this.addressInfo), |
| 415 | checkedGoods: checkedGoods, | 415 | checkedGoods: checkedGoods, |
| 416 | sk_id_arr: sk_id_arr, | 416 | sk_id_arr: sk_id_arr, |
| 417 | totalPrice: this.totalPrice * 100, | 417 | totalPrice: this.totalPrice * 100, |
| 418 | }).then((res) => { | 418 | }).then((res) => { |
| 419 | this.pay(res) | 419 | this.pay(res) |
| 420 | }) | 420 | }) |
| 421 | } | 421 | } |
| 422 | if (this.isCart === 'false') { | 422 | if (this.isCart === 'false') { |
| 423 | const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param | 423 | const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param |
| 424 | store.dispatch('order/buyNow', { | 424 | store.dispatch('order/buyNow', { |
| 425 | pid: skId.pid, | 425 | pid: skId.pid, |
| 426 | sk_id: skId.sk_id, | 426 | sk_id: skId.sk_id, |
| 427 | number: this.count, | 427 | number: this.count, |
| 428 | mp_id: mpId, | 428 | mp_id: mpId, |
| 429 | address: JSON.stringify(this.addressInfo), | 429 | address: JSON.stringify(this.addressInfo), |
| 430 | totalPrice: this.totalPrice * 100, | 430 | totalPrice: this.totalPrice * 100, |
| 431 | liuyan: this.note, | 431 | liuyan: this.note, |
| 432 | dir: 1, | 432 | dir: 1, |
| 433 | }).then((res) => { | 433 | }).then((res) => { |
| 434 | this.pay(res) | 434 | this.pay(res) |
| 435 | }) | 435 | }) |
| 436 | } | 436 | } |
| 437 | }, | 437 | }, |
| 438 | // 支付 | 438 | // 支付 |
| 439 | pay(res) { | 439 | pay(res) { |
| 440 | console.log('pay', res) | 440 | console.log('pay', res) |
| 441 | const { data, exKeyName: keyName } = res | 441 | const { data, exKeyName: keyName } = res |
| 442 | const uid = uni.getStorageSync('uid') | 442 | const uid = uni.getStorageSync('uid') |
| 443 | const timeStamp = new Date().getTime().toString() | 443 | const timeStamp = new Date().getTime().toString() |
| 444 | const nonceStr = 'asfafasfasfasfasf' | 444 | const nonceStr = 'asfafasfasfasfasf' |
| 445 | // 支付参数 | 445 | // 支付参数 |
| 446 | const fieldSet = { | 446 | const fieldSet = { |
| 447 | openid: this.$store.state.user.userInfo.openid, | 447 | openid: this.$store.state.user.userInfo.openid, |
| 448 | uid: this.$store.state.user.userInfo.uid, | 448 | uid: this.$store.state.user.userInfo.uid, |
| 449 | shopid: 0, | 449 | shopid: 0, |
| 450 | payCate: 2020, | 450 | payCate: 2020, |
| 451 | payMoney: this.totalPrice * 100, | 451 | payMoney: this.totalPrice * 100, |
| 452 | payWoodId: `fcdj-${uid}-${keyName}`, | 452 | payWoodId: `fcdj-${uid}-${keyName}`, |
| 453 | payWoodDesc: '在【非常戴镜】的微信付款凭证', | 453 | payWoodDesc: '在【非常戴镜】的微信付款凭证', |
| 454 | nonceStr, | 454 | nonceStr, |
| 455 | signType: 'MD5', | 455 | signType: 'MD5', |
| 456 | app_uid: 2020, | 456 | app_uid: 2020, |
| 457 | timeStamp, | 457 | timeStamp, |
| 458 | keyname: keyName, | 458 | keyname: keyName, |
| 459 | billInfo: JSON.stringify({ | 459 | billInfo: JSON.stringify({ |
| 460 | address: this.addressInfo, | 460 | address: this.addressInfo, |
| 461 | list: data, | 461 | list: data, |
| 462 | keyname: keyName, | 462 | keyname: keyName, |
| 463 | }), | 463 | }), |
| 464 | } | 464 | } |
| 465 | console.log('fieldSet', fieldSet) | 465 | console.log('fieldSet', fieldSet) |
| 466 | // 请求后台支付接口 | 466 | // 请求后台支付接口 |
| 467 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { | 467 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { |
| 468 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { | 468 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { |
| 469 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` | 469 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` |
| 470 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' | 470 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' |
| 471 | 471 | ||
| 472 | // 微信支付接口 | 472 | // 微信支付接口 |
| 473 | uni.requestPayment({ | 473 | uni.requestPayment({ |
| 474 | appId: data.appid, | 474 | appId: data.appid, |
| 475 | timeStamp, | 475 | timeStamp, |
| 476 | nonceStr, | 476 | nonceStr, |
| 477 | total_fee: this.totalPrice, | 477 | total_fee: this.totalPrice, |
| 478 | package: `prepay_id=${data.prepay_id}`, | 478 | package: `prepay_id=${data.prepay_id}`, |
| 479 | signType: 'MD5', | 479 | signType: 'MD5', |
| 480 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), | 480 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), |
| 481 | success: (res) => { | 481 | success: (res) => { |
| 482 | // 支付成功 | 482 | // 支付成功 |
| 483 | uni.showModal({ | 483 | uni.showModal({ |
| 484 | content: '支付成功', | 484 | content: '支付成功', |
| 485 | showCancel: false, | 485 | showCancel: false, |
| 486 | }) | 486 | }) |
| 487 | // 跳转订单详情页->状态 待收货 | 487 | // 跳转订单详情页->状态 待收货 |
| 488 | uni.reLaunch({ | 488 | uni.reLaunch({ |
| 489 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, | 489 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, |
| 490 | }) | 490 | }) |
| 491 | }, | 491 | }, |
| 492 | fail: (res) => { | 492 | fail: (res) => { |
| 493 | // 支付失败 | 493 | // 支付失败 |
| 494 | uni.showModal({ | 494 | uni.showModal({ |
| 495 | content: '支付失败', | 495 | content: '支付失败', |
| 496 | showCancel: false, | 496 | showCancel: false, |
| 497 | }) | 497 | }) |
| 498 | // 跳转订单详情页->状态 待付款 | 498 | // 跳转订单详情页->状态 待付款 |
| 499 | uni.reLaunch({ | 499 | uni.reLaunch({ |
| 500 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, | 500 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, |
| 501 | }) | 501 | }) |
| 502 | }, | 502 | }, |
| 503 | complete: () => { | 503 | complete: () => { |
| 504 | uni.hideLoading() | 504 | uni.hideLoading() |
| 505 | }, | 505 | }, |
| 506 | }) | 506 | }) |
| 507 | } else { | 507 | } else { |
| 508 | uni.showModal({ | 508 | uni.showModal({ |
| 509 | content: '支付失败', | 509 | content: '支付失败', |
| 510 | showCancel: false, | 510 | showCancel: false, |
| 511 | }) | 511 | }) |
| 512 | console.log('支付失败') | 512 | console.log('支付失败') |
| 513 | uni.hideLoading() | 513 | uni.hideLoading() |
| 514 | } | 514 | } |
| 515 | }) | 515 | }) |
| 516 | }, | 516 | }, |
| 517 | }, | 517 | }, |
| 518 | } | 518 | } |
| 519 | </script> | 519 | </script> |
| 520 | 520 | ||
| 521 | <style lang="scss"> | 521 | <style lang="scss"> |
| 522 | .wrap { | 522 | .wrap { |
| 523 | height: 100vh; | 523 | height: 100vh; |
| 524 | background-color: #f2f2f2; | 524 | background-color: #f2f2f2; |
| 525 | font-family: PingFangSC-Regular; | 525 | font-family: PingFangSC-Regular; |
| 526 | letter-spacing: -0.23px; | 526 | letter-spacing: -0.23px; |
| 527 | position: absolute; | 527 | position: absolute; |
| 528 | } | 528 | } |
| 529 | .addAddress { | 529 | .addAddress { |
| 530 | background-color: #ffffff; | 530 | background-color: #ffffff; |
| 531 | box-sizing: border-box; | 531 | box-sizing: border-box; |
| 532 | height: 124rpx; | 532 | height: 124rpx; |
| 533 | width: 100%; | 533 | width: 100%; |
| 534 | display: flex; | 534 | display: flex; |
| 535 | align-items: center; | 535 | align-items: center; |
| 536 | padding: 0 40rpx; | 536 | padding: 0 40rpx; |
| 537 | .addIcon { | 537 | .addIcon { |
| 538 | background-color: #f2f2f2; | 538 | background-color: #f2f2f2; |
| 539 | height: 56rpx; | 539 | height: 56rpx; |
| 540 | width: 60rpx; | 540 | width: 60rpx; |
| 541 | border-radius: 4rpx; | 541 | border-radius: 4rpx; |
| 542 | display: flex; | 542 | display: flex; |
| 543 | justify-content: center; | 543 | justify-content: center; |
| 544 | align-items: center; | 544 | align-items: center; |
| 545 | margin-right: 40rpx; | 545 | margin-right: 40rpx; |
| 546 | } | 546 | } |
| 547 | image { | 547 | image { |
| 548 | height: 28rpx; | 548 | height: 28rpx; |
| 549 | width: 30rpx; | 549 | width: 30rpx; |
| 550 | } | 550 | } |
| 551 | .addressText { | 551 | .addressText { |
| 552 | font-size: 28rpx; | 552 | font-size: 28rpx; |
| 553 | color: #333333; | 553 | color: #333333; |
| 554 | margin-right: 364rpx; | 554 | margin-right: 364rpx; |
| 555 | } | 555 | } |
| 556 | } | 556 | } |
| 557 | .content { | 557 | .content { |
| 558 | background-color: #f2f2f2; | 558 | background-color: #f2f2f2; |
| 559 | width: 100%; | 559 | width: 100%; |
| 560 | display: flex; | 560 | display: flex; |
| 561 | flex-direction: column; | 561 | flex-direction: column; |
| 562 | justify-content: center; | 562 | justify-content: center; |
| 563 | align-items: center; | 563 | align-items: center; |
| 564 | padding: 40rpx; | 564 | padding: 40rpx; |
| 565 | box-sizing: border-box; | 565 | box-sizing: border-box; |
| 566 | .orderInfo { | 566 | .orderInfo { |
| 567 | width: 670rpx; | 567 | width: 670rpx; |
| 568 | min-height: 488rpx; | 568 | min-height: 488rpx; |
| 569 | background-color: #ffffff; | 569 | background-color: #ffffff; |
| 570 | border-radius: 20rpx; | 570 | border-radius: 20rpx; |
| 571 | box-sizing: border-box; | 571 | box-sizing: border-box; |
| 572 | padding: 0 40rpx 40rpx 40rpx; | 572 | padding: 0 40rpx 40rpx 40rpx; |
| 573 | .title { | 573 | .title { |
| 574 | display: flex; | 574 | display: flex; |
| 575 | align-items: center; | 575 | align-items: center; |
| 576 | font-size: 28rpx; | 576 | font-size: 28rpx; |
| 577 | color: #333333; | 577 | color: #333333; |
| 578 | height: 60rpx; | 578 | height: 60rpx; |
| 579 | line-height: 40rpx; | 579 | line-height: 40rpx; |
| 580 | padding: 10rpx 10rpx 10rpx 0rpx; | 580 | padding: 10rpx 10rpx 10rpx 0rpx; |
| 581 | image { | 581 | image { |
| 582 | margin-right: 20rpx; | 582 | margin-right: 20rpx; |
| 583 | } | 583 | } |
| 584 | } | 584 | } |
| 585 | .infoBox { | 585 | .infoBox { |
| 586 | margin-top: 42rpx; | 586 | margin-top: 42rpx; |
| 587 | .infoTop { | 587 | .infoTop { |
| 588 | display: flex; | 588 | display: flex; |
| 589 | flex-direction: row; | 589 | flex-direction: row; |
| 590 | image { | 590 | image { |
| 591 | height: 188rpx; | 591 | height: 188rpx; |
| 592 | width: 188rpx; | 592 | width: 188rpx; |
| 593 | margin-right: 24rpx; | 593 | margin-right: 24rpx; |
| 594 | } | 594 | } |
| 595 | .infoRight { | 595 | .infoRight { |
| 596 | width: 374rpx; | 596 | width: 374rpx; |
| 597 | display: flex; | 597 | display: flex; |
| 598 | flex-direction: column; | 598 | flex-direction: column; |
| 599 | align-items: flex-start; | 599 | align-items: flex-start; |
| 600 | justify-content: space-between; | 600 | justify-content: space-between; |
| 601 | .goodName { | 601 | .goodName { |
| 602 | font-size: 28rpx; | 602 | font-size: 28rpx; |
| 603 | color: #333333; | 603 | color: #333333; |
| 604 | } | 604 | } |
| 605 | .remarks { | 605 | .remarks { |
| 606 | font-size: 20rpx; | 606 | font-size: 20rpx; |
| 607 | color: #999999; | 607 | color: #999999; |
| 608 | } | 608 | } |
| 609 | .priceBox { | 609 | .priceBox { |
| 610 | display: flex; | 610 | display: flex; |
| 611 | justify-content: space-between; | 611 | justify-content: space-between; |
| 612 | align-items: center; | 612 | align-items: center; |
| 613 | width: 100%; | 613 | width: 100%; |
| 614 | .price { | 614 | .price { |
| 615 | color: #ff6b4a; | 615 | color: #ff6b4a; |
| 616 | font-size: 28rpx; | 616 | font-size: 28rpx; |
| 617 | text { | 617 | text { |
| 618 | margin-left: 10rpx; | 618 | margin-left: 10rpx; |
| 619 | } | 619 | } |
| 620 | } | 620 | } |
| 621 | .originCost { | 621 | .originCost { |
| 622 | text-decoration: line-through; | 622 | text-decoration: line-through; |
| 623 | color: #999999; | 623 | color: #999999; |
| 624 | font-size: 20rpx; | 624 | font-size: 20rpx; |
| 625 | } | 625 | } |
| 626 | .counter { | 626 | .counter { |
| 627 | display: flex; | 627 | display: flex; |
| 628 | flex-direction: row; | 628 | flex-direction: row; |
| 629 | justify-content: space-between; | 629 | justify-content: space-between; |
| 630 | font-size: 28rpx; | 630 | font-size: 28rpx; |
| 631 | color: #333333; | 631 | color: #333333; |
| 632 | width: 122rpx; | 632 | width: 122rpx; |
| 633 | .btn { | 633 | .btn { |
| 634 | display: flex; | 634 | display: flex; |
| 635 | justify-content: center; | 635 | justify-content: center; |
| 636 | line-height: 32rpx; | 636 | line-height: 32rpx; |
| 637 | height: 32rpx; | 637 | height: 32rpx; |
| 638 | width: 32rpx; | 638 | width: 32rpx; |
| 639 | background-color: #f2f2f2; | 639 | background-color: #f2f2f2; |
| 640 | color: #cfcfcf; | 640 | color: #cfcfcf; |
| 641 | } | 641 | } |
| 642 | } | 642 | } |
| 643 | } | 643 | } |
| 644 | } | 644 | } |
| 645 | } | 645 | } |
| 646 | .infoBottom { | 646 | .infoBottom { |
| 647 | display: flex; | 647 | display: flex; |
| 648 | flex-direction: column; | 648 | flex-direction: column; |
| 649 | justify-content: flex-start; | 649 | justify-content: flex-start; |
| 650 | font-size: 24rpx; | 650 | font-size: 24rpx; |
| 651 | color: #333333; | 651 | color: #333333; |
| 652 | text { | 652 | text { |
| 653 | color: #999999; | 653 | color: #999999; |
| 654 | margin-left: 20rpx; | 654 | margin-left: 20rpx; |
| 655 | } | 655 | } |
| 656 | 656 | ||
| 657 | .norm { | 657 | .norm { |
| 658 | margin-top: 28rpx; | 658 | margin-top: 28rpx; |
| 659 | } | 659 | } |
| 660 | .shippingMethod { | 660 | .shippingMethod { |
| 661 | margin-top: 12rpx; | 661 | margin-top: 12rpx; |
| 662 | } | 662 | } |
| 663 | .message { | 663 | .message { |
| 664 | display: flex; | 664 | display: flex; |
| 665 | flex-direction: row; | 665 | flex-direction: row; |
| 666 | align-items: center; | 666 | align-items: center; |
| 667 | margin-top: 18rpx; | 667 | margin-top: 18rpx; |
| 668 | input { | 668 | input { |
| 669 | margin-left: 20rpx; | 669 | margin-left: 20rpx; |
| 670 | width: 75%; | 670 | width: 75%; |
| 671 | } | 671 | } |
| 672 | } | 672 | } |
| 673 | } | 673 | } |
| 674 | } | 674 | } |
| 675 | } | 675 | } |
| 676 | .payWay { | 676 | .payWay { |
| 677 | height: 464rpx; | 677 | height: 464rpx; |
| 678 | width: 670rpx; | 678 | width: 670rpx; |
| 679 | background-color: #ffffff; | 679 | background-color: #ffffff; |
| 680 | color: #333333; | 680 | color: #333333; |
| 681 | font-size: 24rpx; | 681 | font-size: 24rpx; |
| 682 | border-radius: 20rpx; | 682 | border-radius: 20rpx; |
| 683 | box-sizing: border-box; | 683 | box-sizing: border-box; |
| 684 | padding: 0 52rpx 0rpx 40rpx; | 684 | padding: 0 52rpx 0rpx 40rpx; |
| 685 | margin-top: 20rpx; | 685 | margin-top: 20rpx; |
| 686 | display: flex; | 686 | display: flex; |
| 687 | flex-direction: column; | 687 | flex-direction: column; |
| 688 | justify-content: center; | 688 | justify-content: center; |
| 689 | align-items: flex-start; | 689 | align-items: flex-start; |
| 690 | .item { | 690 | .item { |
| 691 | display: flex; | 691 | display: flex; |
| 692 | flex-direction: row; | 692 | flex-direction: row; |
| 693 | justify-content: space-between; | 693 | justify-content: space-between; |
| 694 | align-items: center; | 694 | align-items: center; |
| 695 | width: 100%; | 695 | width: 100%; |
| 696 | height: 115rpx; | 696 | height: 115rpx; |
| 697 | .itemRight { | 697 | .itemRight { |
| 698 | display: flex; | 698 | display: flex; |
| 699 | flex-direction: row; | 699 | flex-direction: row; |
| 700 | justify-content: space-between; | 700 | justify-content: space-between; |
| 701 | align-items: center; | 701 | align-items: center; |
| 702 | image { | 702 | image { |
| 703 | height: 24rpx; | 703 | height: 24rpx; |
| 704 | width: 12rpx; | 704 | width: 12rpx; |
| 705 | } | 705 | } |
| 706 | .rightText { | 706 | .rightText { |
| 707 | margin-right: 20rpx; | 707 | margin-right: 20rpx; |
| 708 | text-align: right; | 708 | text-align: right; |
| 709 | .choosePayWay { | 709 | .choosePayWay { |
| 710 | display: flex; | 710 | display: flex; |
| 711 | align-items: center; | 711 | align-items: center; |
| 712 | text { | 712 | text { |
| 713 | color: #333333; | 713 | color: #333333; |
| 714 | } | 714 | } |
| 715 | image { | 715 | image { |
| 716 | height: 36rpx; | 716 | height: 36rpx; |
| 717 | width: 40rpx; | 717 | width: 40rpx; |
| 718 | margin-right: 8px; | 718 | margin-right: 8px; |
| 719 | } | 719 | } |
| 720 | } | 720 | } |
| 721 | .randomSubstraction { | 721 | .randomSubstraction { |
| 722 | color: #ff6b4a; | 722 | color: #ff6b4a; |
| 723 | } | 723 | } |
| 724 | .preferentialWay { | 724 | .preferentialWay { |
| 725 | color: #999999; | 725 | color: #999999; |
| 726 | } | 726 | } |
| 727 | } | 727 | } |
| 728 | .freight, | 728 | .freight, |
| 729 | .total { | 729 | .total { |
| 730 | margin-right: 32rpx; | 730 | margin-right: 32rpx; |
| 731 | } | 731 | } |
| 732 | text { | 732 | text { |
| 733 | color: #ff6b4a; | 733 | color: #ff6b4a; |
| 734 | } | 734 | } |
| 735 | } | 735 | } |
| 736 | } | 736 | } |
| 737 | } | 737 | } |
| 738 | // .checkBox { | 738 | // .checkBox { |
| 739 | // height: 58rpx; | 739 | // height: 58rpx; |
| 740 | // line-height: 58rpx; | 740 | // line-height: 58rpx; |
| 741 | // width: 100%; | 741 | // width: 100%; |
| 742 | // margin-top: 36rpx; | 742 | // margin-top: 36rpx; |
| 743 | // margin-left: 40rpx; | 743 | // margin-left: 40rpx; |
| 744 | // font-size: 12px; | 744 | // font-size: 12px; |
| 745 | // color: #999999; | 745 | // color: #999999; |
| 746 | // } | 746 | // } |
| 747 | } | 747 | } |
| 748 | .footer { | 748 | .footer { |
| 749 | height: 112rpx; | 749 | height: 112rpx; |
| 750 | width: 100%; | 750 | width: 100%; |
| 751 | background-color: #fff; | 751 | background-color: #fff; |
| 752 | font-size: 16px; | 752 | font-size: 16px; |
| 753 | display: flex; | 753 | display: flex; |
| 754 | justify-content: space-between; | 754 | justify-content: space-between; |
| 755 | align-items: center; | 755 | align-items: center; |
| 756 | position: fixed; | 756 | position: fixed; |
| 757 | bottom: 0; | 757 | bottom: 0; |
| 758 | z-index: 9999; | 758 | z-index: 9999; |
| 759 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 760 | /* #ifndef APP-NVUE */ | ||
| 761 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 762 | padding-bottom: env(safe-area-inset-bottom); | ||
| 763 | /* #endif */ | ||
| 759 | .footerLeft { | 764 | .footerLeft { |
| 760 | display: flex; | 765 | display: flex; |
| 761 | justify-content: center; | 766 | justify-content: center; |
| 762 | align-items: center; | 767 | align-items: center; |
| 763 | width: 50%; | 768 | width: 50%; |
| 764 | color: #333333; | 769 | color: #333333; |
| 765 | text { | 770 | text { |
| 766 | color: #ff6b4a; | 771 | color: #ff6b4a; |
| 767 | } | 772 | } |
| 768 | } | 773 | } |
| 769 | .footerRight { | 774 | .footerRight { |
| 770 | display: flex; | 775 | display: flex; |
| 771 | justify-content: flex-end; | 776 | justify-content: flex-end; |
| 772 | align-items: center; | 777 | align-items: center; |
| 773 | width: 50%; | 778 | width: 50%; |
| 774 | margin-right: 26rpx; | 779 | margin-right: 26rpx; |
| 775 | .paybtn { | 780 | .paybtn { |
| 776 | display: flex; | 781 | display: flex; |
| 777 | justify-content: center; | 782 | justify-content: center; |
| 778 | align-items: center; | 783 | align-items: center; |
| 779 | background: #ff6b4a; | 784 | background: #ff6b4a; |
| 780 | border-radius: 20px; | 785 | border-radius: 20px; |
| 781 | border-radius: 20px; | 786 | border-radius: 20px; |
| 782 | color: #ffffff; | 787 | color: #ffffff; |
| 783 | width: 204rpx; | 788 | width: 204rpx; |
| 784 | height: 80rpx; | 789 | height: 80rpx; |
| 785 | } | 790 | } |
| 786 | } | 791 | } |
| 787 | } | 792 | } |
| 788 | // 地址信息样式 | 793 | // 地址信息样式 |
| 789 | .order-user { | 794 | .order-user { |
| 790 | width: 670rpx; | 795 | width: 670rpx; |
| 791 | height: 228rpx; | 796 | height: 228rpx; |
| 792 | background: #ffffff; | 797 | background: #ffffff; |
| 793 | border-radius: 14rpx; | 798 | border-radius: 14rpx; |
| 794 | margin: 0 auto; | 799 | margin: 0 auto; |
| 795 | margin-top: 20rpx; | 800 | margin-top: 20rpx; |
| 796 | position: relative; | 801 | position: relative; |
| 797 | .order-user-head { | 802 | .order-user-head { |
| 798 | display: flex; | 803 | display: flex; |
| 799 | height: 108rpx; | 804 | height: 108rpx; |
| 800 | width: 100%; | 805 | width: 100%; |
| 801 | align-items: center; | 806 | align-items: center; |
| 802 | padding-left: 126rpx; | 807 | padding-left: 126rpx; |
| 803 | box-sizing: border-box; | 808 | box-sizing: border-box; |
| 804 | .name { | 809 | .name { |
| 805 | display: flex; | 810 | display: flex; |
| 806 | justify-content: space-between; | 811 | justify-content: space-between; |
| 807 | font-size: 14px; | 812 | font-size: 14px; |
| 808 | color: #333333; | 813 | color: #333333; |
| 809 | letter-spacing: -0.26px; | 814 | letter-spacing: -0.26px; |
| 810 | margin-right: 20rpx; | 815 | margin-right: 20rpx; |
| 811 | .default { | 816 | .default { |
| 812 | height: 40rpx; | 817 | height: 40rpx; |
| 813 | width: 80rpx; | 818 | width: 80rpx; |
| 814 | background-color: #4a90e2; | 819 | background-color: #4a90e2; |
| 815 | border-radius: 13px; | 820 | border-radius: 13px; |
| 816 | border-radius: 13px; | 821 | border-radius: 13px; |
| 817 | text-align: center; | 822 | text-align: center; |
| 818 | margin-right: 20rpx; | 823 | margin-right: 20rpx; |
| 819 | text { | 824 | text { |
| 820 | display: flex; | 825 | display: flex; |
| 821 | justify-content: center; | 826 | justify-content: center; |
| 822 | align-items: center; | 827 | align-items: center; |
| 823 | font-size: 12px; | 828 | font-size: 12px; |
| 824 | color: #ffffff; | 829 | color: #ffffff; |
| 825 | letter-spacing: -0.23px; | 830 | letter-spacing: -0.23px; |
| 826 | } | 831 | } |
| 827 | } | 832 | } |
| 828 | } | 833 | } |
| 829 | .mobile { | 834 | .mobile { |
| 830 | font-size: 14px; | 835 | font-size: 14px; |
| 831 | color: #999999; | 836 | color: #999999; |
| 832 | letter-spacing: -0.26px; | 837 | letter-spacing: -0.26px; |
| 833 | } | 838 | } |
| 834 | } | 839 | } |
| 835 | .order-user-body { | 840 | .order-user-body { |
| 836 | display: flex; | 841 | display: flex; |
| 837 | width: 100%; | 842 | width: 100%; |
| 838 | image { | 843 | image { |
| 839 | width: 24px; | 844 | width: 24px; |
| 840 | height: 28px; | 845 | height: 28px; |
| 841 | margin: 12rpx 32rpx 0 40rpx; | 846 | margin: 12rpx 32rpx 0 40rpx; |
| 842 | } | 847 | } |
| 843 | .address { | 848 | .address { |
| 844 | font-weight: bold; | 849 | font-weight: bold; |
| 845 | font-size: 14px; | 850 | font-size: 14px; |
| 846 | color: #333333; | 851 | color: #333333; |
| 847 | letter-spacing: -0.26px; | 852 | letter-spacing: -0.26px; |
| 848 | } | 853 | } |
| 849 | } | 854 | } |
| 850 | 855 | ||
| 851 | .arrow { | 856 | .arrow { |
| 852 | width: 12px; | 857 | width: 12px; |
| 853 | height: 12px; | 858 | height: 12px; |
| 854 | position: absolute; | 859 | position: absolute; |
| 855 | right: 40rpx; | 860 | right: 40rpx; |
| 856 | bottom: 104rpx; | 861 | bottom: 104rpx; |
| 857 | } | 862 | } |
| 858 | } | 863 | } |
| 859 | 864 | ||
| 860 | .user_address { | 865 | .user_address { |
| 861 | height: 62px; | 866 | height: 62px; |
| 862 | .order_user_body_add { | 867 | .order_user_body_add { |
| 863 | display: flex; | 868 | display: flex; |
| 864 | align-items: center; | 869 | align-items: center; |
| 865 | image { | 870 | image { |
| 866 | background: #f2f2f2; | 871 | background: #f2f2f2; |
| 867 | border-radius: 2px; | 872 | border-radius: 2px; |
| 868 | border-radius: 2px; | 873 | border-radius: 2px; |
| 869 | width: 30px; | 874 | width: 30px; |
| 870 | height: 28px; | 875 | height: 28px; |
| 871 | margin: 0 20px; | 876 | margin: 0 20px; |
| 872 | } | 877 | } |
| 873 | .address_add { | 878 | .address_add { |
| 874 | font-family: PingFangSC-Regular; | 879 | font-family: PingFangSC-Regular; |
| 875 | font-size: 14px; | 880 | font-size: 14px; |
| 876 | color: #333333; | 881 | color: #333333; |
| 877 | letter-spacing: -0.26px; | 882 | letter-spacing: -0.26px; |
| 878 | line-height: 62px; | 883 | line-height: 62px; |
| 879 | } | 884 | } |
| 880 | } | 885 | } |
| 881 | .arrow { | 886 | .arrow { |
| 882 | bottom: 46rpx; | 887 | bottom: 46rpx; |
| 883 | } | 888 | } |
| 884 | } | 889 | } |
| 885 | .last_zhanwei { | 890 | .last_zhanwei { |
| 886 | background: #f2f2f2; | 891 | background: #f2f2f2; |
| 887 | height: 60px; | 892 | height: 60px; |
| 888 | } | 893 | } |
| 889 | </style> | 894 | </style> |
| 890 | 895 |
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" @click="xialachange(0)"> | 20 | <view class="colour1" @click="xialachange(0)"> |
| 21 | <text>框架颜色</text> | 21 | <text>框架颜色</text> |
| 22 | <image v-bind:src="isNone[0].img"></image> | 22 | <image v-bind:src="isNone[0].img"></image> |
| 23 | </view> | 23 | </view> |
| 24 | <view class="colour_exp">*{{navData.colour}}</view> | 24 | <view class="colour_exp">*{{navData.colour}}</view> |
| 25 | <view> | 25 | <view> |
| 26 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> | 26 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
| 27 | <view | 27 | <view |
| 28 | v-for="(items,index) in details.data.skuList" | 28 | v-for="(items,index) in details.data.skuList" |
| 29 | :key="index" | 29 | :key="index" |
| 30 | @click="viewChoose(index)" | 30 | @click="viewChoose(index)" |
| 31 | class="colour2_view" | 31 | class="colour2_view" |
| 32 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 32 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
| 33 | > | 33 | > |
| 34 | <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> |
| 35 | </view> | 35 | </view> |
| 36 | </view> | 36 | </view> |
| 37 | </view> | 37 | </view> |
| 38 | <hr/> | 38 | <hr/> |
| 39 | </view> | 39 | </view> |
| 40 | <view class="size"> | 40 | <view class="size"> |
| 41 | <view class="size1" @click="xialachange(1)"> | 41 | <view class="size1" @click="xialachange(1)"> |
| 42 | <view class="size1_1">框架尺寸</view> | 42 | <view class="size1_1">框架尺寸</view> |
| 43 | <view><image v-bind:src="isNone[1].img"></image></view> | 43 | <view><image v-bind:src="isNone[1].img"></image></view> |
| 44 | </view> | 44 | </view> |
| 45 | <view class="colour"> | 45 | <view class="colour"> |
| 46 | <view class="colour_exp">*{{navData.colour}}</view> | 46 | <view class="colour_exp">*{{navData.colour}}</view> |
| 47 | </view> | 47 | </view> |
| 48 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> | 48 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> |
| 49 | <view> | 49 | <view> |
| 50 | <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> |
| 51 | <view class="D3_list_jDu"> | 51 | <view class="D3_list_jDu"> |
| 52 | <view class="D3_list1"> | 52 | <view class="D3_list1"> |
| 53 | <c-progress class="c-progress" :inner_widthProp="300"/> | 53 | <c-progress class="c-progress" :inner_widthProp="300"/> |
| 54 | <text>{{details.data.frame_width}}mm</text> | 54 | <text>{{details.data.frame_width}}mm</text> |
| 55 | </view> | 55 | </view> |
| 56 | <view>{{parameter[0].standard}}</view> | 56 | <view>{{parameter[0].standard}}</view> |
| 57 | </view> | 57 | </view> |
| 58 | </view> | 58 | </view> |
| 59 | <view> | 59 | <view> |
| 60 | <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> |
| 61 | <view class="D3_list_jDu"> | 61 | <view class="D3_list_jDu"> |
| 62 | <view class="D3_list1"> | 62 | <view class="D3_list1"> |
| 63 | <c-progress class="c-progress" :inner_widthProp="190"/> | 63 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 64 | <view>{{details.data.glass_width}}mm</view> | 64 | <view>{{details.data.glass_width}}mm</view> |
| 65 | </view> | 65 | </view> |
| 66 | <view>{{parameter[1].standard}}</view> | 66 | <view>{{parameter[1].standard}}</view> |
| 67 | </view> | 67 | </view> |
| 68 | </view> | 68 | </view> |
| 69 | <view> | 69 | <view> |
| 70 | <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> |
| 71 | <view class="D3_list_jDu"> | 71 | <view class="D3_list_jDu"> |
| 72 | <view class="D3_list1"> | 72 | <view class="D3_list1"> |
| 73 | <c-progress class="c-progress" :inner_widthProp="210"/> | 73 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 74 | <view>{{details.data.glass_height}}mm</view> | 74 | <view>{{details.data.glass_height}}mm</view> |
| 75 | </view> | 75 | </view> |
| 76 | <view>{{parameter[2].standard}}</view> | 76 | <view>{{parameter[2].standard}}</view> |
| 77 | </view> | 77 | </view> |
| 78 | </view> | 78 | </view> |
| 79 | <view> | 79 | <view> |
| 80 | <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> |
| 81 | <view class="D3_list_jDu"> | 81 | <view class="D3_list_jDu"> |
| 82 | 82 | ||
| 83 | <view class="D3_list1"> | 83 | <view class="D3_list1"> |
| 84 | <c-progress class="c-progress" :inner_widthProp="160"/> | 84 | <c-progress class="c-progress" :inner_widthProp="160"/> |
| 85 | <view>{{details.data.nose_width}}mm</view> | 85 | <view>{{details.data.nose_width}}mm</view> |
| 86 | </view> | 86 | </view> |
| 87 | <view>{{parameter[3].standard}}</view> | 87 | <view>{{parameter[3].standard}}</view> |
| 88 | </view> | 88 | </view> |
| 89 | </view> | 89 | </view> |
| 90 | <view> | 90 | <view> |
| 91 | <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> |
| 92 | <view class="D3_list_jDu"> | 92 | <view class="D3_list_jDu"> |
| 93 | <view class="D3_list1"> | 93 | <view class="D3_list1"> |
| 94 | <c-progress class="c-progress" :inner_widthProp="260"/> | 94 | <c-progress class="c-progress" :inner_widthProp="260"/> |
| 95 | <view>{{details.data.leg_long}}mm</view> | 95 | <view>{{details.data.leg_long}}mm</view> |
| 96 | </view> | 96 | </view> |
| 97 | <view>{{parameter[4].standard}}</view> | 97 | <view>{{parameter[4].standard}}</view> |
| 98 | </view> | 98 | </view> |
| 99 | </view> | 99 | </view> |
| 100 | <hr/> | 100 | <hr/> |
| 101 | </view> | 101 | </view> |
| 102 | </view> | 102 | </view> |
| 103 | <view class="part"> | 103 | <view class="part"> |
| 104 | <view class="size1" @click="xialachange(2)"> | 104 | <view class="size1" @click="xialachange(2)"> |
| 105 | <view class="size1_1" >配件</view> | 105 | <view class="size1_1" >配件</view> |
| 106 | <view> | 106 | <view> |
| 107 | <span>+￥0.00</span> | 107 | <span>+￥0.00</span> |
| 108 | <image v-bind:src="isNone[2].img"></image> | 108 | <image v-bind:src="isNone[2].img"></image> |
| 109 | </view> | 109 | </view> |
| 110 | </view> | 110 | </view> |
| 111 | <view class="colour_exp">*0290</view> | 111 | <view class="colour_exp">*0290</view> |
| 112 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> | 112 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
| 113 | <view | 113 | <view |
| 114 | v-for="(part) in part" | 114 | v-for="(part) in part" |
| 115 | :key="part.key" | 115 | :key="part.key" |
| 116 | v-bind:class="{'size_viewed': part.is_actived}" | 116 | v-bind:class="{'size_viewed': part.is_actived}" |
| 117 | > | 117 | > |
| 118 | <image v-bind:src="part.img"></image> | 118 | <image v-bind:src="part.img"></image> |
| 119 | </view> | 119 | </view> |
| 120 | </view> | 120 | </view> |
| 121 | </view> | 121 | </view> |
| 122 | </view> | 122 | </view> |
| 123 | <view class="buy"> | 123 | <view class="buy"> |
| 124 | <view class="buy1">选了镜框，想选镜片？</view> | 124 | <view class="buy1">选了镜框，想选镜片？</view> |
| 125 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | 125 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 126 | <view class="buy3"> | 126 | <view class="buy3"> |
| 127 | <view class="buy3_1">暂时不选</view> | 127 | <view class="buy3_1">暂时不选</view> |
| 128 | <view class="buy3_2" @click="popArgs">立即去选</view> | 128 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 129 | </view> | 129 | </view> |
| 130 | </view> | 130 | </view> |
| 131 | <view class="zhanwei"></view> | 131 | <view class="zhanwei"></view> |
| 132 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> | 132 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
| 133 | </view> | 133 | </view> |
| 134 | </template> | 134 | </template> |
| 135 | <script> | 135 | <script> |
| 136 | import CProgress from '../../components/UniSliper/UniSliper' | 136 | import CProgress from '../../components/UniSliper/UniSliper' |
| 137 | import store from '@/store' | 137 | import store from '@/store' |
| 138 | 138 | ||
| 139 | export default { | 139 | export default { |
| 140 | components: { | 140 | components: { |
| 141 | CProgress | 141 | CProgress, |
| 142 | }, | 142 | }, |
| 143 | data(){ | 143 | data() { |
| 144 | return{ | 144 | return { |
| 145 | count: 1, | 145 | count: 1, |
| 146 | // colour: '1.56非球面防蓝光_亚黑色', | 146 | // colour: '1.56非球面防蓝光_亚黑色', |
| 147 | chooseNum : '', | 147 | chooseNum: '', |
| 148 | isNone:[ | 148 | isNone: [ |
| 149 | {state: false ,img: '/static/img/detail/xiala.png'}, | 149 | { state: false, img: '/static/img/detail/xiala.png' }, |
| 150 | {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'}, | 151 | { state: false, img: '/static/img/detail/xiala.png' }, |
| 152 | {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'}, | 153 | { state: false, img: '/static/img/detail/xiala.png' }, |
| 154 | ], | 154 | ], |
| 155 | //传参 | 155 | // 传参 |
| 156 | navData:{ | 156 | navData: { |
| 157 | pid: "26", | 157 | pid: '26', |
| 158 | p_root_index: "2", | 158 | p_root_index: '2', |
| 159 | name:'', | 159 | name: '', |
| 160 | price:'', | 160 | price: '', |
| 161 | colour: '1.56非球面防蓝光_亚黑色', | 161 | colour: '1.56非球面防蓝光_亚黑色', |
| 162 | }, | 162 | }, |
| 163 | 163 | ||
| 164 | //尺寸 | 164 | // 尺寸 |
| 165 | parameter:[ | 165 | parameter: [ |
| 166 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 166 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: 139 }, |
| 167 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 167 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: 51 }, |
| 168 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 168 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: 45 }, |
| 169 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | 169 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: 19 }, |
| 170 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | 170 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: 138 }, |
| 171 | ], | 171 | ], |
| 172 | //配饰 | 172 | // 配饰 |
| 173 | part:[ | 173 | part: [ |
| 174 | {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 }, |
| 175 | {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 }, |
| 176 | {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 }, |
| 177 | {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 }, |
| 178 | {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 }, |
| 179 | {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 }, |
| 180 | {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 }, |
| 181 | {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 }, |
| 182 | ], | 182 | ], |
| 183 | } | 183 | } |
| 184 | }, | 184 | }, |
| 185 | 185 | ||
| 186 | computed: { | 186 | computed: { |
| 187 | details(){ | 187 | details() { |
| 188 | return this.$store.state.detailStandard_k.list | 188 | return this.$store.state.detailStandard_k.list |
| 189 | }, | ||
| 190 | }, | 189 | }, |
| 191 | onLoad:function(){ | 190 | }, |
| 192 | store.dispatch('detailStandard_k/fetch', { | 191 | onLoad: function() { |
| 193 | uid: "1", | 192 | store.dispatch('detailStandard_k/fetch', { |
| 194 | pid: "26", | 193 | uid: '1', |
| 195 | p_root_index: "2" | 194 | pid: '26', |
| 196 | }); | 195 | p_root_index: '2', |
| 197 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); | 196 | }) |
| 197 | // console.log(this.$store.state.detailStandard_k.list+'ssss'); | ||
| 198 | }, | ||
| 199 | methods: { | ||
| 200 | counter(isadd) { | ||
| 201 | if (isadd) { | ||
| 202 | this.count++ | ||
| 203 | } else { | ||
| 204 | this.count <= 1 ? this.disabled = true : this.count-- | ||
| 205 | } | ||
| 198 | }, | 206 | }, |
| 199 | methods: { | 207 | xialachange(index) { |
| 200 | counter(isadd){ | 208 | this.isNone[index].state = !this.isNone[index].state |
| 201 | if(isadd){ | 209 | if (this.isNone[index].state) { |
| 202 | this.count++ | 210 | this.isNone[index].img = '/static/img/detail/right.png' |
| 203 | }else{ | 211 | } else { |
| 204 | this.count <= 1? this.disabled = true:this.count-- | 212 | this.isNone[index].img = '/static/img/detail/xiala.png' |
| 205 | } | 213 | } |
| 206 | }, | 214 | }, |
| 207 | xialachange(index){ | 215 | colourChange(index, e) { |
| 208 | this.isNone[index].state = !this.isNone[index].state; | 216 | this.navData.colour = e // 颜色选择 |
| 209 | if(this.isNone[index].state){ | 217 | console.log(index, this.navData.colour) |
| 210 | this.isNone[index].img = '/static/img/detail/right.png' | 218 | }, |
| 211 | }else{ | 219 | viewChoose(index, e) { |
| 212 | this.isNone[index].img = '/static/img/detail/xiala.png' | 220 | this.chooseNum = index |
| 213 | } | 221 | }, |
| 214 | }, | 222 | popArgs() { |
| 215 | colourChange(index,e){ | 223 | uni.navigateTo({ |
| 216 | this.navData.colour = e ; //颜色选择 | 224 | url: '../detailsChoiceArgs/detailsChoiceArgs', |
| 217 | console.log(index,this.navData.colour); | 225 | success: res => {}, |
| 218 | 226 | fail: () => {}, | |
| 219 | }, | 227 | complete: () => {}, |
| 220 | viewChoose(index,e){ | 228 | }) |
| 221 | this.chooseNum = index | 229 | }, |
| 222 | }, | 230 | // 跳转确认订单页及传参 |
| 223 | popArgs(){ | 231 | popSure(name, price) { |
| 224 | uni.navigateTo({ | 232 | this.navData.name = name |
| 225 | url: '../detailsChoiceArgs/detailsChoiceArgs', | 233 | this.navData.price = price |
| 226 | success: res => {}, | 234 | var navData = JSON.stringify(this.navData) |
| 227 | fail: () => {}, | 235 | uni.navigateTo({ |
| 228 | complete: () => {} | 236 | url: '../confirmOrder/confirmOrder?index=' + navData, |
| 229 | }); | 237 | }) |
| 230 | }, | 238 | console.log(this.navData) |
| 231 | //跳转确认订单页及传参 | 239 | }, |
| 232 | popSure(name,price){ | 240 | }, |
| 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 | }, | ||
| 241 | } | ||
| 242 | 241 | ||
| 243 | } | 242 | } |
| 244 | </script> | 243 | </script> |
| 245 | 244 | ||
| 246 | <style lang="scss"> | 245 | <style lang="scss"> |
| 247 | .container{ | 246 | .container{ |
| 248 | min-height: 100vh; | 247 | min-height: 100vh; |
| 249 | background: #F2F2F2; | 248 | background: #F2F2F2; |
| 250 | padding-top: 10px; | 249 | padding-top: 10px; |
| 251 | box-sizing: border-box; | 250 | box-sizing: border-box; |
| 252 | } | 251 | } |
| 253 | hr{ | 252 | hr{ |
| 254 | border: none; | 253 | border: none; |
| 255 | height: 1px; | 254 | height: 1px; |
| 256 | background: #F2F2F2; | 255 | background: #F2F2F2; |
| 257 | margin-top: 18px; | 256 | margin-top: 18px; |
| 258 | } | 257 | } |
| 259 | .detail{ | 258 | .detail{ |
| 260 | height: 272rpx; | 259 | height: 272rpx; |
| 261 | background: #FFFFFF; | 260 | background: #FFFFFF; |
| 262 | border-radius: 8px; | 261 | border-radius: 8px; |
| 263 | padding: 16px; | 262 | padding: 16px; |
| 264 | box-sizing: border-box; | 263 | box-sizing: border-box; |
| 265 | display: flex; | 264 | display: flex; |
| 266 | justify-content: space-between; | 265 | justify-content: space-between; |
| 267 | align-items: center; | 266 | align-items: center; |
| 268 | } | 267 | } |
| 269 | .detail1{ | 268 | .detail1{ |
| 270 | height: 178rpx; | 269 | height: 178rpx; |
| 271 | width: 188rpx; | 270 | width: 188rpx; |
| 272 | image{ | 271 | image{ |
| 273 | width: 100%; | 272 | width: 100%; |
| 274 | height: 100%; | 273 | height: 100%; |
| 275 | border-radius: 8px; | 274 | border-radius: 8px; |
| 276 | } | 275 | } |
| 277 | } | 276 | } |
| 278 | .detail2{ | 277 | .detail2{ |
| 279 | width: 68%; | 278 | width: 68%; |
| 280 | view{ | 279 | view{ |
| 281 | margin-bottom: 6px; | 280 | margin-bottom: 6px; |
| 282 | font-family: PingFangSC-Regular; | 281 | font-family: PingFangSC-Regular; |
| 283 | } | 282 | } |
| 284 | .detail2_name{ | 283 | .detail2_name{ |
| 285 | font-size: 14px; | 284 | font-size: 14px; |
| 286 | color: #333333; | 285 | color: #333333; |
| 287 | letter-spacing: -0.26px; | 286 | letter-spacing: -0.26px; |
| 288 | line-height: 18px; | 287 | line-height: 18px; |
| 289 | overflow:hidden; | 288 | overflow:hidden; |
| 290 | text-overflow:ellipsis; | 289 | text-overflow:ellipsis; |
| 291 | display:-webkit-box; | 290 | display:-webkit-box; |
| 292 | -webkit-box-orient:vertical; | 291 | -webkit-box-orient:vertical; |
| 293 | -webkit-line-clamp:2; | 292 | -webkit-line-clamp:2; |
| 294 | } | 293 | } |
| 295 | .detail2_tui{ | 294 | .detail2_tui{ |
| 296 | font-size: 10px; | 295 | font-size: 10px; |
| 297 | color: #999999; | 296 | color: #999999; |
| 298 | letter-spacing: -0.19px; | 297 | letter-spacing: -0.19px; |
| 299 | span{ | 298 | span{ |
| 300 | margin-right: 10px; | 299 | margin-right: 10px; |
| 301 | } | 300 | } |
| 302 | } | 301 | } |
| 303 | .detail2_price{ | 302 | .detail2_price{ |
| 304 | font-size: 14px; | 303 | font-size: 14px; |
| 305 | color: #FF6B4A; | 304 | color: #FF6B4A; |
| 306 | letter-spacing: -0.26px; | 305 | letter-spacing: -0.26px; |
| 307 | } | 306 | } |
| 308 | } | 307 | } |
| 309 | .counter{ | 308 | .counter{ |
| 310 | display: flex; | 309 | display: flex; |
| 311 | flex-direction: row; | 310 | flex-direction: row; |
| 312 | justify-content: space-between; | 311 | justify-content: space-between; |
| 313 | font-size: 28rpx; | 312 | font-size: 28rpx; |
| 314 | color: #333333; | 313 | color: #333333; |
| 315 | width: 122rpx; | 314 | width: 122rpx; |
| 316 | float: right; | 315 | float: right; |
| 317 | .btn{ | 316 | .btn{ |
| 318 | display: flex; | 317 | display: flex; |
| 319 | justify-content: center; | 318 | justify-content: center; |
| 320 | line-height: 32rpx; | 319 | line-height: 32rpx; |
| 321 | height: 32rpx; | 320 | height: 32rpx; |
| 322 | width: 32rpx; | 321 | width: 32rpx; |
| 323 | background-color: #F2F2F2; | 322 | background-color: #F2F2F2; |
| 324 | color: #CFCFCF; | 323 | color: #CFCFCF; |
| 325 | } | 324 | } |
| 326 | } | 325 | } |
| 327 | .choose{ | 326 | .choose{ |
| 328 | background: #FFFFFF; | 327 | background: #FFFFFF; |
| 329 | padding: 16px; | 328 | padding: 16px; |
| 330 | box-sizing: border-box; | 329 | box-sizing: border-box; |
| 331 | margin-top: 10px; | 330 | margin-top: 10px; |
| 332 | border-radius: 8px; | 331 | border-radius: 8px; |
| 333 | .colour1{ | 332 | .colour1{ |
| 334 | span{ | 333 | span{ |
| 335 | font-family: PingFangSC-Medium; | 334 | font-family: PingFangSC-Medium; |
| 336 | font-size: 16px; | 335 | font-size: 16px; |
| 337 | color: #333333; | 336 | color: #333333; |
| 338 | letter-spacing: -0.3px; | 337 | letter-spacing: -0.3px; |
| 339 | text-align: justify; | 338 | text-align: justify; |
| 340 | line-height: 24px; | 339 | line-height: 24px; |
| 341 | font-weight: bold; | 340 | font-weight: bold; |
| 342 | } | 341 | } |
| 343 | image{ | 342 | image{ |
| 344 | float: right; | 343 | float: right; |
| 345 | width: 40rpx; | 344 | width: 40rpx; |
| 346 | height: 36rpx; | 345 | height: 36rpx; |
| 347 | } | 346 | } |
| 348 | } | 347 | } |
| 349 | .colour_exp{ | 348 | .colour_exp{ |
| 350 | font-family: PingFangSC-Regular; | 349 | font-family: PingFangSC-Regular; |
| 351 | font-size: 12px; | 350 | font-size: 12px; |
| 352 | color: #666666; | 351 | color: #666666; |
| 353 | letter-spacing: 0; | 352 | letter-spacing: 0; |
| 354 | margin-top: 10px; | 353 | margin-top: 10px; |
| 355 | margin-bottom: 10px; | 354 | margin-bottom: 10px; |
| 356 | } | 355 | } |
| 357 | .colour2{ | 356 | .colour2{ |
| 358 | display: grid; | 357 | display: grid; |
| 359 | grid-template-columns: repeat(5, 17%); | 358 | grid-template-columns: repeat(5, 17%); |
| 360 | justify-content: space-between ; | 359 | justify-content: space-between ; |
| 361 | grid-row-gap: 10px; | 360 | grid-row-gap: 10px; |
| 362 | margin-bottom: 14px; | 361 | margin-bottom: 14px; |
| 363 | .colour2_view{ | 362 | .colour2_view{ |
| 364 | border: 1px solid #F2F2F2; | 363 | border: 1px solid #F2F2F2; |
| 365 | image{ | 364 | image{ |
| 366 | width: 100rpx; | 365 | width: 100rpx; |
| 367 | height: 60rpx; | 366 | height: 60rpx; |
| 368 | } | 367 | } |
| 369 | } | 368 | } |
| 370 | .colour2_viewed{ | 369 | .colour2_viewed{ |
| 371 | border: 1px solid #FF6B4A; | 370 | border: 1px solid #FF6B4A; |
| 372 | image{ | 371 | image{ |
| 373 | width: 100rpx; | 372 | width: 100rpx; |
| 374 | height: 60rpx; | 373 | height: 60rpx; |
| 375 | } | 374 | } |
| 376 | } | 375 | } |
| 377 | } | 376 | } |
| 378 | .colour2_none{ | 377 | .colour2_none{ |
| 379 | display: none; | 378 | display: none; |
| 380 | } | 379 | } |
| 381 | } | 380 | } |
| 382 | .size,.part{ | 381 | .size,.part{ |
| 383 | margin-top:14px; | 382 | margin-top:14px; |
| 384 | .size1{ | 383 | .size1{ |
| 385 | display: flex; | 384 | display: flex; |
| 386 | justify-content: space-between; | 385 | justify-content: space-between; |
| 387 | margin-bottom: 10px; | 386 | margin-bottom: 10px; |
| 388 | .size1_1{ | 387 | .size1_1{ |
| 389 | font-weight: bold; | 388 | font-weight: bold; |
| 390 | font-family: PingFangSC-Medium; | 389 | font-family: PingFangSC-Medium; |
| 391 | font-size: 16px; | 390 | font-size: 16px; |
| 392 | color: #333333; | 391 | color: #333333; |
| 393 | letter-spacing: -0.3px; | 392 | letter-spacing: -0.3px; |
| 394 | line-height: 24px; | 393 | line-height: 24px; |
| 395 | } | 394 | } |
| 396 | view{ | 395 | view{ |
| 397 | span{ | 396 | span{ |
| 398 | font-family: PingFangSC-Regular; | 397 | font-family: PingFangSC-Regular; |
| 399 | font-size: 14px; | 398 | font-size: 14px; |
| 400 | color: #FF6B4A; | 399 | color: #FF6B4A; |
| 401 | letter-spacing: -0.26px; | 400 | letter-spacing: -0.26px; |
| 402 | margin-right: 12px; | 401 | margin-right: 12px; |
| 403 | } | 402 | } |
| 404 | image{ | 403 | image{ |
| 405 | width: 40rpx; | 404 | width: 40rpx; |
| 406 | height: 36rpx; | 405 | height: 36rpx; |
| 407 | } | 406 | } |
| 408 | } | 407 | } |
| 409 | } | 408 | } |
| 410 | .size2{ | 409 | .size2{ |
| 411 | view{ | 410 | view{ |
| 412 | display: inline-flex; | 411 | display: inline-flex; |
| 413 | align-items: center; | 412 | align-items: center; |
| 414 | justify-content: center; //字体居中 | 413 | justify-content: center; //字体居中 |
| 415 | margin-right: 12px; | 414 | margin-right: 12px; |
| 416 | margin-bottom: 20px; | 415 | margin-bottom: 20px; |
| 417 | width: 136rpx; | 416 | width: 136rpx; |
| 418 | height: 60rpx; | 417 | height: 60rpx; |
| 419 | background: #F2F2F2; | 418 | background: #F2F2F2; |
| 420 | border-radius: 2px; | 419 | border-radius: 2px; |
| 421 | font-family: PingFangSC-Regular; | 420 | font-family: PingFangSC-Regular; |
| 422 | font-size: 12px; | 421 | font-size: 12px; |
| 423 | color: #666666; | 422 | color: #666666; |
| 424 | } | 423 | } |
| 425 | view:hover{ | 424 | view:hover{ |
| 426 | color: #FF6B4A; | 425 | color: #FF6B4A; |
| 427 | background: rgba(255,107,74,0.15); | 426 | background: rgba(255,107,74,0.15); |
| 428 | } | 427 | } |
| 429 | } | 428 | } |
| 430 | .D3_list{ | 429 | .D3_list{ |
| 431 | margin-bottom: 4px; | 430 | margin-bottom: 4px; |
| 432 | } | 431 | } |
| 433 | .D3_list>view{ | 432 | .D3_list>view{ |
| 434 | display: flex; | 433 | display: flex; |
| 435 | align-content: center; | 434 | align-content: center; |
| 436 | margin-bottom: 10px; | 435 | margin-bottom: 10px; |
| 437 | view{ | 436 | view{ |
| 438 | margin-right: 10px; | 437 | margin-right: 10px; |
| 439 | } | 438 | } |
| 440 | } | 439 | } |
| 441 | .D3_list image{ | 440 | .D3_list image{ |
| 442 | width: 50px; | 441 | width: 50px; |
| 443 | height: 25px; | 442 | height: 25px; |
| 444 | margin-right: 6px; | 443 | margin-right: 6px; |
| 445 | } | 444 | } |
| 446 | .D3_list span{ | 445 | .D3_list span{ |
| 447 | margin-left: 6px; | 446 | margin-left: 6px; |
| 448 | margin-right: 5px; | 447 | margin-right: 5px; |
| 449 | font-family: 'PingFangSC-Regular'; | 448 | font-family: 'PingFangSC-Regular'; |
| 450 | } | 449 | } |
| 451 | .D3_list_jDu{ | 450 | .D3_list_jDu{ |
| 452 | view{ | 451 | view{ |
| 453 | font-family: PingFangSC-Regular; | 452 | font-family: PingFangSC-Regular; |
| 454 | font-size: 10px; | 453 | font-size: 10px; |
| 455 | color: #999999; | 454 | color: #999999; |
| 456 | letter-spacing: -0.19px; | 455 | letter-spacing: -0.19px; |
| 457 | } | 456 | } |
| 458 | .D3_list1{ | 457 | .D3_list1{ |
| 459 | display: flex; | 458 | display: flex; |
| 460 | } | 459 | } |
| 461 | } | 460 | } |
| 462 | } | 461 | } |
| 463 | .part{ | 462 | .part{ |
| 464 | .part_som{ | 463 | .part_som{ |
| 465 | display: grid; | 464 | display: grid; |
| 466 | justify-content: space-between; | 465 | justify-content: space-between; |
| 467 | grid-template-columns: repeat(4, 22%); | 466 | grid-template-columns: repeat(4, 22%); |
| 468 | grid-row-gap: 12px; | 467 | grid-row-gap: 12px; |
| 469 | margin-bottom: 14px; | 468 | margin-bottom: 14px; |
| 470 | view{ | 469 | view{ |
| 471 | border: 1px solid #F2F2F2; | 470 | border: 1px solid #F2F2F2; |
| 472 | height: 72rpx; | 471 | height: 72rpx; |
| 473 | image{ | 472 | image{ |
| 474 | width: 100%; | 473 | width: 100%; |
| 475 | height: 100%; | 474 | height: 100%; |
| 476 | } | 475 | } |
| 477 | } | 476 | } |
| 478 | .size_viewed{ | 477 | .size_viewed{ |
| 479 | border: 1px solid #FF6B4A; | 478 | border: 1px solid #FF6B4A; |
| 480 | height: 72rpx; | 479 | height: 72rpx; |
| 481 | image{ | 480 | image{ |
| 482 | width: 100%; | 481 | width: 100%; |
| 483 | height: 100%; | 482 | height: 100%; |
| 484 | } | 483 | } |
| 485 | } | 484 | } |
| 486 | } | 485 | } |
| 487 | .colour2_none{ | 486 | .colour2_none{ |
| 488 | display: none; | 487 | display: none; |
| 489 | } | 488 | } |
| 490 | } | 489 | } |
| 491 | 490 | ||
| 492 | .buy{ | 491 | .buy{ |
| 493 | height: 300rpx; | 492 | height: 300rpx; |
| 494 | background: #FFFFFF ; | 493 | background: #FFFFFF ; |
| 495 | margin-top: 10px; | 494 | margin-top: 10px; |
| 496 | border-radius: 8px; | 495 | border-radius: 8px; |
| 497 | padding-top: 20px; | 496 | padding-top: 20px; |
| 498 | box-sizing: border-box; | 497 | box-sizing: border-box; |
| 499 | margin-bottom: 20px; | 498 | margin-bottom: 20px; |
| 500 | } | 499 | } |
| 501 | .buy1{ | 500 | .buy1{ |
| 502 | font-family: PingFangSC-Medium; | 501 | font-family: PingFangSC-Medium; |
| 503 | font-size: 16px; | 502 | font-size: 16px; |
| 504 | font-weight: bold; | 503 | font-weight: bold; |
| 505 | color: #333333; | 504 | color: #333333; |
| 506 | text-align: center; | 505 | text-align: center; |
| 507 | } | 506 | } |
| 508 | .buy2{ | 507 | .buy2{ |
| 509 | font-family: PingFangSC-Regular; | 508 | font-family: PingFangSC-Regular; |
| 510 | font-size: 12px; | 509 | font-size: 12px; |
| 511 | color: #999999; | 510 | color: #999999; |
| 512 | text-align: center; | 511 | text-align: center; |
| 513 | margin: 10px; | 512 | margin: 10px; |
| 514 | } | 513 | } |
| 515 | .buy3{ | 514 | .buy3{ |
| 516 | font-family: PingFangSC-Regular; | 515 | font-family: PingFangSC-Regular; |
| 517 | font-size: 16px; | 516 | font-size: 16px; |
| 518 | display: flex; | 517 | display: flex; |
| 519 | justify-content: center; | 518 | justify-content: center; |
| 520 | margin-top: 14px; | 519 | margin-top: 14px; |
| 521 | view{ | 520 | view{ |
| 522 | border-radius: 20px; | 521 | border-radius: 20px; |
| 523 | width: 240rpx; | 522 | width: 240rpx; |
| 524 | height: 80rpx; | 523 | height: 80rpx; |
| 525 | display: flex; | 524 | display: flex; |
| 526 | justify-content: center; | 525 | justify-content: center; |
| 527 | align-items: center; | 526 | align-items: center; |
| 528 | } | 527 | } |
| 529 | .buy3_1{ | 528 | .buy3_1{ |
| 530 | margin-right: 20px; | 529 | margin-right: 20px; |
| 531 | background: rgba(255,107,74,0.15); | 530 | background: rgba(255,107,74,0.15); |
| 532 | color: #FF6B4A ; | 531 | color: #FF6B4A ; |
| 533 | } | 532 | } |
| 534 | .buy3_2{ | 533 | .buy3_2{ |
| 535 | background: #FF6B4A; | 534 | background: #FF6B4A; |
| 536 | color: #FFFFFF ; | 535 | color: #FFFFFF ; |
| 537 | } | 536 | } |
| 538 | } | 537 | } |
| 539 | .zhanwei{ | 538 | .zhanwei{ |
| 540 | background: #F2F2F2; | 539 | background: #F2F2F2; |
| 541 | height: 120rpx; | 540 | height: 120rpx; |
| 542 | } | 541 | } |
| 543 | .button{ | 542 | .button{ |
| 544 | position: fixed; | 543 | position: fixed; |
| 545 | bottom: 0; | 544 | bottom: 0; |
| 546 | width:100%; | 545 | width:100%; |
| 547 | height: 112rpx; | 546 | height: 112rpx; |
| 548 | background: #FF6B4A 100%; | 547 | background: #FF6B4A 100%; |
| 548 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 549 | /* #ifndef APP-NVUE */ | ||
| 550 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 551 | padding-bottom: env(safe-area-inset-bottom); | ||
| 552 | /* #endif */ | ||
| 549 | view{ | 553 | view{ |
| 550 | color: #FFFFFF; | 554 | color: #FFFFFF; |
src/pages/detailStandard/detailStandard_sun.vue
| 1 | <template> | 1 | <template> |
| 2 | <view> | 2 | <view> |
| 3 | <view class="container" v-if="type===2"> | 3 | <view class="container" v-if="type===2"> |
| 4 | <view class="detail"> | 4 | <view class="detail"> |
| 5 | <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> |
| 6 | <view class="detail2"> | 6 | <view class="detail2"> |
| 7 | <view class="detail2_name">{{details.data.p_name}}</view> | 7 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 8 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> | 8 | <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> |
| 9 | <view class="detail2_price"> | 9 | <view class="detail2_price"> |
| 10 | <text>￥{{details.data.p_sale_price*count}}</text> | 10 | <text>￥{{details.data.p_sale_price*count}}</text> |
| 11 | <view class="counter"> | 11 | <view class="counter"> |
| 12 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 12 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
| 13 | <text>{{count}}</text> | 13 | <text>{{count}}</text> |
| 14 | <view class="btn" @click="counter(true)">+</view> | 14 | <view class="btn" @click="counter(true)">+</view> |
| 15 | </view> | 15 | </view> |
| 16 | </view> | 16 | </view> |
| 17 | </view> | 17 | </view> |
| 18 | </view> | 18 | </view> |
| 19 | <view class="choose"> | 19 | <view class="choose"> |
| 20 | <view class="colour"> | 20 | <view class="colour"> |
| 21 | <view class="colour1" @click="xialachange(0)"> | 21 | <view class="colour1" @click="xialachange(0)"> |
| 22 | <text>框架颜色</text> | 22 | <text>框架颜色</text> |
| 23 | <image v-bind:src="isNone[0].img"></image> | 23 | <image v-bind:src="isNone[0].img"></image> |
| 24 | </view> | 24 | </view> |
| 25 | <view class="colour_exp">*{{navData.colour}}</view> | 25 | <view class="colour_exp">*{{navData.colour}}</view> |
| 26 | <view> | 26 | <view> |
| 27 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> | 27 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
| 28 | <view | 28 | <view |
| 29 | v-for="(items,index) in details.data.skuList" | 29 | v-for="(items,index) in details.data.skuList" |
| 30 | :key="index" | 30 | :key="index" |
| 31 | @click="viewChoose(index)" | 31 | @click="viewChoose(index)" |
| 32 | class="colour2_view" | 32 | class="colour2_view" |
| 33 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 33 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
| 34 | > | 34 | > |
| 35 | <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> |
| 36 | </view> | 36 | </view> |
| 37 | </view> | 37 | </view> |
| 38 | </view> | 38 | </view> |
| 39 | <hr/> | 39 | <hr/> |
| 40 | </view> | 40 | </view> |
| 41 | <view class="colour"> | 41 | <view class="colour"> |
| 42 | <view class="colour1" @click="xialachange(1)"> | 42 | <view class="colour1" @click="xialachange(1)"> |
| 43 | <text>镜片颜色</text> | 43 | <text>镜片颜色</text> |
| 44 | <image v-bind:src="isNone[1].img"></image> | 44 | <image v-bind:src="isNone[1].img"></image> |
| 45 | </view> | 45 | </view> |
| 46 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> | 46 | <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> |
| 47 | <view v-bind:class="{'colour2_none' : isNone[1].state}"> | 47 | <view v-bind:class="{'colour2_none' : isNone[1].state}"> |
| 48 | <view class="jp_colour2"> | 48 | <view class="jp_colour2"> |
| 49 | <view | 49 | <view |
| 50 | v-for="(items,index) in jp_colour" | 50 | v-for="(items,index) in jp_colour" |
| 51 | :key="index" | 51 | :key="index" |
| 52 | class="jp_colour2_view" | 52 | class="jp_colour2_view" |
| 53 | > | 53 | > |
| 54 | <image v-bind:src="items.img"></image> | 54 | <image v-bind:src="items.img"></image> |
| 55 | </view> | 55 | </view> |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | </view> |
| 58 | <hr/> | 58 | <hr/> |
| 59 | </view> | 59 | </view> |
| 60 | <view class="colour"> | 60 | <view class="colour"> |
| 61 | <view class="colour1" @click="xialachange(2)"> | 61 | <view class="colour1" @click="xialachange(2)"> |
| 62 | <text>{{details.data.attrList[0].meta_name}}</text> | 62 | <text>{{details.data.attrList[0].meta_name}}</text> |
| 63 | <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> | 63 | <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> |
| 64 | <image v-bind:src="isNone[2].img"></image> | 64 | <image v-bind:src="isNone[2].img"></image> |
| 65 | </view> | 65 | </view> |
| 66 | <view> | 66 | <view> |
| 67 | <view class="colour_exp">*{{navData.split}}</view> | 67 | <view class="colour_exp">*{{navData.split}}</view> |
| 68 | <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> | 68 | <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}"> |
| 69 | <view | 69 | <view |
| 70 | v-for="(items,index) in details.data.attrList[0].attr" | 70 | v-for="(items,index) in details.data.attrList[0].attr" |
| 71 | :key="index" | 71 | :key="index" |
| 72 | > | 72 | > |
| 73 | <view | 73 | <view |
| 74 | class="split_colour2" | 74 | class="split_colour2" |
| 75 | @click="splitChoose(index,items.name)" | 75 | @click="splitChoose(index,items.name)" |
| 76 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" | 76 | v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" |
| 77 | >{{items.name}}</view> | 77 | >{{items.name}}</view> |
| 78 | </view> | 78 | </view> |
| 79 | </view> | 79 | </view> |
| 80 | </view> | 80 | </view> |
| 81 | <hr/> | 81 | <hr/> |
| 82 | </view> | 82 | </view> |
| 83 | <view class="size"> | 83 | <view class="size"> |
| 84 | <view class="size1" @click="xialachange(3)"> | 84 | <view class="size1" @click="xialachange(3)"> |
| 85 | <view class="size1_1">框架尺寸</view> | 85 | <view class="size1_1">框架尺寸</view> |
| 86 | <view><image v-bind:src="isNone[3].img"></image></view> | 86 | <view><image v-bind:src="isNone[3].img"></image></view> |
| 87 | </view> | 87 | </view> |
| 88 | <view class="colour"> | 88 | <view class="colour"> |
| 89 | <view class="colour_exp">*{{navData.colour}}</view> | 89 | <view class="colour_exp">*{{navData.colour}}</view> |
| 90 | </view> | 90 | </view> |
| 91 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> | 91 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}"> |
| 92 | <view> | 92 | <view> |
| 93 | <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> |
| 94 | <view class="D3_list_jDu"> | 94 | <view class="D3_list_jDu"> |
| 95 | <view class="D3_list1"> | 95 | <view class="D3_list1"> |
| 96 | <c-progress class="c-progress" :inner_widthProp="300"/> | 96 | <c-progress class="c-progress" :inner_widthProp="300"/> |
| 97 | <text>{{details.data.frame_width}}mm</text> | 97 | <text>{{details.data.frame_width}}mm</text> |
| 98 | </view> | 98 | </view> |
| 99 | <view>{{parameter[0].standard}}</view> | 99 | <view>{{parameter[0].standard}}</view> |
| 100 | </view> | 100 | </view> |
| 101 | </view> | 101 | </view> |
| 102 | <view> | 102 | <view> |
| 103 | <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> |
| 104 | <view class="D3_list_jDu"> | 104 | <view class="D3_list_jDu"> |
| 105 | <view class="D3_list1"> | 105 | <view class="D3_list1"> |
| 106 | <c-progress class="c-progress" :inner_widthProp="190"/> | 106 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 107 | <view>{{details.data.glass_width}}mm</view> | 107 | <view>{{details.data.glass_width}}mm</view> |
| 108 | </view> | 108 | </view> |
| 109 | <view>{{parameter[1].standard}}</view> | 109 | <view>{{parameter[1].standard}}</view> |
| 110 | </view> | 110 | </view> |
| 111 | </view> | 111 | </view> |
| 112 | <view> | 112 | <view> |
| 113 | <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> |
| 114 | <view class="D3_list_jDu"> | 114 | <view class="D3_list_jDu"> |
| 115 | <view class="D3_list1"> | 115 | <view class="D3_list1"> |
| 116 | <c-progress class="c-progress" :inner_widthProp="210"/> | 116 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 117 | <view>{{details.data.glass_height}}mm</view> | 117 | <view>{{details.data.glass_height}}mm</view> |
| 118 | </view> | 118 | </view> |
| 119 | <view>{{parameter[2].standard}}</view> | 119 | <view>{{parameter[2].standard}}</view> |
| 120 | </view> | 120 | </view> |
| 121 | </view> | 121 | </view> |
| 122 | <view> | 122 | <view> |
| 123 | <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> |
| 124 | <view class="D3_list_jDu"> | 124 | <view class="D3_list_jDu"> |
| 125 | 125 | ||
| 126 | <view class="D3_list1"> | 126 | <view class="D3_list1"> |
| 127 | <c-progress class="c-progress" :inner_widthProp="160"/> | 127 | <c-progress class="c-progress" :inner_widthProp="160"/> |
| 128 | <view>{{details.data.nose_width}}mm</view> | 128 | <view>{{details.data.nose_width}}mm</view> |
| 129 | </view> | 129 | </view> |
| 130 | <view>{{parameter[3].standard}}</view> | 130 | <view>{{parameter[3].standard}}</view> |
| 131 | </view> | 131 | </view> |
| 132 | </view> | 132 | </view> |
| 133 | <view> | 133 | <view> |
| 134 | <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> |
| 135 | <view class="D3_list_jDu"> | 135 | <view class="D3_list_jDu"> |
| 136 | <view class="D3_list1"> | 136 | <view class="D3_list1"> |
| 137 | <c-progress class="c-progress" :inner_widthProp="260"/> | 137 | <c-progress class="c-progress" :inner_widthProp="260"/> |
| 138 | <view>{{details.data.leg_long}}mm</view> | 138 | <view>{{details.data.leg_long}}mm</view> |
| 139 | </view> | 139 | </view> |
| 140 | <view>{{parameter[4].standard}}</view> | 140 | <view>{{parameter[4].standard}}</view> |
| 141 | </view> | 141 | </view> |
| 142 | </view> | 142 | </view> |
| 143 | </view> | 143 | </view> |
| 144 | <hr/> | 144 | <hr/> |
| 145 | </view> | 145 | </view> |
| 146 | <view class="part"> | 146 | <view class="part"> |
| 147 | <view class="size1" @click="xialachange(4)"> | 147 | <view class="size1" @click="xialachange(4)"> |
| 148 | <view class="size1_1">配件</view> | 148 | <view class="size1_1">配件</view> |
| 149 | <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view> | 149 | <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view> |
| 150 | </view> | 150 | </view> |
| 151 | <view class="colour_exp">*0290</view> | 151 | <view class="colour_exp">*0290</view> |
| 152 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> | 152 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}"> |
| 153 | <view | 153 | <view |
| 154 | v-for="(part) in part" | 154 | v-for="(part) in part" |
| 155 | :key="part.key" | 155 | :key="part.key" |
| 156 | v-bind:class="{'size_viewed': part.is_actived}" | 156 | v-bind:class="{'size_viewed': part.is_actived}" |
| 157 | > | 157 | > |
| 158 | <image v-bind:src="part.img"></image> | 158 | <image v-bind:src="part.img"></image> |
| 159 | </view> | 159 | </view> |
| 160 | </view> | 160 | </view> |
| 161 | </view> | 161 | </view> |
| 162 | </view> | 162 | </view> |
| 163 | <view class="buy"> | 163 | <view class="buy"> |
| 164 | <view class="buy1">选了镜框，想选镜片？</view> | 164 | <view class="buy1">选了镜框，想选镜片？</view> |
| 165 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | 165 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 166 | <view class="buy3"> | 166 | <view class="buy3"> |
| 167 | <view class="buy3_1">暂时不选</view> | 167 | <view class="buy3_1">暂时不选</view> |
| 168 | <view class="buy3_2" @click="popArgs">立即去选</view> | 168 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 169 | </view> | 169 | </view> |
| 170 | </view> | 170 | </view> |
| 171 | <template > | 171 | <template > |
| 172 | <view class="goods-form"> | 172 | <view class="goods-form"> |
| 173 | <text class="p1">填写验光数据</text> | 173 | <text class="p1">填写验光数据</text> |
| 174 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 174 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 175 | <view class="picker" > | 175 | <view class="picker" > |
| 176 | <view class="picker-choice"> | 176 | <view class="picker-choice"> |
| 177 | <view class="choice-left"> | 177 | <view class="choice-left"> |
| 178 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 178 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 179 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 179 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 180 | </view> | 180 | </view> |
| 181 | <text class="p13">左 (OD)</text> | 181 | <text class="p13">左 (OD)</text> |
| 182 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | 182 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> |
| 183 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | 183 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> |
| 184 | <image src="../../static/detail-tabicon.png" ></image> | 184 | <image src="../../static/detail-tabicon.png" ></image> |
| 185 | </picker> | 185 | </picker> |
| 186 | <text class="p13">右 (OS)</text> | 186 | <text class="p13">右 (OS)</text> |
| 187 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | 187 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> |
| 188 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | 188 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> |
| 189 | <image src="../../static/detail-tabicon.png" ></image> | 189 | <image src="../../static/detail-tabicon.png" ></image> |
| 190 | </picker> | 190 | </picker> |
| 191 | </view> | 191 | </view> |
| 192 | </view> | 192 | </view> |
| 193 | <view class="picker" > | 193 | <view class="picker" > |
| 194 | <view class="picker-choice"> | 194 | <view class="picker-choice"> |
| 195 | <view class="choice-left"> | 195 | <view class="choice-left"> |
| 196 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 196 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 197 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 197 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 198 | </view> | 198 | </view> |
| 199 | <text class="p13">左 (OD)</text> | 199 | <text class="p13">左 (OD)</text> |
| 200 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | 200 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> |
| 201 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | 201 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> |
| 202 | <image src="../../static/detail-tabicon.png" ></image> | 202 | <image src="../../static/detail-tabicon.png" ></image> |
| 203 | </picker> | 203 | </picker> |
| 204 | <text class="p13">右 (OS)</text> | 204 | <text class="p13">右 (OS)</text> |
| 205 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | 205 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> |
| 206 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | 206 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> |
| 207 | <image src="../../static/detail-tabicon.png" ></image> | 207 | <image src="../../static/detail-tabicon.png" ></image> |
| 208 | </picker> | 208 | </picker> |
| 209 | </view> | 209 | </view> |
| 210 | </view> | 210 | </view> |
| 211 | <view class="picker" > | 211 | <view class="picker" > |
| 212 | <view class="picker-choice"> | 212 | <view class="picker-choice"> |
| 213 | <view class="choice-left"> | 213 | <view class="choice-left"> |
| 214 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 214 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 215 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 215 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 216 | </view> | 216 | </view> |
| 217 | <text class="p13">左 (OD)</text> | 217 | <text class="p13">左 (OD)</text> |
| 218 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | 218 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> |
| 219 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | 219 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> |
| 220 | <image src="../../static/detail-tabicon.png" ></image> | 220 | <image src="../../static/detail-tabicon.png" ></image> |
| 221 | </picker> | 221 | </picker> |
| 222 | <text class="p13">右 (OS)</text> | 222 | <text class="p13">右 (OS)</text> |
| 223 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | 223 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> |
| 224 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | 224 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> |
| 225 | <image src="../../static/detail-tabicon.png" ></image> | 225 | <image src="../../static/detail-tabicon.png" ></image> |
| 226 | </picker> | 226 | </picker> |
| 227 | </view> | 227 | </view> |
| 228 | </view> | 228 | </view> |
| 229 | <view class="picker" > | 229 | <view class="picker" > |
| 230 | <view class="picker-choice"> | 230 | <view class="picker-choice"> |
| 231 | <view class="choice-left"> | 231 | <view class="choice-left"> |
| 232 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 232 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 233 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 233 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
| 234 | </view> | 234 | </view> |
| 235 | <text class="p13">左 (OD)</text> | 235 | <text class="p13">左 (OD)</text> |
| 236 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | 236 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> |
| 237 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | 237 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> |
| 238 | <image src="../../static/detail-tabicon.png" ></image> | 238 | <image src="../../static/detail-tabicon.png" ></image> |
| 239 | </picker> | 239 | </picker> |
| 240 | <text class="p13">右 (OS)</text> | 240 | <text class="p13">右 (OS)</text> |
| 241 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | 241 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> |
| 242 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | 242 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> |
| 243 | <image src="../../static/detail-tabicon.png" ></image> | 243 | <image src="../../static/detail-tabicon.png" ></image> |
| 244 | </picker> | 244 | </picker> |
| 245 | </view> | 245 | </view> |
| 246 | </view> | 246 | </view> |
| 247 | <view class="picker" > | 247 | <view class="picker" > |
| 248 | <view class="picker-choice"> | 248 | <view class="picker-choice"> |
| 249 | <view class="choice-left"> | 249 | <view class="choice-left"> |
| 250 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 250 | <text class="p11">{{pickerInfoList[4].nameC}}</text> |
| 251 | </view> | 251 | </view> |
| 252 | <text class="p13-date">年 (Y)</text> | 252 | <text class="p13-date">年 (Y)</text> |
| 253 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</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"> | 254 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> |
| 255 | <image src="../../static/detail-tabicon.png" ></image> | 255 | <image src="../../static/detail-tabicon.png" ></image> |
| 256 | </picker> | 256 | </picker> |
| 257 | <text class="p13-date">月 (M)</text> | 257 | <text class="p13-date">月 (M)</text> |
| 258 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</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"> | 259 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> |
| 260 | <image src="../../static/detail-tabicon.png" ></image> | 260 | <image src="../../static/detail-tabicon.png" ></image> |
| 261 | </picker> | 261 | </picker> |
| 262 | <text class="p13-date">日 (D)</text> | 262 | <text class="p13-date">日 (D)</text> |
| 263 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</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"> | 264 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> |
| 265 | <image src="../../static/detail-tabicon.png" ></image> | 265 | <image src="../../static/detail-tabicon.png" ></image> |
| 266 | </picker> | 266 | </picker> |
| 267 | </view> | 267 | </view> |
| 268 | </view> | 268 | </view> |
| 269 | <view class="confirm"> | 269 | <view class="confirm"> |
| 270 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | 270 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> |
| 271 | <text>确认以上输入信息来源于我的验光数据!</text> | 271 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 272 | </view> | 272 | </view> |
| 273 | </view> | 273 | </view> |
| 274 | 274 | ||
| 275 | </template> | 275 | </template> |
| 276 | <view class="zhanwei"></view> | 276 | <view class="zhanwei"></view> |
| 277 | <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> | 277 | <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> |
| 278 | </view> | 278 | </view> |
| 279 | <view class="container" v-if="type===4"> | 279 | <view class="container" v-if="type===4"> |
| 280 | <view class="detail"> | 280 | <view class="detail"> |
| 281 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> | 281 | <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> |
| 282 | <view class="detail2"> | 282 | <view class="detail2"> |
| 283 | <view class="detail2_name">{{details.data.p_name}}</view> | 283 | <view class="detail2_name">{{details.data.p_name}}</view> |
| 284 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> | 284 | <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> |
| 285 | <view class="detail2_price"> | 285 | <view class="detail2_price"> |
| 286 | <span>￥{{details.data.p_sale_price*count}}</span> | 286 | <span>￥{{details.data.p_sale_price*count}}</span> |
| 287 | <view class="counter"> | 287 | <view class="counter"> |
| 288 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 288 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> |
| 289 | <text>{{count}}</text> | 289 | <text>{{count}}</text> |
| 290 | <view class="btn" @click="counter(true)">+</view> | 290 | <view class="btn" @click="counter(true)">+</view> |
| 291 | </view> | 291 | </view> |
| 292 | </view> | 292 | </view> |
| 293 | </view> | 293 | </view> |
| 294 | </view> | 294 | </view> |
| 295 | <view class="choose"> | 295 | <view class="choose"> |
| 296 | <view class="colour"> | 296 | <view class="colour"> |
| 297 | <view class="colour1" @click="xialachange(0)"> | 297 | <view class="colour1" @click="xialachange(0)"> |
| 298 | <text>框架颜色</text> | 298 | <text>框架颜色</text> |
| 299 | <image v-bind:src="isNone[0].img"></image> | 299 | <image v-bind:src="isNone[0].img"></image> |
| 300 | </view> | 300 | </view> |
| 301 | <view class="colour_exp">*{{navData.colour}}</view> | 301 | <view class="colour_exp">*{{navData.colour}}</view> |
| 302 | <view> | 302 | <view> |
| 303 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> | 303 | <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}"> |
| 304 | <view | 304 | <view |
| 305 | v-for="(items,index) in details.data.skuList" | 305 | v-for="(items,index) in details.data.skuList" |
| 306 | :key="index" | 306 | :key="index" |
| 307 | @click="viewChoose(index)" | 307 | @click="viewChoose(index)" |
| 308 | class="colour2_view" | 308 | class="colour2_view" |
| 309 | v-bind:class="{'colour2_viewed': chooseNum == index}" | 309 | v-bind:class="{'colour2_viewed': chooseNum == index}" |
| 310 | > | 310 | > |
| 311 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> | 311 | <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> |
| 312 | </view> | 312 | </view> |
| 313 | </view> | 313 | </view> |
| 314 | </view> | 314 | </view> |
| 315 | <hr/> | 315 | <hr/> |
| 316 | </view> | 316 | </view> |
| 317 | <view class="size"> | 317 | <view class="size"> |
| 318 | <view class="size1" @click="xialachange(1)"> | 318 | <view class="size1" @click="xialachange(1)"> |
| 319 | <view class="size1_1">框架尺寸</view> | 319 | <view class="size1_1">框架尺寸</view> |
| 320 | <view><image v-bind:src="isNone[1].img"></image></view> | 320 | <view><image v-bind:src="isNone[1].img"></image></view> |
| 321 | </view> | 321 | </view> |
| 322 | <view class="colour"> | 322 | <view class="colour"> |
| 323 | <view class="colour_exp">*{{navData.colour}}</view> | 323 | <view class="colour_exp">*{{navData.colour}}</view> |
| 324 | </view> | 324 | </view> |
| 325 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> | 325 | <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}"> |
| 326 | <view> | 326 | <view> |
| 327 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> | 327 | <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> |
| 328 | <view class="D3_list_jDu"> | 328 | <view class="D3_list_jDu"> |
| 329 | <view class="D3_list1"> | 329 | <view class="D3_list1"> |
| 330 | <c-progress class="c-progress" :inner_widthProp="300"/> | 330 | <c-progress class="c-progress" :inner_widthProp="300"/> |
| 331 | <text>{{details.data.frame_width}}mm</text> | 331 | <text>{{details.data.frame_width}}mm</text> |
| 332 | </view> | 332 | </view> |
| 333 | <view>{{parameter[0].standard}}</view> | 333 | <view>{{parameter[0].standard}}</view> |
| 334 | </view> | 334 | </view> |
| 335 | </view> | 335 | </view> |
| 336 | <view> | 336 | <view> |
| 337 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> | 337 | <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> |
| 338 | <view class="D3_list_jDu"> | 338 | <view class="D3_list_jDu"> |
| 339 | <view class="D3_list1"> | 339 | <view class="D3_list1"> |
| 340 | <c-progress class="c-progress" :inner_widthProp="190"/> | 340 | <c-progress class="c-progress" :inner_widthProp="190"/> |
| 341 | <view>{{details.data.glass_width}}mm</view> | 341 | <view>{{details.data.glass_width}}mm</view> |
| 342 | </view> | 342 | </view> |
| 343 | <view>{{parameter[1].standard}}</view> | 343 | <view>{{parameter[1].standard}}</view> |
| 344 | </view> | 344 | </view> |
| 345 | </view> | 345 | </view> |
| 346 | <view> | 346 | <view> |
| 347 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> | 347 | <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> |
| 348 | <view class="D3_list_jDu"> | 348 | <view class="D3_list_jDu"> |
| 349 | <view class="D3_list1"> | 349 | <view class="D3_list1"> |
| 350 | <c-progress class="c-progress" :inner_widthProp="210"/> | 350 | <c-progress class="c-progress" :inner_widthProp="210"/> |
| 351 | <view>{{details.data.glass_height}}mm</view> | 351 | <view>{{details.data.glass_height}}mm</view> |
| 352 | </view> | 352 | </view> |
| 353 | <view>{{parameter[2].standard}}</view> | 353 | <view>{{parameter[2].standard}}</view> |
| 354 | </view> | 354 | </view> |
| 355 | </view> | 355 | </view> |
| 356 | <view> | 356 | <view> |
| 357 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> | 357 | <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> |
| 358 | <view class="D3_list_jDu"> | 358 | <view class="D3_list_jDu"> |
| 359 | 359 | ||
| 360 | <view class="D3_list1"> | 360 | <view class="D3_list1"> |
| 361 | <c-progress class="c-progress" :inner_widthProp="160"/> | 361 | <c-progress class="c-progress" :inner_widthProp="160"/> |
| 362 | <view>{{details.data.nose_width}}mm</view> | 362 | <view>{{details.data.nose_width}}mm</view> |
| 363 | </view> | 363 | </view> |
| 364 | <view>{{parameter[3].standard}}</view> | 364 | <view>{{parameter[3].standard}}</view> |
| 365 | </view> | 365 | </view> |
| 366 | </view> | 366 | </view> |
| 367 | <view> | 367 | <view> |
| 368 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> | 368 | <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> |
| 369 | <view class="D3_list_jDu"> | 369 | <view class="D3_list_jDu"> |
| 370 | <view class="D3_list1"> | 370 | <view class="D3_list1"> |
| 371 | <c-progress class="c-progress" :inner_widthProp="260"/> | 371 | <c-progress class="c-progress" :inner_widthProp="260"/> |
| 372 | <view>{{details.data.leg_long}}mm</view> | 372 | <view>{{details.data.leg_long}}mm</view> |
| 373 | </view> | 373 | </view> |
| 374 | <view>{{parameter[4].standard}}</view> | 374 | <view>{{parameter[4].standard}}</view> |
| 375 | </view> | 375 | </view> |
| 376 | </view> | 376 | </view> |
| 377 | <hr/> | 377 | <hr/> |
| 378 | </view> | 378 | </view> |
| 379 | </view> | 379 | </view> |
| 380 | <view class="part"> | 380 | <view class="part"> |
| 381 | <view class="size1" @click="xialachange(2)"> | 381 | <view class="size1" @click="xialachange(2)"> |
| 382 | <view class="size1_1" >配件</view> | 382 | <view class="size1_1" >配件</view> |
| 383 | <view> | 383 | <view> |
| 384 | <span>+￥0.00</span> | 384 | <span>+￥0.00</span> |
| 385 | <image v-bind:src="isNone[2].img"></image> | 385 | <image v-bind:src="isNone[2].img"></image> |
| 386 | </view> | 386 | </view> |
| 387 | </view> | 387 | </view> |
| 388 | <view class="colour_exp">*0290</view> | 388 | <view class="colour_exp">*0290</view> |
| 389 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> | 389 | <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}"> |
| 390 | <view | 390 | <view |
| 391 | v-for="(part) in part" | 391 | v-for="(part) in part" |
| 392 | :key="part.key" | 392 | :key="part.key" |
| 393 | v-bind:class="{'size_viewed': part.is_actived}" | 393 | v-bind:class="{'size_viewed': part.is_actived}" |
| 394 | > | 394 | > |
| 395 | <image v-bind:src="part.img"></image> | 395 | <image v-bind:src="part.img"></image> |
| 396 | </view> | 396 | </view> |
| 397 | </view> | 397 | </view> |
| 398 | </view> | 398 | </view> |
| 399 | </view> | 399 | </view> |
| 400 | <view class="buy"> | 400 | <view class="buy"> |
| 401 | <view class="buy1">选了镜框，想选镜片？</view> | 401 | <view class="buy1">选了镜框，想选镜片？</view> |
| 402 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> | 402 | <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> |
| 403 | <view class="buy3"> | 403 | <view class="buy3"> |
| 404 | <view class="buy3_1">暂时不选</view> | 404 | <view class="buy3_1">暂时不选</view> |
| 405 | <view class="buy3_2" @click="popArgs">立即去选</view> | 405 | <view class="buy3_2" @click="popArgs">立即去选</view> |
| 406 | </view> | 406 | </view> |
| 407 | </view> | 407 | </view> |
| 408 | <view class="zhanwei"></view> | 408 | <view class="zhanwei"></view> |
| 409 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> | 409 | <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> |
| 410 | </view> | 410 | </view> |
| 411 | </view> | 411 | </view> |
| 412 | </template> | 412 | </template> |
| 413 | <script> | 413 | <script> |
| 414 | import CProgress from '../../components/UniSliper/UniSliper' | 414 | import CProgress from '../../components/UniSliper/UniSliper' |
| 415 | import store from '@/store' | 415 | import store from '@/store' |
| 416 | 416 | ||
| 417 | export default { | 417 | export default { |
| 418 | components: { | 418 | components: { |
| 419 | CProgress | 419 | CProgress, |
| 420 | }, | ||
| 421 | data() { | ||
| 422 | return { | ||
| 423 | type: 2, | ||
| 424 | count: 1, | ||
| 425 | chooseNum: '', | ||
| 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 | // 尺寸 | ||
| 447 | parameter: [ | ||
| 448 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: 139 }, | ||
| 449 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: 51 }, | ||
| 450 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: 45 }, | ||
| 451 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: 19 }, | ||
| 452 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: 138 }, | ||
| 453 | ], | ||
| 454 | // 镜片颜色 | ||
| 455 | jp_colour: [ | ||
| 456 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 457 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 458 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 459 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 460 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 461 | { img: '/static/img/detail/Kuang/sun_jp.png' }, | ||
| 462 | ], | ||
| 463 | // 配饰 | ||
| 464 | part: [ | ||
| 465 | { key: 0, img: '/static/img/detail/Kuang/g1.png', is_actived: true }, | ||
| 466 | { key: 1, img: '/static/img/detail/Kuang/g1.png', is_actived: false }, | ||
| 467 | { key: 2, img: '/static/img/detail/Kuang/g2.png', is_actived: false }, | ||
| 468 | { key: 3, img: '/static/img/detail/Kuang/g1.png', is_actived: false }, | ||
| 469 | { key: 4, img: '/static/img/detail/Kuang/g1.png', is_actived: false }, | ||
| 470 | { key: 5, img: '/static/img/detail/Kuang/g3.png', is_actived: false }, | ||
| 471 | { key: 6, img: '/static/img/detail/Kuang/g3.png', is_actived: false }, | ||
| 472 | { key: 7, img: '/static/img/detail/Kuang/g2.png', is_actived: false }, | ||
| 473 | ], | ||
| 474 | opIsOpen: true, | ||
| 475 | tablist: { | ||
| 476 | // read: true, | ||
| 477 | // seeLong: false, | ||
| 478 | confirm: false, | ||
| 479 | }, | ||
| 480 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], | ||
| 481 | // 度数相关数据 | ||
| 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 | ], | ||
| 489 | } | ||
| 490 | }, | ||
| 491 | |||
| 492 | computed: { | ||
| 493 | details() { | ||
| 494 | return this.$store.state.detailStandard_k.list | ||
| 495 | }, | ||
| 496 | }, | ||
| 497 | onLoad: function() { | ||
| 498 | store.dispatch('detailStandard_k/fetch', { | ||
| 499 | uid: '1', | ||
| 500 | pid: '26', | ||
| 501 | p_root_index: '4', | ||
| 502 | }) | ||
| 503 | }, | ||
| 504 | methods: { | ||
| 505 | counter(isadd) { | ||
| 506 | if (isadd) { | ||
| 507 | this.count++ | ||
| 508 | } else { | ||
| 509 | this.count <= 1 ? this.disabled = true : this.count-- | ||
| 510 | } | ||
| 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 | }, | ||
| 520 | colourChange(index, e) { | ||
| 521 | this.navData.colour = e // 颜色选择 | ||
| 522 | }, | ||
| 523 | viewChoose(index) { | ||
| 524 | this.chooseNum = index | ||
| 525 | }, | ||
| 526 | // 折射率选择 | ||
| 527 | splitChoose(index, e) { | ||
| 528 | this.isSplit = index | ||
| 529 | this.navData.split = e | ||
| 530 | }, | ||
| 531 | // 跳转镜片选购页 | ||
| 532 | popArgs() { | ||
| 533 | uni.navigateTo({ | ||
| 534 | url: '../detailsChoiceArgs/detailsChoiceArgs', | ||
| 535 | success: res => {}, | ||
| 536 | fail: () => {}, | ||
| 537 | complete: () => {}, | ||
| 538 | }) | ||
| 539 | }, | ||
| 540 | // 跳转确认订单页及传参 | ||
| 541 | popSure(name, price) { | ||
| 542 | this.navData.name = name | ||
| 543 | this.navData.price = price | ||
| 544 | this.navData.type = this.type | ||
| 545 | var navData = JSON.stringify(this.navData) | ||
| 546 | uni.navigateTo({ | ||
| 547 | url: '../confirmOrder/confirmOrder?index=' + navData, | ||
| 548 | }) | ||
| 549 | console.log(this.navData) | ||
| 550 | }, | ||
| 551 | // 验光表 | ||
| 552 | changeConfirm() { | ||
| 553 | this.tablist.confirm = !this.tablist.confirm | ||
| 554 | }, | ||
| 555 | bindPickerChange01: function(e) { | ||
| 556 | this.pickerInfoList[0].nameIndex1 = e.target.value | ||
| 557 | }, | ||
| 558 | bindPickerChange02: function(e) { | ||
| 559 | this.pickerInfoList[0].nameIndex2 = e.target.value | ||
| 420 | }, | 560 | }, |
| 421 | data(){ | ||
| 422 | return{ | ||
| 423 | type: 2, | ||
| 424 | count: 1, | ||
| 425 | chooseNum : '', | ||
| 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 | 561 | ||
| 435 | //传参 | 562 | bindPickerChange11: function(e) { |
| 436 | navData:{ | 563 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 437 | pid: "26", | 564 | }, |
| 438 | p_root_index: "4", | 565 | bindPickerChange12: function(e) { |
| 439 | name:'', | 566 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 440 | price:'', | 567 | }, |
| 441 | type:'', | ||
| 442 | split: '1.56非球面防蓝光', | ||
| 443 | colour: '1.56非球面防蓝光_亚黑色', | ||
| 444 | }, | ||
| 445 | 568 | ||
| 446 | //尺寸 | 569 | bindPickerChange21: function(e) { |
| 447 | parameter:[ | 570 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 448 | {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, | 571 | }, |
| 449 | {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, | 572 | bindPickerChange22: function(e) { |
| 450 | {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, | 573 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 451 | {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, | ||
| 452 | {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, | ||
| 453 | ], | ||
| 454 | //镜片颜色 | ||
| 455 | jp_colour:[ | ||
| 456 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | ||
| 457 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | ||
| 458 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | ||
| 459 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | ||
| 460 | {img:'/static/img/detail/Kuang/sun_jp.png'}, | ||
| 461 | {img:'/static/img/detail/Kuang/sun_jp.png'} | ||
| 462 | ], | ||
| 463 | //配饰 | ||
| 464 | part:[ | ||
| 465 | {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, | ||
| 466 | {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | ||
| 467 | {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | ||
| 468 | {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | ||
| 469 | {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, | ||
| 470 | {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | ||
| 471 | {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, | ||
| 472 | {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, | ||
| 473 | ], | ||
| 474 | opIsOpen:true, | ||
| 475 | tablist: { | ||
| 476 | // read: true, | ||
| 477 | // seeLong: false, | ||
| 478 | confirm: false | ||
| 479 | }, | ||
| 480 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | ||
| 481 | // 度数相关数据 | ||
| 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 | ], | ||
| 489 | } | ||
| 490 | }, | 574 | }, |
| 491 | 575 | ||
| 492 | computed: { | 576 | bindPickerChange31: function(e) { |
| 493 | details(){ | 577 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 494 | return this.$store.state.detailStandard_k.list | ||
| 495 | }, | ||
| 496 | }, | 578 | }, |
| 497 | onLoad:function(){ | 579 | bindPickerChange32: function(e) { |
| 498 | store.dispatch('detailStandard_k/fetch', { | 580 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 499 | uid: "1", | ||
| 500 | pid: "26", | ||
| 501 | p_root_index: "4" | ||
| 502 | }); | ||
| 503 | }, | 581 | }, |
| 504 | methods: { | ||
| 505 | counter(isadd){ | ||
| 506 | if(isadd){ | ||
| 507 | this.count++ | ||
| 508 | }else{ | ||
| 509 | this.count <= 1? this.disabled = true:this.count-- | ||
| 510 | } | ||
| 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 | }, | ||
| 520 | colourChange(index,e){ | ||
| 521 | this.navData.colour = e ; //颜色选择 | ||
| 522 | 582 | ||
| 523 | }, | 583 | bindPickerChange41: function(e) { |
| 524 | viewChoose(index){ | 584 | this.pickerInfoList[4].nameIndex1 = e.target.value |
| 525 | this.chooseNum = index | 585 | }, |
| 526 | }, | 586 | bindPickerChange42: function(e) { |
| 527 | //折射率选择 | 587 | this.pickerInfoList[4].nameIndex2 = e.target.value |
| 528 | splitChoose(index,e){ | 588 | }, |
| 529 | this.isSplit = index | ||
| 530 | this.navData.split = e | ||
| 531 | }, | ||
| 532 | //跳转镜片选购页 | ||
| 533 | popArgs(){ | ||
| 534 | uni.navigateTo({ | ||
| 535 | url: '../detailsChoiceArgs/detailsChoiceArgs', | ||
| 536 | success: res => {}, | ||
| 537 | fail: () => {}, | ||
| 538 | complete: () => {} | ||
| 539 | }); | ||
| 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) { | 589 | bindPickerChange43: function(e) { |
| 591 | this.pickerInfoList[4].nameIndex3 = e.target.value | 590 | this.pickerInfoList[4].nameIndex3 = e.target.value |
| 592 | }, | 591 | }, |
| 593 | } | 592 | }, |
| 594 | 593 | ||
| 595 | } | 594 | } |
| 596 | </script> | 595 | </script> |
| 597 | 596 | ||
| 598 | <style lang="scss"> | 597 | <style lang="scss"> |
| 599 | .container{ | 598 | .container{ |
| 600 | min-height: 100vh; | 599 | min-height: 100vh; |
| 601 | background: #F2F2F2; | 600 | background: #F2F2F2; |
| 602 | padding-top: 10px; | 601 | padding-top: 10px; |
| 603 | box-sizing: border-box; | 602 | box-sizing: border-box; |
| 604 | } | 603 | } |
| 605 | hr{ | 604 | hr{ |
| 606 | border: none; | 605 | border: none; |
| 607 | height: 1px; | 606 | height: 1px; |
| 608 | background: #F2F2F2; | 607 | background: #F2F2F2; |
| 609 | margin-top: 18px; | 608 | margin-top: 18px; |
| 610 | margin-bottom: 10px; | 609 | margin-bottom: 10px; |
| 611 | } | 610 | } |
| 612 | .detail{ | 611 | .detail{ |
| 613 | height: 272rpx; | 612 | height: 272rpx; |
| 614 | background: #FFFFFF; | 613 | background: #FFFFFF; |
| 615 | border-radius: 8px; | 614 | border-radius: 8px; |
| 616 | padding: 16px; | 615 | padding: 16px; |
| 617 | box-sizing: border-box; | 616 | box-sizing: border-box; |
| 618 | display: flex; | 617 | display: flex; |
| 619 | justify-content: space-between; | 618 | justify-content: space-between; |
| 620 | align-items: center; | 619 | align-items: center; |
| 621 | } | 620 | } |
| 622 | .detail1{ | 621 | .detail1{ |
| 623 | height: 178rpx; | 622 | height: 178rpx; |
| 624 | width: 188rpx; | 623 | width: 188rpx; |
| 625 | image{ | 624 | image{ |
| 626 | width: 100%; | 625 | width: 100%; |
| 627 | height: 100%; | 626 | height: 100%; |
| 628 | border-radius: 8px; | 627 | border-radius: 8px; |
| 629 | } | 628 | } |
| 630 | } | 629 | } |
| 631 | .detail2{ | 630 | .detail2{ |
| 632 | width: 68%; | 631 | width: 68%; |
| 633 | view{ | 632 | view{ |
| 634 | margin-bottom: 6px; | 633 | margin-bottom: 6px; |
| 635 | font-family: PingFangSC-Regular; | 634 | font-family: PingFangSC-Regular; |
| 636 | } | 635 | } |
| 637 | .detail2_name{ | 636 | .detail2_name{ |
| 638 | font-size: 14px; | 637 | font-size: 14px; |
| 639 | color: #333333; | 638 | color: #333333; |
| 640 | letter-spacing: -0.26px; | 639 | letter-spacing: -0.26px; |
| 641 | line-height: 18px; | 640 | line-height: 18px; |
| 642 | overflow:hidden; | 641 | overflow:hidden; |
| 643 | text-overflow:ellipsis; | 642 | text-overflow:ellipsis; |
| 644 | display:-webkit-box; | 643 | display:-webkit-box; |
| 645 | -webkit-box-orient:vertical; | 644 | -webkit-box-orient:vertical; |
| 646 | -webkit-line-clamp:2; | 645 | -webkit-line-clamp:2; |
| 647 | } | 646 | } |
| 648 | .detail2_tui{ | 647 | .detail2_tui{ |
| 649 | font-size: 10px; | 648 | font-size: 10px; |
| 650 | color: #999999; | 649 | color: #999999; |
| 651 | letter-spacing: -0.19px; | 650 | letter-spacing: -0.19px; |
| 652 | span{ | 651 | span{ |
| 653 | margin-right: 10px; | 652 | margin-right: 10px; |
| 654 | } | 653 | } |
| 655 | } | 654 | } |
| 656 | .detail2_price{ | 655 | .detail2_price{ |
| 657 | font-size: 14px; | 656 | font-size: 14px; |
| 658 | color: #FF6B4A; | 657 | color: #FF6B4A; |
| 659 | letter-spacing: -0.26px; | 658 | letter-spacing: -0.26px; |
| 660 | } | 659 | } |
| 661 | } | 660 | } |
| 662 | .counter{ | 661 | .counter{ |
| 663 | display: flex; | 662 | display: flex; |
| 664 | flex-direction: row; | 663 | flex-direction: row; |
| 665 | justify-content: space-between; | 664 | justify-content: space-between; |
| 666 | font-size: 28rpx; | 665 | font-size: 28rpx; |
| 667 | color: #333333; | 666 | color: #333333; |
| 668 | width: 122rpx; | 667 | width: 122rpx; |
| 669 | float: right; | 668 | float: right; |
| 670 | .btn{ | 669 | .btn{ |
| 671 | display: flex; | 670 | display: flex; |
| 672 | justify-content: center; | 671 | justify-content: center; |
| 673 | line-height: 32rpx; | 672 | line-height: 32rpx; |
| 674 | height: 32rpx; | 673 | height: 32rpx; |
| 675 | width: 32rpx; | 674 | width: 32rpx; |
| 676 | background-color: #F2F2F2; | 675 | background-color: #F2F2F2; |
| 677 | color: #CFCFCF; | 676 | color: #CFCFCF; |
| 678 | } | 677 | } |
| 679 | } | 678 | } |
| 680 | .choose{ | 679 | .choose{ |
| 681 | background: #FFFFFF; | 680 | background: #FFFFFF; |
| 682 | padding: 16px; | 681 | padding: 16px; |
| 683 | box-sizing: border-box; | 682 | box-sizing: border-box; |
| 684 | margin-top: 10px; | 683 | margin-top: 10px; |
| 685 | border-radius: 8px; | 684 | border-radius: 8px; |
| 686 | .colour1{ | 685 | .colour1{ |
| 687 | span{ | 686 | span{ |
| 688 | font-family: PingFangSC-Medium; | 687 | font-family: PingFangSC-Medium; |
| 689 | font-size: 16px; | 688 | font-size: 16px; |
| 690 | color: #333333; | 689 | color: #333333; |
| 691 | letter-spacing: -0.3px; | 690 | letter-spacing: -0.3px; |
| 692 | text-align: justify; | 691 | text-align: justify; |
| 693 | line-height: 24px; | 692 | line-height: 24px; |
| 694 | font-weight: bold; | 693 | font-weight: bold; |
| 695 | } | 694 | } |
| 696 | image{ | 695 | image{ |
| 697 | float: right; | 696 | float: right; |
| 698 | width: 40rpx; | 697 | width: 40rpx; |
| 699 | height: 36rpx; | 698 | height: 36rpx; |
| 700 | } | 699 | } |
| 701 | .colour1_span2{ | 700 | .colour1_span2{ |
| 702 | font-family: PingFangSC-Regular; | 701 | font-family: PingFangSC-Regular; |
| 703 | font-size: 12px; | 702 | font-size: 12px; |
| 704 | color: #666666; | 703 | color: #666666; |
| 705 | margin-left: 10px; | 704 | margin-left: 10px; |
| 706 | font-weight: normal | 705 | font-weight: normal |
| 707 | } | 706 | } |
| 708 | } | 707 | } |
| 709 | .colour_exp{ | 708 | .colour_exp{ |
| 710 | font-family: PingFangSC-Regular; | 709 | font-family: PingFangSC-Regular; |
| 711 | font-size: 12px; | 710 | font-size: 12px; |
| 712 | color: #666666; | 711 | color: #666666; |
| 713 | letter-spacing: 0; | 712 | letter-spacing: 0; |
| 714 | margin-top: 10px; | 713 | margin-top: 10px; |
| 715 | margin-bottom: 10px; | 714 | margin-bottom: 10px; |
| 716 | } | 715 | } |
| 717 | .colour2{ | 716 | .colour2{ |
| 718 | display: grid; | 717 | display: grid; |
| 719 | grid-template-columns: repeat(5, 17%); | 718 | grid-template-columns: repeat(5, 17%); |
| 720 | justify-content: space-between ; | 719 | justify-content: space-between ; |
| 721 | grid-row-gap: 10px; | 720 | grid-row-gap: 10px; |
| 722 | margin-bottom: 14px; | 721 | margin-bottom: 14px; |
| 723 | .colour2_view{ | 722 | .colour2_view{ |
| 724 | border: 1px solid #F2F2F2; | 723 | border: 1px solid #F2F2F2; |
| 725 | image{ | 724 | image{ |
| 726 | width: 100rpx; | 725 | width: 100rpx; |
| 727 | height: 60rpx; | 726 | height: 60rpx; |
| 728 | } | 727 | } |
| 729 | } | 728 | } |
| 730 | .colour2_viewed{ | 729 | .colour2_viewed{ |
| 731 | border: 1px solid #FF6B4A; | 730 | border: 1px solid #FF6B4A; |
| 732 | image{ | 731 | image{ |
| 733 | width: 100rpx; | 732 | width: 100rpx; |
| 734 | height: 60rpx; | 733 | height: 60rpx; |
| 735 | } | 734 | } |
| 736 | } | 735 | } |
| 737 | } | 736 | } |
| 738 | .colour2_none{ | 737 | .colour2_none{ |
| 739 | display: none; | 738 | display: none; |
| 740 | } | 739 | } |
| 741 | } | 740 | } |
| 742 | .jp_colour2{ | 741 | .jp_colour2{ |
| 743 | display: grid; | 742 | display: grid; |
| 744 | grid-template-columns: repeat(5, 13%); | 743 | grid-template-columns: repeat(5, 13%); |
| 745 | justify-content: start ; | 744 | justify-content: start ; |
| 746 | grid-column-gap: 10px; | 745 | grid-column-gap: 10px; |
| 747 | grid-row-gap: 10px; | 746 | grid-row-gap: 10px; |
| 748 | margin-bottom: 14px; | 747 | margin-bottom: 14px; |
| 749 | .jp_colour2_view{ | 748 | .jp_colour2_view{ |
| 750 | border: 1px solid #F2F2F2; | 749 | border: 1px solid #F2F2F2; |
| 751 | image{ | 750 | image{ |
| 752 | width: 80rpx; | 751 | width: 80rpx; |
| 753 | height: 80rpx; | 752 | height: 80rpx; |
| 754 | } | 753 | } |
| 755 | } | 754 | } |
| 756 | } | 755 | } |
| 757 | .split{ | 756 | .split{ |
| 758 | display: grid; | 757 | display: grid; |
| 759 | grid-template-columns: repeat(2, 45%); | 758 | grid-template-columns: repeat(2, 45%); |
| 760 | grid-column-gap: 10px; | 759 | grid-column-gap: 10px; |
| 761 | grid-row-gap: 10px; | 760 | grid-row-gap: 10px; |
| 762 | margin-top: 10px ; | 761 | margin-top: 10px ; |
| 763 | .split_colour2{ | 762 | .split_colour2{ |
| 764 | display: flex; | 763 | display: flex; |
| 765 | justify-content: center; | 764 | justify-content: center; |
| 766 | align-items: center; | 765 | align-items: center; |
| 767 | width: 300rpx; | 766 | width: 300rpx; |
| 768 | height: 60rpx; | 767 | height: 60rpx; |
| 769 | background: #F2F2F2; | 768 | background: #F2F2F2; |
| 770 | border-radius: 2px; | 769 | border-radius: 2px; |
| 771 | font-family: PingFangSC-Regular; | 770 | font-family: PingFangSC-Regular; |
| 772 | font-size: 12px; | 771 | font-size: 12px; |
| 773 | color: #666666; | 772 | color: #666666; |
| 774 | letter-spacing: 0; | 773 | letter-spacing: 0; |
| 775 | text-align: center; | 774 | text-align: center; |
| 776 | } | 775 | } |
| 777 | .split_colour2_actived{ | 776 | .split_colour2_actived{ |
| 778 | background: rgba(255,107,74,0.15); | 777 | background: rgba(255,107,74,0.15); |
| 779 | color: #FF6B4A; | 778 | color: #FF6B4A; |
| 780 | } | 779 | } |
| 781 | } | 780 | } |
| 782 | .size,.part{ | 781 | .size,.part{ |
| 783 | margin-top:14px; | 782 | margin-top:14px; |
| 784 | .size1{ | 783 | .size1{ |
| 785 | display: flex; | 784 | display: flex; |
| 786 | justify-content: space-between; | 785 | justify-content: space-between; |
| 787 | margin-bottom: 10px; | 786 | margin-bottom: 10px; |
| 788 | .size1_1{ | 787 | .size1_1{ |
| 789 | font-weight: bold; | 788 | font-weight: bold; |
| 790 | font-family: PingFangSC-Medium; | 789 | font-family: PingFangSC-Medium; |
| 791 | font-size: 16px; | 790 | font-size: 16px; |
| 792 | color: #333333; | 791 | color: #333333; |
| 793 | letter-spacing: -0.3px; | 792 | letter-spacing: -0.3px; |
| 794 | line-height: 24px; | 793 | line-height: 24px; |
| 795 | } | 794 | } |
| 796 | view{ | 795 | view{ |
| 797 | span{ | 796 | span{ |
| 798 | font-family: PingFangSC-Regular; | 797 | font-family: PingFangSC-Regular; |
| 799 | font-size: 14px; | 798 | font-size: 14px; |
| 800 | color: #FF6B4A; | 799 | color: #FF6B4A; |
| 801 | letter-spacing: -0.26px; | 800 | letter-spacing: -0.26px; |
| 802 | margin-right: 12px; | 801 | margin-right: 12px; |
| 803 | } | 802 | } |
| 804 | image{ | 803 | image{ |
| 805 | width: 40rpx; | 804 | width: 40rpx; |
| 806 | height: 36rpx; | 805 | height: 36rpx; |
| 807 | } | 806 | } |
| 808 | } | 807 | } |
| 809 | } | 808 | } |
| 810 | .size2{ | 809 | .size2{ |
| 811 | view{ | 810 | view{ |
| 812 | display: inline-flex; | 811 | display: inline-flex; |
| 813 | align-items: center; | 812 | align-items: center; |
| 814 | justify-content: center; //字体居中 | 813 | justify-content: center; //字体居中 |
| 815 | margin-right: 12px; | 814 | margin-right: 12px; |
| 816 | margin-bottom: 20px; | 815 | margin-bottom: 20px; |
| 817 | width: 136rpx; | 816 | width: 136rpx; |
| 818 | height: 60rpx; | 817 | height: 60rpx; |
| 819 | background: #F2F2F2; | 818 | background: #F2F2F2; |
| 820 | border-radius: 2px; | 819 | border-radius: 2px; |
| 821 | font-family: PingFangSC-Regular; | 820 | font-family: PingFangSC-Regular; |
| 822 | font-size: 12px; | 821 | font-size: 12px; |
| 823 | color: #666666; | 822 | color: #666666; |
| 824 | } | 823 | } |
| 825 | view:hover{ | 824 | view:hover{ |
| 826 | color: #FF6B4A; | 825 | color: #FF6B4A; |
| 827 | background: rgba(255,107,74,0.15); | 826 | background: rgba(255,107,74,0.15); |
| 828 | } | 827 | } |
| 829 | } | 828 | } |
| 830 | .D3_list{ | 829 | .D3_list{ |
| 831 | margin-bottom: 4px; | 830 | margin-bottom: 4px; |
| 832 | } | 831 | } |
| 833 | .D3_list>view{ | 832 | .D3_list>view{ |
| 834 | display: flex; | 833 | display: flex; |
| 835 | align-content: center; | 834 | align-content: center; |
| 836 | margin-bottom: 10px; | 835 | margin-bottom: 10px; |
| 837 | view{ | 836 | view{ |
| 838 | margin-right: 10px; | 837 | margin-right: 10px; |
| 839 | } | 838 | } |
| 840 | } | 839 | } |
| 841 | .D3_list image{ | 840 | .D3_list image{ |
| 842 | width: 50px; | 841 | width: 50px; |
| 843 | height: 25px; | 842 | height: 25px; |
| 844 | margin-right: 6px; | 843 | margin-right: 6px; |
| 845 | } | 844 | } |
| 846 | .D3_list span{ | 845 | .D3_list span{ |
| 847 | margin-left: 6px; | 846 | margin-left: 6px; |
| 848 | margin-right: 5px; | 847 | margin-right: 5px; |
| 849 | font-family: 'PingFangSC-Regular'; | 848 | font-family: 'PingFangSC-Regular'; |
| 850 | } | 849 | } |
| 851 | .D3_list_jDu{ | 850 | .D3_list_jDu{ |
| 852 | view{ | 851 | view{ |
| 853 | font-family: PingFangSC-Regular; | 852 | font-family: PingFangSC-Regular; |
| 854 | font-size: 10px; | 853 | font-size: 10px; |
| 855 | color: #999999; | 854 | color: #999999; |
| 856 | letter-spacing: -0.19px; | 855 | letter-spacing: -0.19px; |
| 857 | } | 856 | } |
| 858 | .D3_list1{ | 857 | .D3_list1{ |
| 859 | display: flex; | 858 | display: flex; |
| 860 | } | 859 | } |
| 861 | } | 860 | } |
| 862 | } | 861 | } |
| 863 | .part{ | 862 | .part{ |
| 864 | .part_som{ | 863 | .part_som{ |
| 865 | display: grid; | 864 | display: grid; |
| 866 | justify-content: space-between; | 865 | justify-content: space-between; |
| 867 | grid-template-columns: repeat(4, 22%); | 866 | grid-template-columns: repeat(4, 22%); |
| 868 | grid-row-gap: 12px; | 867 | grid-row-gap: 12px; |
| 869 | margin-bottom: 14px; | 868 | margin-bottom: 14px; |
| 870 | view{ | 869 | view{ |
| 871 | border: 1px solid #F2F2F2; | 870 | border: 1px solid #F2F2F2; |
| 872 | height: 72rpx; | 871 | height: 72rpx; |
| 873 | image{ | 872 | image{ |
| 874 | width: 100%; | 873 | width: 100%; |
| 875 | height: 100%; | 874 | height: 100%; |
| 876 | } | 875 | } |
| 877 | } | 876 | } |
| 878 | .size_viewed{ | 877 | .size_viewed{ |
| 879 | border: 1px solid #FF6B4A; | 878 | border: 1px solid #FF6B4A; |
| 880 | height: 72rpx; | 879 | height: 72rpx; |
| 881 | image{ | 880 | image{ |
| 882 | width: 100%; | 881 | width: 100%; |
| 883 | height: 100%; | 882 | height: 100%; |
| 884 | } | 883 | } |
| 885 | } | 884 | } |
| 886 | } | 885 | } |
| 887 | .colour2_none{ | 886 | .colour2_none{ |
| 888 | display: none; | 887 | display: none; |
| 889 | } | 888 | } |
| 890 | } | 889 | } |
| 891 | 890 | ||
| 892 | .buy{ | 891 | .buy{ |
| 893 | height: 300rpx; | 892 | height: 300rpx; |
| 894 | background: #FFFFFF ; | 893 | background: #FFFFFF ; |
| 895 | margin-top: 10px; | 894 | margin-top: 10px; |
| 896 | border-radius: 8px; | 895 | border-radius: 8px; |
| 897 | padding-top: 20px; | 896 | padding-top: 20px; |
| 898 | box-sizing: border-box; | 897 | box-sizing: border-box; |
| 899 | margin-bottom: 10px; | 898 | margin-bottom: 10px; |
| 900 | } | 899 | } |
| 901 | .buy1{ | 900 | .buy1{ |
| 902 | font-family: PingFangSC-Medium; | 901 | font-family: PingFangSC-Medium; |
| 903 | font-size: 16px; | 902 | font-size: 16px; |
| 904 | font-weight: bold; | 903 | font-weight: bold; |
| 905 | color: #333333; | 904 | color: #333333; |
| 906 | text-align: center; | 905 | text-align: center; |
| 907 | } | 906 | } |
| 908 | .buy2{ | 907 | .buy2{ |
| 909 | font-family: PingFangSC-Regular; | 908 | font-family: PingFangSC-Regular; |
| 910 | font-size: 12px; | 909 | font-size: 12px; |
| 911 | color: #999999; | 910 | color: #999999; |
| 912 | text-align: center; | 911 | text-align: center; |
| 913 | margin: 10px; | 912 | margin: 10px; |
| 914 | } | 913 | } |
| 915 | .buy3{ | 914 | .buy3{ |
| 916 | font-family: PingFangSC-Regular; | 915 | font-family: PingFangSC-Regular; |
| 917 | font-size: 16px; | 916 | font-size: 16px; |
| 918 | display: flex; | 917 | display: flex; |
| 919 | justify-content: center; | 918 | justify-content: center; |
| 920 | margin-top: 14px; | 919 | margin-top: 14px; |
| 921 | view{ | 920 | view{ |
| 922 | border-radius: 20px; | 921 | border-radius: 20px; |
| 923 | width: 240rpx; | 922 | width: 240rpx; |
| 924 | height: 80rpx; | 923 | height: 80rpx; |
src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="goods-info"> | 3 | <view class="goods-info"> |
| 4 | <image src="../../static/myorder-paying-pic.png"></image> | 4 | <image src="../../static/myorder-paying-pic.png"></image> |
| 5 | <view class="box-right"> | 5 | <view class="box-right"> |
| 6 | <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> | 6 | <text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text> |
| 7 | <text class="p2">支持7天无理由退货 顺丰发货</text> | 7 | <text class="p2">支持7天无理由退货 顺丰发货</text> |
| 8 | <view class="priceBox"> | 8 | <view class="priceBox"> |
| 9 | <view class="price">￥{{price*count}}</view> | 9 | <view class="price">￥{{price*count}}</view> |
| 10 | <view class="counter"> | 10 | <view class="counter"> |
| 11 | <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> | 11 | <view |
| 12 | <text>{{count}}</text> | 12 | class="btn" |
| 13 | <view class="btn" @click="counter(true)">+</view> | 13 | disabled="this.disabled" |
| 14 | </view> | 14 | @click="counter(false)" |
| 15 | </view> | 15 | >-</view> |
| 16 | </view> | 16 | <text>{{count}}</text> |
| 17 | </view> | 17 | <view |
| 18 | <view class="goods-data"> | 18 | class="btn" |
| 19 | <view class="opCollapse"> | 19 | @click="counter(true)" |
| 20 | <!-- <view class="head"> | 20 | >+</view> |
| 21 | </view> | ||
| 22 | </view> | ||
| 23 | </view> | ||
| 24 | </view> | ||
| 25 | <view class="goods-data"> | ||
| 26 | <view class="opCollapse"> | ||
| 27 | <!-- <view class="head"> | ||
| 21 | <view v-if="!opIsOpen">填写验光数据</view> | 28 | <view v-if="!opIsOpen">填写验光数据</view> |
| 22 | <view v-else></view> | 29 | <view v-else></view> |
| 23 | <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> | 30 | <view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view> |
| 24 | <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> | 31 | <view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> |
| 25 | </view> --> | 32 | </view> --> |
| 26 | <view class="body"> | 33 | <view class="body"> |
| 27 | <template v-if="opIsOpen"> | 34 | <template v-if="opIsOpen"> |
| 28 | <view class="goods-form"> | 35 | <view class="goods-form"> |
| 29 | <view class="data-title"> | 36 | <view class="data-title"> |
| 30 | <image src="../../static/icon-data.png" ></image> | 37 | <image src="../../static/icon-data.png"></image> |
| 31 | <text class="p1">填写验光数据</text> | 38 | <text class="p1">填写验光数据</text> |
| 32 | </view> | 39 | </view> |
| 33 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 40 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 34 | <view class="picker" > | 41 | <view class="picker"> |
| 35 | <view class="picker-choice"> | 42 | <view class="picker-choice"> |
| 36 | <view class="choice-left"> | 43 | <view class="choice-left"> |
| 37 | <text class="p11">验光单取名:</text> | 44 | <text class="p11">验光单取名:</text> |
| 38 | </view> | 45 | </view> |
| 39 | <input class="choice-name uni-input" placeholder="下系" /> | 46 | <input |
| 47 | class="choice-name uni-input" | ||
| 48 | placeholder="下系" | ||
| 49 | /> | ||
| 40 | </view> | 50 | </view> |
| 41 | </view> | 51 | </view> |
| 42 | <view class="picker" > | 52 | <view class="picker"> |
| 43 | <view class="picker-choice"> | 53 | <view class="picker-choice"> |
| 44 | <view class="choice-left"> | 54 | <view class="choice-left"> |
| 45 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 55 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 46 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 56 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 47 | </view> | ||
| 48 | <text class="p13">左 (OD)</text> | ||
| 49 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | ||
| 50 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | ||
| 51 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 52 | </picker> | ||
| 53 | <text class="p13">右 (OS)</text> | ||
| 54 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | ||
| 55 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | ||
| 56 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 57 | </picker> | ||
| 58 | </view> | 57 | </view> |
| 58 | <text class="p13">左 (OD)</text> | ||
| 59 | <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> | ||
| 60 | <picker | ||
| 61 | @change="bindPickerChange01" | ||
| 62 | :value="pickerInfoList[0].nameIndex1" | ||
| 63 | :range="pickerInfoList[0].nameArray1" | ||
| 64 | > | ||
| 65 | <image src="../../static/detail-tabicon.png"></image> | ||
| 66 | </picker> | ||
| 67 | <text class="p13">右 (OS)</text> | ||
| 68 | <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> | ||
| 69 | <picker | ||
| 70 | @change="bindPickerChange02" | ||
| 71 | :value="pickerInfoList[0].nameIndex2" | ||
| 72 | :range="pickerInfoList[0].nameArray2" | ||
| 73 | > | ||
| 74 | <image src="../../static/detail-tabicon.png"></image> | ||
| 75 | </picker> | ||
| 76 | </view> | ||
| 59 | </view> | 77 | </view> |
| 60 | <view class="picker" > | 78 | <view class="picker"> |
| 61 | <view class="picker-choice"> | 79 | <view class="picker-choice"> |
| 62 | <view class="choice-left"> | 80 | <view class="choice-left"> |
| 63 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 81 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 64 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 82 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 65 | </view> | ||
| 66 | <text class="p13">左 (OD)</text> | ||
| 67 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | ||
| 68 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | ||
| 69 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 70 | </picker> | ||
| 71 | <text class="p13">右 (OS)</text> | ||
| 72 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | ||
| 73 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | ||
| 74 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 75 | </picker> | ||
| 76 | </view> | 83 | </view> |
| 84 | <text class="p13">左 (OD)</text> | ||
| 85 | <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> | ||
| 86 | <picker | ||
| 87 | @change="bindPickerChange11" | ||
| 88 | :value="pickerInfoList[1].nameIndex1" | ||
| 89 | :range="pickerInfoList[1].nameArray1" | ||
| 90 | > | ||
| 91 | <image src="../../static/detail-tabicon.png"></image> | ||
| 92 | </picker> | ||
| 93 | <text class="p13">右 (OS)</text> | ||
| 94 | <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> | ||
| 95 | <picker | ||
| 96 | @change="bindPickerChange12" | ||
| 97 | :value="pickerInfoList[1].nameIndex2" | ||
| 98 | :range="pickerInfoList[1].nameArray2" | ||
| 99 | > | ||
| 100 | <image src="../../static/detail-tabicon.png"></image> | ||
| 101 | </picker> | ||
| 102 | </view> | ||
| 77 | </view> | 103 | </view> |
| 78 | <view class="picker" > | 104 | <view class="picker"> |
| 79 | <view class="picker-choice"> | 105 | <view class="picker-choice"> |
| 80 | <view class="choice-left"> | 106 | <view class="choice-left"> |
| 81 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 107 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 82 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 108 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 83 | </view> | ||
| 84 | <text class="p13">左 (OD)</text> | ||
| 85 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | ||
| 86 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | ||
| 87 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 88 | </picker> | ||
| 89 | <text class="p13">右 (OS)</text> | ||
| 90 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | ||
| 91 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | ||
| 92 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 93 | </picker> | ||
| 94 | </view> | 109 | </view> |
| 110 | <text class="p13">左 (OD)</text> | ||
| 111 | <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> | ||
| 112 | <picker | ||
| 113 | @change="bindPickerChange21" | ||
| 114 | :value="pickerInfoList[2].nameIndex1" | ||
| 115 | :range="pickerInfoList[2].nameArray1" | ||
| 116 | > | ||
| 117 | <image src="../../static/detail-tabicon.png"></image> | ||
| 118 | </picker> | ||
| 119 | <text class="p13">右 (OS)</text> | ||
| 120 | <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> | ||
| 121 | <picker | ||
| 122 | @change="bindPickerChange22" | ||
| 123 | :value="pickerInfoList[2].nameIndex2" | ||
| 124 | :range="pickerInfoList[2].nameArray2" | ||
| 125 | > | ||
| 126 | <image src="../../static/detail-tabicon.png"></image> | ||
| 127 | </picker> | ||
| 128 | </view> | ||
| 95 | </view> | 129 | </view> |
| 96 | <view class="picker" > | 130 | <view class="picker"> |
| 97 | <view class="picker-choice"> | 131 | <view class="picker-choice"> |
| 98 | <view class="choice-left"> | 132 | <view class="choice-left"> |
| 99 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 133 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 100 | <text class="p12">{{pickerInfoList[3].nameE}}</text> | 134 | <text class="p12">{{pickerInfoList[3].nameE}}</text> |
| 101 | </view> | ||
| 102 | <text class="p13">左 (OD)</text> | ||
| 103 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | ||
| 104 | <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | ||
| 105 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 106 | </picker> | ||
| 107 | <text class="p13">右 (OS)</text> | ||
| 108 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | ||
| 109 | <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | ||
| 110 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 111 | </picker> | ||
| 112 | </view> | 135 | </view> |
| 136 | <text class="p13">左 (OD)</text> | ||
| 137 | <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> | ||
| 138 | <picker | ||
| 139 | @change="bindPickerChange31" | ||
| 140 | :value="pickerInfoList[3].nameIndex1" | ||
| 141 | :range="pickerInfoList[3].nameArray1" | ||
| 142 | > | ||
| 143 | <image src="../../static/detail-tabicon.png"></image> | ||
| 144 | </picker> | ||
| 145 | <text class="p13">右 (OS)</text> | ||
| 146 | <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> | ||
| 147 | <picker | ||
| 148 | @change="bindPickerChange32" | ||
| 149 | :value="pickerInfoList[3].nameIndex2" | ||
| 150 | :range="pickerInfoList[3].nameArray2" | ||
| 151 | > | ||
| 152 | <image src="../../static/detail-tabicon.png"></image> | ||
| 153 | </picker> | ||
| 154 | </view> | ||
| 113 | </view> | 155 | </view> |
| 114 | <view class="picker" > | 156 | <view class="picker"> |
| 115 | <view class="picker-choice"> | 157 | <view class="picker-choice"> |
| 116 | <view class="choice-left"> | 158 | <view class="choice-left"> |
| 117 | <text class="p11">{{pickerInfoList[4].nameC}}</text> | 159 | <text class="p11">{{pickerInfoList[4].nameC}}</text> |
| 118 | </view> | ||
| 119 | <text class="p13-date">年 (Y)</text> | ||
| 120 | <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | ||
| 121 | <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> | ||
| 122 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 123 | </picker> | ||
| 124 | <text class="p13-date">月 (M)</text> | ||
| 125 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | ||
| 126 | <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> | ||
| 127 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 128 | </picker> | ||
| 129 | <text class="p13-date">日 (D)</text> | ||
| 130 | <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | ||
| 131 | <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> | ||
| 132 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 133 | </picker> | ||
| 134 | </view> | 160 | </view> |
| 161 | <text class="p13-date">年 (Y)</text> | ||
| 162 | <text | ||
| 163 | class="p14" | ||
| 164 | style="width: 34px;" | ||
| 165 | >{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> | ||
| 166 | <picker | ||
| 167 | @change="bindPickerChange41" | ||
| 168 | :value="pickerInfoList[4].nameIndex1" | ||
| 169 | :range="pickerInfoList[4].nameArray1" | ||
| 170 | > | ||
| 171 | <image src="../../static/detail-tabicon.png"></image> | ||
| 172 | </picker> | ||
| 173 | <text class="p13-date">月 (M)</text> | ||
| 174 | <text | ||
| 175 | class="p14" | ||
| 176 | style="width: 30px;" | ||
| 177 | >{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> | ||
| 178 | <picker | ||
| 179 | @change="bindPickerChange42" | ||
| 180 | :value="pickerInfoList[4].nameIndex2" | ||
| 181 | :range="pickerInfoList[4].nameArray2" | ||
| 182 | > | ||
| 183 | <image src="../../static/detail-tabicon.png"></image> | ||
| 184 | </picker> | ||
| 185 | <text class="p13-date">日 (D)</text> | ||
| 186 | <text | ||
| 187 | class="p14" | ||
| 188 | style="width: 30px;" | ||
| 189 | >{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> | ||
| 190 | <picker | ||
| 191 | @change="bindPickerChange43" | ||
| 192 | :value="pickerInfoList[4].nameIndex3" | ||
| 193 | :range="pickerInfoList[4].nameArray3" | ||
| 194 | > | ||
| 195 | <image src="../../static/detail-tabicon.png"></image> | ||
| 196 | </picker> | ||
| 197 | </view> | ||
| 135 | </view> | 198 | </view> |
| 136 | <view class="confirm"> | 199 | <view class="confirm"> |
| 137 | <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> | 200 | <image |
| 138 | <text>确认以上输入信息来源于我的验光数据!</text> | 201 | :src="tablist.confirm ? tabicon[0] : tabicon[1]" |
| 202 | @click="changeConfirm" | ||
| 203 | ></image> | ||
| 204 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
| 139 | </view> | 205 | </view> |
| 140 | </view> | 206 | </view> |
| 141 | 207 | ||
| 142 | </template> | 208 | </template> |
| 143 | <template v-else> | 209 | <template v-else> |
| 144 | <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> | 210 | <view |
| 145 | <template v-if="item.nameC==='验光日期'"> | 211 | v-for="item in pickerInfoList" |
| 146 | <text class="names">{{item.nameC}}</text> | 212 | :key="item.key" |
| 147 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 213 | class="bodyBox" |
| 148 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 214 | > |
| 149 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 215 | <template v-if="item.nameC==='验光日期'"> |
| 150 | </template> | 216 | <text class="names">{{item.nameC}}</text> |
| 151 | <template v-else> | 217 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 152 | <template v-if="item.nameC==='度数'"> | 218 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 153 | <text style="display: inline;">*</text> | 219 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 154 | </template> | 220 | </template> |
| 155 | 221 | <template v-else> | |
| 156 | <text class="names">{{item.nameC}}</text> | 222 | <template v-if="item.nameC==='度数'"> |
| 157 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 223 | <text style="display: inline;">*</text> |
| 158 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 224 | </template> |
| 159 | </template> | 225 | |
| 160 | </view> | 226 | <text class="names">{{item.nameC}}</text> |
| 161 | </template> | 227 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 162 | </view> | 228 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 163 | </view> | 229 | </template> |
| 164 | <!-- 实用功能折叠框 --> | 230 | </view> |
| 165 | <MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse> | 231 | </template> |
| 166 | <MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse> | 232 | </view> |
| 167 | <MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse> | 233 | </view> |
| 168 | <MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse> | 234 | <!-- 实用功能折叠框 --> |
| 169 | <view | 235 | <MyCollapse |
| 170 | v-for="item in attrList" | 236 | :isOpenProps="funIsOpen" |
| 171 | :key="item.mid" | 237 | :funListProp="funList" |
| 172 | > | 238 | :funContentProp="funContent" |
| 173 | <MyCollapse | 239 | title="实用功能" |
| 174 | :funListProp="item" | 240 | ></MyCollapse> |
| 175 | :funContentProp="reContent" | 241 | <MyCollapse |
| 176 | :title="item.meta_name" | 242 | :isOpenProps="kindIsOpen" |
| 177 | /> | 243 | :funListProp="kindList1" |
| 178 | </view> | 244 | :funList2Prop="kindList2" |
| 179 | </view> | 245 | :funContentProp="kindContent" |
| 180 | <view class="submit">立即结算</view> | 246 | title="镜片种类" |
| 181 | </view> | 247 | ></MyCollapse> |
| 248 | <MyCollapse | ||
| 249 | :isOpenProps="maIsOpen" | ||
| 250 | :funListProp="maList1" | ||
| 251 | :funList2Prop="maList2" | ||
| 252 | :funContentProp="maContent" | ||
| 253 | title="材质选择" | ||
| 254 | ></MyCollapse> | ||
| 255 | <MyCollapse | ||
| 256 | :isOpenProps="reIsOpen" | ||
| 257 | :funListProp="reList1" | ||
| 258 | :funList2Prop="reList2" | ||
| 259 | :funContentProp="reContent" | ||
| 260 | title="折射率" | ||
| 261 | ></MyCollapse> | ||
| 262 | <view | ||
| 263 | v-for="item in attrList" | ||
| 264 | :key="item.mid" | ||
| 265 | > | ||
| 266 | <MyCollapse | ||
| 267 | :funListProp="item" | ||
| 268 | :funContentProp="reContent" | ||
| 269 | :title="item.meta_name" | ||
| 270 | /> | ||
| 271 | </view> | ||
| 272 | </view> | ||
| 273 | <view class="submit">立即结算</view> | ||
| 274 | </view> | ||
| 182 | </template> | 275 | </template> |
| 183 | 276 | ||
| 184 | <script> | 277 | <script> |
| 185 | import MyCollapse from './compoents/MyCollapse.vue' | 278 | import MyCollapse from './compoents/MyCollapse.vue' |
| 186 | import store from '@/store' | 279 | import store from '@/store' |
| 187 | 280 | ||
| 188 | export default { | 281 | export default { |
| 189 | components: { | 282 | components: { |
| 190 | MyCollapse | 283 | MyCollapse, |
| 191 | }, | 284 | }, |
| 192 | data() { | 285 | data() { |
| 193 | return { | 286 | return { |
| 194 | count:1, | 287 | count: 1, |
| 195 | disabled:false, | 288 | disabled: false, |
| 196 | price:180, | 289 | price: 180, |
| 197 | // 实用功能参数 | 290 | // 实用功能参数 |
| 198 | funIsOpen:true, // 默认myCollapse开启 | 291 | funIsOpen: true, // 默认myCollapse开启 |
| 199 | funList: [ | 292 | funList: [ |
| 200 | {"name":"防紫外线","isChioce": false,"key":1,"type": "fun"}, | 293 | { name: '防紫外线', isChioce: false, key: 1, type: 'fun' }, |
| 201 | {"name":"防蓝光","isChioce": false,"key":2,"type": "fun"}, | 294 | { name: '防蓝光', isChioce: false, key: 2, type: 'fun' }, |
| 202 | {"name":"智能变色","isChioce": false,"key":3,"type": "fun"}, | 295 | { name: '智能变色', isChioce: false, key: 3, type: 'fun' }, |
| 203 | {"name":"易清洁","isChioce": false,"key":4,"type": "fun"}, | 296 | { name: '易清洁', isChioce: false, key: 4, type: 'fun' }, |
| 204 | {"name":"防辐射","isChioce": false,"key":5,"type": "fun"}, | 297 | { name: '防辐射', isChioce: false, key: 5, type: 'fun' }, |
| 205 | {"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"}, | 298 | { name: '抗疲劳', isChioce: false, key: 6, type: 'fun' }, |
| 206 | ], | 299 | ], |
| 207 | funContent:[], | 300 | funContent: [], |
| 208 | // 镜片种类参数 | 301 | // 镜片种类参数 |
| 209 | kindIsOpen:true, | 302 | kindIsOpen: true, |
| 210 | kindList1: [ | 303 | kindList1: [ |
| 211 | {"name":"染色","isChioce":false,key:1,"type": "kind"}, | 304 | { name: '染色', isChioce: false, key: 1, type: 'kind' }, |
| 212 | {"name":"渐变","isChioce":false,key:2,"type": "kind"}, | 305 | { name: '渐变', isChioce: false, key: 2, type: 'kind' }, |
| 213 | ], | 306 | ], |
| 214 | kindList2: [ | 307 | kindList2: [ |
| 215 | {"name":"JB234759","isChioce":false,key:3,"type": "kind"}, | 308 | { name: 'JB234759', isChioce: false, key: 3, type: 'kind' }, |
| 216 | {"name":"JB234759","isChioce":false,key:4,"type": "kind"}, | 309 | { name: 'JB234759', isChioce: false, key: 4, type: 'kind' }, |
| 217 | {"name":"JB234759","isChioce":false,key:5,"type": "kind"}, | 310 | { name: 'JB234759', isChioce: false, key: 5, type: 'kind' }, |
| 218 | {"name":"JB234759","isChioce":false,key:6,"type": "kind"}, | 311 | { name: 'JB234759', isChioce: false, key: 6, type: 'kind' }, |
| 219 | {"name":"JB234759","isChioce":false,key:7,"type": "kind"}, | 312 | { name: 'JB234759', isChioce: false, key: 7, type: 'kind' }, |
| 220 | ], | 313 | ], |
| 221 | kindContent: [], | 314 | kindContent: [], |
| 222 | // 材质选择 | 315 | // 材质选择 |
| 223 | maIsOpen: true, | 316 | maIsOpen: true, |
| 224 | maList1: [ | 317 | maList1: [ |
| 225 | {"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true}, | 318 | { name: '树脂镜片', isChioce: false, key: 1, range: '0-300度', isRange: true }, |
| 226 | {"name":"特殊镜片","isChioce":false,key:2}, | 319 | { name: '特殊镜片', isChioce: false, key: 2 }, |
| 227 | ], | 320 | ], |
| 228 | maList2: [ | 321 | maList2: [ |
| 229 | {"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true}, | 322 | { name: '玻璃镜片', isChioce: false, key: 3, range: '300-1000度', isRange: true }, |
| 230 | {"name":"玻璃镜片","isChioce":false,key:4}, | 323 | { name: '玻璃镜片', isChioce: false, key: 4 }, |
| 231 | ], | 324 | ], |
| 232 | maContent: [], | 325 | maContent: [], |
| 233 | // 折射率参数 | 326 | // 折射率参数 |
| 234 | reIsOpen: true, | 327 | reIsOpen: true, |
| 235 | reList1: [ | 328 | reList1: [ |
| 236 | {"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true}, | 329 | { name: '1.56（推荐）', isChioce: false, key: 1, range: '0-300度', isRange: true }, |
| 237 | {"name":"1.60","isChioce":false,key:2}, | 330 | { name: '1.60', isChioce: false, key: 2 }, |
| 238 | ], | 331 | ], |
| 239 | reList2: [ | 332 | reList2: [ |
| 240 | {"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true}, | 333 | { name: '1.71（推荐）', isChioce: false, key: 3, range: '300-1000度', isRange: true }, |
| 241 | {"name":"1.67","isChioce":false,key:4}, | 334 | { name: '1.67', isChioce: false, key: 4 }, |
| 242 | {"name":"1.71","isChioce":false,key:5}, | 335 | { name: '1.71', isChioce: false, key: 5 }, |
| 243 | {"name":"1.74","isChioce":false,key:6}, | 336 | { name: '1.74', isChioce: false, key: 6 }, |
| 244 | ], | 337 | ], |
| 245 | reContent:[], | 338 | reContent: [], |
| 246 | // 验光参数 | 339 | // 验光参数 |
| 247 | opIsOpen:true, | 340 | opIsOpen: true, |
| 248 | tablist: { | 341 | tablist: { |
| 249 | // read: true, | 342 | // read: true, |
| 250 | // seeLong: false, | 343 | // seeLong: false, |
| 251 | confirm: false | 344 | confirm: false, |
| 252 | }, | 345 | }, |
| 253 | tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], | 346 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], |
| 254 | // 度数相关数据 | 347 | // 度数相关数据 |
| 255 | pickerInfoList:[ | 348 | pickerInfoList: [ |
| 256 | {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}, | 349 | { 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 }, |
| 257 | {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}, | 350 | { 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 }, |
| 258 | {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}, | 351 | { 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 }, |
| 259 | {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}, | 352 | { 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 }, |
| 260 | {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} | 353 | { 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 }, |
| 261 | ], | 354 | ], |
| 262 | |||
| 263 | } | ||
| 264 | }, | ||
| 265 | onLoad() { | ||
| 266 | store.dispatch('read/fetch', { | ||
| 267 | pid: 9, | ||
| 268 | }) | ||
| 269 | }, | ||
| 270 | computed: { | ||
| 271 | attrList() { | ||
| 272 | return this.$store.state.read.goodInfo.attrList; | ||
| 273 | } | ||
| 274 | }, | ||
| 275 | methods: { | ||
| 276 | counter(isadd){ | ||
| 277 | if(isadd){ | ||
| 278 | this.count++ | ||
| 279 | } else { | ||
| 280 | this.count <= 1? this.disabled = true:this.count-- | ||
| 281 | } | ||
| 282 | }, | ||
| 283 | myCollapseChange(isopen){ | ||
| 284 | // console.log(isopen) | ||
| 285 | this.opIsOpen = !isopen | ||
| 286 | }, | ||
| 287 | changeConfirm() { | ||
| 288 | this.tablist.confirm = !this.tablist.confirm | ||
| 289 | }, | ||
| 290 | |||
| 291 | bindPickerChange01: function(e) { | ||
| 292 | this.pickerInfoList[0].nameIndex1 = e.target.value | ||
| 293 | }, | ||
| 294 | bindPickerChange02: function(e) { | ||
| 295 | this.pickerInfoList[0].nameIndex2 = e.target.value | ||
| 296 | }, | ||
| 297 | |||
| 298 | bindPickerChange11: function(e) { | ||
| 299 | this.pickerInfoList[1].nameIndex1 = e.target.value | ||
| 300 | }, | ||
| 301 | bindPickerChange12: function(e) { | ||
| 302 | this.pickerInfoList[1].nameIndex2 = e.target.value | ||
| 303 | }, | ||
| 304 | |||
| 305 | bindPickerChange21: function(e) { | ||
| 306 | this.pickerInfoList[2].nameIndex1 = e.target.value | ||
| 307 | }, | ||
| 308 | bindPickerChange22: function(e) { | ||
| 309 | this.pickerInfoList[2].nameIndex2 = e.target.value | ||
| 310 | }, | ||
| 311 | |||
| 312 | bindPickerChange31: function(e) { | ||
| 313 | this.pickerInfoList[3].nameIndex1 = e.target.value | ||
| 314 | }, | ||
| 315 | bindPickerChange32: function(e) { | ||
| 316 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
| 317 | }, | ||
| 318 | |||
| 319 | bindPickerChange41: function(e) { | ||
| 320 | this.pickerInfoList[4].nameIndex1 = e.target.value | ||
| 321 | }, | ||
| 322 | bindPickerChange42: function(e) { | ||
| 323 | this.pickerInfoList[4].nameIndex2 = e.target.value | ||
| 324 | }, | ||
| 325 | bindPickerChange43: function(e) { | ||
| 326 | this.pickerInfoList[4].nameIndex3 = e.target.value | ||
| 327 | }, | ||
| 328 | } | ||
| 329 | } | ||
| 330 | </script> | ||
| 331 | 355 | ||
| 332 | <style lang="scss" scoped> | 356 | } |
| 333 | .content{ | 357 | }, |
| 334 | width: 100%; | 358 | onLoad() { |
| 335 | background-color: #F2F2F2; | 359 | store.dispatch('read/fetch', { |
| 336 | display: flex; | 360 | pid: 9, |
| 337 | flex-direction: column; | 361 | }) |
| 338 | align-items: center; | 362 | }, |
| 339 | } | 363 | computed: { |
| 340 | .choice-name { | 364 | attrList() { |
| 341 | border-bottom: 1px solid #CFCFCF; | 365 | return this.$store.state.read.goodInfo.attrList |
| 342 | } | 366 | }, |
| 343 | .goods-info{ | 367 | }, |
| 344 | width: 100%; | 368 | methods: { |
| 345 | height: 272rpx; | 369 | counter(isadd) { |
| 346 | box-sizing: border-box; | 370 | if (isadd) { |
| 347 | padding: 40rpx 40rpx 36rpx 36rpx; | 371 | this.count++ |
| 348 | margin: 36rpx 0 18rpx 0; | 372 | } else { |
| 349 | // margin-bottom: -18rpx; | 373 | this.count <= 1 ? this.disabled = true : this.count-- |
| 350 | // margin-top: -36rpx; | 374 | } |
| 351 | background: #FFFFFF; | 375 | }, |
| 352 | border-radius: 16rpx; | 376 | myCollapseChange(isopen) { |
| 353 | display: flex; | 377 | // console.log(isopen) |
| 354 | image{ | 378 | this.opIsOpen = !isopen |
| 355 | width: 94px; | 379 | }, |
| 356 | height: 94px; | 380 | changeConfirm() { |
| 357 | margin-right: 28rpx; | 381 | this.tablist.confirm = !this.tablist.confirm |
| 358 | } | 382 | }, |
| 359 | .box-right{ | ||
| 360 | width: 458rpx; | ||
| 361 | display: flex; | ||
| 362 | flex-direction: column; | ||
| 363 | align-items: flex-start; | ||
| 364 | justify-content: space-between; | ||
| 365 | .p1 { | ||
| 366 | // font-family: PingFangSC-Regular; | ||
| 367 | font-size: 14px; | ||
| 368 | color: #333333; | ||
| 369 | letter-spacing: -0.26px; | ||
| 370 | text-align: justify; | ||
| 371 | line-height: 18px; | ||
| 372 | } | ||
| 373 | .p2 { | ||
| 374 | // font-family: PingFangSC-Regular; | ||
| 375 | font-size: 10px; | ||
| 376 | color: #999999; | ||
| 377 | letter-spacing: -0.19px; | ||
| 378 | margin-top: -20rpx; | ||
| 379 | } | ||
| 380 | .priceBox{ | ||
| 381 | display: flex; | ||
| 382 | flex-direction: row; | ||
| 383 | justify-content: space-between; | ||
| 384 | width: 100%; | ||
| 385 | .price{ | ||
| 386 | color: #FF6B4A; | ||
| 387 | font-size: 28rpx; | ||
| 388 | } | ||
| 389 | .counter{ | ||
| 390 | display: flex; | ||
| 391 | flex-direction: row; | ||
| 392 | justify-content: space-between; | ||
| 393 | font-size: 28rpx; | ||
| 394 | color: #333333; | ||
| 395 | width: 122rpx; | ||
| 396 | .btn{ | ||
| 397 | display: flex; | ||
| 398 | justify-content: center; | ||
| 399 | line-height: 32rpx; | ||
| 400 | height: 32rpx; | ||
| 401 | width: 32rpx; | ||
| 402 | background-color: #F2F2F2; | ||
| 403 | color: #CFCFCF; | ||
| 404 | } | ||
| 405 | } | ||
| 406 | } | ||
| 407 | } | ||
| 408 | } | ||
| 409 | |||
| 410 | .goods-data{ | ||
| 411 | width: 100%; | ||
| 412 | box-sizing: border-box; | ||
| 413 | padding: 37rpx 40rpx 0 40rpx; | ||
| 414 | background: #FFFFFF; | ||
| 415 | border-radius: 12rpx; | ||
| 416 | margin-bottom: 92px; | ||
| 417 | .opCollapse{ | ||
| 418 | width: 100%; | ||
| 419 | padding-bottom: 28rpx; | ||
| 420 | margin-top: 7px; | ||
| 421 | border-bottom: 1px solid #E9E9E9; | ||
| 422 | .head{ | ||
| 423 | display: flex; | ||
| 424 | justify-content: space-between; | ||
| 425 | height: 24px; | ||
| 426 | // font-family: PingFangSC-Medium; | ||
| 427 | font-size: 16px; | ||
| 428 | color: #333333; | ||
| 429 | letter-spacing: -0.3px; | ||
| 430 | text-align: justify; | ||
| 431 | line-height: 24px; | ||
| 432 | margin-bottom: 18rpx; | ||
| 433 | .headRighted{ | ||
| 434 | width: 0; | ||
| 435 | height: 0; | ||
| 436 | border-left: 4px solid transparent; | ||
| 437 | border-right: 4px solid transparent; | ||
| 438 | border-bottom: 4px solid #CFCFCF; | ||
| 439 | transform: scaleY(-1); | ||
| 440 | margin-top: 10px; | ||
| 441 | } | ||
| 442 | .headMid{ | ||
| 443 | // font-family: PingFangSC-Regular; | ||
| 444 | font-size: 10px; | ||
| 445 | color: #999999; | ||
| 446 | letter-spacing: -0.19px; | ||
| 447 | margin-left: -120rpx; | ||
| 448 | } | ||
| 449 | .headRight{ | ||
| 450 | width: 0; | ||
| 451 | height: 0; | ||
| 452 | border-left: 4px solid transparent; | ||
| 453 | border-right: 4px solid transparent; | ||
| 454 | border-bottom: 4px solid #CFCFCF; | ||
| 455 | margin-top: 10px; | ||
| 456 | } | ||
| 457 | } | ||
| 458 | .body{ | ||
| 459 | // font-family: PingFangSC-Regular; | ||
| 460 | font-size: 12px; | ||
| 461 | color: #666666; | ||
| 462 | letter-spacing: 0; | ||
| 463 | .bodyBox{ | ||
| 464 | margin-top: 15px; | ||
| 465 | .names{ | ||
| 466 | // font-family: PingFangSC-Regular; | ||
| 467 | font-size: 12px; | ||
| 468 | color: #151515; | ||
| 469 | letter-spacing: 0; | ||
| 470 | text-align: justify; | ||
| 471 | line-height: 17px; | ||
| 472 | margin-left: 5px; | ||
| 473 | margin-right: 10px; | ||
| 474 | } | ||
| 475 | text{ | ||
| 476 | // font-family: PingFangSC-Regular; | ||
| 477 | font-size: 12px; | ||
| 478 | color: #666666; | ||
| 479 | letter-spacing: 0; | ||
| 480 | text-align: justify; | ||
| 481 | } | ||
| 482 | } | ||
| 483 | 383 | ||
| 484 | } | 384 | bindPickerChange01: function(e) { |
| 485 | } | 385 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 386 | }, | ||
| 387 | bindPickerChange02: function(e) { | ||
| 388 | this.pickerInfoList[0].nameIndex2 = e.target.value | ||
| 389 | }, | ||
| 486 | 390 | ||
| 487 | } | 391 | bindPickerChange11: function(e) { |
| 488 | 392 | this.pickerInfoList[1].nameIndex1 = e.target.value | |
| 489 | .goods-form { | 393 | }, |
| 490 | display: flex; | 394 | bindPickerChange12: function(e) { |
| 491 | flex-direction: column; | 395 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 492 | align-items: center; | 396 | }, |
| 493 | justify-content: center; | 397 | |
| 494 | background-color: #fff; | 398 | bindPickerChange21: function(e) { |
| 495 | width: 100%; | 399 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 496 | .p1 { | 400 | }, |
| 497 | font-size: 16px; | 401 | bindPickerChange22: function(e) { |
| 498 | color: #333333; | 402 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 499 | letter-spacing: -0.3px; | 403 | }, |
| 500 | text-align: justify; | 404 | |
| 501 | line-height: 24px; | 405 | bindPickerChange31: function(e) { |
| 502 | margin: 4px 0; | 406 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 503 | 407 | }, | |
| 408 | bindPickerChange32: function(e) { | ||
| 409 | this.pickerInfoList[3].nameIndex2 = e.target.value | ||
| 410 | }, | ||
| 411 | |||
| 412 | bindPickerChange41: function(e) { | ||
| 413 | this.pickerInfoList[4].nameIndex1 = e.target.value | ||
| 414 | }, | ||
| 415 | bindPickerChange42: function(e) { | ||
| 416 | this.pickerInfoList[4].nameIndex2 = e.target.value | ||
| 417 | }, | ||
| 418 | bindPickerChange43: function(e) { | ||
| 419 | this.pickerInfoList[4].nameIndex3 = e.target.value | ||
| 420 | }, | ||
| 421 | }, | ||
| 422 | } | ||
| 423 | </script> | ||
| 424 | |||
| 425 | <style lang="scss" scoped> | ||
| 426 | .content { | ||
| 427 | width: 100%; | ||
| 428 | background-color: #f2f2f2; | ||
| 429 | display: flex; | ||
| 430 | flex-direction: column; | ||
| 431 | align-items: center; | ||
| 432 | } | ||
| 433 | .choice-name { | ||
| 434 | border-bottom: 1px solid #cfcfcf; | ||
| 435 | } | ||
| 436 | .goods-info { | ||
| 437 | width: 100%; | ||
| 438 | height: 272rpx; | ||
| 439 | box-sizing: border-box; | ||
| 440 | padding: 40rpx 40rpx 36rpx 36rpx; |
src/pages/frameDetail/components/BottomSheet.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view | 3 | <view |
| 4 | class="sheet" | 4 | class="sheet" |
| 5 | :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" | 5 | :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" |
| 6 | @touchmove.stop.prevent="moveHandle" | 6 | @touchmove.stop.prevent="moveHandle" |
| 7 | @click="closeSheet()" | 7 | @click="closeSheet()" |
| 8 | > | 8 | > |
| 9 | <scroll-view | 9 | <scroll-view |
| 10 | scroll-y="true" | 10 | scroll-y="true" |
| 11 | class="sheetView" | 11 | class="sheetView" |
| 12 | :class="{sheetView_active:isShowBottom}" | 12 | :class="{sheetView_active:isShowBottom}" |
| 13 | @click.stop="stopEvent()" | 13 | @click.stop="stopEvent()" |
| 14 | > | 14 | > |
| 15 | <view class="content"> | 15 | <view class="content"> |
| 16 | <view class="goodInfo"> | 16 | <view class="goodInfo"> |
| 17 | <view class="imageWrap"> | 17 | <view class="imageWrap"> |
| 18 | <image | 18 | <image |
| 19 | :src="goodInfo.img_index_url" | 19 | :src="goodInfo.img_index_url" |
| 20 | mode="aspectFill" | 20 | mode="aspectFill" |
| 21 | style="width: 188rpx;height: 168rpx;" | 21 | style="width: 188rpx;height: 168rpx;" |
| 22 | ></image> | 22 | ></image> |
| 23 | </view>∂ | 23 | </view>∂ |
| 24 | <view class="infoRight"> | 24 | <view class="infoRight"> |
| 25 | <text class="goodName">{{goodInfo.p_name}}</text> | 25 | <text class="goodName">{{goodInfo.p_name}}</text> |
| 26 | <text class="remarks">支持7天无理由退货 顺丰发货</text> | 26 | <text class="remarks">支持7天无理由退货 顺丰发货</text> |
| 27 | <view class="priceBox"> | 27 | <view class="priceBox"> |
| 28 | <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view> | 28 | <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view> |
| 29 | <text>(限购{{maxCount}}副)</text> | 29 | <text>(限购{{maxCount}}副)</text> |
| 30 | <view class="counter"> | 30 | <view class="counter"> |
| 31 | <view | 31 | <view |
| 32 | class="btn" | 32 | class="btn" |
| 33 | disabled="this.addDisabled" | 33 | disabled="this.addDisabled" |
| 34 | type="default" | 34 | type="default" |
| 35 | @click="counter(false)" | 35 | @click="counter(false)" |
| 36 | >-</view> | 36 | >-</view> |
| 37 | <text>{{count}}</text> | 37 | <text>{{count}}</text> |
| 38 | <view | 38 | <view |
| 39 | class="btn" | 39 | class="btn" |
| 40 | disabled="this.desDisabled" | 40 | disabled="this.desDisabled" |
| 41 | type="default" | 41 | type="default" |
| 42 | @click="counter(true)" | 42 | @click="counter(true)" |
| 43 | >+</view> | 43 | >+</view> |
| 44 | </view> | 44 | </view> |
| 45 | </view> | 45 | </view> |
| 46 | </view> | 46 | </view> |
| 47 | </view> | 47 | </view> |
| 48 | <view class="peopleChoose"> | 48 | <view class="peopleChoose"> |
| 49 | <view class="title">选择使用人</view> | 49 | <view class="title">选择使用人</view> |
| 50 | <view class="loveList"> | 50 | <view class="loveList"> |
| 51 | <view | 51 | <view |
| 52 | class="peopleName" | 52 | class="peopleName" |
| 53 | v-for="(item,index) in loveList" | 53 | v-for="(item,index) in loveList" |
| 54 | :key='index' | 54 | :key='index' |
| 55 | :class="{ active2: loveCurrent === index }" | 55 | :class="{ active2: loveCurrent === index }" |
| 56 | @click="onClickLoveItem(index,item.name)" | 56 | @click="onClickLoveItem(index,item.name)" |
| 57 | > | 57 | > |
| 58 | {{item.name}} | 58 | {{item.name}} |
| 59 | </view> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | <view class="goods-data"> | 62 | <view class="goods-data"> |
| 63 | <view class="opCollapse"> | 63 | <view class="opCollapse"> |
| 64 | <view class="body"> | 64 | <view class="body"> |
| 65 | <template v-if="opIsOpen"> | 65 | <template v-if="opIsOpen"> |
| 66 | <view class="goods-form"> | 66 | <view class="goods-form"> |
| 67 | <view class="p1"> | 67 | <view class="p1"> |
| 68 | <image | 68 | <image |
| 69 | class="image2" | 69 | class="image2" |
| 70 | src="../../../static/img/myOpticsData/dataWrite.png" | 70 | src="../../../static/img/myOpticsData/dataWrite.png" |
| 71 | mode="aspectFit" | 71 | mode="aspectFit" |
| 72 | ></image> | 72 | ></image> |
| 73 | 填写验光数据 | 73 | 填写验光数据 |
| 74 | </view> | 74 | </view> |
| 75 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 75 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 76 | <view class="picker"> | 76 | <view class="picker"> |
| 77 | <view class="picker-choice"> | 77 | <view class="picker-choice"> |
| 78 | <view class="choice-left"> | 78 | <view class="choice-left"> |
| 79 | <text class="pd">验光单取名:</text> | 79 | <text class="pd">验光单取名:</text> |
| 80 | </view> | 80 | </view> |
| 81 | <input | 81 | <input |
| 82 | type="text" | 82 | type="text" |
| 83 | @blur="handleInput" | 83 | @blur="handleInput" |
| 84 | class="input" | 84 | class="input" |
| 85 | placeholder="请输入名称" | 85 | placeholder="请输入名称" |
| 86 | maxlength="20" | 86 | maxlength="20" |
| 87 | :value="name" | 87 | :value="name" |
| 88 | /> | 88 | /> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| 91 | <view class="picker"> | 91 | <view class="picker"> |
| 92 | <view class="picker-choice"> | 92 | <view class="picker-choice"> |
| 93 | <view class="choice-left"> | 93 | <view class="choice-left"> |
| 94 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | 94 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 95 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | 95 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 96 | </view> | 96 | </view> |
| 97 | <text class="p13">左 (OD)</text> | 97 | <text class="p13">左 (OD)</text> |
| 98 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> | 98 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> |
| 99 | <picker | 99 | <picker |
| 100 | @change="bindPickerChange01" | 100 | @change="bindPickerChange01" |
| 101 | :value="pickerInfoList[0].nameIndex1" | 101 | :value="pickerInfoList[0].nameIndex1" |
| 102 | :range="pickerInfoList[0].nameArray1" | 102 | :range="pickerInfoList[0].nameArray1" |
| 103 | > | 103 | > |
| 104 | <view class="p14"> | 104 | <view class="p14"> |
| 105 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} | 105 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} |
| 106 | <image src="../../../static/detail-tabicon.png"></image> | 106 | <image src="../../../static/detail-tabicon.png"></image> |
| 107 | </view> | 107 | </view> |
| 108 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 108 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 109 | </picker> | 109 | </picker> |
| 110 | <text class="p13">右 (OS)</text> | 110 | <text class="p13">右 (OS)</text> |
| 111 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> | 111 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> |
| 112 | <picker | 112 | <picker |
| 113 | @change="bindPickerChange02" | 113 | @change="bindPickerChange02" |
| 114 | :value="pickerInfoList[0].nameIndex2" | 114 | :value="pickerInfoList[0].nameIndex2" |
| 115 | :range="pickerInfoList[0].nameArray2" | 115 | :range="pickerInfoList[0].nameArray2" |
| 116 | > | 116 | > |
| 117 | <view class="p14"> | 117 | <view class="p14"> |
| 118 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} | 118 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} |
| 119 | <image src="../../../static/detail-tabicon.png"></image> | 119 | <image src="../../../static/detail-tabicon.png"></image> |
| 120 | </view> | 120 | </view> |
| 121 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 121 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 122 | </picker> | 122 | </picker> |
| 123 | </view> | 123 | </view> |
| 124 | </view> | 124 | </view> |
| 125 | <view class="picker"> | 125 | <view class="picker"> |
| 126 | <view class="picker-choice"> | 126 | <view class="picker-choice"> |
| 127 | <view class="choice-left"> | 127 | <view class="choice-left"> |
| 128 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 128 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 129 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 129 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 130 | </view> | 130 | </view> |
| 131 | <text class="p13">左 (OD)</text> | 131 | <text class="p13">左 (OD)</text> |
| 132 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> | 132 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> |
| 133 | <picker | 133 | <picker |
| 134 | @change="bindPickerChange11" | 134 | @change="bindPickerChange11" |
| 135 | :value="pickerInfoList[1].nameIndex1" | 135 | :value="pickerInfoList[1].nameIndex1" |
| 136 | :range="pickerInfoList[1].nameArray1" | 136 | :range="pickerInfoList[1].nameArray1" |
| 137 | > | 137 | > |
| 138 | <view class="p14"> | 138 | <view class="p14"> |
| 139 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} | 139 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} |
| 140 | <image src="../../../static/detail-tabicon.png"></image> | 140 | <image src="../../../static/detail-tabicon.png"></image> |
| 141 | </view> | 141 | </view> |
| 142 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 142 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 143 | </picker> | 143 | </picker> |
| 144 | <text class="p13">右 (OS)</text> | 144 | <text class="p13">右 (OS)</text> |
| 145 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> | 145 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> |
| 146 | <picker | 146 | <picker |
| 147 | @change="bindPickerChange12" | 147 | @change="bindPickerChange12" |
| 148 | :value="pickerInfoList[1].nameIndex2" | 148 | :value="pickerInfoList[1].nameIndex2" |
| 149 | :range="pickerInfoList[1].nameArray2" | 149 | :range="pickerInfoList[1].nameArray2" |
| 150 | > | 150 | > |
| 151 | <view class="p14"> | 151 | <view class="p14"> |
| 152 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} | 152 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} |
| 153 | <image src="../../../static/detail-tabicon.png"></image> | 153 | <image src="../../../static/detail-tabicon.png"></image> |
| 154 | </view> | 154 | </view> |
| 155 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 155 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 156 | </picker> | 156 | </picker> |
| 157 | </view> | 157 | </view> |
| 158 | </view> | 158 | </view> |
| 159 | <view class="picker"> | 159 | <view class="picker"> |
| 160 | <view class="picker-choice"> | 160 | <view class="picker-choice"> |
| 161 | <view class="choice-left"> | 161 | <view class="choice-left"> |
| 162 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 162 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 163 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 163 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 164 | </view> | 164 | </view> |
| 165 | <text class="p13">左 (OD)</text> | 165 | <text class="p13">左 (OD)</text> |
| 166 | <picker | 166 | <picker |
| 167 | @change="bindPickerChange21" | 167 | @change="bindPickerChange21" |
| 168 | :value="pickerInfoList[2].nameIndex1" | 168 | :value="pickerInfoList[2].nameIndex1" |
| 169 | :range="pickerInfoList[2].nameArray1" | 169 | :range="pickerInfoList[2].nameArray1" |
| 170 | > | 170 | > |
| 171 | <view class="p14"> | 171 | <view class="p14"> |
| 172 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} | 172 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} |
| 173 | <image src="../../../static/detail-tabicon.png"></image> | 173 | <image src="../../../static/detail-tabicon.png"></image> |
| 174 | </view> | 174 | </view> |
| 175 | </picker> | 175 | </picker> |
| 176 | <text class="p13">右 (OS)</text> | 176 | <text class="p13">右 (OS)</text> |
| 177 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> | 177 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> |
| 178 | <picker | 178 | <picker |
| 179 | @change="bindPickerChange22" | 179 | @change="bindPickerChange22" |
| 180 | :value="pickerInfoList[2].nameIndex2" | 180 | :value="pickerInfoList[2].nameIndex2" |
| 181 | :range="pickerInfoList[2].nameArray2" | 181 | :range="pickerInfoList[2].nameArray2" |
| 182 | > | 182 | > |
| 183 | <view class="p14"> | 183 | <view class="p14"> |
| 184 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} | 184 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} |
| 185 | <image src="../../../static/detail-tabicon.png"></image> | 185 | <image src="../../../static/detail-tabicon.png"></image> |
| 186 | </view> | 186 | </view> |
| 187 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> | 187 | <!-- <image src="../../../static/detail-tabicon.png" ></image> --> |
| 188 | </picker> | 188 | </picker> |
| 189 | </view> | 189 | </view> |
| 190 | </view> | 190 | </view> |
| 191 | <view class="picker"> | 191 | <view class="picker"> |
| 192 | <view class="picker-choice"> | 192 | <view class="picker-choice"> |
| 193 | <view class="choice-left"> | 193 | <view class="choice-left"> |
| 194 | <text class="pd">瞳距:</text> | 194 | <text class="pd">瞳距:</text> |
| 195 | </view> | 195 | </view> |
| 196 | <input | 196 | <input |
| 197 | type="digit" | 197 | type="digit" |
| 198 | @change="handleInputPd" | 198 | @change="handleInputPd" |
| 199 | class="input" | 199 | class="input" |
| 200 | placeholder="请输入瞳距,单位cm" | 200 | placeholder="请输入瞳距,单位cm" |
| 201 | maxlength="20" | 201 | maxlength="20" |
| 202 | :value="pd" | 202 | :value="pd" |
| 203 | /> | 203 | /> |
| 204 | </view> | 204 | </view> |
| 205 | </view> | 205 | </view> |
| 206 | <view class="picker"> | 206 | <view class="picker"> |
| 207 | <view class="picker-choice"> | 207 | <view class="picker-choice"> |
| 208 | <view class="choice-left"> | 208 | <view class="choice-left"> |
| 209 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 209 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 210 | </view> | 210 | </view> |
| 211 | <text class="p13-date">年 (Y)</text> | 211 | <text class="p13-date">年 (Y)</text> |
| 212 | <picker | 212 | <picker |
| 213 | @change="bindPickerChange41" | 213 | @change="bindPickerChange41" |
| 214 | :value="pickerInfoList[3].nameIndex1" | 214 | :value="pickerInfoList[3].nameIndex1" |
| 215 | :range="pickerInfoList[3].nameArray1" | 215 | :range="pickerInfoList[3].nameArray1" |
| 216 | > | 216 | > |
| 217 | <view | 217 | <view |
| 218 | class="p14" | 218 | class="p14" |
| 219 | style="width: 30px;" | 219 | style="width: 30px;" |
| 220 | > | 220 | > |
| 221 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} | 221 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} |
| 222 | <image src="../../../static/detail-tabicon.png"></image> | 222 | <image src="../../../static/detail-tabicon.png"></image> |
| 223 | </view> | 223 | </view> |
| 224 | </picker> | 224 | </picker> |
| 225 | <text class="p13-date">月 (M)</text> | 225 | <text class="p13-date">月 (M)</text> |
| 226 | <picker | 226 | <picker |
| 227 | @change="bindPickerChange42" | 227 | @change="bindPickerChange42" |
| 228 | :value="pickerInfoList[3].nameIndex2" | 228 | :value="pickerInfoList[3].nameIndex2" |
| 229 | :range="pickerInfoList[3].nameArray2" | 229 | :range="pickerInfoList[3].nameArray2" |
| 230 | > | 230 | > |
| 231 | <view | 231 | <view |
| 232 | class="p14" | 232 | class="p14" |
| 233 | style="width: 30px;" | 233 | style="width: 30px;" |
| 234 | > | 234 | > |
| 235 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} | 235 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} |
| 236 | <image src="../../../static/detail-tabicon.png"></image> | 236 | <image src="../../../static/detail-tabicon.png"></image> |
| 237 | </view> | 237 | </view> |
| 238 | </picker> | 238 | </picker> |
| 239 | <text class="p13-date">日 (D)</text> | 239 | <text class="p13-date">日 (D)</text> |
| 240 | <picker | 240 | <picker |
| 241 | @change="bindPickerChange43" | 241 | @change="bindPickerChange43" |
| 242 | :value="pickerInfoList[3].nameIndex3" | 242 | :value="pickerInfoList[3].nameIndex3" |
| 243 | :range="pickerInfoList[3].nameArray3" | 243 | :range="pickerInfoList[3].nameArray3" |
| 244 | > | 244 | > |
| 245 | <view | 245 | <view |
| 246 | class="p14" | 246 | class="p14" |
| 247 | style="width: 30px;" | 247 | style="width: 30px;" |
| 248 | > | 248 | > |
| 249 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} | 249 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} |
| 250 | <image src="../../../static/detail-tabicon.png"></image> | 250 | <image src="../../../static/detail-tabicon.png"></image> |
| 251 | </view> | 251 | </view> |
| 252 | </picker> | 252 | </picker> |
| 253 | </view> | 253 | </view> |
| 254 | </view> | 254 | </view> |
| 255 | <view class="confirm"> | 255 | <view class="confirm"> |
| 256 | <image | 256 | <image |
| 257 | class="image1" | 257 | class="image1" |
| 258 | :src="confirm ? tabicon[0] : tabicon[1]" | 258 | :src="confirm ? tabicon[0] : tabicon[1]" |
| 259 | @tap="changeConfirm" | 259 | @tap="changeConfirm" |
| 260 | ></image> | 260 | ></image> |
| 261 | <text>确认以上输入信息来源于我的验光数据!</text> | 261 | <text>确认以上输入信息来源于我的验光数据!</text> |
| 262 | </view> | 262 | </view> |
| 263 | </view> | 263 | </view> |
| 264 | </template> | 264 | </template> |
| 265 | <template v-else> | 265 | <template v-else> |
| 266 | <view | 266 | <view |
| 267 | v-for="item in pickerInfoList" | 267 | v-for="item in pickerInfoList" |
| 268 | :key="item.key" | 268 | :key="item.key" |
| 269 | class="bodyBox" | 269 | class="bodyBox" |
| 270 | > | 270 | > |
| 271 | <template v-if="item.nameC==='验光日期'"> | 271 | <template v-if="item.nameC==='验光日期'"> |
| 272 | <text class="names">{{item.nameC}}</text> | 272 | <text class="names">{{item.nameC}}</text> |
| 273 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 273 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 274 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 274 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 275 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 275 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 276 | </template> | 276 | </template> |
| 277 | <template v-else> | 277 | <template v-else> |
| 278 | <template v-if="item.nameC==='度数'"> | 278 | <template v-if="item.nameC==='度数'"> |
| 279 | <text style="display: inline;">*</text> | 279 | <text style="display: inline;">*</text> |
| 280 | </template> | 280 | </template> |
| 281 | 281 | ||
| 282 | <text class="names">{{item.nameC}}</text> | 282 | <text class="names">{{item.nameC}}</text> |
| 283 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 283 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 284 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 284 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 285 | </template> | 285 | </template> |
| 286 | </view> | 286 | </view> |
| 287 | </template> | 287 | </template> |
| 288 | </view> | 288 | </view> |
| 289 | </view> | 289 | </view> |
| 290 | </view> | 290 | </view> |
| 291 | <view class="choose"> | 291 | <view class="choose"> |
| 292 | <view | 292 | <view |
| 293 | class="chooseItem_1_content" | 293 | class="chooseItem_1_content" |
| 294 | v-for="(item,index) in attrList" | 294 | v-for="(item,index) in attrList" |
| 295 | :key="index" | 295 | :key="index" |
| 296 | > | 296 | > |
| 297 | <UniCollapse @change="changeShow(index)"> | 297 | <UniCollapse @change="changeShow(index)"> |
| 298 | <UniCollapseItem | 298 | <UniCollapseItem |
| 299 | :open="show[index]" | 299 | :open="show[index]" |
| 300 | :title="item.meta_name" | 300 | :title="item.meta_name" |
| 301 | showAnimation=false | 301 | showAnimation=false |
| 302 | > | 302 | > |
| 303 | <view class="chooseItem_1_content"> | 303 | <view class="chooseItem_1_content"> |
| 304 | <view class="itemsWrap"> | 304 | <view class="itemsWrap"> |
| 305 | <view | 305 | <view |
| 306 | class="item2" | 306 | class="item2" |
| 307 | v-for="(one,i) in item.attr" | 307 | v-for="(one,i) in item.attr" |
| 308 | :key="i" | 308 | :key="i" |
| 309 | :class="{ active2: current[index] === i }" | 309 | :class="{ active2: current[index] === i }" |
| 310 | @click="onClickItem(index, i)" | 310 | @click="onClickItem(index, i)" |
| 311 | >{{one.name}}</view> | 311 | >{{one.name}}</view> |
| 312 | </view> | 312 | </view> |
| 313 | </view> | 313 | </view> |
| 314 | </UniCollapseItem> | 314 | </UniCollapseItem> |
| 315 | </UniCollapse> | 315 | </UniCollapse> |
| 316 | <view | 316 | <view |
| 317 | class="chooseRes" | 317 | class="chooseRes" |
| 318 | v-show="!show[index]" | 318 | v-show="!show[index]" |
| 319 | >* {{attrList[index].attr[current[index]].name}}</view> | 319 | >* {{attrList[index].attr[current[index]].name}}</view> |
| 320 | </view> | 320 | </view> |
| 321 | </view> | 321 | </view> |
| 322 | <view | 322 | <view |
| 323 | class="button" | 323 | class="button" |
| 324 | @click.native="addCart" | 324 | @click.native="addCart" |
| 325 | v-if="isCart" | 325 | v-if="isCart" |
| 326 | > | 326 | > |
| 327 | 加入购物车 | 327 | 加入购物车 |
| 328 | </view> | 328 | </view> |
| 329 | <view | 329 | <view |
| 330 | class="button" | 330 | class="button" |
| 331 | @click="toComfirmOrder" | 331 | @click="toComfirmOrder" |
| 332 | v-else | 332 | v-else |
| 333 | > | 333 | > |
| 334 | 立即结算 | 334 | 立即结算 |
| 335 | </view> | 335 | </view> |
| 336 | </view> | 336 | </view> |
| 337 | </scroll-view> | 337 | </scroll-view> |
| 338 | </view> | 338 | </view> |
| 339 | </view> | 339 | </view> |
| 340 | </template> | 340 | </template> |
| 341 | <script> | 341 | <script> |
| 342 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 342 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 343 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 343 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 344 | import store from '@/store' | 344 | import store from '@/store' |
| 345 | export default { | 345 | export default { |
| 346 | components: { | 346 | components: { |
| 347 | UniCollapse, | 347 | UniCollapse, |
| 348 | UniCollapseItem, | 348 | UniCollapseItem, |
| 349 | }, | 349 | }, |
| 350 | props: { | 350 | props: { |
| 351 | isShowBottom: Boolean, | 351 | isShowBottom: Boolean, |
| 352 | pid: Number, | 352 | pid: Number, |
| 353 | goodInfo: Object, | 353 | goodInfo: Object, |
| 354 | isCart: Boolean, | 354 | isCart: Boolean, |
| 355 | }, | 355 | }, |
| 356 | data() { | 356 | data() { |
| 357 | return { | 357 | return { |
| 358 | loveCurrent: Number, | 358 | loveCurrent: Number, |
| 359 | count: 1, | 359 | count: 1, |
| 360 | // pid: 0, | 360 | // pid: 0, |
| 361 | maxCount: 20, | 361 | maxCount: 20, |
| 362 | dataName: '', // 验光数据人员名称 | 362 | dataName: '', // 验光数据人员名称 |
| 363 | isDataName: false, // 是否是已存在的人员数据 | 363 | isDataName: false, // 是否是已存在的人员数据 |
| 364 | dataConfirm: false, // 已确认所输入验光数据 | 364 | dataConfirm: false, // 已确认所输入验光数据 |
| 365 | opIsOpen: true, | 365 | opIsOpen: true, |
| 366 | addDisabled: false, | 366 | addDisabled: false, |
| 367 | desDisabled: false, | 367 | desDisabled: false, |
| 368 | current: [], | 368 | current: [], |
| 369 | show: [], | 369 | show: [], |
| 370 | checkedData: {}, | 370 | checkedData: {}, |
| 371 | // 度数相关数据 | 371 | // 度数相关数据 |
| 372 | pickerInfoList: [ | 372 | pickerInfoList: [ |
| 373 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, | 373 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, |
| 374 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, | 374 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, |
| 375 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, | 375 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, |
| 376 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, | 376 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, |
| 377 | ], | 377 | ], |
| 378 | confirm: false, // 用户是否确认 | 378 | confirm: false, // 用户是否确认 |
| 379 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], | 379 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], |
| 380 | name: '', | 380 | name: '', |
| 381 | oldname: '', // 用于判读用户是否改变名字 | 381 | oldname: '', // 用于判读用户是否改变名字 |
| 382 | pickerInfoChioce: { | 382 | pickerInfoChioce: { |
| 383 | leftSph: '', | 383 | leftSph: '', |
| 384 | rightSph: '', | 384 | rightSph: '', |
| 385 | leftCyl: '', | 385 | leftCyl: '', |
| 386 | rightCyl: '', | 386 | rightCyl: '', |
| 387 | leftAxi: '', | 387 | leftAxi: '', |
| 388 | rightAxi: '', | 388 | rightAxi: '', |
| 389 | time: { | 389 | time: { |
| 390 | year: 0, | 390 | year: 0, |
| 391 | month: 0, | 391 | month: 0, |
| 392 | day: 0, | 392 | day: 0, |
| 393 | }, | 393 | }, |
| 394 | }, | 394 | }, |
| 395 | pd: '', // 瞳距 | 395 | pd: '', // 瞳距 |
| 396 | oldpd: '', // 用于判断用户是否改变瞳距 | 396 | oldpd: '', // 用于判断用户是否改变瞳距 |
| 397 | kinds: 1, // kinds=1，提交为新增验光，2为修改 | 397 | kinds: 1, // kinds=1，提交为新增验光，2为修改 |
| 398 | mp_id: Number, | 398 | mp_id: Number, |
| 399 | } | 399 | } |
| 400 | }, | 400 | }, |
| 401 | computed: { | 401 | computed: { |
| 402 | loveList() { | 402 | loveList() { |
| 403 | // console.log('**********loveList',this.$store.state.myLoveList.loveList) | 403 | // console.log('**********loveList',this.$store.state.myLoveList.loveList) |
| 404 | return this.$store.state.myLoveList.loveList || [] | 404 | return this.$store.state.myLoveList.loveList || [] |
| 405 | }, | 405 | }, |
| 406 | attrList() { | 406 | attrList() { |
| 407 | const attrList = this.$store.state.read.goodInfo.attrList | 407 | const attrList = this.$store.state.read.goodInfo.attrList |
| 408 | if (attrList !== undefined) { | 408 | if (attrList !== undefined) { |
| 409 | return attrList | 409 | return attrList |
| 410 | } else { | 410 | } else { |
| 411 | return [] | 411 | return [] |
| 412 | } | 412 | } |
| 413 | }, | 413 | }, |
| 414 | skuList() { | 414 | skuList() { |
| 415 | return this.$store.state.read.goodInfo.skuList | 415 | return this.$store.state.read.goodInfo.skuList |
| 416 | }, | 416 | }, |
| 417 | mpList() { | 417 | mpList() { |
| 418 | return this.$store.state.myLoveList.loveList | 418 | return this.$store.state.myLoveList.loveList |
| 419 | }, | 419 | }, |
| 420 | }, | 420 | }, |
| 421 | created() { | 421 | created() { |
| 422 | const pid = this.pid | 422 | const pid = this.pid |
| 423 | console.log('this.goodInfo', this.goodInfo) | 423 | console.log('this.goodInfo', this.goodInfo) |
| 424 | const current = [] | 424 | const current = [] |
| 425 | const show = [] | 425 | const show = [] |
| 426 | for (let index = 0; index < this.attrList.length; index++) { | 426 | for (let index = 0; index < this.attrList.length; index++) { |
| 427 | current.push(0) | 427 | current.push(0) |
| 428 | show.push(true) | 428 | show.push(true) |
| 429 | } | 429 | } |
| 430 | this.current = current | 430 | this.current = current |
| 431 | this.show = show | 431 | this.show = show |
| 432 | 432 | ||
| 433 | // 获取关心的人列表 | 433 | // 获取关心的人列表 |
| 434 | store.dispatch('myLoveList/getLoveList', { | 434 | store.dispatch('myLoveList/getLoveList', { |
| 435 | uid: this.$store.state.user.userInfo.uid, | 435 | uid: this.$store.state.user.userInfo.uid, |
| 436 | }) | 436 | }) |
| 437 | // 初始化SPL、CYL、AXI的值 | 437 | // 初始化SPL、CYL、AXI的值 |
| 438 | for (let j = 0; j < 3; j++) { | 438 | for (let j = 0; j < 3; j++) { |
| 439 | for (let i = -12; i < 6; i++) { | 439 | for (let i = -12; i < 6; i++) { |
| 440 | this.pickerInfoList[j].nameArray1.push(i) | 440 | this.pickerInfoList[j].nameArray1.push(i) |
| 441 | this.pickerInfoList[j].nameArray1.push(i + 0.5) | 441 | this.pickerInfoList[j].nameArray1.push(i + 0.5) |
| 442 | this.pickerInfoList[j].nameArray2.push(i) | 442 | this.pickerInfoList[j].nameArray2.push(i) |
| 443 | this.pickerInfoList[j].nameArray2.push(i + 0.5) | 443 | this.pickerInfoList[j].nameArray2.push(i + 0.5) |
| 444 | if (i >= -6) { | 444 | if (i >= -6) { |
| 445 | this.pickerInfoList[j].nameArray1.push(i + 0.25) | 445 | this.pickerInfoList[j].nameArray1.push(i + 0.25) |
| 446 | this.pickerInfoList[j].nameArray1.push(i + 0.75) | 446 | this.pickerInfoList[j].nameArray1.push(i + 0.75) |
| 447 | this.pickerInfoList[j].nameArray2.push(i + 0.25) | 447 | this.pickerInfoList[j].nameArray2.push(i + 0.25) |
| 448 | this.pickerInfoList[j].nameArray2.push(i + 0.75) | 448 | this.pickerInfoList[j].nameArray2.push(i + 0.75) |
| 449 | } | 449 | } |
| 450 | if (i === 5) { | 450 | if (i === 5) { |
| 451 | this.pickerInfoList[j].nameArray1.push(i + 1) | 451 | this.pickerInfoList[j].nameArray1.push(i + 1) |
| 452 | this.pickerInfoList[j].nameArray2.push(i + 1) | 452 | this.pickerInfoList[j].nameArray2.push(i + 1) |
| 453 | } | 453 | } |
| 454 | } | 454 | } |
| 455 | } | 455 | } |
| 456 | // 初始化日期值 | 456 | // 初始化日期值 |
| 457 | for (let i = 1; i < 32; i++) { | 457 | for (let i = 1; i < 32; i++) { |
| 458 | this.pickerInfoList[3].nameArray3.push(i) | 458 | this.pickerInfoList[3].nameArray3.push(i) |
| 459 | } | 459 | } |
| 460 | // 初始化年份前后五年 | 460 | // 初始化年份前后五年 |
| 461 | const myDate = new Date() | 461 | const myDate = new Date() |
| 462 | const nowYear = myDate.getFullYear() | 462 | const nowYear = myDate.getFullYear() |
| 463 | for (let i = 0; i < 5; i++) { | 463 | for (let i = 0; i < 5; i++) { |
| 464 | this.pickerInfoList[3].nameArray1.push(nowYear - i) | 464 | this.pickerInfoList[3].nameArray1.push(nowYear - i) |
| 465 | } | 465 | } |
| 466 | }, | 466 | }, |
| 467 | name: 'bottomSheet', | 467 | name: 'bottomSheet', |
| 468 | methods: { | 468 | methods: { |
| 469 | addCart() { | 469 | addCart() { |
| 470 | const that = this | 470 | const that = this |
| 471 | const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name] | 471 | const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name] |
| 472 | const checkedSKU = [] | 472 | const checkedSKU = [] |
| 473 | let j | 473 | let j |
| 474 | for (let i = 0; i < that.current.length; i++) { | 474 | for (let i = 0; i < that.current.length; i++) { |
| 475 | checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) | 475 | checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) |
| 476 | // console.log('i', i, j, i !== this.current.length - 1) | 476 | // console.log('i', i, j, i !== this.current.length - 1) |
| 477 | if (i !== this.current.length - 1) { | 477 | if (i !== this.current.length - 1) { |
| 478 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | 478 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 |
| 479 | j = this.current[i] * this.attrList[1].attr.length | 479 | j = this.current[i] * this.attrList[1].attr.length |
| 480 | } else { | 480 | } else { |
| 481 | j += this.current[i] | 481 | j += this.current[i] |
| 482 | } | 482 | } |
| 483 | } | 483 | } |
| 484 | const sk_id = this.skuList[j].sk_id | 484 | const sk_id = this.skuList[j].sk_id |
| 485 | console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU) | 485 | console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU) |
| 486 | this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车 | 486 | this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车 |
| 487 | this.$emit('closeBottom')// 关闭弹窗 | 487 | this.$emit('closeBottom')// 关闭弹窗 |
| 488 | }, | 488 | }, |
| 489 | onClickLoveItem(index, name) { | 489 | onClickLoveItem(index, name) { |
| 490 | const loveList = this.loveList | 490 | const loveList = this.loveList |
| 491 | for (let index = 0; index < loveList.length; index++) { | 491 | for (let index = 0; index < loveList.length; index++) { |
| 492 | if (name === loveList[index].name && name !== this.name) { | 492 | if (name === loveList[index].name && name !== this.name) { |
| 493 | this.isDataName = true | 493 | this.isDataName = true |
| 494 | this.kinds = 2 | 494 | this.kinds = 2 |
| 495 | this.name = loveList[index].name | 495 | this.name = loveList[index].name |
| 496 | this.pd = loveList[index].pd | 496 | this.pd = loveList[index].pd |
| 497 | this.mp_id = loveList[index].mp_id | 497 | this.mp_id = loveList[index].mp_id |
| 498 | this.oldname = loveList[index].name | 498 | this.oldname = loveList[index].name |
| 499 | this.oldpd = loveList[index].pd | 499 | this.oldpd = loveList[index].pd |
| 500 | this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) | 500 | this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph) |
| 501 | this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) | 501 | this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph) |
| 502 | this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) | 502 | this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl) |
| 503 | this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) | 503 | this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl) |
| 504 | this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) | 504 | this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi) |
| 505 | this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) | 505 | this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi) |
| 506 | this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) | 506 | this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4)) |
| 507 | if (loveList[index].in_time.toString().slice(5, 6) === 0) { | 507 | if (loveList[index].in_time.toString().slice(5, 6) === 0) { |
| 508 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) | 508 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7)) |
| 509 | } else { | 509 | } else { |
| 510 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) | 510 | this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7)) |
| 511 | } | 511 | } |
| 512 | if (loveList[index].in_time.toString().slice(8, 9) === 0) { | 512 | if (loveList[index].in_time.toString().slice(8, 9) === 0) { |
| 513 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) | 513 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10)) |
| 514 | } else { | 514 | } else { |
| 515 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) | 515 | this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10)) |
| 516 | } | 516 | } |
| 517 | } | 517 | } |
| 518 | } | 518 | } |
| 519 | this.name = name | 519 | this.name = name |
| 520 | this.loveCurrent = index | 520 | this.loveCurrent = index |
| 521 | }, | 521 | }, |
| 522 | closeSheet() { | 522 | closeSheet() { |
| 523 | this.$emit('closeBottom') | 523 | this.$emit('closeBottom') |
| 524 | }, | 524 | }, |
| 525 | // @click.stop防止事件冒泡 | 525 | // @click.stop防止事件冒泡 |
| 526 | stopEvent() {}, | 526 | stopEvent() {}, |
| 527 | // 不让页面滚动 | 527 | // 不让页面滚动 |
| 528 | moveHandle() {}, | 528 | moveHandle() {}, |
| 529 | // picker相关功能 | 529 | // picker相关功能 |
| 530 | handleInput(e) { | 530 | handleInput(e) { |
| 531 | this.name = e.target.value | 531 | this.name = e.target.value |
| 532 | this.isDataName = false | 532 | this.isDataName = false |
| 533 | console.log('e---->', e) | 533 | console.log('e---->', e) |
| 534 | const mpList = this.mpList | 534 | const mpList = this.mpList |
| 535 | // console.log('mpList===>', mpList) | 535 | // console.log('mpList===>', mpList) |
| 536 | for (let index = 0; index < mpList.length; index++) { | 536 | for (let index = 0; index < mpList.length; index++) { |
| 537 | if (e.detail.value === mpList[index].name) { | 537 | if (e.detail.value === mpList[index].name) { |
| 538 | this.isDataName = true | 538 | this.isDataName = true |
| 539 | uni.showModal({ | 539 | uni.showModal({ |
| 540 | title: '提示', | 540 | title: '提示', |
| 541 | content: `是否填充已有的"${e.detail.value}"的数据`, | 541 | content: `是否填充已有的"${e.detail.value}"的数据`, |
| 542 | success: (res) => { | 542 | success: (res) => { |
| 543 | if (res.confirm) { | 543 | if (res.confirm) { |
| 544 | this.kinds = 2 | 544 | this.kinds = 2 |
| 545 | console.log('args===>', index) | 545 | console.log('args===>', index) |
| 546 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) | 546 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) |
| 547 | console.log('mpList===>', mpList) | 547 | console.log('mpList===>', mpList) |
| 548 | this.name = mpList[index].name | 548 | this.name = mpList[index].name |
| 549 | this.pd = mpList[index].pd | 549 | this.pd = mpList[index].pd |
| 550 | this.mp_id = mpList[index].mp_id | 550 | this.mp_id = mpList[index].mp_id |
| 551 | this.oldname = mpList[index].name | 551 | this.oldname = mpList[index].name |
| 552 | this.oldpd = mpList[index].pd | 552 | this.oldpd = mpList[index].pd |
| 553 | // 将kinds =2时的值传到该页面 | 553 | // 将kinds =2时的值传到该页面 |
| 554 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) | 554 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) |
| 555 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) | 555 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) |
| 556 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) | 556 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) |
| 557 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) | 557 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) |
| 558 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) | 558 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) |
| 559 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) | 559 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) |
| 560 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) | 560 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) |
| 561 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { | 561 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { |
| 562 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) | 562 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) |
| 563 | } else { | 563 | } else { |
| 564 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) | 564 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) |
| 565 | } | 565 | } |
| 566 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { | 566 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { |
| 567 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) | 567 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) |
| 568 | } else { | 568 | } else { |
| 569 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) | 569 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) |
| 570 | } | 570 | } |
| 571 | // this.checkedData = mpList[index] | 571 | // this.checkedData = mpList[index] |
| 572 | // console.log('checkedData', this.checkedData) | 572 | // console.log('checkedData', this.checkedData) |
| 573 | } else if (res.cancel) { | 573 | } else if (res.cancel) { |
| 574 | this.kinds = 2 | 574 | this.kinds = 2 |
| 575 | } | 575 | } |
| 576 | }, | 576 | }, |
| 577 | }) | 577 | }) |
| 578 | } | 578 | } |
| 579 | } | 579 | } |
| 580 | }, | 580 | }, |
| 581 | handleInputPd(e) { | 581 | handleInputPd(e) { |
| 582 | // 只能输入正浮点数或正数 | 582 | // 只能输入正浮点数或正数 |
| 583 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { | 583 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { |
| 584 | this.pd = e.target.value | 584 | this.pd = e.target.value |
| 585 | } else { | 585 | } else { |
| 586 | uni.showToast({ | 586 | uni.showToast({ |
| 587 | title: '请输入有效数据;示例:89', | 587 | title: '请输入有效数据;示例:89', |
| 588 | icon: 'none', | 588 | icon: 'none', |
| 589 | duration: 2000, | 589 | duration: 2000, |
| 590 | }) | 590 | }) |
| 591 | this.pd = '' | 591 | this.pd = '' |
| 592 | } | 592 | } |
| 593 | }, | 593 | }, |
| 594 | changeConfirm() { | 594 | changeConfirm() { |
| 595 | this.confirm = !this.confirm | 595 | this.confirm = !this.confirm |
| 596 | }, | 596 | }, |
| 597 | bindPickerChange01: function(e) { | 597 | bindPickerChange01: function(e) { |
| 598 | this.pickerInfoList[0].nameIndex1 = e.target.value | 598 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 599 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] | 599 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] |
| 600 | }, | 600 | }, |
| 601 | bindPickerChange02: function(e) { | 601 | bindPickerChange02: function(e) { |
| 602 | this.pickerInfoList[0].nameIndex2 = e.target.value | 602 | this.pickerInfoList[0].nameIndex2 = e.target.value |
| 603 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] | 603 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] |
| 604 | }, | 604 | }, |
| 605 | bindPickerChange11: function(e) { | 605 | bindPickerChange11: function(e) { |
| 606 | this.pickerInfoList[1].nameIndex1 = e.target.value | 606 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 607 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] | 607 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] |
| 608 | }, | 608 | }, |
| 609 | bindPickerChange12: function(e) { | 609 | bindPickerChange12: function(e) { |
| 610 | this.pickerInfoList[1].nameIndex2 = e.target.value | 610 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 611 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] | 611 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] |
| 612 | }, | 612 | }, |
| 613 | bindPickerChange21: function(e) { | 613 | bindPickerChange21: function(e) { |
| 614 | this.pickerInfoList[2].nameIndex1 = e.target.value | 614 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 615 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] | 615 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] |
| 616 | }, | 616 | }, |
| 617 | bindPickerChange22: function(e) { | 617 | bindPickerChange22: function(e) { |
| 618 | this.pickerInfoList[2].nameIndex2 = e.target.value | 618 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 619 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] | 619 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] |
| 620 | }, | 620 | }, |
| 621 | bindPickerChange41: function(e) { | 621 | bindPickerChange41: function(e) { |
| 622 | this.pickerInfoList[3].nameIndex1 = e.target.value | 622 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 623 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] | 623 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] |
| 624 | }, | 624 | }, |
| 625 | bindPickerChange42: function(e) { | 625 | bindPickerChange42: function(e) { |
| 626 | this.pickerInfoList[3].nameIndex2 = e.target.value | 626 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 627 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] | 627 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] |
| 628 | }, | 628 | }, |
| 629 | bindPickerChange43: function(e) { | 629 | bindPickerChange43: function(e) { |
| 630 | this.pickerInfoList[3].nameIndex3 = e.target.value | 630 | this.pickerInfoList[3].nameIndex3 = e.target.value |
| 631 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] | 631 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] |
| 632 | }, | 632 | }, |
| 633 | changeShow(num) { | 633 | changeShow(num) { |
| 634 | this.show[num] = !this.show[num] | 634 | this.show[num] = !this.show[num] |
| 635 | this.$forceUpdate() | 635 | this.$forceUpdate() |
| 636 | }, | 636 | }, |
| 637 | onClickItem(index, i) { | 637 | onClickItem(index, i) { |
| 638 | if (this.current[index] !== i) { | 638 | if (this.current[index] !== i) { |
| 639 | this.current[index] = i | 639 | this.current[index] = i |
| 640 | } | 640 | } |
| 641 | this.$forceUpdate() | 641 | this.$forceUpdate() |
| 642 | }, | 642 | }, |
| 643 | counter(isadd) { | 643 | counter(isadd) { |
| 644 | if (isadd) { | 644 | if (isadd) { |
| 645 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 645 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
| 646 | } else { | 646 | } else { |
| 647 | this.count <= 1 ? this.desDisabled = true : this.count-- | 647 | this.count <= 1 ? this.desDisabled = true : this.count-- |
| 648 | } | 648 | } |
| 649 | }, | 649 | }, |
| 650 | toComfirmOrder() { | 650 | toComfirmOrder() { |
| 651 | // 先处理验光部分的逻辑，如果ok在跳转 | 651 | // 先处理验光部分的逻辑，如果ok在跳转 |
| 652 | let flag = 0 | 652 | let flag = 0 |
| 653 | if (this.name === '') { | 653 | if (this.name === '') { |
| 654 | uni.showToast({ | 654 | uni.showToast({ |
| 655 | title: '请输入验光单取名', | 655 | title: '请输入验光单取名', |
| 656 | icon: 'none', | 656 | icon: 'none', |
| 657 | duration: 2000, | 657 | duration: 2000, |
| 658 | }) | 658 | }) |
| 659 | } else { | 659 | } else { |
| 660 | if (this.pd === '') { | 660 | if (this.pd === '') { |
| 661 | uni.showToast({ | 661 | uni.showToast({ |
| 662 | title: '请输入瞳距', | 662 | title: '请输入瞳距', |
| 663 | icon: 'none', | 663 | icon: 'none', |
| 664 | duration: 2000, | 664 | duration: 2000, |
| 665 | }) | 665 | }) |
| 666 | } else { | 666 | } else { |
| 667 | if (this.kinds === 1) { | 667 | if (this.kinds === 1) { |
| 668 | // 添加用户验光单 | 668 | // 添加用户验光单 |
| 669 | console.log('kinds====>', this.pickerInfoChioce.leftSph) | 669 | console.log('kinds====>', this.pickerInfoChioce.leftSph) |
| 670 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) | 670 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) |
| 671 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) | 671 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) |
| 672 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || | 672 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || |
| 673 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || | 673 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || |
| 674 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' | 674 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' |
| 675 | ) { | 675 | ) { |
| 676 | uni.showToast({ | 676 | uni.showToast({ |
| 677 | title: '请输入您的验光数据', | 677 | title: '请输入您的验光数据', |
| 678 | icon: 'none', | 678 | icon: 'none', |
| 679 | duration: 2000, | 679 | duration: 2000, |
| 680 | }) | 680 | }) |
| 681 | } else { | 681 | } else { |
| 682 | if (this.confirm) { | 682 | if (this.confirm) { |
| 683 | store.dispatch('myLoveList/addMylove', { | 683 | store.dispatch('myLoveList/addMylove', { |
| 684 | uid: this.$store.state.user.userInfo.uid, | 684 | uid: this.$store.state.user.userInfo.uid, |
| 685 | openid: this.$store.state.user.userInfo.openid, | 685 | openid: this.$store.state.user.userInfo.openid, |
| 686 | // mp_name: this.$store.state.user.userInfo.mp_name, | 686 | // mp_name: this.$store.state.user.userInfo.mp_name, |
| 687 | leftSph: this.pickerInfoChioce.leftSph, | 687 | leftSph: this.pickerInfoChioce.leftSph, |
| 688 | rightSph: this.pickerInfoChioce.rightSph, | 688 | rightSph: this.pickerInfoChioce.rightSph, |
| 689 | leftCyl: this.pickerInfoChioce.leftCyl, | 689 | leftCyl: this.pickerInfoChioce.leftCyl, |
| 690 | rightCyl: this.pickerInfoChioce.rightCyl, | 690 | rightCyl: this.pickerInfoChioce.rightCyl, |
| 691 | leftAxi: this.pickerInfoChioce.leftAxi, | 691 | leftAxi: this.pickerInfoChioce.leftAxi, |
| 692 | rightAxi: this.pickerInfoChioce.rightAxi, | 692 | rightAxi: this.pickerInfoChioce.rightAxi, |
| 693 | pd: this.pd, // 瞳距 | 693 | pd: this.pd, // 瞳距 |
| 694 | mp_name: this.name, | 694 | mp_name: this.name, |
| 695 | // time: this.pickerInfoChioce.time, | 695 | // time: this.pickerInfoChioce.time, |
| 696 | // img_url2: "http://localhost:8087/images/shop_1/1/", | 696 | // img_url2: "http://localhost:8087/images/shop_1/1/", |
| 697 | }).then(({ mp_id: mpId }) => { | 697 | }).then(({ mp_id: mpId }) => { |
| 698 | this.mp_id = mpId | 698 | this.mp_id = mpId |
| 699 | }) | 699 | }) |
| 700 | flag = 1 | 700 | flag = 1 |
| 701 | } else { | 701 | } else { |
| 702 | uni.showToast({ | 702 | uni.showToast({ |
| 703 | title: '请确认您的验光数据', | 703 | title: '请确认您的验光数据', |
| 704 | icon: 'none', | 704 | icon: 'none', |
| 705 | duration: 3000, | 705 | duration: 3000, |
| 706 | }) | 706 | }) |
| 707 | } | 707 | } |
| 708 | } | 708 | } |
| 709 | } | 709 | } |
| 710 | if (this.kinds === 2) { | 710 | if (this.kinds === 2) { |
| 711 | if (this.confirm) { | 711 | if (this.confirm) { |
| 712 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] | 712 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] |
| 713 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] | 713 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] |
| 714 | // let flag=0; | 714 | // let flag=0; |
| 715 | if (this.name !== this.oldname) { | 715 | if (this.name !== this.oldname) { |
| 716 | store.dispatch('myLoveList/updateMylove', { | 716 | store.dispatch('myLoveList/updateMylove', { |
| 717 | uid: this.$store.state.user.userInfo.uid, | 717 | uid: this.$store.state.user.userInfo.uid, |
| 718 | openid: this.$store.state.user.userInfo.openid, | 718 | openid: this.$store.state.user.userInfo.openid, |
| 719 | mp_id: this.mp_id, | 719 | mp_id: this.mp_id, |
| 720 | keyname: 'name', | 720 | keyname: 'name', |
| 721 | keyvalue: this.name, | 721 | keyvalue: this.name, |
| 722 | }) | 722 | }) |
| 723 | flag = 1 | 723 | flag = 1 |
| 724 | } | 724 | } |
| 725 | if (this.pd !== this.oldpd) { | 725 | if (this.pd !== this.oldpd) { |
| 726 | store.dispatch('myLoveList/updateMylove', { | 726 | store.dispatch('myLoveList/updateMylove', { |
| 727 | uid: this.$store.state.user.userInfo.uid, | 727 | uid: this.$store.state.user.userInfo.uid, |
| 728 | openid: this.$store.state.user.userInfo.openid, | 728 | openid: this.$store.state.user.userInfo.openid, |
| 729 | mp_id: this.mp_id, | 729 | mp_id: this.mp_id, |
| 730 | keyname: 'pd', | 730 | keyname: 'pd', |
| 731 | keyvalue: this.pd, | 731 | keyvalue: this.pd, |
| 732 | }) | 732 | }) |
| 733 | flag = 1 | 733 | flag = 1 |
| 734 | } | 734 | } |
| 735 | // 先验证是否输入有无空 | 735 | // 先验证是否输入有无空 |
| 736 | let q = true | 736 | let q = true |
| 737 | for (let k = 0; k < 3; k++) { | 737 | for (let k = 0; k < 3; k++) { |
| 738 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && | 738 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && |
| 739 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') | 739 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') |
| 740 | } | 740 | } |
| 741 | if (q) { | 741 | if (q) { |
| 742 | for (let j = 0; j < 3; j++) { | 742 | for (let j = 0; j < 3; j++) { |
| 743 | if (this.pickerInfoList[j].nameIndex1 !== 0) { | 743 | if (this.pickerInfoList[j].nameIndex1 !== 0) { |
| 744 | store.dispatch('myLoveList/updateMylove', { | 744 | store.dispatch('myLoveList/updateMylove', { |
| 745 | uid: this.$store.state.user.userInfo.uid, | 745 | uid: this.$store.state.user.userInfo.uid, |
| 746 | openid: this.$store.state.user.userInfo.openid, | 746 | openid: this.$store.state.user.userInfo.openid, |
| 747 | mp_id: this.mp_id, | 747 | mp_id: this.mp_id, |
| 748 | keyname: leftList[j], | 748 | keyname: leftList[j], |
| 749 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | 749 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], |
| 750 | }) | 750 | }) |
| 751 | } | 751 | } |
| 752 | if (this.pickerInfoList[j].nameIndex2 !== 0) { | 752 | if (this.pickerInfoList[j].nameIndex2 !== 0) { |
| 753 | store.dispatch('myLoveList/updateMylove', { | 753 | store.dispatch('myLoveList/updateMylove', { |
| 754 | uid: this.$store.state.user.userInfo.uid, | 754 | uid: this.$store.state.user.userInfo.uid, |
| 755 | openid: this.$store.state.user.userInfo.openid, | 755 | openid: this.$store.state.user.userInfo.openid, |
| 756 | mp_id: this.mp_id, | 756 | mp_id: this.mp_id, |
| 757 | keyname: rightList[j], | 757 | keyname: rightList[j], |
| 758 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], | 758 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], |
| 759 | }) | 759 | }) |
| 760 | } | 760 | } |
| 761 | flag = 1 | 761 | flag = 1 |
| 762 | } | 762 | } |
| 763 | } else { | 763 | } else { |
| 764 | flag = 0 | 764 | flag = 0 |
| 765 | uni.showToast({ | 765 | uni.showToast({ |
| 766 | title: '请输入您的验光数据', | 766 | title: '请输入您的验光数据', |
| 767 | icon: 'none', | 767 | icon: 'none', |
| 768 | duration: 2000, | 768 | duration: 2000, |
| 769 | }) | 769 | }) |
| 770 | } | 770 | } |
| 771 | if (flag !== 0) { | 771 | if (flag !== 0) { |
| 772 | store.dispatch('myLoveList/getLoveList', { | 772 | store.dispatch('myLoveList/getLoveList', { |
| 773 | uid: this.$store.state.user.userInfo.uid, | 773 | uid: this.$store.state.user.userInfo.uid, |
| 774 | }) | 774 | }) |
| 775 | } | 775 | } |
| 776 | } else { | 776 | } else { |
| 777 | uni.showToast({ | 777 | uni.showToast({ |
| 778 | title: '请确认您的验光数据', | 778 | title: '请确认您的验光数据', |
| 779 | icon: 'none', | 779 | icon: 'none', |
| 780 | duration: 3000, | 780 | duration: 3000, |
| 781 | }) | 781 | }) |
| 782 | } | 782 | } |
| 783 | } | 783 | } |
| 784 | } | 784 | } |
| 785 | } | 785 | } |
| 786 | if (flag !== 0) { | 786 | if (flag !== 0) { |
| 787 | // 如果数据验证无误，那么更新验光单的数据 | 787 | // 如果数据验证无误，那么更新验光单的数据 |
| 788 | store.dispatch('myLoveList/getLoveList', { | 788 | store.dispatch('myLoveList/getLoveList', { |
| 789 | uid: this.$store.state.user.userInfo.uid, | 789 | uid: this.$store.state.user.userInfo.uid, |
| 790 | }) | 790 | }) |
| 791 | let i = 0 | 791 | let i = 0 |
| 792 | // 判断出是哪一个sku被选中 | 792 | // 判断出是哪一个sku被选中 |
| 793 | for (let index = 0; index < this.current.length; index++) { | 793 | for (let index = 0; index < this.current.length; index++) { |
| 794 | console.log('index', index, i, index !== this.current.length - 1) | 794 | console.log('index', index, i, index !== this.current.length - 1) |
| 795 | if (index !== this.current.length - 1) { | 795 | if (index !== this.current.length - 1) { |
| 796 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | 796 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 |
| 797 | i = this.current[index] * this.attrList[1].attr.length | 797 | i = this.current[index] * this.attrList[1].attr.length |
| 798 | } else { | 798 | } else { |
| 799 | i += this.current[index] | 799 | i += this.current[index] |
| 800 | } | 800 | } |
| 801 | } | 801 | } |
| 802 | // 判断是否其输入的人员数据是否已存在 | 802 | // 判断是否其输入的人员数据是否已存在 |
| 803 | store.dispatch('order/saveParams', { | 803 | store.dispatch('order/saveParams', { |
| 804 | sk_id_arr: this.skuList[i], | 804 | sk_id_arr: this.skuList[i], |
| 805 | current: this.current, | 805 | current: this.current, |
| 806 | mp_id: this.mp_id, | 806 | mp_id: this.mp_id, |
| 807 | attrList: this.attrList, | 807 | attrList: this.attrList, |
| 808 | }) | 808 | }) |
| 809 | // 跳转到确认订单页面 | 809 | // 跳转到确认订单页面 |
| 810 | uni.navigateTo({ | 810 | uni.navigateTo({ |
| 811 | url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, | 811 | url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, |
| 812 | }) | 812 | }) |
| 813 | } | 813 | } |
| 814 | }, | 814 | }, |
| 815 | }, | 815 | }, |
| 816 | } | 816 | } |
| 817 | </script> | 817 | </script> |
| 818 | 818 | ||
| 819 | <style lang="scss"> | 819 | <style lang="scss"> |
| 820 | .content { | 820 | .content { |
| 821 | min-height: 100vh; | 821 | min-height: 100vh; |
| 822 | background-color: #f2f2f2; | 822 | background-color: #f2f2f2; |
| 823 | // padding-top: 20rpx; | 823 | // padding-top: 20rpx; |
| 824 | .goodInfo { | 824 | .goodInfo { |
| 825 | width: 100%; | 825 | width: 100%; |
| 826 | height: 272rpx; | 826 | height: 272rpx; |
| 827 | border-radius: 16rpx; | 827 | border-radius: 16rpx; |
| 828 | background-color: #ffffff; | 828 | background-color: #ffffff; |
| 829 | box-sizing: border-box; | 829 | box-sizing: border-box; |
| 830 | padding: 36rpx; | 830 | padding: 36rpx; |
| 831 | display: flex; | 831 | display: flex; |
| 832 | flex-direction: row; | 832 | flex-direction: row; |
| 833 | justify-content: flex-start; | 833 | justify-content: flex-start; |
| 834 | .imageWrap { | 834 | .imageWrap { |
| 835 | height: 188rpx; | 835 | height: 188rpx; |
| 836 | width: 188rpx; | 836 | width: 188rpx; |
| 837 | margin-right: 28rpx; | 837 | margin-right: 28rpx; |
| 838 | image { | 838 | image { |
| 839 | height: 188rpx; | 839 | height: 188rpx; |
| 840 | width: 188rpx; | 840 | width: 188rpx; |
| 841 | } | 841 | } |
| 842 | } | 842 | } |
| 843 | .infoRight { | 843 | .infoRight { |
| 844 | display: flex; | 844 | display: flex; |
| 845 | flex-direction: column; | 845 | flex-direction: column; |
| 846 | align-items: flex-start; | 846 | align-items: flex-start; |
| 847 | justify-content: space-between; | 847 | justify-content: space-between; |
| 848 | .goodName { | 848 | .goodName { |
| 849 | font-size: 28rpx; | 849 | font-size: 28rpx; |
| 850 | color: #333333; | 850 | color: #333333; |
| 851 | } | 851 | } |
| 852 | .remarks { | 852 | .remarks { |
| 853 | font-size: 20rpx; | 853 | font-size: 20rpx; |
| 854 | color: #999999; | 854 | color: #999999; |
| 855 | } | 855 | } |
| 856 | .priceBox { | 856 | .priceBox { |
| 857 | display: flex; | 857 | display: flex; |
| 858 | justify-content: space-between; | 858 | justify-content: space-between; |
| 859 | align-items: center; | 859 | align-items: center; |
| 860 | width: 100%; | 860 | width: 100%; |
| 861 | font-size: 14px; | 861 | font-size: 14px; |
| 862 | color: #999999; | 862 | color: #999999; |
| 863 | .price { | 863 | .price { |
| 864 | color: #ff6b4a; | 864 | color: #ff6b4a; |
| 865 | font-size: 28rpx; | 865 | font-size: 28rpx; |
| 866 | } | 866 | } |
| 867 | .counter { | 867 | .counter { |
| 868 | display: flex; | 868 | display: flex; |
| 869 | flex-direction: row; | 869 | flex-direction: row; |
| 870 | justify-content: space-between; | 870 | justify-content: space-between; |
| 871 | align-items: center; | 871 | align-items: center; |
| 872 | font-size: 28rpx; | 872 | font-size: 28rpx; |
| 873 | color: #333333; | 873 | color: #333333; |
| 874 | width: 122rpx; | 874 | width: 122rpx; |
| 875 | .btn { | 875 | .btn { |
| 876 | display: flex; | 876 | display: flex; |
| 877 | justify-content: center; | 877 | justify-content: center; |
| 878 | line-height: 32rpx; | 878 | line-height: 32rpx; |
| 879 | height: 32rpx; | 879 | height: 32rpx; |
| 880 | width: 32rpx; | 880 | width: 32rpx; |
| 881 | background-color: #f2f2f2; | 881 | background-color: #f2f2f2; |
| 882 | color: #cfcfcf; | 882 | color: #cfcfcf; |
| 883 | } | 883 | } |
| 884 | } | 884 | } |
| 885 | } | 885 | } |
| 886 | } | 886 | } |
| 887 | } | 887 | } |
| 888 | .peopleChoose { | 888 | .peopleChoose { |
| 889 | width: 100%; | 889 | width: 100%; |
| 890 | min-height: 200rpx; | 890 | min-height: 200rpx; |
| 891 | border-radius: 16rpx; | 891 | border-radius: 16rpx; |
| 892 | background-color: #ffffff; | 892 | background-color: #ffffff; |
| 893 | box-sizing: border-box; | 893 | box-sizing: border-box; |
| 894 | padding: 36rpx; | 894 | padding: 36rpx; |
| 895 | margin: 10px 0; | 895 | margin: 10px 0; |
| 896 | display: flex; | 896 | display: flex; |
| 897 | flex-direction: column; | 897 | flex-direction: column; |
| 898 | justify-content: flex-start; | 898 | justify-content: flex-start; |
| 899 | align-items: center; | 899 | align-items: center; |
| 900 | .title { | 900 | .title { |
| 901 | font-size: 16px; | 901 | font-size: 16px; |
| 902 | color: #333333; | 902 | color: #333333; |
| 903 | letter-spacing: -0.3px; | 903 | letter-spacing: -0.3px; |
| 904 | text-align: justify; | 904 | text-align: justify; |
| 905 | line-height: 24px; | 905 | line-height: 24px; |
| 906 | margin: 4px 0; | 906 | margin: 4px 0; |
| 907 | } | 907 | } |
| 908 | .loveList { | 908 | .loveList { |
| 909 | display: flex; | 909 | display: flex; |
| 910 | flex-direction: row; | 910 | flex-direction: row; |
| 911 | flex-wrap: wrap; | 911 | flex-wrap: wrap; |
| 912 | justify-content: flex-start; | 912 | justify-content: flex-start; |
| 913 | align-items: center; | 913 | align-items: center; |
| 914 | padding-top: 24rpx; | 914 | padding-top: 24rpx; |
| 915 | width: 100%; | 915 | width: 100%; |
| 916 | .peopleName { | 916 | .peopleName { |
| 917 | padding: 0 30rpx; | 917 | padding: 0 30rpx; |
| 918 | height: 60rpx; | 918 | height: 60rpx; |
| 919 | margin: 0 20rpx 20rpx 0; | 919 | margin: 0 20rpx 20rpx 0; |
| 920 | transition: all 0.3s; | 920 | transition: all 0.3s; |
| 921 | background: #f2f2f2; | 921 | background: #f2f2f2; |
| 922 | border-radius: 2px; | 922 | border-radius: 2px; |
| 923 | border-radius: 2px; | 923 | border-radius: 2px; |
| 924 | line-height: 60rpx; | 924 | line-height: 60rpx; |
| 925 | text-align: center; | 925 | text-align: center; |
| 926 | color: #666666; | 926 | color: #666666; |
| 927 | font-size: 12px; | 927 | font-size: 12px; |
| 928 | } | 928 | } |
| 929 | .active2 { | 929 | .active2 { |
| 930 | background: rgba(255, 107, 74, 0.15); | 930 | background: rgba(255, 107, 74, 0.15); |
| 931 | color: #ff6b4a; | 931 | color: #ff6b4a; |
| 932 | } | 932 | } |
| 933 | } | 933 | } |
| 934 | } | 934 | } |
| 935 | .goods-data { | 935 | .goods-data { |
| 936 | width: 100%; | 936 | width: 100%; |
| 937 | box-sizing: border-box; | 937 | box-sizing: border-box; |
| 938 | padding: 37rpx 40rpx 0 40rpx; | 938 | padding: 37rpx 40rpx 0 40rpx; |
| 939 | background: #ffffff; | 939 | background: #ffffff; |
| 940 | border-radius: 12rpx; | 940 | border-radius: 12rpx; |
| 941 | .opCollapse { | 941 | .opCollapse { |
| 942 | width: 100%; | 942 | width: 100%; |
| 943 | padding-bottom: 28rpx; | 943 | padding-bottom: 28rpx; |
| 944 | margin-top: 7px; | 944 | margin-top: 7px; |
| 945 | border-bottom: 1px solid #e9e9e9; | 945 | border-bottom: 1px solid #e9e9e9; |
| 946 | .head { | 946 | .head { |
| 947 | display: flex; | 947 | display: flex; |
| 948 | justify-content: space-between; | 948 | justify-content: space-between; |
| 949 | height: 24px; | 949 | height: 24px; |
| 950 | // font-family: PingFangSC-Medium; | 950 | // font-family: PingFangSC-Medium; |
| 951 | font-size: 16px; | 951 | font-size: 16px; |
| 952 | color: #333333; | 952 | color: #333333; |
| 953 | letter-spacing: -0.3px; | 953 | letter-spacing: -0.3px; |
| 954 | text-align: justify; | 954 | text-align: justify; |
| 955 | line-height: 24px; | 955 | line-height: 24px; |
| 956 | margin-bottom: 18rpx; | 956 | margin-bottom: 18rpx; |
| 957 | .headRighted { | 957 | .headRighted { |
| 958 | width: 0; | 958 | width: 0; |
| 959 | height: 0; | 959 | height: 0; |
| 960 | border-left: 4px solid transparent; | 960 | border-left: 4px solid transparent; |
| 961 | border-right: 4px solid transparent; | 961 | border-right: 4px solid transparent; |
| 962 | border-bottom: 4px solid #cfcfcf; | 962 | border-bottom: 4px solid #cfcfcf; |
| 963 | transform: scaleY(-1); | 963 | transform: scaleY(-1); |
| 964 | margin-top: 10px; | 964 | margin-top: 10px; |
| 965 | } | 965 | } |
| 966 | .headMid { | 966 | .headMid { |
| 967 | font-size: 10px; | 967 | font-size: 10px; |
| 968 | color: #999999; | 968 | color: #999999; |
| 969 | letter-spacing: -0.19px; | 969 | letter-spacing: -0.19px; |
| 970 | margin-left: -120rpx; | 970 | margin-left: -120rpx; |
| 971 | } | 971 | } |
| 972 | .headRight { | 972 | .headRight { |
| 973 | width: 0; | 973 | width: 0; |
| 974 | height: 0; | 974 | height: 0; |
| 975 | border-left: 4px solid transparent; | 975 | border-left: 4px solid transparent; |
| 976 | border-right: 4px solid transparent; | 976 | border-right: 4px solid transparent; |
| 977 | border-bottom: 4px solid #cfcfcf; | 977 | border-bottom: 4px solid #cfcfcf; |
| 978 | margin-top: 10px; | 978 | margin-top: 10px; |
| 979 | } | 979 | } |
| 980 | } | 980 | } |
| 981 | .body { | 981 | .body { |
| 982 | font-size: 12px; | 982 | font-size: 12px; |
| 983 | color: #666666; | 983 | color: #666666; |
| 984 | letter-spacing: 0; | 984 | letter-spacing: 0; |
| 985 | .bodyBox { | 985 | .bodyBox { |
| 986 | margin-top: 15px; | 986 | margin-top: 15px; |
| 987 | .names { | 987 | .names { |
| 988 | font-size: 12px; | 988 | font-size: 12px; |
| 989 | color: #151515; | 989 | color: #151515; |
| 990 | letter-spacing: 0; | 990 | letter-spacing: 0; |
| 991 | text-align: justify; | 991 | text-align: justify; |
| 992 | line-height: 17px; | 992 | line-height: 17px; |
| 993 | margin-left: 5px; | 993 | margin-left: 5px; |
| 994 | margin-right: 10px; | 994 | margin-right: 10px; |
| 995 | } | 995 | } |
| 996 | text { | 996 | text { |
| 997 | font-size: 12px; | 997 | font-size: 12px; |
| 998 | color: #666666; | 998 | color: #666666; |
| 999 | letter-spacing: 0; | 999 | letter-spacing: 0; |
| 1000 | text-align: justify; | 1000 | text-align: justify; |
| 1001 | } | 1001 | } |
| 1002 | } | 1002 | } |
| 1003 | } | 1003 | } |
| 1004 | .goods-form { | 1004 | .goods-form { |
| 1005 | display: flex; | 1005 | display: flex; |
| 1006 | flex-direction: column; | 1006 | flex-direction: column; |
| 1007 | align-items: center; | 1007 | align-items: center; |
| 1008 | justify-content: center; | 1008 | justify-content: center; |
| 1009 | background-color: #fff; | 1009 | background-color: #fff; |
| 1010 | width: 100%; | 1010 | width: 100%; |
| 1011 | padding: 40rpx 0; | 1011 | padding: 40rpx 0; |
| 1012 | .p1 { | 1012 | .p1 { |
| 1013 | font-size: 16px; | 1013 | font-size: 16px; |
| 1014 | color: #333333; | 1014 | color: #333333; |
| 1015 | letter-spacing: -0.3px; | 1015 | letter-spacing: -0.3px; |
| 1016 | text-align: justify; | 1016 | text-align: justify; |
| 1017 | line-height: 24px; | 1017 | line-height: 24px; |
| 1018 | margin: 4px 0; | 1018 | margin: 4px 0; |
| 1019 | } | 1019 | } |
| 1020 | .p2 { | 1020 | .p2 { |
| 1021 | font-size: 12px; | 1021 | font-size: 12px; |
| 1022 | color: #999999; | 1022 | color: #999999; |
| 1023 | letter-spacing: -0.23px; | 1023 | letter-spacing: -0.23px; |
| 1024 | margin-bottom: 32rpx; | 1024 | margin-bottom: 32rpx; |
| 1025 | } | 1025 | } |
| 1026 | .image2 { | 1026 | .image2 { |
| 1027 | width: 42rpx; | 1027 | width: 42rpx; |
| 1028 | height: 34rpx; | 1028 | height: 34rpx; |
| 1029 | margin-right: 12rpx; | 1029 | margin-right: 12rpx; |
| 1030 | } | 1030 | } |
| 1031 | .confirm { | 1031 | .confirm { |
| 1032 | display: flex; | 1032 | display: flex; |
| 1033 | align-items: center; | 1033 | align-items: center; |
| 1034 | font-size: 12px; | 1034 | font-size: 12px; |
| 1035 | color: #666666; | 1035 | color: #666666; |
| 1036 | letter-spacing: -0.23px; | 1036 | letter-spacing: -0.23px; |
| 1037 | width: 684rpx; | 1037 | width: 684rpx; |
| 1038 | .image1 { | 1038 | .image1 { |
| 1039 | margin-right: 25rpx; | 1039 | margin-right: 25rpx; |
| 1040 | width: 42rpx; | 1040 | width: 42rpx; |
| 1041 | height: 38rpx; | 1041 | height: 38rpx; |
| 1042 | } | 1042 | } |
| 1043 | } | 1043 | } |
| 1044 | .picker { | 1044 | .picker { |
| 1045 | display: flex; | 1045 | display: flex; |
| 1046 | flex-direction: column; | 1046 | flex-direction: column; |
| 1047 | justify-content: center; | 1047 | justify-content: center; |
| 1048 | align-items: center; | 1048 | align-items: center; |
| 1049 | width: 100%; | 1049 | width: 100%; |
| 1050 | 1050 | ||
| 1051 | .picker-choice { | 1051 | .picker-choice { |
| 1052 | display: flex; | 1052 | display: flex; |
| 1053 | width: 684rpx; | 1053 | width: 684rpx; |
| 1054 | align-items: center; | 1054 | align-items: center; |
| 1055 | margin-bottom: 40rpx; | 1055 | margin-bottom: 40rpx; |
| 1056 | .input { | 1056 | .input { |
| 1057 | border-bottom: 1px solid #cfcfcf; | 1057 | border-bottom: 1px solid #cfcfcf; |
| 1058 | height: 40rpx; | 1058 | height: 40rpx; |
| 1059 | } | 1059 | } |
| 1060 | .choice-left { | 1060 | .choice-left { |
| 1061 | width: 210rpx; | 1061 | width: 210rpx; |
| 1062 | .pd { | 1062 | .pd { |
| 1063 | font-size: 14px; | 1063 | font-size: 14px; |
| 1064 | color: #333333; | 1064 | color: #333333; |
| 1065 | letter-spacing: -0.26px; | 1065 | letter-spacing: -0.26px; |
| 1066 | text-align: justify; | 1066 | text-align: justify; |
| 1067 | line-height: 24px; | 1067 | line-height: 24px; |
| 1068 | margin-right: 44rpx; | 1068 | margin-right: 44rpx; |
| 1069 | } | 1069 | } |
| 1070 | .p11 { | 1070 | .p11 { |
| 1071 | font-size: 14px; | 1071 | font-size: 14px; |
| 1072 | color: #333333; | 1072 | color: #333333; |
| 1073 | letter-spacing: -0.26px; | 1073 | letter-spacing: -0.26px; |
| 1074 | text-align: justify; | 1074 | text-align: justify; |
| 1075 | line-height: 24px; | 1075 | line-height: 24px; |
| 1076 | // margin-right: 10px; | 1076 | // margin-right: 10px; |
| 1077 | } | 1077 | } |
| 1078 | .p12 { | 1078 | .p12 { |
| 1079 | font-size: 10px; | 1079 | font-size: 10px; |
| 1080 | color: #3f3f3f; | 1080 | color: #3f3f3f; |
| 1081 | letter-spacing: -0.19px; | 1081 | letter-spacing: -0.19px; |
| 1082 | text-align: justify; | 1082 | text-align: justify; |
| 1083 | line-height: 24px; | 1083 | line-height: 24px; |
| 1084 | } | 1084 | } |
| 1085 | } | 1085 | } |
| 1086 | .p13 { | 1086 | .p13 { |
| 1087 | font-size: 10px; | 1087 | font-size: 10px; |
| 1088 | color: #999999; | 1088 | color: #999999; |
| 1089 | letter-spacing: -0.19px; | 1089 | letter-spacing: -0.19px; |
| 1090 | margin-right: 10px; | 1090 | margin-right: 10px; |
| 1091 | } | 1091 | } |
| 1092 | .p13-date { | 1092 | .p13-date { |
| 1093 | font-size: 10px; | 1093 | font-size: 10px; |
| 1094 | color: #999999; | 1094 | color: #999999; |
| 1095 | letter-spacing: -0.19px; | 1095 | letter-spacing: -0.19px; |
| 1096 | margin-right: 5px; | 1096 | margin-right: 5px; |
| 1097 | } | 1097 | } |
| 1098 | picker { | 1098 | picker { |
| 1099 | width: 144rpx; | 1099 | width: 144rpx; |
| 1100 | height: 40rpx; | 1100 | height: 40rpx; |
| 1101 | display: flex; | 1101 | display: flex; |
| 1102 | position: relative; | 1102 | position: relative; |
| 1103 | .p14 { | 1103 | .p14 { |
| 1104 | font-size: 14px; | 1104 | font-size: 14px; |
| 1105 | color: #666666; | 1105 | color: #666666; |
| 1106 | letter-spacing: -0.26px; | 1106 | letter-spacing: -0.26px; |
| 1107 | text-align: center; | 1107 | text-align: center; |
| 1108 | width: 124rpx; | 1108 | width: 124rpx; |
| 1109 | border-bottom: 1px solid #cfcfcf; | 1109 | border-bottom: 1px solid #cfcfcf; |
| 1110 | height: 38rpx; | 1110 | height: 38rpx; |
| 1111 | } | 1111 | } |
| 1112 | image { | 1112 | image { |
| 1113 | width: 20rpx; | 1113 | width: 20rpx; |
| 1114 | height: 20rpx; | 1114 | height: 20rpx; |
| 1115 | position: absolute; | 1115 | position: absolute; |
| 1116 | right: 20rpx; | 1116 | right: 20rpx; |
| 1117 | top: 8rpx; | 1117 | top: 8rpx; |
| 1118 | } | 1118 | } |
| 1119 | } | 1119 | } |
| 1120 | } | 1120 | } |
| 1121 | } | 1121 | } |
| 1122 | } | 1122 | } |
| 1123 | } | 1123 | } |
| 1124 | } | 1124 | } |
| 1125 | .choose { | 1125 | .choose { |
| 1126 | width: 100%; | 1126 | width: 100%; |
| 1127 | background: #ffffff; | 1127 | background: #ffffff; |
| 1128 | border-radius: 12rpx; | 1128 | border-radius: 12rpx; |
| 1129 | margin-top: 20rpx; | 1129 | margin-top: 20rpx; |
| 1130 | padding: 40rpx 40rpx 112rpx 40rpx; | 1130 | padding: 40rpx 40rpx 112rpx 40rpx; |
| 1131 | box-sizing: border-box; | 1131 | box-sizing: border-box; |
| 1132 | .chooseItem { | 1132 | .chooseItem { |
| 1133 | width: 100%; | 1133 | width: 100%; |
| 1134 | padding-bottom: 32rpx; | 1134 | padding-bottom: 32rpx; |
| 1135 | border-bottom: 1px solid #e9e9e9; | 1135 | border-bottom: 1px solid #e9e9e9; |
| 1136 | margin-bottom: 28rpx; | 1136 | margin-bottom: 28rpx; |
| 1137 | } | 1137 | } |
| 1138 | .chooseRes { | 1138 | .chooseRes { |
| 1139 | font-size: 12px; | 1139 | font-size: 12px; |
| 1140 | color: #666666; | 1140 | color: #666666; |
| 1141 | } | 1141 | } |
| 1142 | .itemsWrap { | 1142 | .itemsWrap { |
| 1143 | display: flex; | 1143 | display: flex; |
| 1144 | flex-direction: row; | 1144 | flex-direction: row; |
| 1145 | flex-wrap: wrap; | 1145 | flex-wrap: wrap; |
| 1146 | justify-content: flex-start; | 1146 | justify-content: flex-start; |
| 1147 | align-items: center; | 1147 | align-items: center; |
| 1148 | padding-top: 24rpx; | 1148 | padding-top: 24rpx; |
| 1149 | .item1 { | 1149 | .item1 { |
| 1150 | width: 64rpx; | 1150 | width: 64rpx; |
| 1151 | height: 64rpx; | 1151 | height: 64rpx; |
| 1152 | border-radius: 32rpx; | 1152 | border-radius: 32rpx; |
| 1153 | margin: 0 36rpx 24rpx 0; | 1153 | margin: 0 36rpx 24rpx 0; |
| 1154 | transition: all 0.3s; | 1154 | transition: all 0.3s; |
| 1155 | border: 1px solid #ffffff; | 1155 | border: 1px solid #ffffff; |
| 1156 | } | 1156 | } |
| 1157 | .item2 { | 1157 | .item2 { |
| 1158 | // width: 100rpx; | 1158 | // width: 100rpx; |
| 1159 | padding: 0 30rpx; | 1159 | padding: 0 30rpx; |
| 1160 | height: 60rpx; | 1160 | height: 60rpx; |
| 1161 | margin: 0 20rpx 20rpx 0; | 1161 | margin: 0 20rpx 20rpx 0; |
| 1162 | transition: all 0.3s; | 1162 | transition: all 0.3s; |
| 1163 | background: #f2f2f2; | 1163 | background: #f2f2f2; |
| 1164 | border-radius: 2px; | 1164 | border-radius: 2px; |
| 1165 | border-radius: 2px; | 1165 | border-radius: 2px; |
| 1166 | line-height: 60rpx; | 1166 | line-height: 60rpx; |
| 1167 | text-align: center; | 1167 | text-align: center; |
| 1168 | color: #666666; | 1168 | color: #666666; |
| 1169 | font-size: 12px; | 1169 | font-size: 12px; |
| 1170 | } | 1170 | } |
| 1171 | .active1 { | 1171 | .active1 { |
| 1172 | opacity: 0.7; | 1172 | opacity: 0.7; |
| 1173 | border: 1px solid #ff6b4a; | 1173 | border: 1px solid #ff6b4a; |
| 1174 | } | 1174 | } |
| 1175 | .active2 { | 1175 | .active2 { |
| 1176 | background: rgba(255, 107, 74, 0.15); | 1176 | background: rgba(255, 107, 74, 0.15); |
| 1177 | color: #ff6b4a; | 1177 | color: #ff6b4a; |
| 1178 | } | 1178 | } |
| 1179 | } | 1179 | } |
| 1180 | } | 1180 | } |
| 1181 | .button { | 1181 | .button { |
| 1182 | position: fixed; | 1182 | position: fixed; |
| 1183 | z-index: 10; | 1183 | z-index: 10; |
| 1184 | width: 100%; | 1184 | width: 100%; |
| 1185 | height: 112rpx; | 1185 | height: 112rpx; |
| 1186 | background-color: #ff6b4a; | 1186 | background-color: #ff6b4a; |
| 1187 | font-size: 16px; | 1187 | font-size: 16px; |
| 1188 | color: #ffffff; | 1188 | color: #ffffff; |
| 1189 | line-height: 112rpx; | 1189 | line-height: 112rpx; |
| 1190 | text-align: center; | 1190 | text-align: center; |
| 1191 | |||
| 1192 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 1193 | /* #ifndef APP-NVUE */ | ||
| 1194 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 1195 | padding-bottom: env(safe-area-inset-bottom); | ||
| 1196 | /* #endif */ | ||
| 1191 | // position: absolute; | 1197 | // position: absolute; |
| 1192 | bottom: 0; | 1198 | bottom: 0; |
| 1193 | left: 0; | 1199 | left: 0; |
| 1194 | } | 1200 | } |
| 1195 | } | 1201 | } |
| 1196 | /* sheet弹窗 */ | 1202 | /* sheet弹窗 */ |
| 1197 | .sheet { | 1203 | .sheet { |
| 1198 | width: 100%; | 1204 | width: 100%; |
| 1199 | height: 100%; | 1205 | height: 100%; |
| 1200 | position: fixed; | 1206 | position: fixed; |
| 1201 | top: 150%; | 1207 | top: 150%; |
| 1202 | left: 0upx; | 1208 | left: 0upx; |
| 1203 | bottom: 0upx; | 1209 | bottom: 0upx; |
| 1204 | right: 0upx; | 1210 | right: 0upx; |
| 1205 | background: rgba(0, 0, 0, 0.3); | 1211 | background: rgba(0, 0, 0, 0.3); |
| 1206 | z-index: 10000; | 1212 | z-index: 10000; |
| 1207 | } | 1213 | } |
| 1208 | 1214 | ||
| 1209 | /* 显示时候的动画默认0.5s */ | 1215 | /* 显示时候的动画默认0.5s */ |
| 1210 | .sheetView { | 1216 | .sheetView { |
| 1211 | width: 100%; | 1217 | width: 100%; |
| 1212 | height: 0upx; | 1218 | height: 0upx; |
| 1213 | position: absolute; | 1219 | position: absolute; |
| 1214 | bottom: 0upx; | 1220 | bottom: 0upx; |
| 1215 | background: white; | 1221 | background: white; |
| 1216 | z-index: 10001; | 1222 | z-index: 10001; |
| 1217 | transition: all 0.5s; | 1223 | transition: all 0.5s; |
| 1218 | } | 1224 | } |
| 1219 | .sheetShow { | 1225 | .sheetShow { |
| 1220 | top: 0upx !important; | 1226 | top: 0upx !important; |
| 1221 | } | 1227 | } |
| 1222 | /* 关闭时的动画，时间自己可以设置0.5s*/ | 1228 | /* 关闭时的动画，时间自己可以设置0.5s*/ |
| 1223 | .sheeHide { | 1229 | .sheeHide { |
| 1224 | top: 120% !important; | 1230 | top: 120% !important; |
| 1225 | transition: all 0.5s; | 1231 | transition: all 0.5s; |
| 1226 | } | 1232 | } |
| 1227 | 1233 | ||
| 1228 | /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ | 1234 | /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ |
| 1229 | .sheetView_active { | 1235 | .sheetView_active { |
| 1230 | height: 942upx; | 1236 | height: 942upx; |
| 1231 | } | 1237 | } |
| 1232 | </style> | 1238 | </style> |
| 1233 | 1239 |
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | <!-- 订单待付款 待收货 --> | 1 | <!-- 订单待付款 待收货 --> |
| 2 | <template> | 2 | <template> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view | 4 | <view |
| 5 | class="headerBanner" | 5 | class="headerBanner" |
| 6 | v-if="status == '2'||'3'" | 6 | v-if="status == '2'||'3'" |
| 7 | > | 7 | > |
| 8 | <view class="bannerLeft"> | 8 | <view class="bannerLeft"> |
| 9 | <view class="T1">订单已完成</view> | 9 | <view class="T1">订单已完成</view> |
| 10 | </view> | 10 | </view> |
| 11 | <image | 11 | <image |
| 12 | src="../../static/car.png" | 12 | src="../../static/car.png" |
| 13 | mode="aspectFill" | 13 | mode="aspectFill" |
| 14 | ></image> | 14 | ></image> |
| 15 | </view> | 15 | </view> |
| 16 | <!-- 待付款 --> | 16 | <!-- 待付款 --> |
| 17 | <view | 17 | <view |
| 18 | class="order-time" | 18 | class="order-time" |
| 19 | v-if="status == '0'" | 19 | v-if="status == '0'" |
| 20 | > | 20 | > |
| 21 | <text>请在</text> | 21 | <text>请在</text> |
| 22 | <uni-countdown | 22 | <uni-countdown |
| 23 | color="#EC5D3B" | 23 | color="#EC5D3B" |
| 24 | splitor-color="#EC5D3B" | 24 | splitor-color="#EC5D3B" |
| 25 | :show-day="false" | 25 | :show-day="false" |
| 26 | :hour="0" | 26 | :hour="0" |
| 27 | :second="getLeftTime" | 27 | :second="getLeftTime" |
| 28 | @timeup="timeup" | 28 | @timeup="timeup" |
| 29 | > | 29 | > |
| 30 | </uni-countdown> | 30 | </uni-countdown> |
| 31 | 31 | ||
| 32 | <text>内完成付款</text> | 32 | <text>内完成付款</text> |
| 33 | </view> | 33 | </view> |
| 34 | 34 | ||
| 35 | <view | 35 | <view |
| 36 | class="headerBanner" | 36 | class="headerBanner" |
| 37 | v-if="status == '1'" | 37 | v-if="status == '1'" |
| 38 | > | 38 | > |
| 39 | <view class="bannerLeft"> | 39 | <view class="bannerLeft"> |
| 40 | <view class="T1">卖家已发货</view> | 40 | <view class="T1">卖家已发货</view> |
| 41 | <!-- <view class="T2">还剩 确认收货</view> --> | 41 | <!-- <view class="T2">还剩 确认收货</view> --> |
| 42 | </view> | 42 | </view> |
| 43 | <image | 43 | <image |
| 44 | src="../../static/car.png" | 44 | src="../../static/car.png" |
| 45 | mode="aspectFill" | 45 | mode="aspectFill" |
| 46 | ></image> | 46 | ></image> |
| 47 | </view> | 47 | </view> |
| 48 | 48 | ||
| 49 | <view class="order"> | 49 | <view class="order"> |
| 50 | <view class="order-user"> | 50 | <view class="order-user"> |
| 51 | <view class="order-user-head"> | 51 | <view class="order-user-head"> |
| 52 | <text class="p1">{{orderAddressInfo.name}}</text> | 52 | <text class="p1">{{orderAddressInfo.name}}</text> |
| 53 | <text class="p2">{{orderAddressInfo.mobile}}</text> | 53 | <text class="p2">{{orderAddressInfo.mobile}}</text> |
| 54 | </view> | 54 | </view> |
| 55 | <view class="order-user-body"> | 55 | <view class="order-user-body"> |
| 56 | <image src="../../static/myorder-paying-location.png"></image> | 56 | <image src="../../static/myorder-paying-location.png"></image> |
| 57 | <text class="p3">{{orderAddressInfo.address}}</text> | 57 | <text class="p3">{{orderAddressInfo.address}}</text> |
| 58 | </view> | 58 | </view> |
| 59 | </view> | 59 | </view> |
| 60 | <view class="order-info"> | 60 | <view class="order-info"> |
| 61 | <view | 61 | <view |
| 62 | class="order-info-head" | 62 | class="order-info-head" |
| 63 | v-for="(orderInfoListItem, index) in orderInfoList" | 63 | v-for="(orderInfoListItem, index) in orderInfoList" |
| 64 | :key="index" | 64 | :key="index" |
| 65 | > | 65 | > |
| 66 | <image | 66 | <image |
| 67 | :src="orderInfoListItem.imgUrl" | 67 | :src="orderInfoListItem.imgUrl" |
| 68 | mode="aspectFill" | 68 | mode="aspectFill" |
| 69 | ></image> | 69 | ></image> |
| 70 | <view class="order-info-head-r"> | 70 | <view class="order-info-head-r"> |
| 71 | <text class="p1">{{orderInfoListItem.p_name}}</text> | 71 | <text class="p1">{{orderInfoListItem.p_name}}</text> |
| 72 | <template v-if="orderInfoList.length === 1"> | 72 | <template v-if="orderInfoList.length === 1"> |
| 73 | <view | 73 | <view |
| 74 | class="p2" | 74 | class="p2" |
| 75 | style="margin: 0;" | 75 | style="margin: 0;" |
| 76 | > | 76 | > |
| 77 | {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}} | 77 | {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}} |
| 78 | </view> | 78 | </view> |
| 79 | </template> | 79 | </template> |
| 80 | <view class="infoText-bottom"> | 80 | <view class="infoText-bottom"> |
| 81 | <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view> | 81 | <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view> |
| 82 | <view class="buy-num">X {{orderInfoListItem.num}}</view> | 82 | <view class="buy-num">X {{orderInfoListItem.num}}</view> |
| 83 | </view> | 83 | </view> |
| 84 | </view> | 84 | </view> |
| 85 | </view> | 85 | </view> |
| 86 | <!-- <view class="order-info-goodsnum"> | 86 | <!-- <view class="order-info-goodsnum"> |
| 87 | <text>X1</text> | 87 | <text>X1</text> |
| 88 | </view> --> | 88 | </view> --> |
| 89 | <text class="order-info-freight"> | 89 | <text class="order-info-freight"> |
| 90 | <text class="p1">运费</text> | 90 | <text class="p1">运费</text> |
| 91 | <text class="p2">免运费</text> | 91 | <text class="p2">免运费</text> |
| 92 | </text> | 92 | </text> |
| 93 | <text class="order-info-discount"> | 93 | <text class="order-info-discount"> |
| 94 | <text class="p1">优惠</text> | 94 | <text class="p1">优惠</text> |
| 95 | <text class="p2">-￥{{totalDiscount}}</text> | 95 | <text class="p2">-￥{{totalDiscount}}</text> |
| 96 | </text> | 96 | </text> |
| 97 | <text class="order-info-price"> | 97 | <text class="order-info-price"> |
| 98 | <text class="p1">实付</text> | 98 | <text class="p1">实付</text> |
| 99 | <text class="p2">￥{{Number(totalPrice)/100}}</text> | 99 | <text class="p2">￥{{Number(totalPrice)/100}}</text> |
| 100 | </text> | 100 | </text> |
| 101 | <text class="order-info-num"> | 101 | <text class="order-info-num"> |
| 102 | <text>订单号：{{payId}}</text> | 102 | <text>订单号：{{payId}}</text> |
| 103 | </text> | 103 | </text> |
| 104 | <text class="order-info-time"> | 104 | <text class="order-info-time"> |
| 105 | <text>下单时间：{{orderInfo.pay_time}}</text> | 105 | <text>下单时间：{{orderInfo.pay_time}}</text> |
| 106 | </text> | 106 | </text> |
| 107 | <view class="order-info-hr"></view> | 107 | <view class="order-info-hr"></view> |
| 108 | <view class="order-info-contact"> | 108 | <view class="order-info-contact"> |
| 109 | <image src="../../static/myorder-paying-contact.png"></image> | 109 | <image src="../../static/myorder-paying-contact.png"></image> |
| 110 | <button open-type="contact">联系客服</button> | 110 | <button open-type="contact">联系客服</button> |
| 111 | </view> | 111 | </view> |
| 112 | </view> | 112 | </view> |
| 113 | </view> | 113 | </view> |
| 114 | <view | 114 | <view |
| 115 | class="order-confim" | 115 | class="order-confim" |
| 116 | v-if="status == '0'" | 116 | v-if="status == '0'" |
| 117 | > | 117 | > |
| 118 | <button | 118 | <button |
| 119 | class="b1" | 119 | class="b1" |
| 120 | @click="cancleOrder" | 120 | @click="cancleOrder" |
| 121 | >取消订单</button> | 121 | >取消订单</button> |
| 122 | <button | 122 | <button |
| 123 | class="b2" | 123 | class="b2" |
| 124 | @click="paylog" | 124 | @click="paylog" |
| 125 | >立即支付</button> | 125 | >立即支付</button> |
| 126 | </view> | 126 | </view> |
| 127 | 127 | ||
| 128 | <view | 128 | <view |
| 129 | class="order-confim" | 129 | class="order-confim" |
| 130 | v-if="status == '1'" | 130 | v-if="status == '1'" |
| 131 | > | 131 | > |
| 132 | <!-- <button class="b1">取消订单</button> --> | 132 | <!-- <button class="b1">取消订单</button> --> |
| 133 | <button | 133 | <button |
| 134 | class="b2" | 134 | class="b2" |
| 135 | @click="confirmOrder" | 135 | @click="confirmOrder" |
| 136 | >确认收货</button> | 136 | >确认收货</button> |
| 137 | </view> | 137 | </view> |
| 138 | <view | 138 | <view |
| 139 | class="order-confim" | 139 | class="order-confim" |
| 140 | v-if="status == '2'" | 140 | v-if="status == '2'" |
| 141 | > | 141 | > |
| 142 | <button | 142 | <button |
| 143 | class="b2" | 143 | class="b2" |
| 144 | @click="toDetail" | 144 | @click="toDetail" |
| 145 | >再次购买</button> | 145 | >再次购买</button> |
| 146 | </view> | 146 | </view> |
| 147 | 147 | ||
| 148 | </view> | 148 | </view> |
| 149 | </template> | 149 | </template> |
| 150 | 150 | ||
| 151 | <script> | 151 | <script> |
| 152 | import store from '@/store' | 152 | import store from '@/store' |
| 153 | import MD5Util from '../../utils/md5' | 153 | import MD5Util from '../../utils/md5' |
| 154 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | 154 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' |
| 155 | export default { | 155 | export default { |
| 156 | components: { | 156 | components: { |
| 157 | UniCountdown, | 157 | UniCountdown, |
| 158 | }, | 158 | }, |
| 159 | data() { | 159 | data() { |
| 160 | return { | 160 | return { |
| 161 | payId: '', | 161 | payId: '', |
| 162 | payTime: '', | 162 | payTime: '', |
| 163 | status: '', // status 0 待付款 1 已发货 | 163 | status: '', // status 0 待付款 1 已发货 |
| 164 | uid: '', | 164 | uid: '', |
| 165 | openid: '', | 165 | openid: '', |
| 166 | lefttime: 0, | 166 | lefttime: 0, |
| 167 | isPay: 0, | 167 | isPay: 0, |
| 168 | totalPrice: 0, | 168 | totalPrice: 0, |
| 169 | index: 0, | 169 | index: 0, |
| 170 | } | 170 | } |
| 171 | }, | 171 | }, |
| 172 | async onLoad ({ payId, status, isPay }) { | 172 | async onLoad ({ payId, status, isPay }) { |
| 173 | this.payId = payId | 173 | this.payId = payId |
| 174 | this.status = status | 174 | this.status = status |
| 175 | this.isPay = isPay | 175 | this.isPay = isPay |
| 176 | // console.log('++++++++++++++++++',this.status) | 176 | // console.log('++++++++++++++++++',this.status) |
| 177 | const openid = uni.getStorageSync('openid') | 177 | const openid = uni.getStorageSync('openid') |
| 178 | const uid = this.$store.state.user.userInfo.uid | 178 | const uid = this.$store.state.user.userInfo.uid |
| 179 | this.uid = uid | 179 | this.uid = uid |
| 180 | this.openid = openid | 180 | this.openid = openid |
| 181 | await store.dispatch('orderRead/getOrderInfo', { | 181 | await store.dispatch('orderRead/getOrderInfo', { |
| 182 | pay_id: this.payId, | 182 | pay_id: this.payId, |
| 183 | uid: uid, | 183 | uid: uid, |
| 184 | openid: openid, | 184 | openid: openid, |
| 185 | }) | 185 | }) |
| 186 | const { list } = this.orderInfo.order_info | 186 | const { list } = this.orderInfo.order_info |
| 187 | for (let index = 0; index < list.length; index++) { | 187 | for (let index = 0; index < list.length; index++) { |
| 188 | await store.dispatch('orderRead/goodDetails', { | 188 | await store.dispatch('orderRead/goodDetails', { |
| 189 | pid: list[index].pid, | 189 | pid: list[index].pid, |
| 190 | skId: list[index].sk_id, | 190 | skId: list[index].sk_id, |
| 191 | }) | 191 | }) |
| 192 | } | 192 | } |
| 193 | this.totalPrice = this.orderInfo.total_fee | 193 | this.totalPrice = this.orderInfo.total_fee |
| 194 | }, | 194 | }, |
| 195 | // 若从支付页面跳转过来，返回直接返回到首页 | 195 | // 若从支付页面跳转过来，返回直接返回到首页 |
| 196 | onBackPress(option) { | 196 | onBackPress(option) { |
| 197 | if (option.from === 'backbutton' && this.isPay) { | 197 | if (option.from === 'backbutton' && this.isPay) { |
| 198 | uni.switchTab({ | 198 | uni.switchTab({ |
| 199 | url: '/pages/index/index', | 199 | url: '/pages/index/index', |
| 200 | }) | 200 | }) |
| 201 | return true // 阻止默认返回行为 | 201 | return true // 阻止默认返回行为 |
| 202 | } | 202 | } |
| 203 | }, | 203 | }, |
| 204 | computed: { | 204 | computed: { |
| 205 | // 规格列表 | 205 | // 规格列表 |
| 206 | skuList () { | 206 | skuList () { |
| 207 | return this.$store.state.orderRead.skuList | 207 | return this.$store.state.orderRead.skuList |
| 208 | }, | 208 | }, |
| 209 | orderInfo() { | 209 | orderInfo() { |
| 210 | return this.$store.state.orderRead.orderInfo | 210 | return this.$store.state.orderRead.orderInfo |
| 211 | }, | 211 | }, |
| 212 | orderInfoList () { | 212 | orderInfoList () { |
| 213 | return this.orderInfo.order_info ? this.orderInfo.order_info.list : null | 213 | return this.orderInfo.order_info ? this.orderInfo.order_info.list : null |
| 214 | }, | 214 | }, |
| 215 | // 获取订单地址信息 | 215 | // 获取订单地址信息 |
| 216 | orderAddressInfo () { | 216 | orderAddressInfo () { |
| 217 | return this.orderInfo.order_info ? this.orderInfo.order_info.address : null | 217 | return this.orderInfo.order_info ? this.orderInfo.order_info.address : null |
| 218 | }, | 218 | }, |
| 219 | // 订单付款时间 | 219 | // 订单付款时间 |
| 220 | getLeftTime () { | 220 | getLeftTime () { |
| 221 | const orderTime = new Date(this.orderInfo.pay_time.replace(/-/g, '/')).getTime() | 221 | const orderTime = new Date(this.orderInfo.pay_time.replace(/-/g, '/')).getTime() |
| 222 | const nowTime = new Date().getTime() | 222 | const nowTime = new Date().getTime() |
| 223 | console.log('getLeftTime', 1800 - (nowTime - orderTime)) | 223 | console.log('getLeftTime', 1800 - (nowTime - orderTime)) |
| 224 | return 1800 - (nowTime - orderTime) / 1000 | 224 | return 1800 - (nowTime - orderTime) / 1000 |
| 225 | }, | 225 | }, |
| 226 | // 计算总优惠额 | 226 | // 计算总优惠额 |
| 227 | totalDiscount() { | 227 | totalDiscount() { |
| 228 | const discountInfoList = this.orderInfo.discount_info | 228 | const discountInfoList = this.orderInfo.discount_info |
| 229 | let totalDiscount = 0 | 229 | let totalDiscount = 0 |
| 230 | if (discountInfoList) { | 230 | if (discountInfoList) { |
| 231 | discountInfoList.map((discountItem, index) => { | 231 | discountInfoList.map((discountItem, index) => { |
| 232 | totalDiscount += Number(discountItem.value) | 232 | totalDiscount += Number(discountItem.value) |
| 233 | }) | 233 | }) |
| 234 | } | 234 | } |
| 235 | // console.log(totalDiscount) | 235 | // console.log(totalDiscount) |
| 236 | return totalDiscount | 236 | return totalDiscount |
| 237 | }, | 237 | }, |
| 238 | }, | 238 | }, |
| 239 | 239 | ||
| 240 | methods: { | 240 | methods: { |
| 241 | // 再次购买 暂时只支持跳转第一个商品 | 241 | // 再次购买 暂时只支持跳转第一个商品 |
| 242 | toDetail() { | 242 | toDetail() { |
| 243 | const pid = this.orderInfo.order_info.list[0].pid | 243 | const pid = this.orderInfo.order_info.list[0].pid |
| 244 | uni.navigateTo({ | 244 | uni.navigateTo({ |
| 245 | url: '../details/details?pid=' + pid, | 245 | url: '../details/details?pid=' + pid, |
| 246 | fail: (res) => { console.log(res) }, | 246 | fail: (res) => { console.log(res) }, |
| 247 | }) | 247 | }) |
| 248 | }, | 248 | }, |
| 249 | // 取消订单 | 249 | // 取消订单 |
| 250 | timeup() { | 250 | timeup() { |
| 251 | this.cancleOrder() | 251 | this.cancleOrder() |
| 252 | }, | 252 | }, |
| 253 | cancleOrder() { | 253 | cancleOrder() { |
| 254 | const uid = this.uid | 254 | const uid = this.uid |
| 255 | const openid = this.openid | 255 | const openid = this.openid |
| 256 | const keyname = this.orderInfo.order_info.keyname | 256 | const keyname = this.orderInfo.order_info.keyname |
| 257 | const that = this | 257 | const that = this |
| 258 | // console.log('keyname',this.orderInfo.keyname) | 258 | // console.log('keyname',this.orderInfo.keyname) |
| 259 | uni.showModal({ | 259 | uni.showModal({ |
| 260 | title: '提示', | 260 | title: '提示', |
| 261 | content: '现在取消，订单不可恢复哦，确认取消吗？', | 261 | content: '现在取消，订单不可恢复哦，确认取消吗？', |
| 262 | success: function(res) { | 262 | success: function(res) { |
| 263 | if (res.confirm) { | 263 | if (res.confirm) { |
| 264 | store.dispatch('cancelOrder/cancel', { | 264 | store.dispatch('cancelOrder/cancel', { |
| 265 | keyname: keyname, | 265 | keyname: keyname, |
| 266 | uid: uid, | 266 | uid: uid, |
| 267 | openid: openid, | 267 | openid: openid, |
| 268 | }).then(() => { | 268 | }).then(() => { |
| 269 | if (that.isPay === '1') { | 269 | if (that.isPay === '1') { |
| 270 | console.log('lalallala-1') | 270 | console.log('lalallala-1') |
| 271 | uni.switchTab({ | 271 | uni.switchTab({ |
| 272 | url: '/pages/index/index', | 272 | url: '/pages/index/index', |
| 273 | }) | 273 | }) |
| 274 | } else { | 274 | } else { |
| 275 | console.log('lalallala-2') | 275 | console.log('lalallala-2') |
| 276 | uni.navigateBack({ | 276 | uni.navigateBack({ |
| 277 | delta: 1, | 277 | delta: 1, |
| 278 | }) | 278 | }) |
| 279 | } | 279 | } |
| 280 | }) | 280 | }) |
| 281 | } else if (res.cancel) { | 281 | } else if (res.cancel) { |
| 282 | console.log('用户点击取消', that.isPay) | 282 | console.log('用户点击取消', that.isPay) |
| 283 | } | 283 | } |
| 284 | }, | 284 | }, |
| 285 | }) | 285 | }) |
| 286 | }, | 286 | }, |
| 287 | paylog() { | 287 | paylog() { |
| 288 | console.log('pay', this.orderInfo) | 288 | console.log('pay', this.orderInfo) |
| 289 | const { data, exKeyName: keyName } = this.orderInfo | 289 | const { data, exKeyName: keyName } = this.orderInfo |
| 290 | const uid = uni.getStorageSync('uid') | 290 | const uid = uni.getStorageSync('uid') |
| 291 | const timeStamp = new Date().getTime().toString() | 291 | const timeStamp = new Date().getTime().toString() |
| 292 | const nonceStr = 'asfafasfasfasfasf' | 292 | const nonceStr = 'asfafasfasfasfasf' |
| 293 | // 支付参数 | 293 | // 支付参数 |
| 294 | const fieldSet = { | 294 | const fieldSet = { |
| 295 | openid: this.$store.state.user.userInfo.openid, | 295 | openid: this.$store.state.user.userInfo.openid, |
| 296 | uid: this.$store.state.user.userInfo.uid, | 296 | uid: this.$store.state.user.userInfo.uid, |
| 297 | shopid: 0, | 297 | shopid: 0, |
| 298 | payCate: 2020, | 298 | payCate: 2020, |
| 299 | payMoney: this.totalPrice, | 299 | payMoney: this.totalPrice, |
| 300 | payWoodId: `fcdj-${uid}-${keyName}`, | 300 | payWoodId: `fcdj-${uid}-${keyName}`, |
| 301 | payWoodDesc: '在【非常戴镜】的微信付款凭证', | 301 | payWoodDesc: '在【非常戴镜】的微信付款凭证', |
| 302 | nonceStr, | 302 | nonceStr, |
| 303 | signType: 'MD5', | 303 | signType: 'MD5', |
| 304 | app_uid: 2020, | 304 | app_uid: 2020, |
| 305 | timeStamp, | 305 | timeStamp, |
| 306 | keyname: keyName, | 306 | keyname: keyName, |
| 307 | billInfo: JSON.stringify(data), | 307 | billInfo: JSON.stringify(data), |
| 308 | } | 308 | } |
| 309 | // 请求后台支付接口 | 309 | // 请求后台支付接口 |
| 310 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { | 310 | store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { |
| 311 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { | 311 | if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { |
| 312 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` | 312 | const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` |
| 313 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' | 313 | const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' |
| 314 | 314 | ||
| 315 | // 微信支付接口 | 315 | // 微信支付接口 |
| 316 | uni.requestPayment({ | 316 | uni.requestPayment({ |
| 317 | appId: data.appid, | 317 | appId: data.appid, |
| 318 | timeStamp, | 318 | timeStamp, |
| 319 | nonceStr, | 319 | nonceStr, |
| 320 | total_fee: this.totalPrice, | 320 | total_fee: this.totalPrice, |
| 321 | package: `prepay_id=${data.prepay_id}`, | 321 | package: `prepay_id=${data.prepay_id}`, |
| 322 | signType: 'MD5', | 322 | signType: 'MD5', |
| 323 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), | 323 | paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), |
| 324 | success: (res) => { | 324 | success: (res) => { |
| 325 | // 支付成功 | 325 | // 支付成功 |
| 326 | uni.showModal({ | 326 | uni.showModal({ |
| 327 | content: '支付成功', | 327 | content: '支付成功', |
| 328 | showCancel: false, | 328 | showCancel: false, |
| 329 | }) | 329 | }) |
| 330 | // 跳转订单详情页->状态 待收货 | 330 | // 跳转订单详情页->状态 待收货 |
| 331 | uni.reLaunch({ | 331 | uni.reLaunch({ |
| 332 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, | 332 | url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, |
| 333 | }) | 333 | }) |
| 334 | }, | 334 | }, |
| 335 | fail: (res) => { | 335 | fail: (res) => { |
| 336 | // 支付失败 | 336 | // 支付失败 |
| 337 | uni.showModal({ | 337 | uni.showModal({ |
| 338 | content: '支付失败', | 338 | content: '支付失败', |
| 339 | showCancel: false, | 339 | showCancel: false, |
| 340 | }) | 340 | }) |
| 341 | // 跳转订单详情页->刷新本页面 | 341 | // 跳转订单详情页->刷新本页面 |
| 342 | // uni.redirectTo({ | 342 | // uni.redirectTo({ |
| 343 | // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, | 343 | // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, |
| 344 | // }) | 344 | // }) |
| 345 | }, | 345 | }, |
| 346 | complete: () => { | 346 | complete: () => { |
| 347 | uni.hideLoading() | 347 | uni.hideLoading() |
| 348 | }, | 348 | }, |
| 349 | }) | 349 | }) |
| 350 | } else { | 350 | } else { |
| 351 | uni.showModal({ | 351 | uni.showModal({ |
| 352 | content: '支付失败', | 352 | content: '支付失败', |
| 353 | showCancel: false, | 353 | showCancel: false, |
| 354 | }) | 354 | }) |
| 355 | console.log('支付失败') | 355 | console.log('支付失败') |
| 356 | uni.hideLoading() | 356 | uni.hideLoading() |
| 357 | // uni.redirectTo({ | 357 | // uni.redirectTo({ |
| 358 | // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, | 358 | // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, |
| 359 | // }) | 359 | // }) |
| 360 | } | 360 | } |
| 361 | }) | 361 | }) |
| 362 | 362 | ||
| 363 | // 修改订单状态 待付款==>待收货 | 363 | // 修改订单状态 待付款==>待收货 |
| 364 | store.dispatch('statusConfirm/confirm', { | 364 | store.dispatch('statusConfirm/confirm', { |
| 365 | uid: this.uid, | 365 | uid: this.uid, |
| 366 | openid: this.openid, | 366 | openid: this.openid, |
| 367 | oldway: '0', | 367 | oldway: '0', |
| 368 | way: '1', | 368 | way: '1', |
| 369 | pay_id: this.payId, | 369 | pay_id: this.payId, |
| 370 | judgeContent: '', | 370 | judgeContent: '', |
| 371 | orderInfo: this.orderInfo.order_info, | 371 | orderInfo: this.orderInfo.order_info, |
| 372 | }) | 372 | }) |
| 373 | .then( | 373 | .then( |
| 374 | // setTimeout(() => { | 374 | // setTimeout(() => { |
| 375 | // uni.navigateBack(); | 375 | // uni.navigateBack(); |
| 376 | // }, 1500) | 376 | // }, 1500) |
| 377 | ) | 377 | ) |
| 378 | }, | 378 | }, |
| 379 | confirmOrder() { | 379 | confirmOrder() { |
| 380 | // 确认收货 way1 ==>way2 | 380 | // 确认收货 way1 ==>way2 |
| 381 | store | 381 | store |
| 382 | .dispatch('statusConfirm/confirm', { | 382 | .dispatch('statusConfirm/confirm', { |
| 383 | uid: this.uid, | 383 | uid: this.uid, |
| 384 | openid: this.openid, | 384 | openid: this.openid, |
| 385 | oldway: '1', | 385 | oldway: '1', |
| 386 | way: '2', | 386 | way: '2', |
| 387 | pay_id: this.payId, | 387 | pay_id: this.payId, |
| 388 | judgeContent: '', | 388 | judgeContent: '', |
| 389 | orderInfo: this.orderInfo.order_info, | 389 | orderInfo: this.orderInfo.order_info, |
| 390 | }) | 390 | }) |
| 391 | .then((res) => { | 391 | .then((res) => { |
| 392 | if (res.data.code === 1) { | 392 | if (res.data.code === 1) { |
| 393 | uni.showToast({ | 393 | uni.showToast({ |
| 394 | title: '已确认', | 394 | title: '已确认', |
| 395 | mask: true, | 395 | mask: true, |
| 396 | duration: 1500, | 396 | duration: 1500, |
| 397 | icon: 'success', | 397 | icon: 'success', |
| 398 | }) | 398 | }) |
| 399 | } else { | 399 | } else { |
| 400 | uni.showToast({ | 400 | uni.showToast({ |
| 401 | title: '服务器错误，确认失败!', | 401 | title: '服务器错误，确认失败!', |
| 402 | mask: true, | 402 | mask: true, |
| 403 | }) | 403 | }) |
| 404 | } | 404 | } |
| 405 | setTimeout(() => { | 405 | setTimeout(() => { |
| 406 | uni.navigateBack() | 406 | uni.navigateBack() |
| 407 | }, 1500) | 407 | }, 1500) |
| 408 | }) | 408 | }) |
| 409 | }, | 409 | }, |
| 410 | }, | 410 | }, |
| 411 | // filters: { | 411 | // filters: { |
| 412 | // timerChange: function(value) { | 412 | // timerChange: function(value) { |
| 413 | // var newDate = new Date() | 413 | // var newDate = new Date() |
| 414 | // newDate.setTime(value * 1000) | 414 | // newDate.setTime(value * 1000) |
| 415 | // return newDate.toLocaleString() | 415 | // return newDate.toLocaleString() |
| 416 | // }, | 416 | // }, |
| 417 | // }, | 417 | // }, |
| 418 | } | 418 | } |
| 419 | </script> | 419 | </script> |
| 420 | 420 | ||
| 421 | <style lang="scss" scoped> | 421 | <style lang="scss" scoped> |
| 422 | .content { | 422 | .content { |
| 423 | min-height: 100vh; | 423 | min-height: 100vh; |
| 424 | display: flex; | 424 | display: flex; |
| 425 | flex-direction: column; | 425 | flex-direction: column; |
| 426 | justify-content: flex-start; | 426 | justify-content: flex-start; |
| 427 | align-items: center; | 427 | align-items: center; |
| 428 | background-color: #f2f2f2; | 428 | background-color: #f2f2f2; |
| 429 | } | 429 | } |
| 430 | 430 | ||
| 431 | .order { | 431 | .order { |
| 432 | margin-bottom: 112rpx; | 432 | margin-bottom: 112rpx; |
| 433 | background: #f2f2f2; | 433 | background: #f2f2f2; |
| 434 | margin-top: 140rpx; | 434 | margin-top: 140rpx; |
| 435 | width: 670rpx; | 435 | width: 670rpx; |
| 436 | } | 436 | } |
| 437 | 437 | ||
| 438 | .order-time { | 438 | .order-time { |
| 439 | width: 100%; | 439 | width: 100%; |
| 440 | height: 140rpx; | 440 | height: 140rpx; |
| 441 | background-color: #fff; | 441 | background-color: #fff; |
| 442 | display: flex; | 442 | display: flex; |
| 443 | justify-content: center; | 443 | justify-content: center; |
| 444 | align-items: center; | 444 | align-items: center; |
| 445 | position: fixed; | 445 | position: fixed; |
| 446 | top: 0; | 446 | top: 0; |
| 447 | left: 0; | 447 | left: 0; |
| 448 | text { | 448 | text { |
| 449 | // font-family: PingFangSC-Regular; | 449 | // font-family: PingFangSC-Regular; |
| 450 | // margin-top: 48rpx; | 450 | // margin-top: 48rpx; |
| 451 | font-size: 14px; | 451 | font-size: 14px; |
| 452 | color: #333333; | 452 | color: #333333; |
| 453 | letter-spacing: -0.26px; | 453 | letter-spacing: -0.26px; |
| 454 | } | 454 | } |
| 455 | .p2 { | 455 | .p2 { |
| 456 | // font-family: DINAlternate-Bold; | 456 | // font-family: DINAlternate-Bold; |
| 457 | margin: 42rpx 20rpx 0 20rpx; | 457 | margin: 42rpx 20rpx 0 20rpx; |
| 458 | font-size: 18px; | 458 | font-size: 18px; |
| 459 | color: #ec5d3b; | 459 | color: #ec5d3b; |
| 460 | letter-spacing: -0.34px; | 460 | letter-spacing: -0.34px; |
| 461 | } | 461 | } |
| 462 | } | 462 | } |
| 463 | .headerBanner { | 463 | .headerBanner { |
| 464 | width: 100%; | 464 | width: 100%; |
| 465 | height: 140rpx; | 465 | height: 140rpx; |
| 466 | background: #4a90e2; | 466 | background: #4a90e2; |
| 467 | padding: 26rpx 60rpx 24rpx 60rpx; | 467 | padding: 26rpx 60rpx 24rpx 60rpx; |
| 468 | box-sizing: border-box; | 468 | box-sizing: border-box; |
| 469 | color: #ffffff; | 469 | color: #ffffff; |
| 470 | display: flex; | 470 | display: flex; |
| 471 | justify-content: space-between; | 471 | justify-content: space-between; |
| 472 | align-items: center; | 472 | align-items: center; |
| 473 | position: fixed; | 473 | position: fixed; |
| 474 | top: 0; | 474 | top: 0; |
| 475 | left: 0; | 475 | left: 0; |
| 476 | .bannerLeft { | 476 | .bannerLeft { |
| 477 | font-size: 36rpx; | 477 | font-size: 36rpx; |
| 478 | display: flex; | 478 | display: flex; |
| 479 | flex-direction: column; | 479 | flex-direction: column; |
| 480 | justify-content: center; | 480 | justify-content: center; |
| 481 | align-items: center; | 481 | align-items: center; |
| 482 | .T2 { | 482 | .T2 { |
| 483 | font-size: 24rpx; | 483 | font-size: 24rpx; |
| 484 | } | 484 | } |
| 485 | } | 485 | } |
| 486 | image { | 486 | image { |
| 487 | height: 56rpx; | 487 | height: 56rpx; |
| 488 | width: 72rpx; | 488 | width: 72rpx; |
| 489 | } | 489 | } |
| 490 | } | 490 | } |
| 491 | 491 | ||
| 492 | .order-user { | 492 | .order-user { |
| 493 | height: 228rpx; | 493 | height: 228rpx; |
| 494 | background: #ffffff; | 494 | background: #ffffff; |
| 495 | border-radius: 14rpx; | 495 | border-radius: 14rpx; |
| 496 | margin: 0 auto; | 496 | margin: 0 auto; |
| 497 | margin-top: 20rpx; | 497 | margin-top: 20rpx; |
| 498 | margin-bottom: 20rpx; | 498 | margin-bottom: 20rpx; |
| 499 | .order-user-head { | 499 | .order-user-head { |
| 500 | display: flex; | 500 | display: flex; |
| 501 | height: 108rpx; | 501 | height: 108rpx; |
| 502 | align-items: center; | 502 | align-items: center; |
| 503 | margin-left: 126rpx; | 503 | margin-left: 126rpx; |
| 504 | .p1 { | 504 | .p1 { |
| 505 | // font-family: PingFangSC-Regular; | 505 | // font-family: PingFangSC-Regular; |
| 506 | font-size: 14px; | 506 | font-size: 14px; |
| 507 | color: #333333; | 507 | color: #333333; |
| 508 | letter-spacing: -0.26px; | 508 | letter-spacing: -0.26px; |
| 509 | margin-right: 20rpx; | 509 | margin-right: 20rpx; |
| 510 | } | 510 | } |
| 511 | .p2 { | 511 | .p2 { |
| 512 | // font-family: PingFangSC-Regular; | 512 | // font-family: PingFangSC-Regular; |
| 513 | font-size: 14px; | 513 | font-size: 14px; |
| 514 | color: #999999; | 514 | color: #999999; |
| 515 | letter-spacing: -0.26px; | 515 | letter-spacing: -0.26px; |
| 516 | } | 516 | } |
| 517 | } | 517 | } |
| 518 | .order-user-body { | 518 | .order-user-body { |
| 519 | display: flex; | 519 | display: flex; |
| 520 | width: 100%; | 520 | width: 100%; |
| 521 | image { | 521 | image { |
| 522 | width: 24px; | 522 | width: 24px; |
| 523 | height: 26px; | 523 | height: 26px; |
| 524 | margin: 12rpx 32rpx 0 40rpx; | 524 | margin: 12rpx 32rpx 0 40rpx; |
| 525 | } | 525 | } |
| 526 | .p3 { | 526 | .p3 { |
| 527 | // font-family: PingFangSC-Semibold; | 527 | // font-family: PingFangSC-Semibold; |
| 528 | font-size: 14px; | 528 | font-size: 14px; |
| 529 | color: #333333; | 529 | color: #333333; |
| 530 | letter-spacing: -0.26px; | 530 | letter-spacing: -0.26px; |
| 531 | line-height: 70rpx; | 531 | line-height: 70rpx; |
| 532 | } | 532 | } |
| 533 | } | 533 | } |
| 534 | } | 534 | } |
| 535 | 535 | ||
| 536 | .order-info { | 536 | .order-info { |
| 537 | background-color: #fff; | 537 | background-color: #fff; |
| 538 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); | 538 | box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); |
| 539 | border-radius: 16rpx; | 539 | border-radius: 16rpx; |
| 540 | margin: 0 auto; | 540 | margin: 0 auto; |
| 541 | view { | 541 | view { |
| 542 | margin-left: 40rpx; | 542 | margin-left: 40rpx; |
| 543 | } | 543 | } |
| 544 | text { | 544 | text { |
| 545 | font-size: 14px; | 545 | font-size: 14px; |
| 546 | } | 546 | } |
| 547 | .order-info-head { | 547 | .order-info-head { |
| 548 | display: flex; | 548 | display: flex; |
| 549 | padding-top: 40rpx; | 549 | padding-top: 40rpx; |
| 550 | image { | 550 | image { |
| 551 | height: 188rpx; | 551 | height: 188rpx; |
| 552 | width: 188rpx; | 552 | width: 188rpx; |
| 553 | } | 553 | } |
| 554 | .order-info-head-r { | 554 | .order-info-head-r { |
| 555 | margin: 0; | 555 | margin: 0; |
| 556 | width: 368rpx; | 556 | width: 368rpx; |
| 557 | margin-left: 24rpx; | 557 | margin-left: 24rpx; |
| 558 | // margin-top: 40rpx; | 558 | // margin-top: 40rpx; |
| 559 | text { | 559 | text { |
| 560 | display: block; | 560 | display: block; |
| 561 | } | 561 | } |
| 562 | // .arrow{ | 562 | // .arrow{ |
| 563 | // width: 0; | 563 | // width: 0; |
| 564 | // height: 0; | 564 | // height: 0; |
| 565 | // border-left: 5px transparent; | 565 | // border-left: 5px transparent; |
| 566 | // border-right: 5px transparent; | 566 | // border-right: 5px transparent; |
| 567 | // border-top: 5px #979797; | 567 | // border-top: 5px #979797; |
| 568 | // border-bottom: 0 transparent; | 568 | // border-bottom: 0 transparent; |
| 569 | // border-style: solid; | 569 | // border-style: solid; |
| 570 | // position: relative; | 570 | // position: relative; |
| 571 | // // transform: scaleY(-1); | 571 | // // transform: scaleY(-1); |
| 572 | // } | 572 | // } |
| 573 | // .arrow::after{ | 573 | // .arrow::after{ |
| 574 | // content: ''; | 574 | // content: ''; |
| 575 | // position: absolute; | 575 | // position: absolute; |
| 576 | // top: -6.5px; | 576 | // top: -6.5px; |
| 577 | // left: -5px; | 577 | // left: -5px; |
| 578 | // border-left: 5px transparent; | 578 | // border-left: 5px transparent; |
| 579 | // border-right: 5px transparent; | 579 | // border-right: 5px transparent; |
| 580 | // border-top: 5px #FFFFFF; | 580 | // border-top: 5px #FFFFFF; |
| 581 | // border-bottom: 0 transparent; | 581 | // border-bottom: 0 transparent; |
| 582 | // border-style: solid; | 582 | // border-style: solid; |
| 583 | // } | 583 | // } |
| 584 | .p1 { | 584 | .p1 { |
| 585 | min-height: 40px; | 585 | min-height: 40px; |
| 586 | // font-family: PingFangSC-Regular; | 586 | // font-family: PingFangSC-Regular; |
| 587 | font-size: 14px; | 587 | font-size: 14px; |
| 588 | color: #333333; | 588 | color: #333333; |
| 589 | letter-spacing: -0.26px; | 589 | letter-spacing: -0.26px; |
| 590 | line-height: 18px; | 590 | line-height: 18px; |
| 591 | // line-height: 20px; | 591 | // line-height: 20px; |
| 592 | } | 592 | } |
| 593 | .p2 { | 593 | .p2 { |
| 594 | height: 34px; | 594 | height: 34px; |
| 595 | padding: 1px 0 3px 0; | 595 | padding: 1px 0 3px 0; |
| 596 | // font-family: PingFangSC-Regular; | 596 | // font-family: PingFangSC-Regular; |
| 597 | font-size: 12px; | 597 | font-size: 12px; |
| 598 | color: #999999; | 598 | color: #999999; |
| 599 | letter-spacing: -0.23px; | 599 | letter-spacing: -0.23px; |
| 600 | } | 600 | } |
| 601 | .infoText-bottom { | 601 | .infoText-bottom { |
| 602 | display: flex; | 602 | display: flex; |
| 603 | flex-direction: row; | 603 | flex-direction: row; |
| 604 | justify-content: flex-start; | 604 | justify-content: flex-start; |
| 605 | align-items: center; | 605 | align-items: center; |
| 606 | width: 100%; | 606 | width: 100%; |
| 607 | margin-left: 0; | 607 | margin-left: 0; |
| 608 | .markPrice { | 608 | .markPrice { |
| 609 | font-size: 14px; | 609 | font-size: 14px; |
| 610 | color: #ff6b4a; | 610 | color: #ff6b4a; |
| 611 | margin-right: 20rpx; | 611 | margin-right: 20rpx; |
| 612 | margin-left: 0rpx; | 612 | margin-left: 0rpx; |
| 613 | } | 613 | } |
| 614 | .buy-num { | 614 | .buy-num { |
| 615 | font-size: 12px; | 615 | font-size: 12px; |
| 616 | color: #999999; | 616 | color: #999999; |
| 617 | margin-left: 0; | 617 | margin-left: 0; |
| 618 | } | 618 | } |
| 619 | } | 619 | } |
| 620 | } | 620 | } |
| 621 | } | 621 | } |
| 622 | // .order-info-goodsnum { | 622 | // .order-info-goodsnum { |
| 623 | // display: flex; | 623 | // display: flex; |
| 624 | // align-items: center; | 624 | // align-items: center; |
| 625 | // justify-content: flex-end; | 625 | // justify-content: flex-end; |
| 626 | // text { | 626 | // text { |
| 627 | // margin-right: 44rpx; | 627 | // margin-right: 44rpx; |
| 628 | // // ont-family: PingFangSC-Regular; | 628 | // // ont-family: PingFangSC-Regular; |
| 629 | // font-size: 12px; | 629 | // font-size: 12px; |
| 630 | // color: #999999; | 630 | // color: #999999; |
| 631 | // letter-spacing: -0.23px; | 631 | // letter-spacing: -0.23px; |
| 632 | // } | 632 | // } |
| 633 | // } | 633 | // } |
| 634 | .order-info-freight { | 634 | .order-info-freight { |
| 635 | display: block; | 635 | display: block; |
| 636 | margin-left: 40rpx; | 636 | margin-left: 40rpx; |
| 637 | margin-top: 22rpx; | 637 | margin-top: 22rpx; |
| 638 | .p1 { | 638 | .p1 { |
| 639 | // font-family: PingFangSC-Regular; | 639 | // font-family: PingFangSC-Regular; |
| 640 | font-size: 14px; | 640 | font-size: 14px; |
| 641 | color: #333333; | 641 | color: #333333; |
| 642 | letter-spacing: -0.26px; | 642 | letter-spacing: -0.26px; |
| 643 | line-height: 18px; | 643 | line-height: 18px; |
| 644 | margin-right: 24px; | 644 | margin-right: 24px; |
| 645 | } | 645 | } |
| 646 | .p2 { | 646 | .p2 { |
| 647 | // font-family: PingFangSC-Regular; | 647 | // font-family: PingFangSC-Regular; |
| 648 | font-size: 14px; | 648 | font-size: 14px; |
| 649 | color: #ff6b4a; | 649 | color: #ff6b4a; |
| 650 | letter-spacing: -0.26px; | 650 | letter-spacing: -0.26px; |
| 651 | } | 651 | } |
| 652 | } | 652 | } |
| 653 | .order-info-discount { | 653 | .order-info-discount { |
| 654 | display: block; | 654 | display: block; |
| 655 | margin-left: 40rpx; | 655 | margin-left: 40rpx; |
| 656 | margin-top: 24rpx; | 656 | margin-top: 24rpx; |
| 657 | .p1 { | 657 | .p1 { |
| 658 | // font-family: PingFangSC-Regular; | 658 | // font-family: PingFangSC-Regular; |
| 659 | font-size: 14px; | 659 | font-size: 14px; |
| 660 | color: #333333; | 660 | color: #333333; |
| 661 | letter-spacing: -0.26px; | 661 | letter-spacing: -0.26px; |
| 662 | line-height: 18px; | 662 | line-height: 18px; |
| 663 | margin-right: 24px; | 663 | margin-right: 24px; |
| 664 | } | 664 | } |
| 665 | .p2 { | 665 | .p2 { |
| 666 | // font-family: PingFangSC-Regular; | 666 | // font-family: PingFangSC-Regular; |
| 667 | font-size: 14px; | 667 | font-size: 14px; |
| 668 | color: #ff6b4a; | 668 | color: #ff6b4a; |
| 669 | letter-spacing: -0.26px; | 669 | letter-spacing: -0.26px; |
| 670 | } | 670 | } |
| 671 | } | 671 | } |
| 672 | .order-info-price { | 672 | .order-info-price { |
| 673 | display: block; | 673 | display: block; |
| 674 | margin-left: 40rpx; | 674 | margin-left: 40rpx; |
| 675 | margin-top: 24rpx; | 675 | margin-top: 24rpx; |
| 676 | .p1 { | 676 | .p1 { |
| 677 | // font-family: PingFangSC-Semibold; | 677 | // font-family: PingFangSC-Semibold; |
| 678 | font-size: 14px; | 678 | font-size: 14px; |
| 679 | color: #333333; | 679 | color: #333333; |
| 680 | letter-spacing: -0.26px; | 680 | letter-spacing: -0.26px; |
| 681 | line-height: 18px; | 681 | line-height: 18px; |
| 682 | margin-right: 24px; | 682 | margin-right: 24px; |
| 683 | } | 683 | } |
| 684 | .p2 { | 684 | .p2 { |
| 685 | // font-family: PingFangSC-Semibold; | 685 | // font-family: PingFangSC-Semibold; |
| 686 | font-size: 14px; | 686 | font-size: 14px; |
| 687 | color: #ff6b4a; | 687 | color: #ff6b4a; |
| 688 | letter-spacing: -0.26px; | 688 | letter-spacing: -0.26px; |
| 689 | } | 689 | } |
| 690 | } | 690 | } |
| 691 | .order-info-num { | 691 | .order-info-num { |
| 692 | display: block; | 692 | display: block; |
| 693 | margin-left: 40rpx; | 693 | margin-left: 40rpx; |
| 694 | margin-top: 44rpx; | 694 | margin-top: 44rpx; |
| 695 | text { | 695 | text { |
| 696 | // font-family: PingFangSC-Regular; | 696 | // font-family: PingFangSC-Regular; |
| 697 | font-size: 12px; | 697 | font-size: 12px; |
| 698 | color: #999999; | 698 | color: #999999; |
| 699 | letter-spacing: -0.23px; | 699 | letter-spacing: -0.23px; |
| 700 | } | 700 | } |
| 701 | } | 701 | } |
| 702 | .order-info-time { | 702 | .order-info-time { |
| 703 | display: block; | 703 | display: block; |
| 704 | margin: 8rpx 0 48rpx 40rpx; | 704 | margin: 8rpx 0 48rpx 40rpx; |
| 705 | text { | 705 | text { |
| 706 | // font-family: PingFangSC-Regular; | 706 | // font-family: PingFangSC-Regular; |
| 707 | font-size: 12px; | 707 | font-size: 12px; |
| 708 | color: #999999; | 708 | color: #999999; |
| 709 | letter-spacing: -0.23px; | 709 | letter-spacing: -0.23px; |
| 710 | } | 710 | } |
| 711 | } | 711 | } |
| 712 | .order-info-hr { | 712 | .order-info-hr { |
| 713 | width: 520rpx; | 713 | width: 520rpx; |
| 714 | height: 1px; | 714 | height: 1px; |
| 715 | background-color: #e9e9e9; | 715 | background-color: #e9e9e9; |
| 716 | margin-bottom: 20rpx; | 716 | margin-bottom: 20rpx; |
| 717 | } | 717 | } |
| 718 | .order-info-contact { | 718 | .order-info-contact { |
| 719 | display: flex; | 719 | display: flex; |
| 720 | padding-bottom: 28rpx; | 720 | padding-bottom: 28rpx; |
| 721 | image { | 721 | image { |
| 722 | width: 19px; | 722 | width: 19px; |
| 723 | height: 16px; | 723 | height: 16px; |
| 724 | } | 724 | } |
| 725 | button { | 725 | button { |
| 726 | // font-family: PingFangSC-Regular; | 726 | // font-family: PingFangSC-Regular; |
| 727 | border: none; | 727 | border: none; |
| 728 | border-radius: 0; | 728 | border-radius: 0; |
| 729 | text-align: left; | 729 | text-align: left; |
| 730 | margin-left: 20rpx; | 730 | margin-left: 20rpx; |
| 731 | font-size: 14px; | 731 | font-size: 14px; |
| 732 | color: #333333; | 732 | color: #333333; |
| 733 | letter-spacing: -0.26px; | 733 | letter-spacing: -0.26px; |
| 734 | line-height: 18px; | 734 | line-height: 18px; |
| 735 | background-color: #fff; | 735 | background-color: #fff; |
| 736 | padding: 0; | 736 | padding: 0; |
| 737 | &::after { | 737 | &::after { |
| 738 | border: 0; | 738 | border: 0; |
| 739 | } | 739 | } |
| 740 | } | 740 | } |
| 741 | } | 741 | } |
| 742 | } | 742 | } |
| 743 | 743 | ||
| 744 | .order-confim { | 744 | .order-confim { |
| 745 | display: flex; | 745 | display: flex; |
| 746 | align-items: center; | 746 | align-items: center; |
| 747 | justify-content: flex-end; | 747 | justify-content: flex-end; |
| 748 | // z-index: 999; | 748 | // z-index: 999; |
| 749 | width: 100%; | 749 | width: 100%; |
| 750 | height: 112rpx; | 750 | height: 112rpx; |
| 751 | position: fixed; | 751 | position: fixed; |
| 752 | bottom: 0; | 752 | bottom: 0; |
| 753 | background: #ffffff; | 753 | background: #ffffff; |
| 754 | /* iphonex 等安全区设置，底部安全区适配 */ | ||
| 755 | /* #ifndef APP-NVUE */ | ||
| 756 | padding-bottom: constant(safe-area-inset-bottom); | ||
| 757 | padding-bottom: env(safe-area-inset-bottom); | ||
| 758 | /* #endif */ | ||
| 754 | button { | 759 | button { |
| 755 | width: 204rpx; | 760 | width: 204rpx; |
| 756 | height: 80rpx; | 761 | height: 80rpx; |
| 757 | border: 1px solid #ff6b4a; | 762 | border: 1px solid #ff6b4a; |
| 758 | border-radius: 40rpx; | 763 | border-radius: 40rpx; |
| 759 | font-size: 32rpx; | 764 | font-size: 32rpx; |
| 760 | letter-spacing: -0.3px; | 765 | letter-spacing: -0.3px; |
| 761 | margin-right: 0; | 766 | margin-right: 0; |
| 762 | } | 767 | } |
| 763 | .b1 { | 768 | .b1 { |
| 764 | // font-family: PingFangSC-Regular; | 769 | // font-family: PingFangSC-Regular; |
| 765 | color: #ff6b4a; | 770 | color: #ff6b4a; |
| 766 | background-color: #ffffff; | 771 | background-color: #ffffff; |
| 767 | } | 772 | } |
| 768 | .b2 { | 773 | .b2 { |
| 769 | // font-family: PingFangSC-Regular; | 774 | // font-family: PingFangSC-Regular; |
| 770 | background-color: #ff6b4a; | 775 | background-color: #ff6b4a; |
| 771 | color: #ffffff; | 776 | color: #ffffff; |
| 772 | margin: 0 26rpx 0 20rpx; | 777 | margin: 0 26rpx 0 20rpx; |
| 773 | } | 778 | } |
| 774 | } | 779 | } |
| 775 | </style> | 780 | </style> |
| 776 | 781 |
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="p1"> | 40 | <view class="p1"> |
| 41 | <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> | 41 | <image |
| 42 | 填写验光数据 | 42 | class="image2" |
| 43 | </view> | 43 | src="../../static/img/myOpticsData/dataWrite.png" |
| 44 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> | 44 | mode="aspectFit" |
| 45 | <view class="picker"> | 45 | ></image> |
| 46 | <view class="picker-choice"> | 46 | 填写验光数据 |
| 47 | <view class="choice-left"> | ||
| 48 | <text class="pd">验光单取名:</text> | ||
| 49 | </view> | ||
| 50 | <input type="text" @blur="handleInput" class="input" | ||
| 51 | placeholder="请输入名称" maxlength="20" :value="name" /> | ||
| 52 | </view> | ||
| 53 | </view> | ||
| 54 | <view class="picker" > | ||
| 55 | <view class="picker-choice"> | ||
| 56 | <view class="choice-left"> | ||
| 57 | <text class="p11">{{pickerInfoList[0].nameC}}</text> | ||
| 58 | <text class="p12">{{pickerInfoList[0].nameE}}</text> | ||
| 59 | </view> | ||
| 60 | <text class="p13">左 (OD)</text> | ||
| 61 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> | ||
| 62 | <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> | ||
| 63 | <view class="p14"> | ||
| 64 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} | ||
| 65 | <image src="../../static/detail-tabicon.png" ></image> | ||
| 66 | </view> | 47 | </view> |
| 67 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 48 | <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> |
| 68 | </picker> | 49 | <view class="picker"> |
| 69 | <text class="p13">右 (OS)</text> | 50 | <view class="picker-choice"> |
| 70 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> | 51 | <view class="choice-left"> |
| 71 | <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> | 52 | <text class="pd">验光单取名:</text> |
| 72 | <view class="p14"> | 53 | </view> |
| 73 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} | 54 | <input |
| 74 | <image src="../../static/detail-tabicon.png" ></image> | 55 | type="text" |
| 56 | @blur="handleInput" | ||
| 57 | class="input" | ||
| 58 | placeholder="请输入名称" | ||
| 59 | maxlength="20" | ||
| 60 | :value="name" | ||
| 61 | /> | ||
| 62 | </view> | ||
| 75 | </view> | 63 | </view> |
| 76 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 64 | <view class="picker"> |
| 77 | </picker> | 65 | <view class="picker-choice"> |
| 78 | </view> | 66 | <view class="choice-left"> |
| 79 | </view> | 67 | <text class="p11">{{pickerInfoList[0].nameC}}</text> |
| 80 | <view class="picker" > | 68 | <text class="p12">{{pickerInfoList[0].nameE}}</text> |
| 81 | <view class="picker-choice"> | 69 | </view> |
| 82 | <view class="choice-left"> | 70 | <text class="p13">左 (OD)</text> |
| 83 | <text class="p11">{{pickerInfoList[1].nameC}}</text> | 71 | <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> --> |
| 84 | <text class="p12">{{pickerInfoList[1].nameE}}</text> | 72 | <picker |
| 85 | </view> | 73 | @change="bindPickerChange01" |
| 86 | <text class="p13">左 (OD)</text> | 74 | :value="pickerInfoList[0].nameIndex1" |
| 87 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> | 75 | :range="pickerInfoList[0].nameArray1" |
| 88 | <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> | 76 | > |
| 89 | <view class="p14"> | 77 | <view class="p14"> |
| 90 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} | 78 | {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}} |
| 91 | <image src="../../static/detail-tabicon.png" ></image> | 79 | <image src="../../static/detail-tabicon.png"></image> |
| 80 | </view> | ||
| 81 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | ||
| 82 | </picker> | ||
| 83 | <text class="p13">右 (OS)</text> | ||
| 84 | <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> --> | ||
| 85 | <picker | ||
| 86 | @change="bindPickerChange02" | ||
| 87 | :value="pickerInfoList[0].nameIndex2" | ||
| 88 | :range="pickerInfoList[0].nameArray2" | ||
| 89 | > | ||
| 90 | <view class="p14"> | ||
| 91 | {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}} | ||
| 92 | <image src="../../static/detail-tabicon.png"></image> | ||
| 93 | </view> | ||
| 94 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | ||
| 95 | </picker> | ||
| 96 | </view> | ||
| 92 | </view> | 97 | </view> |
| 93 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 98 | <view class="picker"> |
| 94 | </picker> | 99 | <view class="picker-choice"> |
| 95 | <text class="p13">右 (OS)</text> | 100 | <view class="choice-left"> |
| 96 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> | 101 | <text class="p11">{{pickerInfoList[1].nameC}}</text> |
| 97 | <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> | 102 | <text class="p12">{{pickerInfoList[1].nameE}}</text> |
| 98 | <view class="p14"> | 103 | </view> |
| 99 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} | 104 | <text class="p13">左 (OD)</text> |
| 100 | <image src="../../static/detail-tabicon.png" ></image> | 105 | <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> --> |
| 106 | <picker | ||
| 107 | @change="bindPickerChange11" | ||
| 108 | :value="pickerInfoList[1].nameIndex1" | ||
| 109 | :range="pickerInfoList[1].nameArray1" | ||
| 110 | > | ||
| 111 | <view class="p14"> | ||
| 112 | {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}} | ||
| 113 | <image src="../../static/detail-tabicon.png"></image> | ||
| 114 | </view> | ||
| 115 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | ||
| 116 | </picker> | ||
| 117 | <text class="p13">右 (OS)</text> | ||
| 118 | <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> --> | ||
| 119 | <picker | ||
| 120 | @change="bindPickerChange12" | ||
| 121 | :value="pickerInfoList[1].nameIndex2" | ||
| 122 | :range="pickerInfoList[1].nameArray2" | ||
| 123 | > | ||
| 124 | <view class="p14"> | ||
| 125 | {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}} | ||
| 126 | <image src="../../static/detail-tabicon.png"></image> | ||
| 127 | </view> | ||
| 128 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | ||
| 129 | </picker> | ||
| 130 | </view> | ||
| 101 | </view> | 131 | </view> |
| 102 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 132 | <view class="picker"> |
| 103 | </picker> | 133 | <view class="picker-choice"> |
| 104 | </view> | 134 | <view class="choice-left"> |
| 105 | </view> | 135 | <text class="p11">{{pickerInfoList[2].nameC}}</text> |
| 106 | <view class="picker" > | 136 | <text class="p12">{{pickerInfoList[2].nameE}}</text> |
| 107 | <view class="picker-choice"> | 137 | </view> |
| 108 | <view class="choice-left"> | 138 | <text class="p13">左 (OD)</text> |
| 109 | <text class="p11">{{pickerInfoList[2].nameC}}</text> | 139 | <picker |
| 110 | <text class="p12">{{pickerInfoList[2].nameE}}</text> | 140 | @change="bindPickerChange21" |
| 111 | </view> | 141 | :value="pickerInfoList[2].nameIndex1" |
| 112 | <text class="p13">左 (OD)</text> | 142 | :range="pickerInfoList[2].nameArray1" |
| 113 | <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> | 143 | > |
| 114 | <view class="p14"> | 144 | <view class="p14"> |
| 115 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} | 145 | {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}} |
| 116 | <image src="../../static/detail-tabicon.png" ></image> | 146 | <image src="../../static/detail-tabicon.png"></image> |
| 147 | </view> | ||
| 148 | </picker> | ||
| 149 | <text class="p13">右 (OS)</text> | ||
| 150 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> | ||
| 151 | <picker | ||
| 152 | @change="bindPickerChange22" | ||
| 153 | :value="pickerInfoList[2].nameIndex2" | ||
| 154 | :range="pickerInfoList[2].nameArray2" | ||
| 155 | > | ||
| 156 | <view class="p14"> | ||
| 157 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} | ||
| 158 | <image src="../../static/detail-tabicon.png"></image> | ||
| 159 | </view> | ||
| 160 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | ||
| 161 | </picker> | ||
| 162 | </view> | ||
| 117 | </view> | 163 | </view> |
| 118 | </picker> | 164 | <view class="picker"> |
| 119 | <text class="p13">右 (OS)</text> | 165 | <view class="picker-choice"> |
| 120 | <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> --> | 166 | <view class="choice-left"> |
| 121 | <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> | 167 | <text class="pd">瞳距:</text> |
| 122 | <view class="p14"> | 168 | </view> |
| 123 | {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}} | 169 | <input |
| 124 | <image src="../../static/detail-tabicon.png" ></image> | 170 | type="digit" |
| 171 | @change="handleInputPd" | ||
| 172 | class="input" | ||
| 173 | placeholder="请输入瞳距,单位cm" | ||
| 174 | maxlength="20" | ||
| 175 | :value="pd" | ||
| 176 | /> | ||
| 177 | </view> | ||
| 125 | </view> | 178 | </view> |
| 126 | <!-- <image src="../../static/detail-tabicon.png" ></image> --> | 179 | <view class="picker"> |
| 127 | </picker> | 180 | <view class="picker-choice"> |
| 128 | </view> | 181 | <view class="choice-left"> |
| 129 | </view> | 182 | <text class="p11">{{pickerInfoList[3].nameC}}</text> |
| 130 | <view class="picker"> | 183 | </view> |
| 131 | <view class="picker-choice"> | 184 | <text class="p13-date">年 (Y)</text> |
| 132 | <view class="choice-left"> | 185 | <picker |
| 133 | <text class="pd">瞳距:</text> | 186 | @change="bindPickerChange41" |
| 134 | </view> | 187 | :value="pickerInfoList[3].nameIndex1" |
| 135 | <input type="digit" @change="handleInputPd" class="input" | 188 | :range="pickerInfoList[3].nameArray1" |
| 136 | placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" /> | 189 | > |
| 137 | </view> | 190 | <view |
| 138 | </view> | 191 | class="p14" |
| 139 | <view class="picker" > | 192 | style="width: 30px;" |
| 140 | <view class="picker-choice"> | 193 | > |
| 141 | <view class="choice-left"> | 194 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} |
| 142 | <text class="p11">{{pickerInfoList[3].nameC}}</text> | 195 | <image src="../../static/detail-tabicon.png"></image> |
| 143 | </view> | 196 | </view> |
| 144 | <text class="p13-date">年 (Y)</text> | 197 | </picker> |
| 145 | <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> | 198 | <text class="p13-date">月 (M)</text> |
| 146 | <view class="p14" style="width: 30px;"> | 199 | <picker |
| 147 | {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}} | 200 | @change="bindPickerChange42" |
| 148 | <image src="../../static/detail-tabicon.png" ></image> | 201 | :value="pickerInfoList[3].nameIndex2" |
| 149 | </view> | 202 | :range="pickerInfoList[3].nameArray2" |
| 150 | </picker> | 203 | > |
| 151 | <text class="p13-date">月 (M)</text> | 204 | <view |
| 152 | <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> | 205 | class="p14" |
| 153 | <view class="p14" style="width: 30px;"> | 206 | style="width: 30px;" |
| 154 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} | 207 | > |
| 155 | <image src="../../static/detail-tabicon.png" ></image> | 208 | {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}} |
| 209 | <image src="../../static/detail-tabicon.png"></image> | ||
| 210 | </view> | ||
| 211 | </picker> | ||
| 212 | <text class="p13-date">日 (D)</text> | ||
| 213 | <picker | ||
| 214 | @change="bindPickerChange43" | ||
| 215 | :value="pickerInfoList[3].nameIndex3" | ||
| 216 | :range="pickerInfoList[3].nameArray3" | ||
| 217 | > | ||
| 218 | <view | ||
| 219 | class="p14" | ||
| 220 | style="width: 30px;" | ||
| 221 | > | ||
| 222 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} | ||
| 223 | <image src="../../static/detail-tabicon.png"></image> | ||
| 224 | </view> | ||
| 225 | </picker> | ||
| 226 | </view> | ||
| 156 | </view> | 227 | </view> |
| 157 | </picker> | 228 | <view class="confirm"> |
| 158 | <text class="p13-date">日 (D)</text> | 229 | <image |
| 159 | <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> | 230 | class="image1" |
| 160 | <view class="p14" style="width: 30px;"> | 231 | :src="confirm ? tabicon[0] : tabicon[1]" |
| 161 | {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}} | 232 | @tap="changeConfirm" |
| 162 | <image src="../../static/detail-tabicon.png" ></image> | 233 | ></image> |
| 234 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
| 163 | </view> | 235 | </view> |
| 164 | </picker> | 236 | </view> |
| 165 | </view> | ||
| 166 | </view> | ||
| 167 | <view class="confirm"> | ||
| 168 | <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image> | ||
| 169 | <text>确认以上输入信息来源于我的验光数据!</text> | ||
| 170 | </view> | ||
| 171 | </view> | ||
| 172 | </template> | 237 | </template> |
| 173 | <template v-else> | 238 | <template v-else> |
| 174 | <view | 239 | <view |
| 175 | v-for="item in pickerInfoList" | 240 | v-for="item in pickerInfoList" |
| 176 | :key="item.key" | 241 | :key="item.key" |
| 177 | class="bodyBox" | 242 | class="bodyBox" |
| 178 | > | 243 | > |
| 179 | <template v-if="item.nameC==='验光日期'"> | 244 | <template v-if="item.nameC==='验光日期'"> |
| 180 | <text class="names">{{item.nameC}}</text> | 245 | <text class="names">{{item.nameC}}</text> |
| 181 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> | 246 | <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> |
| 182 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> | 247 | <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> |
| 183 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> | 248 | <text>{{item.nameArray3[item.nameIndex2]}}日</text> |
| 184 | </template> | 249 | </template> |
| 185 | <template v-else> | 250 | <template v-else> |
| 186 | <template v-if="item.nameC==='度数'"> | 251 | <template v-if="item.nameC==='度数'"> |
| 187 | <text style="display: inline;">*</text> | 252 | <text style="display: inline;">*</text> |
| 188 | </template> | 253 | </template> |
| 189 | 254 | ||
| 190 | <text class="names">{{item.nameC}}</text> | 255 | <text class="names">{{item.nameC}}</text> |
| 191 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> | 256 | <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text> |
| 192 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> | 257 | <text>右 {{item.nameArray2[item.nameIndex2]}}</text> |
| 193 | </template> | 258 | </template> |
| 194 | </view> | 259 | </view> |
| 195 | </template> | 260 | </template> |
| 196 | </view> | 261 | </view> |
| 197 | </view> | 262 | </view> |
| 198 | </view> | 263 | </view> |
| 199 | <view class="choose"> | 264 | <view class="choose"> |
| 200 | <view | 265 | <view |
| 201 | class="chooseItem_1_content" | 266 | class="chooseItem_1_content" |
| 202 | v-for="(item,index) in attrList" | 267 | v-for="(item,index) in attrList" |
| 203 | :key="index" | 268 | :key="index" |
| 204 | > | 269 | > |
| 205 | <UniCollapse @change="changeShow(index)"> | 270 | <UniCollapse @change="changeShow(index)"> |
| 206 | <UniCollapseItem | 271 | <UniCollapseItem |
| 207 | :open="show[index]" | 272 | :open="show[index]" |
| 208 | :title="item.meta_name" | 273 | :title="item.meta_name" |
| 209 | showAnimation=false | 274 | showAnimation=false |
| 210 | > | 275 | > |
| 211 | <view class="chooseItem_1_content"> | 276 | <view class="chooseItem_1_content"> |
| 212 | <view class="itemsWrap"> | 277 | <view class="itemsWrap"> |
| 213 | <view | 278 | <view |
| 214 | class="item2" | 279 | class="item2" |
| 215 | v-for="(one,i) in item.attr" | 280 | v-for="(one,i) in item.attr" |
| 216 | :key="i" | 281 | :key="i" |
| 217 | :class="{ active2: current[index] === i }" | 282 | :class="{ active2: current[index] === i }" |
| 218 | @click="onClickItem(index, i)" | 283 | @click="onClickItem(index, i)" |
| 219 | >{{one.name}}</view> | 284 | >{{one.name}}</view> |
| 220 | </view> | 285 | </view> |
| 221 | </view> | 286 | </view> |
| 222 | </UniCollapseItem> | 287 | </UniCollapseItem> |
| 223 | </UniCollapse> | 288 | </UniCollapse> |
| 224 | <view | 289 | <view |
| 225 | class="chooseRes" | 290 | class="chooseRes" |
| 226 | v-show="!show[index]" | 291 | v-show="!show[index]" |
| 227 | >* {{attrList[index].attr[current[index]].name}}</view> | 292 | >* {{attrList[index].attr[current[index]].name}}</view> |
| 228 | </view> | 293 | </view> |
| 229 | <!-- <view class="chooseItem_1 chooseItem"> | 294 | <!-- <view class="chooseItem_1 chooseItem"> |
| 230 | <UniCollapse @change="change(1)"> | 295 | <UniCollapse @change="change(1)"> |
| 231 | <UniCollapseItem | 296 | <UniCollapseItem |
| 232 | open=true | 297 | open=true |
| 233 | title="款式挑选" | 298 | title="款式挑选" |
| 234 | showAnimation=false | 299 | showAnimation=false |
| 235 | > | 300 | > |
| 236 | <view | 301 | <view |
| 237 | class="chooseRes" | 302 | class="chooseRes" |
| 238 | v-show="show[1]" | 303 | v-show="show[1]" |
| 239 | >* {{chooseRes1}}</view> | 304 | >* {{chooseRes1}}</view> |
| 240 | <view class="chooseItem_1_content"> | 305 | <view class="chooseItem_1_content"> |
| 241 | <view class="itemsWrap"> | 306 | <view class="itemsWrap"> |
| 242 | <view | 307 | <view |
| 243 | class="item1" | 308 | class="item1" |
| 244 | v-for="(item,index) in chooseItem1" | 309 | v-for="(item,index) in chooseItem1" |
| 245 | :key="index" | 310 | :key="index" |
| 246 | :style="item.style" | 311 | :style="item.style" |
| 247 | :class="{ active1: current1 === index }" | 312 | :class="{ active1: current1 === index }" |
| 248 | @click="onClickItem1(index)" | 313 | @click="onClickItem1(index)" |
| 249 | ></view> | 314 | ></view> |
| 250 | </view> | 315 | </view> |
| 251 | </view> | 316 | </view> |
| 252 | </UniCollapseItem> | 317 | </UniCollapseItem> |
| 253 | </UniCollapse> | 318 | </UniCollapse> |
| 254 | <view | 319 | <view |
| 255 | class="chooseRes" | 320 | class="chooseRes" |
| 256 | v-show="show[1]" | 321 | v-show="show[1]" |
| 257 | >* {{chooseRes1}}</view> | 322 | >* {{chooseRes1}}</view> |
| 258 | </view> | 323 | </view> |
| 259 | <view class="chooseItem_2 chooseItem "> | 324 | <view class="chooseItem_2 chooseItem "> |
| 260 | <UniCollapse @change="change(2)"> | 325 | <UniCollapse @change="change(2)"> |
| 261 | <UniCollapseItem | 326 | <UniCollapseItem |
| 262 | open=true | 327 | open=true |
| 263 | title="直径" | 328 | title="直径" |
| 264 | showAnimation=false | 329 | showAnimation=false |
| 265 | > | 330 | > |
| 266 | <view class="chooseItem_1_content"> | 331 | <view class="chooseItem_1_content"> |
| 267 | <view class="itemsWrap"> | 332 | <view class="itemsWrap"> |
| 268 | <view | 333 | <view |
| 269 | class="item2" | 334 | class="item2" |
| 270 | v-for="(item,index) in chooseItem2" | 335 | v-for="(item,index) in chooseItem2" |
| 271 | :key="index" | 336 | :key="index" |
| 272 | :class="{ active2: current2 === index }" | 337 | :class="{ active2: current2 === index }" |
| 273 | @click="onClickItem2(index)" | 338 | @click="onClickItem2(index)" |
| 274 | >{{item.num}}</view> | 339 | >{{item.num}}</view> |
| 275 | </view> | 340 | </view> |
| 276 | </view> | 341 | </view> |
| 277 | </UniCollapseItem> | 342 | </UniCollapseItem> |
| 278 | </UniCollapse> | 343 | </UniCollapse> |
| 279 | <view | 344 | <view |
| 280 | class="chooseRes" | 345 | class="chooseRes" |
| 281 | v-show="show[2]" | 346 | v-show="show[2]" |
| 282 | >* {{chooseRes2}}</view> | 347 | >* {{chooseRes2}}</view> |
| 283 | </view> | 348 | </view> |
| 284 | <view class="chooseItem_3 chooseItem"> | 349 | <view class="chooseItem_3 chooseItem"> |
| 285 | <UniCollapse @change="change(3)"> | 350 | <UniCollapse @change="change(3)"> |
| 286 | <UniCollapseItem | 351 | <UniCollapseItem |
| 287 | open=true | 352 | open=true |
| 288 | title="度数" | 353 | title="度数" |
| 289 | showAnimation=false | 354 | showAnimation=false |
| 290 | > | 355 | > |
| 291 | <view class="chooseItem_1_content"> | 356 | <view class="chooseItem_1_content"> |
| 292 | <view class="itemsWrap"> | 357 | <view class="itemsWrap"> |
| 293 | <view | 358 | <view |
| 294 | class="item2" | 359 | class="item2" |
| 295 | v-for="(item,index) in chooseItem3" | 360 | v-for="(item,index) in chooseItem3" |
| 296 | :key="index" | 361 | :key="index" |
| 297 | :class="{ active2: current3 === index }" | 362 | :class="{ active2: current3 === index }" |
| 298 | @click="onClickItem3(index)" | 363 | @click="onClickItem3(index)" |
| 299 | >{{item}}</view> | 364 | >{{item}}</view> |
| 300 | </view> | 365 | </view> |
| 301 | </view> | 366 | </view> |
| 302 | </UniCollapseItem> | 367 | </UniCollapseItem> |
| 303 | </UniCollapse> | 368 | </UniCollapse> |
| 304 | <view | 369 | <view |
| 305 | class="chooseRes" | 370 | class="chooseRes" |
| 306 | v-show="show[3]" | 371 | v-show="show[3]" |
| 307 | >* {{chooseRes3}}</view> | 372 | >* {{chooseRes3}}</view> |
| 308 | </view> --> | 373 | </view> --> |
| 309 | </view> | 374 | </view> |
| 310 | <view | 375 | <view |
| 311 | class="button" | 376 | class="button" |
| 312 | @click="toComfirmOrder" | 377 | @click="toComfirmOrder" |
| 313 | > | 378 | > |
| 314 | 立即结算 | 379 | 立即结算 |
| 315 | </view> | 380 | </view> |
| 316 | </view> | 381 | </view> |
| 317 | </template> | 382 | </template> |
| 318 | 383 | ||
| 319 | <script> | 384 | <script> |
| 320 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 385 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 321 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 386 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 322 | import store from '@/store' | 387 | import store from '@/store' |
| 323 | 388 | ||
| 324 | export default { | 389 | export default { |
| 325 | components: { | 390 | components: { |
| 326 | UniCollapse, | 391 | UniCollapse, |
| 327 | UniCollapseItem, | 392 | UniCollapseItem, |
| 328 | }, | 393 | }, |
| 329 | data() { | 394 | data() { |
| 330 | return { | 395 | return { |
| 331 | count: 1, | 396 | count: 1, |
| 332 | pid: 0, | 397 | pid: 0, |
| 333 | maxCount: 20, | 398 | maxCount: 20, |
| 334 | dataName: '', // 验光数据人员名称 | 399 | dataName: '', // 验光数据人员名称 |
| 335 | isDataName: false, // 是否是已存在的人员数据 | 400 | isDataName: false, // 是否是已存在的人员数据 |
| 336 | dataConfirm: false, // 已确认所输入验光数据 | 401 | dataConfirm: false, // 已确认所输入验光数据 |
| 337 | opIsOpen: true, | 402 | opIsOpen: true, |
| 338 | addDisabled: false, | 403 | addDisabled: false, |
| 339 | desDisabled: false, | 404 | desDisabled: false, |
| 340 | current1: 0, | 405 | current1: 0, |
| 341 | current2: 0, | 406 | current2: 0, |
| 342 | current3: 0, | 407 | current3: 0, |
| 343 | current: [], | 408 | current: [], |
| 344 | show: [], | 409 | show: [], |
| 345 | chooseRes1: { | 410 | chooseRes1: { |
| 346 | sku_name: 'Miss 黑二代【减龄自然】', | 411 | sku_name: 'Miss 黑二代【减龄自然】', |
| 347 | sk_id: '128', | 412 | sk_id: '128', |
| 348 | }, | 413 | }, |
| 349 | checkedData: {}, | 414 | checkedData: {}, |
| 350 | chooseRes2: '14.0', | 415 | chooseRes2: '14.0', |
| 351 | chooseRes3: 0, | 416 | chooseRes3: 0, |
| 352 | chooseItem1: [ | 417 | chooseItem1: [ |
| 353 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, | 418 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' }, |
| 354 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, | 419 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' }, |
| 355 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, | 420 | { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' }, |
| 356 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 421 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 357 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 422 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 358 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 423 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 359 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 424 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 360 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 425 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 361 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 426 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 362 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 427 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 363 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 428 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 364 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, | 429 | { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' }, |
| 365 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, | 430 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' }, |
| 366 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, | 431 | { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' }, |
| 367 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, | 432 | { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' }, |
| 368 | ], | 433 | ], |
| 369 | chooseItem2: [ | 434 | chooseItem2: [ |
| 370 | { num: '14.0' }, | 435 | { num: '14.0' }, |
| 371 | { num: '14.2' }, | 436 | { num: '14.2' }, |
| 372 | { num: '14.4' }, | 437 | { num: '14.4' }, |
| 373 | { num: '14.5' }, | 438 | { num: '14.5' }, |
| 374 | ], | 439 | ], |
| 375 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], | 440 | chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000], |
| 376 | // 度数相关数据 | 441 | // 度数相关数据 |
| 377 | pickerInfoList: [ | 442 | pickerInfoList: [ |
| 378 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, | 443 | { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 }, |
| 379 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, | 444 | { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 }, |
| 380 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, | 445 | { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 }, |
| 381 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, | 446 | { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 }, |
| 382 | ], | 447 | ], |
| 383 | confirm: false, // 用户是否确认 | 448 | confirm: false, // 用户是否确认 |
| 384 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], | 449 | tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'], |
| 385 | name: '夏小花', | 450 | name: '夏小花', |
| 386 | oldname: '', // 用于判读用户是否改变名字 | 451 | oldname: '', // 用于判读用户是否改变名字 |
| 387 | pickerInfoChioce: { | 452 | pickerInfoChioce: { |
| 388 | leftSph: '', | 453 | leftSph: '', |
| 389 | rightSph: '', | 454 | rightSph: '', |
| 390 | leftCyl: '', | 455 | leftCyl: '', |
| 391 | rightCyl: '', | 456 | rightCyl: '', |
| 392 | leftAxi: '', | 457 | leftAxi: '', |
| 393 | rightAxi: '', | 458 | rightAxi: '', |
| 394 | time: { | 459 | time: { |
| 395 | year: 0, | 460 | year: 0, |
| 396 | month: 0, | 461 | month: 0, |
| 397 | day: 0, | 462 | day: 0, |
| 398 | }, | 463 | }, |
| 399 | }, | 464 | }, |
| 400 | pd: '', // 瞳距 | 465 | pd: '', // 瞳距 |
| 401 | oldpd: '', // 用于判断用户是否改变瞳距 | 466 | oldpd: '', // 用于判断用户是否改变瞳距 |
| 402 | kinds: 1, // kinds=1，提交为新增验光，2为修改 | 467 | kinds: 1, // kinds=1，提交为新增验光，2为修改 |
| 403 | mp_id: Number, | 468 | mp_id: Number, |
| 404 | } | 469 | } |
| 405 | }, | 470 | }, |
| 406 | computed: { | 471 | computed: { |
| 407 | attrList() { | 472 | attrList() { |
| 408 | return this.$store.state.read.goodInfo.attrList | 473 | return this.$store.state.read.goodInfo.attrList |
| 409 | }, | 474 | }, |
| 410 | skuList() { | 475 | skuList() { |
| 411 | return this.$store.state.read.goodInfo.skuList | 476 | return this.$store.state.read.goodInfo.skuList |
| 412 | }, | 477 | }, |
| 413 | mpList() { | 478 | mpList() { |
| 414 | return this.$store.state.myLoveList.loveList | 479 | return this.$store.state.myLoveList.loveList |
| 415 | }, | 480 | }, |
| 416 | }, | 481 | }, |
| 417 | onLoad({ pid }) { | 482 | onLoad({ pid }) { |
| 418 | this.pid = pid | 483 | this.pid = pid |
| 419 | store.dispatch('read/fetch', { | 484 | store.dispatch('read/fetch', { |
| 420 | pid, | 485 | pid, |
| 421 | }).then(() => { | 486 | }).then(() => { |
| 422 | const current = [] | 487 | const current = [] |
| 423 | const show = [] | 488 | const show = [] |
| 424 | for (let index = 0; index < this.attrList.length; index++) { | 489 | for (let index = 0; index < this.attrList.length; index++) { |
| 425 | current.push(0) | 490 | current.push(0) |
| 426 | show.push(true) | 491 | show.push(true) |
| 427 | } | 492 | } |
| 428 | this.current = current | 493 | this.current = current |
| 429 | this.show = show | 494 | this.show = show |
| 430 | }) | 495 | }) |
| 431 | store.dispatch('myLoveList/getLoveList') | 496 | store.dispatch('myLoveList/getLoveList') |
| 432 | 497 | ||
| 433 | // 初始化SPL、CYL、AXI的值 | 498 | // 初始化SPL、CYL、AXI的值 |
| 434 | for (let j = 0; j < 3; j++) { | 499 | for (let j = 0; j < 3; j++) { |
| 435 | for (let i = -12; i < 6; i++) { | 500 | for (let i = -12; i < 6; i++) { |
| 436 | this.pickerInfoList[j].nameArray1.push(i) | 501 | this.pickerInfoList[j].nameArray1.push(i) |
| 437 | this.pickerInfoList[j].nameArray1.push(i + 0.5) | 502 | this.pickerInfoList[j].nameArray1.push(i + 0.5) |
| 438 | this.pickerInfoList[j].nameArray2.push(i) | 503 | this.pickerInfoList[j].nameArray2.push(i) |
| 439 | this.pickerInfoList[j].nameArray2.push(i + 0.5) | 504 | this.pickerInfoList[j].nameArray2.push(i + 0.5) |
| 440 | if (i >= -6) { | 505 | if (i >= -6) { |
| 441 | this.pickerInfoList[j].nameArray1.push(i + 0.25) | 506 | this.pickerInfoList[j].nameArray1.push(i + 0.25) |
| 442 | this.pickerInfoList[j].nameArray1.push(i + 0.75) | 507 | this.pickerInfoList[j].nameArray1.push(i + 0.75) |
| 443 | this.pickerInfoList[j].nameArray2.push(i + 0.25) | 508 | this.pickerInfoList[j].nameArray2.push(i + 0.25) |
| 444 | this.pickerInfoList[j].nameArray2.push(i + 0.75) | 509 | this.pickerInfoList[j].nameArray2.push(i + 0.75) |
| 445 | } | 510 | } |
| 446 | if (i === 5) { | 511 | if (i === 5) { |
| 447 | this.pickerInfoList[j].nameArray1.push(i + 1) | 512 | this.pickerInfoList[j].nameArray1.push(i + 1) |
| 448 | this.pickerInfoList[j].nameArray2.push(i + 1) | 513 | this.pickerInfoList[j].nameArray2.push(i + 1) |
| 449 | } | 514 | } |
| 450 | } | 515 | } |
| 451 | } | 516 | } |
| 452 | // 初始化日期值 | 517 | // 初始化日期值 |
| 453 | for (let i = 1; i < 32; i++) { | 518 | for (let i = 1; i < 32; i++) { |
| 454 | this.pickerInfoList[3].nameArray3.push(i) | 519 | this.pickerInfoList[3].nameArray3.push(i) |
| 455 | } | 520 | } |
| 456 | // 初始化年份前后五年 | 521 | // 初始化年份前后五年 |
| 457 | const myDate = new Date() | 522 | const myDate = new Date() |
| 458 | const nowYear = myDate.getFullYear() | 523 | const nowYear = myDate.getFullYear() |
| 459 | for (let i = 0; i < 5; i++) { | 524 | for (let i = 0; i < 5; i++) { |
| 460 | this.pickerInfoList[3].nameArray1.push(nowYear - i) | 525 | this.pickerInfoList[3].nameArray1.push(nowYear - i) |
| 461 | } | 526 | } |
| 462 | }, | 527 | }, |
| 463 | methods: { | 528 | methods: { |
| 464 | // picker相关功能 | 529 | // picker相关功能 |
| 465 | handleInput(e) { | 530 | handleInput(e) { |
| 466 | this.name = e.target.value | 531 | this.name = e.target.value |
| 467 | this.isDataName = false | 532 | this.isDataName = false |
| 468 | console.log('e---->', e) | 533 | console.log('e---->', e) |
| 469 | const mpList = this.mpList | 534 | const mpList = this.mpList |
| 470 | console.log('mpList===>', mpList) | 535 | console.log('mpList===>', mpList) |
| 471 | for (let index = 0; index < mpList.length; index++) { | 536 | for (let index = 0; index < mpList.length; index++) { |
| 472 | if (e.detail.value === mpList[index].name) { | 537 | if (e.detail.value === mpList[index].name) { |
| 473 | this.isDataName = true | 538 | this.isDataName = true |
| 474 | uni.showModal({ | 539 | uni.showModal({ |
| 475 | title: '提示', | 540 | title: '提示', |
| 476 | content: `是否填充已有的"${e.detail.value}"的数据`, | 541 | content: `是否填充已有的"${e.detail.value}"的数据`, |
| 477 | success: (res) => { | 542 | success: (res) => { |
| 478 | if (res.confirm) { | 543 | if (res.confirm) { |
| 479 | this.kinds = 2 | 544 | this.kinds = 2 |
| 480 | console.log('args===>', index) | 545 | console.log('args===>', index) |
| 481 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) | 546 | // const mpList=Object.assign({},this.$store.state.mympList.mpList) |
| 482 | console.log('mpList===>', mpList) | 547 | console.log('mpList===>', mpList) |
| 483 | this.name = mpList[index].name | 548 | this.name = mpList[index].name |
| 484 | this.pd = mpList[index].pd | 549 | this.pd = mpList[index].pd |
| 485 | this.mp_id = mpList[index].mp_id | 550 | this.mp_id = mpList[index].mp_id |
| 486 | this.oldname = mpList[index].name | 551 | this.oldname = mpList[index].name |
| 487 | this.oldpd = mpList[index].pd | 552 | this.oldpd = mpList[index].pd |
| 488 | // 将kinds =2时的值传到该页面 | 553 | // 将kinds =2时的值传到该页面 |
| 489 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) | 554 | this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph) |
| 490 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) | 555 | this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph) |
| 491 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) | 556 | this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl) |
| 492 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) | 557 | this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl) |
| 493 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) | 558 | this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi) |
| 494 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) | 559 | this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi) |
| 495 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) | 560 | this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4)) |
| 496 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { | 561 | if (mpList[index].in_time.toString().slice(5, 6) === 0) { |
| 497 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) | 562 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7)) |
| 498 | } else { | 563 | } else { |
| 499 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) | 564 | this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7)) |
| 500 | } | 565 | } |
| 501 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { | 566 | if (mpList[index].in_time.toString().slice(8, 9) === 0) { |
| 502 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) | 567 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10)) |
| 503 | } else { | 568 | } else { |
| 504 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) | 569 | this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10)) |
| 505 | } | 570 | } |
| 506 | // this.checkedData = mpList[index] | 571 | // this.checkedData = mpList[index] |
| 507 | // console.log('checkedData', this.checkedData) | 572 | // console.log('checkedData', this.checkedData) |
| 508 | } else if (res.cancel) { | 573 | } else if (res.cancel) { |
| 509 | this.kinds = 2 | 574 | this.kinds = 2 |
| 510 | } | 575 | } |
| 511 | }, | 576 | }, |
| 512 | }) | 577 | }) |
| 513 | } | 578 | } |
| 514 | } | 579 | } |
| 515 | }, | 580 | }, |
| 516 | handleInputPd(e) { | 581 | handleInputPd(e) { |
| 517 | // 只能输入正浮点数或正数 | 582 | // 只能输入正浮点数或正数 |
| 518 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { | 583 | if (/^\d+(\.\d+)?$/.test(e.target.value)) { |
| 519 | this.pd = e.target.value | 584 | this.pd = e.target.value |
| 520 | } else { | 585 | } else { |
| 521 | uni.showToast({ | 586 | uni.showToast({ |
| 522 | title: '请输入有效数据;示例:89', | 587 | title: '请输入有效数据;示例:89', |
| 523 | icon: 'none', | 588 | icon: 'none', |
| 524 | duration: 2000, | 589 | duration: 2000, |
| 525 | }) | 590 | }) |
| 526 | this.pd = '' | 591 | this.pd = '' |
| 527 | } | 592 | } |
| 528 | }, | 593 | }, |
| 529 | changeConfirm() { | 594 | changeConfirm() { |
| 530 | this.confirm = !this.confirm | 595 | this.confirm = !this.confirm |
| 531 | }, | 596 | }, |
| 532 | bindPickerChange01: function(e) { | 597 | bindPickerChange01: function(e) { |
| 533 | this.pickerInfoList[0].nameIndex1 = e.target.value | 598 | this.pickerInfoList[0].nameIndex1 = e.target.value |
| 534 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] | 599 | this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value] |
| 535 | }, | 600 | }, |
| 536 | bindPickerChange02: function(e) { | 601 | bindPickerChange02: function(e) { |
| 537 | this.pickerInfoList[0].nameIndex2 = e.target.value | 602 | this.pickerInfoList[0].nameIndex2 = e.target.value |
| 538 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] | 603 | this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value] |
| 539 | }, | 604 | }, |
| 540 | 605 | ||
| 541 | bindPickerChange11: function(e) { | 606 | bindPickerChange11: function(e) { |
| 542 | this.pickerInfoList[1].nameIndex1 = e.target.value | 607 | this.pickerInfoList[1].nameIndex1 = e.target.value |
| 543 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] | 608 | this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value] |
| 544 | }, | 609 | }, |
| 545 | bindPickerChange12: function(e) { | 610 | bindPickerChange12: function(e) { |
| 546 | this.pickerInfoList[1].nameIndex2 = e.target.value | 611 | this.pickerInfoList[1].nameIndex2 = e.target.value |
| 547 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] | 612 | this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value] |
| 548 | }, | 613 | }, |
| 549 | 614 | ||
| 550 | bindPickerChange21: function(e) { | 615 | bindPickerChange21: function(e) { |
| 551 | this.pickerInfoList[2].nameIndex1 = e.target.value | 616 | this.pickerInfoList[2].nameIndex1 = e.target.value |
| 552 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] | 617 | this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value] |
| 553 | }, | 618 | }, |
| 554 | bindPickerChange22: function(e) { | 619 | bindPickerChange22: function(e) { |
| 555 | this.pickerInfoList[2].nameIndex2 = e.target.value | 620 | this.pickerInfoList[2].nameIndex2 = e.target.value |
| 556 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] | 621 | this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value] |
| 557 | }, | 622 | }, |
| 558 | 623 | ||
| 559 | bindPickerChange41: function(e) { | 624 | bindPickerChange41: function(e) { |
| 560 | this.pickerInfoList[3].nameIndex1 = e.target.value | 625 | this.pickerInfoList[3].nameIndex1 = e.target.value |
| 561 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] | 626 | this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value] |
| 562 | }, | 627 | }, |
| 563 | bindPickerChange42: function(e) { | 628 | bindPickerChange42: function(e) { |
| 564 | this.pickerInfoList[3].nameIndex2 = e.target.value | 629 | this.pickerInfoList[3].nameIndex2 = e.target.value |
| 565 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] | 630 | this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value] |
| 566 | }, | 631 | }, |
| 567 | bindPickerChange43: function(e) { | 632 | bindPickerChange43: function(e) { |
| 568 | this.pickerInfoList[3].nameIndex3 = e.target.value | 633 | this.pickerInfoList[3].nameIndex3 = e.target.value |
| 569 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] | 634 | this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value] |
| 570 | }, | 635 | }, |
| 571 | changeShow(num) { | 636 | changeShow(num) { |
| 572 | this.show[num] = !this.show[num] | 637 | this.show[num] = !this.show[num] |
| 573 | this.$forceUpdate() | 638 | this.$forceUpdate() |
| 574 | }, | 639 | }, |
| 575 | onClickItem(index, i) { | 640 | onClickItem(index, i) { |
| 576 | if (this.current[index] !== i) { | 641 | if (this.current[index] !== i) { |
| 577 | this.current[index] = i | 642 | this.current[index] = i |
| 578 | } | 643 | } |
| 579 | this.$forceUpdate() | 644 | this.$forceUpdate() |
| 580 | }, | 645 | }, |
| 581 | // onClickItem1(index) { | 646 | // onClickItem1(index) { |
| 582 | // if (this.current1 !== index) { | 647 | // if (this.current1 !== index) { |
| 583 | // this.current1 = index | 648 | // this.current1 = index |
| 584 | // this.chooseRes1 = this.chooseItem1[index].describ | 649 | // this.chooseRes1 = this.chooseItem1[index].describ |
| 585 | // } | 650 | // } |
| 586 | // }, | 651 | // }, |
| 587 | // onClickItem2(index) { | 652 | // onClickItem2(index) { |
| 588 | // if (this.current2 !== index) { | 653 | // if (this.current2 !== index) { |
| 589 | // this.current2 = index | 654 | // this.current2 = index |
| 590 | // this.chooseRes2 = this.chooseItem2[index].num | 655 | // this.chooseRes2 = this.chooseItem2[index].num |
| 591 | // } | 656 | // } |
| 592 | // }, | 657 | // }, |
| 593 | // onClickItem3(index) { | 658 | // onClickItem3(index) { |
| 594 | // if (this.current3 !== index) { | 659 | // if (this.current3 !== index) { |
| 595 | // this.current3 = index | 660 | // this.current3 = index |
| 596 | // this.chooseRes3 = this.chooseItem3[index] | 661 | // this.chooseRes3 = this.chooseItem3[index] |
| 597 | // } | 662 | // } |
| 598 | // }, | 663 | // }, |
| 599 | counter(isadd) { | 664 | counter(isadd) { |
| 600 | if (isadd) { | 665 | if (isadd) { |
| 601 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ | 666 | this.count >= this.maxCount ? this.addDisabled = true : this.count++ |
| 602 | } else { | 667 | } else { |
| 603 | this.count <= 1 ? this.desDisabled = true : this.count-- | 668 | this.count <= 1 ? this.desDisabled = true : this.count-- |
| 604 | } | 669 | } |
| 605 | }, | 670 | }, |
| 606 | toComfirmOrder() { | 671 | toComfirmOrder() { |
| 607 | // 先处理验光部分的逻辑，如果ok在跳转 | 672 | // 先处理验光部分的逻辑，如果ok在跳转 |
| 608 | let flag = 0 | 673 | let flag = 0 |
| 609 | if (this.name === '') { | 674 | if (this.name === '') { |
| 610 | uni.showToast({ | 675 | uni.showToast({ |
| 611 | title: '请输入验光单取名', | 676 | title: '请输入验光单取名', |
| 612 | icon: 'none', | 677 | icon: 'none', |
| 613 | duration: 2000, | 678 | duration: 2000, |
| 614 | }) | 679 | }) |
| 615 | } else { | 680 | } else { |
| 616 | if (this.pd === '') { | 681 | if (this.pd === '') { |
| 617 | uni.showToast({ | 682 | uni.showToast({ |
| 618 | title: '请输入瞳距', | 683 | title: '请输入瞳距', |
| 619 | icon: 'none', | 684 | icon: 'none', |
| 620 | duration: 2000, | 685 | duration: 2000, |
| 621 | }) | 686 | }) |
| 622 | } else { | 687 | } else { |
| 623 | if (this.kinds === 1) { | 688 | if (this.kinds === 1) { |
| 624 | // 添加用户验光单 | 689 | // 添加用户验光单 |
| 625 | console.log('kinds====>', this.pickerInfoChioce.leftSph) | 690 | console.log('kinds====>', this.pickerInfoChioce.leftSph) |
| 626 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) | 691 | console.log('kinds====>', this.pickerInfoChioce.leftSph === Number) |
| 627 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) | 692 | console.log('kinds====>', this.pickerInfoChioce.rightSph === Number) |
| 628 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || | 693 | if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' || |
| 629 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || | 694 | this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' || |
| 630 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' | 695 | this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === '' |
| 631 | ) { | 696 | ) { |
| 632 | uni.showToast({ | 697 | uni.showToast({ |
| 633 | title: '请输入您的验光数据', | 698 | title: '请输入您的验光数据', |
| 634 | icon: 'none', | 699 | icon: 'none', |
| 635 | duration: 2000, | 700 | duration: 2000, |
| 636 | }) | 701 | }) |
| 637 | } else { | 702 | } else { |
| 638 | if (this.confirm) { | 703 | if (this.confirm) { |
| 639 | store.dispatch('myLoveList/addMylove', { | 704 | store.dispatch('myLoveList/addMylove', { |
| 640 | uid: this.$store.state.user.userInfo.uid, | 705 | uid: this.$store.state.user.userInfo.uid, |
| 641 | openid: this.$store.state.user.userInfo.openid, | 706 | openid: this.$store.state.user.userInfo.openid, |
| 642 | // mp_name: this.$store.state.user.userInfo.mp_name, | 707 | // mp_name: this.$store.state.user.userInfo.mp_name, |
| 643 | leftSph: this.pickerInfoChioce.leftSph, | 708 | leftSph: this.pickerInfoChioce.leftSph, |
| 644 | rightSph: this.pickerInfoChioce.rightSph, | 709 | rightSph: this.pickerInfoChioce.rightSph, |
| 645 | leftCyl: this.pickerInfoChioce.leftCyl, | 710 | leftCyl: this.pickerInfoChioce.leftCyl, |
| 646 | rightCyl: this.pickerInfoChioce.rightCyl, | 711 | rightCyl: this.pickerInfoChioce.rightCyl, |
| 647 | leftAxi: this.pickerInfoChioce.leftAxi, | 712 | leftAxi: this.pickerInfoChioce.leftAxi, |
| 648 | rightAxi: this.pickerInfoChioce.rightAxi, | 713 | rightAxi: this.pickerInfoChioce.rightAxi, |
| 649 | pd: this.pd, // 瞳距 | 714 | pd: this.pd, // 瞳距 |
| 650 | mp_name: this.name, | 715 | mp_name: this.name, |
| 651 | // time: this.pickerInfoChioce.time, | 716 | // time: this.pickerInfoChioce.time, |
| 652 | // img_url2: "http://localhost:8087/images/shop_1/1/", | 717 | // img_url2: "http://localhost:8087/images/shop_1/1/", |
| 653 | }).then(({ mp_id: mpId }) => { | 718 | }).then(({ mp_id: mpId }) => { |
| 654 | this.mp_id = mpId | 719 | this.mp_id = mpId |
| 655 | }) | 720 | }) |
| 656 | flag = 1 | 721 | flag = 1 |
| 657 | } else { | 722 | } else { |
| 658 | uni.showToast({ | 723 | uni.showToast({ |
| 659 | title: '请确认您的验光数据', | 724 | title: '请确认您的验光数据', |
| 660 | icon: 'none', | 725 | icon: 'none', |
| 661 | duration: 3000, | 726 | duration: 3000, |
| 662 | }) | 727 | }) |
| 663 | } | 728 | } |
| 664 | } | 729 | } |
| 665 | } | 730 | } |
| 666 | if (this.kinds === 2) { | 731 | if (this.kinds === 2) { |
| 667 | // console.log('kinds====>',this.kinds) | 732 | // console.log('kinds====>',this.kinds) |
| 668 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) | 733 | // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) |
| 669 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) | 734 | // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) |
| 670 | if (this.confirm) { | 735 | if (this.confirm) { |
| 671 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] | 736 | const leftList = ['leftSph', 'leftCyl', 'leftAxi'] |
| 672 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] | 737 | const rightList = ['rightSph', 'rightCyl', 'rightAxi'] |
| 673 | // let flag=0; | 738 | // let flag=0; |
| 674 | if (this.name !== this.oldname) { | 739 | if (this.name !== this.oldname) { |
| 675 | store.dispatch('myLoveList/updateMylove', { | 740 | store.dispatch('myLoveList/updateMylove', { |
| 676 | uid: this.$store.state.user.userInfo.uid, | 741 | uid: this.$store.state.user.userInfo.uid, |
| 677 | openid: this.$store.state.user.userInfo.openid, | 742 | openid: this.$store.state.user.userInfo.openid, |
| 678 | mp_id: this.mp_id, | 743 | mp_id: this.mp_id, |
| 679 | keyname: 'name', | 744 | keyname: 'name', |
| 680 | keyvalue: this.name, | 745 | keyvalue: this.name, |
| 681 | }) | 746 | }) |
| 682 | flag = 1 | 747 | flag = 1 |
| 683 | } | 748 | } |
| 684 | if (this.pd !== this.oldpd) { | 749 | if (this.pd !== this.oldpd) { |
| 685 | store.dispatch('myLoveList/updateMylove', { | 750 | store.dispatch('myLoveList/updateMylove', { |
| 686 | uid: this.$store.state.user.userInfo.uid, | 751 | uid: this.$store.state.user.userInfo.uid, |
| 687 | openid: this.$store.state.user.userInfo.openid, | 752 | openid: this.$store.state.user.userInfo.openid, |
| 688 | mp_id: this.mp_id, | 753 | mp_id: this.mp_id, |
| 689 | keyname: 'pd', | 754 | keyname: 'pd', |
| 690 | keyvalue: this.pd, | 755 | keyvalue: this.pd, |
| 691 | }) | 756 | }) |
| 692 | flag = 1 | 757 | flag = 1 |
| 693 | } | 758 | } |
| 694 | // 先验证是否输入有无空 | 759 | // 先验证是否输入有无空 |
| 695 | let q = true | 760 | let q = true |
| 696 | for (let k = 0; k < 3; k++) { | 761 | for (let k = 0; k < 3; k++) { |
| 697 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && | 762 | q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' && |
| 698 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') | 763 | this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '') |
| 699 | } | 764 | } |
| 700 | if (q) { | 765 | if (q) { |
| 701 | for (let j = 0; j < 3; j++) { | 766 | for (let j = 0; j < 3; j++) { |
| 702 | if (this.pickerInfoList[j].nameIndex1 !== 0) { | 767 | if (this.pickerInfoList[j].nameIndex1 !== 0) { |
| 703 | store.dispatch('myLoveList/updateMylove', { | 768 | store.dispatch('myLoveList/updateMylove', { |
| 704 | uid: this.$store.state.user.userInfo.uid, | 769 | uid: this.$store.state.user.userInfo.uid, |
| 705 | openid: this.$store.state.user.userInfo.openid, | 770 | openid: this.$store.state.user.userInfo.openid, |
| 706 | mp_id: this.mp_id, | 771 | mp_id: this.mp_id, |
| 707 | keyname: leftList[j], | 772 | keyname: leftList[j], |
| 708 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], | 773 | keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], |
| 709 | }) | 774 | }) |
| 710 | } | 775 | } |
| 711 | if (this.pickerInfoList[j].nameIndex2 !== 0) { | 776 | if (this.pickerInfoList[j].nameIndex2 !== 0) { |
| 712 | store.dispatch('myLoveList/updateMylove', { | 777 | store.dispatch('myLoveList/updateMylove', { |
| 713 | uid: this.$store.state.user.userInfo.uid, | 778 | uid: this.$store.state.user.userInfo.uid, |
| 714 | openid: this.$store.state.user.userInfo.openid, | 779 | openid: this.$store.state.user.userInfo.openid, |
| 715 | mp_id: this.mp_id, | 780 | mp_id: this.mp_id, |
| 716 | keyname: rightList[j], | 781 | keyname: rightList[j], |
| 717 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], | 782 | keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2], |
| 718 | }) | 783 | }) |
| 719 | } | 784 | } |
| 720 | flag = 1 | 785 | flag = 1 |
| 721 | } | 786 | } |
| 722 | } else { | 787 | } else { |
| 723 | flag = 0 | 788 | flag = 0 |
| 724 | uni.showToast({ | 789 | uni.showToast({ |
| 725 | title: '请输入您的验光数据', | 790 | title: '请输入您的验光数据', |
| 726 | icon: 'none', | 791 | icon: 'none', |
| 727 | duration: 2000, | 792 | duration: 2000, |
| 728 | }) | 793 | }) |
| 729 | } | 794 | } |
| 730 | if (flag !== 0) { | 795 | if (flag !== 0) { |
| 731 | store.dispatch('myLoveList/getLoveList', { | 796 | store.dispatch('myLoveList/getLoveList', { |
| 732 | uid: this.$store.state.user.userInfo.uid, | 797 | uid: this.$store.state.user.userInfo.uid, |
| 733 | }) | 798 | }) |
| 734 | } | 799 | } |
| 735 | } else { | 800 | } else { |
| 736 | uni.showToast({ | 801 | uni.showToast({ |
| 737 | title: '请确认您的验光数据', | 802 | title: '请确认您的验光数据', |
| 738 | icon: 'none', | 803 | icon: 'none', |
| 739 | duration: 3000, | 804 | duration: 3000, |
| 740 | }) | 805 | }) |
| 741 | } | 806 | } |
| 742 | } | 807 | } |
| 743 | } | 808 | } |
| 744 | } | 809 | } |
| 745 | if (flag !== 0) { | 810 | if (flag !== 0) { |
| 746 | // 如果数据验证无误，那么更新验光单的数据 | 811 | // 如果数据验证无误，那么更新验光单的数据 |
| 747 | store.dispatch('myLoveList/getLoveList', { | 812 | store.dispatch('myLoveList/getLoveList', { |
| 748 | uid: this.$store.state.user.userInfo.uid, | 813 | uid: this.$store.state.user.userInfo.uid, |
| 749 | }) | 814 | }) |
| 750 | let i = 0 | 815 | let i = 0 |
| 751 | // 判断出是哪一个sku被选中 | 816 | // 判断出是哪一个sku被选中 |
| 752 | for (let index = 0; index < this.current.length; index++) { | 817 | for (let index = 0; index < this.current.length; index++) { |
| 753 | console.log('index', index, i, index !== this.current.length - 1) | 818 | console.log('index', index, i, index !== this.current.length - 1) |
| 754 | if (index !== this.current.length - 1) { | 819 | if (index !== this.current.length - 1) { |
| 755 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | 820 | // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 |
| 756 | i = this.current[index] * this.attrList[1].attr.length | 821 | i = this.current[index] * this.attrList[1].attr.length |
| 757 | } else { | 822 | } else { |
| 758 | i += this.current[index] | 823 | i += this.current[index] |
| 759 | } | 824 | } |
| 760 | } | 825 | } |
| 761 | // 判断是否其输入的人员数据是否已存在 | 826 | // 判断是否其输入的人员数据是否已存在 |
| 762 | store.dispatch('order/saveParams', { | 827 | store.dispatch('order/saveParams', { |
| 763 | sk_id_arr: this.skuList[i], | 828 | sk_id_arr: this.skuList[i], |
| 764 | current: this.current, | 829 | current: this.current, |
| 765 | mp_id: this.mp_id, | 830 | mp_id: this.mp_id, |
| 766 | attrList: this.attrList, | 831 | attrList: this.attrList, |
| 767 | }) | 832 | }) |
| 768 | // 跳转到确认订单页面 | 833 | // 跳转到确认订单页面 |
| 769 | uni.navigateTo({ | 834 | uni.navigateTo({ |
| 770 | url: `../confirmOrder/confirmOrder?pid=${this.pid}`, | 835 | url: `../confirmOrder/confirmOrder?pid=${this.pid}`, |
| 771 | }) | 836 | }) |
| 772 | } | 837 | } |
| 773 | }, | 838 | }, |
| 774 | }, | 839 | }, |
| 775 | } | 840 | } |
| 776 | </script> | 841 | </script> |
| 777 | 842 | ||
| 778 | <style lang="scss"> | 843 | <style lang="scss"> |
| 779 | .content { | 844 | .content { |
| 780 | min-height: 100vh; | 845 | min-height: 100vh; |
| 781 | background-color: #f2f2f2; | 846 | background-color: #f2f2f2; |
| 782 | // padding-top: 20rpx; | 847 | // padding-top: 20rpx; |
| 783 | .goodInfo { | 848 | .goodInfo { |
| 784 | width: 100%; | 849 | width: 100%; |
| 785 | height: 272rpx; | 850 | height: 272rpx; |
| 786 | border-radius: 16rpx; | 851 | border-radius: 16rpx; |
| 787 | background-color: #ffffff; | 852 | background-color: #ffffff; |
| 788 | box-sizing: border-box; | 853 | box-sizing: border-box; |
| 789 | padding: 36rpx; | 854 | padding: 36rpx; |
| 790 | display: flex; | 855 | display: flex; |
| 791 | flex-direction: row; | 856 | flex-direction: row; |
| 792 | justify-content: flex-start; | 857 | justify-content: flex-start; |
| 793 | .imageWrap { | 858 | .imageWrap { |
| 794 | height: 188rpx; | 859 | height: 188rpx; |
| 795 | width: 188rpx; | 860 | width: 188rpx; |
| 796 | margin-right: 28rpx; | 861 | margin-right: 28rpx; |
| 797 | image { | 862 | image { |
| 798 | height: 188rpx; | 863 | height: 188rpx; |
| 799 | width: 188rpx; | 864 | width: 188rpx; |
| 800 | } | 865 | } |
| 801 | } | 866 | } |
| 802 | .infoRight { | 867 | .infoRight { |
| 803 | display: flex; | 868 | display: flex; |
| 804 | flex-direction: column; | 869 | flex-direction: column; |
| 805 | align-items: flex-start; | 870 | align-items: flex-start; |
| 806 | justify-content: space-between; | 871 | justify-content: space-between; |
| 807 | .goodName { | 872 | .goodName { |
| 808 | font-size: 28rpx; | 873 | font-size: 28rpx; |
| 809 | color: #333333; | 874 | color: #333333; |
| 810 | } | 875 | } |
| 811 | .remarks { | 876 | .remarks { |
| 812 | font-size: 20rpx; | 877 | font-size: 20rpx; |
| 813 | color: #999999; | 878 | color: #999999; |
| 814 | } | 879 | } |
| 815 | .priceBox { | 880 | .priceBox { |
| 816 | display: flex; | 881 | display: flex; |
| 817 | justify-content: space-between; | 882 | justify-content: space-between; |
| 818 | align-items: center; | 883 | align-items: center; |
| 819 | width: 100%; | 884 | width: 100%; |
| 820 | font-size: 14px; | 885 | font-size: 14px; |
| 821 | color: #999999; | 886 | color: #999999; |
| 822 | .price { | 887 | .price { |
| 823 | color: #ff6b4a; | 888 | color: #ff6b4a; |
| 824 | font-size: 28rpx; | 889 | font-size: 28rpx; |
| 825 | } | 890 | } |
| 826 | .counter { | 891 | .counter { |
| 827 | display: flex; | 892 | display: flex; |
| 828 | flex-direction: row; | 893 | flex-direction: row; |
| 829 | justify-content: space-between; | 894 | justify-content: space-between; |
| 830 | align-items: center; | 895 | align-items: center; |
| 831 | font-size: 28rpx; | 896 | font-size: 28rpx; |
| 832 | color: #333333; | 897 | color: #333333; |
| 833 | width: 122rpx; | 898 | width: 122rpx; |
| 834 | .btn { | 899 | .btn { |
| 835 | display: flex; | 900 | display: flex; |
| 836 | justify-content: center; | 901 | justify-content: center; |
| 837 | line-height: 32rpx; | 902 | line-height: 32rpx; |
| 838 | height: 32rpx; | 903 | height: 32rpx; |
| 839 | width: 32rpx; | 904 | width: 32rpx; |
| 840 | background-color: #f2f2f2; | 905 | background-color: #f2f2f2; |
| 841 | color: #cfcfcf; | 906 | color: #cfcfcf; |
| 842 | } | 907 | } |
| 843 | } | 908 | } |
| 844 | } | 909 | } |
| 845 | } | 910 | } |
| 846 | } | 911 | } |
| 847 | .goods-data { | 912 | .goods-data { |
| 848 | width: 100%; | 913 | width: 100%; |
| 849 | box-sizing: border-box; | 914 | box-sizing: border-box; |
| 850 | padding: 37rpx 40rpx 0 40rpx; | 915 | padding: 37rpx 40rpx 0 40rpx; |
| 851 | background: #ffffff; | 916 | background: #ffffff; |
| 852 | border-radius: 12rpx; | 917 | border-radius: 12rpx; |
| 853 | .opCollapse { | 918 | .opCollapse { |
| 854 | width: 100%; | 919 | width: 100%; |
| 855 | padding-bottom: 28rpx; | 920 | padding-bottom: 28rpx; |
| 856 | margin-top: 7px; | 921 | margin-top: 7px; |
| 857 | border-bottom: 1px solid #e9e9e9; | 922 | border-bottom: 1px solid #e9e9e9; |
| 858 | .head { | 923 | .head { |
| 859 | display: flex; | 924 | display: flex; |
| 860 | justify-content: space-between; | 925 | justify-content: space-between; |
| 861 | height: 24px; | 926 | height: 24px; |
| 862 | // font-family: PingFangSC-Medium; | 927 | // font-family: PingFangSC-Medium; |
| 863 | font-size: 16px; | 928 | font-size: 16px; |
| 864 | color: #333333; | 929 | color: #333333; |
| 865 | letter-spacing: -0.3px; | 930 | letter-spacing: -0.3px; |
| 866 | text-align: justify; | 931 | text-align: justify; |
| 867 | line-height: 24px; | 932 | line-height: 24px; |
| 868 | margin-bottom: 18rpx; | 933 | margin-bottom: 18rpx; |
| 869 | .headRighted { | 934 | .headRighted { |
| 870 | width: 0; | 935 | width: 0; |
| 871 | height: 0; | 936 | height: 0; |
| 872 | border-left: 4px solid transparent; | 937 | border-left: 4px solid transparent; |
| 873 | border-right: 4px solid transparent; | 938 | border-right: 4px solid transparent; |
| 874 | border-bottom: 4px solid #cfcfcf; | 939 | border-bottom: 4px solid #cfcfcf; |
| 875 | transform: scaleY(-1); | 940 | transform: scaleY(-1); |
| 876 | margin-top: 10px; | 941 | margin-top: 10px; |
| 877 | } | 942 | } |
| 878 | .headMid { | 943 | .headMid { |
| 879 | // font-family: PingFangSC-Regular; | 944 | // font-family: PingFangSC-Regular; |
| 880 | font-size: 10px; | 945 | font-size: 10px; |
| 881 | color: #999999; | 946 | color: #999999; |
| 882 | letter-spacing: -0.19px; | 947 | letter-spacing: -0.19px; |
| 883 | margin-left: -120rpx; | 948 | margin-left: -120rpx; |
| 884 | } | 949 | } |
| 885 | .headRight { | 950 | .headRight { |
| 886 | width: 0; | 951 | width: 0; |
| 887 | height: 0; | 952 | height: 0; |
| 888 | border-left: 4px solid transparent; | 953 | border-left: 4px solid transparent; |
| 889 | border-right: 4px solid transparent; | 954 | border-right: 4px solid transparent; |
| 890 | border-bottom: 4px solid #cfcfcf; | 955 | border-bottom: 4px solid #cfcfcf; |
| 891 | margin-top: 10px; | 956 | margin-top: 10px; |
| 892 | } | 957 | } |
| 893 | } | 958 | } |
| 894 | .body { | 959 | .body { |
| 895 | // font-family: PingFangSC-Regular; | 960 | // font-family: PingFangSC-Regular; |
| 896 | font-size: 12px; | 961 | font-size: 12px; |
| 897 | color: #666666; | 962 | color: #666666; |
| 898 | letter-spacing: 0; | 963 | letter-spacing: 0; |
| 899 | .bodyBox { | 964 | .bodyBox { |
| 900 | margin-top: 15px; | 965 | margin-top: 15px; |
| 901 | .names { | 966 | .names { |
| 902 | // font-family: PingFangSC-Regular; | 967 | // font-family: PingFangSC-Regular; |
| 903 | font-size: 12px; | 968 | font-size: 12px; |
| 904 | color: #151515; | 969 | color: #151515; |
| 905 | letter-spacing: 0; | 970 | letter-spacing: 0; |
| 906 | text-align: justify; | 971 | text-align: justify; |
| 907 | line-height: 17px; | 972 | line-height: 17px; |
| 908 | margin-left: 5px; | 973 | margin-left: 5px; |
| 909 | margin-right: 10px; | 974 | margin-right: 10px; |
| 910 | } | 975 | } |
| 911 | text { | 976 | text { |
| 912 | // font-family: PingFangSC-Regular; | 977 | // font-family: PingFangSC-Regular; |
| 913 | font-size: 12px; | 978 | font-size: 12px; |
| 914 | color: #666666; | 979 | color: #666666; |
| 915 | letter-spacing: 0; | 980 | letter-spacing: 0; |
| 916 | text-align: justify; | 981 | text-align: justify; |
| 917 | } | 982 | } |
| 918 | } | 983 | } |
| 919 | } | 984 | } |
| 920 | 985 | ||
| 921 | // .goods-form { | 986 | // .goods-form { |
| 922 | // display: flex; | 987 | // display: flex; |
| 923 | // flex-direction: column; | 988 | // flex-direction: column; |
| 924 | // align-items: center; | 989 | // align-items: center; |
| 925 | // justify-content: center; | 990 | // justify-content: center; |
| 926 | // background-color: #fff; | 991 | // background-color: #fff; |
| 927 | // width: 100%; | 992 | // width: 100%; |
| 928 | // .p1 { | 993 | // .p1 { |
| 929 | // font-size: 16px; | 994 | // font-size: 16px; |
| 930 | // color: #333333; | 995 | // color: #333333; |
| 931 | // letter-spacing: -0.3px; | 996 | // letter-spacing: -0.3px; |
| 932 | // text-align: justify; | 997 | // text-align: justify; |
| 933 | // line-height: 24px; | 998 | // line-height: 24px; |
| 934 | // margin: 4px 0; | 999 | // margin: 4px 0; |
| 935 | // } | 1000 | // } |
| 936 | // .p2 { | 1001 | // .p2 { |
| 937 | // font-size: 12px; | 1002 | // font-size: 12px; |
| 938 | // color: #999999; | 1003 | // color: #999999; |
| 939 | // letter-spacing: -0.23px; | 1004 | // letter-spacing: -0.23px; |
| 940 | // margin-bottom: 18rpx; | 1005 | // margin-bottom: 18rpx; |
| 941 | // } | 1006 | // } |
| 942 | // image { | 1007 | // image { |
| 943 | // width: 28rpx; | 1008 | // width: 28rpx; |
| 944 | // height: 26rpx; | 1009 | // height: 26rpx; |
| 945 | // } | 1010 | // } |
| 946 | // .confirm { | 1011 | // .confirm { |
| 947 | // display: flex; | 1012 | // display: flex; |
| 948 | // align-items: center; | 1013 | // align-items: center; |
| 949 | // font-size: 12px; | 1014 | // font-size: 12px; |
| 950 | // color: #666666; | 1015 | // color: #666666; |
| 951 | // letter-spacing: -0.23px; | 1016 | // letter-spacing: -0.23px; |
| 952 | // width: 684rpx; | 1017 | // width: 684rpx; |
| 953 | // image { | 1018 | // image { |
| 954 | // margin-right: 25rpx; | 1019 | // margin-right: 25rpx; |
| 955 | // } | 1020 | // } |
| 956 | // } | 1021 | // } |
| 957 | // .picker { | 1022 | // .picker { |
| 958 | // display: flex; | 1023 | // display: flex; |
| 959 | // flex-direction: column; | 1024 | // flex-direction: column; |
| 960 | // justify-content: center; | 1025 | // justify-content: center; |
| 961 | // align-items: center; | 1026 | // align-items: center; |
| 962 | // width: 100%; | 1027 | // width: 100%; |
| 963 | // image { | 1028 | // image { |
| 964 | // width: 10px; | 1029 | // width: 10px; |
| 965 | // height: 10px; | 1030 | // height: 10px; |
| 966 | // margin-right: 5px; | 1031 | // margin-right: 5px; |
| 967 | // } | 1032 | // } |
| 968 | // .picker-choice { | 1033 | // .picker-choice { |
| 969 | // display: flex; | 1034 | // display: flex; |
| 970 | // width: 684rpx; | 1035 | // width: 684rpx; |
| 971 | // align-items: center; | 1036 | // align-items: center; |
| 972 | // margin-bottom: 40rpx; | 1037 | // margin-bottom: 40rpx; |
| 973 | // .choice-left { | 1038 | // .choice-left { |
| 974 | // width: 210rpx; | 1039 | // width: 210rpx; |
| 975 | // .p11 { | 1040 | // .p11 { |
| 976 | // font-size: 14px; | 1041 | // font-size: 14px; |
| 977 | // color: #333333; | 1042 | // color: #333333; |
| 978 | // letter-spacing: -0.26px; | 1043 | // letter-spacing: -0.26px; |
| 979 | // text-align: justify; | 1044 | // text-align: justify; |
| 980 | // line-height: 24px; | 1045 | // line-height: 24px; |
| 981 | // } | 1046 | // } |
| 982 | // .p12 { | 1047 | // .p12 { |
| 983 | // font-size: 10px; | 1048 | // font-size: 10px; |
| 984 | // color: #3f3f3f; | 1049 | // color: #3f3f3f; |
| 985 | // letter-spacing: -0.19px; | 1050 | // letter-spacing: -0.19px; |
| 986 | // text-align: justify; | 1051 | // text-align: justify; |
| 987 | // line-height: 24px; | 1052 | // line-height: 24px; |
| 988 | // } | 1053 | // } |
| 989 | // } | 1054 | // } |
| 990 | // .p13 { | 1055 | // .p13 { |
| 991 | // font-size: 10px; | 1056 | // font-size: 10px; |
| 992 | // color: #999999; | 1057 | // color: #999999; |
| 993 | // letter-spacing: -0.19px; | 1058 | // letter-spacing: -0.19px; |
| 994 | // margin-right: 10px; | 1059 | // margin-right: 10px; |
| 995 | // } | 1060 | // } |
| 996 | // .p13-date { | 1061 | // .p13-date { |
| 997 | // font-size: 10px; | 1062 | // font-size: 10px; |
| 998 | // color: #999999; | 1063 | // color: #999999; |
| 999 | // letter-spacing: -0.19px; | 1064 | // letter-spacing: -0.19px; |
| 1000 | // margin-right: 5px; | 1065 | // margin-right: 5px; |
| 1001 | // } | 1066 | // } |
| 1002 | // .p14 { | 1067 | // .p14 { |
| 1003 | // font-size: 14px; | 1068 | // font-size: 14px; |
| 1004 | // color: #666666; | 1069 | // color: #666666; |
| 1005 | // letter-spacing: -0.26px; | 1070 | // letter-spacing: -0.26px; |
| 1006 | // text-align: center; | 1071 | // text-align: center; |
| 1007 | // width: 124rpx; | 1072 | // width: 124rpx; |
| 1008 | // border-bottom: 1px solid #cfcfcf; | 1073 | // border-bottom: 1px solid #cfcfcf; |
| 1009 | // } | 1074 | // } |
| 1010 | // } | 1075 | // } |
| 1011 | // } | 1076 | // } |
| 1012 | // } | 1077 | // } |
| 1013 | .goods-form { | 1078 | .goods-form { |
| 1014 | display: flex; | 1079 | display: flex; |
| 1015 | flex-direction: column; | 1080 | flex-direction: column; |
| 1016 | align-items: center; | 1081 | align-items: center; |
| 1017 | justify-content: center; | 1082 | justify-content: center; |
| 1018 | background-color: #fff; | 1083 | background-color: #fff; |
| 1019 | width: 100%; | 1084 | width: 100%; |
| 1020 | padding: 40rpx 0; | 1085 | padding: 40rpx 0; |
| 1021 | .p1 { | 1086 | .p1 { |
| 1022 | font-size: 16px; | 1087 | font-size: 16px; |
| 1023 | color: #333333; | 1088 | color: #333333; |
| 1024 | letter-spacing: -0.3px; | 1089 | letter-spacing: -0.3px; |
| 1025 | text-align: justify; | 1090 | text-align: justify; |
| 1026 | line-height: 24px; | 1091 | line-height: 24px; |
| 1027 | margin: 4px 0; | 1092 | margin: 4px 0; |
| 1028 | |||
| 1029 | } | 1093 | } |
| 1030 | .p2 { | 1094 | .p2 { |
| 1031 | font-size: 12px; | 1095 | font-size: 12px; |
| 1032 | color: #999999; | 1096 | color: #999999; |
| 1033 | letter-spacing: -0.23px; | 1097 | letter-spacing: -0.23px; |
| 1034 | margin-bottom: 32rpx; | 1098 | margin-bottom: 32rpx; |
| 1035 | } | 1099 | } |
| 1036 | .image2{ | 1100 | .image2 { |
| 1037 | width: 42rpx; | 1101 | width: 42rpx; |
| 1038 | height: 34rpx; | 1102 | height: 34rpx; |
| 1039 | margin-right: 12rpx; | 1103 | margin-right: 12rpx; |
| 1040 | } | 1104 | } |
| 1041 | .confirm { | 1105 | .confirm { |
| 1042 | display: flex; | 1106 | display: flex; |
| 1043 | align-items: center; | 1107 | align-items: center; |
| 1044 | font-size: 12px; | 1108 | font-size: 12px; |
| 1045 | color: #666666; | 1109 | color: #666666; |
| 1046 | letter-spacing: -0.23px; | 1110 | letter-spacing: -0.23px; |
| 1047 | width: 684rpx; | 1111 | width: 684rpx; |
| 1048 | .image1{ | 1112 | .image1 { |
| 1049 | margin-right:25rpx; | 1113 | margin-right: 25rpx; |
| 1050 | width: 42rpx; | 1114 | width: 42rpx; |
| 1051 | height: 38rpx; | 1115 | height: 38rpx; |
| 1052 | } | 1116 | } |
| 1053 | } | 1117 | } |
| 1054 | .picker{ | 1118 | .picker { |
| 1055 | display: flex; | 1119 | display: flex; |
| 1056 | flex-direction: column; | 1120 | flex-direction: column; |
| 1057 | justify-content: center; | 1121 | justify-content: center; |
| 1058 | align-items: center; | 1122 | align-items: center; |
| 1059 | width: 100%; | 1123 | width: 100%; |
| 1060 | 1124 | ||
| 1061 | .picker-choice{ | 1125 | .picker-choice { |
| 1062 | display: flex; | 1126 | display: flex; |
| 1063 | width: 684rpx; | 1127 | width: 684rpx; |
| 1064 | align-items: center; | 1128 | align-items: center; |
| 1065 | margin-bottom: 40rpx; | 1129 | margin-bottom: 40rpx; |
| 1066 | .input{ | 1130 | .input { |
| 1067 | border-bottom: 1px solid #CFCFCF; | 1131 | border-bottom: 1px solid #cfcfcf; |
| 1068 | height: 40rpx; | 1132 | height: 40rpx; |
| 1069 | } | 1133 | } |
| 1070 | .choice-left{ | 1134 | .choice-left { |
| 1071 | width: 210rpx; | 1135 | width: 210rpx; |
| 1072 | .pd{ | 1136 | .pd { |
| 1073 | font-size: 14px; | 1137 | font-size: 14px; |
| 1074 | color: #333333; | 1138 | color: #333333; |
| 1075 | letter-spacing: -0.26px; | 1139 | letter-spacing: -0.26px; |
| 1076 | text-align: justify; | 1140 | text-align: justify; |
| 1077 | line-height: 24px; | 1141 | line-height: 24px; |
| 1078 | margin-right: 44rpx; | 1142 | margin-right: 44rpx; |
| 1079 | } | 1143 | } |
| 1080 | .p11 { | 1144 | .p11 { |
| 1081 | font-size: 14px; | 1145 | font-size: 14px; |
| 1082 | color: #333333; | 1146 | color: #333333; |
| 1083 | letter-spacing: -0.26px; | 1147 | letter-spacing: -0.26px; |
| 1084 | text-align: justify; | 1148 | text-align: justify; |
| 1085 | line-height: 24px; | 1149 | line-height: 24px; |
| 1086 | // margin-right: 10px; | 1150 | // margin-right: 10px; |
| 1087 | } | 1151 | } |
| 1088 | .p12 { | 1152 | .p12 { |
| 1089 | font-size: 10px; | ||
| 1090 | color: #3F3F3F; | ||
| 1091 | letter-spacing: -0.19px; | ||
| 1092 | text-align: justify; | ||
| 1093 | line-height: 24px; | ||
| 1094 | } | ||
| 1095 | |||
| 1096 | } | ||
| 1097 | .p13 { | ||
| 1098 | font-size: 10px; | ||
| 1099 | color: #999999; | ||
| 1100 | letter-spacing: -0.19px; | ||
| 1101 | margin-right: 10px; | ||
| 1102 | } | ||
| 1103 | .p13-date { | ||
| 1104 | font-size: 10px; | 1153 | font-size: 10px; |
| 1105 | color: #999999; | 1154 | color: #3f3f3f; |
| 1106 | letter-spacing: -0.19px; | 1155 | letter-spacing: -0.19px; |
| 1107 | margin-right: 5px; | 1156 | text-align: justify; |
| 1157 | line-height: 24px; | ||
| 1158 | } | ||
| 1159 | } | ||
| 1160 | .p13 { | ||
| 1161 | font-size: 10px; | ||
| 1162 | color: #999999; | ||
| 1163 | letter-spacing: -0.19px; | ||
| 1164 | margin-right: 10px; | ||
| 1165 | } | ||
| 1166 | .p13-date { | ||
| 1167 | font-size: 10px; | ||
| 1168 | color: #999999; | ||
| 1169 | letter-spacing: -0.19px; | ||
| 1170 | margin-right: 5px; | ||
| 1171 | } | ||
| 1172 | picker { | ||
| 1173 | width: 144rpx; | ||
| 1174 | height: 40rpx; | ||
| 1175 | display: flex; | ||
| 1176 | position: relative; | ||
| 1177 | .p14 { | ||
| 1178 | font-size: 14px; | ||
| 1179 | color: #666666; | ||
| 1180 | letter-spacing: -0.26px; | ||
| 1181 | text-align: center; | ||
| 1182 | width: 124rpx; | ||
| 1183 | border-bottom: 1px solid #cfcfcf; | ||
| 1184 | height: 38rpx; | ||
| 1185 | } | ||
| 1186 | image { | ||
| 1187 | width: 20rpx; | ||
| 1188 | height: 20rpx; | ||
| 1189 | position: absolute; | ||
| 1190 | right: 20rpx; | ||
| 1191 | top: 8rpx; | ||
| 1192 | } | ||
| 1108 | } | 1193 | } |
| 1109 | picker{ | ||
| 1110 | width: 144rpx; | ||
| 1111 | height: 40rpx; | ||
| 1112 | display: flex; | ||
| 1113 | position: relative; | ||
| 1114 | .p14 { | ||
| 1115 | font-size: 14px; | ||
| 1116 | color: #666666; | ||
| 1117 | letter-spacing: -0.26px; | ||
| 1118 | text-align: center; | ||
| 1119 | width: 124rpx; | ||
| 1120 | border-bottom: 1px solid #CFCFCF; | ||
| 1121 | height: 38rpx; | ||
| 1122 | } | ||
| 1123 | image{ | ||
| 1124 | width: 20rpx; | ||
| 1125 | height: 20rpx; | ||
| 1126 | position: absolute; | ||
| 1127 | right: 20rpx; | ||
| 1128 | top: 8rpx; | ||
| 1129 | } | 1194 | } |
| 1130 | } | 1195 | } |
| 1131 | |||
| 1132 | } | 1196 | } |
| 1133 | } | 1197 | } |
| 1134 | } | ||
| 1135 | } | ||
| 1136 | } | 1198 | } |
| 1137 | .choose { | 1199 | .choose { |
| 1138 | width: 100%; | 1200 | width: 100%; |
| 1139 | background: #ffffff; | 1201 | background: #ffffff; |
| 1140 | border-radius: 12rpx; | 1202 | border-radius: 12rpx; |
| 1141 | margin-top: 20rpx; | 1203 | margin-top: 20rpx; |
| 1142 | padding: 40rpx 40rpx 112rpx 40rpx; | 1204 | padding: 40rpx 40rpx 112rpx 40rpx; |
| 1143 | box-sizing: border-box; | 1205 | box-sizing: border-box; |
| 1144 | .chooseItem { | 1206 | .chooseItem { |
| 1145 | width: 100%; | 1207 | width: 100%; |
| 1146 | padding-bottom: 32rpx; | 1208 | padding-bottom: 32rpx; |
| 1147 | border-bottom: 1px solid #e9e9e9; | 1209 | border-bottom: 1px solid #e9e9e9; |
| 1148 | margin-bottom: 28rpx; | 1210 | margin-bottom: 28rpx; |